monitor_v3 / anji-plus-report · Commits

Go to a project

Authored by wangtao
Commit 9704e0ba7eb632fef48feac6ea9905f8693e51f9 2 parents 3c9a20cc 0d13cf0b

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

…port into master-500-dev

 Conflicts:
	report-ui/src/views/report/bigscreen/designer/tools/main.js
	report-ui/src/views/report/bigscreen/designer/widget/temp.vue
	report-ui/src/views/report/bigscreen/designer/widget/widget.vue
Inline Side-by-side
Showing 14 changed files with 800 additions and 26 deletions
@@ -215,8 +215,9 @@ export default { @@ -215,8 +215,9 @@ export default {
215 } 215 }
216 216
217 }else{ 217 }else{
218 - xAxisList=[]  
219 - series = [{ 218 + xAxisList=[];
  219 + series=[];
  220 + /* series = [{
220 name: "使用量", 221 name: "使用量",
221 type:'bar', 222 type:'bar',
222 data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] 223 data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
@@ -228,13 +229,14 @@ export default { @@ -228,13 +229,14 @@ export default {
228 name: "使用率", 229 name: "使用率",
229 type:'line', 230 type:'line',
230 data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] 231 data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
231 - }]; 232 + }];*/
232 } 233 }
233 } 234 }
234 }else{ 235 }else{
235 // 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'] 236 // 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']
236 - xAxisList=[]  
237 - series = [{ 237 + xAxisList=[];
  238 + series=[];
  239 + /*series = [{
238 name: "使用量", 240 name: "使用量",
239 type:'bar', 241 type:'bar',
240 data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] 242 data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
@@ -246,7 +248,7 @@ export default { @@ -246,7 +248,7 @@ export default {
246 name: "使用率", 248 name: "使用率",
247 type:'line', 249 type:'line',
248 data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] 250 data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
249 - }]; 251 + }];*/
250 } 252 }
251 ananysicData["xAxis"] = xAxisList; 253 ananysicData["xAxis"] = xAxisList;
252 ananysicData["series"] = series; 254 ananysicData["series"] = series;
  1 +/*
  2 + * @Descripttion: 业务卡片
  3 + * @version:
  4 + * @Author: lsq
  5 + * @Date: 2022-05-18
  6 + * @LastEditors: lsq
  7 + * @LastEditTime: 2022-05-18
  8 + */
  9 +export const monitorBusCard = {
  10 + code: 'monitor-bus-card',
  11 + type: 'chart',
  12 + label: '业务-卡片',
  13 + icon: 'iconbaifenbi',
  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: 'isToop',
  37 + required: false,
  38 + placeholder: '',
  39 + value: true
  40 + },
  41 + {
  42 + type: 'el-select',
  43 + label: '拓扑图标',
  44 + name: 'toop',
  45 + required: false,
  46 + placeholder: '',
  47 + selectOptions: [
  48 + {code: 'el-icon-my-toop', name: '蓝色图标'},
  49 + {code: 'el-icon-my-toop-white', name: '白色图标'},
  50 + {code: 'el-icon-my-toop-yellow', name: '黄色图标'},
  51 + ],
  52 + value: 'el-icon-my-toop'
  53 + },
  54 + {
  55 + type: 'el-switch',
  56 + label: '是否有跳转',
  57 + name: 'isNextPage',
  58 + required: false,
  59 + placeholder: '',
  60 + value: true,
  61 + },
  62 + {
  63 + type: 'el-input-text',
  64 + label: '跳转路由',
  65 + name: 'nextRouter',
  66 + required: false,
  67 + placeholder: '',
  68 + value: '',
  69 + },
  70 + [
  71 + {
  72 + name: '卡片设置',
  73 + list: [
  74 + {
  75 + type: 'vue-color',
  76 + label: '卡片背景颜色',
  77 + name: 'backgroundItem',
  78 + required: false,
  79 + placeholder: '',
  80 + value: '#fff'
  81 + },
  82 + {
  83 + type: 'el-switch',
  84 + label: '加边框',
  85 + name: 'isBorder',
  86 + required: false,
  87 + placeholder: '',
  88 + value: true
  89 + },
  90 + {
  91 + type: 'el-input-number',
  92 + label: '边框宽度',
  93 + name: 'borderWidth',
  94 + required: false,
  95 + placeholder: '',
  96 + value: 1,
  97 + },
  98 + {
  99 + type: 'vue-color',
  100 + label: '边框颜色',
  101 + name: 'borderColor',
  102 + required: false,
  103 + placeholder: '',
  104 + value: 'rgba(151, 151, 151, 0.13)',
  105 + },
  106 + {
  107 + type: 'el-input-number',
  108 + label: '边框圆角',
  109 + name: 'radiusCard',
  110 + required: false,
  111 + placeholder: '',
  112 + value: 3,
  113 + },
  114 + {
  115 + type: 'el-input-number',
  116 + label: '宽度',
  117 + name: 'widthCard',
  118 + required: false,
  119 + placeholder: '',
  120 + value: 450,
  121 + },
  122 + {
  123 + type: 'el-input-number',
  124 + label: '高度',
  125 + name: 'heightCard',
  126 + required: false,
  127 + placeholder: '',
  128 + value: 200,
  129 + },
  130 + {
  131 + type: 'vue-color',
  132 + label: '小圆点优颜色',
  133 + name: 'normalColor',
  134 + required: false,
  135 + placeholder: '',
  136 + value: '#0BAC33',
  137 + },
  138 + {
  139 + type: 'vue-color',
  140 + label: '小圆点良颜色',
  141 + name: 'worseColor',
  142 + required: false,
  143 + placeholder: '',
  144 + value: '#FF7E00',
  145 + },
  146 + {
  147 + type: 'vue-color',
  148 + label: '小圆点中颜色',
  149 + name: 'worstColor',
  150 + required: false,
  151 + placeholder: '',
  152 + value: '#d81e06',
  153 + },
  154 + ]
  155 + },
  156 + {
  157 + name: '标题设置',
  158 + list: [
  159 + {
  160 + type: 'el-switch',
  161 + label: '是否有标题',
  162 + name: 'isTitle',
  163 + required: false,
  164 + placeholder: '',
  165 + value: true,
  166 + },
  167 + {
  168 + type: 'el-input-text',
  169 + label: '标题名称',
  170 + name: 'titleName',
  171 + required: false,
  172 + placeholder: '',
  173 + value: 'vmware-80.12.89.77',
  174 + },
  175 + {
  176 + type: 'vue-color',
  177 + label: '背景颜色',
  178 + name: 'titleBgColor',
  179 + required: false,
  180 + placeholder: '',
  181 + value: 'rgb(244, 245, 250)'
  182 +
  183 + },
  184 +
  185 + {
  186 + type: 'el-select',
  187 + label: '字体位置',
  188 + name: 'textAlign',
  189 + required: false,
  190 + placeholder: '',
  191 + selectOptions: [
  192 + {code: 'center', name: '居中'},
  193 + {code: 'left', name: '左对齐'},
  194 + {code: 'right', name: '右对齐'},
  195 + ],
  196 + value: 'center'
  197 + },
  198 +
  199 + {
  200 + type: 'el-input-number',
  201 + label: '字体大小',
  202 + name: 'titleFontSize',
  203 + required: false,
  204 + placeholder: '',
  205 + value: '18'
  206 + },
  207 + {
  208 + type: 'vue-color',
  209 + label: '字体颜色',
  210 + name: 'titleColor',
  211 + required: false,
  212 + placeholder: '',
  213 + value: '#666'
  214 + },
  215 + {
  216 + type: 'el-select',
  217 + label: '字体粗细',
  218 + name: 'titleFontWeight',
  219 + required: false,
  220 + placeholder: '',
  221 + selectOptions: [
  222 + {code: 'normal', name: '正常'},
  223 + {code: 'bold', name: '粗体'},
  224 + {code: 'bolder', name: '特粗体'},
  225 + {code: 'lighter', name: '细体'}
  226 + ],
  227 + value: 'normal'
  228 + },
  229 + ]
  230 + },
  231 + {
  232 + name: '数值设置',
  233 + list: [
  234 + {
  235 + type: 'el-input-number',
  236 + label: '数值字体大小',
  237 + name: 'textNumFontSize',
  238 + required: false,
  239 + placeholder: '',
  240 + value: 20
  241 + },
  242 + {
  243 + type: 'el-select',
  244 + label: '字体粗细',
  245 + name: 'textNumFontWeight',
  246 + required: false,
  247 + placeholder: '',
  248 + selectOptions: [
  249 + {code: 'normal', name: '正常'},
  250 + {code: 'bold', name: '粗体'},
  251 + {code: 'bolder', name: '特粗体'},
  252 + {code: 'lighter', name: '细体'}
  253 + ],
  254 + value: 'normal'
  255 + }
  256 + ],
  257 + },
  258 + {
  259 + name: '数值名称设置',
  260 + list: [
  261 + {
  262 + type: 'el-input-number',
  263 + label: '数值字体大小',
  264 + name: 'textNameFontSize',
  265 + required: false,
  266 + placeholder: '',
  267 + value: 20
  268 + },
  269 + {
  270 + type: 'el-select',
  271 + label: '字体粗细',
  272 + name: 'textNameFontWeight',
  273 + required: false,
  274 + placeholder: '',
  275 + selectOptions: [
  276 + {code: 'normal', name: '正常'},
  277 + {code: 'bold', name: '粗体'},
  278 + {code: 'bolder', name: '特粗体'},
  279 + {code: 'lighter', name: '细体'}
  280 + ],
  281 + value: 'normal'
  282 + }
  283 + ],
  284 + }
  285 + ],
  286 + ],
  287 + // 数据
  288 + data: [
  289 + {
  290 + type: 'el-radio-group',
  291 + label: '数据类型',
  292 + name: 'dataType',
  293 + require: false,
  294 + placeholder: '',
  295 + selectValue: true,
  296 + selectOptions: [
  297 + {
  298 + code: 'staticData',
  299 + name: '静态数据',
  300 + },
  301 + {
  302 + code: 'dynamicData',
  303 + name: '动态数据',
  304 + },
  305 + ],
  306 + value: 'staticData',
  307 + },
  308 + {
  309 + type: 'el-input-number',
  310 + label: '刷新时间(毫秒)',
  311 + name: 'refreshTime',
  312 + relactiveDom: 'dataType',
  313 + relactiveDomValue: 'dynamicData',
  314 + value: 5000
  315 + },
  316 + {
  317 + type: 'el-button',
  318 + label: '静态数据',
  319 + name: 'staticData',
  320 + required: false,
  321 + placeholder: '',
  322 + relactiveDom: 'dataType',
  323 + relactiveDomValue: 'staticData',
  324 + value:[
  325 + {
  326 + "busId": "b64bd18a248c4f08ae14a5d67d64a2c1",
  327 + "parentId": "0",
  328 + "busTypeCode": "xianbus",
  329 + "busTypeName": "西安公司业务",
  330 + "busTypeDesc": "西安公司业务",
  331 + "admin": "wanganjun",
  332 + "adminTel": null,
  333 + "createTime": "2022-03-03 10:55:55",
  334 + "streamId": null,
  335 + "isUse": 1,
  336 + "important": 1,
  337 + "sort": 100,
  338 + "isLeaf": 1,
  339 + "nickname": "王安军",
  340 + "result": null,
  341 + "resourceId": null,
  342 + "healthStatus": null,
  343 + "healthStatusName": null,
  344 + "jtopoId": null,
  345 + "businessNum": null,
  346 + "successRate": null,
  347 + "responseRate": null,
  348 + "score": null,
  349 + "resNum": null,
  350 + "normal": 4,
  351 + "worse": 0,
  352 + "worst": 4,
  353 + "total": 8,
  354 + "resType": "b64bd18a248c4f08ae14a5d67d64a2c1",
  355 + "resTypeName": "西安公司业务",
  356 + "useable": null,
  357 + "child": null,
  358 + "alarmNum": null,
  359 + "hostNum": null,
  360 + "databaseNum": null,
  361 + "middwareNum": null,
  362 + "parentName": null,
  363 + "userCount": null,
  364 + "showType": null,
  365 + "isOps": 0,
  366 + "taskType": null,
  367 + "isvirtual": null,
  368 + "system_type": null,
  369 + "principal": null,
  370 + "principalName": null
  371 + }, {
  372 + "busId": "1d4ff0198a2e440ea42e0d9099aca133",
  373 + "parentId": "0",
  374 + "busTypeCode": "fdchj",
  375 + "busTypeName": "房地产核价系统",
  376 + "busTypeDesc": "房地产核价系统",
  377 + "admin": "童浏靓",
  378 + "adminTel": "18997480219",
  379 + "createTime": "2019-09-04 18:49:17",
  380 + "streamId": null,
  381 + "isUse": 1,
  382 + "important": 1,
  383 + "sort": 100,
  384 + "isLeaf": 1,
  385 + "nickname": "童浏靓",
  386 + "result": null,
  387 + "resourceId": null,
  388 + "healthStatus": null,
  389 + "healthStatusName": null,
  390 + "jtopoId": null,
  391 + "businessNum": null,
  392 + "successRate": null,
  393 + "responseRate": null,
  394 + "score": null,
  395 + "resNum": null,
  396 + "normal": 1,
  397 + "worse": 0,
  398 + "worst": 5,
  399 + "total": 6,
  400 + "resType": "1d4ff0198a2e440ea42e0d9099aca133",
  401 + "resTypeName": "房地产核价系统",
  402 + "useable": null,
  403 + "child": null,
  404 + "alarmNum": null,
  405 + "hostNum": null,
  406 + "databaseNum": null,
  407 + "middwareNum": null,
  408 + "parentName": null,
  409 + "userCount": null,
  410 + "showType": null,
  411 + "isOps": 0,
  412 + "taskType": null,
  413 + "isvirtual": null,
  414 + "system_type": null,
  415 + "principal": null,
  416 + "principalName": null
  417 + }
  418 + ]
  419 + },
  420 + {
  421 + type: 'dycustComponents',
  422 + label: '',
  423 + name: 'dynamicData',
  424 + required: false,
  425 + placeholder: '',
  426 + relactiveDom: 'dataType',
  427 + chartType: 'widget-table',
  428 + dictKey: 'TEXT_PROPERTIES',
  429 + relactiveDomValue: 'dynamicData',
  430 + value: '',
  431 + },
  432 + ],
  433 + // 坐标
  434 + position: [
  435 + {
  436 + type: 'el-input-number',
  437 + label: '左边距',
  438 + name: 'left',
  439 + required: false,
  440 + placeholder: '',
  441 + value: 0,
  442 + },
  443 + {
  444 + type: 'el-input-number',
  445 + label: '上边距',
  446 + name: 'top',
  447 + required: false,
  448 + placeholder: '',
  449 + value: 0,
  450 + },
  451 + {
  452 + type: 'el-input-number',
  453 + label: '宽度',
  454 + name: 'width',
  455 + required: false,
  456 + placeholder: '该容器在1920px大屏中的宽度',
  457 + value: 1800,
  458 + },
  459 + {
  460 + type: 'el-input-number',
  461 + label: '高度',
  462 + name: 'height',
  463 + required: false,
  464 + placeholder: '该容器在1080px大屏中的高度',
  465 + value: 240,
  466 + },
  467 + ],
  468 + }
  469 +}
