monitor_v3 / anji-plus-report · Commits

Go to a project

Authored by 鲁尚清
Commit 97bddadef3a96ad1e83e4084cc9a641b72b143d3 1 parent 424129e6

百分比圆环卡片，显示圆环数据调整为根据返回数据显示数量； 

基本信息二的右侧内容列表可点击进入详情，动态数据可获取sql及接口；
基本信息二增加动态数据是否刷新选项
Inline Side-by-side
Showing 3 changed files with 66 additions and 20 deletions
@@ -157,6 +157,14 @@ export const monitorBasicInformationTwo = { @@ -157,6 +157,14 @@ export const monitorBasicInformationTwo = {
157 name:'表格标题设置', 157 name:'表格标题设置',
158 list:[ 158 list:[
159 { 159 {
  160 + type: 'el-switch',
  161 + label: '是否显示标题',
  162 + name: 'isTableTitle',
  163 + required: false,
  164 + placeholder: '',
  165 + value: true
  166 + },
  167 + {
160 type: 'el-input-number', 168 type: 'el-input-number',
161 label: '文字大小', 169 label: '文字大小',
162 name: 'tableTitleFontSize', 170 name: 'tableTitleFontSize',
@@ -368,6 +376,14 @@ export const monitorBasicInformationTwo = { @@ -368,6 +376,14 @@ export const monitorBasicInformationTwo = {
368 value: 'staticData', 376 value: 'staticData',
369 }, 377 },
370 { 378 {
  379 + type: 'el-switch',
  380 + label: '是否刷新',
  381 + name: 'isRefresh',
  382 + relactiveDom: 'dataType',
  383 + relactiveDomValue: 'dynamicData',
  384 + value: true
  385 + },
  386 + {
371 type: 'el-input-number', 387 type: 'el-input-number',
372 label: '刷新时间(毫秒)', 388 label: '刷新时间(毫秒)',
373 name: 'refreshTime', 389 name: 'refreshTime',
@@ -387,31 +403,31 @@ export const monitorBasicInformationTwo = { @@ -387,31 +403,31 @@ export const monitorBasicInformationTwo = {
387 { 403 {
388 name:'vmware-80.12.89.77', 404 name:'vmware-80.12.89.77',
389 value : 'vmware-80.12.89.77', 405 value : 'vmware-80.12.89.77',
390 - code : 'vmware', 406 + nameCode : 'vmware',
391 state: "2" 407 state: "2"
392 }, 408 },
393 { 409 {
394 name:'IP地址', 410 name:'IP地址',
395 value:'80.12.89.77', 411 value:'80.12.89.77',
396 - code:'ipAddress', 412 + nameCode:'ipAddress',
397 state: "2" 413 state: "2"
398 }, 414 },
399 { 415 {
400 name:'资源池', 416 name:'资源池',
401 value:'3', 417 value:'3',
402 - code:'resPool', 418 + nameCode:'resPool',
403 state: "2" 419 state: "2"
404 }, 420 },
405 { 421 {
406 name:'宿主机', 422 name:'宿主机',
407 value:'2', 423 value:'2',
408 - code:'host', 424 + nameCode:'host',
409 state: "2" 425 state: "2"
410 }, 426 },
411 { 427 {
412 name:'虚拟机', 428 name:'虚拟机',
413 value:'10', 429 value:'10',
414 - code:'vMachine', 430 + nameCode:'vMachine',
415 state: "2" 431 state: "2"
416 }, 432 },
417 ], 433 ],
@@ -12,7 +12,7 @@ @@ -12,7 +12,7 @@
12 </div> 12 </div>
13 <!-- <dynamicTableComponents :formData="dtInformationData"></dynamicTableComponents>--> 13 <!-- <dynamicTableComponents :formData="dtInformationData"></dynamicTableComponents>-->
14 <div class="basic-ul-right" :style="borderStyleF" > 14 <div class="basic-ul-right" :style="borderStyleF" >
15 - <div v-if="informationDataAll[0].isDisplay=='1'" > 15 + <div v-if="optionsSetUp.isTableTitle" >
16 <el-row class="backColor" :style="bodyTitleStyle"> 16 <el-row class="backColor" :style="bodyTitleStyle">
17 <el-col class="padding-10" :style="[tableTitleStyle]" aria-colspan="2"> 17 <el-col class="padding-10" :style="[tableTitleStyle]" aria-colspan="2">
18 <span v-if="!titleName" class="link-type" :style="tableTitleStyle" @click="goTrend(informationDataAll[0])">{{informationDataAll[0].name}}</span> 18 <span v-if="!titleName" class="link-type" :style="tableTitleStyle" @click="goTrend(informationDataAll[0])">{{informationDataAll[0].name}}</span>
@@ -44,14 +44,16 @@ @@ -44,14 +44,16 @@
44 </div> 44 </div>
45 <div class="basic-tbody basic-border-wrap" :style="wrapStyle"> 45 <div class="basic-tbody basic-border-wrap" :style="wrapStyle">
46 <el-row class="basic-item" :style="itemStyle" v-if="item.isDisplay=='1' && (titleName?index>=0:index>0)" v-for="(item,index) in informationData" :key="index"> 46 <el-row class="basic-item" :style="itemStyle" v-if="item.isDisplay=='1' && (titleName?index>=0:index>0)" v-for="(item,index) in informationData" :key="index">
47 - <!-- <el-col :style="headStyle" v-if="attrKey.attrKeyVal.indexOf(item.code)>0 && index>0" class="basic-border basic-item-title basic-flex backColor" :span="10">--> 47 + <!-- <el-col :style="headStyle" v-if="attrKey.attrKeyVal.indexOf(item.nameCode)>0 && index>0" class="basic-border basic-item-title basic-flex backColor" :span="10">-->
48 <el-col :style="[headStyle,borderStlye,lineHeightStyle]" v-if="(titleName?index>=0:index>0)" class="basic-border basic-item-title basic-flex backColor" :span="10"> 48 <el-col :style="[headStyle,borderStlye,lineHeightStyle]" v-if="(titleName?index>=0:index>0)" class="basic-border basic-item-title basic-flex backColor" :span="10">
49 {{ item.name }} 49 {{ item.name }}
50 </el-col> 50 </el-col>
51 - <!-- <el-col :style="bodyStyle" v-if="attrKey.attrKeyVal.indexOf(item.code)>0 && index>0 " class="basic-border basic-flex basic-item-content" :span="14"><span>{{ item.value }}</span>-->  
52 - <el-col :style="[bodyStyle,borderStlye,lineHeightStyle,borderStyleRight(index)]" v-if="(titleName?index>=0:index>0) " class="basic-border basic-flex basic-item-content" :span="14"><span>{{ item.value }}</span> 51 + <!-- <el-col :style="bodyStyle" v-if="attrKey.attrKeyVal.indexOf(item.nameCode)>0 && index>0 " class="basic-border basic-flex basic-item-content" :span="14"><span>{{ item.value }}</span>-->
  52 + <el-col :style="[bodyStyle,borderStlye,lineHeightStyle,borderStyleRight(index)]" v-if="(titleName?index>=0:index>0) " class="basic-border basic-flex basic-item-content" :span="14">
  53 + <span :class="{'link-type':item.nameCode=='resName'}" @click="goTrend({resId:resId,resType:resType})">{{ item.value }}</span>
  54 +
53 </el-col> 55 </el-col>
54 - <!-- && attrKey.attrKeyVal.includes(item.code)--> 56 + <!-- && attrKey.attrKeyVal.includes(item.nameCode)-->
55 </el-row> 57 </el-row>
56 <el-row class="basic-item 111" :style="[itemStyle,borderStlyeLast]" v-if="optionsSetUp.isTowColumn && informationData.length%2==0"> 58 <el-row class="basic-item 111" :style="[itemStyle,borderStlyeLast]" v-if="optionsSetUp.isTowColumn && informationData.length%2==0">
57 <el-col class="basic-border basic-item-title basic-flex" :span="10"> 59 <el-col class="basic-border basic-item-title basic-flex" :span="10">
@@ -95,7 +97,7 @@ @@ -95,7 +97,7 @@
95 optionsSetUp: {}, 97 optionsSetUp: {},
96 optionsPosition: {}, 98 optionsPosition: {},
97 optionsData: {}, 99 optionsData: {},
98 - informationData: [{name:'',code:''}], 100 + informationData: [{name:'',nameCode:''}],
99 informationDataAll: [{display:1}], 101 informationDataAll: [{display:1}],
100 dataLength:0, 102 dataLength:0,
101 tableDate: [], 103 tableDate: [],
@@ -324,7 +326,7 @@ @@ -324,7 +326,7 @@
324 const resData = this.optionsData; 326 const resData = this.optionsData;
325 resData.dataType == "staticData" 327 resData.dataType == "staticData"
326 ? this.handlerStaticData(resData.staticData) 328 ? this.handlerStaticData(resData.staticData)
327 - : this.handlerDynamicData(resData.dynamicData, resData.refreshTime); 329 + : this.handlerDynamicData(resData.dynamicData, resData.refreshTime,resData.isRefresh);
328 }, 330 },
329 handlerStaticData(data) { 331 handlerStaticData(data) {
330 332
@@ -343,7 +345,7 @@ @@ -343,7 +345,7 @@
343 this.addTableData=[]; 345 this.addTableData=[];
344 this.informationDataAll.map((item,index)=>{ 346 this.informationDataAll.map((item,index)=>{
345 this.addTableData.push({ 347 this.addTableData.push({
346 - key:item.code, 348 + key:item.nameCode,
347 name:item.name, 349 name:item.name,
348 width:"50%", 350 width:"50%",
349 isDisplay:item.isDisplay, 351 isDisplay:item.isDisplay,
@@ -355,9 +357,9 @@ @@ -355,9 +357,9 @@
355 this.setDisplay(); 357 this.setDisplay();
356 358
357 }, 359 },
358 - handlerDynamicData(data, refreshTime) { 360 + handlerDynamicData(data, refreshTime,isRefresh) {
359 if (!data) return; 361 if (!data) return;
360 - if (this.ispreview) { 362 + if (this.ispreview && isRefresh) {
361 this.getEchartData(data); 363 this.getEchartData(data);
362 this.flagInter = setInterval(() => { 364 this.flagInter = setInterval(() => {
363 this.getEchartData(data); 365 this.getEchartData(data);
@@ -371,9 +373,13 @@ @@ -371,9 +373,13 @@
371 data.then(res => { 373 data.then(res => {
372 if (res && res[0].code == 0){ 374 if (res && res[0].code == 0){
373 this.informationDataAll = res[0].data; 375 this.informationDataAll = res[0].data;
  376 + }else if(res && res.length>0){
  377 + this.informationDataAll=res;
  378 + }
  379 +
374 if (this.informationDataAll && this.informationDataAll.length > 0) { 380 if (this.informationDataAll && this.informationDataAll.length > 0) {
375 this.informationDataAll.map(item => { 381 this.informationDataAll.map(item => {
376 - if (typeof (item.value) != 'string') { 382 + if (item.value && typeof (item.value) != 'string' && item.value[0]) {
377 item.value =item.value[0].state; 383 item.value =item.value[0].state;
378 } 384 }
379 if(this.tableHeadInfos.length==0) { 385 if(this.tableHeadInfos.length==0) {
@@ -386,7 +392,7 @@ @@ -386,7 +392,7 @@
386 let addTableData=[]; 392 let addTableData=[];
387 this.informationDataAll.map((item,index)=>{ 393 this.informationDataAll.map((item,index)=>{
388 addTableData.push({ 394 addTableData.push({
389 - key:item.code, 395 + key:item.nameCode,
390 name:item.name, 396 name:item.name,
391 width:"50%", 397 width:"50%",
392 isDisplay:item.isDisplay, 398 isDisplay:item.isDisplay,
@@ -397,7 +403,6 @@ @@ -397,7 +403,6 @@
397 403
398 this.$store.commit('CHANGW_HEAD_INFO', addTableData); 404 this.$store.commit('CHANGW_HEAD_INFO', addTableData);
399 this.hackResetFun(); 405 this.hackResetFun();
400 - }  
401 406
402 407
403 }); 408 });
@@ -412,9 +417,8 @@ @@ -412,9 +417,8 @@
412 //设置信息列表数据每一行是否显示 417 //设置信息列表数据每一行是否显示
413 setDisplay() { 418 setDisplay() {
414 let head=this.optionsSetUp.dynamicAddTable; 419 let head=this.optionsSetUp.dynamicAddTable;
415 -  
416 for(let i=0;i<head.length;i++){ 420 for(let i=0;i<head.length;i++){
417 - if(head[i].key==this.informationDataAll[i].code){ 421 + if(this.informationDataAll[i] && head[i].key==this.informationDataAll[i].nameCode){
418 this.informationDataAll[i].isDisplay=head[i].isDisplay; 422 this.informationDataAll[i].isDisplay=head[i].isDisplay;
419 } 423 }
420 } 424 }
@@ -282,19 +282,45 @@ export default { @@ -282,19 +282,45 @@ export default {
282 let arrstorage=[]; 282 let arrstorage=[];
283 let optionArr=[] 283 let optionArr=[]
284 dataArr.map(item=>{ 284 dataArr.map(item=>{
  285 + if(item.cpuSetRate){
285 arrCpu=[{ 286 arrCpu=[{
286 num:item.cpuSetRate, 287 num:item.cpuSetRate,
287 name:'cpu容量' 288 name:'cpu容量'
288 }] 289 }]
  290 + }
  291 + if(item.storageSetRate){
289 arrmemory=[{ 292 arrmemory=[{
290 num:item.storageSetRate, 293 num:item.storageSetRate,
291 name:'存储容量' 294 name:'存储容量'
292 }] 295 }]
  296 + }
  297 + if(item.memorySetRate){
293 arrstorage=[{ 298 arrstorage=[{
294 num:item.memorySetRate, 299 num:item.memorySetRate,
295 name:'内存容量' 300 name:'内存容量'
296 }] 301 }]
  302 + }
  303 + if(arrCpu.length>0 && arrmemory.length>0 && arrstorage.length>0){
297 item.percentData=arrCpu.concat(arrmemory).concat(arrstorage); 304 item.percentData=arrCpu.concat(arrmemory).concat(arrstorage);
  305 +
  306 + }else if(arrCpu.length==0 && arrmemory.length>0 && arrstorage.length>0){
  307 + item.percentData=arrmemory.concat(arrstorage);
  308 +
  309 + }else if(arrCpu.length>0 && arrmemory.length==0 && arrstorage.length>0){
  310 + item.percentData=arrCpu.concat(arrstorage);
  311 +
  312 + }else if(arrCpu.length>0 && arrmemory.length>0 && arrstorage.length==0){
  313 + item.percentData=arrCpu.concat(arrmemory);
  314 +
  315 + }else if(arrCpu.length==0 && arrmemory.length==0 && arrstorage.length>0){
  316 + item.percentData=arrstorage;
  317 + }else if(arrCpu.length==0 && arrmemory.length>0 && arrstorage.length==0){
  318 + item.percentData=arrmemory;
  319 +
  320 + }else if(arrCpu.length>0 && arrmemory.length==0 && arrstorage.length==0){
  321 + item.percentData=arrCpu;
  322 +
  323 + }
298 optionArr.push({ 324 optionArr.push({
299 legend: { 325 legend: {
300 type: 'plain', 326 type: 'plain',