monitor_v3 / anji-plus-report · Commits

Go to a project

Authored by 鲁尚清
Commit 7851bddcaf1c2289f95287edff85055511d85956 1 parent abe46412

新增背景边框组件，基本信息组件，详细表格组件(一部分)

Inline Side-by-side
Showing 14 changed files with 1333 additions and 15 deletions
  1 +/*
  2 +* 健康度情况json
  3 +* author lsq
  4 +* 2022/01/13
  5 +* */
  6 +export const monitorBasicInformation = {
  7 + code: 'monitor-basic-information',
  8 + type: 'html',
  9 + label: '基本信息',
  10 + icon: 'iconbiaoge',
  11 + options: {
  12 + setup: [
  13 + {
  14 + type: 'el-input-text',
  15 + label: '图层名称',
  16 + name: 'layerName',
  17 + required: false,
  18 + placeholder: '',
  19 + value: '基本信息',
  20 + },
  21 + {
  22 + type: 'el-input-text',
  23 + label: '标题名称',
  24 + name: 'titleName',
  25 + required: false,
  26 + placeholder: '',
  27 + value: '基本信息',
  28 + },
  29 + /*{
  30 + type: 'custom-upload',
  31 + label: '标题图片地址',
  32 + name: 'imageAdress',
  33 + required: false,
  34 + placeholder: '',
  35 + value: require("../../../../../../../assets/images/healthStatus/title-asset.png"),
  36 + },*/
  37 + {
  38 + type: 'el-input-number',
  39 + label: '显示数据数',
  40 + name: 'dataNum',
  41 + required: false,
  42 + placeholder: '',
  43 + value: '6'
  44 + },
  45 +
  46 + /*{
  47 + type: 'el-switch',
  48 + label: '显示资源名称',
  49 + name: 'isName',
  50 + required: false,
  51 + placeholder: '',
  52 + value: true
  53 + },*/
  54 +
  55 + {
  56 + type: 'custom-upload',
  57 + label: '背景图片',
  58 + name: 'imageAdressBg',
  59 + required: false,
  60 + placeholder: '',
  61 + value: '',
  62 + },
  63 + {
  64 + type: 'el-select',
  65 + label: '标题位置',
  66 + name: 'textAlign',
  67 + required: false,
  68 + placeholder: '',
  69 + selectOptions: [
  70 + {code: 'center', name: '居中'},
  71 + {code: 'left', name: '左对齐'},
  72 + {code: 'right', name: '右对齐'},
  73 + ],
  74 + value: 'left'
  75 + },
  76 + {
  77 + type: 'el-input-number',
  78 + label: '字体大小',
  79 + name: 'fontSize',
  80 + required: false,
  81 + placeholder: '',
  82 + value: '14'
  83 + }
  84 + ],
  85 + data: [
  86 + {
  87 + type: 'el-radio-group',
  88 + label: '数据类型',
  89 + name: 'dataType',
  90 + require: false,
  91 + placeholder: '',
  92 + selectValue: true,
  93 + selectOptions: [
  94 + {
  95 + code: 'staticData',
  96 + name: '静态数据',
  97 + },
  98 + {
  99 + code: 'dynamicData',
  100 + name: '动态数据',
  101 + },
  102 + ],
  103 + value: 'staticData',
  104 + },
  105 + {
  106 + type: 'el-input-number',
  107 + label: '刷新时间(毫秒)',
  108 + name: 'refreshTime',
  109 + relactiveDom: 'dataType',
  110 + relactiveDomValue: 'dynamicData',
  111 + value: 30000
  112 + },
  113 + {
  114 + type: 'el-button',
  115 + label: '静态数据',
  116 + name: 'staticData',
  117 + required: false,
  118 + placeholder: '',
  119 + relactiveDom: 'dataType',
  120 + relactiveDomValue: 'staticData',
  121 + value: [
  122 + {
  123 + name:'监控连接状态',
  124 + value:'连接成功',
  125 + code:'link'
  126 + },
  127 + {
  128 + name:'最近采集时间',
  129 + value:'2022-01-17 09:10:11',
  130 + code:'time'
  131 + },
  132 + {
  133 + name:'主机名',
  134 + value:'iZk5e05caqfuum4vs2jbm0Z',
  135 + code:'hostName'
  136 + },
  137 + {
  138 + name:'操作系统',
  139 + value:'CentOS Linux release 7.6.1810 (',
  140 + code:'OS'
  141 + },
  142 + {
  143 + name:'运行时长',
  144 + value:'905days',
  145 + code:'days'
  146 + },
  147 + {
  148 + name:'密码过期剩余时间',
  149 + value:'从不过期',
  150 + code:'time_remaining'
  151 + },
  152 + {
  153 + name:'cpu数量',
  154 + value:'4个',
  155 + code:'cpu_num'
  156 + },
  157 + {
  158 + name:'频率',
  159 + value:'2394MHZ',
  160 + code:'rate'
  161 + }
  162 + ],
  163 + },
  164 + {
  165 + type: 'dycustComponents',
  166 + label: '',
  167 + name: 'dynamicData',
  168 + required: false,
  169 + placeholder: '',
  170 + relactiveDom: 'dataType',
  171 + relactiveDomValue: 'dynamicData',
  172 + chartType: 'widget-table',
  173 + dictKey: 'TEXT_PROPERTIES', //表格的暂不起作用
  174 + value: '',
  175 + },
  176 + ],
  177 + position: [
  178 + {
  179 + type: 'el-input-number',
  180 + label: '左边距',
  181 + name: 'left',
  182 + required: false,
  183 + placeholder: '',
  184 + value: 0,
  185 + },
  186 + {
  187 + type: 'el-input-number',
  188 + label: '上边距',
  189 + name: 'top',
  190 + required: false,
  191 + placeholder: '',
  192 + value: 0,
  193 + },
  194 + {
  195 + type: 'el-input-number',
  196 + label: '宽度',
  197 + name: 'width',
  198 + required: false,
  199 + placeholder: '该容器在1920px大屏中的宽度',
  200 + value: 416,
  201 + },
  202 + {
  203 + type: 'el-input-number',
  204 + label: '高度',
  205 + name: 'height',
  206 + required: false,
  207 + placeholder: '该容器在1080px大屏中的高度',
  208 + value: 220,
  209 + },
  210 + ]
  211 + }
  212 +}
  1 +/*
  2 +* 健康度情况json
  3 +* author lsq
  4 +* 2022/01/13
  5 +* */
  6 +export const monitorBgBorder = {
  7 + code: 'monitor-bg-border',
  8 + type: 'html',
  9 + label: '背景',
  10 + icon: 'iconbiaoge',
  11 + options: {
  12 + setup: [
  13 + {
  14 + type: 'el-input-text',
  15 + label: '图层名称',
  16 + name: 'layerName',
  17 + required: false,
  18 + placeholder: '',
  19 + value: '背景',
  20 + },
  21 + {
  22 + type: 'el-switch',
  23 + label: '加边框',
  24 + name: 'isBorder',
  25 + required: false,
  26 + placeholder: '',
  27 + value: true
  28 + },
  29 + {
  30 + type: 'el-switch',
  31 + label: '加描边',
  32 + name: 'isShadow',
  33 + required: false,
  34 + placeholder: '',
  35 + value: true
  36 + },
  37 + {
  38 + type: 'vue-color',
  39 + label: '边框颜色',
  40 + name: 'borderColor',
  41 + required: false,
  42 + placeholder: '',
  43 + value: '#dddddd',
  44 + },
  45 + {
  46 + type: 'vue-color',
  47 + label: '背景颜色',
  48 + name: 'bgColor',
  49 + required: false,
  50 + placeholder: '',
  51 + value: '#f4f5fa',
  52 + },
  53 + {
  54 + type: 'custom-upload',
  55 + label: '背景图片',
  56 + name: 'imageAdress',
  57 + required: false,
  58 + placeholder: '',
  59 + value: '',
  60 + },
  61 +
  62 + ],
  63 + position: [
  64 + {
  65 + type: 'el-input-number',
  66 + label: '左边距',
  67 + name: 'left',
  68 + required: false,
  69 + placeholder: '',
  70 + value: 0,
  71 + },
  72 + {
  73 + type: 'el-input-number',
  74 + label: '上边距',
  75 + name: 'top',
  76 + required: false,
  77 + placeholder: '',
  78 + value: 0,
  79 + },
  80 + {
  81 + type: 'el-input-number',
  82 + label: '宽度',
  83 + name: 'width',
  84 + required: false,
  85 + placeholder: '该容器在1920px大屏中的宽度',
  86 + value: 700,
  87 + },
  88 + {
  89 + type: 'el-input-number',
  90 + label: '高度',
  91 + name: 'height',
  92 + required: false,
  93 + placeholder: '该容器在1080px大屏中的高度',
  94 + value: 400,
  95 + },
  96 + ]
  97 + }
  98 +}
  1 +/*
  2 + * @Descripttion: 表格json
  3 + * @version:
  4 + * @Author: qianlishi
  5 + * @Date: 2021-08-29 07:16:10
  6 + * @LastEditors: qianlishi
  7 + * @LastEditTime: 2021-09-28 14:19:54
  8 + */
  9 +export const monitorDetailTable = {
  10 + code: 'monitor-detail-table',
  11 + type: 'html',
  12 + label: '详情表格',
  13 + icon: 'iconbiaoge',
  14 + options: {
  15 + setup: [
  16 + {
  17 + type: 'el-input-text',
  18 + label: '图层名称',
  19 + name: 'layerName',
  20 + required: false,
  21 + placeholder: '',
  22 + value: '表格',
  23 + },
  24 + {
  25 + type: 'el-select',
  26 + label: '字体位置',
  27 + name: 'textAlign',
  28 + required: false,
  29 + placeholder: '',
  30 + selectOptions: [
  31 + {code: 'center', name: '居中'},
  32 + {code: 'left', name: '左对齐'},
  33 + {code: 'right', name: '右对齐'},
  34 + ],
  35 + value: 'center'
  36 + },
  37 + {
  38 + type: 'el-input-number',
  39 + label: '字体大小',
  40 + name: 'fontSize',
  41 + required: false,
  42 + placeholder: '',
  43 + value: '16'
  44 + },
  45 + {
  46 + type: 'el-input-number',
  47 + label: '显示行数',
  48 + name: 'vis',
  49 + required: false,
  50 + placeholder: '',
  51 + value: '5'
  52 + },
  53 + {
  54 + type: 'el-input-number',
  55 + label: '行高',
  56 + name: 'rowHeight',
  57 + required: false,
  58 + placeholder: '',
  59 + value: '50'
  60 + },
  61 + {
  62 + type: 'el-switch',
  63 + label: '开启滚动',
  64 + name: 'isRoll',
  65 + required: false,
  66 + placeholder: '',
  67 + value: false
  68 + },
  69 + {
  70 + type: 'el-select',
  71 + label: '动画效果',
  72 + name: 'effect',
  73 + required: false,
  74 + placeholder: '',
  75 + selectOptions: [
  76 + {code: 'top', name: '上滚动'},
  77 + {code: 'topLoop', name: '上循环滚动'},
  78 + ],
  79 + value: 'topLoop'
  80 + },
  81 + {
  82 + type: 'el-input-number',
  83 + label: '滚动间隔(毫秒)',
  84 + name: 'interTime',
  85 + required: false,
  86 + placeholder: '',
  87 + value: 2500
  88 + },
  89 + {
  90 + type: 'el-input-number',
  91 + label: '动效时间(毫秒)',
  92 + name: 'delayTime',
  93 + required: false,
  94 + placeholder: '',
  95 + value: 500
  96 + },
  97 + {
  98 + type: 'el-input-number',
  99 + label: '滚动个数',
  100 + name: 'scroll',
  101 + required: false,
  102 + placeholder: '',
  103 + value: 1
  104 + },
  105 + {
  106 + type: 'el-switch',
  107 + label: '边框线',
  108 + name: 'isLine',
  109 + required: false,
  110 + placeholder: '',
  111 + value: false
  112 + },
  113 + {
  114 + type: 'el-input-number',
  115 + label: '边框宽度',
  116 + name: 'borderWidth',
  117 + required: false,
  118 + placeholder: '',
  119 + value: 1
  120 + },
  121 + {
  122 + type: 'vue-color',
  123 + label: '边框颜色',
  124 + name: 'borderColor',
  125 + required: false,
  126 + placeholder: '',
  127 + value: '#fff'
  128 + },
  129 + [
  130 + {
  131 + name: '表头设置',
  132 + list: [
  133 + {
  134 + type: 'el-switch',
  135 + label: '表头显隐',
  136 + name: 'isHeader',
  137 + required: false,
  138 + placeholder: '',
  139 + value: true,
  140 + },
  141 + {
  142 + type: 'vue-color',
  143 + label: '表头颜色',
  144 + name: 'headColor',
  145 + require: false,
  146 + placeholder: '',
  147 + value: 'rgb(30,159,255)',
  148 + },
  149 + {
  150 + type: 'vue-color',
  151 + label: '表头背景',
  152 + name: 'headBackColor',
  153 + require: false,
  154 + placeholder: '',
  155 + value: 'rgb(235,245,249)',
  156 + },
  157 + ],
  158 + },
  159 + {
  160 + name: '表体设置',
  161 + list: [
  162 + {
  163 + type: 'vue-color',
  164 + label: '文字颜色',
  165 + name: 'bodyColor',
  166 + required: false,
  167 + placeholder: '',
  168 + value: '#333333',
  169 + },
  170 + {
  171 + type: 'vue-color',
  172 + label: '表格背景色',
  173 + name: 'tableBgColor',
  174 + require: false,
  175 + placeholder: '',
  176 + value: '',
  177 + },
  178 + {
  179 + type: 'vue-color',
  180 + label: '奇行颜色',
  181 + name: 'oldColor',
  182 + require: false,
  183 + placeholder: '',
  184 + value: '#ffffff',
  185 + },
  186 + {
  187 + type: 'vue-color',
  188 + label: '偶行颜色',
  189 + name: 'eventColor',
  190 + required: false,
  191 + placeholder: '',
  192 + value: '#f2f2f2'
  193 + }
  194 + ],
  195 + },
  196 + ],
  197 + {
  198 + type: 'dynamic-add-table',
  199 + label: '',
  200 + name: 'dynamicAddTable',
  201 + required: false,
  202 + placeholder: '',
  203 + value: [
  204 + {name: '日期', key: 'date', width: '50%'},
  205 + {name: '姓名', key: 'name', width: '50%'},
  206 + {name: '地址', key: 'address', width: '200%',
  207 + }]
  208 + }
  209 + ],
  210 + data: [
  211 + {
  212 + type: 'el-radio-group',
  213 + label: '数据类型',
  214 + name: 'dataType',
  215 + require: false,
  216 + placeholder: '',
  217 + selectValue: true,
  218 + selectOptions: [
  219 + {
  220 + code: 'staticData',
  221 + name: '静态数据',
  222 + },
  223 + {
  224 + code: 'dynamicData',
  225 + name: '动态数据',
  226 + },
  227 + ],
  228 + value: 'staticData',
  229 + },
  230 + {
  231 + type: 'el-input-number',
  232 + label: '刷新时间(毫秒)',
  233 + name: 'refreshTime',
  234 + relactiveDom: 'dataType',
  235 + relactiveDomValue: 'dynamicData',
  236 + value: 30000
  237 + },
  238 + {
  239 + type: 'el-button',
  240 + label: '静态数据',
  241 + name: 'staticData',
  242 + required: false,
  243 + placeholder: '',
  244 + relactiveDom: 'dataType',
  245 + relactiveDomValue: 'staticData',
  246 + value: [
  247 + {date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄0001'},
  248 + {date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄0002'},
  249 + {date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄0003'},
  250 + {date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄0004'},
  251 + {date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄0005'},
  252 + {date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄0006'},
  253 + {date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄0007'},
  254 + ],
  255 + },
  256 + {
  257 + type: 'dycustComponents',
  258 + label: '',
  259 + name: 'dynamicData',
  260 + required: false,
  261 + placeholder: '',
  262 + relactiveDom: 'dataType',
  263 + relactiveDomValue: 'dynamicData',
  264 + chartType: 'widget-table',
  265 + dictKey: 'TEXT_PROPERTIES', //表格的暂不起作用
  266 + value: '',
  267 + },
  268 + ],
  269 + position: [
  270 + {
  271 + type: 'el-input-number',
  272 + label: '左边距',
  273 + name: 'left',
  274 + required: false,
  275 + placeholder: '',
  276 + value: 0,
  277 + },
  278 + {
  279 + type: 'el-input-number',
  280 + label: '上边距',
  281 + name: 'top',
  282 + required: false,
  283 + placeholder: '',
  284 + value: 0,
  285 + },
  286 + {
  287 + type: 'el-input-number',
  288 + label: '宽度',
  289 + name: 'width',
  290 + required: false,
  291 + placeholder: '该容器在1920px大屏中的宽度',
  292 + value: 600,
  293 + },
  294 + {
  295 + type: 'el-input-number',
  296 + label: '高度',
  297 + name: 'height',
  298 + required: false,
  299 + placeholder: '该容器在1080px大屏中的高度',
  300 + value: 300,
  301 + },
  302 + ]
  303 + }
  304 +}
@@ -91,6 +91,14 @@ export const monitorHealthStatus = { @@ -91,6 +91,14 @@ export const monitorHealthStatus = {
91 value: require("../../../../../../../assets/images/healthStatus/state_03.png"), 91 value: require("../../../../../../../assets/images/healthStatus/state_03.png"),
92 }, 92 },
93 { 93 {
  94 + type: 'custom-upload',
  95 + label: '背景图片',
  96 + name: 'imageAdressBg',
  97 + required: false,
  98 + placeholder: '',
  99 + value: '',
  100 + },
  101 + {
94 type: 'el-select', 102 type: 'el-select',
95 label: '标题位置', 103 label: '标题位置',
96 name: 'textAlign', 104 name: 'textAlign',
@@ -90,6 +90,14 @@ export const monitorResourceStatus = { @@ -90,6 +90,14 @@ export const monitorResourceStatus = {
90 value: require("../../../../../../../assets/images/healthStatus/state_03.png"), 90 value: require("../../../../../../../assets/images/healthStatus/state_03.png"),
91 }, 91 },
92 { 92 {
  93 + type: 'custom-upload',
  94 + label: '背景图片',
  95 + name: 'imageAdressBg',
  96 + required: false,
  97 + placeholder: '',
  98 + value: '',
  99 + },
  100 + {
93 type: 'el-select', 101 type: 'el-select',
94 label: '标题位置', 102 label: '标题位置',
95 name: 'textAlign', 103 name: 'textAlign',
@@ -111,6 +119,14 @@ export const monitorResourceStatus = { @@ -111,6 +119,14 @@ export const monitorResourceStatus = {
111 value: '14' 119 value: '14'
112 }, 120 },
113 { 121 {
  122 + type: 'vue-color',
  123 + label: '文字颜色',
  124 + name: 'textColor',
  125 + required: false,
  126 + placeholder: '',
  127 + value: '#666',
  128 + },
  129 + {
114 type: 'el-input-number', 130 type: 'el-input-number',
115 label: '图片宽度', 131 label: '图片宽度',
116 name: 'imgWidth', 132 name: 'imgWidth',
@@ -36,6 +36,9 @@ import {widgetDecoratePie} from "./echartsConfigJson/widget-decorate-pie"; @@ -36,6 +36,9 @@ import {widgetDecoratePie} from "./echartsConfigJson/widget-decorate-pie";
36 36
37 import {monitorHealthStatus} from "./echartsConfigJson/monitorConfigJson/monitor-health-status"; 37 import {monitorHealthStatus} from "./echartsConfigJson/monitorConfigJson/monitor-health-status";
38 import {monitorResourceStatus} from "./echartsConfigJson/monitorConfigJson/monitor-resource-status"; 38 import {monitorResourceStatus} from "./echartsConfigJson/monitorConfigJson/monitor-resource-status";
  39 +import {monitorBasicInformation} from "./echartsConfigJson/monitorConfigJson/monitor-basic-information";
  40 +import {monitorDetailTable} from "./echartsConfigJson/monitorConfigJson/monitor-detail-table";
  41 +import {monitorBgBorder} from "./echartsConfigJson/monitorConfigJson/monitor-bg-border";
39 42
40 export const widgetTool = [ 43 export const widgetTool = [
41 // type=html类型的组件 44 // type=html类型的组件
@@ -66,5 +69,8 @@ export const widgetTool = [ @@ -66,5 +69,8 @@ export const widgetTool = [
66 widgetLineCompare, 69 widgetLineCompare,
67 widgetDecoratePie, 70 widgetDecoratePie,
68 monitorHealthStatus, 71 monitorHealthStatus,
69 - monitorResourceStatus 72 + monitorResourceStatus,
  73 + monitorBasicInformation,
  74 + monitorDetailTable,
  75 + monitorBgBorder
70 ] 76 ]
  1 +<template>
  2 + <div class="basicInformation-container" :style="styleObj" @click="closePressingDialog">
  3 + <div class="title-div" :style="styleColor">
  4 + <img v-if="!imgStyle.titleName" :src="imgStyle.imageAdress" :style="imgStyle" alt="">
  5 + <div v-if="imgStyle.titleName" class="title-name">
  6 + {{imgStyle.titleName}}
  7 + <el-tooltip v-model="visible">
  8 + <template #content>
  9 + <div class="basic-ul-all" style="width:720px;" @click="pressingVisibleTip=false">
  10 + <el-row class="basic-item" :style="fontStyle" v-for="item in informationDataAll">
  11 + <el-col class="basic-border basic-item-title basic-flex" :span="10">
  12 + {{ item.name }}
  13 + <span class="basic-img" v-if="item.code=='link'">
  14 + <img src="@/assets/images/healthStatus/icon_row_menu.png" alt="" @click.stop="pressingVisibleTip=true">
  15 + <span class="basic-pressing-times" @click="pressingDialog" v-if="pressingVisibleTip">
  16 + <i class="el-icon-link"></i>压制次数
  17 + </span>
  18 + </span>
  19 + </el-col>
  20 + <el-col class="basic-border basic-item-content" :span="14">{{ item.value }}</el-col>
  21 + </el-row>
  22 + </div>
  23 + </template>
  24 + <i class="el-icon-info" @mouseenter="visible = true" @mouseleave="visible = false" />
  25 + </el-tooltip>
  26 +
  27 + </div>
  28 + </div>
  29 + <div class="basic-ul">
  30 + <el-row class="basic-item" :style="fontStyle" v-for="item in informationData">
  31 + <el-col class="basic-border basic-item-title basic-flex" :span="10">
  32 + {{ item.name }}
  33 + <span class="basic-img" v-if="item.code=='link'">
  34 + <img src="@/assets/images/healthStatus/icon_row_menu.png" alt="" @click.stop="pressingTimes">
  35 + <span class="basic-pressing-times" @click="pressingDialog" v-if="pressingVisible">
  36 + <i class="el-icon-link"></i>压制次数
  37 + </span>
  38 + </span>
  39 + </el-col>
  40 + <el-col class="basic-border basic-item-content" :span="14">{{ item.value }}</el-col>
  41 + </el-row>
  42 + </div>
  43 +
  44 + </div>
  45 +</template>
  46 +
  47 +<script>
  48 +
  49 +export default {
  50 + name: "basicInformation",
  51 + data() {
  52 + return {
  53 + options: {},
  54 + optionsSetUp: {},
  55 + optionsPosition:{},
  56 + optionsData:{},
  57 + informationData:[],
  58 + informationDataAll:[],
  59 + pressingVisible:false,
  60 + pressingVisibleTip:false,
  61 + visible:false,
  62 + }
  63 + },
  64 + components: {},
  65 + props: {
  66 + value: Object,
  67 + ispreview: Boolean
  68 + },
  69 + computed: {
  70 + transStyle() {
  71 + return this.objToOne(this.options);
  72 + },
  73 + styleObj() {
  74 + const allStyle = this.optionsPosition;
  75 + return {
  76 + position: this.ispreview ? "absolute" : "static",
  77 + width: allStyle.width + "px",
  78 + height: allStyle.height + "px",
  79 + left: allStyle.left + "px",
  80 + top: allStyle.top + "px",
  81 + 'background-image':'url(' + this.transStyle.imageAdressBg + ')',
  82 + // 'background-position':'center',
  83 + 'background-repeat':'no-repeat',
  84 + 'background-size':'contain'
  85 + };
  86 + },
  87 +
  88 + styleColor() {
  89 + return {
  90 + "text-align": this.transStyle.textAlign,
  91 +
  92 + };
  93 + },
  94 + fontStyle(){
  95 + return{
  96 + "font-size": this.transStyle.fontSize + "px",
  97 + }
  98 + },
  99 + imgStyle() {
  100 +
  101 + return {
  102 + imageAdress: this.transStyle.imageAdress?this.transStyle.imageAdress:require("../../../../../../assets/images/healthStatus/title-asset.png"),
  103 + titleName:this.transStyle.titleName,
  104 + isName:this.transStyle.isName,
  105 + dataNum:this.transStyle.dataNum?this.transStyle.dataNum:'6'
  106 + };
  107 + }
  108 +
  109 + },
  110 + watch: {
  111 + value: {
  112 + handler(val) {
  113 + this.options = val;
  114 + this.optionsSetUp = val.setup;
  115 + this.optionsPosition = val.position;
  116 + this.optionsData=val.data;
  117 + this.handlerData();
  118 +
  119 + },
  120 + deep: true
  121 + }
  122 + },
  123 + mounted() {
  124 + // this.initImageUrl();
  125 + this.options=this.value;
  126 + this.optionsSetUp = this.value.setup;
  127 + this.optionsPosition = this.value.position;
  128 + this.optionsData = this.value.data;
  129 + this.handlerData();
  130 +
  131 + },
  132 + methods: {
  133 +
  134 + handlerData() {
  135 + const resData = this.optionsData;
  136 + console.log("resdata",resData)
  137 + resData.dataType == "staticData"
  138 + ? this.handlerStaticData(resData.staticData)
  139 + : this.handlerDynamicData(resData.dynamicData, resData.refreshTime);
  140 + },
  141 + handlerStaticData(data) {
  142 + this.informationData = data;
  143 + this.informationDataAll = data;
  144 + if(this.imgStyle.dataNum){
  145 + this.informationData=this.informationData.slice(0,this.imgStyle.dataNum);
  146 + }
  147 + },
  148 + handlerDynamicData(data, refreshTime) {
  149 + if (!data) return;
  150 + /* if (this.ispreview) {
  151 + this.getEchartData(data);
  152 + this.flagInter = setInterval(() => {
  153 + this.getEchartData(data);
  154 + }, refreshTime);
  155 + } else {
  156 + this.getEchartData(data);
  157 + }*/
  158 + },
  159 + pressingDialog(){
  160 + },
  161 + pressingTimes(){
  162 + this.pressingVisible=true;
  163 + },
  164 + closePressingDialog(){
  165 + this.pressingVisible=false;
  166 + this.pressingVisibleTip=false;
  167 + }
  168 +
  169 +
  170 + },
  171 +}
  172 +</script>
  173 +
  174 +<style scoped lang="scss">
  175 +.basicInformation-container{
  176 + /*border:1px solid #f6f6f6;
  177 + border-bottom: none;*/
  178 +}
  179 +.basic-flex{
  180 + display: flex;
  181 + align-items: center;
  182 +}
  183 +.title-div{
  184 + text-align: left;
  185 + padding:8px 10px;
  186 +}
  187 +.title-name{
  188 + color:rgb(30,159,255);
  189 + font-size: 16px;
  190 + /*padding:10px;*/
  191 + font-weight: bold;
  192 +}
  193 +.basic-ul{
  194 + .basic-item:nth-child(even) {
  195 + background-color: #f8f8f8;
  196 + }
  197 + .basic-item{
  198 + border-top:1px solid #f6f6f6;
  199 + }
  200 + .basic-item:last-child{
  201 + border-bottom: 1px solid #f6f6f6;
  202 + }
  203 +
  204 +}
  205 +.basic-ul-all{
  206 + .basic-item:nth-child(even) {
  207 + background-color: #262323 !important;
  208 + }
  209 +}
  210 +.basic-item{
  211 + text-align: left;
  212 + font-size: 14px;
  213 + /* border-top:1px solid #f6f6f6;*/
  214 +}
  215 +
  216 +.basic-border{
  217 + padding:7px 10px;
  218 + border-left:1px solid rgba(151, 151, 151, 0.13);
  219 +}
  220 +.basic-border:first-child {
  221 + border-left: 0;
  222 +}
  223 +.basic-img{
  224 + width: 16px;
  225 + height: 16px;
  226 + display: inline-block;
  227 + /*display: none;*/
  228 + cursor: pointer;
  229 + img{
  230 + width:100%;
  231 + }
  232 +}
  233 +
  234 +/*.basic-item-title:hover{
  235 + .basic-img{
  236 + display: inline-block;
  237 + }
  238 +}*/
  239 +.basic-ul-all{
  240 + .basic-item-content{
  241 + text-align: center;
  242 + }
  243 +}
  244 +.basic-pressing-times{
  245 + position: absolute;
  246 + border:1px solid #d2d2d2;
  247 + padding: 16px 20px;
  248 + z-index: 1;
  249 + background: #ffffff;
  250 + color:#666666;
  251 + &:hover{
  252 + background: #0d82e9;
  253 + color:#f6f6f6;
  254 + }
  255 +}
  256 +</style>
  1 +<template>
  2 + <div class="basicInformation-container" :style="styleObj">
  3 +
  4 +
  5 + </div>
  6 +</template>
  7 +
  8 +<script>
  9 +
  10 +export default {
  11 + name: "basicInformation",
  12 + data() {
  13 + return {
  14 + options: {},
  15 + optionsSetUp: {},
  16 + optionsPosition:{},
  17 + optionsData:{},
  18 + }
  19 + },
  20 + components: {},
  21 + props: {
  22 + value: Object,
  23 + ispreview: Boolean
  24 + },
  25 + computed: {
  26 + transStyle() {
  27 + return this.objToOne(this.options);
  28 + },
  29 + styleObj() {
  30 + const allStyle = this.optionsPosition;
  31 + return {
  32 + position: this.ispreview ? "absolute" : "static",
  33 + width: allStyle.width + "px",
  34 + height: allStyle.height + "px",
  35 + left: allStyle.left + "px",
  36 + top: allStyle.top + "px",
  37 + 'background':this.transStyle.bgColor,
  38 + 'border':this.transStyle.isBorder?'0.5px solid '+this.transStyle.borderColor:'none',
  39 + 'box-shadow':this.transStyle.isShadow?'0px 3px 12px '+this.transStyle.borderColor:'none',
  40 + 'background-image':'url(' + this.transStyle.imageAdress + ')',
  41 + // 'background-position':'center',
  42 + 'background-repeat':'no-repeat',
  43 + 'background-size':'contain'
  44 + };
  45 + },
  46 +
  47 +
  48 +
  49 + },
  50 + watch: {
  51 + value: {
  52 + handler(val) {
  53 + this.options = val;
  54 + this.optionsSetUp = val.setup;
  55 + this.optionsPosition = val.position;
  56 + // this.handlerData();
  57 +
  58 + },
  59 + deep: true
  60 + }
  61 + },
  62 + mounted() {
  63 + // this.initImageUrl();
  64 + this.options=this.value;
  65 + this.optionsSetUp = this.value.setup;
  66 + this.optionsPosition = this.value.position;
  67 + // this.handlerData();
  68 +
  69 + },
  70 + methods: {
  71 +
  72 + handlerData() {
  73 + const resData = this.optionsData;
  74 + resData.dataType == "staticData"
  75 + ? this.handlerStaticData(resData.staticData)
  76 + : this.handlerDynamicData(resData.dynamicData, resData.refreshTime);
  77 + },
  78 + handlerStaticData(data) {
  79 +
  80 + },
  81 + handlerDynamicData(data, refreshTime) {
  82 + if (!data) return;
  83 + /* if (this.ispreview) {
  84 + this.getEchartData(data);
  85 + this.flagInter = setInterval(() => {
  86 + this.getEchartData(data);
  87 + }, refreshTime);
  88 + } else {
  89 + this.getEchartData(data);
  90 + }*/
  91 + }
  92 +
  93 +
  94 + },
  95 +}
  96 +</script>
  97 +
  98 +<style scoped lang="scss">
  99 +
  100 +</style>
  1 +<template>
  2 + <div :style="styleObj">
  3 + <superslide v-if="hackReset" :options="options" class="txtScroll-top">
  4 + <!--表头-->
  5 + <div class="title">
  6 + <div
  7 + v-for="(item, index) in header"
  8 + :style="[headerTableStlye,tableFiledWidth(index),tableRowHeight()]"
  9 + :key="index"
  10 + >
  11 + {{ item.name }}
  12 + </div>
  13 + </div>
  14 + <!--数据-->
  15 + <div class="bd">
  16 + <ul class="infoList">
  17 + <li v-for="(item, index) in list" :key="index" :style="tableRowHeight()" @mouseenter="isHover=true" @mouseleave="isHover=false" >
  18 + <div class="infoList-flex"
  19 + v-for="(itemChild, idx) in header"
  20 + :key="idx"
  21 + :style="[bodyTableStyle, bodyTable(index),tableFiledWidth(idx),tableRowHeight()]"
  22 + >
  23 + {{ item[itemChild.key] }}
  24 + <div class="basic-img">
  25 + <img src="@/assets/images/healthStatus/icon_row_menu.png" alt="" @click.stop="pressingTimes">
  26 + <div class="info-ul" v-if="pressingVisible">
  27 + <div class="basic-pressing-times" @click="pressingDialog" v-for="i in 4">
  28 + <i class="el-icon-link"></i>压制次数
  29 + </div>
  30 + </div>
  31 +
  32 + </div>
  33 + </div>
  34 + </li>
  35 + </ul>
  36 + </div>
  37 + </superslide>
  38 + </div>
  39 +</template>
  40 +<script>
  41 +import vue from "vue";
  42 +import VueSuperSlide from "vue-superslide";
  43 +
  44 +vue.use(VueSuperSlide);
  45 +export default {
  46 + props: {
  47 + value: Object,
  48 + ispreview: Boolean
  49 + },
  50 + data() {
  51 + return {
  52 + hackReset: true,
  53 + options: {
  54 + titCell: ".hd ul",
  55 + mainCell: ".bd ul",
  56 + effect: "topLoop",
  57 + autoPage: true,
  58 + //effect: "top",
  59 + autoPlay: true,
  60 + vis: 5,
  61 + rowHeight:'50px'
  62 + },
  63 + header: [],
  64 + list: [],
  65 + optionsSetUp: {},
  66 + optionsPosition: {},
  67 + optionsData: {},
  68 + pressingVisible:false,
  69 + isHover:false,
  70 + };
  71 + },
  72 + computed: {
  73 + styleObj() {
  74 + console.log(this.optionsSetUp);
  75 + const allStyle = this.optionsPosition;
  76 + return {
  77 + position: this.ispreview ? "absolute" : "static",
  78 + width: allStyle.width + "px",
  79 + height: allStyle.height + "px",
  80 + left: allStyle.left + "px",
  81 + top: allStyle.top + "px",
  82 + background: this.optionsSetUp.tableBgColor
  83 + };
  84 + },
  85 + headerTableStlye() {
  86 + const headStyle = this.optionsSetUp;
  87 + return {
  88 + "text-align": headStyle.textAlign,
  89 + "font-size": headStyle.fontSize + "px",
  90 + "border-style": headStyle.isLine ? "solid" : "none",
  91 + "border-width": headStyle.borderWidth + "px",
  92 + "border-color": headStyle.borderColor,
  93 + display: headStyle.isHeader ? "block" : "none",
  94 + color: headStyle.headColor,
  95 + "background-color": headStyle.headBackColor
  96 + };
  97 + },
  98 + bodyTableStyle() {
  99 + const bodyStyle = this.optionsSetUp;
  100 + return {
  101 + "text-align": bodyStyle.textAlign,
  102 + "font-size": bodyStyle.fontSize + "px",
  103 + "border-style": bodyStyle.isLine ? "solid" : "none",
  104 + "border-width": bodyStyle.borderWidth + "px",
  105 + "border-color": bodyStyle.borderColor,
  106 + color: bodyStyle.bodyColor,
  107 + "background-color": bodyStyle.tableBgColor
  108 + };
  109 + }
  110 + },
  111 + watch: {
  112 + value: {
  113 + handler(val) {
  114 + this.optionsSetUp = val.setup;
  115 + this.optionsPosition = val.position;
  116 + this.optionsData = val.data;
  117 + this.initData();
  118 + },
  119 + deep: true
  120 + }
  121 + },
  122 + mounted() {
  123 + this.optionsSetUp = this.value.setup;
  124 + this.optionsPosition = this.value.position;
  125 + this.optionsData = this.value.data;
  126 + this.initData();
  127 + },
  128 + methods: {
  129 + initData() {
  130 + this.handlerRollFn();
  131 + this.handlerHead();
  132 + this.handlerData();
  133 + this.visConfig();
  134 + },
  135 + visConfig(){
  136 + this.options.vis = this.optionsSetUp.vis;
  137 + },
  138 + handlerRollFn() {
  139 + const options = this.options;
  140 + const rollSet = this.optionsSetUp;
  141 + options.autoPlay = rollSet.isRoll;
  142 + options.effect = rollSet.effect;
  143 + options.interTime = rollSet.interTime;
  144 + options.delayTime = rollSet.delayTime;
  145 + options.scroll = rollSet.scroll;
  146 + this.options = options;
  147 + this.hackResetFun();
  148 + },
  149 + handlerHead() {
  150 + const head = this.optionsSetUp.dynamicAddTable;
  151 + this.header = head;
  152 + },
  153 + handlerData() {
  154 + const tableData = this.optionsData;
  155 + tableData.dataType == "staticData"
  156 + ? this.handlerStaticData(tableData.staticData)
  157 + : this.handlerDynamicData(tableData.dynamicData, tableData.refreshTime);
  158 + },
  159 + handlerStaticData(data) {
  160 + this.list = data;
  161 + },
  162 + handlerDynamicData(data, refreshTime) {
  163 + if (!data) return;
  164 + if (this.ispreview) {
  165 + this.getEchartData(data);
  166 + this.flagInter = setInterval(() => {
  167 + this.getEchartData(data);
  168 + }, refreshTime);
  169 + } else {
  170 + this.getEchartData(data);
  171 + }
  172 + },
  173 + getEchartData(val) {
  174 + const data = this.queryEchartsData(val);
  175 + data.then(res => {
  176 + this.list = res;
  177 + this.hackResetFun();
  178 + });
  179 + },
  180 + // vue hack 之强制刷新组件
  181 + hackResetFun() {
  182 + this.hackReset = false;
  183 + this.$nextTick(() => {
  184 + this.hackReset = true;
  185 + });
  186 + },
  187 + // 计算 奇偶背景色
  188 + bodyTable(index) {
  189 + var styleJson = {};
  190 + if (index % 2) {
  191 + styleJson["background-color"] = this.optionsSetUp.eventColor
  192 + } else {
  193 + styleJson["background-color"] = this.optionsSetUp.oldColor
  194 + }
  195 + return styleJson;
  196 + },
  197 + tableRowHeight(){
  198 + var styleJson = {};
  199 + if(this.optionsSetUp.rowHeight){
  200 + styleJson['height'] = this.optionsSetUp.rowHeight+'px';
  201 + styleJson['line-height'] = this.optionsSetUp.rowHeight+'px';
  202 + }else{
  203 + styleJson['height'] =this.options.rowHeight
  204 + styleJson['line-height'] = this.optionsSetUp.rowHeight+'px';
  205 + }
  206 + return styleJson;
  207 + },
  208 + tableFiledWidth(index){
  209 + var styleJson = {};
  210 + if(this.optionsSetUp.dynamicAddTable[index].width ){
  211 + styleJson["width"] = this.optionsSetUp.dynamicAddTable[index].width
  212 + }
  213 + return styleJson
  214 + },
  215 + //表格下探
  216 + pressingDialog(){
  217 + },
  218 + pressingTimes(){
  219 + this.pressingVisible=true;
  220 + },
  221 + }
  222 +};
  223 +</script>
  224 +<style lang="scss" scoped>
  225 +/* 本例子css */
  226 +.txtScroll-top {
  227 + overflow: hidden;
  228 + position: relative;
  229 +}
  230 +
  231 +.title {
  232 + display: flex;
  233 + flex-direction: row;
  234 + width: 100%;
  235 +}
  236 +
  237 +.title > div {
  238 + height: 50px;
  239 + line-height: 50px;
  240 + width: 100%;
  241 +}
  242 +
  243 +.txtScroll-top .bd {
  244 + width: 100%;
  245 +}
  246 +
  247 +.txtScroll-top .infoList li {
  248 + height: 50px;
  249 + line-height: 50px;
  250 + display: flex;
  251 + flex-direction: row;
  252 +}
  253 +
  254 +.txtScroll-top .infoList li > div {
  255 + width: 100%;
  256 +}
  257 +
  258 +/*.txtScroll-top .infoList li:nth-child(n) {
  259 + background: rgb(0, 59, 81);
  260 +}
  261 +
  262 +.txtScroll-top .infoList li:nth-child(2n) {
  263 + background: rgb(10, 39, 50);
  264 +}*/
  265 +.infoList-flex{
  266 + display: flex;
  267 + align-items: center;
  268 + justify-content: center;
  269 +}
  270 +.basic-img{
  271 + width: 16px;
  272 + height: 16px;
  273 + display: flex;
  274 + cursor: pointer;
  275 + img{
  276 + width:100%;
  277 + }
  278 +}
  279 +.info-ul{
  280 + position: absolute;
  281 + border:1px solid #d2d2d2;
  282 + padding: 16px 20px;
  283 + z-index: 1;
  284 + background: #ffffff;
  285 + color:#666666;
  286 + .basic-pressing-times{
  287 + &:hover{
  288 + background: #0d82e9;
  289 + color:#f6f6f6;
  290 + }
  291 + }
  292 +}
  293 +</style>
@@ -5,7 +5,7 @@ @@ -5,7 +5,7 @@
5 <img v-if="!imgStyle.titleName" :src="imgStyle.imageAdress" :style="imgStyle" alt=""> 5 <img v-if="!imgStyle.titleName" :src="imgStyle.imageAdress" :style="imgStyle" alt="">
6 <div v-if="imgStyle.titleName" class="title-name">{{imgStyle.titleName}}</div> 6 <div v-if="imgStyle.titleName" class="title-name">{{imgStyle.titleName}}</div>
7 </div> 7 </div>
8 - <el-row> 8 + <el-row class="padding-top-20">
9 <el-col class="flex-around" :span="imgStyle.spanNum" v-for="item in healthDataComputed" :key="item.id"> 9 <el-col class="flex-around" :span="imgStyle.spanNum" v-for="item in healthDataComputed" :key="item.id">
10 <div class="health-service"> 10 <div class="health-service">
11 <span v-if="imgStyle.isName" class="health-name">{{item.name}}</span> 11 <span v-if="imgStyle.isName" class="health-name">{{item.name}}</span>
@@ -99,7 +99,10 @@ export default { @@ -99,7 +99,10 @@ export default {
99 height: allStyle.height + "px", 99 height: allStyle.height + "px",
100 left: allStyle.left + "px", 100 left: allStyle.left + "px",
101 top: allStyle.top + "px", 101 top: allStyle.top + "px",
102 - // background:this.transStyle.BgColor 102 + 'background-image':'url(' + this.transStyle.imageAdressBg + ')',
  103 + // 'background-position':'center',
  104 + 'background-repeat':'no-repeat',
  105 + 'background-size':'contain'
103 }; 106 };
104 }, 107 },
105 108
@@ -291,9 +294,12 @@ export default { @@ -291,9 +294,12 @@ export default {
291 .title-name{ 294 .title-name{
292 color:rgb(30,159,255); 295 color:rgb(30,159,255);
293 font-size: 16px; 296 font-size: 16px;
294 - padding:10px; 297 + /*padding:10px;*/
295 font-weight: bold; 298 font-weight: bold;
296 } 299 }
  300 +.padding-top-20{
  301 + padding-top: 20px;
  302 +}
297 .health-service{ 303 .health-service{
298 position: relative; 304 position: relative;
299 } 305 }
@@ -3,13 +3,13 @@ @@ -3,13 +3,13 @@
3 <!-- <div class="healthStatus-container">--> 3 <!-- <div class="healthStatus-container">-->
4 <div class="title-div" :style="styleColor"> 4 <div class="title-div" :style="styleColor">
5 <img v-if="!imgStyle.titleName" :src="imgStyle.imageAdress" :style="imgStyle" alt=""> 5 <img v-if="!imgStyle.titleName" :src="imgStyle.imageAdress" :style="imgStyle" alt="">
6 - <div v-if="imgStyle.titleName" class="title-name">{{imgStyle.titleName}}</div> 6 + <div v-if="imgStyle.titleName" class="title-name">{{imgStyle.titleName}}</div>
7 </div> 7 </div>
8 - <el-row> 8 + <el-row class="padding-top-30">
9 <!-- <el-col class="flex-around" :span="imgStyle.spanNum" v-for="item in healthDataComputed" :key="item.id">--> 9 <!-- <el-col class="flex-around" :span="imgStyle.spanNum" v-for="item in healthDataComputed" :key="item.id">-->
10 <el-col class="flex-around" :span="24" > 10 <el-col class="flex-around" :span="24" >
11 <div class="health-service"> 11 <div class="health-service">
12 - <span v-if="imgStyle.isName" :style="lineHeightStyle" class="health-name">{{healthNumData.state}}</span> 12 + <span v-if="imgStyle.isName" :style="healthNameStyle" class="health-name">{{healthNumData.state}}</span>
13 <img :style="imgStyleContent" width="100%" :src="healthStatusUrl" alt=""> 13 <img :style="imgStyleContent" width="100%" :src="healthStatusUrl" alt="">
14 </div> 14 </div>
15 <div class="health-num-content" :style="fontStyle" > 15 <div class="health-num-content" :style="fontStyle" >
@@ -41,7 +41,7 @@ import { @@ -41,7 +41,7 @@ import {
41 getHealth 41 getHealth
42 } from "@/api/platform"; 42 } from "@/api/platform";
43 export default { 43 export default {
44 - name: "healthStatus", 44 + name: "resourceStatus",
45 data() { 45 data() {
46 return { 46 return {
47 options: {}, 47 options: {},
@@ -79,10 +79,12 @@ export default { @@ -79,10 +79,12 @@ export default {
79 height: allStyle.height + "px", 79 height: allStyle.height + "px",
80 left: allStyle.left + "px", 80 left: allStyle.left + "px",
81 top: allStyle.top + "px", 81 top: allStyle.top + "px",
82 - // background:this.transStyle.BgColor 82 + 'background-image':'url(' + this.transStyle.imageAdressBg + ')',
  83 + // 'background-position':'center',
  84 + 'background-repeat':'no-repeat',
  85 + 'background-size':'contain'
83 }; 86 };
84 }, 87 },
85 -  
86 styleColor() { 88 styleColor() {
87 return { 89 return {
88 "text-align": this.transStyle.textAlign, 90 "text-align": this.transStyle.textAlign,
@@ -93,11 +95,13 @@ export default { @@ -93,11 +95,13 @@ export default {
93 return{ 95 return{
94 "font-size": this.transStyle.fontSize + "px", 96 "font-size": this.transStyle.fontSize + "px",
95 'height':this.transStyle.imgWidth+'px', 97 'height':this.transStyle.imgWidth+'px',
  98 + color:this.transStyle.textColor
96 } 99 }
97 }, 100 },
98 - lineHeightStyle(){ 101 + healthNameStyle(){
99 return{ 102 return{
100 'line-height':this.transStyle.imgWidth+'px', 103 'line-height':this.transStyle.imgWidth+'px',
  104 + color:this.transStyle.textColor
101 } 105 }
102 }, 106 },
103 imgStyleContent(){ 107 imgStyleContent(){
@@ -233,9 +237,12 @@ export default { @@ -233,9 +237,12 @@ export default {
233 .title-name{ 237 .title-name{
234 color:rgb(30,159,255); 238 color:rgb(30,159,255);
235 font-size: 16px; 239 font-size: 16px;
236 - padding:10px; 240 + /*padding:10px;*/
237 font-weight: bold; 241 font-weight: bold;
238 } 242 }
  243 +.padding-top-30{
  244 + padding-top: 30px;
  245 +}
239 .health-service{ 246 .health-service{
240 position: relative; 247 position: relative;
241 } 248 }
@@ -249,13 +256,13 @@ export default { @@ -249,13 +256,13 @@ export default {
249 } 256 }
250 .health-num-content{ 257 .health-num-content{
251 font-size: 14px; 258 font-size: 14px;
  259 + color:#666666;
252 justify-content: space-around; 260 justify-content: space-around;
253 display: flex; 261 display: flex;
254 flex-flow: column; 262 flex-flow: column;
255 } 263 }
256 .health-num-title{ 264 .health-num-title{
257 margin-left: 30px; 265 margin-left: 30px;
258 - color:#666666;  
259 } 266 }
260 .health-num-item:nth-child(2){ 267 .health-num-item:nth-child(2){
261 /*margin: 60px 0;*/ 268 /*margin: 60px 0;*/
@@ -39,6 +39,9 @@ import widgetDecoratePieChart from "./decorate/widgetDecoratePieChart"; @@ -39,6 +39,9 @@ import widgetDecoratePieChart from "./decorate/widgetDecoratePieChart";
39 39
40 import monitorHealthStatus from "./monitor/healthStatus"; 40 import monitorHealthStatus from "./monitor/healthStatus";
41 import monitorResourceStatus from "./monitor/resourceStatus"; 41 import monitorResourceStatus from "./monitor/resourceStatus";
  42 +import monitorBasicInformation from "./monitor/basicInformation";
  43 +import monitorDetailTable from "./monitor/detailTable";
  44 +import monitorBgBorder from "./monitor/bgBorder";
42 45
43 export default { 46 export default {
44 name: "WidgetTemp", 47 name: "WidgetTemp",
@@ -70,7 +73,10 @@ export default { @@ -70,7 +73,10 @@ export default {
70 widgetDecoratePieChart, 73 widgetDecoratePieChart,
71 74
72 monitorHealthStatus, 75 monitorHealthStatus,
73 - monitorResourceStatus 76 + monitorResourceStatus,
  77 + monitorBasicInformation,
  78 + monitorDetailTable,
  79 + monitorBgBorder
74 }, 80 },
75 model: { 81 model: {
76 prop: "value", 82 prop: "value",
@@ -50,6 +50,9 @@ import widgetDecoratePieChart from "./decorate/widgetDecoratePieChart"; @@ -50,6 +50,9 @@ import widgetDecoratePieChart from "./decorate/widgetDecoratePieChart";
50 50
51 import monitorHealthStatus from "./monitor/healthStatus"; 51 import monitorHealthStatus from "./monitor/healthStatus";
52 import monitorResourceStatus from "./monitor/resourceStatus"; 52 import monitorResourceStatus from "./monitor/resourceStatus";
  53 +import monitorBasicInformation from "./monitor/basicInformation";
  54 +import monitorDetailTable from "./monitor/detailTable";
  55 +import monitorBgBorder from "./monitor/bgBorder";
53 56
54 57
55 export default { 58 export default {
@@ -81,7 +84,10 @@ export default { @@ -81,7 +84,10 @@ export default {
81 widgetLineCompareChart, 84 widgetLineCompareChart,
82 widgetDecoratePieChart, 85 widgetDecoratePieChart,
83 monitorHealthStatus, 86 monitorHealthStatus,
84 - monitorResourceStatus 87 + monitorResourceStatus,
  88 + monitorBasicInformation,
  89 + monitorDetailTable,
  90 + monitorBgBorder
85 }, 91 },
86 model: { 92 model: {
87 prop: "value", 93 prop: "value",