@@ -716,7 +716,7 @@ export const monitorCustomBarLineChart = { @@ -716,7 +716,7 @@ export const monitorCustomBarLineChart = {
716 label: '', 716 label: '',
717 name: 'customColor', 717 name: 'customColor',
718 required: false, 718 required: false,
719 - value: [{color: '#3b91ff'}, {color: '#ff1111'}, {color: '#2c2f90'}], 719 + value: [{color: '#3b91ff'}, {color: '#2c2f90'}, {color: '#ff1111'}],
720 }, 720 },
721 ], 721 ],
722 }, 722 },
@@ -61,6 +61,7 @@ import {monitorJimuButton} from "./echartsConfigJson/monitorConfigJson/monitor-j @@ -61,6 +61,7 @@ import {monitorJimuButton} from "./echartsConfigJson/monitorConfigJson/monitor-j
61 import {monitorAjButton} from "./echartsConfigJson/monitorConfigJson/monitor-aj-button"; 61 import {monitorAjButton} from "./echartsConfigJson/monitorConfigJson/monitor-aj-button";
62 import {monitorCustomScatterWeight} from "./echartsConfigJson/monitorConfigJson/monitor-custom-scatter-weight"; 62 import {monitorCustomScatterWeight} from "./echartsConfigJson/monitorConfigJson/monitor-custom-scatter-weight";
63 import {monitorSelectOption} from "./echartsConfigJson/monitorConfigJson/monitor-select-option"; 63 import {monitorSelectOption} from "./echartsConfigJson/monitorConfigJson/monitor-select-option";
  64 +import {monitorBusCard} from "./echartsConfigJson/monitorConfigJson/monitor-bus-card";
