monitor_v3 / anji-plus-report · Commits

Go to a project

Authored by 王涛
Commit af9942f89354d18faeef9adfc1eea455ed2fcf7c 2 parents 062c2c6f 50041111

Merge branch 'master-500-dev' of http://192.168.1.136:82/monitor_v3/anji-plus-re… 

…port into master-500-dev
Inline Side-by-side
Showing 28 changed files with 2095 additions and 89 deletions
@@ -6,8 +6,10 @@ module.exports = merge(prodEnv, { @@ -6,8 +6,10 @@ module.exports = merge(prodEnv, {
6 NODE_ENV: '"development"', 6 NODE_ENV: '"development"',
7 BASE_API: '"http://192.168.0.59:9095"', 7 BASE_API: '"http://192.168.0.59:9095"',
8 MONITOR_GATEWAY: '"http://192.168.0.59:8080"' 8 MONITOR_GATEWAY: '"http://192.168.0.59:8080"'
9 - /* BASE_API: '"http://192.168.0.75:9095"', 9 + /*BASE_API: '"http://192.168.0.75:9095"',
10 MONITOR_GATEWAY: '"http://192.168.0.75:8080"'*/ 10 MONITOR_GATEWAY: '"http://192.168.0.75:8080"'*/
  11 + /* BASE_API: '"https://192.168.0.248:8089"',
  12 + MONITOR_GATEWAY: '"https://192.168.0.248:8080"'*/
11 /*BASE_API: '"http://192.168.1.52:8089"', 13 /*BASE_API: '"http://192.168.1.52:8089"',
12 MONITOR_GATEWAY: '"http://192.168.1.52:8080"'*/ 14 MONITOR_GATEWAY: '"http://192.168.1.52:8080"'*/
13 15
@@ -152,8 +152,8 @@ export default { @@ -152,8 +152,8 @@ export default {
152 let xAxisList = []; 152 let xAxisList = [];
153 let series = []; 153 let series = [];
154 let kpiUnit=''; 154 let kpiUnit='';
155 - if(data && data[0] ){  
156 - if(data[0].data){ 155 + if(data && data[0]){
  156 + if(data[0].data && data[0].series){
157 if(data[0].data.names && data[0].data.names.length>0){ 157 if(data[0].data.names && data[0].data.names.length>0){
158 xAxisList=data[0].data.names; 158 xAxisList=data[0].data.names;
159 }else{ 159 }else{
@@ -173,34 +173,48 @@ export default { @@ -173,34 +173,48 @@ export default {
173 }]; 173 }];
174 } 174 }
175 }else{ 175 }else{
176 - //容量分析柱线图数据结构  
177 - let seriesCapacityData=[];//容量  
178 - let seriesUsageRateData=[];//使用率  
179 - let seriesUsageValueData=[];//使用量  
180 - data.map(item=>{  
181 - xAxisList.push(item.periodVal);  
182 - seriesCapacityData.push(item.capacityValue)  
183 - seriesUsageRateData.push(item.usageRate)  
184 - seriesUsageValueData.push(item.usageValue) 176 + let dataData='';
  177 + if(data[0].data && data[0].data.length>=0){
  178 + dataData=data[0].data;
  179 + }else{
  180 + dataData=data;
  181 + }
  182 + if(dataData.length>0){
  183 + //容量分析柱线图数据结构
  184 + let seriesCapacityData=[];//容量
  185 + let seriesUsageRateData=[];//使用率
  186 + let seriesUsageValueData=[];//使用量
  187 + dataData.map(item=>{
  188 + xAxisList.push(item.periodVal);
  189 + seriesCapacityData.push(item.capacityValue)
  190 + seriesUsageRateData.push(item.usageRate)
  191 + seriesUsageValueData.push(item.usageValue)
185 192
186 - })  
187 - series.push({  
188 - type:'bar',  
189 - name:'使用量',  
190 - data:seriesUsageValueData  
191 - })  
192 - series.push({  
193 - type:'line',  
194 - name:'容量',  
195 - data:seriesCapacityData  
196 - })  
197 - series.push({  
198 - type:'line',  
199 - name:'使用率',  
200 - data:seriesUsageRateData  
201 - }) 193 + })
  194 + series.push({
  195 + type:'bar',
  196 + name:'使用量',
  197 + data:seriesUsageValueData
  198 + })
  199 + series.push({
  200 + type:'line',
  201 + name:'容量',
  202 + data:seriesCapacityData
  203 + })
  204 + series.push({
  205 + type:'line',
  206 + name:'使用率',
  207 + data:seriesUsageRateData
  208 + })
  209 + }else{
  210 + xAxisList=[]
  211 + series = [{
  212 + name: "",
  213 + type:'bar',
  214 + data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
  215 + }];
  216 + }
202 } 217 }
203 -  
204 }else{ 218 }else{
205 // 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'] 219 // 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']
206 xAxisList=[] 220 xAxisList=[]
@@ -16,6 +16,8 @@ const getters = { @@ -16,6 +16,8 @@ const getters = {
16 //按钮月季度年切换 16 //按钮月季度年切换
17 buttonVals:state => state.buttonVal.buttonValData, 17 buttonVals:state => state.buttonVal.buttonValData,
18 //树形控件点击切换 18 //树形控件点击切换
19 - elTreeDatas:state => state.elTreeData.treeDatas 19 + elTreeDatas:state => state.elTreeData.treeDatas,
  20 + //进度条的数据
  21 + progressDatas:state => state.progress.progressData,
20 } 22 }
21 export default getters 23 export default getters
@@ -11,6 +11,7 @@ import help from './modules/help' @@ -11,6 +11,7 @@ import help from './modules/help'
11 import tableHead from './modules/tableHead' 11 import tableHead from './modules/tableHead'
12 import buttonVal from "./modules/button"; 12 import buttonVal from "./modules/button";
13 import elTreeData from "./modules/elTree"; 13 import elTreeData from "./modules/elTree";
  14 +import progress from "./modules/progress";
14 15
15 Vue.use(Vuex) 16 Vue.use(Vuex)
16 17
@@ -25,7 +26,8 @@ const store = new Vuex.Store({ @@ -25,7 +26,8 @@ const store = new Vuex.Store({
25 help, 26 help,
26 tableHead, 27 tableHead,
27 buttonVal, 28 buttonVal,
28 - elTreeData 29 + elTreeData,
  30 + progress,
29 }, 31 },
30 state: { }, 32 state: { },
31 plugins: [initPlugin], 33 plugins: [initPlugin],
  1 +
  2 +const progress = {
  3 + state: {
  4 + progressData: ''
  5 + },
  6 +
  7 + mutations: {
  8 + CHANGE_PROGRESS: (state, val) => {
  9 + state.progressData=val;
  10 + }
  11 + },
  12 + actions: {
  13 +
  14 + }
  15 +}
  16 +
  17 +export default progress
@@ -154,9 +154,9 @@ export default { @@ -154,9 +154,9 @@ export default {
154 echoDynamicData(val) { 154 echoDynamicData(val) {
155 const chartProperties = this.deepClone(val.chartProperties); 155 const chartProperties = this.deepClone(val.chartProperties);
156 this.chartProperties = chartProperties; 156 this.chartProperties = chartProperties;
157 - if (this.userNameList.length > 0) { 157 + if (this.setParamList && this.userNameList.length > 0) {
158 } 158 }
159 - if (this.setParamList.length > 0) { 159 + if (this.setParamList && this.setParamList.length > 0) {
160 for (let i = 0; i < this.setParamList.length; i++) { 160 for (let i = 0; i < this.setParamList.length; i++) {
161 const item = this.setParamList[i]; 161 const item = this.setParamList[i];
162 if (chartProperties.hasOwnProperty(item)) { 162 if (chartProperties.hasOwnProperty(item)) {
  1 +/*
  2 + * @Descripttion: 柱线图
  3 + * @version:
  4 + * @Author: lsq
  5 + * @Date: 2022-03-01
  6 + * @LastEditors: lsq
  7 + * @LastEditTime: 2022-03-01
  8 + */
  9 +export const monitorCustomBarLineChartArray = {
  10 + code: 'monitor-custom-bar-line-chart-array',
  11 + type: 'chart',
  12 + label: '柱线图-双线-循环',
  13 + icon: 'iconzhuxiantu',
  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-switch',
  35 + label: '与按钮组件联动',
  36 + name: 'isVuex',
  37 + required: false,
  38 + placeholder: '',
  39 + value: true,
  40 + },
  41 + {
  42 + type: 'el-switch',
  43 + label: '与flag联动',
  44 + name: 'isFlag',
  45 + required: false,
  46 + placeholder: '',
  47 + value: true,
  48 + },
  49 + {
  50 + type: 'el-input-number',
  51 + label: '柱线图高度',
  52 + name: 'itemHeight',
  53 + required: false,
  54 + placeholder: '',
  55 + value: 250
  56 + },
  57 + {
  58 + type: 'el-input-number',
  59 + label: '柱线图下边距',
  60 + name: 'itemMarginBottom',
  61 + required: false,
  62 + placeholder: '',
  63 + value: 5
  64 + },
  65 + {
  66 + type: 'vue-color',
  67 + label: '每组柱线图背景色',
  68 + name: 'itemBackground',
  69 + required: false,
  70 + placeholder: '',
  71 + value: '#fff'
  72 + },
  73 + [
  74 + {
  75 + name: '折线设置',
  76 + list: [
  77 + {
  78 + type: 'el-switch',
  79 + label: '标记点',
  80 + name: 'markPoint',
  81 + required: false,
  82 + placeholder: '',
  83 + value: true,
  84 + },
  85 + {
  86 + type: 'el-slider',
  87 + label: '点大小',
  88 + name: 'pointSize',
  89 + required: false,
  90 + placeholder: '',
  91 + value: 5,
  92 + },
  93 + {
  94 + type: 'el-switch',
  95 + label: '平滑曲线',
  96 + name: 'smoothCurve',
  97 + required: false,
  98 + placeholder: '',
  99 + value: true,
  100 + },
  101 + {
  102 + type: 'el-switch',
  103 + label: '面积堆积',
  104 + name: 'area',
  105 + required: false,
  106 + placeholder: '',
  107 + value: true,
  108 + },
  109 + {
  110 + type: 'el-slider',
  111 + label: '面积厚度',
  112 + name: 'areaThickness',
  113 + required: false,
  114 + placeholder: '',
  115 + value: 5,
  116 + },
  117 + {
  118 + type: 'el-slider',
  119 + label: '线条宽度',
  120 + name: 'lineWidth',
  121 + required: false,
  122 + placeholder: '',
  123 + value: 2,
  124 + },
  125 + ],
  126 + },
  127 + {
  128 + name: '柱体设置',
  129 + list: [
  130 + {
  131 + type: 'el-slider',
  132 + label: '最大宽度',
  133 + name: 'maxWidth',
  134 + required: false,
  135 + placeholder: '',
  136 + value: 10,
  137 + },
  138 + {
  139 + type: 'el-slider',
  140 + label: '圆角',
  141 + name: 'radius',
  142 + require: false,
  143 + placeholder: '',
  144 + value: 5,
  145 + },
  146 + {
  147 + type: 'el-slider',
  148 + label: '最小高度',
  149 + name: 'minHeight',
  150 + require: false,
  151 + placeholder: '',
  152 + value: 0,
  153 + },
  154 + ],
  155 + },
  156 + {
  157 + name: '标题设置',
  158 + list: [
  159 + {
  160 + type: 'el-switch',
  161 + label: '标题',
  162 + name: 'isNoTitle',
  163 + required: false,
  164 + placeholder: '',
  165 + value: true
  166 + },
  167 + {
  168 + type: 'el-input-text',
  169 + label: '标题',
  170 + name: 'titleText',
  171 + required: false,
  172 + placeholder: '',
  173 + value: ''
  174 + },
  175 + {
  176 + type: 'vue-color',
  177 + label: '字体颜色',
  178 + name: 'textColor',
  179 + required: false,
  180 + placeholder: '',
  181 + value: '#1e9fff'
  182 + },
  183 + {
  184 + type: 'el-select',
  185 + label: '字体粗细',
  186 + name: 'textFontWeight',
  187 + required: false,
  188 + placeholder: '',
  189 + selectOptions: [
  190 + {code: 'normal', name: '正常'},
  191 + {code: 'bold', name: '粗体'},
  192 + {code: 'bolder', name: '特粗体'},
  193 + {code: 'lighter', name: '细体'}
  194 + ],
  195 + value: 'bold'
  196 + },
  197 + {
  198 + type: 'el-input-number',
  199 + label: '字体大小',
  200 + name: 'textFontSize',
  201 + required: false,
  202 + placeholder: '',
  203 + value: 16
  204 + },
  205 + {
  206 + type: 'el-select',
  207 + label: '字体位置',
  208 + name: 'textAlign',
  209 + required: false,
  210 + placeholder: '',
  211 + selectOptions: [
  212 + {code: 'center', name: '居中'},
  213 + {code: 'left', name: '左对齐'},
  214 + {code: 'right', name: '右对齐'},
  215 + ],
  216 + value: 'left'
  217 + },
  218 + {
  219 + type: 'el-select',
  220 + label: '标题垂直位置',
  221 + name: 'textAlignVertical',
  222 + required: false,
  223 + placeholder: '',
  224 + selectOptions: [
  225 + {code: 'top', name: '靠上'},
  226 + {code: 'bottom', name: '靠下'},
  227 + ],
  228 + value: 'top'
  229 + },
  230 + {
  231 + type: 'el-input-text',
  232 + label: '副标题',
  233 + name: 'subText',
  234 + required: false,
  235 + placeholder: '',
  236 + value: ''
  237 + },
  238 + {
  239 + type: 'vue-color',
  240 + label: '字体颜色',
  241 + name: 'subTextColor',
  242 + required: false,
  243 + placeholder: '',
  244 + value: '#fff'
  245 + },
  246 + {
  247 + type: 'el-select',
  248 + label: '字体粗细',
  249 + name: 'subTextFontWeight',
  250 + required: false,
  251 + placeholder: '',
  252 + selectOptions: [
  253 + {code: 'normal', name: '正常'},
  254 + {code: 'bold', name: '粗体'},
  255 + {code: 'bolder', name: '特粗体'},
  256 + {code: 'lighter', name: '细体'}
  257 + ],
  258 + value: 'normal'
  259 + },
  260 + {
  261 + type: 'el-input-number',
  262 + label: '字体大小',
  263 + name: 'subTextFontSize',
  264 + required: false,
  265 + placeholder: '',
  266 + value: 20
  267 + },
  268 + ],
  269 + },
  270 + {
  271 + name: 'X轴设置',
  272 + list: [
  273 + {
  274 + type: 'el-switch',
  275 + label: '显示',
  276 + name: 'hideX',
  277 + required: false,
  278 + placeholder: '',
  279 + value: true,
  280 + },
  281 + {
  282 + type: 'el-input-text',
  283 + label: '坐标名',
  284 + name: 'xName',
  285 + required: false,
  286 + placeholder: '',
  287 + value: ''
  288 + },
  289 + {
  290 + type: 'vue-color',
  291 + label: '坐标名颜色',
  292 + name: 'nameColorX',
  293 + required: false,
  294 + placeholder: '',
  295 + value: '#fff',
  296 + },
  297 + {
  298 + type: 'el-input-number',
  299 + label: '坐标字号',
  300 + name: 'nameFontSizeX',
  301 + required: false,
  302 + placeholder: '',
  303 + value: 14,
  304 + },
  305 + {
  306 + type: 'vue-color',
  307 + label: '数值颜色',
  308 + name: 'Xcolor',
  309 + required: false,
  310 + placeholder: '',
  311 + value: '#666',
  312 + },
  313 + {
  314 + type: 'el-input-number',
  315 + label: '数值字号',
  316 + name: 'fontSizeX',
  317 + required: false,
  318 + placeholder: '',
  319 + value: 14,
  320 + },
  321 + {
  322 + type: 'el-slider',
  323 + label: '数值角度',
  324 + name: 'textAngle',
  325 + required: false,
  326 + placeholder: '',
  327 + value: 0
  328 + },
  329 + {
  330 + type: 'el-input-number',
  331 + label: '数值间隔',
  332 + name: 'textInterval',
  333 + required: false,
  334 + placeholder: '',
  335 + value: ''
  336 + },
  337 + {
  338 + type: 'el-switch',
  339 + label: '轴反转',
  340 + name: 'reversalX',
  341 + required: false,
  342 + placeholder: '',
  343 + value: false
  344 + },
  345 + {
  346 + type: 'vue-color',
  347 + label: '轴颜色',
  348 + name: 'lineColorX',
  349 + required: false,
  350 + placeholder: '',
  351 + value: '#c9c9c9',
  352 + },
  353 + {
  354 + type: 'el-switch',
  355 + label: '分割线显示',
  356 + name: 'isShowSplitLineX',
  357 + require: false,
  358 + placeholder: '',
  359 + value: false,
  360 + },
  361 + {
  362 + type: 'vue-color',
  363 + label: '分割线颜色',
  364 + name: 'splitLineColorX',
  365 + required: false,
  366 + placeholder: '',
  367 + value: '#fff',
  368 + }
  369 + ],
  370 + },
  371 + {
  372 + name: 'Y轴设置',
  373 + list: [
  374 + {
  375 + type: 'el-switch',
  376 + label: '左显示',
  377 + name: 'isShowYLeft',
  378 + require: false,
  379 + placeholder: '',
  380 + value: true,
  381 + },
  382 + {
  383 + type: 'el-input-text',
  384 + label: '左坐标名',
  385 + name: 'textNameYLeft',
  386 + require: false,
  387 + placeholder: '',
  388 + value: ''
  389 + },
  390 + {
  391 + type: 'vue-color',
  392 + label: '左坐标名颜色',
  393 + name: 'nameColorYLeft',
  394 + required: false,
  395 + placeholder: '',
  396 + value: '#fff',
  397 + },
  398 + {
  399 + type: 'el-input-number',
  400 + label: '左坐标字号',
  401 + name: 'namefontSizeYLeft',
  402 + required: false,
  403 + placeholder: '',
  404 + value: 14,
  405 + },
  406 + {
  407 + type: 'el-input-number',
  408 + label: '左均分',
  409 + name: 'splitNumberLeft',
  410 + required: false,
  411 + placeholder: '',
  412 + value: ''
  413 + },
  414 + {
  415 + type: 'el-switch',
  416 + label: '右显示',
  417 + name: 'isShowYRight',
  418 + require: false,
  419 + placeholder: '',
  420 + value: true,
  421 + },
  422 + {
  423 + type: 'el-input-text',
  424 + label: '右坐标名',
  425 + name: 'textNameYRight',
  426 + require: false,
  427 + placeholder: '',
  428 + value: ''
  429 + },
  430 + {
  431 + type: 'vue-color',
  432 + label: '右坐标名颜色',
  433 + name: 'nameColorYRight',
  434 + required: false,
  435 + placeholder: '',
  436 + value: '#fff',
  437 + },
  438 + {
  439 + type: 'el-input-number',
  440 + label: '右坐标字号',
  441 + name: 'namefontSizeYRight',
  442 + required: false,
  443 + placeholder: '',
  444 + value: 14,
  445 + },
  446 + {
  447 + type: 'el-input-number',
  448 + label: '右均分',
  449 + name: 'splitNumberRight',
  450 + required: false,
  451 + placeholder: '',
  452 + value: ''
  453 + },
  454 + {
  455 + type: 'vue-color',
  456 + label: '数值颜色',
  457 + name: 'colorY',
  458 + required: false,
  459 + placeholder: '',
  460 + value: '#666',
  461 + },
  462 + {
  463 + type: 'el-input-number',
  464 + label: '数值字号',
  465 + name: 'fontSizeY',
  466 + required: false,
  467 + placeholder: '',
  468 + value: 14,
  469 + },
  470 + {
  471 + type: 'el-switch',
  472 + label: '轴反转',
  473 + name: 'reversalY',
  474 + required: false,
  475 + placeholder: '',
  476 + value: false
  477 + },
  478 + {
  479 + type: 'vue-color',
  480 + label: '轴颜色',
  481 + name: 'lineColorY',
  482 + required: false,
  483 + placeholder: '',
  484 + value: '#c9c9c9',
  485 + },
  486 + ],
  487 + },
  488 + {
  489 + name: '折线数值设定',
  490 + list: [
  491 + {
  492 + type: 'el-switch',
  493 + label: '显示',
  494 + name: 'isShowLine',
  495 + required: false,
  496 + placeholder: '',
  497 + value: false
  498 + },
  499 + {
  500 + type: 'el-input-number',
  501 + label: '距离',
  502 + name: 'distanceLine',
  503 + required: false,
  504 + placeholder: '',
  505 + value: 5
  506 + },
  507 + {
  508 + type: 'el-input-number',
  509 + label: '字体字号',
  510 + name: 'fontSizeLine',
  511 + required: false,
  512 + placeholder: '',
  513 + value: 14
  514 + },
  515 + {
  516 + type: 'vue-color',
  517 + label: '字体颜色',
  518 + name: 'subTextColorLine',
  519 + required: false,
  520 + placeholder: '',
  521 + value: '#666'
  522 + },
  523 + {
  524 + type: 'el-select',
  525 + label: '字体粗细',
  526 + name: 'fontWeightLine',
  527 + required: false,
  528 + placeholder: '',
  529 + selectOptions: [
  530 + {code: 'normal', name: '正常'},
  531 + {code: 'bold', name: '粗体'},
  532 + {code: 'bolder', name: '特粗体'},
  533 + {code: 'lighter', name: '细体'}
  534 + ],
  535 + value: 'normal'
  536 + },
  537 + ],
  538 + },
  539 + {
  540 + name: '柱体数值设定',
  541 + list: [
  542 + {
  543 + type: 'el-switch',
  544 + label: '显示',
  545 + name: 'isShowBar',
  546 + required: false,
  547 + placeholder: '',
  548 + value: false
  549 + },
  550 + {
  551 + type: 'el-input-number',
  552 + label: '距离',
  553 + name: 'distanceBar',
  554 + required: false,
  555 + placeholder: '',
  556 + value: 5
  557 + },
  558 + {
  559 + type: 'el-input-number',
  560 + label: '字体字号',
  561 + name: 'fontSizeBar',
  562 + required: false,
  563 + placeholder: '',
  564 + value: 14
  565 + },
  566 + {
  567 + type: 'vue-color',
  568 + label: '字体颜色',
  569 + name: 'subTextColorBar',
  570 + required: false,
  571 + placeholder: '',
  572 + value: '#666'
  573 + },
  574 + {
  575 + type: 'el-select',
  576 + label: '字体粗细',
  577 + name: 'fontWeightBar',
  578 + required: false,
  579 + placeholder: '',
  580 + selectOptions: [
  581 + {code: 'normal', name: '正常'},
  582 + {code: 'bold', name: '粗体'},
  583 + {code: 'bolder', name: '特粗体'},
  584 + {code: 'lighter', name: '细体'}
  585 + ],
  586 + value: 'normal'
  587 + },
  588 + ],
  589 + },
  590 + {
  591 + name: '提示语设置',
  592 + list: [
  593 + {
  594 + type: 'el-input-number',
  595 + label: '字体大小',
  596 + name: 'tipFontSize',
  597 + required: false,
  598 + placeholder: '',
  599 + value: 12
  600 + },
  601 + {
  602 + type: 'vue-color',
  603 + label: '字体颜色',
  604 + name: 'lineColor',
  605 + required: false,
  606 + placeholder: '',
  607 + value: '#e68b55'
  608 + },
  609 + ],
  610 + },
  611 + {
  612 + name: '坐标轴边距设置',
  613 + list: [
  614 + {
  615 + type: 'el-slider',
  616 + label: '左边距(像素)',
  617 + name: 'marginLeft',
  618 + required: false,
  619 + placeholder: '',
  620 + value: 10,
  621 + }, {
  622 + type: 'el-slider',
  623 + label: '顶边距(像素)',
  624 + name: 'marginTop',
  625 + required: false,
  626 + placeholder: '',
  627 + value: 50,
  628 + }, {
  629 + type: 'el-slider',
  630 + label: '右边距(像素)',
  631 + name: 'marginRight',
  632 + required: false,
  633 + placeholder: '',
  634 + value: 40,
  635 + }, {
  636 + type: 'el-slider',
  637 + label: '底边距(像素)',
  638 + name: 'marginBottom',
  639 + required: false,
  640 + placeholder: '',
  641 + value: 10,
  642 + },
  643 + ],
  644 + },
  645 + {
  646 + name: '图例操作',
  647 + list: [
  648 + {
  649 + type: 'el-switch',
  650 + label: '显示',
  651 + name: 'isShowLegend',
  652 + required: false,
  653 + placeholder: '',
  654 + value: true,
  655 + },
  656 + {
  657 + type: 'el-switch',
  658 + label: '图例文字显示',
  659 + name: 'isShowLegendText',
  660 + required: false,
  661 + placeholder: '',
  662 + value: true,
  663 + },
  664 + {
  665 + type: 'vue-color',
  666 + label: '字体颜色',
  667 + name: 'lengedColor',
  668 + required: false,
  669 + placeholder: '',
  670 + value: '#666',
  671 + },
  672 + {
  673 + type: 'el-input-number',
  674 + label: '字体大小',
  675 + name: 'lengedFontSize',
  676 + required: false,
  677 + placeholder: '',
  678 + value: 14,
  679 + },
  680 + {
  681 + type: 'el-input-number',
  682 + label: '图例宽度',
  683 + name: 'lengedWidth',
  684 + required: false,
  685 + placeholder: '',
  686 + value: 15,
  687 + },
  688 + {
  689 + type: 'el-select',
  690 + label: '横向位置',
  691 + name: 'lateralPosition',
  692 + required: false,
  693 + placeholder: '',
  694 + selectOptions: [
  695 + {code: 'center', name: '居中'},
  696 + {code: 'left', name: '左对齐'},
  697 + {code: 'right', name: '右对齐'},
  698 + ],
  699 + value: 'center'
  700 + },
  701 + {
  702 + type: 'el-select',
  703 + label: '纵向位置',
  704 + name: 'longitudinalPosition',
  705 + required: false,
  706 + placeholder: '',
  707 + selectOptions: [
  708 + {code: 'top', name: '顶部'},
  709 + {code: 'bottom', name: '底部'},
  710 + ],
  711 + value: 'top'
  712 + },
  713 + {
  714 + type: 'el-select',
  715 + label: '布局前置',
  716 + name: 'layoutFront',
  717 + required: false,
  718 + placeholder: '',
  719 + selectOptions: [
  720 + {code: 'vertical', name: '竖排'},
  721 + {code: 'horizontal', name: '横排'},
  722 + ],
  723 + value: 'horizontal'
  724 + },
  725 + ],
  726 + },
  727 + {
  728 + name: '自定义配色',
  729 + list: [
  730 + {
  731 + type: 'customColor',
  732 + label: '',
  733 + name: 'customColor',
  734 + required: false,
  735 + value: [{color: '#3b91ff'}, {color: '#ff1111'}, {color: '#2c2f90'}],
  736 + },
  737 + ],
  738 + },
  739 + ],
  740 + ],
  741 + // 数据
  742 + data: [
  743 + {
  744 + type: 'el-radio-group',
  745 + label: '数据类型',
  746 + name: 'dataType',
  747 + require: false,
  748 + placeholder: '',
  749 + selectValue: true,
  750 + selectOptions: [
  751 + {
  752 + code: 'staticData',
  753 + name: '静态数据',
  754 + },
  755 + {
  756 + code: 'dynamicData',
  757 + name: '动态数据',
  758 + },
  759 + ],
  760 + value: 'staticData',
  761 + },
  762 + {
  763 + type: 'el-input-number',
  764 + label: '刷新时间(毫秒)',
  765 + name: 'refreshTime',
  766 + relactiveDom: 'dataType',
  767 + relactiveDomValue: 'dynamicData',
  768 + value: 5000
  769 + },
  770 + {
  771 + type: 'el-button',
  772 + label: '静态数据',
  773 + name: 'staticData',
  774 + required: false,
  775 + placeholder: '',
  776 + relactiveDom: 'dataType',
  777 + relactiveDomValue: 'staticData',
  778 + value: [
  779 + {"axis": "1月", "bar": 2.6, "line": 2},
  780 + {"axis": "2月", "bar": 5.9, "line": 2.2},
  781 + {"axis": "3月", "bar": 9, "line": 3.3},
  782 + {"axis": "4月", "bar": 26.4, "line": 4.5},
  783 + {"axis": "5月", "bar": 28.7, "line": 6.3},
  784 + {"axis": "6月", "bar": 70.7, "line": 10.2},
  785 + {"axis": "7月", "bar": 175.6, "line": 20.3},
  786 + {"axis": "8月", "bar": 182.2, "line": 23.4},
  787 + {"axis": "9月", "bar": 48.7, "line": 23},
  788 + {"axis": "10月", "bar": 18.8, "line": 16.5},
  789 + {"axis": "11月", "bar": 6, "line": 12},
  790 + {"axis": "12月", "bar": 2.3, "line": 6.2},
  791 + ]
  792 + },
  793 + {
  794 + type: 'dycustComponents',
  795 + label: '',
  796 + name: 'dynamicData',
  797 + required: false,
  798 + placeholder: '',
  799 + relactiveDom: 'dataType',
  800 + chartType: 'custom-barlinechart',
  801 + dictKey: 'BAR_LINE_PROPERTIES',
  802 + relactiveDomValue: 'dynamicData',
  803 + },
  804 + ],
  805 + // 坐标
  806 + position: [
  807 + {
  808 + type: 'el-input-number',
  809 + label: '左边距',
  810 + name: 'left',
  811 + required: false,
  812 + placeholder: '',
  813 + value: 0,
  814 + },
  815 + {
  816 + type: 'el-input-number',
  817 + label: '上边距',
  818 + name: 'top',
  819 + required: false,
  820 + placeholder: '',
  821 + value: 0,
  822 + },
  823 + {
  824 + type: 'el-input-number',
  825 + label: '宽度',
  826 + name: 'width',
  827 + required: false,
  828 + placeholder: '该容器在1920px大屏中的宽度',
  829 + value: 1403,
  830 + },
  831 + {
  832 + type: 'el-input-number',
  833 + label: '高度',
  834 + name: 'height',
  835 + required: false,
  836 + placeholder: '该容器在1080px大屏中的高度',
  837 + value: 800,
  838 + },
  839 + ],
  840 + }
  841 +}
@@ -728,6 +728,14 @@ export const monitorCustomBarLineChart = { @@ -728,6 +728,14 @@ export const monitorCustomBarLineChart = {
728 value: 'staticData', 728 value: 'staticData',
729 }, 729 },
730 { 730 {
  731 + type: 'el-switch',
  732 + label: '是否刷新',
  733 + name: 'isRefresh',
  734 + relactiveDom: 'dataType',
  735 + relactiveDomValue: 'dynamicData',
  736 + value: false
  737 + },
  738 + {
731 type: 'el-input-number', 739 type: 'el-input-number',
732 label: '刷新时间(毫秒)', 740 label: '刷新时间(毫秒)',
733 name: 'refreshTime', 741 name: 'refreshTime',
@@ -646,6 +646,14 @@ export const monitorCustomLineTrend = { @@ -646,6 +646,14 @@ export const monitorCustomLineTrend = {
646 value: 'staticData', 646 value: 'staticData',
647 }, 647 },
648 { 648 {
  649 + type: 'el-switch',
  650 + label: '是否刷新',
  651 + name: 'isRefresh',
  652 + relactiveDom: 'dataType',
  653 + relactiveDomValue: 'dynamicData',
  654 + value: false
  655 + },
  656 + {
649 type: 'el-input-number', 657 type: 'el-input-number',
650 label: '刷新时间(毫秒)', 658 label: '刷新时间(毫秒)',
651 name: 'refreshTime', 659 name: 'refreshTime',
@@ -332,6 +332,14 @@ export const monitorCustomLiquidFillChart = { @@ -332,6 +332,14 @@ export const monitorCustomLiquidFillChart = {
332 value: 'staticData', 332 value: 'staticData',
333 }, 333 },
334 { 334 {
  335 + type: 'el-switch',
  336 + label: '是否刷新',
  337 + name: 'isRefresh',
  338 + relactiveDom: 'dataType',
  339 + relactiveDomValue: 'dynamicData',
  340 + value: false
  341 + },
  342 + {
335 type: 'el-input-number', 343 type: 'el-input-number',
336 label: '刷新时间(毫秒)', 344 label: '刷新时间(毫秒)',
337 name: 'refreshTime', 345 name: 'refreshTime',
@@ -74,6 +74,15 @@ export const monitorProgressInformation = { @@ -74,6 +74,15 @@ export const monitorProgressInformation = {
74 ], 74 ],
75 value: 'column' 75 value: 'column'
76 }, 76 },
  77 +
  78 + {
  79 + type: 'el-input-number',
  80 + label: '每组进度条高度',
  81 + name: 'itemHeight',
  82 + required: false,
  83 + placeholder: '',
  84 + value: '250'
  85 + },
77 [ 86 [
78 { 87 {
79 name: '标题设置', 88 name: '标题设置',
@@ -206,6 +206,14 @@ export const monitorSystemInformation = { @@ -206,6 +206,14 @@ export const monitorSystemInformation = {
206 value: 'staticData', 206 value: 'staticData',
207 }, 207 },
208 { 208 {
  209 + type: 'el-switch',
  210 + label: '是否刷新',
  211 + name: 'isRefresh',
  212 + relactiveDom: 'dataType',
  213 + relactiveDomValue: 'dynamicData',
  214 + value: false
  215 + },
  216 + {
209 type: 'el-input-number', 217 type: 'el-input-number',
210 label: '刷新时间(毫秒)', 218 label: '刷新时间(毫秒)',
211 name: 'refreshTime', 219 name: 'refreshTime',
@@ -291,6 +291,14 @@ export const monitorTablePage = { @@ -291,6 +291,14 @@ export const monitorTablePage = {
291 value: 'staticData', 291 value: 'staticData',
292 }, 292 },
293 { 293 {
  294 + type: 'el-switch',
  295 + label: '是否刷新',
  296 + name: 'isRefresh',
  297 + relactiveDom: 'dataType',
  298 + relactiveDomValue: 'dynamicData',
  299 + value: false
  300 + },
  301 + {
294 type: 'el-input-number', 302 type: 'el-input-number',
295 label: '刷新时间(毫秒)', 303 label: '刷新时间(毫秒)',
296 name: 'refreshTime', 304 name: 'refreshTime',
@@ -140,6 +140,14 @@ export const monitorTreeShape = { @@ -140,6 +140,14 @@ export const monitorTreeShape = {
140 value: 'staticData', 140 value: 'staticData',
141 }, 141 },
142 { 142 {
  143 + type: 'el-switch',
  144 + label: '是否刷新',
  145 + name: 'isRefresh',
  146 + relactiveDom: 'dataType',
  147 + relactiveDomValue: 'dynamicData',
  148 + value: true
  149 + },
  150 + {
143 type: 'el-input-number', 151 type: 'el-input-number',
144 label: '刷新时间(毫秒)', 152 label: '刷新时间(毫秒)',
145 name: 'refreshTime', 153 name: 'refreshTime',
@@ -242,7 +250,7 @@ export const monitorTreeShape = { @@ -242,7 +250,7 @@ export const monitorTreeShape = {
242 required: false, 250 required: false,
243 placeholder: '', 251 placeholder: '',
244 relactiveDom: 'dataType', 252 relactiveDom: 'dataType',
245 - chartType: 'widget-piechart', 253 + chartType: 'widget-table',
246 dictKey: 'TEXT_PROPERTIES', 254 dictKey: 'TEXT_PROPERTIES',
247 relactiveDomValue: 'dynamicData', 255 relactiveDomValue: 'dynamicData',
248 value: '', 256 value: '',
@@ -55,6 +55,7 @@ import {monitorSystemInformation} from "./echartsConfigJson/monitorConfigJson/mo @@ -55,6 +55,7 @@ import {monitorSystemInformation} from "./echartsConfigJson/monitorConfigJson/mo
55 import {monitorTreeShape} from "./echartsConfigJson/monitorConfigJson/monitor-tree-shape"; 55 import {monitorTreeShape} from "./echartsConfigJson/monitorConfigJson/monitor-tree-shape";
56 import {monitorTablePage} from "./echartsConfigJson/monitorConfigJson/monitor-table-page"; 56 import {monitorTablePage} from "./echartsConfigJson/monitorConfigJson/monitor-table-page";
57 import {monitorButtonExport} from "./echartsConfigJson/monitorConfigJson/monitor-button-export"; 57 import {monitorButtonExport} from "./echartsConfigJson/monitorConfigJson/monitor-button-export";
  58 +import {monitorCustomBarLineChartArray} from "./echartsConfigJson/monitorConfigJson/monitor-custom-bar-line-chart-array";
58 59
59 60
60 export const {widgetTool,monitor} = { 61 export const {widgetTool,monitor} = {
@@ -110,6 +111,8 @@ export const {widgetTool,monitor} = { @@ -110,6 +111,8 @@ export const {widgetTool,monitor} = {
110 monitorCustomLineStack, 111 monitorCustomLineStack,
111 // 柱线图-双线 112 // 柱线图-双线
112 monitorCustomBarLineChart, 113 monitorCustomBarLineChart,
  114 + // 柱线图-双线-循环
  115 + monitorCustomBarLineChartArray,
113 //月季度年按钮 116 //月季度年按钮
114 monitorButtonGroup, 117 monitorButtonGroup,
115 //折线趋势图 118 //折线趋势图
@@ -296,6 +296,8 @@ @@ -296,6 +296,8 @@
296 this.optionsData = val.data; 296 this.optionsData = val.data;
297 this.handlerData(); 297 this.handlerData();
298 // this.setDisplay(); 298 // this.setDisplay();
  299 + this.getTitleName();
  300 +
299 }, 301 },
300 deep: true 302 deep: true
301 } 303 }
@@ -372,7 +374,7 @@ @@ -372,7 +374,7 @@
372 const data = this.queryEchartsData(val); 374 const data = this.queryEchartsData(val);
373 data.then(res => { 375 data.then(res => {
374 console.log("aaaaa",res) 376 console.log("aaaaa",res)
375 - if (res && res[0].code == 0){ 377 + if (res && res[0] && (res[0].code == 0 || res[0].code == 200)){
376 this.informationDataAll = res[0].data; 378 this.informationDataAll = res[0].data;
377 }else if(res && res.length>0){ 379 }else if(res && res.length>0){
378 this.informationDataAll=res; 380 this.informationDataAll=res;
@@ -2,7 +2,7 @@ @@ -2,7 +2,7 @@
2 <div class="button-container" :style="styleObj"> 2 <div class="button-container" :style="styleObj">
3 <div class="button-title" :style="titleStyle"> 3 <div class="button-title" :style="titleStyle">
4 <img :src="imgStyle.titleIcon" alt="" class="icon-title"> 4 <img :src="imgStyle.titleIcon" alt="" class="icon-title">
5 - {{ transStyle.titleName }} 5 + {{elTreeBtnTitleName}}{{ transStyle.titleName }}
6 </div> 6 </div>
7 <div class="button-btn-item"> 7 <div class="button-btn-item">
8 <el-button v-if="item.isDisplay" :style="btnStyle" class="button-style" :type="btnActive==item.code?'primary':'default'" 8 <el-button v-if="item.isDisplay" :style="btnStyle" class="button-style" :type="btnActive==item.code?'primary':'default'"
@@ -16,7 +16,7 @@ @@ -16,7 +16,7 @@
16 </template> 16 </template>
17 17
18 <script> 18 <script>
19 - 19 +import {mapGetters} from "vuex";
20 export default { 20 export default {
21 name: "buttonGroup", 21 name: "buttonGroup",
22 data() { 22 data() {
@@ -31,7 +31,8 @@ export default { @@ -31,7 +31,8 @@ export default {
31 {name:'季度',code:'quarter',isDisplay:'true'}, 31 {name:'季度',code:'quarter',isDisplay:'true'},
32 {name:'年',code:'year',isDisplay:'true'}, 32 {name:'年',code:'year',isDisplay:'true'},
33 ], 33 ],
34 - btnActive:'month' 34 + btnActive:'month',
  35 + dataTitle:''
35 } 36 }
36 }, 37 },
37 components: {}, 38 components: {},
@@ -40,6 +41,10 @@ export default { @@ -40,6 +41,10 @@ export default {
40 ispreview: Boolean 41 ispreview: Boolean
41 }, 42 },
42 computed: { 43 computed: {
  44 + elTreeBtnTitleName(){
  45 + let btnTitleName=this.$route.query.btnTitleName
  46 + return btnTitleName;
  47 + },
43 transStyle() { 48 transStyle() {
44 return this.objToOne(this.options); 49 return this.objToOne(this.options);
45 }, 50 },
1 <template> 1 <template>
2 - <div :style="styleObj"> 2 + <div :style="styleObj" v-if="isDisplay">
3 <v-chart :options="options" autoresize/> 3 <v-chart :options="options" autoresize/>
4 </div> 4 </div>
5 </template> 5 </template>
@@ -16,6 +16,8 @@ export default { @@ -16,6 +16,8 @@ export default {
16 }, 16 },
17 data() { 17 data() {
18 return { 18 return {
  19 + chartData:[],
  20 + isDisplay:true,
19 kpiUnit:'', 21 kpiUnit:'',
20 options: { 22 options: {
21 color: [], 23 color: [],
@@ -112,11 +114,16 @@ export default { @@ -112,11 +114,16 @@ export default {
112 buttonVal(){ 114 buttonVal(){
113 return this.buttonVals; 115 return this.buttonVals;
114 }, 116 },
  117 + //进度条flag数据
  118 + ...mapGetters(['progressDatas']),
  119 + progressData(){
  120 + return this.progressDatas;
  121 + },
115 styleObj() { 122 styleObj() {
116 return { 123 return {
117 position: this.ispreview ? "absolute" : "static", 124 position: this.ispreview ? "absolute" : "static",
118 width: this.optionsStyle.width + "px", 125 width: this.optionsStyle.width + "px",
119 - height: this.optionsStyle.height + "px", 126 + height: this.isDisplay?this.optionsStyle.height + "px":'0',
120 left: this.optionsStyle.left + "px", 127 left: this.optionsStyle.left + "px",
121 top: this.optionsStyle.top + "px", 128 top: this.optionsStyle.top + "px",
122 background: this.optionsSetup.background 129 background: this.optionsSetup.background
@@ -135,6 +142,27 @@ export default { @@ -135,6 +142,27 @@ export default {
135 deep: true 142 deep: true
136 }, 143 },
137 //监听月季度年按钮切换值 144 //监听月季度年按钮切换值
  145 + progressData:{
  146 + handler(val){
  147 + console.log("_______",val)
  148 + /* let arr=[];
  149 + let newArr=[];
  150 + if(val){
  151 + arr=val.split(',')
  152 + arr.map(item=>{
  153 + newArr.push({flag:item})
  154 + })
  155 + }
  156 + this.chartData=arr;
  157 + if(this.chartData.indexOf(this.optionsData.dynamicData.contextData.flag)!=-1){
  158 + this.isDisplay=true;
  159 + }else{
  160 + this.isDisplay=false;
  161 + }*/
  162 + },
  163 + deep:true
  164 + },
  165 + //监听进度条flag
138 buttonVal:{ 166 buttonVal:{
139 handler(val){ 167 handler(val){
140 if(this.optionsSetup.isVuex){ 168 if(this.optionsSetup.isVuex){
@@ -289,6 +317,8 @@ export default { @@ -289,6 +317,8 @@ export default {
289 color: optionsSetup.lineColorY 317 color: optionsSetup.lineColorY
290 } 318 }
291 }, 319 },
  320 + min:0,
  321 + max:100,
292 splitLine: { 322 splitLine: {
293 show: false, 323 show: false,
294 } 324 }
@@ -454,7 +484,7 @@ export default { @@ -454,7 +484,7 @@ export default {
454 const optionsData = this.optionsData; // 数据类型 静态 or 动态 484 const optionsData = this.optionsData; // 数据类型 静态 or 动态
455 optionsData.dataType == "staticData" 485 optionsData.dataType == "staticData"
456 ? this.staticDataFn(optionsData.staticData) 486 ? this.staticDataFn(optionsData.staticData)
457 - : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime); 487 + : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime,optionsData.isRefresh);
458 }, 488 },
459 staticDataFn(val) { 489 staticDataFn(val) {
460 const series = this.options.series; 490 const series = this.options.series;
@@ -477,9 +507,9 @@ export default { @@ -477,9 +507,9 @@ export default {
477 } 507 }
478 } 508 }
479 }, 509 },
480 - dynamicDataFn(val, refreshTime) { 510 + dynamicDataFn(val, refreshTime,isRefresh) {
481 if (!val) return; 511 if (!val) return;
482 - if (this.ispreview) { 512 + if (this.ispreview && isRefresh) {
483 this.getEchartData(val); 513 this.getEchartData(val);
484 this.flagInter = setInterval(() => { 514 this.flagInter = setInterval(() => {
485 this.getEchartData(val); 515 this.getEchartData(val);
@@ -495,6 +525,7 @@ export default { @@ -495,6 +525,7 @@ export default {
495 }); 525 });
496 }, 526 },
497 renderingFn(val) { 527 renderingFn(val) {
  528 + console.log("*************",val)
498 let xAxis=val.xAxis; 529 let xAxis=val.xAxis;
499 if(xAxis && xAxis.length>0){ 530 if(xAxis && xAxis.length>0){
500 this.options.xAxis.data =xAxis; 531 this.options.xAxis.data =xAxis;
@@ -554,6 +585,11 @@ export default { @@ -554,6 +585,11 @@ export default {
554 }) 585 })
555 } 586 }
556 this.options.series=series; 587 this.options.series=series;
  588 + /* if(this.chartData.indexOf(this.optionsData.dynamicData.contextData.flag)!=-1){
  589 + this.isDisplay=true;
  590 + }else{
  591 + this.isDisplay=false;
  592 + }*/
557 } 593 }
558 } 594 }
559 }; 595 };
  1 +<template>
  2 + <div :style="styleObj" >
  3 + <div :style="itemStyle" v-for="(item,index) in chartData" :key="index">
  4 + {{item.flag}}
  5 + <v-chart :ref="item.flag" :options="options[index]" autoresize/>
  6 +
  7 + </div>
  8 + </div>
  9 +</template>
  10 +
  11 +<script>
  12 +import {mapGetters} from "vuex";
  13 +
  14 +export default {
  15 + name: "customBarlinechart",
  16 + components: {},
  17 + props: {
  18 + value: Object,
  19 + ispreview: Boolean
  20 + },
  21 + data() {
  22 + return {
  23 + kpiUnit:'',
  24 + chartData:[
  25 + {flag:'cpu'},
  26 + ],
  27 + chartDataItem:[],
  28 + options: [{
  29 + color: [],
  30 + grid: {},
  31 + title: {
  32 + text: "",
  33 + textStyle: {
  34 + color: "#fff"
  35 + }
  36 + },
  37 + tooltip: {
  38 + trigger: "axis",
  39 + formatter: "{a} <br/>{b} : {c} '%'"
  40 + },
  41 + legend: {
  42 + textStyle: {
  43 + color: "#fff"
  44 + },
  45 + },
  46 + xAxis: [
  47 + {
  48 + type: "category",
  49 + data: [],
  50 + axisLabel: {
  51 + show: false,
  52 + textStyle: {
  53 + color: "#fff"
  54 + }
  55 + }
  56 + }
  57 + ],
  58 + yAxis: [
  59 + {
  60 + type: "value",
  61 + name: "",
  62 + min: 0,
  63 + max: 2,
  64 + interval: 1,
  65 + axisLabel: {
  66 + show: true,
  67 + textStyle: {
  68 + color: "#fff"
  69 + }
  70 + }
  71 + },
  72 + {
  73 + type: "value",
  74 + name: "",
  75 + min: 0,
  76 + max: 100,
  77 + interval: 10,
  78 + axisLabel: {
  79 + show: true,
  80 + textStyle: {
  81 + color: "#fff"
  82 + }
  83 + }
  84 + }
  85 + ],
  86 + series: [
  87 + {
  88 + name: "",
  89 + type: "bar",
  90 + data: [],
  91 + itemStyle: {
  92 + barBorderRadius: null
  93 + }
  94 + },
  95 + {
  96 + name: "",
  97 + type: "line",
  98 + yAxisIndex: 1,
  99 + data: [],
  100 + itemStyle: {}
  101 + },
  102 + {
  103 + name: "",
  104 + type: "line",
  105 + yAxisIndex: 1,
  106 + data: [],
  107 + itemStyle: {}
  108 + }
  109 + ]
  110 + }],
  111 + optionsStyle: {}, // 样式
  112 + optionsData: {}, // 数据
  113 + optionsCollapse: {}, // 图标属性
  114 + optionsSetup: {}
  115 + };
  116 + },
  117 + computed: {
  118 + //月季度年按钮通过vuex接收值
  119 + ...mapGetters(['buttonVals']),
  120 + buttonVal(){
  121 + return this.buttonVals;
  122 + },
  123 + //进度条flag数据
  124 + ...mapGetters(['progressDatas']),
  125 + progressData(){
  126 + return this.progressDatas;
  127 + },
  128 + styleObj() {
  129 + return {
  130 + position: this.ispreview ? "absolute" : "static",
  131 + width: this.optionsStyle.width + "px",
  132 + height: this.optionsStyle.height + "px",
  133 + left: this.optionsStyle.left + "px",
  134 + top: this.optionsStyle.top + "px",
  135 + background: this.optionsSetup.background
  136 + };
  137 + },
  138 + itemStyle(){
  139 + return{
  140 + height:this.optionsSetup.itemHeight + "px",
  141 + width: this.optionsStyle.width + "px",
  142 + background:this.optionsSetup.itemBackground,
  143 + 'margin-bottom':this.optionsSetup.itemMarginBottom+'px'
  144 + }
  145 + }
  146 + },
  147 + watch: {
  148 + value: {
  149 + handler(val) {
  150 + this.optionsStyle = val.position;
  151 + this.optionsData = val.data;
  152 + this.optionsCollapse = val.collapse;
  153 + this.optionsSetup = val.setup;
  154 + this.editorOptions();
  155 + },
  156 + deep: true
  157 + },
  158 + //监听月季度年按钮切换值
  159 + buttonVal:{
  160 + handler(val){
  161 + if(this.optionsSetup.isVuex){
  162 + let optionsData=this.optionsData;
  163 + if(this.optionsData.dataType=="dynamicData"){
  164 + //改变参数值-月季度年，重新加载动态数据--待测
  165 + this.optionsData.dynamicData.contextData.time=val;
  166 + // this.editorOptions();
  167 + }
  168 + }
  169 +
  170 + },
  171 + deep:true
  172 + },
  173 + //监听进度条数据
  174 + progressData:{
  175 + handler(val){
  176 + console.log("_______",val);
  177 + let arr=[];
  178 + let newArr=[];
  179 + if(val){
  180 + arr=val.split(',')
  181 + arr.map(item=>{
  182 + newArr.push({flag:item})
  183 + })
  184 +
  185 +/*
  186 + if (this.optionsData.dataType == "dynamicData") {
  187 + console.log("(*)(*)",this.optionsData.dynamicData.contextData.flag)
  188 + this.optionsData.dynamicData.contextData.flag = val;
  189 + }
  190 + this.editorOptions();
  191 + if(this.chartDataItem.indexOf(val)==-1){
  192 + this.chartDataItem.push(val)
  193 + }
  194 + this.chartDataItem.map(item=>{
  195 + newArr.push({flag:item})
  196 + })*/
  197 + }
  198 + this.chartData=newArr;
  199 +
  200 + this.chartData.map((item,index) => {
  201 + this.options[index]={
  202 + flag:item.flag,
  203 + color: [],
  204 + grid: {},
  205 + title: {
  206 + text: "",
  207 + textStyle: {
  208 + color: "#fff"
  209 + }
  210 + },
  211 + tooltip: {
  212 + trigger: "axis",
  213 + formatter: "{a} <br/>{b} : {c} '%'"
  214 + },
  215 + legend: {
  216 + textStyle: {
  217 + color: "#fff"
  218 + },
  219 + },
  220 + xAxis: [
  221 + {
  222 + type: "category",
  223 + data: [],
  224 + axisLabel: {
  225 + show: false,
  226 + textStyle: {
  227 + color: "#fff"
  228 + }
  229 + }
  230 + }
  231 + ],
  232 + yAxis: [
  233 + {
  234 + type: "value",
  235 + name: "",
  236 + min: 0,
  237 + max: 2,
  238 + interval: 1,
  239 + axisLabel: {
  240 + show: true,
  241 + textStyle: {
  242 + color: "#fff"
  243 + }
  244 + }
  245 + },
  246 + {
  247 + type: "value",
  248 + name: "",
  249 + min: 0,
  250 + max: 100,
  251 + interval: 10,
  252 + axisLabel: {
  253 + show: true,
  254 + textStyle: {
  255 + color: "#fff"
  256 + }
  257 + }
  258 + }
  259 + ],
  260 + series: [
  261 + {
  262 + name: "",
  263 + type: "bar",
  264 + data: [],
  265 + itemStyle: {
  266 + barBorderRadius: null
  267 + }
  268 + },
  269 + {
  270 + name: "",
  271 + type: "line",
  272 + yAxisIndex: 1,
  273 + data: [],
  274 + itemStyle: {}
  275 + },
  276 + {
  277 + name: "",
  278 + type: "line",
  279 + yAxisIndex: 1,
  280 + data: [],
  281 + itemStyle: {}
  282 + }
  283 + ]
  284 + }
  285 + console.log("_+111_+_+_", this.$refs[item.flag])
  286 + if (this.optionsData.dataType == "dynamicData") {
  287 + console.log("(*)(*)",this.optionsData.dynamicData.contextData.flag,item.flag)
  288 + this.optionsData.dynamicData.contextData.flag = item.flag;
  289 + }
  290 + this.editorOptions();
  291 +
  292 + })
  293 + // this.thenData();
  294 + // this.forData();
  295 + },
  296 + deep:true
  297 + },
  298 + },
  299 + created() {
  300 + this.optionsStyle = this.value.position;
  301 + this.optionsData = this.value.data;
  302 + this.optionsCollapse = this.value.collapse;
  303 + this.optionsSetup = this.value.setup;
  304 + this.editorOptions();
  305 + },
  306 + methods: {
  307 + // 修改图标options属性
  308 + editorOptions() {
  309 + // this.forData();
  310 +
  311 + this.setOptionsTitle();
  312 + this.setOptionsX();
  313 + this.setOptionsY();
  314 + this.setOptionsTop();
  315 + this.setOptionsBar();
  316 + this.setOptionsTooltip();
  317 + this.setOptionsData();
  318 + this.setOptionsMargin();
  319 + this.setOptionsLegend();
  320 + this.setOptionsColor();
  321 + },
  322 + // 标题修改
  323 + setOptionsTitle() {
  324 + const optionsSetup = this.optionsSetup;
  325 + const title = {};
  326 + title.text = optionsSetup.titleText;
  327 + title.show = optionsSetup.isNoTitle;
  328 + title.left = optionsSetup.textAlign;
  329 + title.textStyle = {
  330 + color: optionsSetup.textColor,
  331 + fontSize: optionsSetup.textFontSize,
  332 + fontWeight: optionsSetup.textFontWeight
  333 + };
  334 + title.subtext = optionsSetup.subText;
  335 + title.subtextStyle = {
  336 + color: optionsSetup.subTextColor,
  337 + fontWeight: optionsSetup.subTextFontWeight,
  338 + fontSize: optionsSetup.subTextFontSize
  339 + };
  340 + if(optionsSetup.textAlignVertical=='bottom'){
  341 + title.bottom='0';
  342 + this.options[this.chartData.length-1].title = title;
  343 +
  344 + }else{
  345 + title.top='8px';
  346 + this.options[0].title = title;
  347 +
  348 + }
  349 + // this.options[0].title = title;
  350 + },
  351 + // X轴设置
  352 + setOptionsX() {
  353 + const optionsSetup = this.optionsSetup;
  354 + const xAxis = {
  355 + type: "category",
  356 + show: optionsSetup.hideX, // 坐标轴是否显示
  357 + name: optionsSetup.xName, // 坐标轴名称
  358 + nameTextStyle: {
  359 + color: optionsSetup.nameColorX,
  360 + fontSize: optionsSetup.nameFontSizeX
  361 + },
  362 + nameRotate: optionsSetup.textAngle, // 文字角度
  363 + inverse: optionsSetup.reversalX, // 轴反转
  364 + axisLabel: {
  365 + show: true,
  366 + interval: optionsSetup.textInterval, // 文字间隔
  367 + rotate: optionsSetup.textAngle, // 文字角度
  368 + textStyle: {
  369 + color: optionsSetup.Xcolor, // x轴 坐标文字颜色
  370 + fontSize: optionsSetup.fontSizeX
  371 + }
  372 + },
  373 + axisLine: {
  374 + show: true,
  375 + lineStyle: {
  376 + color: optionsSetup.lineColorX
  377 + }
  378 + },
  379 + splitLine: {
  380 + show: optionsSetup.isShowSplitLineX,
  381 + lineStyle: {
  382 + color: optionsSetup.splitLineColorX
  383 + }
  384 + },
  385 + boundaryGap:['1','2']//坐标轴两边留白，为false则从0开始
  386 + };
  387 + // this.options.xAxis = xAxis;
  388 + this.options.map(item=>{
  389 + item.xAxis=xAxis;
  390 + })
  391 + },
  392 + // Y轴设置
  393 + setOptionsY() {
  394 + const optionsSetup = this.optionsSetup;
  395 + const yAxis = [
  396 + {
  397 + type: "value",
  398 + splitNumber: optionsSetup.splitNumberLeft,// 均分
  399 + show: optionsSetup.isShowYLeft, // 坐标轴是否显示
  400 + name: optionsSetup.textNameYLeft, // 坐标轴名称
  401 + nameTextStyle: { // 别名
  402 + color: optionsSetup.nameColorYLeft,
  403 + fontSize: optionsSetup.namefontSizeYLeft
  404 + },
  405 + inverse: optionsSetup.reversalY, // 轴反转
  406 + axisLabel: {
  407 + show: true,
  408 + textStyle: {
  409 + color: optionsSetup.colorY, // y轴 坐标文字颜色
  410 + fontSize: optionsSetup.fontSizeY
  411 + }
  412 + },
  413 + axisLine: {
  414 + show: true,
  415 + lineStyle: {
  416 + color: optionsSetup.lineColorY
  417 + }
  418 + },
  419 + splitLine: {
  420 + show: false,
  421 + }
  422 + },
  423 + {
  424 + type: "value",
  425 + splitNumber: optionsSetup.splitNumberRight,// 均分
  426 + show: optionsSetup.isShowYRight, // 坐标轴是否显示
  427 + name: optionsSetup.textNameYRight, // 坐标轴名称
  428 + nameTextStyle: { // 别名
  429 + color: optionsSetup.nameColorYRight,
  430 + fontSize: optionsSetup.namefontSizeYRight
  431 + },
  432 + inverse: optionsSetup.reversalY, // 轴反转
  433 + axisLabel: {
  434 + show: true,
  435 + textStyle: {
  436 + color: optionsSetup.colorY, // y轴 坐标文字颜色
  437 + fontSize: optionsSetup.fontSizeY
  438 + },
  439 + formatter: '{value} %'
  440 + },
  441 + axisLine: {
  442 + show: true,
  443 + lineStyle: {
  444 + color: optionsSetup.lineColorY
  445 + }
  446 + },
  447 + splitLine: {
  448 + show: false,
  449 + }
  450 + }
  451 + ];
  452 + // this.options.yAxis = yAxis;
  453 + this.options.map(item=>{
  454 + item.yAxis=yAxis;
  455 + })
  456 + },
  457 + // 折线设置 数值设置
  458 + setOptionsTop() {
  459 + const optionsSetup = this.optionsSetup;
  460 + this.options.map(item=>{
  461 + // const series = this.options.series;
  462 + const series = item.series;
  463 + for (const key in series) {
  464 + if (series[key].type == "line") {
  465 + series[key].showSymbol = optionsSetup.markPoint;
  466 + series[key].symbolSize = optionsSetup.pointSize;
  467 + series[key].smooth = optionsSetup.smoothCurve;
  468 + if (optionsSetup.area) {
  469 + series[key].areaStyle = {
  470 + opacity: optionsSetup.areaThickness / 100
  471 + };
  472 + } else {
  473 + series[key].areaStyle = {
  474 + opacity: 0
  475 + };
  476 + }
  477 + series[key].lineStyle = {
  478 + width: optionsSetup.lineWidth
  479 + };
  480 + series[key].itemStyle.borderRadius = optionsSetup.radius;
  481 + series[key].label = {
  482 + show: optionsSetup.isShowLine,
  483 + position: "top",
  484 + distance: optionsSetup.distanceLine,
  485 + fontSize: optionsSetup.fontSizeLine,
  486 + color: optionsSetup.subTextColorLine,
  487 + fontWeight: optionsSetup.fontWeightLine
  488 + };
  489 + }
  490 + }
  491 + })
  492 +
  493 + // this.options.series = series;
  494 + /*this.options.map(item=>{
  495 + item.series=series;
  496 + })*/
  497 + },
  498 + // 柱体设置 数值设置
  499 + setOptionsBar() {
  500 + const optionsSetup = this.optionsSetup;
  501 + this.options.map(item=>{
  502 + // const series = this.options.series;
  503 + const series = item.series;
  504 + for (const key in series) {
  505 + if (series[key].type == "bar") {
  506 + series[key].label = {
  507 + show: optionsSetup.isShowBar,
  508 + position: "top",
  509 + distance: optionsSetup.distanceBar,
  510 + fontSize: optionsSetup.fontSizeBar,
  511 + color: optionsSetup.subTextColorBar,
  512 + fontWeight: optionsSetup.fontWeightBar
  513 + };
  514 + series[key].barWidth = optionsSetup.maxWidth;
  515 + series[key].barMinHeight = optionsSetup.minHeight;
  516 + series[key].itemStyle.barBorderRadius = optionsSetup.radius;
  517 + }
  518 + }
  519 + })
  520 +
  521 + // this.options.series = series;
  522 + // this.options.map(item=>{
  523 + // item.series=series;
  524 + // })
  525 + },
  526 + // tooltip 设置
  527 + setOptionsTooltip() {
  528 + const optionsSetup = this.optionsSetup;
  529 + let that=this;
  530 + const tooltip = {
  531 + trigger: "axis",
  532 + show: true,
  533 + textStyle: {
  534 + color: optionsSetup.lineColor,
  535 + fontSize: optionsSetup.tipFontSize
  536 + },
  537 + formatter:function (param) {
  538 + let kpiName=optionsSetup.titleText;
  539 + // 鼠标悬浮线上提示
  540 + // 顶部提示
  541 + let tips = '<table>';
  542 + if (param.length == 1) {
  543 + tips += "<tr><td style='text-align:left;' colspan='4'>" + param[0].name + "</td></tr>";
  544 + } else {
  545 + tips += "<tr><td style='text-align:left;' colspan='4'>" + kpiName + " " + param[0].name + "</td></tr>";
  546 + }
  547 + // 每一条提示
  548 + $.each(param, function (i, v) {
  549 + let kpiUnit='';
  550 + tips += "<tr><td>" + v.marker + "</td>";
  551 + tips += '<td style="text-align: left;">';
  552 + if (v.seriesName.indexOf('率') != -1) {
  553 + kpiUnit='%';
  554 + }else{
  555 + kpiUnit=that.kpiUnit
  556 + }
  557 + tips += (v.seriesName + ' ');
  558 +
  559 + // tips += (v.seriesName && v.seriesName != '1' && !/series[0-9]+/.test(v.seriesName)) ? v.seriesName : '';
  560 + tips += '</td>'
  561 + tips += "<td>:&nbsp;</td><td>" + v.value;
  562 + tips += kpiUnit + "</td></tr>";
  563 + });
  564 + tips += '</table>'
  565 + return tips;
  566 + }
  567 + };
  568 + // this.options.tooltip = tooltip;
  569 + this.options.map(item=>{
  570 + item.tooltip=tooltip;
  571 + })
  572 + },
  573 + // 边距设置
  574 + setOptionsMargin() {
  575 + const optionsSetup = this.optionsSetup;
  576 + const grid = {
  577 + left: optionsSetup.marginLeft,
  578 + right: optionsSetup.marginRight,
  579 + bottom: optionsSetup.marginBottom,
  580 + top: optionsSetup.marginTop,
  581 + containLabel: true
  582 + };
  583 + // this.options.grid = grid;
  584 + this.options.map(item=>{
  585 + item.grid=grid;
  586 + })
  587 + },
  588 + // 图例操作 legend
  589 + setOptionsLegend() {
  590 + const optionsSetup = this.optionsSetup;
  591 + this.options.map(item=>{
  592 + // const legend = this.options.legend;
  593 + const legend = item.legend;
  594 + legend.show = optionsSetup.isShowLegend;
  595 + legend.left = optionsSetup.lateralPosition;
  596 + legend.top = optionsSetup.longitudinalPosition == "top" ? 20 : "auto";
  597 + legend.bottom =
  598 + optionsSetup.longitudinalPosition == "bottom" ? 0 : "auto";
  599 + legend.orient = optionsSetup.layoutFront;
  600 + legend.textStyle = {
  601 + color: optionsSetup.lengedColor,
  602 + fontSize: optionsSetup.lengedFontSize
  603 + };
  604 + legend.itemWidth = optionsSetup.lengedWidth;
  605 + if(!optionsSetup.isShowLegendText){
  606 + legend.formatter= function (name) {
  607 + return '';
  608 + }
  609 + }else{
  610 + legend.formatter= function (name) {
  611 + return name;
  612 + }
  613 + }
  614 + legend.itemHeight= 5;
  615 + legend.tooltip= {
  616 + show: true
  617 + }
  618 + })
  619 +
  620 + },
  621 + // 图例颜色修改
  622 + setOptionsColor() {
  623 + const optionsSetup = this.optionsSetup;
  624 + const customColor = optionsSetup.customColor;
  625 + if (!customColor) return;
  626 + const arrColor = [];
  627 + for (let i = 0; i < customColor.length; i++) {
  628 + arrColor.push(customColor[i].color);
  629 + }
  630 + // this.options.color = arrColor;
  631 + this.options.map(item=>{
  632 + item.color=arrColor;
  633 + })
  634 + // this.options = Object.assign({}, this.options);
  635 + this.options.map(item=>{
  636 + item=Object.assign({}, this.options);
  637 + })
  638 + },
  639 + // 数据处理
  640 + setOptionsData() {
  641 + const optionsData = this.optionsData; // 数据类型 静态 or 动态
  642 + optionsData.dataType == "staticData"
  643 + ? this.staticDataFn(optionsData.staticData)
  644 + : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
  645 + },
  646 + staticDataFn(val) {
  647 + // const series = this.options.series;
  648 + let axis = [];
  649 + let bar = [];
  650 + let line = [];
  651 + for (const i in val) {
  652 + axis[i] = val[i].axis;
  653 + bar[i] = val[i].bar;
  654 + line[i] = val[i].line;
  655 + }
  656 + // x轴
  657 + // this.options.xAxis.data = axis;
  658 + /* this.options.map(item=>{
  659 + item.xAxis.data=axis;
  660 + })*/
  661 + // series
  662 + /* for (const i in series) {
  663 + if (series[i].type == "bar") {
  664 + series[i].data = bar;
  665 + } else {
  666 + series[i].data = line;
  667 + }
  668 + }*/
  669 + this.options.map(item=>{
  670 + console.log(")(()(",item.series)
  671 + for (const i in item.series) {
  672 + if (item.series[i].type == "bar") {
  673 + item.series[i].data = bar;
  674 + } else {
  675 + item.series[i].data = line;
  676 + }
  677 + }
  678 + })
  679 + this.chartData.map((item,index)=>{
  680 + console.log("))))))",this.options[index])
  681 + this.options[index].xAxis.data=axis;
  682 + /* for (const i in this.options[index].series) {
  683 + if (this.options[index].series[i].type == "bar") {
  684 + this.options[index].series[i].data = bar;
  685 + } else {
  686 + this.options[index].series[i].data = line;
  687 + }
  688 + }*/
  689 + })
  690 + },
  691 + dynamicDataFn(val, refreshTime) {
  692 + if (!val) return;
  693 + if (this.ispreview) {
  694 + this.getEchartData(val);
  695 + this.flagInter = setInterval(() => {
  696 + this.getEchartData(val);
  697 + }, refreshTime);
  698 + } else {
  699 + this.getEchartData(val);
  700 + }
  701 + },
  702 + async getEchartData(val) {
  703 + const data = this.queryEchartsData(val);
  704 + this.chartDataItem.push(data);
  705 + console.log("900000",this.optionsData.dynamicData?this.optionsData.dynamicData.contextData.flag:'009')
  706 + // return await Promise.all(this.chartDataItem)//.then(data => {console.log("data",data,this.optionsData.dynamicData.contextData.flag )})
  707 + /*if(this.chartData.length==this.chartDataItem.length){
  708 + let arr=[];
  709 + this.chartDataItem.map(item=>{
  710 + item.then(res => {
  711 +
  712 + this.renderingFn(res,this.optionsData.dynamicData.contextData.flag);
  713 + });
  714 + })
  715 + }*/
  716 + // data.then(res => {
  717 + // this.renderingFn(res,this.optionsData.dynamicData.contextData.flag);
  718 + // });
  719 + },
  720 + async thenData(){
  721 + const res = await this.getEchartData()
  722 + console.log("res",res)
  723 + },
  724 + renderingFn(val,flag) {
  725 + console.log("*************",val,flag)
  726 + // this.forData(val);
  727 + this.setData(val);
  728 +
  729 + },
  730 + setData(val){
  731 + let xAxis=val.xAxis;
  732 + if(xAxis && xAxis.length>0){
  733 + // this.options.xAxis.data =xAxis;
  734 + this.options.map(item=>{
  735 + item.xAxis.data=xAxis;
  736 + })
  737 + }else{
  738 + if(this.buttonVal=='year'){
  739 + // this.options.xAxis.data=['今年'];
  740 + this.options.map(item=>{
  741 + item.xAxis.data=['今年'];
  742 + })
  743 + }else if(this.buttonVal=='quarter'){
  744 + // this.options.xAxis.data=['1季度','2季度','3季度','4季度'];
  745 + this.options.map(item=>{
  746 + item.xAxis.data=['1季度','2季度','3季度','4季度'];
  747 + })
  748 + }else if(this.buttonVal=='month'){
  749 + this.options.xAxis.data=['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
  750 + this.options.map(item=>{
  751 + item.xAxis.data=['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
  752 + })
  753 + }else{
  754 + // this.options.xAxis.data=['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']
  755 + this.options.map(item=>{
  756 + item.xAxis.data=['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'];
  757 + })
  758 + }
  759 + }
  760 +
  761 + const series = val.series;
  762 + if(series && series.length>0){
  763 + series.map((item,index)=>{
  764 + if(item.name.indexOf('率')!=-1){
  765 + item.yAxisIndex= 1;
  766 +
  767 + }else{
  768 + item.yAxisIndex=0;
  769 +
  770 + }
  771 + // if(index%2==0){
  772 + // item.yAxisIndex= 1;
  773 + // }else{
  774 + // item.yAxisIndex=0;
  775 + // }
  776 + if(item.type=='bar'){
  777 + item.itemStyle= {
  778 + barBorderRadius: null
  779 + }
  780 + item.barMinHeight=2;
  781 + }else if(item.type=='line'){
  782 + item.itemStyle= {
  783 + borderRadius: null
  784 + }
  785 + item.symbol='line';//设置图列为直线不带空心圆
  786 + }
  787 +
  788 + })
  789 + }
  790 + // this.forData()
  791 + // this.chartData.map((item,index)=>{
  792 + console.log("66666666666666",this.optionsData.dynamicData.contextData.flag)
  793 + let flag=this.optionsData.dynamicData.contextData.flag;
  794 + // if(this.optionsData.dynamicData.contextData.flag==item.flag){
  795 + if(series){
  796 + // this.$refs[flag].options.series=series;
  797 + this.options.map((item,index)=>{
  798 + if(item.flag==flag){
  799 + this.options[index].series=series;
  800 + }
  801 + })
  802 +
  803 + }else{
  804 + /* this.$refs[flag].options.series=[{
  805 + name: "",
  806 + type:'bar',
  807 + data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
  808 + }];*/
  809 +
  810 + this.options.map((item,index)=>{
  811 + if(item.flag==flag){
  812 + this.options[index].series= [{
  813 + name: "",
  814 + type:'bar',
  815 + data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
  816 + }];
  817 + }
  818 + })
  819 +
  820 +
  821 + }
  822 + // }
  823 +
  824 + // })
  825 + // console.log("123445",this.options)
  826 + // this.options.series=series;
  827 + },
  828 + forData(val){
  829 + let that=this;
  830 + let arr=this.chartData;
  831 + /*arr.map((item,index) => {
  832 + this.options[index]={
  833 + flag:item.flag,
  834 + color: [],
  835 + grid: {},
  836 + title: {
  837 + text: "",
  838 + textStyle: {
  839 + color: "#fff"
  840 + }
  841 + },
  842 + tooltip: {
  843 + trigger: "axis",
  844 + formatter: "{a} <br/>{b} : {c} '%'"
  845 + },
  846 + legend: {
  847 + textStyle: {
  848 + color: "#fff"
  849 + },
  850 + },
  851 + xAxis: [
  852 + {
  853 + type: "category",
  854 + data: [],
  855 + axisLabel: {
  856 + show: false,
  857 + textStyle: {
  858 + color: "#fff"
  859 + }
  860 + }
  861 + }
  862 + ],
  863 + yAxis: [
  864 + {
  865 + type: "value",
  866 + name: "",
  867 + min: 0,
  868 + max: 2,
  869 + interval: 1,
  870 + axisLabel: {
  871 + show: true,
  872 + textStyle: {
  873 + color: "#fff"
  874 + }
  875 + }
  876 + },
  877 + {
  878 + type: "value",
  879 + name: "",
  880 + min: 0,
  881 + max: 100,
  882 + interval: 10,
  883 + axisLabel: {
  884 + show: true,
  885 + textStyle: {
  886 + color: "#fff"
  887 + }
  888 + }
  889 + }
  890 + ],
  891 + series: [
  892 + {
  893 + name: "",
  894 + type: "bar",
  895 + data: [],
  896 + itemStyle: {
  897 + barBorderRadius: null
  898 + }
  899 + },
  900 + {
  901 + name: "",
  902 + type: "line",
  903 + yAxisIndex: 1,
  904 + data: [],
  905 + itemStyle: {}
  906 + },
  907 + {
  908 + name: "",
  909 + type: "line",
  910 + yAxisIndex: 1,
  911 + data: [],
  912 + itemStyle: {}
  913 + }
  914 + ]
  915 + }
  916 +console.log("_+_+_+_", this.$refs[item.flag])
  917 +
  918 + })*/
  919 + /*for(let i in arr){
  920 + if (this.optionsData.dataType == "dynamicData") {
  921 + console.log("(*)(*)",that.optionsData.dynamicData.contextData.flag,arr[i].flag)
  922 + that.optionsData.dynamicData.contextData.flag = arr[i].flag;
  923 + // that.setOptionsData();
  924 +
  925 + }
  926 + }*/
  927 + }
  928 + }
  929 +};
  930 +</script>
  931 +
  932 +<style scoped lang="scss">
  933 +.echarts {
  934 + width: 100%;
  935 + height: 100%;
  936 + overflow: hidden;
  937 +}
  938 +</style>
@@ -348,7 +348,8 @@ export default { @@ -348,7 +348,8 @@ export default {
348 : this.dynamicDataFn( 348 : this.dynamicDataFn(
349 optionsData.dynamicData, 349 optionsData.dynamicData,
350 optionsData.refreshTime, 350 optionsData.refreshTime,
351 - optionsSetup 351 + optionsSetup,
  352 + optionsData.isRefresh
352 ); 353 );
353 }, 354 },
354 //去重 355 //去重
@@ -468,9 +469,9 @@ export default { @@ -468,9 +469,9 @@ export default {
468 469
469 }, 470 },
470 // 动态数据 471 // 动态数据
471 - dynamicDataFn(val, refreshTime, optionsSetup) { 472 + dynamicDataFn(val, refreshTime, optionsSetup,isRefresh) {
472 if (!val) return; 473 if (!val) return;
473 - if (this.ispreview) { 474 + if (this.ispreview && isRefresh) {
474 this.getEchartData(val, optionsSetup); 475 this.getEchartData(val, optionsSetup);
475 this.flagInter = setInterval(() => { 476 this.flagInter = setInterval(() => {
476 this.getEchartData(val, optionsSetup); 477 this.getEchartData(val, optionsSetup);
@@ -250,7 +250,8 @@ export default { @@ -250,7 +250,8 @@ export default {
250 ? this.staticDataFn(optionsData.staticData) 250 ? this.staticDataFn(optionsData.staticData)
251 : this.dynamicDataFn( 251 : this.dynamicDataFn(
252 optionsData.dynamicData, 252 optionsData.dynamicData,
253 - optionsData.refreshTime 253 + optionsData.refreshTime,
  254 + optionsData.isRefresh
254 ); 255 );
255 }, 256 },
256 staticDataFn(val) { 257 staticDataFn(val) {
@@ -269,9 +270,9 @@ export default { @@ -269,9 +270,9 @@ export default {
269 'top':num+'%' 270 'top':num+'%'
270 }; 271 };
271 }, 272 },
272 - dynamicDataFn(val, refreshTime) { 273 + dynamicDataFn(val, refreshTime,isRefresh) {
273 if (!val) return; 274 if (!val) return;
274 - if (this.ispreview) { 275 + if (this.ispreview && isRefresh) {
275 this.getEchartData(val); 276 this.getEchartData(val);
276 this.flagInter = setInterval(() => { 277 this.flagInter = setInterval(() => {
277 this.getEchartData(val); 278 this.getEchartData(val);
@@ -282,24 +282,26 @@ export default { @@ -282,24 +282,26 @@ export default {
282 let arrstorage=[]; 282 let arrstorage=[];
283 let optionArr=[] 283 let optionArr=[]
284 dataArr.map(item=>{ 284 dataArr.map(item=>{
285 - if(item.cpuSetRate){ 285 + if(item.cpuSetRate || item.cpuSetRate==0){
286 arrCpu=[{ 286 arrCpu=[{
287 num:item.cpuSetRate, 287 num:item.cpuSetRate,
288 name:'cpu容量' 288 name:'cpu容量'
289 }] 289 }]
290 } 290 }
291 - if(item.storageSetRate){ 291 + if(item.storageSetRate || item.storageSetRate==0){
292 arrmemory=[{ 292 arrmemory=[{
293 num:item.storageSetRate, 293 num:item.storageSetRate,
294 name:'存储容量' 294 name:'存储容量'
295 }] 295 }]
296 } 296 }
297 - if(item.memorySetRate){ 297 + if(item.memorySetRate || item.memorySetRate==0){
298 arrstorage=[{ 298 arrstorage=[{
299 num:item.memorySetRate, 299 num:item.memorySetRate,
300 name:'内存容量' 300 name:'内存容量'
301 }] 301 }]
302 } 302 }
  303 + console.log("####",arrCpu,arrmemory,arrstorage)
  304 +
303 if(arrCpu.length>0 && arrmemory.length>0 && arrstorage.length>0){ 305 if(arrCpu.length>0 && arrmemory.length>0 && arrstorage.length>0){
304 item.percentData=arrCpu.concat(arrmemory).concat(arrstorage); 306 item.percentData=arrCpu.concat(arrmemory).concat(arrstorage);
305 307
@@ -49,7 +49,8 @@ export default { @@ -49,7 +49,8 @@ export default {
49 left: this.optionsStyle.left + "px", 49 left: this.optionsStyle.left + "px",
50 top: this.optionsStyle.top + "px", 50 top: this.optionsStyle.top + "px",
51 background: this.optionsSetup.background, 51 background: this.optionsSetup.background,
52 - 'flex-flow':this.optionsSetup.flexFlow 52 + 'flex-flow':this.optionsSetup.flexFlow,
  53 + 'justify-content':'flex-start'
53 }; 54 };
54 }, 55 },
55 //进度条宽度样式设置 56 //进度条宽度样式设置
@@ -68,6 +69,8 @@ export default { @@ -68,6 +69,8 @@ export default {
68 itemStyle(){ 69 itemStyle(){
69 return{ 70 return{
70 width:this.optionsSetup.flexFlow=='column'?'100%':'auto', 71 width:this.optionsSetup.flexFlow=='column'?'100%':'auto',
  72 + height:this.optionsSetup.itemHeight+'px',
  73 + flex:this.optionsSetup.flexFlow!='column'?'1':'',
71 // 'border':this.optionsSetup.isBorder?'0.5px solid '+this.optionsSetup.borderColor:'none', 74 // 'border':this.optionsSetup.isBorder?'0.5px solid '+this.optionsSetup.borderColor:'none',
72 // 'box-shadow':this.optionsSetup.isShadow?'0px 3px 12px '+this.optionsSetup.borderColor:'none', 75 // 'box-shadow':this.optionsSetup.isShadow?'0px 3px 12px '+this.optionsSetup.borderColor:'none',
73 'background':this.optionsSetup.itemBackground 76 'background':this.optionsSetup.itemBackground
@@ -177,7 +180,37 @@ export default { @@ -177,7 +180,37 @@ export default {
177 const data = this.queryEchartsData(val); 180 const data = this.queryEchartsData(val);
178 data.then(res => { 181 data.then(res => {
179 if(res && res.length>0){ 182 if(res && res.length>0){
180 - this.progressData=res; 183 + if(res[0].code==0){
  184 + if(res[0].data.length>0){
  185 + this.progressData=res[0].data;
  186 + }else{
  187 + let name='';
  188 + if(this.optionsData.dynamicData.contextData.kpiId=='KPI7054BC34,KPIBDB60856,KPID3EBE40F'){
  189 + name='cpu';
  190 + }else if(this.optionsData.dynamicData.contextData.kpiId=='KPI1584BE1C,KPI31CB8D97'){
  191 + name='内存';
  192 + }else if(this.optionsData.dynamicData.contextData.kpiId=='KPI98306224,KPIA91F44E7'){
  193 + name='存储';
  194 + }else if(this.optionsData.dynamicData.contextData.kpiId=='KPI2EC3F15A,KPI6AD9EBD6'){
  195 + name='表空间';
  196 + }else if(this.optionsData.dynamicData.contextData.kpiId=='KPI4D710FDA,KPI811E751E'){
  197 + name='ASM磁盘组';
  198 + }
  199 + this.progressData=[{name:name,rate:0}];
  200 + }
  201 + }else{
  202 + this.progressData=res;
  203 + }
  204 + let flagArr=[];
  205 + let flagStr='';
  206 + this.progressData.map(item=>{
  207 + flagArr.push(item.flag)
  208 + item.rate=Number(item.rate)
  209 + })
  210 + if(flagArr.length>0){
  211 + flagStr=flagArr.join(',')
  212 + }
  213 + this.$store.commit('CHANGE_PROGRESS',flagStr)
181 } 214 }
182 }); 215 });
183 }, 216 },
@@ -195,7 +228,7 @@ export default { @@ -195,7 +228,7 @@ export default {
195 .progress-item{ 228 .progress-item{
196 font-size: 14px; 229 font-size: 14px;
197 text-align: left; 230 text-align: left;
198 - flex:1; 231 + //flex:1;
199 padding:10px 20px; 232 padding:10px 20px;
200 //border:1px solid #ccc; 233 //border:1px solid #ccc;
201 display: flex; 234 display: flex;
@@ -166,7 +166,8 @@ export default { @@ -166,7 +166,8 @@ export default {
166 ? this.staticDataFn(optionsData.staticData) 166 ? this.staticDataFn(optionsData.staticData)
167 : this.dynamicDataFn( 167 : this.dynamicDataFn(
168 optionsData.dynamicData, 168 optionsData.dynamicData,
169 - optionsData.refreshTime 169 + optionsData.refreshTime,
  170 + optionsData.isRefresh
170 ); 171 );
171 }, 172 },
172 staticDataFn(val) { 173 staticDataFn(val) {
@@ -175,9 +176,9 @@ export default { @@ -175,9 +176,9 @@ export default {
175 } 176 }
176 177
177 }, 178 },
178 - dynamicDataFn(val, refreshTime) { 179 + dynamicDataFn(val, refreshTime,isRefresh) {
179 if (!val) return; 180 if (!val) return;
180 - if (this.ispreview) { 181 + if (this.ispreview && isRefresh) {
181 this.getEchartData(val); 182 this.getEchartData(val);
182 this.flagInter = setInterval(() => { 183 this.flagInter = setInterval(() => {
183 this.getEchartData(val); 184 this.getEchartData(val);
@@ -189,8 +190,13 @@ export default { @@ -189,8 +190,13 @@ export default {
189 getEchartData(val) { 190 getEchartData(val) {
190 const data = this.queryEchartsData(val); 191 const data = this.queryEchartsData(val);
191 data.then(res => { 192 data.then(res => {
  193 + console.log("&&&&",res)
192 if(res && res.length>0){ 194 if(res && res.length>0){
193 - this.systemData=res; 195 + if(res[0].code==0){
  196 + this.systemData=res[0].data;
  197 + }else{
  198 + this.systemData=res;
  199 + }
194 } 200 }
195 }); 201 });
196 }, 202 },
@@ -298,7 +298,7 @@ export default { @@ -298,7 +298,7 @@ export default {
298 const tableData = this.optionsData; 298 const tableData = this.optionsData;
299 tableData.dataType == "staticData" 299 tableData.dataType == "staticData"
300 ? this.handlerStaticData(tableData.staticData) 300 ? this.handlerStaticData(tableData.staticData)
301 - : this.handlerDynamicData(tableData.dynamicData, tableData.refreshTime); 301 + : this.handlerDynamicData(tableData.dynamicData, tableData.refreshTime,tableData.isRefresh);
302 }, 302 },
303 handlerStaticData(data) { 303 handlerStaticData(data) {
304 this.list = data; 304 this.list = data;
@@ -306,9 +306,9 @@ export default { @@ -306,9 +306,9 @@ export default {
306 this.loading = false; 306 this.loading = false;
307 this.loadingAll = false; 307 this.loadingAll = false;
308 }, 308 },
309 - handlerDynamicData(data, refreshTime) { 309 + handlerDynamicData(data, refreshTime,isRefresh) {
310 if (!data) return; 310 if (!data) return;
311 - if (this.ispreview) { 311 + if (this.ispreview && isRefresh) {
312 this.getEchartData(data); 312 this.getEchartData(data);
313 this.flagInter = setInterval(() => { 313 this.flagInter = setInterval(() => {
314 this.getEchartData(data); 314 this.getEchartData(data);
@@ -2,8 +2,8 @@ @@ -2,8 +2,8 @@
2 <div :style="styleObj" class="treeContainer"> 2 <div :style="styleObj" class="treeContainer">
3 <div class="tree-left" :style="treeLeftStyle"> 3 <div class="tree-left" :style="treeLeftStyle">
4 <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" v-if="optionsSetup.isType" stretch> 4 <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" v-if="optionsSetup.isType" stretch>
5 - <el-tab-pane label="业务系统" name="first"></el-tab-pane>  
6 - <el-tab-pane label="资源系统" name="second"></el-tab-pane> 5 + <el-tab-pane label="业务系统" name="bos"></el-tab-pane>
  6 + <el-tab-pane label="资源系统" name="res"></el-tab-pane>
7 </el-tabs> 7 </el-tabs>
8 <el-tree :style="textStyle" class="tree-div" ref="roleTree" :data="treeData" :props="defaultProps" @node-click="handleNodeClick" 8 <el-tree :style="textStyle" class="tree-div" ref="roleTree" :data="treeData" :props="defaultProps" @node-click="handleNodeClick"
9 node-key="id" :default-checked-keys="checkedKeys" 9 node-key="id" :default-checked-keys="checkedKeys"
@@ -26,10 +26,10 @@ export default { @@ -26,10 +26,10 @@ export default {
26 data() { 26 data() {
27 return { 27 return {
28 iframeSrc:'', 28 iframeSrc:'',
29 - activeName:'first', 29 + activeName:'bos',
30 defaultProps : { 30 defaultProps : {
31 - children: 'children',  
32 - label: 'label', 31 + children: 'child',
  32 + label: 'typeName',//resTypeName
33 }, 33 },
34 treeData: [], // 所有的树结点 34 treeData: [], // 所有的树结点
35 checkedKeys: [], // 当前选中的keys 35 checkedKeys: [], // 当前选中的keys
@@ -55,7 +55,9 @@ export default { @@ -55,7 +55,9 @@ export default {
55 treeLeftStyle(){ 55 treeLeftStyle(){
56 return{ 56 return{
57 'border':this.optionsSetup.isBorder?'0.5px solid '+this.optionsSetup.borderColor:'none', 57 'border':this.optionsSetup.isBorder?'0.5px solid '+this.optionsSetup.borderColor:'none',
58 - 'box-shadow':this.optionsSetup.isShadow?'0px 3px 12px '+this.optionsSetup.borderColor:'none' 58 + 'box-shadow':this.optionsSetup.isShadow?'0px 3px 12px '+this.optionsSetup.borderColor:'none',
  59 + 'max-height':this.optionsStyle.height + "px",
  60 + 'overflow':'auto',
59 } 61 }
60 }, 62 },
61 //文字样式设置 63 //文字样式设置
@@ -86,34 +88,46 @@ export default { @@ -86,34 +88,46 @@ export default {
86 this.optionsCollapse = this.value.collapse; 88 this.optionsCollapse = this.value.collapse;
87 this.optionsSetup = this.value.setup; 89 this.optionsSetup = this.value.setup;
88 this.editorOptions(); 90 this.editorOptions();
89 - this.setSrc({id:1})  
90 }, 91 },
91 mounted() { 92 mounted() {
92 93
93 }, 94 },
94 methods: { 95 methods: {
95 handleClick(tab,event){ 96 handleClick(tab,event){
96 - this.handleTableData(); 97 + //切换类型获取树结构数据
  98 + if (this.optionsData.dataType == "dynamicData" && this.optionsSetup.isType) {
  99 + //改变参数值-类型
  100 + this.optionsData.dynamicData.contextData.type = this.activeName;
  101 + }
97 }, 102 },
  103 + //树节点点击事件
98 handleNodeClick(data,node){ 104 handleNodeClick(data,node){
99 console.log("*(*(*(",node,data); 105 console.log("*(*(*(",node,data);
100 if(this.optionsSetup.isFrame){ 106 if(this.optionsSetup.isFrame){
101 - this.setSrc(data,node.level); 107 + this.setSrc(data,node);
102 } 108 }
103 this.$store.commit('CHANGE_TREE',data) 109 this.$store.commit('CHANGE_TREE',data)
104 }, 110 },
105 - setSrc(data,level){ 111 + setSrc(data,node){
106 let origin=window.location.origin;//当前域名 112 let origin=window.location.origin;//当前域名
107 let srcName=origin+'/#/bigscreen/viewer?reportCode='; 113 let srcName=origin+'/#/bigscreen/viewer?reportCode=';
108 // serviceCode,resourceCode 114 // serviceCode,resourceCode
109 let codeArr=[]; 115 let codeArr=[];
110 - if(this.activeName=='first'){ 116 + if(this.activeName=='bos'){
111 codeArr=this.optionsSetup.serviceCode.split(','); 117 codeArr=this.optionsSetup.serviceCode.split(',');
112 }else{ 118 }else{
113 codeArr=this.optionsSetup.resourceCode.split(','); 119 codeArr=this.optionsSetup.resourceCode.split(',');
114 } 120 }
115 - if(level>0){  
116 - srcName+=codeArr[level-1]; 121 + // if(level>0){
  122 + if(data.propType){
  123 + if(data.propType=='busType'){
  124 + srcName+=codeArr[0];
  125 + }else if(data.propType=='resType'){
  126 + srcName+=codeArr[1];
  127 + }else{
  128 + srcName+=codeArr[2];
  129 + }
  130 +
117 }else{ 131 }else{
118 srcName+=codeArr[0]; 132 srcName+=codeArr[0];
119 } 133 }
@@ -124,23 +138,45 @@ export default { @@ -124,23 +138,45 @@ export default {
124 srcName+='capacity_analysis_second'; 138 srcName+='capacity_analysis_second';
125 }*/ 139 }*/
126 let locationUrl=this.$route.query; 140 let locationUrl=this.$route.query;
127 - let access_token=locationUrl.locationUrl; 141 + let access_token=locationUrl.access_token;
128 let tokenUrl=''; 142 let tokenUrl='';
129 if(access_token){ 143 if(access_token){
130 tokenUrl='&access_token='+access_token 144 tokenUrl='&access_token='+access_token
131 } 145 }
132 - this.iframeSrc=srcName+tokenUrl; 146 + let busId='';
  147 + if(data.busId){
  148 + busId='&busId='+data.busId;
  149 + }else if(node && node.parent && node.parent.data.busId){
  150 + busId='&busId='+node.parent.data.busId;
  151 +
  152 + }else if(node && node.parent && node.parent.parent && node.parent.parent.data.busId){
  153 + busId='&busId='+node.parent.parent.data.busId;
  154 +
  155 + }
  156 + let resId='';
  157 + if(data.resId){
  158 + resId='&resId='+data.resId;
  159 + }
  160 + let resType='';
  161 + if(data.type){
  162 + resType='&resType='+data.type;
  163 + }else if(this.activeName=='res' && data.typeCode){
  164 + resType='&resType='+data.typeCode;
  165 +
  166 + }
  167 + let btnTitleName='';
  168 + let titleName='';
  169 + if(data.typeName){
  170 + btnTitleName='&btnTitleName='+data.typeName;
  171 + titleName='&titleName='+data.typeName;
  172 + }
  173 +
  174 + this.iframeSrc=srcName+tokenUrl+busId+resId+resType+btnTitleName+titleName;
  175 + console.log("iframeSrc",busId+resId+resType+btnTitleName)
133 }, 176 },
134 editorOptions() { 177 editorOptions() {
135 this.setOptionsData(); 178 this.setOptionsData();
136 }, 179 },
137 - //切换类型获取树结构数据  
138 - handleTableData() {  
139 - if (this.optionsData.dataType == "dynamicData" && this.optionsSetUp.isType) {  
140 - //改变参数值-类型  
141 - this.optionsData.dynamicData.contextData.type = this.activeName;  
142 - }  
143 - },  
144 // 数据解析 180 // 数据解析
145 setOptionsData() { 181 setOptionsData() {
146 const optionsData = this.optionsData; // 数据类型 静态 or 动态 182 const optionsData = this.optionsData; // 数据类型 静态 or 动态
@@ -148,18 +184,19 @@ export default { @@ -148,18 +184,19 @@ export default {
148 ? this.staticDataFn(optionsData.staticData) 184 ? this.staticDataFn(optionsData.staticData)
149 : this.dynamicDataFn( 185 : this.dynamicDataFn(
150 optionsData.dynamicData, 186 optionsData.dynamicData,
151 - optionsData.refreshTime 187 + optionsData.refreshTime,optionsData.isRefresh
152 ); 188 );
153 }, 189 },
154 staticDataFn(val) { 190 staticDataFn(val) {
155 if(val && val.length>0) { 191 if(val && val.length>0) {
156 this.treeData=val; 192 this.treeData=val;
  193 + this.setSrc(this.treeData[0])
157 } 194 }
158 195
159 }, 196 },
160 - dynamicDataFn(val, refreshTime) { 197 + dynamicDataFn(val, refreshTime,isRefresh) {
161 if (!val) return; 198 if (!val) return;
162 - if (this.ispreview) { 199 + if (this.ispreview && isRefresh) {
163 this.getEchartData(val); 200 this.getEchartData(val);
164 this.flagInter = setInterval(() => { 201 this.flagInter = setInterval(() => {
165 this.getEchartData(val); 202 this.getEchartData(val);
@@ -171,8 +208,11 @@ export default { @@ -171,8 +208,11 @@ export default {
171 getEchartData(val) { 208 getEchartData(val) {
172 const data = this.queryEchartsData(val); 209 const data = this.queryEchartsData(val);
173 data.then(res => { 210 data.then(res => {
174 - if(res && res.length>0){  
175 - this.treeData=res; 211 + console.log("aaaa",res)
  212 + if(res[0] && res[0].data){
  213 + this.treeData=res[0].data;
  214 + this.setSrc(this.treeData[0])
  215 +
176 } 216 }
177 }); 217 });
178 }, 218 },
@@ -48,6 +48,7 @@ import monitorCustomBarStack from "./monitor/customBarStack"; @@ -48,6 +48,7 @@ import monitorCustomBarStack from "./monitor/customBarStack";
48 import monitorBasicInformationTwo from "./monitor/basicInformationTwo"; 48 import monitorBasicInformationTwo from "./monitor/basicInformationTwo";
49 import monitorCustomLineStack from "./monitor/customLineStack"; 49 import monitorCustomLineStack from "./monitor/customLineStack";
50 import monitorCustomBarLineChart from "./monitor/customBarLineChart"; 50 import monitorCustomBarLineChart from "./monitor/customBarLineChart";
  51 +import monitorCustomBarLineChartArray from "./monitor/customBarLineChartArray";
51 import monitorButtonGroup from "./monitor/buttonGroup"; 52 import monitorButtonGroup from "./monitor/buttonGroup";
52 import monitorCustomLineTrend from "./monitor/customLineTrend"; 53 import monitorCustomLineTrend from "./monitor/customLineTrend";
53 import monitorCustomLiquidFillChart from "./monitor/customLiquidFillChart"; 54 import monitorCustomLiquidFillChart from "./monitor/customLiquidFillChart";
@@ -99,6 +100,7 @@ export default { @@ -99,6 +100,7 @@ export default {
99 monitorBasicInformationTwo, 100 monitorBasicInformationTwo,
100 monitorCustomLineStack, 101 monitorCustomLineStack,
101 monitorCustomBarLineChart, 102 monitorCustomBarLineChart,
  103 + monitorCustomBarLineChartArray,
102 monitorButtonGroup, 104 monitorButtonGroup,
103 monitorCustomLineTrend, 105 monitorCustomLineTrend,
104 monitorCustomLiquidFillChart, 106 monitorCustomLiquidFillChart,
@@ -59,6 +59,7 @@ import monitorCustomBarStack from "./monitor/customBarStack"; @@ -59,6 +59,7 @@ import monitorCustomBarStack from "./monitor/customBarStack";
59 import monitorBasicInformationTwo from "./monitor/basicInformationTwo"; 59 import monitorBasicInformationTwo from "./monitor/basicInformationTwo";
60 import monitorCustomLineStack from "./monitor/customLineStack"; 60 import monitorCustomLineStack from "./monitor/customLineStack";
61 import monitorCustomBarLineChart from "./monitor/customBarLineChart"; 61 import monitorCustomBarLineChart from "./monitor/customBarLineChart";
  62 +import monitorCustomBarLineChartArray from "./monitor/customBarLineChartArray";
62 import monitorButtonGroup from "./monitor/buttonGroup"; 63 import monitorButtonGroup from "./monitor/buttonGroup";
63 import monitorCustomLineTrend from "./monitor/customLineTrend"; 64 import monitorCustomLineTrend from "./monitor/customLineTrend";
64 import monitorCustomLiquidFillChart from "./monitor/customLiquidFillChart"; 65 import monitorCustomLiquidFillChart from "./monitor/customLiquidFillChart";
@@ -109,6 +110,7 @@ export default { @@ -109,6 +110,7 @@ export default {
109 monitorBasicInformationTwo, 110 monitorBasicInformationTwo,
110 monitorCustomLineStack, 111 monitorCustomLineStack,
111 monitorCustomBarLineChart, 112 monitorCustomBarLineChart,
  113 + monitorCustomBarLineChartArray,
112 monitorButtonGroup, 114 monitorButtonGroup,
113 monitorCustomLineTrend, 115 monitorCustomLineTrend,
114 monitorCustomLiquidFillChart, 116 monitorCustomLiquidFillChart,