monitor_v3 / anji-plus-report · Commits

Go to a project

Authored by wangtao
Commit 2b51f3709cc89bb2e1a94ef5322d5cc99d532a37 1 parent 9704e0ba

部门视图组件开发

Inline Side-by-side
Showing 7 changed files with 750 additions and 157 deletions
@@ -9,7 +9,8 @@ export default { @@ -9,7 +9,8 @@ export default {
9 optionsData: {}, 9 optionsData: {},
10 id: (new Date()).getTime(), 10 id: (new Date()).getTime(),
11 customState: {}, 11 customState: {},
12 - customStateTime: 0 12 + // value 历史变更内容，页面加载发送多次重复提交信息
  13 + valueChangeArr:[]
13 } 14 }
14 }, 15 },
15 props: { 16 props: {
@@ -23,17 +24,23 @@ export default { @@ -23,17 +24,23 @@ export default {
23 */ 24 */
24 value: { 25 value: {
25 handler(val) { 26 handler(val) {
26 - this.options = val;  
27 - this.optionsSetUp = val.setup;  
28 - this.optionsPosition = val.position;  
29 - this.reloadPage(); 27 + let that = this;
  28 + if(that.valueChangeArr.indexOf(val) != -1){
  29 + return;
  30 + }
  31 + that.options = val;
  32 + that.optionsSetUp = val.setup;
  33 + that.optionsPosition = val.position;
  34 + that.valueChangeArr.push(val);
  35 + that.reloadPage();
30 }, 36 },
31 deep: true 37 deep: true
32 }, 38 },
  39 +
33 /** 40 /**
34 * 监听组件状态数据 41 * 监听组件状态数据
35 */ 42 */
36 - getUpdateEvent: { 43 + getLastUpdateEvent: {
37 handler(val) { 44 handler(val) {
38 if(!val){ 45 if(!val){
39 return; 46 return;
@@ -47,8 +54,6 @@ export default { @@ -47,8 +54,6 @@ export default {
47 that.getCustomEventData(key,obj); 54 that.getCustomEventData(key,obj);
48 } 55 }
49 } 56 }
50 -  
51 -  
52 }, 57 },
53 deep: true 58 deep: true
54 } 59 }
@@ -58,12 +63,17 @@ export default { @@ -58,12 +63,17 @@ export default {
58 that.options = that.value; 63 that.options = that.value;
59 that.optionsSetUp = that.value.setup; 64 that.optionsSetUp = that.value.setup;
60 that.optionsPosition = that.value.position; 65 that.optionsPosition = that.value.position;
  66 + // 挂在完 执行页面初始化函数
61 that.pageInit(); 67 that.pageInit();
62 }, 68 },
63 computed: { 69 computed: {
64 ...mapGetters(['getCustomState','getLastUpdateEventId']), 70 ...mapGetters(['getCustomState','getLastUpdateEventId']),
65 71
66 - getUpdateEvent(){ 72 + /**
  73 + * 最后更新的事件id
  74 + * @returns {number}
  75 + */
  76 + getLastUpdateEvent(){
67 return this.getLastUpdateEventId 77 return this.getLastUpdateEventId
68 }, 78 },
69 // 计算样式 79 // 计算样式
@@ -141,20 +151,21 @@ export default { @@ -141,20 +151,21 @@ export default {
141 * 页面初始化 151 * 页面初始化
142 */ 152 */
143 pageInit() { 153 pageInit() {
144 - console.log("页面初始化，如需自定义，需要定义函数：pageInit") 154 + console.log("页面初始化，如需自定义，需要定义函数：pageInit()")
145 }, 155 },
146 156
147 /** 157 /**
148 * 页面重新加载 158 * 页面重新加载
149 */ 159 */
150 reloadPage() { 160 reloadPage() {
151 - console.log("页面重新加载函数，如需自定义，需要定义函数：reloadPage") 161 + console.log("页面重新加载函数，如需自定义，需要定义函数：reloadPage()")
152 }, 162 },
153 163
154 /** 164 /**
155 * 订阅事件 165 * 订阅事件
156 */ 166 */
157 subEvent(){ 167 subEvent(){
  168 + console.log("页面订阅事件id集合，如需自定义，需要定义函数：subEvent()")
158 return []; 169 return [];
159 }, 170 },
160 171
@@ -164,8 +175,8 @@ export default { @@ -164,8 +175,8 @@ export default {
164 * @param data 数据 175 * @param data 数据
165 */ 176 */
166 getCustomEventData(eventId, data) { 177 getCustomEventData(eventId, data) {
167 - console.log("组件状态数据,如需自定义，需要定义函数：getCustomEventData(事件Id，事件数据)")  
168 - console.log(`事件ID:${eventId},事件数据：`,data); 178 + console.log("组件状态订阅事件数据,如需自定义，需要定义函数：getCustomEventData(事件Id，事件数据)")
  179 + console.log(`事件ID:${eventId},事件数据：`,JSON.stringify(data));
169 }, 180 },
170 181
171 /** 182 /**
@@ -177,7 +188,13 @@ export default { @@ -177,7 +188,13 @@ export default {
177 data: obj 188 data: obj
178 } 189 }
179 this.$store.dispatch('customEventAction', data); 190 this.$store.dispatch('customEventAction', data);
180 - //this.customStateTime = this.$store.state.common[evebtId] 191 + },
  192 +
  193 + /**
  194 + * 字符串转换函数
  195 + */
  196 + toFunc(funStr){
  197 + return new Function(`return ${funStr}`)();
181 }, 198 },
182 199
183 /** 200 /**
@@ -185,9 +202,9 @@ export default { @@ -185,9 +202,9 @@ export default {
185 * @param funStr js函数字符串 202 * @param funStr js函数字符串
186 * @returns {*} 203 * @returns {*}
187 */ 204 */
188 - runJSFunctByResultBoolean(funStr, params) { 205 + runJSFunc(funStr, params) {
189 try { 206 try {
190 - var dom = new Function(`return ${funStr}`)(); 207 + var dom = this.toFunc(funStr);
191 return dom && dom(params); 208 return dom && dom(params);
192 } catch (e) { 209 } catch (e) {
193 console.error(e) 210 console.error(e)
@@ -258,25 +275,35 @@ export default { @@ -258,25 +275,35 @@ export default {
258 }, 275 },
259 /** 276 /**
260 * 请求接口数据 277 * 请求接口数据
  278 + * @param params 扩展参数
  279 + * @param dynamicDataKey 动态数据源，一般是：dynamicData
  280 + * @param staticDataType 静态数据源类型，一般是：staticData
261 * @returns {Promise<unknown>} 281 * @returns {Promise<unknown>}
262 */ 282 */
263 - handlerData(params) { 283 + handlerData(params,dynamicDataKey,staticDataType) {
264 let that = this; 284 let that = this;
265 const optionsData = this.value.data; 285 const optionsData = this.value.data;
  286 + if(!staticDataType){
  287 + staticDataType = 'staticData';
  288 + }
  289 + if(!dynamicDataKey){
  290 + dynamicDataKey = 'dynamicData';
  291 + }
  292 +
266 // 返回Promise对象 293 // 返回Promise对象
267 return new Promise(async (resolve) => { 294 return new Promise(async (resolve) => {
268 - if (optionsData.dataType == 'staticData') { 295 + if (optionsData.dataType == staticDataType) {
269 // 返回静态数据 296 // 返回静态数据
270 let staticData = { 297 let staticData = {
271 code: 0, 298 code: 0,
272 success: true, 299 success: true,
273 - data: optionsData.staticData 300 + data: optionsData[staticDataType]
274 } 301 }
275 resolve(staticData); 302 resolve(staticData);
276 } else { 303 } else {
277 // 获取动态数据 start 304 // 获取动态数据 start
278 - if (optionsData.dynamicData) {  
279 - let contextData = optionsData.dynamicData.contextData; 305 + if (optionsData[dynamicDataKey]) {
  306 + let contextData = optionsData[dynamicDataKey].contextData;
280 // 合并url参数 307 // 合并url参数
281 let paramsObj = that.getUrlParam(); 308 let paramsObj = that.getUrlParam();
282 if (paramsObj) { 309 if (paramsObj) {
@@ -289,12 +316,15 @@ export default { @@ -289,12 +316,15 @@ export default {
289 if (params) { 316 if (params) {
290 for (let key of Object.keys(params)) { 317 for (let key of Object.keys(params)) {
291 let paramVal = params[key]; 318 let paramVal = params[key];
  319 + if(typeof paramVal == 'object'){
  320 + paramVal = JSON.stringify(paramVal);
  321 + }
292 contextData[key] = paramVal; 322 contextData[key] = paramVal;
293 } 323 }
294 } 324 }
295 // 请求接口 325 // 请求接口
296 that.queryEchartsData( 326 that.queryEchartsData(
297 - optionsData.dynamicData, 327 + optionsData[dynamicDataKey],
298 optionsData.refreshTime, 328 optionsData.refreshTime,
299 that.optionsSetup, 329 that.optionsSetup,
300 optionsData.isRefresh 330 optionsData.isRefresh
@@ -13,6 +13,7 @@ @@ -13,6 +13,7 @@
13 <!-- 关联的数据表示--> 13 <!-- 关联的数据表示-->
14 <el-table-column prop="key" label="key值" width="70"/> 14 <el-table-column prop="key" label="key值" width="70"/>
15 <el-table-column prop="width" label="宽度" width="100"/> 15 <el-table-column prop="width" label="宽度" width="100"/>
  16 + <el-table-column prop="sort" label="排序" width="80"/>
16 <el-table-column prop="bgColor" label="表头背景色" width="100"/> 17 <el-table-column prop="bgColor" label="表头背景色" width="100"/>
17 <el-table-column prop="component" label="组件" width="100"/> 18 <el-table-column prop="component" label="组件" width="100"/>
18 <!-- 19 <!--
@@ -70,6 +71,14 @@ @@ -70,6 +71,14 @@
70 size="mini"></el-input> 71 size="mini"></el-input>
71 </el-form-item> 72 </el-form-item>
72 73
  74 + <el-form-item label="排序:">
  75 + <el-input
  76 + v-model.trim="rowFormData['sort']"
  77 + placeholder="请输入排序"
  78 + type="number"
  79 + size="mini"></el-input>
  80 + </el-form-item>
  81 +
73 <el-form-item label="背景色:"> 82 <el-form-item label="背景色:">
74 <el-input 83 <el-input
75 v-model.trim="rowFormData['bgColor']" 84 v-model.trim="rowFormData['bgColor']"
@@ -82,21 +91,15 @@ @@ -82,21 +91,15 @@
82 <el-option label="进度条" value="progress"> </el-option> 91 <el-option label="进度条" value="progress"> </el-option>
83 <el-option label="状态组件" value="status"> </el-option> 92 <el-option label="状态组件" value="status"> </el-option>
84 </el-select> 93 </el-select>
85 -<!-- <div v-if="rowFormData['component'] == 'status'">-->  
86 -<!-- 组件状态标识（与数据对比判断成功或者失败）：-->  
87 -<!-- <el-input-->  
88 -<!-- v-model.trim="rowFormData['successState']"-->  
89 -<!-- placeholder="成功的状态"-->  
90 -<!-- size="mini"></el-input>-->  
91 -<!-- </div>--> 94 +
92 </el-form-item> 95 </el-form-item>
93 <el-form-item label="下探:"> 96 <el-form-item label="下探:">
94 - <el-select v-model="rowFormData['drill']" placeholder="请输入下探类型"> 97 + <el-select multiple v-model="rowFormData['drill']" placeholder="请输入下探类型">
95 <el-option label="无" value=""> </el-option> 98 <el-option label="无" value=""> </el-option>
96 <el-option label="详情页" value="detail"> </el-option> 99 <el-option label="详情页" value="detail"> </el-option>
97 - <el-option label="拓扑" value="topo"> </el-option>  
98 - <el-option label="报表" value="jimureport"> </el-option>  
99 - <el-option label="设计页面" value="ajPage"> </el-option> 100 + <el-option label="拓扑" value="topology"> </el-option>
  101 + <el-option label="报表" value="openJimu"> </el-option>
  102 + <el-option label="设计页面" value="openAJ"> </el-option>
100 </el-select> 103 </el-select>
101 </el-form-item> 104 </el-form-item>
102 <el-form-item label="转义:"> 105 <el-form-item label="转义:">
@@ -2,7 +2,7 @@ @@ -2,7 +2,7 @@
2 * 树空间，在配置段使用 2 * 树空间，在配置段使用
3 */ 3 */
4 export const customComponentTable = { 4 export const customComponentTable = {
5 - code: 'customComponentTable', 5 + code: 'custom-component-table',
6 type: 'chart', 6 type: 'chart',
7 label: '自定义表格 v1.1', 7 label: '自定义表格 v1.1',
8 icon: 'iconshu', 8 icon: 'iconshu',
@@ -17,8 +17,55 @@ export const customComponentTable = { @@ -17,8 +17,55 @@ export const customComponentTable = {
17 placeholder: '', 17 placeholder: '',
18 value: '自定义表格 v1.1', 18 value: '自定义表格 v1.1',
19 }, 19 },
  20 + {
  21 + type: 'vue-color',
  22 + label: '背景颜色',
  23 + name: 'background',
  24 + required: false,
  25 + placeholder: '',
  26 + value: '',
  27 + cssTemplate: 'background:%s'
  28 + },
  29 + {
  30 + type: 'el-input-text',
  31 + label: '内置变量（JSON）',
  32 + name: 'sysInParams',
  33 + required: false,
  34 + placeholder: '',
  35 + value: `{
  36 + dataType:''
  37 + }`
  38 + },
20 [ 39 [
21 { 40 {
  41 + name: '视图设置',
  42 + list: [
  43 + {
  44 + type: 'el-input-text',
  45 + label: '默认视图（card/table）',
  46 + name: 'defaultViewType',
  47 + required: false,
  48 + placeholder: '',
  49 + value: `card`
  50 + },
  51 + {
  52 + type: 'el-input-text',
  53 + label: '卡片数据展示顺序（JSON）',
  54 + name: 'cardDataConfig',
  55 + required: false,
  56 + placeholder: '',
  57 + value: `{
  58 + "id": "busId",
  59 + "name": "busName",
  60 + "total": 'total',
  61 + "good": 'good',
  62 + "worse": 'worse',
  63 + "worst": 'worst'
  64 + }`
  65 + }
  66 + ]
  67 + },
  68 + {
22 name: '搜索设置', 69 name: '搜索设置',
23 list: [ 70 list: [
24 { 71 {
@@ -31,6 +78,7 @@ export const customComponentTable = { @@ -31,6 +78,7 @@ export const customComponentTable = {
31 } 78 }
32 ] 79 ]
33 }, 80 },
  81 +
34 { 82 {
35 name: '事件订阅', 83 name: '事件订阅',
36 list: [ 84 list: [
@@ -48,7 +96,9 @@ export const customComponentTable = { @@ -48,7 +96,9 @@ export const customComponentTable = {
48 name: 'customEventHandle', 96 name: 'customEventHandle',
49 required: false, 97 required: false,
50 placeholder: '', 98 placeholder: '',
51 - value: '', 99 + value: `function eventHandle(eventData,params){
  100 + // eventData:事件数据 params:内置变量
  101 + }`
52 } 102 }
53 ] 103 ]
54 }, 104 },
@@ -74,6 +124,24 @@ export const customComponentTable = { @@ -74,6 +124,24 @@ export const customComponentTable = {
74 ] 124 ]
75 }, 125 },
76 { 126 {
  127 + name: '表格设置',
  128 + list: [{
  129 + type: 'el-switch',
  130 + label: '表格边框',
  131 + name: 'tableBoder',
  132 + required: false,
  133 + placeholder: '',
  134 + value: false
  135 + }, {
  136 + type: 'el-switch',
  137 + label: '表格斑马线',
  138 + name: 'tableStripe',
  139 + required: false,
  140 + placeholder: '',
  141 + value: false
  142 + }]
  143 + },
  144 + {
77 name: '边框设置', 145 name: '边框设置',
78 list: [{ 146 list: [{
79 type: 'el-input-number', 147 type: 'el-input-number',
@@ -152,6 +220,46 @@ export const customComponentTable = { @@ -152,6 +220,46 @@ export const customComponentTable = {
152 ] 220 ]
153 }, 221 },
154 { 222 {
  223 + name: "下探设置",
  224 + list: [
  225 + {
  226 + type: 'el-input-text',
  227 + label: '报表编号',
  228 + name: 'jimuReport',
  229 + required: false,
  230 + placeholder: '',
  231 + value: ''
  232 + },
  233 + {
  234 + type: 'el-input-text',
  235 + label: '设计器页面编号',
  236 + name: 'ajReport',
  237 + required: false,
  238 + placeholder: '',
  239 + value: ''
  240 + },
  241 + {
  242 + type: 'el-input-text',
  243 + label: '参数设置（函数）',
  244 + name: 'drillFunc',
  245 + required: false,
  246 + placeholder: '',
  247 + value: `function getParams(row){
  248 + return {
  249 + type: drillType,
  250 + data: {
  251 + resId: row.resId,
  252 + kpiId: row.kpiId,
  253 + flag: row.flag,
  254 + reportCode:that.optionsSetUp.reportCode,
  255 + title:”“
  256 + }
  257 + }
  258 + }`
  259 + },
  260 + ]
  261 + },
  262 + {
155 name: "状态组件配置", 263 name: "状态组件配置",
156 list: [ 264 list: [
157 { 265 {
@@ -208,7 +316,7 @@ export const customComponentTable = { @@ -208,7 +316,7 @@ export const customComponentTable = {
208 value: '' 316 value: ''
209 }, 317 },
210 ] 318 ]
211 - } 319 + },
212 ], 320 ],
213 { 321 {
214 type: 'dynamic-custom-table', 322 type: 'dynamic-custom-table',
@@ -233,15 +341,24 @@ export const customComponentTable = { @@ -233,15 +341,24 @@ export const customComponentTable = {
233 selectOptions: [ 341 selectOptions: [
234 { 342 {
235 code: 'staticData', 343 code: 'staticData',
236 - name: '静态数据', 344 + name: '表格/卡片静态数据',
237 }, 345 },
238 { 346 {
239 code: 'dynamicData', 347 code: 'dynamicData',
240 - name: '动态数据', 348 + name: '表格/卡片动态数据',
  349 + }/*,
  350 + {
  351 + code: 'staticCardData',
  352 + name: '卡片静态数据',
241 }, 353 },
  354 + {
  355 + code: 'dynamicCardData',
  356 + name: '卡片动态数据',
  357 + },*/
242 ], 358 ],
243 value: 'staticData', 359 value: 'staticData',
244 }, 360 },
  361 + // 表格
245 { 362 {
246 type: 'el-switch', 363 type: 'el-switch',
247 label: '是否刷新', 364 label: '是否刷新',
@@ -273,6 +390,28 @@ export const customComponentTable = { @@ -273,6 +390,28 @@ export const customComponentTable = {
273 city: '雁塔区', 390 city: '雁塔区',
274 address: '金桥国际C座', 391 address: '金桥国际C座',
275 zip: 88888888 392 zip: 88888888
  393 + },
  394 + ],
  395 + },
  396 + {
  397 + type: 'el-button',
  398 + label: '静态数据',
  399 + name: 'staticCardData',
  400 + required: false,
  401 + placeholder: '',
  402 + relactiveDom: 'dataType',
  403 + relactiveDomValue: 'staticData',
  404 + value: [{
  405 + "busId": "8cef272ba60147df801d94f368a5b052",
  406 + "busName": "金税三期",
  407 + "resType": null,
  408 + "resTypeName": null,
  409 + "busParentId": "0",
  410 + "type": "bus",
  411 + "total": 506,
  412 + "good": 445,
  413 + "worse": 0,
  414 + "worst": 61
276 }], 415 }],
277 }, 416 },
278 { 417 {
@@ -287,6 +426,18 @@ export const customComponentTable = { @@ -287,6 +426,18 @@ export const customComponentTable = {
287 relactiveDomValue: 'dynamicData', 426 relactiveDomValue: 'dynamicData',
288 value: '', 427 value: '',
289 }, 428 },
  429 + {
  430 + type: 'dycustComponents',
  431 + label: '',
  432 + name: 'dynamicCardData',
  433 + required: false,
  434 + placeholder: '',
  435 + relactiveDom: 'dataType',
  436 + chartType: 'widget-table',
  437 + dictKey: 'TEXT_PROPERTIES',
  438 + relactiveDomValue: 'dynamicData',
  439 + value: '',
  440 + }
290 ], 441 ],
291 // 坐标 442 // 坐标
292 position: [ 443 position: [
@@ -148,6 +148,12 @@ export const {widgetTool,monitor} = { @@ -148,6 +148,12 @@ export const {widgetTool,monitor} = {
148 // 散点图 148 // 散点图
149 monitorCustomScatterWeight, 149 monitorCustomScatterWeight,
150 //下拉列表 150 //下拉列表
151 - monitorSelectOption 151 + monitorSelectOption,
  152 + //业务卡片
  153 + monitorBusCard,
  154 + // 自定义树
  155 + customComponentTree,
  156 + // 自定义表格
  157 + customComponentTable
152 ] 158 ]
153 } 159 }
@@ -73,21 +73,37 @@ export default { @@ -73,21 +73,37 @@ export default {
73 } 73 }
74 ], 74 ],
75 yAxis: [ 75 yAxis: [
76 - { 76 + /*{
77 data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23], 77 data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
78 scale: true, 78 scale: true,
79 axisLabel: { 79 axisLabel: {
80 - formatter: '{value} 时' 80 + formatter: '{value}'
81 }, 81 },
82 splitLine: { 82 splitLine: {
83 show: false 83 show: false
84 } 84 }
  85 + }*/
  86 + {
  87 + type:'value',
  88 + scale: true,
  89 + axisLabel: { formatter: '{value}' },
  90 + splitLine: {
  91 + show: true ,
  92 + lineStyle:{
  93 + type: 'dotted'
  94 + }
  95 + },
  96 + axisLine: {
  97 + show: true,
  98 + },
  99 + name: '内存分配率(%)'
85 } 100 }
86 ], 101 ],
87 series: [ 102 series: [
88 { 103 {
89 name: '忙时', 104 name: '忙时',
90 type: 'scatter', 105 type: 'scatter',
  106 + symbolSize: 5,
91 emphasis: { 107 emphasis: {
92 focus: 'series' 108 focus: 'series'
93 }, 109 },
@@ -101,6 +117,7 @@ export default { @@ -101,6 +117,7 @@ export default {
101 { 117 {
102 name: '闲时', 118 name: '闲时',
103 type: 'scatter', 119 type: 'scatter',
  120 + symbolSize: 5,
104 emphasis: { 121 emphasis: {
105 focus: 'series' 122 focus: 'series'
106 }, 123 },
@@ -133,19 +150,21 @@ export default { @@ -133,19 +150,21 @@ export default {
133 * 150 *
134 * */ 151 * */
135 reloadChart() { 152 reloadChart() {
136 - if (this.chartInfo) { 153 + let that = this;
  154 + if (that.chartInfo) {
137 // 重新加载数据 155 // 重新加载数据
138 - this.getChartData();  
139 - // 重新设置数据、  
140 - this.chartInfo.setOption(this.scatterWeightOptions);  
141 - // 刷新图表大小  
142 - this.chartInfo.resize(); 156 + that.getChartData(function (){
  157 + // 重新设置数据、
  158 + that.chartInfo.setOption(that.scatterWeightOptions);
  159 + // 刷新图表大小
  160 + that.chartInfo.resize();
  161 + });
143 } 162 }
144 }, 163 },
145 /** 164 /**
146 * 获取图表数据 165 * 获取图表数据
147 */ 166 */
148 - getChartData() { 167 + getChartData(callback) {
149 let that = this; 168 let that = this;
150 169
151 var startTime = that.getOffsetDate(-30) + " 00:00:00"; 170 var startTime = that.getOffsetDate(-30) + " 00:00:00";
@@ -158,52 +177,103 @@ export default { @@ -158,52 +177,103 @@ export default {
158 endTime: endTime, 177 endTime: endTime,
159 pageSize: 1000 178 pageSize: 1000
160 } 179 }
  180 +
161 that.handlerData(defaultParams).then((res) => { 181 that.handlerData(defaultParams).then((res) => {
162 - let list = res.data;  
163 - let busyArr = [];  
164 - let idleArr = [];  
165 - let xAxis = [];  
166 - if (list) {  
167 - list.map(function (v) {  
168 - let time = `${v.year}-${v.month}-${v.day} ${v.hour}:00:00`;  
169 - let arr = [time, v.hour, v.kpiName, v.valMax, v.valMin, v.valAvg];  
170 - xAxis.push(time);  
171 - if (v.isBusy) {  
172 - // 忙时点  
173 - busyArr.push(arr);  
174 - } else {  
175 - idleArr.push(arr);  
176 - }  
177 - });  
178 - that.scatterWeightOptions.xAxis[0].data = xAxis;  
179 - that.scatterWeightOptions.series[0].data = busyArr;  
180 - that.scatterWeightOptions.series[1].data = idleArr; 182 + debugger
  183 + if(res && res.success){
  184 + let list = res.data;
  185 + if (list) {
  186 + let busyArr = [];
  187 + let idleArr = [];
  188 + let xAxis = [];
  189 + let yAxis = [];
  190 + // 按照最大子排序
  191 + list.sort(function (a,b){
  192 + let d1 = new Date(`${a.year}-${a.month}-${a.day} ${a.hour}:00:00`);
  193 + let d2 = new Date(`${b.year}-${b.month}-${b.day} ${b.hour}:00:00`);
  194 + return d1.getTime() - d2.getTime()
  195 + })
  196 + list.map(function (v) {
  197 + let time = `${v.year}-${v.month}-${v.day} ${v.hour}:00:00`;
  198 + let arr = [time, v.valMax, v.kpiName, v.valMax, v.valMin, v.valAvg];
  199 + // let yVal = v.valMax;
  200 + // if(yAxis.indexOf(yVal) == -1){
  201 + // yAxis.push(yVal);
  202 + // }
  203 + xAxis.push(time);
  204 +
  205 + if (v.isBusy) {
  206 + // 忙时点
  207 + busyArr.push(arr);
  208 + } else {
  209 + idleArr.push(arr);
  210 + }
  211 + });
  212 +
  213 + // yAxis.sort(function (a,b){
  214 + // return a-b;
  215 + // })
  216 + let first = list[0]
  217 + // that.scatterWeightOptions.yAxis[0].data = yAxis;
  218 + that.scatterWeightOptions.yAxis[0].name = first.kpiName +`(${first.unit})`
  219 +
  220 + // xAxis.sort(function(a,b){
  221 + // let d1 = new Date(a);
  222 + // let d2 = new Date(b);
  223 + // return d1.getTime() - d2.getTime()
  224 + // })
  225 + that.scatterWeightOptions.xAxis[0].data = xAxis;
  226 + that.scatterWeightOptions.series[0].data = busyArr;
  227 + that.scatterWeightOptions.series[1].data = idleArr;
  228 + }
  229 + } else {
  230 + that.defaultChart();
181 } 231 }
182 - }).catch((e) => {  
183 - console.log('处理错误', e);  
184 - let date = new Date();  
185 - let year = date.getFullYear(); //获取当前年  
186 - let month = date.getMonth() + 1; //获取当前月  
187 - let day = date.getDate(); //获取当前日  
188 -  
189 - let ymd = `${year}-${month}-${day}`;  
190 - for (let i = 0; i < 24; i++) {  
191 - xAxis.push(`${ymd} ${i}:00:00`); 232 +
  233 + //console.log(JSON.stringify(that.scatterWeightOptions))
  234 + if(callback){
  235 + callback();
192 } 236 }
193 - that.scatterWeightOptions.xAxis[0].data = xAxis;  
194 - that.scatterWeightOptions.series[0].data = busyArr;  
195 - that.scatterWeightOptions.series[1].data = idleArr; 237 + }).catch((e) => {
  238 + that.defaultChart();
196 }) 239 })
197 }, 240 },
  241 + defaultChart(){
  242 + let that = this;
  243 + let busyArr = [];
  244 + let idleArr = [];
  245 + let xAxis = [];
  246 + let yAxis = [];
  247 + let date = new Date();
  248 + let year = date.getFullYear(); //获取当前年
  249 + let month = date.getMonth() + 1; //获取当前月
  250 + let day = date.getDate(); //获取当前日
  251 +
  252 + let ymd = `${year}-${month}-${day}`;
  253 + for (let i = 0; i < 24; i++) {
  254 + xAxis.push(`${ymd} ${i}:00:00`);
  255 + }
  256 + that.scatterWeightOptions.xAxis[0].data = xAxis;
  257 + that.scatterWeightOptions.series[0].data = busyArr;
  258 + that.scatterWeightOptions.series[1].data = idleArr;
  259 + },
198 initChart() { 260 initChart() {
199 let that = this; 261 let that = this;
200 - that.getChartData();  
201 - setTimeout(function () { 262 + that.defaultChart();
  263 +
  264 + setTimeout(function (){
202 var myChart = that.$echarts.init(document.getElementById(that.id)); 265 var myChart = that.$echarts.init(document.getElementById(that.id));
203 // 使用刚指定的配置项和数据显示图表。 266 // 使用刚指定的配置项和数据显示图表。
204 myChart.setOption(that.scatterWeightOptions); 267 myChart.setOption(that.scatterWeightOptions);
205 that.chartInfo = myChart; 268 that.chartInfo = myChart;
206 - }, 1000); 269 +
  270 + that.getChartData(function (){
  271 + // 重新设置数据、
  272 + that.chartInfo.setOption(that.scatterWeightOptions);
  273 + // 刷新图表大小
  274 + that.chartInfo.resize();
  275 + });
  276 + },1000)
207 277
208 } 278 }
209 } 279 }
1 <template> 1 <template>
  2 +
2 <div :style="getStyle"> 3 <div :style="getStyle">
3 - <div v-if="showSearch">  
4 - 搜索条件 4 + <!-- 卡片 -->
  5 + <div style="padding: 2px 6px" v-if="sysInParams.dataType == 'card'">
  6 + <el-empty v-if="cardData.length == 0" :image-size="300" :description="emptyText"></el-empty>
  7 + <div v-else style="display: flex;flex-wrap: wrap;">
  8 + <div class="custom-table-card" v-for="item in cardData">
  9 + <div style="display: flex" class="card-title">
  10 + <div class="card-title-name">
  11 + {{ item[cardDataConfig.name] }}
  12 + </div>
  13 + <div class="card-title-icon">
  14 + <el-tooltip
  15 + class="box-item"
  16 + effect="dark"
  17 + content="查看拓扑图"
  18 + placement="top">
  19 + <i class="el-icon-my-toop-yellow" @click="openDrillPage({type:'topology',row:item})"></i>
  20 + </el-tooltip>
  21 + </div>
  22 + </div>
  23 + <ul class="card-detail-info">
  24 + <li>
  25 + <b style="margin-left: 10px">{{ item[cardDataConfig.total] }}</b>
  26 + <p class="num-title-total">总量</p>
  27 + </li>
  28 + <li>
  29 + <div class="title num-title-good"></div>
  30 + <b style="margin-left: 10px">
  31 + {{ item[cardDataConfig.good] }}
  32 + </b>
  33 + <p class="num-title-good">优</p>
  34 + </li>
  35 + <li>
  36 + <div>
  37 + <div class="title num-title-worse"></div>
  38 + <b style="margin-left: 10px">{{ item[cardDataConfig.worse] }}</b>
  39 + </div>
  40 + <p class="num-title-worse">良</p>
  41 + </li>
  42 + <li >
  43 + <div class="title num-title-worst"></div>
  44 + <b style="margin-left: 10px">
  45 + {{ item[cardDataConfig.worst] }}
  46 + </b>
  47 + <p class="num-title-worst">中</p>
  48 + </li>
  49 +
  50 + </ul>
  51 + </div>
  52 + </div>
5 </div> 53 </div>
6 - <div style="padding: 2px 6px">  
7 - <el-table  
8 - :data="tableData"  
9 - style="width: 100%"  
10 - max-height="250">  
11 -  
12 - <el-table-column  
13 - v-for="(item,index) in tableHeader"  
14 - :key="index"  
15 - :prop="item.key"  
16 - :label="item.name"  
17 - :width="item.width"  
18 - :header-row-style="{'backage-color:':item.bgColor}">  
19 - <template slot-scope="scope">  
20 - <el-progress v-if="getComponent(scope) == 'progress' && getProgress(scope) != ''"  
21 - :text-inside="true" :stroke-width="24" :percentage="getPercentageVal(scope)" :status="getProgress(scope)"></el-progress>  
22 - <el-progress v-if="getComponent(scope) == 'progress' && getProgress(scope) == ''"  
23 - :text-inside="true" :stroke-width="24" :percentage="getPercentageVal(scope)"></el-progress>  
24 -  
25 -  
26 - <span v-if="getComponent(scope) == 'status'" style="border-radius: 5px;" :style="getStatusCss(scope)">  
27 - {{ statusText }}  
28 - </span>  
29 54
30 - <span v-if="getComponent(scope) == ''">  
31 - {{scope.row[scope.column.property]}} 55 +
  56 + <!-- 列表 -->
  57 + <div v-if="sysInParams.dataType == 'table'">
  58 + <!--el-empty v-if="tableData.length == 0" :image-size="300"></el-empty>-->
  59 + <!-- 搜索条件 -->
  60 + <div v-if="showSearch"
  61 + style="padding: 5px 10px;display: flex">
  62 + <div v-for="(item,index) in searchArr" :key="index" style="line-height: 40px;margin-right: 6px;width: 200px;">
  63 + <input v-model="formSearch[item.key]" :placeholder="'请输入'+item.name"
  64 + style="height: 38px;border: 1px solid #dcdfe6;font-size: 14px;width: 100%;padding-left: 10px"/>
  65 + </div>
  66 + <el-button type="primary" @click="onSearch">查 询</el-button>
  67 + </div>
  68 + <div style="padding: 2px 6px">
  69 + <el-table
  70 + v-if="sysInParams.dataType == 'table'"
  71 + :data="tableData"
  72 + style="width: 100%"
  73 + :border="optionsSetUp.tableBoder"
  74 + :stripe="optionsSetUp.tableStripe"
  75 + :height="optionsSetUp.height - 175"
  76 + :max-height="optionsSetUp.height - 175">
  77 + <el-table-column
  78 + v-for="(item,index) in tableHeader"
  79 + :key="index"
  80 + :prop="item.key"
  81 + :label="item.name"
  82 + :width="item.width"
  83 + :header-row-style="{'backage-color:':item.bgColor}">
  84 + <template slot-scope="scope">
  85 + <div
  86 + style="line-height: 16px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical;">
  87 + <el-progress v-if="getConfigVal(scope,'component') == 'progress' && getProgress(scope) != ''"
  88 + :text-inside="true" :stroke-width="24" :percentage="getPercentageVal(scope)"
  89 + :status="getProgress(scope)"></el-progress>
  90 + <el-progress v-if="getConfigVal(scope,'component') == 'progress' && getProgress(scope) == ''"
  91 + :text-inside="true" :stroke-width="24" :percentage="getPercentageVal(scope)"></el-progress>
  92 +
  93 +
  94 + <span v-if="getConfigVal(scope,'component') == 'status'" style="border-radius: 5px;"
  95 + :style="getStatusCss(scope)">
  96 + {{ statusText }}
32 </span> 97 </span>
33 - </template>  
34 - </el-table-column>  
35 98
36 - </el-table> 99 + <!-- 下探 -->
  100 + <div v-if="['detail','topology','openJimu','openAJ'].indexOf(getConfigVal(scope,'drill')) != -1"
  101 + style="cursor: pointer;text-decoration: underline;color: blue;" @click="openDrillPage(scope)">
  102 + {{ scope.row[scope.column.property] }}
  103 + </div>
  104 + <div v-else>
  105 + {{ scope.row[scope.column.property] }}
  106 + </div>
  107 + </div>
  108 + </template>
  109 + </el-table-column>
  110 + </el-table>
  111 + <!-- 分页 -->
  112 + <el-pagination
  113 + background
  114 + :page-sizes="[10,20,50,100, 200, 300, 400]"
  115 + :page-size="tableCurrentPageSize"
  116 + :current-page="tableCurrentPage"
  117 + :total="tableDataTotal"
  118 + @size-change="handleSizeChange"
  119 + @current-change="handleCurrentChange"
  120 + layout="total, prev, pager, next,sizes"></el-pagination>
  121 + </div>
37 </div> 122 </div>
38 </div> 123 </div>
39 </template> 124 </template>
@@ -44,48 +129,64 @@ import common from '@/mixins/common' @@ -44,48 +129,64 @@ import common from '@/mixins/common'
44 129
45 export default { 130 export default {
46 name: "customComponentTable", 131 name: "customComponentTable",
47 - mixins: [commonWeight], 132 + mixins: [commonWeight, common],
48 data() { 133 data() {
49 return { 134 return {
  135 + emptyText:'暂无数据',
50 showSearch: true, 136 showSearch: true,
51 tableHeader: [], 137 tableHeader: [],
52 tableData: [], 138 tableData: [],
  139 + // 分页设置
  140 + tableCurrentPage:1,
  141 + tableCurrentPageSize:20,
  142 + tableDataTotal:0,
  143 + // 卡片数据
  144 + cardData: [],
  145 + // 卡片数据配置
  146 + cardDataConfig: {},
53 searchArr: [], 147 searchArr: [],
  148 + formSearch: {},
54 // 状态文字 149 // 状态文字
55 statusText: '', 150 statusText: '',
56 - eventIds:[],  
57 - eventHandle:'' 151 + eventIds: [],
  152 + eventHandle: '',
  153 +
  154 + // 内置变量
  155 + sysInParams: {
  156 + dataType: '',
  157 + params: {}
  158 + },
  159 +
  160 +
58 } 161 }
59 }, 162 },
60 components: {}, 163 components: {},
61 computed: {}, 164 computed: {},
62 mounted() { 165 mounted() {
63 }, 166 },
64 - watch:{},  
65 methods: { 167 methods: {
66 - pageInit: function (params) { 168 + pageInit: function () {
67 let that = this; 169 let that = this;
68 - // 获取组件数据  
69 - that.handlerData(params).then((res) => {  
70 - if (res && res.success) {  
71 - that.tableData = res.data;  
72 - }  
73 - }) 170 +
74 // 搜索条件 171 // 搜索条件
75 that.showSearch = that.optionsSetUp.showSearch; 172 that.showSearch = that.optionsSetUp.showSearch;
76 let headerArr = []; 173 let headerArr = [];
77 // 获取配置的表头 174 // 获取配置的表头
78 let dynamicCustomTable = that.optionsSetUp.dynamicCustomTable 175 let dynamicCustomTable = that.optionsSetUp.dynamicCustomTable
79 if (!dynamicCustomTable) { 176 if (!dynamicCustomTable) {
80 - // let arr = that.config.setup.filter(function(v){if(v.name == 'dynamicCustomTable'){return v}})  
81 - // if(arr && arr.length == 1){  
82 - // headerArr = arr[0].value;  
83 - // } 177 + // 获取默认配置
84 headerArr = that.getOptionDefaultValue('dynamicCustomTable'); 178 headerArr = that.getOptionDefaultValue('dynamicCustomTable');
85 } else { 179 } else {
86 headerArr = dynamicCustomTable; 180 headerArr = dynamicCustomTable;
87 } 181 }
88 182
  183 + // 表头排序
  184 + headerArr.sort(function (a, b) {
  185 + let sortA = a.sort;
  186 + let sortB = b.sort;
  187 + return sortA - sortB
  188 + })
  189 +
89 // 获取搜索条件 190 // 获取搜索条件
90 that.searchArr = headerArr.filter(function (v) { 191 that.searchArr = headerArr.filter(function (v) {
91 if (v.isSearch && v.isSearch == true) { 192 if (v.isSearch && v.isSearch == true) {
@@ -99,13 +200,50 @@ export default { @@ -99,13 +200,50 @@ export default {
99 // 获取状态文本，默认成功状态的文本 200 // 获取状态文本，默认成功状态的文本
100 that.statusText = that.getOptionDefaultValue('statusSuccess'); 201 that.statusText = that.getOptionDefaultValue('statusSuccess');
101 202
102 - // 事件id  
103 - that.eventIds = that.optionsSetUp.eventIds; 203 + // 事件处理函数
104 that.eventHandle = that.optionsSetUp.customEventHandle; 204 that.eventHandle = that.optionsSetUp.customEventHandle;
  205 + // 展示卡片数据配置
  206 + try {
  207 + that.cardDataConfig = JSON.parse(that.optionsSetUp.cardDataConfig);
  208 + } catch (e) {
  209 + console.log('卡片数据展示顺序（JSON）',e);
  210 + }
  211 +
  212 +
  213 + // 获取默认视图
  214 + let defaultViewType = that.optionsSetUp.defaultViewType;
  215 + if (!defaultViewType) {
  216 + defaultViewType = that.getOptionDefaultValue("defaultViewType");
  217 + }
  218 + if (!defaultViewType) {
  219 + defaultViewType = 'card'
  220 + }
  221 +
  222 +
  223 + // 获取内置变量
  224 + try {
  225 + that.sysInParams = JSON.parse(that.optionsSetUp.sysInParams);
  226 + if (!that.sysInParams.dataType) {
  227 + that.sysInParams.dataType = defaultViewType;
  228 + that.sysInParams.params = {}
  229 + }
  230 + } catch (e) {
  231 + that.sysInParams = {
  232 + dataType: defaultViewType,
  233 + params : {}
  234 + }
  235 + }
  236 + // 设置查询默认分页信息
  237 + that.sysInParams.params.page = that.tableCurrentPage;
  238 + that.sysInParams.params.limit = that.tableCurrentPageSize;
105 239
106 - console.log('table init ...'); 240 + // 请求数据
  241 + that.getViewData(that.sysInParams.params);
107 }, 242 },
108 243
  244 + /**
  245 + * 重新加载页面
  246 + */
109 reloadPage() { 247 reloadPage() {
110 // 重新获取数据 248 // 重新获取数据
111 this.pageInit(); 249 this.pageInit();
@@ -114,26 +252,139 @@ export default { @@ -114,26 +252,139 @@ export default {
114 /** 252 /**
115 * 订阅事件 253 * 订阅事件
116 */ 254 */
117 - subEvent(){ 255 + subEvent() {
118 let ids = this.optionsSetUp.eventIds; 256 let ids = this.optionsSetUp.eventIds;
119 - if(!ids){ 257 + if (!ids) {
120 return []; 258 return [];
121 } 259 }
122 return ids.split(','); 260 return ids.split(',');
123 }, 261 },
  262 +
124 /** 263 /**
125 * 订阅事件数据 264 * 订阅事件数据
126 * @param eventId 265 * @param eventId
127 * @param data 266 * @param data
128 */ 267 */
129 getCustomEventData(eventId, data) { 268 getCustomEventData(eventId, data) {
130 - console.log(`table组件,事件id${eventId}，事件数据：${data}`) 269 + let that = this;
  270 + try {
  271 + for (const key in data) {
  272 + that.sysInParams.params[key] = data[key];
  273 + }
  274 + let func = that.toFunc(that.eventHandle);
  275 + let flag = '';
  276 + if (func) {
  277 + flag = func(eventId, data, that.sysInParams);
  278 + }
  279 +
  280 + // 请求接口
  281 + that.getViewData(this.sysInParams.params);
  282 + } catch (e) {
  283 + console.log('订阅事件函数执行失败', e)
  284 + }
  285 + },
  286 +
  287 + /**
  288 + * 获取视图数据
  289 + */
  290 + getViewData(params) {
  291 + let that = this;
  292 + if (that.sysInParams.dataType == '') {
  293 + return;
  294 + }
  295 + that.emptyText = "查询中...";
  296 +
  297 + if (that.sysInParams.dataType.indexOf('card') != -1) {
  298 + // 卡片组件
  299 + that.handlerData(params, 'dynamicCardData', 'staticCardData').then((res) => {
  300 + if (res && res.success ) {
  301 + let data = res.data;
  302 + if(!data){
  303 + data = [];
  304 + }
  305 + that.cardData = data;
  306 + that.emptyText= data.length == 0 ? '暂无数据' : "查询完成";
  307 + }
  308 + })
  309 + return;
  310 + }
  311 +
  312 + if (that.sysInParams.dataType.indexOf('table') != -1) {
  313 + // 获表格组件
  314 + that.handlerData(params).then((res) => {
  315 + if (res&& res.success) {
  316 + that.tableData = res.data;
  317 + that.tableDataTotal = res.count;
  318 + that.emptyText= that.tableDataTotal == 0 ? '暂无数据' : "查询完成";
  319 + }
  320 + })
  321 + }
  322 + },
  323 +
  324 + /**
  325 + * 搜索
  326 + */
  327 + onSearch() {
  328 + let form = this.formSearch;
  329 + console.log(form)
  330 + if(form){
  331 + let params = this.sysInParams.params;
  332 + for (const key in form) {
  333 + params[key] = form[key];
  334 + }
  335 + // 获取接口接口数据
  336 + this.getViewData(this.sysInParams.params);
  337 + }
  338 +
  339 + },
  340 +
  341 + /**
  342 + * 切换展示条数
  343 + * @param val
  344 + */
  345 + handleSizeChange(val) {
  346 + console.log(`每页 ${val} 条`);
  347 + this.sysInParams.params.limit = val;
  348 + this.getViewData(this.sysInParams.params);
  349 + },
  350 +
  351 + /**
  352 + * 切换第几页
  353 + * @param val
  354 + */
  355 + handleCurrentChange(val) {
  356 + console.log(`当前页: ${val}`);
  357 + this.sysInParams.params.page = val;
  358 + this.getViewData(this.sysInParams.params);
  359 + },
  360 +
  361 + /**
  362 + * 打开下探页面
  363 + */
  364 + openDrillPage(scope) {
  365 + let that = this;
  366 + let row = scope.row;
  367 + let drillType = that.getConfigVal(scope, 'drill')
  368 + let param = {
  369 + type: drillType,
  370 + data: {
  371 + resId: row.resId,
  372 + kpiId: row.kpiId,
  373 + flag: row.flag,
  374 + reportCode: that.optionsSetUp.reportCode,
  375 + title: ``
  376 + }
  377 + }
  378 + window.parent.postMessage(param, '*')
131 }, 379 },
132 380
133 - getPercentageVal(scope){ 381 + getPercentageVal(scope) {
134 let value = scope.row[scope.column.property]; 382 let value = scope.row[scope.column.property];
135 - if(this.isNumber(value)){  
136 - if(value >= 100){ 383 + if (!value) {
  384 + return 0;
  385 + }
  386 + if (this.isNumber(value)) {
  387 + if (value >= 100) {
137 value = 100; 388 value = 100;
138 } 389 }
139 return value; 390 return value;
@@ -145,12 +396,16 @@ export default { @@ -145,12 +396,16 @@ export default {
145 * 获取当前字段的组件信息 396 * 获取当前字段的组件信息
146 * @param scope 397 * @param scope
147 */ 398 */
148 - getComponent(scope){ 399 + getConfigVal(scope, filed) {
149 400
150 let key = scope.column.property; 401 let key = scope.column.property;
151 - let itemArr = this.tableHeader.filter(function (v){if(v.key == key){return v}})  
152 - if(itemArr && itemArr.length == 1){  
153 - return itemArr[0].component; 402 + let itemArr = this.tableHeader.filter(function (v) {
  403 + if (v.key == key) {
  404 + return v
  405 + }
  406 + })
  407 + if (itemArr && itemArr.length == 1) {
  408 + return itemArr[0][filed];
154 } 409 }
155 return ''; 410 return '';
156 }, 411 },
@@ -170,11 +425,11 @@ export default { @@ -170,11 +425,11 @@ export default {
170 && progressException && !that.isBlank(progressException)) { 425 && progressException && !that.isBlank(progressException)) {
171 let row = scope.row; 426 let row = scope.row;
172 427
173 - if (that.runJSFunctByResultBoolean(progressException, row)) { 428 + if (that.runJSFunc(progressException, row)) {
174 return 'exception'; 429 return 'exception';
175 - } else if (that.runJSFunctByResultBoolean(progressWarning, row)) { 430 + } else if (that.runJSFunc(progressWarning, row)) {
176 return 'warning'; 431 return 'warning';
177 - } else if (that.runJSFunctByResultBoolean(progressSuccess, row)) { 432 + } else if (that.runJSFunc(progressSuccess, row)) {
178 return 'success'; 433 return 'success';
179 } 434 }
180 } 435 }
@@ -190,7 +445,7 @@ export default { @@ -190,7 +445,7 @@ export default {
190 let css = {}; 445 let css = {};
191 let statusFunc = that.getOptionDefaultValue('statusFunc'); 446 let statusFunc = that.getOptionDefaultValue('statusFunc');
192 if (statusFunc && !that.isBlank(statusFunc)) { 447 if (statusFunc && !that.isBlank(statusFunc)) {
193 - let flag = that.runJSFunctByResultBoolean(statusFunc, scope.row) 448 + let flag = that.runJSFunc(statusFunc, scope.row)
194 if (flag != undefined) { 449 if (flag != undefined) {
195 let bgColor = ''; 450 let bgColor = '';
196 if (flag) { 451 if (flag) {
@@ -207,18 +462,92 @@ export default { @@ -207,18 +462,92 @@ export default {
207 } 462 }
208 return css; 463 return css;
209 }, 464 },
210 -  
211 -  
212 - /**  
213 - * 树节点点击  
214 - * @param data  
215 - */  
216 - handleNodeClick(data) {  
217 - console.log(data);  
218 - }  
219 } 465 }
220 } 466 }
221 </script> 467 </script>
222 468
223 <style scoped> 469 <style scoped>
  470 +.num-title-good{
  471 + background-color: #0BAC33;
  472 +}
  473 +
  474 +.num-title-worse{
  475 + background-color: #FF7E00;
  476 +}
  477 +
  478 +.num-title-worst{
  479 + background-color: #d81e06;
  480 +}
  481 +
  482 +.num-title-total{
  483 + background-color: #b0aaaa;
  484 + color: black!important;
  485 +}
  486 +
  487 +.custom-table-card {
  488 + width: 32%;
  489 + height: 160px;
  490 + border: solid 1px gray;
  491 + margin: 0.5%;
  492 + padding: 10px;
  493 + border-radius: 5px;
  494 + box-shadow: 0px -1px 10px -1px grey;
  495 +}
  496 +
  497 +.custom-table-card .card-title{
  498 + background-color: #F2F2F2;
  499 + font-size: 18px;
  500 + font-weight: 700;
  501 + text-align: center;
  502 + line-height: 45px;
  503 + color: #666;
  504 +
  505 +}
  506 +.custom-table-card .card-title-name {
  507 + width: calc(100% - 30px);
  508 + text-align: center;
  509 + font-weight: bold;
  510 +
  511 +}
  512 +
  513 +.custom-table-card .card-title-icon {
  514 + width: 30px;
  515 +}
  516 +
  517 +.card-detail-info {
  518 + display: flex;
  519 + justify-content: space-between;
  520 + margin: 5px 14px 0;
  521 + border-top: 2px solid #f6f6f6;
  522 +}
  523 +
  524 +.card-detail-info li {
  525 + display: list-item;
  526 + text-align: center;
  527 + cursor: pointer;
  528 + position: relative;
  529 + padding: 10px;
  530 + height: 90px;
  531 + width: 25%;
  532 + white-space: nowrap;
  533 + overflow: hidden;
  534 +}
  535 +
  536 +.card-detail-info li .title{
  537 + width: 16px;
  538 + height: 16px;
  539 + border-radius: 50%;
  540 + position: absolute;
  541 + left: 25px;
  542 +}
  543 +
  544 +.card-detail-info li p {
  545 + font-size: 12px;
  546 + text-align: center;
  547 + height: 31px;
  548 + line-height: 30px;
  549 + border-radius: 5px;
  550 + font-weight: bold;
  551 + color: white;
  552 +}
224 </style> 553 </style>
1 <template> 1 <template>
2 <div :style="getStyle"> 2 <div :style="getStyle">
3 <div v-if="showTreeTitle" @click="titleClick" class="custom-tree-title">{{ treeTitle }}</div> 3 <div v-if="showTreeTitle" @click="titleClick" class="custom-tree-title">{{ treeTitle }}</div>
4 - <div style="padding: 2px 6px">  
5 - <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick"></el-tree> 4 + <div style="padding: 2px 6px;overflow-y: auto;" :style="{'max-height':showTreeTitle?'calc(100% - 45px)':'99%'}">
  5 + <el-tree :data="treeData"
  6 + :props="defaultProps"
  7 + :highlight-current="true"
  8 + :default-expand-all="true"
  9 + @node-click="handleNodeClick"></el-tree>
6 </div> 10 </div>
7 </div> 11 </div>
8 </template> 12 </template>
@@ -11,7 +15,7 @@ @@ -11,7 +15,7 @@
11 import commonWeight from '@/mixins/commonWeight' 15 import commonWeight from '@/mixins/commonWeight'
12 16
13 export default { 17 export default {
14 - name: "monitorCustomTreeWeight", 18 + name: "customComponentTree",
15 mixins: [commonWeight], 19 mixins: [commonWeight],
16 data() { 20 data() {
17 return { 21 return {