|
|
|
<template>
|
|
|
|
<div class="healthStatus-container" :style="styleObj">
|
|
|
|
<!-- <div class="healthStatus-container">-->
|
|
|
|
<div class="title-div" :style="styleColor">
|
|
|
|
<img v-if="!imgStyle.titleName" :src="imgStyle.imageAdress" :style="imgStyle" alt="">
|
|
|
|
<div v-if="imgStyle.titleName" class="title-name">{{imgStyle.titleName}}</div>
|
|
|
|
</div>
|
|
|
|
<el-row>
|
|
|
|
<!-- <el-col class="flex-around" :span="imgStyle.spanNum" v-for="item in healthDataComputed" :key="item.id">-->
|
|
|
|
<el-col class="flex-around" :span="24" >
|
|
|
|
<div class="health-service">
|
|
|
|
<span v-if="imgStyle.isName" :style="lineHeightStyle" class="health-name">{{healthNumData.state}}</span>
|
|
|
|
<img :style="imgStyleContent" width="100%" :src="healthStatusUrl" alt="">
|
|
|
|
</div>
|
|
|
|
<div class="health-num-content" :style="fontStyle" >
|
|
|
|
<div class="health-num-item">
|
|
|
|
<span class="health-color"></span>
|
|
|
|
<span class="health-num-title">严重告警：</span>
|
|
|
|
<span class="health-num">{{ healthNumData.yz }}</span>
|
|
|
|
</div>
|
|
|
|
<div class="health-num-item">
|
|
|
|
<span class="health-color"></span>
|
|
|
|
<span class="health-num-title">重要告警：</span>
|
|
|
|
<span class="health-num">{{ healthNumData.zy }}</span>
|
|
|
|
</div>
|
|
|
|
<div class="health-num-item">
|
|
|
|
<span class="health-color"></span>
|
|
|
|
<span class="health-num-title">一般告警：</span>
|
|
|
|
<span class="health-num">{{ healthNumData.yb }}</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</el-col>
|
|
|
|
|
|
|
|
</el-row>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import {
|
|
|
|
getData,
|
|
|
|
getHealth
|
|
|
|
} from "@/api/platform";
|
|
|
|
export default {
|
|
|
|
name: "healthStatus",
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
options: {},
|
|
|
|
spanNum:24,//col的span的个数
|
|
|
|
healthStatusUrl:'',
|
|
|
|
healthNumData:{
|
|
|
|
icon: "worse",
|
|
|
|
state: "量",
|
|
|
|
yb: "0",
|
|
|
|
yz: "0",
|
|
|
|
zy: "1"
|
|
|
|
},//资源状态告警个数数据 good worse worst
|
|
|
|
healthData:[
|
|
|
|
|
|
|
|
],
|
|
|
|
optionsSetUp: {},
|
|
|
|
optionsPosition:{},
|
|
|
|
optionsData:{}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
components: {},
|
|
|
|
props: {
|
|
|
|
value: Object,
|
|
|
|
ispreview: Boolean
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
transStyle() {
|
|
|
|
return this.objToOne(this.options);
|
|
|
|
},
|
|
|
|
styleObj() {
|
|
|
|
const allStyle = this.optionsPosition;
|
|
|
|
return {
|
|
|
|
position: this.ispreview ? "absolute" : "static",
|
|
|
|
width: allStyle.width + "px",
|
|
|
|
height: allStyle.height + "px",
|
|
|
|
left: allStyle.left + "px",
|
|
|
|
top: allStyle.top + "px",
|
|
|
|
// background:this.transStyle.BgColor
|
|
|
|
};
|
|
|
|
},
|
|
|
|
|
|
|
|
styleColor() {
|
|
|
|
return {
|
|
|
|
"text-align": this.transStyle.textAlign,
|
|
|
|
|
|
|
|
};
|
|
|
|
},
|
|
|
|
fontStyle(){
|
|
|
|
return{
|
|
|
|
"font-size": this.transStyle.fontSize + "px",
|
|
|
|
'height':this.transStyle.imgWidth+'px',
|
|
|
|
}
|
|
|
|
},
|
|
|
|
lineHeightStyle(){
|
|
|
|
return{
|
|
|
|
'line-height':this.transStyle.imgWidth+'px',
|
|
|
|
}
|
|
|
|
},
|
|
|
|
imgStyleContent(){
|
|
|
|
return{
|
|
|
|
'width':this.transStyle.imgWidth+'px',
|
|
|
|
}
|
|
|
|
},
|
|
|
|
imgStyle() {
|
|
|
|
|
|
|
|
return {
|
|
|
|
imageAdress: this.transStyle.imageAdress?this.transStyle.imageAdress:require("../../../../../../assets/images/healthStatus/title-asset.png"),
|
|
|
|
"border-radius": this.transStyle.borderRadius + "px",
|
|
|
|
isNum:this.transStyle.isNum,
|
|
|
|
spanNum:this.transStyle.isNum?24:8,
|
|
|
|
titleName:this.transStyle.titleName,
|
|
|
|
isName:this.transStyle.isName,
|
|
|
|
imgWidth:this.transStyle.imgWidth
|
|
|
|
};
|
|
|
|
},
|
|
|
|
imgStyleHealth() {
|
|
|
|
return {
|
|
|
|
imageAdressHealthBg:this.transStyle.imageAdressHealthBg?this.transStyle.imageAdressHealthBg:require("../../../../../../assets/images/healthStatus/state_bg.png"),
|
|
|
|
imageAdressHealthGood:this.transStyle.imageAdressHealthGood?this.transStyle.imageAdressHealthGood:require("../../../../../../assets/images/healthStatus/state_01.png"),
|
|
|
|
imageAdressHealthWorse:this.transStyle.imageAdressHealthWorse?this.transStyle.imageAdressHealthWorse:require("../../../../../../assets/images/healthStatus/state_02.png"),
|
|
|
|
imageAdressHealthBad:this.transStyle.imageAdressHealthBad?this.transStyle.imageAdressHealthBad:require("../../../../../../assets/images/healthStatus/state_03.png"),
|
|
|
|
dataNum:this.transStyle.dataNum?this.transStyle.dataNum:'3'
|
|
|
|
};
|
|
|
|
},
|
|
|
|
/* healthDataComputed(){
|
|
|
|
let healthData=this.healthData;
|
|
|
|
healthData=this.initImageUrl();
|
|
|
|
if(this.imgStyleHealth.dataNum){
|
|
|
|
healthData=healthData.slice(0,this.imgStyleHealth.dataNum);
|
|
|
|
}
|
|
|
|
return healthData;
|
|
|
|
}*/
|
|
|
|
},
|
|
|
|
watch: {
|
|
|
|
value: {
|
|
|
|
handler(val) {
|
|
|
|
this.options = val;
|
|
|
|
this.optionsSetUp = val.setup;
|
|
|
|
this.optionsPosition = val.position;
|
|
|
|
this.optionsData=val.data;
|
|
|
|
this.handlerData();
|
|
|
|
|
|
|
|
this.initImageUrl();
|
|
|
|
this.getHealthData();
|
|
|
|
|
|
|
|
},
|
|
|
|
deep: true
|
|
|
|
}
|
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
// this.initImageUrl();
|
|
|
|
this.options=this.value;
|
|
|
|
this.optionsSetUp = this.value.setup;
|
|
|
|
this.optionsPosition = this.value.position;
|
|
|
|
this.optionsData = this.value.data;
|
|
|
|
this.handlerData();
|
|
|
|
|
|
|
|
this.initImageUrl();
|
|
|
|
this.getHealthData();
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
|
|
|
|
initImageUrl(){
|
|
|
|
//显示告警数量时根据告警数量接口返回的状态更改
|
|
|
|
if(this.healthNumData.icon=='good'){
|
|
|
|
this.healthStatusUrl=this.imgStyleHealth.imageAdressHealthGood;
|
|
|
|
|
|
|
|
}else if(this.healthNumData.icon=='worse'){
|
|
|
|
this.healthStatusUrl=this.imgStyleHealth.imageAdressHealthWorse;
|
|
|
|
|
|
|
|
}else if(this.healthNumData.icon=='worst'){
|
|
|
|
this.healthStatusUrl=this.imgStyleHealth.imageAdressHealthBad;
|
|
|
|
|
|
|
|
}else{
|
|
|
|
this.healthStatusUrl=this.imgStyleHealth.imageAdressHealthBg;
|
|
|
|
}
|
|
|
|
|
|
|
|
return this.healthNumData;
|
|
|
|
|
|
|
|
},
|
|
|
|
async init(){
|
|
|
|
const reportCode = this.$route.query.reportCode;
|
|
|
|
const { code, data } = await getData(reportCode);
|
|
|
|
if (code != 200) return;
|
|
|
|
},
|
|
|
|
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.healthNumData = data;
|
|
|
|
},
|
|
|
|
handlerDynamicData(data, refreshTime) {
|
|
|
|
if (!data) return;
|
|
|
|
/* if (this.ispreview) {
|
|
|
|
this.getEchartData(data);
|
|
|
|
this.flagInter = setInterval(() => {
|
|
|
|
this.getEchartData(data);
|
|
|
|
}, refreshTime);
|
|
|
|
} else {
|
|
|
|
this.getEchartData(data);
|
|
|
|
}*/
|
|
|
|
},
|
|
|
|
async getHealthData(){
|
|
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
const { code, data } = await getHealth();
|
|
|
|
if (code != 200) return;
|
|
|
|
this.healthNumData=data;
|
|
|
|
console.log("health",data)*/
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
.healthStatus-container{
|
|
|
|
/*max-width:700px;*/
|
|
|
|
}
|
|
|
|
.title-div{
|
|
|
|
text-align: left;
|
|
|
|
padding:10px;
|
|
|
|
}
|
|
|
|
.title-name{
|
|
|
|
color:rgb(30,159,255);
|
|
|
|
font-size: 16px;
|
|
|
|
padding:10px;
|
|
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
.health-service{
|
|
|
|
position: relative;
|
|
|
|
}
|
|
|
|
.health-name{
|
|
|
|
position: absolute;
|
|
|
|
left:0;
|
|
|
|
right:0;
|
|
|
|
font-size: 30px;
|
|
|
|
color:#666666;
|
|
|
|
line-height: 220px;
|
|
|
|
}
|
|
|
|
.health-num-content{
|
|
|
|
font-size: 14px;
|
|
|
|
justify-content: space-around;
|
|
|
|
display: flex;
|
|
|
|
flex-flow: column;
|
|
|
|
}
|
|
|
|
.health-num-title{
|
|
|
|
margin-left: 30px;
|
|
|
|
color:#666666;
|
|
|
|
}
|
|
|
|
.health-num-item:nth-child(2){
|
|
|
|
/*margin: 60px 0;*/
|
|
|
|
}
|
|
|
|
.health-color{
|
|
|
|
width:14px;
|
|
|
|
height:14px;
|
|
|
|
display: inline-block;
|
|
|
|
}
|
|
|
|
.health-num-item:nth-child(1) .health-color{
|
|
|
|
background: #D81E06;
|
|
|
|
}
|
|
|
|
.health-num-item:nth-child(2) .health-color{
|
|
|
|
background: #F5A623;
|
|
|
|
}
|
|
|
|
.health-num-item:nth-child(3) .health-color{
|
|
|
|
background: #7BE00D;
|
|
|
|
}
|
|
|
|
.flex-around{
|
|
|
|
display: flex;
|
|
|
|
justify-content: space-around;
|
|
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
</style> |
...
|
...
|
|
