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 103 additions and 57 deletions
... ... @@ -157,6 +157,14 @@ export const monitorBasicInformationTwo = {
name:'表格标题设置',
list:[
{
type: 'el-switch',
label: '是否显示标题',
name: 'isTableTitle',
required: false,
placeholder: '',
value: true
},
{
type: 'el-input-number',
label: '文字大小',
name: 'tableTitleFontSize',
... ... @@ -368,6 +376,14 @@ export const monitorBasicInformationTwo = {
value: 'staticData',
},
{
type: 'el-switch',
label: '是否刷新',
name: 'isRefresh',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
value: true
},
{
type: 'el-input-number',
label: '刷新时间(毫秒)',
name: 'refreshTime',
... ... @@ -387,31 +403,31 @@ export const monitorBasicInformationTwo = {
{
name:'vmware-80.12.89.77',
value : 'vmware-80.12.89.77',
code : 'vmware',
nameCode : 'vmware',
state: "2"
},
{
name:'IP地址',
value:'80.12.89.77',
code:'ipAddress',
nameCode:'ipAddress',
state: "2"
},
{
name:'资源池',
value:'3',
code:'resPool',
nameCode:'resPool',
state: "2"
},
{
name:'宿主机',
value:'2',
code:'host',
nameCode:'host',
state: "2"
},
{
name:'虚拟机',
value:'10',
code:'vMachine',
nameCode:'vMachine',
state: "2"
},
],
... ...
... ... @@ -12,7 +12,7 @@
</div>
<!-- <dynamicTableComponents :formData="dtInformationData"></dynamicTableComponents>-->
<div class="basic-ul-right" :style="borderStyleF" >
<div v-if="informationDataAll[0].isDisplay=='1'" >
<div v-if="optionsSetUp.isTableTitle" >
<el-row class="backColor" :style="bodyTitleStyle">
<el-col class="padding-10" :style="[tableTitleStyle]" aria-colspan="2">
<span v-if="!titleName" class="link-type" :style="tableTitleStyle" @click="goTrend(informationDataAll[0])">{{informationDataAll[0].name}}</span>
... ... @@ -44,14 +44,16 @@
</div>
<div class="basic-tbody basic-border-wrap" :style="wrapStyle">
<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">
<!-- <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">-->
<!-- <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">-->
<el-col :style="[headStyle,borderStlye,lineHeightStyle]" v-if="(titleName?index>=0:index>0)" class="basic-border basic-item-title basic-flex backColor" :span="10">
{{ item.name }}
</el-col>
<!-- <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>-->
<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>
<!-- <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>-->
<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 :class="{'link-type':item.nameCode=='resName'}" @click="goTrend({resId:resId,resType:resType})">{{ item.value }}</span>
</el-col>
<!-- && attrKey.attrKeyVal.includes(item.code)-->
<!-- && attrKey.attrKeyVal.includes(item.nameCode)-->
</el-row>
<el-row class="basic-item 111" :style="[itemStyle,borderStlyeLast]" v-if="optionsSetUp.isTowColumn && informationData.length%2==0">
<el-col class="basic-border basic-item-title basic-flex" :span="10">
... ... @@ -95,7 +97,7 @@
optionsSetUp: {},
optionsPosition: {},
optionsData: {},
informationData: [{name:'',code:''}],
informationData: [{name:'',nameCode:''}],
informationDataAll: [{display:1}],
dataLength:0,
tableDate: [],
... ... @@ -324,7 +326,7 @@
const resData = this.optionsData;
resData.dataType == "staticData"
? this.handlerStaticData(resData.staticData)
: this.handlerDynamicData(resData.dynamicData, resData.refreshTime);
: this.handlerDynamicData(resData.dynamicData, resData.refreshTime,resData.isRefresh);
},
handlerStaticData(data) {
... ... @@ -343,7 +345,7 @@
this.addTableData=[];
this.informationDataAll.map((item,index)=>{
this.addTableData.push({
key:item.code,
key:item.nameCode,
name:item.name,
width:"50%",
isDisplay:item.isDisplay,
... ... @@ -355,9 +357,9 @@
this.setDisplay();
},
handlerDynamicData(data, refreshTime) {
handlerDynamicData(data, refreshTime,isRefresh) {
if (!data) return;
if (this.ispreview) {
if (this.ispreview && isRefresh) {
this.getEchartData(data);
this.flagInter = setInterval(() => {
this.getEchartData(data);
... ... @@ -369,35 +371,38 @@
getEchartData(val) {
const data = this.queryEchartsData(val);
data.then(res => {
if (res && res[0].code == 0){
if (res && res[0].code == 0){
this.informationDataAll = res[0].data;
if (this.informationDataAll && this.informationDataAll.length > 0) {
this.informationDataAll.map(item => {
if (typeof (item.value) != 'string') {
item.value =item.value[0].state;
}
if(this.tableHeadInfos.length==0) {
item.isDisplay = '1';
}
})
}else if(res && res.length>0){
this.informationDataAll=res;
}
if (this.informationDataAll && this.informationDataAll.length > 0) {
this.informationDataAll.map(item => {
if (item.value && typeof (item.value) != 'string' && item.value[0]) {
item.value =item.value[0].state;
}
if(this.tableHeadInfos.length==0) {
item.isDisplay = '1';
}
this.setDisplay();
let addTableData=[];
this.informationDataAll.map((item,index)=>{
addTableData.push({
key:item.code,
name:item.name,
width:"50%",
isDisplay:item.isDisplay,
state:item.state,
value:item.value
})
})
this.$store.commit('CHANGW_HEAD_INFO', addTableData);
this.hackResetFun();
}
})
}
this.setDisplay();
let addTableData=[];
this.informationDataAll.map((item,index)=>{
addTableData.push({
key:item.nameCode,
name:item.name,
width:"50%",
isDisplay:item.isDisplay,
state:item.state,
value:item.value
})
})
this.$store.commit('CHANGW_HEAD_INFO', addTableData);
this.hackResetFun();
});
... ... @@ -412,9 +417,8 @@
//设置信息列表数据每一行是否显示
setDisplay() {
let head=this.optionsSetUp.dynamicAddTable;
for(let i=0;i<head.length;i++){
if(head[i].key==this.informationDataAll[i].code){
if(this.informationDataAll[i] && head[i].key==this.informationDataAll[i].nameCode){
this.informationDataAll[i].isDisplay=head[i].isDisplay;
}
}
... ...
... ... @@ -282,19 +282,45 @@ export default {
let arrstorage=[];
let optionArr=[]
dataArr.map(item=>{
arrCpu=[{
num:item.cpuSetRate,
name:'cpu容量'
}]
arrmemory=[{
num:item.storageSetRate,
name:'存储容量'
}]
arrstorage=[{
num:item.memorySetRate,
name:'内存容量'
}]
item.percentData=arrCpu.concat(arrmemory).concat(arrstorage);
if(item.cpuSetRate){
arrCpu=[{
num:item.cpuSetRate,
name:'cpu容量'
}]
}
if(item.storageSetRate){
arrmemory=[{
num:item.storageSetRate,
name:'存储容量'
}]
}
if(item.memorySetRate){
arrstorage=[{
num:item.memorySetRate,
name:'内存容量'
}]
}
if(arrCpu.length>0 && arrmemory.length>0 && arrstorage.length>0){
item.percentData=arrCpu.concat(arrmemory).concat(arrstorage);
}else if(arrCpu.length==0 && arrmemory.length>0 && arrstorage.length>0){
item.percentData=arrmemory.concat(arrstorage);
}else if(arrCpu.length>0 && arrmemory.length==0 && arrstorage.length>0){
item.percentData=arrCpu.concat(arrstorage);
}else if(arrCpu.length>0 && arrmemory.length>0 && arrstorage.length==0){
item.percentData=arrCpu.concat(arrmemory);
}else if(arrCpu.length==0 && arrmemory.length==0 && arrstorage.length>0){
item.percentData=arrstorage;
}else if(arrCpu.length==0 && arrmemory.length>0 && arrstorage.length==0){
item.percentData=arrmemory;
}else if(arrCpu.length>0 && arrmemory.length==0 && arrstorage.length==0){
item.percentData=arrCpu;
}
optionArr.push({
legend: {
type: 'plain',
... ...