monitor_v3 / anji-plus-report · Commits

Go to a project

Authored by 王涛
Commit 0e3fb11ccf4019b428099595524b142e6dea58fe 2 parents fe095f69 edaa71fc master-mj-joke ... master-500-dev master-500-dev-lushangqing master-500-dev-lzc master-mj

Merge branch 'master-500-dev-lushangqing' into 'master-500-dev' 

新增业务卡片组件



See merge request !79
Inline Side-by-side
Showing 5 changed files with 771 additions and 3 deletions
  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 +}
@@ -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 export const {widgetTool,monitor} = { 66 export const {widgetTool,monitor} = {
66 widgetTool : [ 67 widgetTool : [
@@ -144,6 +145,8 @@ export const {widgetTool,monitor} = { @@ -144,6 +145,8 @@ export const {widgetTool,monitor} = {
144 // 散点图 145 // 散点图
145 monitorCustomScatterWeight, 146 monitorCustomScatterWeight,
146 //下拉列表 147 //下拉列表
147 - monitorSelectOption 148 + monitorSelectOption,
  149 + //业务卡片
  150 + monitorBusCard
148 ] 151 ]
149 } 152 }
  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>
@@ -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 export default { 69 export default {
69 name: "WidgetTemp", 70 name: "WidgetTemp",
@@ -119,7 +120,8 @@ export default { @@ -119,7 +120,8 @@ export default {
119 monitorJimuButton, 120 monitorJimuButton,
120 monitorAjButton, 121 monitorAjButton,
121 monitorCustomScatterWeight, 122 monitorCustomScatterWeight,
122 - monitorSelectOption 123 + monitorSelectOption,
  124 + monitorBusCard
123 }, 125 },
124 model: { 126 model: {
125 prop: "value", 127 prop: "value",
@@ -75,6 +75,7 @@ import monitorJimuButton from "./monitor/monitorJimuButton"; @@ -75,6 +75,7 @@ import monitorJimuButton from "./monitor/monitorJimuButton";
75 import monitorAjButton from "./monitor/monitorAjButton"; 75 import monitorAjButton from "./monitor/monitorAjButton";
76 import monitorCustomScatterWeight from "./monitor/monitorCustomScatterWeight"; 76 import monitorCustomScatterWeight from "./monitor/monitorCustomScatterWeight";
77 import monitorSelectOption from "./monitor/selectOption.vue"; 77 import monitorSelectOption from "./monitor/selectOption.vue";
  78 +import monitorBusCard from "./monitor/busCard.vue";
78 79
79 export default { 80 export default {
80 name: "Widget", 81 name: "Widget",
@@ -129,7 +130,8 @@ export default { @@ -129,7 +130,8 @@ export default {
129 monitorJimuButton, 130 monitorJimuButton,
130 monitorAjButton, 131 monitorAjButton,
131 monitorCustomScatterWeight, 132 monitorCustomScatterWeight,
132 - monitorSelectOption 133 + monitorSelectOption,
  134 + monitorBusCard
133 }, 135 },
134 model: { 136 model: {
135 prop: "value", 137 prop: "value",