monitor_v3 / anji-plus-report · Commits

Go to a project

Authored by 王涛
Commit 19895b893a7cfd705b6c307306aac443a0b8f50e 2 parents c0e7a9fb 50ee82f6

Merge branch 'master-ajreport-lushangqing' into 'master' 

使用率接口录入数据集，自定义折线图，更改折线图接口接收到的数据处理



See merge request !19
Inline Side-by-side
Showing 8 changed files with 1185 additions and 20 deletions
@@ -98,6 +98,7 @@ export default { @@ -98,6 +98,7 @@ export default {
98 return new Promise(async (resolve) => { 98 return new Promise(async (resolve) => {
99 const {code, data} = await getData(params); 99 const {code, data} = await getData(params);
100 if (code != 200) return 100 if (code != 200) return
  101 + console.log(")))",data)
101 const analysisData = this.analysisChartsData(params, data); 102 const analysisData = this.analysisChartsData(params, data);
102 resolve(analysisData) 103 resolve(analysisData)
103 }) 104 })
@@ -125,10 +126,37 @@ export default { @@ -125,10 +126,37 @@ export default {
125 return this.widgettext(params.chartProperties, data) 126 return this.widgettext(params.chartProperties, data)
126 } else if (chartType == "widget-stackchart") { 127 } else if (chartType == "widget-stackchart") {
127 return this.stackChartFn(params.chartProperties, data) 128 return this.stackChartFn(params.chartProperties, data)
  129 + }else if(chartType == "custom-linechart"){
  130 + return this.barOrLineChartFnCustom(params.chartProperties, data);
128 } else { 131 } else {
129 return data 132 return data
130 } 133 }
131 }, 134 },
  135 + // 柱状图、折线图、柱线图-自定义 // Start LSQ 2022/2/21
  136 + barOrLineChartFnCustom(chartProperties, data) {
  137 + const ananysicData = {};
  138 + let xAxisList = [];
  139 + let series = [];
  140 + if(data && data[0]){
  141 + if(data[0].data.names && data[0].data.names.length>0){
  142 + xAxisList=data[0].data.names;
  143 + }else{
  144 + xAxisList=['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00']
  145 + }
  146 + if(data[0].data.series && data[0].data.series.length>0){
  147 + series = data[0].data.series;
  148 +
  149 + }else{
  150 + series = [{
  151 + name: "",
  152 + datas: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
  153 + }];
  154 + }
  155 + }
  156 + ananysicData["xAxis"] = xAxisList;
  157 + ananysicData["series"] = series;
  158 + return ananysicData;
  159 + },
