186 lines
4.3 KiB
Vue
186 lines
4.3 KiB
Vue
<template>
|
|
<div class="big-wraring-info-wrap">
|
|
<nav-temp htmlType="t1" :title="title">
|
|
<div class="conter-block" slot="mk-center">
|
|
<census-temp-b
|
|
v-for="(item, idx) in radarOption2"
|
|
:key="idx"
|
|
:icolor="item.icolor"
|
|
:title="item.title"
|
|
:value="result[item.key] || 0"
|
|
:icons="item.icons"
|
|
style="width: calc((100% - 20px) / 2)"
|
|
></census-temp-b>
|
|
</div>
|
|
</nav-temp>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import NavTemp from "./navTemp";
|
|
import CensusTempA from "./censusTempA";
|
|
import censusTempB from "./censusTempB"
|
|
export default {
|
|
name: "wraringInfoWrap",
|
|
components: {
|
|
NavTemp,
|
|
censusTempB,
|
|
},
|
|
props: ["result", 'countResult'],
|
|
data() {
|
|
return {
|
|
title: "运行分析",
|
|
radarOption: [],
|
|
radarOption2: [
|
|
{
|
|
icolor: "#00FF48",
|
|
icons: "iconfenxi",
|
|
title: "总功率(kW)",
|
|
value: "456",
|
|
key: 'psTotal'
|
|
},
|
|
{
|
|
icolor: "#4FFFFF",
|
|
icons: "iconbiandianzhan",
|
|
title: "总电量(kWh)",
|
|
value: "456",
|
|
key: 'pwTotal'
|
|
},
|
|
{
|
|
icolor: "#4FFFFF",
|
|
icons: "iconqunchengyuan",
|
|
title: "接入用户(家)",
|
|
value: "456",
|
|
key: 'userTotal'
|
|
},
|
|
{
|
|
icolor: "#F1E156",
|
|
icons: "iconjierusb",
|
|
title: "接入设备(台)",
|
|
value: "456",
|
|
key: 'deviceTotal'
|
|
},
|
|
{
|
|
icolor: "#F1E156",
|
|
icons: "iconfugaidq",
|
|
title: "覆盖地区(个)",
|
|
value: "456",
|
|
key: 'projectTotal'
|
|
},
|
|
{
|
|
icolor: "#00FF48",
|
|
icons: "iconshebei",
|
|
title: "设备在线(台)",
|
|
value: "456",
|
|
key: 'onlineTotal'
|
|
},
|
|
],
|
|
};
|
|
},
|
|
created() {
|
|
this.radarOption = [0, 0, 0];
|
|
},
|
|
watch: {
|
|
result: {
|
|
handler: function (obj, oldVal) {
|
|
this.radarOption = [];
|
|
if (obj) {
|
|
this.radarOption.push(obj.alarmTotal);
|
|
this.radarOption.push(obj.unProcessed);
|
|
this.radarOption.push(obj.processed);
|
|
} else {
|
|
this.radarOption = [0, 0, 0];
|
|
}
|
|
},
|
|
deep: true,
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss">
|
|
.big-wraring-info-wrap {
|
|
height: 190px;
|
|
width: calc((100% - 20px) / 2);
|
|
.conter-block {
|
|
width: 100%;
|
|
height: 190px;
|
|
background-size: contain;
|
|
padding-top: 10px;
|
|
padding: 5px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
align-items: center;
|
|
align-items: center;
|
|
padding: 5px 35px;
|
|
.count-block {
|
|
width: calc(100% - 40px);
|
|
height: 180px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
margin: 5px 20px;
|
|
.info-block-div {
|
|
width: 115px;
|
|
height: 165px;
|
|
border: 0;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 20px 0;
|
|
|
|
> div {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
font-family: "Source Han Sans SC";
|
|
}
|
|
> div:nth-child(2) {
|
|
font-size: 16px;
|
|
color: #ffffff;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
color: #00bedb;
|
|
line-height: 16px;
|
|
}
|
|
> div:nth-child(3) {
|
|
font-size: 34px;
|
|
font-family: "Agency FB";
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
line-height: 36px;
|
|
height: 40px;
|
|
}
|
|
.big-wraring-svg {
|
|
font-size: 40px;
|
|
}
|
|
}
|
|
.alarm-icon-block {
|
|
position: relative;
|
|
width: 49px;
|
|
height: 49px;
|
|
z-index: 1;
|
|
border: 2px solid #21ffff;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
justify-content: center;
|
|
top: -120px;
|
|
left: 155px;
|
|
background: #042fb4;
|
|
box-shadow: 0px 0px 60px 15px #012c9e;
|
|
> i {
|
|
color: #21ffff;
|
|
font-size: 30px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.mk-bottom {
|
|
height: 30px;
|
|
width: 100%;
|
|
background-image: url("../../../../assets/images/big/boxleft-bottom.png");
|
|
}
|
|
}
|
|
</style>
|