|
|
|
<template>
|
|
|
|
<div class="basicInformation-container" :style="styleObj" @click="closePressingDialog">
|
|
|
|
<div class="title-div" :style="styleColor">
|
|
|
|
<div class="basicInformation-container" :style="styleObj" @click="closePressingDialog" @click.stop="visible = false" >
|
|
|
|
<div class="title-div" :style="styleColor" v-if="hackReset">
|
|
|
|
<img v-if="!imgStyle.titleName" :src="imgStyle.imageAdress" :style="imgStyle" alt="">
|
|
|
|
<div v-if="imgStyle.titleName" class="title-name">
|
|
|
|
{{imgStyle.titleName}}
|
|
|
|
<el-tooltip v-model="visible">
|
|
|
|
<el-tooltip v-model="visible" :manual="true" placement="right-start">
|
|
|
|
<template #content>
|
|
|
|
<div class="basic-ul-all" style="width:720px;" @click="pressingVisibleTip=false">
|
|
|
|
<el-row class="basic-item" :style="fontStyle" v-for="(item,index) in informationDataAll" :key="index">
|
|
|
|
<el-col class="basic-border basic-item-title basic-flex" :span="10">
|
|
|
|
{{ item.name }}
|
|
|
|
<span class="basic-img" v-if="item.code=='link'">
|
|
|
|
<img src="@/assets/images/healthStatus/icon_row_menu.png" alt="" @click.stop="pressingVisibleTip=true">
|
|
|
|
<span class="basic-img" v-if="item.id=='KPIE13DD9A3'">
|
|
|
|
<!-- <img src="@/assets/images/healthStatus/icon_row_menu.png" alt="" @click.stop="pressingVisibleTip=true">
|
|
|
|
<span class="basic-pressing-times" @click="pressingDialog" v-if="pressingVisibleTip">
|
|
|
|
<i class="el-icon-link"></i>压制次数
|
|
|
|
</span>
|
|
|
|
</span>-->
|
|
|
|
<customMenuBox ref="customMenu" v-if="imgStyle.probeDown "
|
|
|
|
:detailMenubox="calcDetailMenubox"
|
|
|
|
:tableDataValue="tableDataValue" :flg="''"
|
|
|
|
:tableDataValueHead="tableDataValueHead"
|
|
|
|
:heightStyle="heightStyle" :marginStyle="marginStyle" :tableName="imgStyle.titleName"
|
|
|
|
:trendSrc="trendSrc"
|
|
|
|
:resType="resType"
|
|
|
|
></customMenuBox>
|
|
|
|
</span>
|
|
|
|
</el-col>
|
|
|
|
<el-col class="basic-border basic-item-content" :span="14">{{ item.value }}</el-col>
|
|
|
|
<el-col class="basic-border basic-item-content" :span="14"><span :class="{'span-green':index==0}">{{ item.value }}</span></el-col>
|
|
|
|
</el-row>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<i class="el-icon-info" @mouseenter="visible = true" @mouseleave="visible = false" />
|
|
|
|
<i class="el-icon-info" @mouseenter="visible = true"/>
|
|
|
|
</el-tooltip>
|
|
|
|
|
|
|
|
</div>
|
|
...
|
...
|
@@ -30,14 +38,22 @@ |
|
|
|
<el-row class="basic-item" :style="fontStyle" v-for="(item,index) in informationData" :key="index">
|
|
|
|
<el-col class="basic-border basic-item-title basic-flex" :span="10">
|
|
|
|
{{ item.name }}
|
|
|
|
<span class="basic-img" v-if="item.code=='link'">
|
|
|
|
<img src="@/assets/images/healthStatus/icon_row_menu.png" alt="" @click.stop="pressingTimes">
|
|
|
|
<span class="basic-img" v-if="item.id=='KPIE13DD9A3'">
|
|
|
|
<!-- <img src="@/assets/images/healthStatus/icon_row_menu.png" alt="" @click.stop="pressingTimes">
|
|
|
|
<span class="basic-pressing-times" @click="pressingDialog" v-if="pressingVisible">
|
|
|
|
<i class="el-icon-link"></i>压制次数
|
|
|
|
</span>
|
|
|
|
</span>-->
|
|
|
|
<customMenuBox ref="customMenu" v-if="imgStyle.probeDown"
|
|
|
|
:detailMenubox="calcDetailMenubox"
|
|
|
|
:tableDataValue="tableDataValue" :flg="''"
|
|
|
|
:tableDataValueHead="tableDataValueHead"
|
|
|
|
:heightStyle="heightStyle" :marginStyle="marginStyle" :tableName="imgStyle.titleName"
|
|
|
|
:trendSrc="trendSrc"
|
|
|
|
:resType="resType"
|
|
|
|
></customMenuBox>
|
|
|
|
</span>
|
|
|
|
</el-col>
|
|
|
|
<el-col class="basic-border basic-item-content" :span="14">{{ item.value }}</el-col>
|
|
|
|
<el-col class="basic-border basic-item-content" :span="14"><span :class="{'span-green':index==0}">{{ item.value }}</span></el-col>
|
|
|
|
</el-row>
|
|
|
|
</div>
|
|
|
|
|
|
...
|
...
|
@@ -45,6 +61,7 @@ |
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import customMenuBox from "../../designerComponents/customMenuBox";//下探组件
|
|
|
|
|
|
|
|
export default {
|
|
|
|
name: "basicInformation",
|
|
...
|
...
|
@@ -59,9 +76,17 @@ export default { |
|
|
|
pressingVisible:false,
|
|
|
|
pressingVisibleTip:false,
|
|
|
|
visible:false,
|
|
|
|
hackReset:true,
|
|
|
|
tableDataValue: {kpiId:''},
|
|
|
|
tableDataValueHead: {},
|
|
|
|
resType:'',
|
|
|
|
marginStyle:'',//弹框距离顶部距离
|
|
|
|
heightStyle:'',//弹框遮罩层高度
|
|
|
|
widthStyle:';',//弹框宽度样式
|
|
|
|
trendSrc:'',
|
|
|
|
}
|
|
|
|
},
|
|
|
|
components: {},
|
|
|
|
components: {customMenuBox},
|
|
|
|
props: {
|
|
|
|
value: Object,
|
|
|
|
ispreview: Boolean
|
|
...
|
...
|
@@ -102,9 +127,53 @@ export default { |
|
|
|
imageAdress: this.transStyle.imageAdress?this.transStyle.imageAdress:require("../../../../../../assets/images/healthStatus/title-asset.png"),
|
|
|
|
titleName:this.transStyle.titleName,
|
|
|
|
isName:this.transStyle.isName,
|
|
|
|
dataNum:this.transStyle.dataNum?this.transStyle.dataNum:'6'
|
|
|
|
dataNum:this.transStyle.dataNum?this.transStyle.dataNum:'6',
|
|
|
|
probeDown:this.transStyle.probeDown
|
|
|
|
|
|
|
|
};
|
|
|
|
}
|
|
|
|
},
|
|
|
|
//表格下探列表
|
|
|
|
calcDetailMenubox(){
|
|
|
|
const menubox = this.transStyle;
|
|
|
|
let detailMenuBox=[];
|
|
|
|
if(menubox.alarm_setting){
|
|
|
|
detailMenuBox.push({
|
|
|
|
name:'告警设置',
|
|
|
|
type:'alarm_setting'
|
|
|
|
})
|
|
|
|
}
|
|
|
|
if(menubox.filter_sheet_indicator){
|
|
|
|
detailMenuBox.push({
|
|
|
|
name:'过滤单指标',
|
|
|
|
type:'filter_sheet_indicator'
|
|
|
|
})
|
|
|
|
}
|
|
|
|
if(menubox.filter_multiple_indicators){
|
|
|
|
detailMenuBox.push({
|
|
|
|
name:'过滤多指标',
|
|
|
|
type:'filter_multiple_indicators'
|
|
|
|
})
|
|
|
|
}
|
|
|
|
if(menubox.performance_trends){
|
|
|
|
detailMenuBox.push({
|
|
|
|
name:'性能趋势',
|
|
|
|
type:'performance_trends'
|
|
|
|
})
|
|
|
|
}
|
|
|
|
if(menubox.pressing_times){
|
|
|
|
detailMenuBox.push({
|
|
|
|
name:'压制次数',
|
|
|
|
type:'pressing_times'
|
|
|
|
})
|
|
|
|
}
|
|
|
|
if(menubox.include_capacity_forecast){
|
|
|
|
detailMenuBox.push({
|
|
|
|
name:'纳入容量预测',
|
|
|
|
type:'include_capacity_forecast'
|
|
|
|
})
|
|
|
|
}
|
|
|
|
return detailMenuBox;
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
watch: {
|
|
...
|
...
|
@@ -133,28 +202,53 @@ export default { |
|
|
|
|
|
|
|
handlerData() {
|
|
|
|
const resData = this.optionsData;
|
|
|
|
console.log("resdata",resData)
|
|
|
|
resData.dataType == "staticData"
|
|
|
|
? this.handlerStaticData(resData.staticData)
|
|
|
|
: this.handlerDynamicData(resData.dynamicData, resData.refreshTime);
|
|
|
|
},
|
|
|
|
handlerStaticData(data) {
|
|
|
|
this.informationData = data;
|
|
|
|
// this.informationData = data;
|
|
|
|
this.informationDataAll = data;
|
|
|
|
|
|
|
|
if(this.imgStyle.dataNum){
|
|
|
|
this.informationData=this.informationData.slice(0,this.imgStyle.dataNum);
|
|
|
|
this.informationData=this.informationDataAll.slice(0,this.imgStyle.dataNum);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
handlerDynamicData(data, refreshTime) {
|
|
|
|
if (!data) return;
|
|
|
|
/* if (this.ispreview) {
|
|
|
|
if (this.ispreview) {
|
|
|
|
this.getEchartData(data);
|
|
|
|
this.flagInter = setInterval(() => {
|
|
|
|
this.getEchartData(data);
|
|
|
|
}, refreshTime);
|
|
|
|
} else {
|
|
|
|
this.getEchartData(data);
|
|
|
|
}*/
|
|
|
|
}
|
|
|
|
},
|
|
|
|
getEchartData(val) {
|
|
|
|
const data = this.queryEchartsData(val);
|
|
|
|
data.then(res => {
|
|
|
|
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.imgStyle.dataNum){
|
|
|
|
this.informationData=this.informationDataAll.slice(0,this.imgStyle.dataNum);
|
|
|
|
}
|
|
|
|
this.hackResetFun();
|
|
|
|
});
|
|
|
|
},
|
|
|
|
// vue hack 之强制刷新组件
|
|
|
|
hackResetFun() {
|
|
|
|
this.hackReset = false;
|
|
|
|
this.$nextTick(() => {
|
|
|
|
this.hackReset = true;
|
|
|
|
});
|
|
|
|
},
|
|
|
|
pressingDialog(){
|
|
|
|
},
|
|
...
|
...
|
@@ -253,4 +347,7 @@ export default { |
|
|
|
color:#f6f6f6;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.span-green{
|
|
|
|
color:#0BAC33;
|
|
|
|
}
|
|
|
|
</style> |
...
|
...
|
|