64 65
65 import {customComponentTree} from "./echartsConfigJson/monitorConfigJson/page/custom-component-tree"; 66 import {customComponentTree} from "./echartsConfigJson/monitorConfigJson/page/custom-component-tree";
66 import {customComponentTable} from "./echartsConfigJson/monitorConfigJson/page/custom-component-tables"; 67 import {customComponentTable} from "./echartsConfigJson/monitorConfigJson/page/custom-component-tables";
@@ -147,10 +148,6 @@ export const {widgetTool,monitor} = { @@ -147,10 +148,6 @@ export const {widgetTool,monitor} = {
147 // 散点图 148 // 散点图
148 monitorCustomScatterWeight, 149 monitorCustomScatterWeight,
149 //下拉列表 150 //下拉列表
150 - monitorSelectOption,  
151 - // 自定义树  
152 - customComponentTree,  
153 - // 自定义表格  
154 - customComponentTable 151 + monitorSelectOption
155 ] 152 ]
156 } 153 }
@@ -55,12 +55,12 @@ @@ -55,12 +55,12 @@
55 </el-col> 55 </el-col>
56 <!-- && attrKey.attrKeyVal.includes(item.nameCode)--> 56 <!-- && attrKey.attrKeyVal.includes(item.nameCode)-->
57 </el-row> 57 </el-row>
58 - <el-row class="basic-item 111" :style="[itemStyle,borderStlyeLast]" v-if="optionsSetUp.isTowColumn && informationData.length%2==0"> 58 +<!-- <el-row class="basic-item 111" :style="[itemStyle,borderStlyeLast]" v-if="optionsSetUp.isTowColumn && informationData.length%2==0">
59 <el-col class="basic-border basic-item-title basic-flex" :span="10"> 59 <el-col class="basic-border basic-item-title basic-flex" :span="10">
60 </el-col> 60 </el-col>
61 <el-col class="basic-border basic-flex basic-item-content" :span="14"><span></span> 61 <el-col class="basic-border basic-flex basic-item-content" :span="14"><span></span>
62 </el-col> 62 </el-col>
63 - </el-row> 63 + </el-row>-->
64 </div> 64 </div>
65 65
66 </div> 66 </div>
  1 +<template>
  2 + <div :style="styleObj" class="flex-div-content" >
  3 + <div :style="styleObjItem" class="flex-div card-item" @click="goJump(item)" v-for="(item,index) in busCardData" :key="index">
  4 + <div class="busCard-title" :style="titleStyle">
  5 + <span class="busCard-titleName"> {{item.busTypeName}}</span>
  6 + <el-tooltip
  7 + class="box-item"
  8 + effect="dark"
  9 + content="查看拓扑图"
  10 + placement="top"
  11 + >
  12 + <i :class="[optionsSetup.toop,'title-i']" v-if="optionsSetup.isToop" @click="resTopo(item)"></i>
  13 + </el-tooltip>
  14 + </div>
  15 + <div class="busCardContainer" :style="flexStyle">
  16 + <div class="bus-container-item bus-total">
  17 + <div class="bus-num" :style="busNumStyle">{{item.total}}</div>
  18 + <div class="bus-name" :style="busNameStyle">总量</div>
  19 + </div>
  20 + <div class="bus-container-item bus-normal">
  21 + <div :class="['bus-num',{'text-white':item.normal>0}]" :style="[item.normal>0?circleNormal:'',busNumStyle]">{{item.normal}}</div>
  22 + <div class="bus-name" :style="busNameStyle"><i class="circle-i" :style="circleNormal"></i>优</div>
  23 + </div>
  24 + <div class="bus-container-item bus-worse">
  25 + <div :class="['bus-num',{'text-white':item.worse>0}]" :style="[item.worse>0?circleWorse:'',busNumStyle]">{{item.worse}}</div>
  26 + <div class="bus-name" :style="busNameStyle"><i class="circle-i" :style="circleWorse"></i>良</div>
  27 + </div>
  28 + <div class="bus-container-item bus-worst">
  29 + <div :class="['bus-num',{'text-white':item.worst>0}]" :style="[item.worst>0?circleWorst:'',busNumStyle]">{{item.worst}}</div>
  30 + <div class="bus-name" :style="busNameStyle"><i class="circle-i" :style="circleWorst"></i>中</div>
  31 + </div>
  32 + </div>
  33 + </div>
  34 + <div :style="styleObjItemSup" class="flex-div" v-for="(item,index) in 3"></div>
  35 +
  36 +
  37 + </div>
  38 +</template>
  39 +
  40 +<script>
  41 +export default {
  42 + name: "busCard",
  43 + components: {},
  44 + props: {
  45 + value: Object,
  46 + ispreview: Boolean
  47 + },
  48 + data() {
  49 + return {
  50 + busCardData:'',//数据
  51 + angle: 0,
  52 + optionsStyle: {}, // 样式
  53 + optionsData: {}, // 数据
  54 + optionsCollapse: {}, // 图标属性
  55 + optionsSetup: {}
  56 + };
  57 + },
  58 + computed: {
  59 + styleObj() {
  60 + return {
  61 + position: this.ispreview ? "absolute" : "static",
  62 + width: this.optionsStyle.width + "px",
  63 + height: this.optionsStyle.height + "px",
  64 + left: this.optionsStyle.left + "px",
  65 + top: this.optionsStyle.top + "px",
  66 + background: this.optionsSetup.background,
  67 + };
  68 + },
  69 + styleObjItem(){
  70 + return{
  71 + width: this.optionsSetup.widthCard + "px",
  72 + height: this.optionsSetup.heightCard + "px",
  73 + cursor:this.optionsSetup.isNextPage?'pointer':'',
  74 + background: this.optionsSetup.backgroundItem,
  75 + 'border-radius':this.optionsSetup.radiusCard+'px',
  76 + 'border':this.optionsSetup.isBorder?(this.optionsSetup.borderWidth+'px'+' solid '+ this.optionsSetup.borderColor):'none'
  77 +
  78 + }
  79 + },
  80 + //补充空div
  81 + styleObjItemSup(){
  82 + return{
  83 + width: this.optionsSetup.widthCard + "px",
  84 + height: this.optionsSetup.heightCard + "px",
  85 + }
  86 + },
  87 + flexStyle(){
  88 + return{
  89 + // 'flex-flow':this.optionsSetup.flexFlow
  90 + }
  91 + },
  92 + //标题样式设置
  93 + titleStyle(){
  94 + return{
  95 + 'display':this.optionsSetup.isTitle?'flex':'none',
  96 + 'text-align':this.optionsSetup.textAlign,
  97 + 'justify-content':this.optionsSetup.textAlign=='left'?'start':this.optionsSetup.textAlign=='center'?'center':'flex-end',
  98 + 'font-size':this.optionsSetup.titleFontSize+'px',
  99 + color: this.optionsSetup.titleColor,
  100 + 'font-weight': this.optionsSetup.titleFontWeight,
  101 + 'background':this.optionsSetup.titleBgColor
  102 + }
  103 + },
  104 + //circle小圆点样式
  105 + circleNormal(){
  106 + return{
  107 + background:this.optionsSetup.normalColor
  108 + }
  109 + },
  110 + circleWorse(){
  111 + return{
  112 + background:this.optionsSetup.worseColor
  113 + }
  114 + },
  115 + circleWorst(){
  116 + return{
  117 + background:this.optionsSetup.worstColor
  118 + }
  119 + },
  120 + //数值样式
  121 + busNumStyle(){
  122 + return{
  123 + 'font-size':this.optionsSetup.textNumFontSize+'px',
  124 + 'font-weight':this.optionsSetup.textNumFontWeight
  125 + }
  126 + },
  127 + //数值名称样式
  128 + busNameStyle(){
  129 + return{
  130 + 'font-size':this.optionsSetup.textNameFontSize+'px',
  131 + 'font-weight':this.optionsSetup.textNameFontWeight
  132 + }
  133 + }
  134 + },
  135 + watch: {
  136 + value: {
  137 + handler(val) {
  138 + this.optionsStyle = val.position;
  139 + this.optionsData = val.data;
  140 + this.optionsCollapse = val.collapse;
  141 + this.optionsSetup = val.setup;
  142 + this.editorOptions();
  143 + },
  144 + deep: true
  145 + }
  146 + },
  147 + created() {
  148 + this.optionsStyle = this.value.position;
  149 + this.optionsData = this.value.data;
  150 + this.optionsCollapse = this.value.collapse;
  151 + this.optionsSetup = this.value.setup;
  152 + this.editorOptions();
  153 + },
  154 + mounted() {
  155 +
  156 + },
  157 + methods: {
  158 +
  159 + resTopo(item) {
  160 + let param = {
  161 + type:'topology',
  162 + data:{
  163 + busId:item.busId,
  164 + resId: item.resId,
  165 + resType: item.resType
  166 + }
  167 +
  168 + }
  169 + window.parent.postMessage(param, '*')
  170 + },
  171 + editorOptions() {
  172 + this.setOptionsData();
  173 + },
  174 + // 数据解析
  175 + setOptionsData() {
  176 + const optionsData = this.optionsData; // 数据类型 静态 or 动态
  177 + optionsData.dataType == "staticData"
  178 + ? this.staticDataFn(optionsData.staticData)
  179 + : this.dynamicDataFn(
  180 + optionsData.dynamicData,
  181 + optionsData.refreshTime
  182 + );
  183 + },
  184 + staticDataFn(val) {
  185 + this.setData(val)
  186 + },
  187 + //处理数据
  188 + setData(val){
  189 + this.busCardData=val;
  190 + },
  191 + dynamicDataFn(val, refreshTime) {
  192 + if (!val) return;
  193 + if (this.ispreview) {
  194 + this.getEchartData(val);
  195 + this.flagInter = setInterval(() => {
  196 + this.getEchartData(val);
  197 + }, refreshTime);
  198 + } else {
  199 + this.getEchartData(val);
  200 + }
  201 + },
  202 + getEchartData(val) {
  203 + const data = this.queryEchartsData(val);
  204 + data.then(res => {
  205 + this.setData(res)
  206 + });
  207 + },
  208 + goJump(item){
  209 + let locationUrl=this.$route.query;
  210 + if(this.optionsSetup.isNextPage){
  211 + let nextRouter=this.optionsSetup.nextRouter;
  212 + if( this.$route.query.second_router){
  213 + nextRouter=this.$route.query.second_router
  214 + }
  215 + if(nextRouter){
  216 + this.$router.push({
  217 + path: `/bigscreen/viewer`,
  218 + query: { reportCode: nextRouter,titleName:item.busTypeName ,busId:item.busId,resType: item.resType,access_token:locationUrl.access_token},
  219 + })
  220 + }
  221 +
  222 + }
  223 +
  224 + }
  225 + }
  226 +};
  227 +</script>
  228 +
  229 +<style scoped lang="scss">
  230 +.flex-div-content{
  231 + display: flex;
  232 + //justify-content: space-between;
  233 + justify-content: flex-start;
  234 + flex-wrap: wrap;
  235 +}
  236 +.card-item{
  237 + margin-right:10px;
  238 +}
  239 +.flex-div{
  240 + display: flex;
  241 + flex-flow: column;
  242 + margin-bottom: 20px;
  243 +}
  244 +.busCardContainer{
  245 + box-sizing: content-box;
  246 + display: flex;
  247 + align-items: center;
  248 + justify-content: space-around;
  249 + flex:1;
  250 +
  251 +}
  252 +.busCard-title{
  253 +/* display: flex;
  254 + justify-content: center;*/
  255 + padding:20px;
  256 +}
  257 +.busCard-titleName{
  258 + flex:1;
  259 +}
  260 +.title-i{
  261 + width:16px;
  262 +}
  263 +.box-item{
  264 + margin-left:5px;
  265 + cursor: pointer;
  266 +}
  267 +.circle-i{
  268 + display: inline-block;
  269 + margin-right: 5px;
  270 + width: 12px;
  271 + height: 12px;
  272 + border-radius: 6px;
  273 +}
  274 +.bus-num{
  275 + background:#F2F2F2;
  276 + margin-bottom: 20px;
  277 + padding: 5px 8px;
  278 + display: inline-block;
  279 + border-radius: 2px;
  280 +
  281 +}
  282 +.text-white{
  283 + color:#fff;
  284 +}
  285 +.bus-container-item{
  286 + border-right:1px solid #F2F2F2;
  287 + flex:1;
  288 +}
  289 +.bus-container-item:last-child{
  290 + border:none;
  291 +}
  292 +</style>