132 // 柱状图、折线图、柱线图 160 // 柱状图、折线图、柱线图
133 barOrLineChartFn(chartProperties, data) { 161 barOrLineChartFn(chartProperties, data) {
134 const ananysicData = {}; 162 const ananysicData = {};
@@ -40,7 +40,7 @@ export const monitorBgBorder = { @@ -40,7 +40,7 @@ export const monitorBgBorder = {
40 name: 'borderColor', 40 name: 'borderColor',
41 required: false, 41 required: false,
42 placeholder: '', 42 placeholder: '',
43 - value: '#dddddd', 43 + value: 'rgba(151, 151, 151, 0.13)',
44 }, 44 },
45 { 45 {
46 type: 'vue-color', 46 type: 'vue-color',
  1 +/*
  2 + * @Descripttion: 折线图json
  3 + * @version:
  4 + * @Author: lsq
  5 + * @Date: 2022/2/21 9:51
  6 + * @LastEditors: lsq
  7 + * @LastEditTime: 2022/2/21 9:52
  8 + */
  9 +export const monitorCustomLineChart = {
  10 + code: 'monitor-custom-line-chart',
  11 + type: 'chart',
  12 + label: '速率/使用率折线图',
  13 + icon: 'icontubiaozhexiantu',
  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: 'vue-color',
  27 + label: '背景颜色',
  28 + name: 'background',
  29 + required: false,
  30 + placeholder: '',
  31 + value: ''
  32 + },
  33 + {
  34 + type: 'el-select',
  35 + label: 'kpiId',
  36 + name: 'kpiId',
  37 + required: false,
  38 + placeholder: '',
  39 + selectOptions: [
  40 + {code: 'KPID339D51B', name: 'KPID339D51B(网卡上行速率)'},
  41 + {code: 'KPI02062F43', name: 'KPI02062F43(网卡下行速率)'},
  42 + {code: 'KPI7054BC34', name: 'KPI7054BC34(CPU使用率走势)'},
  43 + {code: 'KPI31CB8D97', name: 'KPI31CB8D97(内存使用率走势)'},
  44 + {code: 'KPI449F5365', name: 'KPI449F5365(文件系统使用率)'},
  45 + {code: 'KPI97373ED0', name: 'KPI97373ED0(磁盘IO读速率)'},
  46 + {code: 'KPI95378FE0', name: 'KPI95378FE0(磁盘IO写速率)'},
  47 + {code: 'KPI66BD013F', name: 'KPI66BD013F(磁盘IO处理时间)'},
  48 + {code: 'KPI3E6ED38B', name: 'KPI3E6ED38B(磁盘IO响应时间)'},
  49 + ],
  50 + value: 'KPID339D51B',
  51 + },
  52 + [
  53 + {
  54 + name: '折线设置',
  55 + list: [
  56 + {
  57 + type: 'el-switch',
  58 + label: '标记点',
  59 + name: 'markPoint',
  60 + required: false,
  61 + placeholder: '',
  62 + value: true,
  63 + },
  64 + {
  65 + type: 'el-slider',
  66 + label: '点大小',
  67 + name: 'pointSize',
  68 + required: false,
  69 + placeholder: '',
  70 + value: 10,
  71 + },
  72 + {
  73 + type: 'vue-color',
  74 + label: '点颜色',
  75 + name: 'itemStyleColor',
  76 + required: false,
  77 + placeholder: '',
  78 + value: '#2883d0'
  79 + },
  80 + {
  81 + type: 'el-switch',
  82 + label: '平滑曲线',
  83 + name: 'smoothCurve',
  84 + required: false,
  85 + placeholder: '',
  86 + value: true,
  87 + },
  88 + {
  89 + type: 'el-switch',
  90 + label: '面积堆积',
  91 + name: 'area',
  92 + required: false,
  93 + placeholder: '',
  94 + value: true,
  95 + },
  96 + {
  97 + type: 'el-slider',
  98 + label: '面积厚度',
  99 + name: 'areaThickness',
  100 + required: false,
  101 + placeholder: '',
  102 + value: 5,
  103 + },
  104 + {
  105 + type: 'el-slider',
  106 + label: '线条宽度',
  107 + name: 'lineWidth',
  108 + required: false,
  109 + placeholder: '',
  110 + value: 4,
  111 + },
  112 + ],
  113 + },
  114 + {
  115 + name: '标题设置',
  116 + list: [
  117 + {
  118 + type: 'el-switch',
  119 + label: '标题',
  120 + name: 'isNoTitle',
  121 + required: false,
  122 + placeholder: '',
  123 + value: true
  124 + },
  125 + {
  126 + type: 'el-input-text',
  127 + label: '标题',
  128 + name: 'titleText',
  129 + required: false,
  130 + placeholder: '',
  131 + value: '网卡上行速率',
  132 + },
  133 + {
  134 + type: 'vue-color',
  135 + label: '字体颜色',
  136 + name: 'textColor',
  137 + required: false,
  138 + placeholder: '',
  139 + value: '#1e9fff'
  140 + },
  141 + {
  142 + type: 'el-select',
  143 + label: '字体粗细',
  144 + name: 'textFontWeight',
  145 + required: false,
  146 + placeholder: '',
  147 + selectOptions: [
  148 + {code: 'normal', name: '正常'},
  149 + {code: 'bold', name: '粗体'},
  150 + {code: 'bolder', name: '特粗体'},
  151 + {code: 'lighter', name: '细体'}
  152 + ],
  153 + value: 'normal'
  154 + },
  155 + {
  156 + type: 'el-input-number',
  157 + label: '字体字号',
  158 + name: 'textFontSize',
  159 + required: false,
  160 + placeholder: '',
  161 + value: 16
  162 + },
  163 + {
  164 + type: 'el-select',
  165 + label: '字体位置',
  166 + name: 'textAlign',
  167 + required: false,
  168 + placeholder: '',
  169 + selectOptions: [
  170 + {code: 'center', name: '居中'},
  171 + {code: 'left', name: '左对齐'},
  172 + {code: 'right', name: '右对齐'},
  173 + ],
  174 + value: 'left'
  175 + },
  176 + {
  177 + type: 'el-input-text',
  178 + label: '副标题',
  179 + name: 'subText',
  180 + required: false,
  181 + placeholder: '',
  182 + value: ''
  183 + },
  184 + {
  185 + type: 'vue-color',
  186 + label: '字体颜色',
  187 + name: 'subTextColor',
  188 + required: false,
  189 + placeholder: '',
  190 + value: '#fff'
  191 + },
  192 + {
  193 + type: 'el-select',
  194 + label: '字体粗细',
  195 + name: 'subTextFontWeight',
  196 + required: false,
  197 + placeholder: '',
  198 + selectOptions: [
  199 + {code: 'normal', name: '正常'},
  200 + {code: 'bold', name: '粗体'},
  201 + {code: 'bolder', name: '特粗体'},
  202 + {code: 'lighter', name: '细体'}
  203 + ],
  204 + value: 'normal'
  205 + },
  206 + {
  207 + type: 'el-input-number',
  208 + label: '字体字号',
  209 + name: 'subTextFontSize',
  210 + required: false,
  211 + placeholder: '',
  212 + value: 20
  213 + },
  214 + ],
  215 + },
  216 + {
  217 + name: 'X轴设置',
  218 + list: [
  219 + {
  220 + type: 'el-switch',
  221 + label: '显示',
  222 + name: 'hideX',
  223 + required: false,
  224 + placeholder: '',
  225 + value: true,
  226 + },
  227 + {
  228 + type: 'el-input-text',
  229 + label: '坐标名',
  230 + name: 'xName',
  231 + required: false,
  232 + placeholder: '',
  233 + value: ''
  234 + },
  235 + {
  236 + type: 'vue-color',
  237 + label: '坐标名颜色',
  238 + name: 'nameColorX',
  239 + required: false,
  240 + placeholder: '',
  241 + value: '#fff',
  242 + },
  243 + {
  244 + type: 'el-input-number',
  245 + label: '坐标字号',
  246 + name: 'nameFontSizeX',
  247 + required: false,
  248 + placeholder: '',
  249 + value: 14,
  250 + },
  251 + {
  252 + type: 'vue-color',
  253 + label: '数值颜色',
  254 + name: 'Xcolor',
  255 + required: false,
  256 + placeholder: '',
  257 + value: '#666',
  258 + },
  259 + {
  260 + type: 'el-input-number',
  261 + label: '数值字号',
  262 + name: 'fontSizeX',
  263 + required: false,
  264 + placeholder: '',
  265 + value: 14,
  266 + },
  267 + {
  268 + type: 'el-slider',
  269 + label: '数值角度',
  270 + name: 'textAngle',
  271 + required: false,
  272 + placeholder: '',
  273 + value: 0
  274 + },
  275 + {
  276 + type: 'el-input-number',
  277 + label: '数值间隔',
  278 + name: 'textInterval',
  279 + required: false,
  280 + placeholder: '',
  281 + value: 1
  282 + },
  283 + {
  284 + type: 'el-switch',
  285 + label: '轴反转',
  286 + name: 'reversalX',
  287 + required: false,
  288 + placeholder: '',
  289 + value: false
  290 + },
  291 + {
  292 + type: 'vue-color',
  293 + label: '轴颜色',
  294 + name: 'lineColorX',
  295 + required: false,
  296 + placeholder: '',
  297 + value: '#c9c9c9',
  298 + },
  299 + {
  300 + type: 'el-switch',
  301 + label: '分割线显示',
  302 + name: 'isShowSplitLineX',
  303 + require: false,
  304 + placeholder: '',
  305 + value: false,
  306 + },
  307 + {
  308 + type: 'vue-color',
  309 + label: '分割线颜色',
  310 + name: 'splitLineColorX',
  311 + required: false,
  312 + placeholder: '',
  313 + value: '#fff',
  314 + },
  315 + {
  316 + type: 'el-switch',
  317 + label: '分割区显示',
  318 + name: 'splitArea',
  319 + require: false,
  320 + placeholder: '',
  321 + value: true,
  322 + },
  323 + {
  324 + type: 'vue-color',
  325 + label: '分割区颜色',
  326 + name: 'splitAreaColor',
  327 + required: false,
  328 + placeholder: '',
  329 + value: 'rgba(200,200,200,0.1)',
  330 + },
  331 + ],
  332 + },
  333 + {
  334 + name: 'Y轴设置',
  335 + list: [
  336 + {
  337 + type: 'el-switch',
  338 + label: '显示',
  339 + name: 'isShowY',
  340 + require: false,
  341 + placeholder: '',
  342 + value: true,
  343 + },
  344 + {
  345 + type: 'el-input-text',
  346 + label: '坐标名',
  347 + name: 'textNameY',
  348 + require: false,
  349 + placeholder: '',
  350 + value: ''
  351 + },
  352 + {
  353 + type: 'vue-color',
  354 + label: '坐标名颜色',
  355 + name: 'nameColorY',
  356 + required: false,
  357 + placeholder: '',
  358 + value: '#fff',
  359 + },
  360 + {
  361 + type: 'el-input-number',
  362 + label: '坐标字号',
  363 + name: 'namefontSizeY',
  364 + required: false,
  365 + placeholder: '',
  366 + value: 14,
  367 + },
  368 + {
  369 + type: 'vue-color',
  370 + label: '数值颜色',
  371 + name: 'colorY',
  372 + required: false,
  373 + placeholder: '',
  374 + value: '#666',
  375 + },
  376 + {
  377 + type: 'el-input-number',
  378 + label: '数值字号',
  379 + name: 'fontSizeY',
  380 + required: false,
  381 + placeholder: '',
  382 + value: 14,
  383 + },
  384 + {
  385 + type: 'el-slider',
  386 + label: '数值角度',
  387 + name: 'ytextAngle',
  388 + required: false,
  389 + placeholder: '',
  390 + value: 0
  391 + },
  392 + {
  393 + type: 'el-switch',
  394 + label: '缩放',
  395 + name: 'scale',
  396 + require: false,
  397 + placeholder: '',
  398 + value: false,
  399 + },
  400 + {
  401 + type: 'el-input-number',
  402 + label: '均分',
  403 + name: 'splitNumber',
  404 + required: false,
  405 + placeholder: '',
  406 + value: ''
  407 + },
  408 + {
  409 + type: 'el-switch',
  410 + label: '轴反转',
  411 + name: 'reversalY',
  412 + required: false,
  413 + placeholder: '',
  414 + value: false
  415 + },
  416 + {
  417 + type: 'vue-color',
  418 + label: '轴颜色',
  419 + name: 'lineColorY',
  420 + required: false,
  421 + placeholder: '',
  422 + value: '#c9c9c9',
  423 + },
  424 + {
  425 + type: 'el-switch',
  426 + label: '分割线显示',
  427 + name: 'isShowSplitLineY',
  428 + require: false,
  429 + placeholder: '',
  430 + value: true,
  431 + },
  432 + {
  433 + type: 'vue-color',
  434 + label: '分割线颜色',
  435 + name: 'splitLineColorY',
  436 + required: false,
  437 + placeholder: '',
  438 + value: '#c9c9c9',
  439 + }
  440 + ],
  441 + },
  442 + {
  443 + name: '数值设定',
  444 + list: [
  445 + {
  446 + type: 'el-switch',
  447 + label: '显示',
  448 + name: 'isShow',
  449 + required: false,
  450 + placeholder: '',
  451 + value: false
  452 + },
  453 + {
  454 + type: 'el-input-number',
  455 + label: '字体大小',
  456 + name: 'fontSize',
  457 + required: false,
  458 + placeholder: '',
  459 + value: 12
  460 + },
  461 + {
  462 + type: 'vue-color',
  463 + label: '字体颜色',
  464 + name: 'subTextColor',
  465 + required: false,
  466 + placeholder: '',
  467 + value: '#fff'
  468 + },
  469 + {
  470 + type: 'el-select',
  471 + label: '字体粗细',
  472 + name: 'fontWeight',
  473 + required: false,
  474 + placeholder: '',
  475 + selectOptions: [
  476 + {code: 'normal', name: '正常'},
  477 + {code: 'bold', name: '粗体'},
  478 + {code: 'bolder', name: '特粗体'},
  479 + {code: 'lighter', name: '细体'}
  480 + ],
  481 + value: 'normal'
  482 + },
  483 + ],
  484 + },
  485 + {
  486 + name: '提示语设置',
  487 + list: [
  488 + {
  489 + type: 'el-input-text',
  490 + label: '字体大小',
  491 + name: 'fontSize',
  492 + required: false,
  493 + placeholder: '',
  494 + value: '14'
  495 + },
  496 + {
  497 + type: 'vue-color',
  498 + label: '字体颜色',
  499 + name: 'lineColor',
  500 + required: false,
  501 + placeholder: '',
  502 + value: '#fff'
  503 + },
  504 + ],
  505 + },
  506 + {
  507 + name: '坐标轴边距设置',
  508 + list: [
  509 + {
  510 + type: 'el-slider',
  511 + label: '左边距(像素)',
  512 + name: 'marginLeft',
  513 + required: false,
  514 + placeholder: '',
  515 + value: 10,
  516 + },
  517 + {
  518 + type: 'el-slider',
  519 + label: '顶边距(像素)',
  520 + name: 'marginTop',
  521 + required: false,
  522 + placeholder: '',
  523 + value: 50,
  524 + },
  525 + {
  526 + type: 'el-slider',
  527 + label: '右边距(像素)',
  528 + name: 'marginRight',
  529 + required: false,
  530 + placeholder: '',
  531 + value: 40,
  532 + },
  533 + {
  534 + type: 'el-slider',
  535 + label: '底边距(像素)',
  536 + name: 'marginBottom',
  537 + required: false,
  538 + placeholder: '',
  539 + value: 10,
  540 + },
  541 + ],
  542 + },
  543 + {
  544 + name: '图例操作',
  545 + list: [
  546 + {
  547 + type: 'el-switch',
  548 + label: '图例',
  549 + name: 'isShowLegend',
  550 + required: false,
  551 + placeholder: '',
  552 + value: true,
  553 + },
  554 + {
  555 + type: 'vue-color',
  556 + label: '字体颜色',
  557 + name: 'lengedColor',
  558 + required: false,
  559 + placeholder: '',
  560 + value: '#fff',
  561 + },
  562 + {
  563 + type: 'el-input-number',
  564 + label: '字体大小',
  565 + name: 'lengedFontSize',
  566 + required: false,
  567 + placeholder: '',
  568 + value: 16,
  569 + },
  570 + {
  571 + type: 'el-input-number',
  572 + label: '图例宽度',
  573 + name: 'lengedWidth',
  574 + required: false,
  575 + placeholder: '',
  576 + value: 15,
  577 + },
  578 + {
  579 + type: 'el-select',
  580 + label: '横向位置',
  581 + name: 'lateralPosition',
  582 + required: false,
  583 + placeholder: '',
  584 + selectOptions: [
  585 + {code: 'left', name: '左对齐'},
  586 + {code: 'right', name: '右对齐'},
  587 + ],
  588 + value: 'left'
  589 + },
  590 + {
  591 + type: 'el-select',
  592 + label: '纵向位置',
  593 + name: 'longitudinalPosition',
  594 + required: false,
  595 + placeholder: '',
  596 + selectOptions: [
  597 + {code: 'top', name: '顶部'},
  598 + {code: 'bottom', name: '底部'},
  599 + ],
  600 + value: ''
  601 + },
  602 + {
  603 + type: 'el-select',
  604 + label: '布局前置',
  605 + name: 'layoutFront',
  606 + required: false,
  607 + placeholder: '',
  608 + selectOptions: [
  609 + {code: 'vertical', name: '竖排'},
  610 + {code: 'horizontal', name: '横排'},
  611 + ],
  612 + value: ''
  613 + },
  614 + ],
  615 + },
  616 + {
  617 + name: '自定义配色',
  618 + list: [
  619 + {
  620 + type: 'customColor',
  621 + label: '',
  622 + name: 'customColor',
  623 + required: false,
  624 + value: [{color: '#1E90FF'}],
  625 + },
  626 + ],
  627 + },
  628 + ],
  629 + ],
  630 + // 数据
  631 + data: [
  632 + {
  633 + type: 'el-radio-group',
  634 + label: '数据类型',
  635 + name: 'dataType',
  636 + require: false,
  637 + placeholder: '',
  638 + selectValue: true,
  639 + selectOptions: [
  640 + {
  641 + code: 'staticData',
  642 + name: '静态数据',
  643 + },
  644 + {
  645 + code: 'dynamicData',
  646 + name: '动态数据',
  647 + },
  648 + ],
  649 + value: 'staticData',
  650 + },
  651 + {
  652 + type: 'el-input-number',
  653 + label: '刷新时间(毫秒)',
  654 + name: 'refreshTime',
  655 + relactiveDom: 'dataType',
  656 + relactiveDomValue: 'dynamicData',
  657 + value: 5000
  658 + },
  659 + {
  660 + type: 'el-button',
  661 + label: '静态数据',
  662 + name: 'staticData',
  663 + required: false,
  664 + placeholder: '',
  665 + relactiveDom: 'dataType',
  666 + relactiveDomValue: 'staticData',
  667 + value: [
  668 + {"axis": "苹果", "data": 1000},
  669 + {"axis": "三星", "data": 2229},
  670 + {"axis": "小米", "data": 3879},
  671 + {"axis": "oppo", "data": 2379},
  672 + {"axis": "vivo", "data": 4079},
  673 + ],
  674 + },
  675 + {
  676 + type: 'dycustComponents',
  677 + label: '',
  678 + name: 'dynamicData',
  679 + required: false,
  680 + placeholder: '',
  681 + relactiveDom: 'dataType',
  682 + chartType: 'custom-linechart',
  683 + dictKey: 'LINE_PROPERTIES',
  684 + relactiveDomValue: 'dynamicData',
  685 + },
  686 + ],
  687 + // 坐标
  688 + position: [
  689 + {
  690 + type: 'el-input-number',
  691 + label: '左边距',
  692 + name: 'left',
  693 + required: false,
  694 + placeholder: '',
  695 + value: 0,
  696 + },
  697 + {
  698 + type: 'el-input-number',
  699 + label: '上边距',
  700 + name: 'top',
  701 + required: false,
  702 + placeholder: '',
  703 + value: 0,
  704 + },
  705 + {
  706 + type: 'el-input-number',
  707 + label: '宽度',
  708 + name: 'width',
  709 + required: false,
  710 + placeholder: '该容器在1920px大屏中的宽度',
  711 + value: 400,
  712 + },
  713 + {
  714 + type: 'el-input-number',
  715 + label: '高度',
  716 + name: 'height',
  717 + required: false,
  718 + placeholder: '该容器在1080px大屏中的高度',
  719 + value: 200,
  720 + },
  721 + ],
  722 + }
  723 +}
@@ -58,9 +58,9 @@ export const monitorGaugeRate = { @@ -58,9 +58,9 @@ export const monitorGaugeRate = {
58 required: false, 58 required: false,
59 placeholder: '', 59 placeholder: '',
60 selectOptions: [ 60 selectOptions: [
61 - {code: 'KPI7054BC34', name: 'KPI7054BC34'},  
62 - {code: 'KPI31CB8D97', name: 'KPI31CB8D97'},  
63 - {code: 'KPI20352505', name: 'KPI20352505'}, 61 + {code: 'KPI7054BC34', name: 'KPI7054BC34(cpu使用率)'},
  62 + {code: 'KPI31CB8D97', name: 'KPI31CB8D97(内存使用率)'},
  63 + {code: 'KPI20352505', name: 'KPI20352505(虚拟内存)'},
64 ], 64 ],
65 value: 'KPI7054BC34', 65 value: 'KPI7054BC34',
66 }, 66 },
@@ -169,7 +169,7 @@ export const monitorGaugeRate = { @@ -169,7 +169,7 @@ export const monitorGaugeRate = {
169 name: 'pieWeight', 169 name: 'pieWeight',
170 require: false, 170 require: false,
171 placeholder: '', 171 placeholder: '',
172 - value: 10, 172 + value: 30,
173 }, 173 },
174 ] 174 ]
175 }, 175 },
@@ -182,7 +182,7 @@ export const monitorGaugeRate = { @@ -182,7 +182,7 @@ export const monitorGaugeRate = {
182 name: 'color30p0', 182 name: 'color30p0',
183 required: false, 183 required: false,
184 placeholder: '', 184 placeholder: '',
185 - value: 'rgba(0, 237, 3,0.1)' 185 + value: 'rgba(255, 121, 93, 1)'
186 }, 186 },
187 { 187 {
188 type: 'vue-color', 188 type: 'vue-color',
@@ -190,7 +190,7 @@ export const monitorGaugeRate = { @@ -190,7 +190,7 @@ export const monitorGaugeRate = {
190 name: 'color30p5', 190 name: 'color30p5',
191 required: false, 191 required: false,
192 placeholder: '', 192 placeholder: '',
193 - value: 'rgba(0, 237, 3,0.6)' 193 + value: 'rgba(255, 121, 93, 1)'
194 }, 194 },
195 { 195 {
196 type: 'vue-color', 196 type: 'vue-color',
@@ -198,7 +198,7 @@ export const monitorGaugeRate = { @@ -198,7 +198,7 @@ export const monitorGaugeRate = {
198 name: 'color30p10', 198 name: 'color30p10',
199 required: false, 199 required: false,
200 placeholder: '', 200 placeholder: '',
201 - value: 'rgba(0, 237, 3,1)' 201 + value: 'rgba(255, 121, 93, 1)'
202 }, 202 },
203 ] 203 ]
204 }, 204 },
@@ -211,7 +211,7 @@ export const monitorGaugeRate = { @@ -211,7 +211,7 @@ export const monitorGaugeRate = {
211 name: 'color70p0', 211 name: 'color70p0',
212 required: false, 212 required: false,
213 placeholder: '', 213 placeholder: '',
214 - value: 'rgba(255, 184, 0,0.1)' 214 + value: 'rgba(255, 121, 93, 1)'
215 }, 215 },
216 { 216 {
217 type: 'vue-color', 217 type: 'vue-color',
@@ -219,7 +219,7 @@ export const monitorGaugeRate = { @@ -219,7 +219,7 @@ export const monitorGaugeRate = {
219 name: 'color70p5', 219 name: 'color70p5',
220 required: false, 220 required: false,
221 placeholder: '', 221 placeholder: '',
222 - value: 'rgba(255, 184, 0,0.6)' 222 + value: 'rgba(255, 121, 93, 1)'
223 }, 223 },
224 { 224 {
225 type: 'vue-color', 225 type: 'vue-color',
@@ -227,7 +227,7 @@ export const monitorGaugeRate = { @@ -227,7 +227,7 @@ export const monitorGaugeRate = {
227 name: 'color70p10', 227 name: 'color70p10',
228 required: false, 228 required: false,
229 placeholder: '', 229 placeholder: '',
230 - value: 'rgba(255, 184, 0,1)' 230 + value: 'rgba(255, 121, 93, 1)'
231 }, 231 },
232 ] 232 ]
233 }, 233 },
@@ -240,7 +240,7 @@ export const monitorGaugeRate = { @@ -240,7 +240,7 @@ export const monitorGaugeRate = {
240 name: 'color100p0', 240 name: 'color100p0',
241 required: false, 241 required: false,
242 placeholder: '', 242 placeholder: '',
243 - value: 'rgba(175, 36, 74,0.1)' 243 + value: 'rgba(255, 121, 93, 1)'
244 }, 244 },
245 { 245 {
246 type: 'vue-color', 246 type: 'vue-color',
@@ -248,7 +248,7 @@ export const monitorGaugeRate = { @@ -248,7 +248,7 @@ export const monitorGaugeRate = {
248 name: 'color100p5', 248 name: 'color100p5',
249 required: false, 249 required: false,
250 placeholder: '', 250 placeholder: '',
251 - value: 'rgba(255, 36, 74,0.6)' 251 + value: 'rgba(255, 121, 93, 1)'
252 }, 252 },
253 { 253 {
254 type: 'vue-color', 254 type: 'vue-color',
@@ -256,7 +256,7 @@ export const monitorGaugeRate = { @@ -256,7 +256,7 @@ export const monitorGaugeRate = {
256 name: 'color100p10', 256 name: 'color100p10',
257 required: false, 257 required: false,
258 placeholder: '', 258 placeholder: '',
259 - value: 'rgba(255, 36, 74,1)' 259 + value: 'rgba(255, 121, 93, 1)'
260 }, 260 },
261 ] 261 ]
262 }, 262 },
@@ -269,7 +269,7 @@ export const monitorGaugeRate = { @@ -269,7 +269,7 @@ export const monitorGaugeRate = {
269 name: 'tickShow', 269 name: 'tickShow',
270 required: false, 270 required: false,
271 placeholder: '', 271 placeholder: '',
272 - value: true, 272 + value: false,
273 }, 273 },
274 { 274 {
275 type: 'el-input-number', 275 type: 'el-input-number',
@@ -306,7 +306,7 @@ export const monitorGaugeRate = { @@ -306,7 +306,7 @@ export const monitorGaugeRate = {
306 name: 'splitShow', 306 name: 'splitShow',
307 required: false, 307 required: false,
308 placeholder: '', 308 placeholder: '',
309 - value: true, 309 + value: false,
310 }, 310 },
311 { 311 {
312 type: 'el-input-number', 312 type: 'el-input-number',
@@ -380,7 +380,7 @@ export const monitorGaugeRate = { @@ -380,7 +380,7 @@ export const monitorGaugeRate = {
380 name: 'labelColor', 380 name: 'labelColor',
381 required: false, 381 required: false,
382 placeholder: '', 382 placeholder: '',
383 - value: '#fff', 383 + value: 'rgba(18, 18, 18, 1)',
384 }, 384 },
385 { 385 {
386 type: 'el-input-number', 386 type: 'el-input-number',
@@ -40,6 +40,7 @@ import {monitorBasicInformation} from "./echartsConfigJson/monitorConfigJson/mon @@ -40,6 +40,7 @@ import {monitorBasicInformation} from "./echartsConfigJson/monitorConfigJson/mon
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 import {monitorGaugeRate} from "./echartsConfigJson/monitorConfigJson/monitor-gauge-rate";
  43 +import {monitorCustomLineChart} from "./echartsConfigJson/monitorConfigJson/monitor-custom-line-chart";
43 44
44 45
45 export const {widgetTool,monitor} = { 46 export const {widgetTool,monitor} = {
@@ -78,6 +79,7 @@ export const {widgetTool,monitor} = { @@ -78,6 +79,7 @@ export const {widgetTool,monitor} = {
78 monitorBasicInformation, 79 monitorBasicInformation,
79 monitorDetailTable, 80 monitorDetailTable,
80 monitorBgBorder, 81 monitorBgBorder,
81 - monitorGaugeRate 82 + monitorGaugeRate,
  83 + monitorCustomLineChart
82 ] 84 ]
83 } 85 }
  1 +<template>
  2 + <div :style="styleObj">
  3 + <v-chart :options="options" autoresize/>
  4 + </div>
  5 +</template>
  6 +
  7 +<script>
  8 +export default {
  9 + name: "customLineChart",
  10 + components: {},
  11 + props: {
  12 + value: Object,
  13 + ispreview: Boolean
  14 + },
  15 + data() {
  16 + return {
  17 + options: {
  18 + grid: {},
  19 + color: [],
  20 + title: {
  21 + text: "",
  22 + textStyle: {
  23 + color: "#fff"
  24 + }
  25 + },
  26 + tooltip: {
  27 + trigger: "item",
  28 + formatter: "{a} <br/>{b} : {c}%"
  29 + },
  30 + legend: {
  31 + textStyle: {
  32 + color: "#fff"
  33 + }
  34 + },
  35 + xAxis: {
  36 + type: "category",
  37 + data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  38 + axisLabel: {
  39 + show: true,
  40 + textStyle: {
  41 + color: "#fff"
  42 + }
  43 + }
  44 + },
  45 + yAxis: {
  46 + type: "value",
  47 + axisLabel: {
  48 + show: true,
  49 + textStyle: {
  50 + color: "#fff"
  51 + }
  52 + }
  53 + },
  54 + series: [
  55 + {
  56 + data: [],
  57 + type: "line"
  58 + }
  59 + ]
  60 + },
  61 + optionsStyle: {}, // 样式
  62 + optionsData: {}, // 数据
  63 + optionsCollapse: {}, // 图标属性
  64 + optionsSetup: {}
  65 + };
  66 + },
  67 + computed: {
  68 + styleObj() {
  69 + return {
  70 + position: this.ispreview ? "absolute" : "static",
  71 + width: this.optionsStyle.width + "px",
  72 + height: this.optionsStyle.height + "px",
  73 + left: this.optionsStyle.left + "px",
  74 + top: this.optionsStyle.top + "px",
  75 + background: this.optionsSetup.background
  76 + };
  77 + }
  78 + },
  79 + watch: {
  80 + value: {
  81 + handler(val) {
  82 + this.optionsStyle = val.position;
  83 + this.optionsData = val.data;
  84 + this.optionsCollapse = val.collapse;
  85 + this.optionsSetup = val.setup;
  86 + this.editorOptions();
  87 + },
  88 + deep: true
  89 + }
  90 + },
  91 + created() {
  92 + this.optionsStyle = this.value.position;
  93 + this.optionsData = this.value.data;
  94 + this.optionsCollapse = this.value.collapse;
  95 + this.optionsSetup = this.value.setup;
  96 + this.editorOptions();
  97 + },
  98 + methods: {
  99 + // 修改图标options属性
  100 + editorOptions() {
  101 + this.setOptionsTitle();
  102 + this.setOptionsX();
  103 + this.setOptionsY();
  104 + this.setOptionsTop();
  105 + this.setOptionsTooltip();
  106 + this.setOptionsData();
  107 + this.setOptionsMargin();
  108 + this.setOptionsLegend();
  109 + this.setOptionsColor();
  110 + },
  111 + // 标题修改
  112 + setOptionsTitle() {
  113 + const optionsSetup = this.optionsSetup;
  114 + const title = {};
  115 + title.text = optionsSetup.titleText;
  116 + title.show = optionsSetup.isNoTitle;
  117 + title.left = optionsSetup.textAlign;
  118 + title.textStyle = {
  119 + color: optionsSetup.textColor,
  120 + fontSize: optionsSetup.textFontSize,
  121 + fontWeight: optionsSetup.textFontWeight
  122 + };
  123 + title.subtext = optionsSetup.subText;
  124 + title.subtextStyle = {
  125 + color: optionsSetup.subTextColor,
  126 + fontWeight: optionsSetup.subTextFontWeight,
  127 + fontSize: optionsSetup.subTextFontSize
  128 + };
  129 + title.top='8px';
  130 + title.left='8px';
  131 + this.options.title = title;
  132 + },
  133 + // X轴设置
  134 + setOptionsX() {
  135 + const optionsSetup = this.optionsSetup;
  136 + const xAxis = {
  137 + type: "category",
  138 + show: optionsSetup.hideX, // 坐标轴是否显示
  139 + name: optionsSetup.xName, // 坐标轴名称
  140 + nameTextStyle: {
  141 + color: optionsSetup.nameColorX,
  142 + fontSize: optionsSetup.nameFontSizeX
  143 + },
  144 + nameRotate: optionsSetup.textAngle, // 文字角度
  145 + inverse: optionsSetup.reversalX, // 轴反转
  146 + axisLabel: {
  147 + show: true,
  148 + interval: optionsSetup.textInterval, // 文字间隔
  149 + rotate: optionsSetup.textAngle, // 文字角度
  150 + textStyle: {
  151 + color: optionsSetup.Xcolor, // x轴 坐标文字颜色
  152 + fontSize: optionsSetup.fontSizeX
  153 + }
  154 + },
  155 + axisLine: {
  156 + show: true,
  157 + lineStyle: {
  158 + color: optionsSetup.lineColorX
  159 + }
  160 + },
  161 + splitLine: {
  162 + show: optionsSetup.isShowSplitLineX,
  163 + lineStyle: {
  164 + color: optionsSetup.splitLineColorX
  165 + }
  166 + },
  167 + scale: true,
  168 + boundaryGap: ['10%', '10%'],
  169 + splitArea: {
  170 + show: optionsSetup.splitArea,
  171 + areaStyle: {
  172 + color: [optionsSetup.splitAreaColor, 'transparent'
  173 + ]
  174 + }
  175 + }
  176 + };
  177 + this.options.xAxis = xAxis;
  178 + },
  179 + // Y轴设置
  180 + setOptionsY() {
  181 + const optionsSetup = this.optionsSetup;
  182 + const yAxis = {
  183 + type: "value",
  184 + scale: optionsSetup.scale,
  185 + splitNumber: optionsSetup.splitNumber,// 均分
  186 + show: optionsSetup.isShowY, // 坐标轴是否显示
  187 + name: optionsSetup.textNameY, // 坐标轴名称
  188 + nameTextStyle: { // 别名
  189 + color: optionsSetup.nameColorY,
  190 + fontSize: optionsSetup.namefontSizeY
  191 + },
  192 + inverse: optionsSetup.reversalY, // 轴反转
  193 + axisLabel: {
  194 + show: true,
  195 + rotate: optionsSetup.ytextAngle, // 文字角度
  196 + textStyle: {
  197 + color: optionsSetup.colorY, // y轴 坐标文字颜色
  198 + fontSize: optionsSetup.fontSizeY
  199 + }
  200 + },
  201 + axisLine: {
  202 + show: false,//是否显示坐标线
  203 + lineStyle: {
  204 + color: optionsSetup.lineColorY
  205 + }
  206 + },
  207 + axisTick: {
  208 + show: false //是否显示坐标刻度
  209 + },
  210 + splitLine: {
  211 + show: optionsSetup.isShowSplitLineY,
  212 + lineStyle: {
  213 + color: optionsSetup.splitLineColorY
  214 + }
  215 + },
  216 + };
  217 + this.options.yAxis = yAxis;
  218 + },
  219 + // 折线设置
  220 + setOptionsTop() {
  221 + const optionsSetup = this.optionsSetup;
  222 + const series = this.options.series;
  223 + for (const key in series) {
  224 + if (series[key].type == "line") {
  225 + series[key].showSymbol = optionsSetup.markPoint;
  226 + series[key].symbolSize = optionsSetup.pointSize;
  227 + series[key].smooth = optionsSetup.smoothCurve;
  228 + /* series[key].itemStyle = {
  229 + normal : {
  230 + color:optionsSetup.itemStyleColor,
  231 + lineStyle:{
  232 + color:optionsSetup.itemStyleColor
  233 + }
  234 + }
  235 + }*/
  236 + if (optionsSetup.area) {
  237 + series[key].areaStyle = {
  238 + opacity: optionsSetup.areaThickness / 100
  239 + };
  240 + } else {
  241 + series[key].areaStyle = {
  242 + opacity: 0
  243 + };
  244 + }
  245 +
  246 + series[key].lineStyle = {
  247 + width: optionsSetup.lineWidth,
  248 + };
  249 + series[key].label = {
  250 + show: optionsSetup.isShow,
  251 + position: "top",
  252 + distance: 10,
  253 + fontSize: optionsSetup.fontSize,
  254 + color: optionsSetup.subTextColor,
  255 + fontWeight: optionsSetup.fontWeight
  256 + };
  257 + }
  258 + }
  259 + this.options.series = series;
  260 + },
  261 + // tooltip 设置
  262 + setOptionsTooltip() {
  263 + const optionsSetup = this.optionsSetup;
  264 + const tooltip = {
  265 + trigger: "axis",
  266 + show: true,
  267 + textStyle: {
  268 + color: optionsSetup.lineColor,
  269 + fontSize: optionsSetup.fontSize
  270 + },
  271 + formatter:function (param) {
  272 + console.log("param",param,param.length)
  273 + let kpiName=optionsSetup.titleText;
  274 + let kpiUnit='';
  275 + // 鼠标悬浮线上提示
  276 + // 顶部提示
  277 + let tips = '<table>';
  278 + if (param.length == 1) {
  279 + tips += "<tr><td style='text-align:left;' colspan='4'>" + param[0].name + "</td></tr>";
  280 + } else {
  281 + tips += "<tr><td style='text-align:left;' colspan='4'>" + kpiName + " " + param[0].name + "</td></tr>";
  282 + }
  283 + // 每一条提示
  284 + $.each(param, function (i, v) {
  285 + tips += "<tr><td>" + v.marker + "</td>";
  286 + tips += '<td>';
  287 + if (param.length == 1) {
  288 + tips += (kpiName + ' ');
  289 + }
  290 + // tips += (v.seriesName && v.seriesName != '1' && !/series[0-9]+/.test(v.seriesName)) ? v.seriesName : '';
  291 + tips += '</td>'
  292 + tips += "<td>:&nbsp;</td><td>" + v.value;
  293 + tips += (kpiUnit == '%' ? kpiUnit : (' ' + kpiUnit)) + "</td></tr>";
  294 + });
  295 +
  296 +
  297 +
  298 + tips += '</table>'
  299 + return tips;
  300 + }
  301 + };
  302 + this.options.tooltip = tooltip;
  303 + },
  304 + // 边距设置
  305 + setOptionsMargin() {
  306 + const optionsSetup = this.optionsSetup;
  307 + const grid = {
  308 + left: optionsSetup.marginLeft,
  309 + right: optionsSetup.marginRight,
  310 + bottom: optionsSetup.marginBottom,
  311 + top: optionsSetup.marginTop,
  312 + containLabel: true
  313 + };
  314 + this.options.grid = grid;
  315 + },
  316 + // 图例操作 legend
  317 + setOptionsLegend() {
  318 + const optionsSetup = this.optionsSetup;
  319 + const legend = this.options.legend;
  320 + legend.show = optionsSetup.isShowLegend;
  321 + legend.left = optionsSetup.lateralPosition == "left" ? 0 : "auto";
  322 + legend.right = optionsSetup.lateralPosition == "right" ? 0 : "auto";
  323 + legend.top = optionsSetup.longitudinalPosition == "top" ? 0 : "auto";
  324 + legend.bottom =
  325 + optionsSetup.longitudinalPosition == "bottom" ? 0 : "auto";
  326 + legend.orient = optionsSetup.layoutFront;
  327 + legend.textStyle = {
  328 + color: optionsSetup.lengedColor,
  329 + fontSize: optionsSetup.fontSize
  330 + };
  331 + legend.itemWidth = optionsSetup.lengedWidth;
  332 + },
  333 + // 图例颜色修改
  334 + setOptionsColor() {
  335 + const optionsSetup = this.optionsSetup;
  336 + const customColor = optionsSetup.customColor;
  337 + if (!customColor) return;
  338 + const arrColor = [];
  339 + for (let i = 0; i < customColor.length; i++) {
  340 + arrColor.push(customColor[i].color);
  341 + }
  342 + this.options.color = arrColor;
  343 + this.options = Object.assign({}, this.options);
  344 + },
  345 + // 处理数据
  346 + setOptionsData() {
  347 + const optionsData = this.optionsData; // 数据类型 静态 or 动态
  348 + optionsData.dataType == "staticData"
  349 + ? this.staticDataFn(optionsData.staticData)
  350 + : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
  351 + },
  352 + staticDataFn(val) {
  353 + const series = this.options.series;
  354 + let axis = [];
  355 + let data = [];
  356 + for (const i in val) {
  357 + axis[i] = val[i].axis;
  358 + data[i] = val[i].data
  359 + }
  360 + console.log("abc",axis,data)
  361 + // x轴
  362 + this.options.xAxis.data = axis;
  363 + // series
  364 + for (const i in series) {
  365 + if (series[i].type == "line") {
  366 + series[i].data = data;
  367 + }
  368 + }
  369 + },
  370 + dynamicDataFn(val, refreshTime) {
  371 + if (!val) return;
  372 + if (this.ispreview) {
  373 + this.getEchartData(val);
  374 + this.flagInter = setInterval(() => {
  375 + this.getEchartData(val);
  376 + }, refreshTime);
  377 + } else {
  378 + this.getEchartData(val);
  379 + }
  380 + },
  381 + getEchartData(val) {
  382 + const data = this.queryEchartsData(val);
  383 + data.then(res => {
  384 + this.renderingFn(res);
  385 + });
  386 + },
  387 + renderingFn(val) {
  388 + // x轴
  389 + this.options.xAxis.data = val.xAxis;
  390 + // series
  391 + const series = this.options.series;
  392 + for (const i in series) {
  393 + if (series[i].type == "line") {
  394 + series[i].data = val.series[i].datas;
  395 + }
  396 + }
  397 + }
  398 + }
  399 +};
  400 +</script>
  401 +
  402 +<style scoped lang="scss">
  403 +.echarts {
  404 + width: 100%;
  405 + height: 100%;
  406 + overflow: hidden;
  407 +}
  408 +</style>
@@ -43,6 +43,7 @@ import monitorBasicInformation from "./monitor/basicInformation"; @@ -43,6 +43,7 @@ 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 import monitorGaugeRate from "./monitor/gaugeRate";
  46 +import monitorCustomLineChart from "./monitor/customLineChart";
46 47
47 export default { 48 export default {
48 name: "WidgetTemp", 49 name: "WidgetTemp",
@@ -78,7 +79,8 @@ export default { @@ -78,7 +79,8 @@ export default {
78 monitorBasicInformation, 79 monitorBasicInformation,
79 monitorDetailTable, 80 monitorDetailTable,
80 monitorBgBorder, 81 monitorBgBorder,
81 - monitorGaugeRate 82 + monitorGaugeRate,
  83 + monitorCustomLineChart
82 }, 84 },
83 model: { 85 model: {
84 prop: "value", 86 prop: "value",
@@ -54,6 +54,7 @@ import monitorBasicInformation from "./monitor/basicInformation"; @@ -54,6 +54,7 @@ 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 import monitorGaugeRate from "./monitor/gaugeRate";
  57 +import monitorCustomLineChart from "./monitor/customLineChart";
57 58
58 59
59 export default { 60 export default {
@@ -89,7 +90,8 @@ export default { @@ -89,7 +90,8 @@ export default {
89 monitorBasicInformation, 90 monitorBasicInformation,
90 monitorDetailTable, 91 monitorDetailTable,
91 monitorBgBorder, 92 monitorBgBorder,
92 - monitorGaugeRate 93 + monitorGaugeRate,
  94 + monitorCustomLineChart
93 }, 95 },
94 model: { 96 model: {
95 prop: "value", 97 prop: "value",