|
|
|
<template>
|
|
|
|
<div class="healthStatus-container" :style="styleObj">
|
|
|
|
<!-- <div class="healthStatus-container">-->
|
|
|
|
<div class="title-div" :style="styleColor">
|
|
|
|
<img :src="imgStyle.imageAdress" :style="imgStyle" alt="">
|
|
|
|
</div>
|
|
|
|
<el-row>
|
|
|
|
<el-col :span="8" v-for="item in healthDataComputed" :key="item.id">
|
|
|
|
<div class="health-service">
|
|
|
|
<span class="health-name">{{item.name}}</span>
|
|
|
|
<img v-if="item.healthStatusUrl" :src="item.healthStatusUrl" alt="">
|
|
|
|
</div>
|
|
|
|
</el-col>
|
|
|
|
|
|
|
|
</el-row>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import {
|
|
|
|
getData
|
|
|
|
} from "@/api/platform";
|
|
|
|
export default {
|
|
|
|
name: "healthStatus",
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
options: {},
|
|
|
|
healthData:[
|
|
|
|
/*{
|
|
|
|
name:'服务器',
|
|
|
|
id:'001',
|
|
|
|
healthStatus: 1,
|
|
|
|
healthStatusUrl:''
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name:'应用',
|
|
|
|
healthStatus: 2,
|
|
|
|
id:'002',
|
|
|
|
healthStatusUrl:''
|
|
|
|
},{
|
|
|
|
name:'日和',
|
|
|
|
id:'003',
|
|
|
|
healthStatus: 3,
|
|
|
|
healthStatusUrl:''
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name:'日志',
|
|
|
|
id:'004',
|
|
|
|
healthStatus: 3,
|
|
|
|
healthStatusUrl:''
|
|
|
|
}*/
|
|
|
|
],
|
|
|
|
optionsSetUp: {},
|
|
|
|
optionsData:{}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
components: {},
|
|
|
|
props: {
|
|
|
|
value: Object,
|
|
|
|
ispreview: Boolean
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
transStyle() {
|
|
|
|
return this.objToOne(this.options);
|
|
|
|
},
|
|
|
|
styleObj() {
|
|
|
|
const allStyle = this.optionsSetUp;
|
|
|
|
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,
|
|
|
|
|
|
|
|
};
|
|
|
|
},
|
|
|
|
|
|
|
|
imgStyle() {
|
|
|
|
|
|
|
|
return {
|
|
|
|
imageAdress: this.transStyle.imageAdress?this.transStyle.imageAdress:require("../../../../../../assets/images/healthStatus/title-asset.png"),
|
|
|
|
|
|
|
|
"border-radius": this.transStyle.borderRadius + "px",
|
|
|
|
opacity: this.transStyle.transparency / 100,
|
|
|
|
};
|
|
|
|
},
|
|
|
|
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();
|
|
|
|
console.log("datanum",this.imgStyleHealth.dataNum)
|
|
|
|
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.optionsData=val.data;
|
|
|
|
this.handlerData();
|
|
|
|
},
|
|
|
|
deep: true
|
|
|
|
}
|
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
// this.initImageUrl();
|
|
|
|
this.optionsSetUp = this.value.setup;
|
|
|
|
this.optionsData = this.value.data;
|
|
|
|
this.handlerData();
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
initImageUrl(){
|
|
|
|
console.log("len",this.healthData.length)
|
|
|
|
if(this.healthData && this.healthData.length<3){
|
|
|
|
let len=3-this.healthData.length;
|
|
|
|
for(let i=0;i<len;i++){
|
|
|
|
console.log("i",i)
|
|
|
|
this.healthData.push({
|
|
|
|
name:'',
|
|
|
|
healthStatusUrl:''
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
console.log("healthData",this.healthData)
|
|
|
|
|
|
|
|
this.healthData.map(item=>{
|
|
|
|
console.log("abc",this.imgStyleHealth.dataNum)
|
|
|
|
if(!item.healthStatusUrl){
|
|
|
|
item.healthStatusUrl=this.imgStyleHealth.imageAdressHealthBg;
|
|
|
|
}
|
|
|
|
if(item.healthStatus==1){
|
|
|
|
item.healthStatusUrl=this.imgStyleHealth.imageAdressHealthGood;
|
|
|
|
}else if(item.healthStatus==2){
|
|
|
|
item.healthStatusUrl=this.imgStyleHealth.imageAdressHealthWorse;
|
|
|
|
}else if(item.healthStatus==3){
|
|
|
|
item.healthStatusUrl=this.imgStyleHealth.imageAdressHealthBad;
|
|
|
|
}else{
|
|
|
|
item.healthStatusUrl=this.imgStyleHealth.imageAdressHealthBg;
|
|
|
|
}
|
|
|
|
})
|
|
|
|
return this.healthData;
|
|
|
|
|
|
|
|
},
|
|
|
|
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.healthData = data;
|
|
|
|
},
|
|
|
|
handlerDynamicData(data, refreshTime) {
|
|
|
|
if (!data) return;
|
|
|
|
/* if (this.ispreview) {
|
|
|
|
this.getEchartData(data);
|
|
|
|
this.flagInter = setInterval(() => {
|
|
|
|
this.getEchartData(data);
|
|
|
|
}, refreshTime);
|
|
|
|
} else {
|
|
|
|
this.getEchartData(data);
|
|
|
|
}*/
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
.healthStatus-container{
|
|
|
|
max-width:700px;
|
|
|
|
}
|
|
|
|
.title-div{
|
|
|
|
text-align: left;
|
|
|
|
padding:10px;
|
|
|
|
}
|
|
|
|
.health-service{
|
|
|
|
position: relative;
|
|
|
|
}
|
|
|
|
.health-name{
|
|
|
|
position: absolute;
|
|
|
|
top:15px;
|
|
|
|
left:0;
|
|
|
|
right:0;
|
|
|
|
color:#FFFFFF;
|
|
|
|
}
|
|
|
|
</style> |
...
|
...
|
|