@@ -578,7 +578,7 @@ export default { @@ -578,7 +578,7 @@ export default {
578 }else if(this.buttonVal=='quarter'){ 578 }else if(this.buttonVal=='quarter'){
579 this.options.xAxis.data=['1季度','2季度','3季度','4季度']; 579 this.options.xAxis.data=['1季度','2季度','3季度','4季度'];
580 580
581 - }else if(this.buttonVal=='month'){ 581 + }else if(this.buttonVal=='month' || this.buttonVal=='export'){
582 this.options.xAxis.data=['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']; 582 this.options.xAxis.data=['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
583 }else{ 583 }else{
584 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'] 584 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']
@@ -387,7 +387,7 @@ export default { @@ -387,7 +387,7 @@ export default {
387 }else if(this.buttonVal=='quarter'){ 387 }else if(this.buttonVal=='quarter'){
388 xAxisList=['1季度','2季度','3季度','4季度']; 388 xAxisList=['1季度','2季度','3季度','4季度'];
389 389
390 - }else if(this.buttonVal=='month'){ 390 + }else if(this.buttonVal=='month' || this.buttonVal=='export'){
391 xAxisList=['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']; 391 xAxisList=['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
392 }else{ 392 }else{
393 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'] 393 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']
@@ -237,11 +237,15 @@ export default { @@ -237,11 +237,15 @@ export default {
237 buttonVal:{ 237 buttonVal:{
238 handler(val){ 238 handler(val){
239 // TODO 在存储页面中获取不到，暂时注释掉 239 // TODO 在存储页面中获取不到，暂时注释掉
  240 + let time=val;
  241 + if(val=='export'){
  242 + time='month';
  243 + }
240 //if(this.optionsSetup.isVuex){ 244 //if(this.optionsSetup.isVuex){
241 let optionsData=this.optionsData; 245 let optionsData=this.optionsData;
242 if(this.optionsData.dataType=="dynamicData"){ 246 if(this.optionsData.dataType=="dynamicData"){
243 //改变参数值-月季度年，重新加载动态数据 247 //改变参数值-月季度年，重新加载动态数据
244 - this.optionsData.dynamicData.contextData.dataScope=val; 248 + this.optionsData.dynamicData.contextData.dataScope=time;
245 // this.editorOptions(); 249 // this.editorOptions();
246 } 250 }
247 //} 251 //}
@@ -204,6 +204,9 @@ export default { @@ -204,6 +204,9 @@ export default {
204 let flagArr=[]; 204 let flagArr=[];
205 let flagStr=''; 205 let flagStr='';
206 this.progressData.map(item=>{ 206 this.progressData.map(item=>{
  207 + if(item.unit){
  208 + item.unit= item.unit.replace(/[""‘’“”]/ig, '')
  209 + }
207 flagArr.push(item.flag) 210 flagArr.push(item.flag)
208 item.rate=Number(item.rate) 211 item.rate=Number(item.rate)
209 }) 212 })
@@ -28,7 +28,7 @@ export default { @@ -28,7 +28,7 @@ export default {
28 data() { 28 data() {
29 return { 29 return {
30 selectVal:'', 30 selectVal:'',
31 - selectOption:[{value:1,label:'选项1',disabled:false},{value:2,label:'选项3',disabled:true}], 31 + selectOption:[],
32 options: {}, 32 options: {},
33 optionsSetUp: {}, 33 optionsSetUp: {},
34 optionsPosition:{}, 34 optionsPosition:{},
@@ -158,7 +158,6 @@ export default { @@ -158,7 +158,6 @@ export default {
158 : this.handlerDynamicData(resData.dynamicData, resData.refreshTime,resData.isRefresh); 158 : this.handlerDynamicData(resData.dynamicData, resData.refreshTime,resData.isRefresh);
159 }, 159 },
160 handlerStaticData(data) { 160 handlerStaticData(data) {
161 - console.log("abcd",data)  
162 this.selectOption=data; 161 this.selectOption=data;
163 // this.pushAll(); 162 // this.pushAll();
164 }, 163 },
@@ -176,7 +175,6 @@ export default { @@ -176,7 +175,6 @@ export default {
176 getEchartData(val) { 175 getEchartData(val) {
177 const data = this.queryEchartsData(val); 176 const data = this.queryEchartsData(val);
178 data.then(res => { 177 data.then(res => {
179 - console.log("abc",res)  
180 this.selectOption=res; 178 this.selectOption=res;
181 this.pushAll(); 179 this.pushAll();
182 this.hackResetFun(); 180 this.hackResetFun();
@@ -100,8 +100,12 @@ export default { @@ -100,8 +100,12 @@ export default {
100 let param = { 100 let param = {
101 type:e.data.type, 101 type:e.data.type,
102 data:{ 102 data:{
103 - resId: e.data.data?e.data.data.resId:'',  
104 - resType: e.data.data?e.data.data.resType:'' 103 + resId: (e.data.data && e.data.data.resId)?e.data.data.resId:'',
  104 + resType: (e.data.data && e.data.data.resType)?e.data.data.resType:'',
  105 + kpiId: (e.data.data && e.data.data.kpiId)?e.data.data.kpiId:'',
  106 + flag: (e.data.data && e.data.data.flag)?e.data.data.flag:'',
  107 + reportCode: (e.data.data && e.data.data.reportCode)?e.data.data.reportCode:'',
  108 + title: (e.data.data && e.data.data.title)?e.data.data.title:''
105 } 109 }
106 110
107 } 111 }
@@ -143,10 +147,11 @@ export default { @@ -143,10 +147,11 @@ export default {
143 srcName+=codeArr[0]; 147 srcName+=codeArr[0];
144 }else if(data.propType=='resType'){ 148 }else if(data.propType=='resType'){
145 srcName+=codeArr[1]; 149 srcName+=codeArr[1];
146 - }else{ 150 + }else if(data.propType=='res'){
147 srcName+=codeArr[2]; 151 srcName+=codeArr[2];
  152 + }else{
  153 + srcName+=codeArr[0];
148 } 154 }
149 -  
150 }else{ 155 }else{
151 srcName+=codeArr[0]; 156 srcName+=codeArr[0];
152 } 157 }
@@ -64,6 +64,7 @@ import monitorJimuButton from "./monitor/monitorJimuButton"; @@ -64,6 +64,7 @@ import monitorJimuButton from "./monitor/monitorJimuButton";
64 import monitorAjButton from "./monitor/monitorAjButton"; 64 import monitorAjButton from "./monitor/monitorAjButton";
65 import monitorCustomScatterWeight from "./monitor/monitorCustomScatterWeight.vue"; 65 import monitorCustomScatterWeight from "./monitor/monitorCustomScatterWeight.vue";
66 import monitorSelectOption from "./monitor/selectOption.vue"; 66 import monitorSelectOption from "./monitor/selectOption.vue";
  67 +import monitorBusCard from "./monitor/busCard.vue";
67 68
68 import customComponentTree from "./monitor/page/customComponentTree"; 69 import customComponentTree from "./monitor/page/customComponentTree";
69 import customComponentTable from "./monitor/page/customComponentTable"; 70 import customComponentTable from "./monitor/page/customComponentTable";
@@ -123,7 +124,8 @@ export default { @@ -123,7 +124,8 @@ export default {
123 monitorCustomScatterWeight, 124 monitorCustomScatterWeight,
124 monitorSelectOption, 125 monitorSelectOption,
125 customComponentTree, 126 customComponentTree,
126 - customComponentTable 127 + customComponentTable,
  128 + monitorBusCard
127 }, 129 },
128 model: { 130 model: {
129 prop: "value", 131 prop: "value",
@@ -77,6 +77,7 @@ import monitorCustomScatterWeight from "./monitor/monitorCustomScatterWeight"; @@ -77,6 +77,7 @@ import monitorCustomScatterWeight from "./monitor/monitorCustomScatterWeight";
77 import monitorSelectOption from "./monitor/selectOption.vue"; 77 import monitorSelectOption from "./monitor/selectOption.vue";
78 import customComponentTree from "./monitor/page/customComponentTree"; 78 import customComponentTree from "./monitor/page/customComponentTree";
79 import customComponentTable from "./monitor/page/customComponentTable"; 79 import customComponentTable from "./monitor/page/customComponentTable";
  80 +import monitorBusCard from "./monitor/busCard.vue";
80 81
81 export default { 82 export default {
82 name: "Widget", 83 name: "Widget",
@@ -133,7 +134,8 @@ export default { @@ -133,7 +134,8 @@ export default {
133 monitorCustomScatterWeight, 134 monitorCustomScatterWeight,
134 monitorSelectOption, 135 monitorSelectOption,
135 customComponentTree, 136 customComponentTree,
136 - customComponentTable 137 + customComponentTable,
  138 + monitorBusCard
137 }, 139 },
138 model: { 140 model: {
139 prop: "value", 141 prop: "value",