monitor_v3 / anji-plus-report · Commits

Go to a project

Authored by 鲁尚清
Commit 04cc26245f22f18226d1e415e2000596be731123 1 parent 956001c5

性能趋势接口调用，仪表盘组件---部分功能

Inline Side-by-side
Showing 8 changed files with 913 additions and 18 deletions
@@ -13,7 +13,9 @@ import axios from 'axios'; @@ -13,7 +13,9 @@ import axios from 'axios';
13 //性能趋势图路径 13 //性能趋势图路径
14 14
15 export function getTrendBaseUrl() { 15 export function getTrendBaseUrl() {
16 - return process.env.BASE_API_other 16 + let baseUrl=process.env.BASE_API_other;
  17 + // baseUrl='http://localhost:8088';
  18 + return baseUrl;
17 } 19 }
18 //获取告警策略列表数据 20 //获取告警策略列表数据
19 export function getAlarmPolicy(params) { 21 export function getAlarmPolicy(params) {
@@ -95,7 +95,7 @@ export default { @@ -95,7 +95,7 @@ export default {
95 type:String, 95 type:String,
96 default:'', 96 default:'',
97 },//弹框名称 97 },//弹框名称
98 - detailMenubox: { 98 + detailMenubox: {
99 type: Array, 99 type: Array,
100 default: [ 100 default: [
101 { 101 {
@@ -298,13 +298,13 @@ export default { @@ -298,13 +298,13 @@ export default {
298 }, 298 },
299 //设置性能趋势图 299 //设置性能趋势图
300 setTrend(tableDataValueHead){ 300 setTrend(tableDataValueHead){
301 - let urlParams='resId='+this.getUrlToken.resId+'&kpiId='+this.pressingValue.kpiId+'&flag='+this.pressingValue.flag+'&warning='+this.pressingValue.iswarning 301 + let urlParams='resId='+this.getUrlToken.resId+'&kpiId='+this.pressingValue.kpiId+'&flag='+this.pressingValue.flag+'&warning='+this.pressingValue.isWarning
302 +'&ident='+this.pressingValue.kpiIdent 302 +'&ident='+this.pressingValue.kpiIdent
303 +'&trend='+this.pressingValue.isTrend 303 +'&trend='+this.pressingValue.isTrend
304 +'&unit='+tableDataValueHead.unit 304 +'&unit='+tableDataValueHead.unit
305 +'&name='+this.pressingValue.kpiName + " " + tableDataValueHead.name; 305 +'&name='+this.pressingValue.kpiName + " " + tableDataValueHead.name;
306 let baseUrl=getTrendBaseUrl(); 306 let baseUrl=getTrendBaseUrl();
307 - this.trendSrc=baseUrl+'/vue3/index.html#/vue3/pieDetailLine?'+urlParams; 307 + this.trendSrc=baseUrl+'/vue3/index.html#/vue3/pieDetailLine?'+urlParams+'&access_token='+this.getUrlToken.token;
308 }, 308 },
309 //获取告警策略列表数据 309 //获取告警策略列表数据
310 async getAlarmPolicyData(kpiId){ 310 async getAlarmPolicyData(kpiId){
  1 +/*
  2 + * @Descripttion: 仪表盘使用率 json
  3 + * @version:
  4 + * @Author: lsq
  5 + * @Date: 2022-2-16
  6 + * @LastEditors: lsq
  7 + * @LastEditTime: 2022-2-16
  8 + */
  9 +export const monitorGaugeRate = {
  10 + code: 'monitor-gauge-rate',
  11 + type: 'chart',
  12 + label: '仪表盘使用率',
  13 + icon: 'iconyibiaopan',
  14 + options: {
  15 + // 配置
  16 + setup: [
  17 + {
  18 + type: 'el-input-text',
  19 + label: '图层名称',
  20 + name: 'layerName',
  21 + required: false,
  22 + placeholder: '',
  23 + value: '仪表盘使用率',
  24 + },
  25 + {
  26 + type: 'el-input-text',
  27 + label: '标题名称',
  28 + name: 'titleName',
  29 + required: false,
  30 + placeholder: '',
  31 + value: 'CPU使用率',
  32 + },
  33 + {
  34 + type: 'el-select',
  35 + label: '标题位置',
  36 + name: 'textAlign',
  37 + required: false,
  38 + placeholder: '',
  39 + selectOptions: [
  40 + {code: 'center', name: '居中'},
  41 + {code: 'left', name: '左对齐'},
  42 + {code: 'right', name: '右对齐'},
  43 + ],
  44 + value: 'left'
  45 + },
  46 + {
  47 + type: 'custom-upload',
  48 + label: '标题图片地址',
  49 + name: 'imageAdress',
  50 + required: false,
  51 + placeholder: '',
  52 + value: '',
  53 + },
  54 + [
  55 + {
  56 + name: "下探设置",
  57 + list: [
  58 + {
  59 + type: 'el-switch',
  60 + label: '是否有下探',
  61 + name: 'probeDown',
  62 + required: false,
  63 + placeholder: '',
  64 + value: true,
  65 + },
  66 + {
  67 + type: 'el-switch',
  68 + label: '告警设置',
  69 + name: 'alarm_setting',
  70 + required: false,
  71 + placeholder: '',
  72 + value: true
  73 + },
  74 + {
  75 + type: 'el-switch',
  76 + label: '过滤单指标',
  77 + name: 'filter_sheet_indicator',
  78 + required: false,
  79 + placeholder: '',
  80 + value: true
  81 + },
  82 + {
  83 + type: 'el-switch',
  84 + label: '过滤多指标',
  85 + name: 'filter_multiple_indicators',
  86 + required: false,
  87 + placeholder: '',
  88 + value: true
  89 + },
  90 + {
  91 + type: 'el-switch',
  92 + label: '性能趋势',
  93 + name: 'performance_trends',
  94 + required: false,
  95 + placeholder: '',
  96 + value: true
  97 + },
  98 + {
  99 + type: 'el-switch',
  100 + label: '压制次数',
  101 + name: 'pressing_times',
  102 + required: false,
  103 + placeholder: '',
  104 + value: true
  105 + },
  106 + {
  107 + type: 'el-switch',
  108 + label: '纳入容量预测',
  109 + name: 'include_capacity_forecast',
  110 + required: false,
  111 + placeholder: '',
  112 + value: true
  113 + }
  114 + ]
  115 + },
  116 + ],
  117 + {
  118 + type: 'vue-color',
  119 + label: '背景颜色',
  120 + name: 'background',
  121 + required: false,
  122 + placeholder: '',
  123 + value: ''
  124 + },
  125 + [
  126 + {
  127 + name: "圆环设置",
  128 + list: [
  129 + {
  130 + type: 'el-switch',
  131 + label: '显示',
  132 + name: 'ringShow',
  133 + required: false,
  134 + placeholder: '',
  135 + value: true,
  136 + },
  137 + {
  138 + type: 'el-input-number',
  139 + label: '圆环宽度',
  140 + name: 'pieWeight',
  141 + require: false,
  142 + placeholder: '',
  143 + value: 10,
  144 + },
  145 + ]
  146 + },
  147 + {
  148 + name: '0%~30%渐变色',
  149 + list: [
  150 + {
  151 + type: 'vue-color',
  152 + label: '0处颜色',
  153 + name: 'color30p0',
  154 + required: false,
  155 + placeholder: '',
  156 + value: 'rgba(0, 237, 3,0.1)'
  157 + },
  158 + {
  159 + type: 'vue-color',
  160 + label: '0.5处颜色',
  161 + name: 'color30p5',
  162 + required: false,
  163 + placeholder: '',
  164 + value: 'rgba(0, 237, 3,0.6)'
  165 + },
  166 + {
  167 + type: 'vue-color',
  168 + label: '1处颜色',
  169 + name: 'color30p10',
  170 + required: false,
  171 + placeholder: '',
  172 + value: 'rgba(0, 237, 3,1)'
  173 + },
  174 + ]
  175 + },
  176 + {
  177 + name: '30%~70%渐变色',
  178 + list: [
  179 + {
  180 + type: 'vue-color',
  181 + label: '0处颜色',
  182 + name: 'color70p0',
  183 + required: false,
  184 + placeholder: '',
  185 + value: 'rgba(255, 184, 0,0.1)'
  186 + },
  187 + {
  188 + type: 'vue-color',
  189 + label: '0.5处颜色',
  190 + name: 'color70p5',
  191 + required: false,
  192 + placeholder: '',
  193 + value: 'rgba(255, 184, 0,0.6)'
  194 + },
  195 + {
  196 + type: 'vue-color',
  197 + label: '1处颜色',
  198 + name: 'color70p10',
  199 + required: false,
  200 + placeholder: '',
  201 + value: 'rgba(255, 184, 0,1)'
  202 + },
  203 + ]
  204 + },
  205 + {
  206 + name: '70%~100%渐变色',
  207 + list: [
  208 + {
  209 + type: 'vue-color',
  210 + label: '0处颜色',
  211 + name: 'color100p0',
  212 + required: false,
  213 + placeholder: '',
  214 + value: 'rgba(175, 36, 74,0.1)'
  215 + },
  216 + {
  217 + type: 'vue-color',
  218 + label: '0.5处颜色',
  219 + name: 'color100p5',
  220 + required: false,
  221 + placeholder: '',
  222 + value: 'rgba(255, 36, 74,0.6)'
  223 + },
  224 + {
  225 + type: 'vue-color',
  226 + label: '1处颜色',
  227 + name: 'color100p10',
  228 + required: false,
  229 + placeholder: '',
  230 + value: 'rgba(255, 36, 74,1)'
  231 + },
  232 + ]
  233 + },
  234 + {
  235 + name: "刻度线",
  236 + list: [
  237 + {
  238 + type: 'el-switch',
  239 + label: '显示',
  240 + name: 'tickShow',
  241 + required: false,
  242 + placeholder: '',
  243 + value: true,
  244 + },
  245 + {
  246 + type: 'el-input-number',
  247 + label: '距离',
  248 + name: 'tickDistance',
  249 + require: false,
  250 + placeholder: '',
  251 + value: 0,
  252 + },
  253 + {
  254 + type: 'el-input-number',
  255 + label: '长度',
  256 + name: 'tickLength',
  257 + require: false,
  258 + placeholder: '',
  259 + value: 10,
  260 + },
  261 + {
  262 + type: 'el-input-number',
  263 + label: '宽度',
  264 + name: 'tickWidth',
  265 + require: false,
  266 + placeholder: '',
  267 + value: 2,
  268 + },
  269 + ]
  270 + },
  271 + {
  272 + name: "指标线",
  273 + list: [
  274 + {
  275 + type: 'el-switch',
  276 + label: '显示',
  277 + name: 'splitShow',
  278 + required: false,
  279 + placeholder: '',
  280 + value: true,
  281 + },
  282 + {
  283 + type: 'el-input-number',
  284 + label: '距离',
  285 + name: 'splitDistance',
  286 + require: false,
  287 + placeholder: '',
  288 + value: 0,
  289 + },
  290 + {
  291 + type: 'el-input-number',
  292 + label: '长度',
  293 + name: 'splitLength',
  294 + require: false,
  295 + placeholder: '',
  296 + value: 14,
  297 + },
  298 + {
  299 + type: 'el-input-number',
  300 + label: '宽度',
  301 + name: 'splitWidth',
  302 + require: false,
  303 + placeholder: '',
  304 + value: 4,
  305 + },
  306 + ]
  307 + },
  308 + {
  309 + name: "指标",
  310 + list: [
  311 + {
  312 + type: 'el-switch',
  313 + label: '显示',
  314 + name: 'labelShow',
  315 + required: false,
  316 + placeholder: '',
  317 + value: true,
  318 + },
  319 + {
  320 + type: 'el-input-number',
  321 + label: '距离',
  322 + name: 'labelDistance',
  323 + require: false,
  324 + placeholder: '',
  325 + value: 0,
  326 + },
  327 + {
  328 + type: 'el-input-number',
  329 + label: '字号',
  330 + name: 'labelFontSize',
  331 + require: false,
  332 + placeholder: '',
  333 + value: 10,
  334 + },
  335 + {
  336 + type: 'vue-color',
  337 + label: '颜色',
  338 + name: 'labelColor',
  339 + required: false,
  340 + placeholder: '',
  341 + value: '#fff',
  342 + },
  343 + ]
  344 + },
  345 + {
  346 + name: "数值",
  347 + list: [
  348 + {
  349 + type: 'vue-color',
  350 + label: '颜色',
  351 + name: 'labelColor',
  352 + required: false,
  353 + placeholder: '',
  354 + value: '#fff',
  355 + },
  356 + {
  357 + type: 'el-input-number',
  358 + label: '字号',
  359 + name: 'labelFontSize',
  360 + require: false,
  361 + placeholder: '',
  362 + value: 14,
  363 + },
  364 + {
  365 + type: 'el-select',
  366 + label: '字体粗细',
  367 + name: 'labelFontWeight',
  368 + required: false,
  369 + placeholder: '',
  370 + selectOptions: [
  371 + {code: 'normal', name: '正常'},
  372 + {code: 'bold', name: '粗体'},
  373 + {code: 'bolder', name: '特粗体'},
  374 + {code: 'lighter', name: '细体'}
  375 + ],
  376 + value: 'normal'
  377 + },
  378 + ]
  379 + },
  380 + ],
  381 + ],
  382 + // 数据
  383 + data: [
  384 + {
  385 + type: 'el-radio-group',
  386 + label: '数据类型',
  387 + name: 'dataType',
  388 + require: false,
  389 + placeholder: '',
  390 + selectValue: true,
  391 + selectOptions: [
  392 + {
  393 + code: 'staticData',
  394 + name: '静态数据',
  395 + },
  396 + {
  397 + code: 'dynamicData',
  398 + name: '动态数据',
  399 + },
  400 + ],
  401 + value: 'staticData',
  402 + },
  403 + {
  404 + type: 'el-input-number',
  405 + label: '刷新时间(毫秒)',
  406 + name: 'refreshTime',
  407 + relactiveDom: 'dataType',
  408 + relactiveDomValue: 'dynamicData',
  409 + value: 5000
  410 + },
  411 + {
  412 + type: 'el-button',
  413 + label: '静态数据',
  414 + name: 'staticData',
  415 + required: false,
  416 + placeholder: '',
  417 + relactiveDom: 'dataType',
  418 + relactiveDomValue: 'staticData',
  419 + value: [
  420 + {"num":50}
  421 + ],
  422 + },
  423 + {
  424 + type: 'dycustComponents',
  425 + label: '',
  426 + name: 'dynamicData',
  427 + required: false,
  428 + placeholder: '',
  429 + relactiveDom: 'dataType',
  430 + chartType: 'widget-text',
  431 + dictKey: 'TEXT_PROPERTIES',
  432 + relactiveDomValue: 'dynamicData',
  433 + value: '',
  434 + },
  435 + ],
  436 + // 坐标
  437 + position: [
  438 + {
  439 + type: 'el-input-number',
  440 + label: '左边距',
  441 + name: 'left',
  442 + required: false,
  443 + placeholder: '',
  444 + value: 0,
  445 + },
  446 + {
  447 + type: 'el-input-number',
  448 + label: '上边距',
  449 + name: 'top',
  450 + required: false,
  451 + placeholder: '',
  452 + value: 0,
  453 + },
  454 + {
  455 + type: 'el-input-number',
  456 + label: '宽度',
  457 + name: 'width',
  458 + required: false,
  459 + placeholder: '该容器在1920px大屏中的宽度',
  460 + value: 400,
  461 + },
  462 + {
  463 + type: 'el-input-number',
  464 + label: '高度',
  465 + name: 'height',
  466 + required: false,
  467 + placeholder: '该容器在1080px大屏中的高度',
  468 + value: 200,
  469 + },
  470 + ],
  471 + }
  472 +}
@@ -39,6 +39,7 @@ import {monitorResourceStatus} from "./echartsConfigJson/monitorConfigJson/monit @@ -39,6 +39,7 @@ import {monitorResourceStatus} from "./echartsConfigJson/monitorConfigJson/monit
39 import {monitorBasicInformation} from "./echartsConfigJson/monitorConfigJson/monitor-basic-information"; 39 import {monitorBasicInformation} from "./echartsConfigJson/monitorConfigJson/monitor-basic-information";
40 import {monitorDetailTable} from "./echartsConfigJson/monitorConfigJson/monitor-detail-table"; 40 import {monitorDetailTable} from "./echartsConfigJson/monitorConfigJson/monitor-detail-table";
41 import {monitorBgBorder} from "./echartsConfigJson/monitorConfigJson/monitor-bg-border"; 41 import {monitorBgBorder} from "./echartsConfigJson/monitorConfigJson/monitor-bg-border";
  42 +import {monitorGaugeRate} from "./echartsConfigJson/monitorConfigJson/monitor-gauge-rate";
42 43
43 export const widgetTool = [ 44 export const widgetTool = [
44 // type=html类型的组件 45 // type=html类型的组件
@@ -72,5 +73,6 @@ export const widgetTool = [ @@ -72,5 +73,6 @@ export const widgetTool = [
72 monitorResourceStatus, 73 monitorResourceStatus,
73 monitorBasicInformation, 74 monitorBasicInformation,
74 monitorDetailTable, 75 monitorDetailTable,
75 - monitorBgBorder 76 + monitorBgBorder,
  77 + monitorGaugeRate
76 ] 78 ]
@@ -41,7 +41,7 @@ @@ -41,7 +41,7 @@
41 <template #content> 41 <template #content>
42 <span>{{ item[itemChild.key].kpiValue}}</span> 42 <span>{{ item[itemChild.key].kpiValue}}</span>
43 </template> 43 </template>
44 - <span @mouseleave="" :ref="'isOverflow'+index+'-'+idx" :data-num="index+'-'+idx" @click="clickListName(item[itemChild.key])" :style="colorStyle(item[itemChild.key].kpiValue)" 44 + <span @mouseleave="" :ref="'isOverflow'+index+'-'+idx" :data-num="index+'-'+idx" @click="clickListName(item[itemChild.key],itemChild)" :style="colorStyle(item[itemChild.key].kpiValue)"
45 :class="['listName','width-80','text-overflow',{'listName-link':item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)}]"> 45 :class="['listName','width-80','text-overflow',{'listName-link':item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)}]">
46 {{ item[itemChild.key].kpiValue}} 46 {{ item[itemChild.key].kpiValue}}
47 </span> 47 </span>
@@ -99,7 +99,7 @@ @@ -99,7 +99,7 @@
99 <template #content> 99 <template #content>
100 <span>{{ item[itemChild.key].kpiValue}}</span> 100 <span>{{ item[itemChild.key].kpiValue}}</span>
101 </template> 101 </template>
102 - <span @mouseleave="" :ref="'isOverflow1'+index+'-'+idx" :data-num="index+'-'+idx" @click="clickListName(item[itemChild.key])" :style="colorStyle(item[itemChild.key].kpiValue)" 102 + <span @mouseleave="" :ref="'isOverflow1'+index+'-'+idx" :data-num="index+'-'+idx" @click="clickListName(item[itemChild.key],itemChild)" :style="colorStyle(item[itemChild.key].kpiValue)"
103 :class="['listName','width-80','text-overflow',{'listName-link':item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)}]"> 103 :class="['listName','width-80','text-overflow',{'listName-link':item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)}]">
104 {{ item[itemChild.key].kpiValue}} 104 {{ item[itemChild.key].kpiValue}}
105 </span> 105 </span>
@@ -147,7 +147,6 @@ @@ -147,7 +147,6 @@
147 > 147 >
148 <template v-slot> 148 <template v-slot>
149 <div class="txtScroll-top"> 149 <div class="txtScroll-top">
150 - 性能趋势{{pressingValue}}  
151 <iframe :src="trendSrc" class="layadmin-iframe" style="height: 99.5%!important;width: 100%;"/> 150 <iframe :src="trendSrc" class="layadmin-iframe" style="height: 99.5%!important;width: 100%;"/>
152 </div> 151 </div>
153 </template> 152 </template>
@@ -158,7 +157,7 @@ @@ -158,7 +157,7 @@
158 <script> 157 <script>
159 import vue from "vue"; 158 import vue from "vue";
160 import VueSuperSlide from "vue-superslide"; 159 import VueSuperSlide from "vue-superslide";
161 -import {getDetailTableData,getDetailTableDataNoPage,getResType} from "@/api/platform"; 160 +import {getDetailTableData,getDetailTableDataNoPage,getResType,getTrendBaseUrl} from "@/api/platform";
162 import customDialog from "../../designerComponents/customDialog"; 161 import customDialog from "../../designerComponents/customDialog";
163 import customMenuBox from "../../designerComponents/customMenuBox";//下探组件 162 import customMenuBox from "../../designerComponents/customMenuBox";//下探组件
164 import textToImage from "../../designerComponents/textToImage";//文字转图片 163 import textToImage from "../../designerComponents/textToImage";//文字转图片
@@ -526,20 +525,26 @@ export default { @@ -526,20 +525,26 @@ export default {
526 this.tableVisible=true; 525 this.tableVisible=true;
527 }, 526 },
528 //点击表格内容名称事件 527 //点击表格内容名称事件
529 - clickListName(obj){ 528 + clickListName(obj,tableDataValueHead){
530 if(obj.kpiIdent==1 || obj.isWarning==1){ 529 if(obj.kpiIdent==1 || obj.isWarning==1){
531 - let trendsParams=obj;  
532 - // this.trendSrc='http://127.0.0.1:8088/vue3/index.html#/vue3/pieDetailLine?resId=08586dba3a5b4a01ad88e8878eed6d53&kpiId=KPI7054BC34&flag=cpu&ident=1&trend=1&name=CPU%E4%BD%BF%E7%94%A8%E7%8E%87x&access_token=6e14ca48-4d05-42cf-b232-97981035824f'  
533 - this.trendSrc='https://192.168.0.69:8088/#/user/login/redirect=%2F';  
534 this.widthStyle=''; 530 this.widthStyle='';
535 - // this.setDialog('performance_trends')  
536 - this.pressingValue=obj.kpiValue; 531 + this.pressingValue=obj;
537 this.dialogNameStyle(obj) 532 this.dialogNameStyle(obj)
538 - 533 + this.setTrend(tableDataValueHead)
539 this.trendVisible=true; 534 this.trendVisible=true;
540 } 535 }
541 536
542 }, 537 },
  538 + //设置性能趋势图
  539 + setTrend(tableDataValueHead){
  540 + let urlParams='resId='+this.getUrlToken.resId+'&kpiId='+this.pressingValue.kpiId+'&flag='+this.pressingValue.flag+'&warning='+this.pressingValue.isWarning
  541 + +'&ident='+this.pressingValue.kpiIdent
  542 + +'&trend='+this.pressingValue.isTrend
  543 + +'&unit='+tableDataValueHead.unit
  544 + +'&name='+this.pressingValue.kpiName + " " + tableDataValueHead.name;
  545 + let baseUrl=getTrendBaseUrl();
  546 + this.trendSrc=baseUrl+'/vue3/index.html#/vue3/pieDetailLine?'+urlParams;
  547 + },
543 //End LSQ 2022/1/20 10:23 TODO 548 //End LSQ 2022/1/20 10:23 TODO
544 handlerHead() { 549 handlerHead() {
545 const head = this.optionsSetUp.dynamicAddTable; 550 const head = this.optionsSetUp.dynamicAddTable;
  1 +<template>
  2 + <div :style="styleObj" @click="isDisplay=false;">
  3 + <div class="title-div flex-start" :style="styleColor" @mouseenter="isDisplay=true;">
  4 + <img v-if="!imgStyle.titleName" :src="imgStyle.imageAdress" alt="">
  5 + <div v-if="imgStyle.titleName" class="title-name">{{imgStyle.titleName}}</div>
  6 + <customMenuBox ref="customMenu" v-if="imgStyle.probeDown && isDisplay"
  7 + :detailMenubox="calcDetailMenubox"
  8 + :tableDataValue="tableDataValue" :flg="''"
  9 + :tableDataValueHead="tableDataValueHead"
  10 + :heightStyle="heightStyle" :marginStyle="marginStyle" :tableName="imgStyle.titleName"
  11 + :resType="resType"
  12 + ></customMenuBox>
  13 +
  14 + </div>
  15 + <v-chart :options="options" autoresize/>
  16 + </div>
  17 +</template>
  18 +
  19 +<script>
  20 +import echarts from "echarts";
  21 +import customMenuBox from "../../designerComponents/customMenuBox";//下探组件
  22 +export default {
  23 + name: "gaugeRate",
  24 + components: {customMenuBox},
  25 + props: {
  26 + value: Object,
  27 + ispreview: Boolean
  28 + },
  29 + data() {
  30 + return {
  31 + isDisplay:false,
  32 + tableDataValue: {},
  33 + tableDataValueHead: {},
  34 + heightStyle:'',
  35 + marginStyle:'',
  36 + resType:'',
  37 + options: {
  38 + series: [
  39 + {
  40 + type: 'gauge',
  41 + z: 100,
  42 + axisLine: {
  43 + lineStyle: {
  44 + width: 10,
  45 + color: [
  46 + [
  47 + 0.3,
  48 + new echarts.graphic.LinearGradient(0, 1, 1, 0, [
  49 + {
  50 + offset: 0,
  51 + color: 'rgba(0, 237, 3,0.1)',
  52 + },
  53 + {
  54 + offset: 0.5,
  55 + color: 'rgba(0, 237, 3,0.6)',
  56 + },
  57 + {
  58 + offset: 1,
  59 + color: 'rgba(0, 237, 3,1)',
  60 + },
  61 + ]),
  62 + ],
  63 + [
  64 + 0.7,
  65 + new echarts.graphic.LinearGradient(0, 1, 1, 0, [
  66 + {
  67 + offset: 0,
  68 + color: 'rgba(255, 184, 0,0.1)',
  69 + },
  70 + {
  71 + offset: 0.5,
  72 + color: 'rgba(255, 184, 0,0.6)',
  73 + },
  74 + {
  75 + offset: 1,
  76 + color: 'rgba(255, 184, 0,1)',
  77 + },
  78 + ]),
  79 + ],
  80 + [
  81 + 1,
  82 + new echarts.graphic.LinearGradient(0, 1, 1, 0, [
  83 + {
  84 + offset: 0,
  85 + color: 'rgba(175, 36, 74,0.1)',
  86 + },
  87 + {
  88 + offset: 0.5,
  89 + color: 'rgba(255, 36, 74,0.6)',
  90 + },
  91 + {
  92 + offset: 1,
  93 + color: 'rgba(255, 36, 74,1)',
  94 + },
  95 + ]),
  96 + ],
  97 + ],
  98 + },
  99 + },
  100 + pointer: {
  101 + itemStyle: {
  102 + color: 'auto',
  103 + },
  104 + },
  105 + axisTick: {
  106 + show: true,
  107 + distance: 0,
  108 + length: 10,
  109 + lineStyle: {
  110 + color: 'auto',
  111 + width: 2,
  112 + },
  113 + },
  114 + splitLine: {
  115 + show: true,
  116 + distance: 0,
  117 + length: 14,
  118 + lineStyle: {
  119 + color: 'auto',
  120 + width: 4,
  121 + },
  122 + },
  123 + axisLabel: {
  124 + show: true,
  125 + color: 'white',
  126 + distance: 2,
  127 + fontSize: 10,
  128 + },
  129 + detail: {
  130 + valueAnimation: true,
  131 + formatter: '{value} %',
  132 + color: 'white',
  133 + fontSize: 18,
  134 + },
  135 + data: [
  136 + {
  137 + value: 70,
  138 + },
  139 + ],
  140 + },
  141 + ],
  142 + },
  143 + optionsStyle: {}, // 样式
  144 + optionsData: {}, // 数据
  145 + optionsCollapse: {}, // 图标属性
  146 + optionsSetup: {}
  147 + };
  148 + },
  149 + computed: {
  150 + styleObj() {
  151 + return {
  152 + position: this.ispreview ? "absolute" : "static",
  153 + width: this.optionsStyle.width + "px",
  154 + height: this.optionsStyle.height + "px",
  155 + left: this.optionsStyle.left + "px",
  156 + top: this.optionsStyle.top + "px",
  157 + background: this.optionsSetup.background
  158 + };
  159 + },
  160 + styleColor() {
  161 + return {
  162 + "text-align": this.optionsSetup.textAlign,
  163 +
  164 + };
  165 + },
  166 + imgStyle() {
  167 + return {
  168 + imageAdress: this.optionsSetup.imageAdress,
  169 + titleName:this.optionsSetup.titleName,
  170 + probeDown:this.optionsSetup.probeDown
  171 + };
  172 + },
  173 + //表格下探列表
  174 + calcDetailMenubox(){
  175 + const menubox = this.optionsSetup;
  176 + let detailMenuBox=[];
  177 + if(menubox.alarm_setting){
  178 + detailMenuBox.push({
  179 + name:'告警设置',
  180 + type:'alarm_setting'
  181 + })
  182 + }
  183 + if(menubox.filter_sheet_indicator){
  184 + detailMenuBox.push({
  185 + name:'过滤单指标',
  186 + type:'filter_sheet_indicator'
  187 + })
  188 + }
  189 + if(menubox.filter_multiple_indicators){
  190 + detailMenuBox.push({
  191 + name:'过滤多指标',
  192 + type:'filter_multiple_indicators'
  193 + })
  194 + }
  195 + if(menubox.performance_trends){
  196 + detailMenuBox.push({
  197 + name:'性能趋势',
  198 + type:'performance_trends'
  199 + })
  200 + }
  201 + if(menubox.pressing_times){
  202 + detailMenuBox.push({
  203 + name:'压制次数',
  204 + type:'pressing_times'
  205 + })
  206 + }
  207 + if(menubox.include_capacity_forecast){
  208 + detailMenuBox.push({
  209 + name:'纳入容量预测',
  210 + type:'include_capacity_forecast'
  211 + })
  212 + }
  213 + return detailMenuBox;
  214 + },
  215 + },
  216 + watch: {
  217 + value: {
  218 + handler(val) {
  219 + this.optionsStyle = val.position; // 位置
  220 + this.optionsData = val.data; // 数据
  221 + this.optionsCollapse = val.collapse; // 折叠数据
  222 + this.optionsSetup = val.setup; // 样式
  223 + this.editorOptions();
  224 + },
  225 + deep: true
  226 + }
  227 + },
  228 + created() {
  229 + this.optionsStyle = this.value.position;
  230 + this.optionsData = this.value.data;
  231 + this.optionsCollapse = this.value.collapse;
  232 + this.optionsSetup = this.value.setup;
  233 + this.editorOptions();
  234 + },
  235 + methods: {
  236 + editorOptions() {
  237 + this.setOptions()
  238 + this.setOptionsData()
  239 + },
  240 + setOptions() {
  241 + const optionsSetup = this.optionsSetup;
  242 + const series = this.options.series;
  243 + if (series[0].type == 'gauge') {
  244 + const axisLine = {
  245 + show: optionsSetup.ringShow,
  246 + lineStyle: {
  247 + width: optionsSetup.pieWeight,
  248 + color: [
  249 + [
  250 + 0.3,
  251 + new echarts.graphic.LinearGradient(0, 1, 1, 0, [
  252 + {
  253 + offset: 0,
  254 + color: optionsSetup.color30p0,
  255 + },
  256 + {
  257 + offset: 0.5,
  258 + color: optionsSetup.color30p5,
  259 + },
  260 + {
  261 + offset: 1,
  262 + color: optionsSetup.color30p10,
  263 + },
  264 + ]),
  265 + ],
  266 + [
  267 + 0.7,
  268 + new echarts.graphic.LinearGradient(0, 1, 1, 0, [
  269 + {
  270 + offset: 0,
  271 + color: optionsSetup.color70p0,
  272 + },
  273 + {
  274 + offset: 0.5,
  275 + color: optionsSetup.color70p5,
  276 + },
  277 + {
  278 + offset: 1,
  279 + color: optionsSetup.color70p10,
  280 + },
  281 + ]),
  282 + ],
  283 + [
  284 + 1,
  285 + new echarts.graphic.LinearGradient(0, 1, 1, 0, [
  286 + {
  287 + offset: 0,
  288 + color: optionsSetup.color100p0,
  289 + },
  290 + {
  291 + offset: 0.5,
  292 + color: optionsSetup.color100p5,
  293 + },
  294 + {
  295 + offset: 1,
  296 + color: optionsSetup.color100p10,
  297 + },
  298 + ]),
  299 + ],
  300 + ],
  301 + },
  302 + }
  303 + const axisTick = {
  304 + show: optionsSetup.tickShow,
  305 + distance: optionsSetup.tickDistance,
  306 + length: optionsSetup.tickLength,
  307 + lineStyle: {
  308 + color: 'auto',
  309 + width: optionsSetup.tickWidth,
  310 + },
  311 + }
  312 + const splitLine = {
  313 + show: optionsSetup.splitShow,
  314 + distance: optionsSetup.splitDistance,
  315 + length: optionsSetup.splitLength,
  316 + lineStyle: {
  317 + color: 'auto',
  318 + width: optionsSetup.splitWidth,
  319 + },
  320 + }
  321 + series[0].axisLine = axisLine
  322 + series[0].axisTick = axisTick
  323 + series[0].splitLine = splitLine
  324 + }
  325 + },
  326 + setOptionsData() {
  327 + const optionsData = this.optionsData; // 数据类型 静态 or 动态
  328 + optionsData.dataType == "staticData"
  329 + ? this.staticDataFn(optionsData.staticData)
  330 + : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
  331 + },
  332 + staticDataFn(val) {
  333 + const optionsSetup = this.optionsSetup;
  334 + const series = this.options.series;
  335 + const num = val[0]['num'];
  336 + const data = [
  337 + {
  338 + value: num
  339 + }
  340 + ]
  341 + const detail = {
  342 + valueAnimation: true,
  343 + formatter: '{value} %',
  344 + color: optionsSetup.labelColor,
  345 + fontSize: optionsSetup.labelFontSize,
  346 + fontWeight: optionsSetup.labelFontWeight,
  347 + }
  348 + series[0].data = data
  349 + series[0].detail = detail
  350 + },
  351 + dynamicDataFn(val, refreshTime) {
  352 + if (!val) return;
  353 + if (this.ispreview) {
  354 + this.getEchartData(val);
  355 + this.flagInter = setInterval(() => {
  356 + this.getEchartData(val);
  357 + }, refreshTime);
  358 + } else {
  359 + this.getEchartData(val);
  360 + }
  361 + },
  362 + getEchartData(val) {
  363 + const data = this.queryEchartsData(val);
  364 + data.then(res => {
  365 + this.renderingFn(res);
  366 + });
  367 + },
  368 + renderingFn(val) {
  369 + const optionsSetup = this.optionsSetup;
  370 + const series = this.options.series;
  371 + const data = [
  372 + {
  373 + value: val[0].value
  374 + }
  375 + ]
  376 + const detail = {
  377 + valueAnimation: true,
  378 + formatter: '{value} %',
  379 + color: optionsSetup.labelColor,
  380 + fontSize: optionsSetup.labelFontSize,
  381 + fontWeight: optionsSetup.labelFontWeight,
  382 + }
  383 + series[0].data = data
  384 + series[0].detail = detail
  385 + }
  386 + }
  387 +};
  388 +</script>
  389 +
  390 +<style scoped lang="scss">
  391 +.echarts {
  392 + width: 100%;
  393 + height: 100%;
  394 + overflow: hidden;
  395 +}
  396 +.title-div{
  397 + text-align: left;
  398 + padding:10px;
  399 +}
  400 +.title-name{
  401 + color:rgb(30,159,255);
  402 + font-size: 16px;
  403 + font-weight: bold;
  404 +}
  405 +.flex-start{
  406 + display: flex;
  407 + justify-content: start;
  408 + align-items: center;
  409 +}
  410 +</style>
@@ -42,6 +42,7 @@ import monitorResourceStatus from "./monitor/resourceStatus"; @@ -42,6 +42,7 @@ import monitorResourceStatus from "./monitor/resourceStatus";
42 import monitorBasicInformation from "./monitor/basicInformation"; 42 import monitorBasicInformation from "./monitor/basicInformation";
43 import monitorDetailTable from "./monitor/detailTable"; 43 import monitorDetailTable from "./monitor/detailTable";
44 import monitorBgBorder from "./monitor/bgBorder"; 44 import monitorBgBorder from "./monitor/bgBorder";
  45 +import monitorGaugeRate from "./monitor/gaugeRate";
45 46
46 export default { 47 export default {
47 name: "WidgetTemp", 48 name: "WidgetTemp",
@@ -76,7 +77,8 @@ export default { @@ -76,7 +77,8 @@ export default {
76 monitorResourceStatus, 77 monitorResourceStatus,
77 monitorBasicInformation, 78 monitorBasicInformation,
78 monitorDetailTable, 79 monitorDetailTable,
79 - monitorBgBorder 80 + monitorBgBorder,
  81 + monitorGaugeRate
80 }, 82 },
81 model: { 83 model: {
82 prop: "value", 84 prop: "value",
@@ -53,6 +53,7 @@ import monitorResourceStatus from "./monitor/resourceStatus"; @@ -53,6 +53,7 @@ import monitorResourceStatus from "./monitor/resourceStatus";
53 import monitorBasicInformation from "./monitor/basicInformation"; 53 import monitorBasicInformation from "./monitor/basicInformation";
54 import monitorDetailTable from "./monitor/detailTable"; 54 import monitorDetailTable from "./monitor/detailTable";
55 import monitorBgBorder from "./monitor/bgBorder"; 55 import monitorBgBorder from "./monitor/bgBorder";
  56 +import monitorGaugeRate from "./monitor/gaugeRate";
56 57
57 58
58 export default { 59 export default {
@@ -87,7 +88,8 @@ export default { @@ -87,7 +88,8 @@ export default {
87 monitorResourceStatus, 88 monitorResourceStatus,
88 monitorBasicInformation, 89 monitorBasicInformation,
89 monitorDetailTable, 90 monitorDetailTable,
90 - monitorBgBorder 91 + monitorBgBorder,
  92 + monitorGaugeRate
91 }, 93 },
92 model: { 94 model: {
93 prop: "value", 95 prop: "value",