88 lines
2.3 KiB
Vue
88 lines
2.3 KiB
Vue
<template>
|
||
<div class="big-device-proportion-wrap">
|
||
<div class="title-t">{{title}}</div>
|
||
<echarts-radar-wrap :styles="'width: 100%; height: 230px;'" eId="echartsGaugeDP" :option="radarOption"></echarts-radar-wrap>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import titleImg from "@/assets/images/big/b.png";
|
||
import EchartsRadarWrap from "./echartsRadar";
|
||
import { appDeviceStatistics } from '@/api/app'
|
||
export default {
|
||
name: "DeviceProportionWrap",
|
||
components: {
|
||
EchartsRadarWrap
|
||
},
|
||
props: ['projectId'],
|
||
data() {
|
||
return {
|
||
list: [],
|
||
titleImg,
|
||
title: "所有设备占比分析",
|
||
radarOption: {
|
||
indicator: [
|
||
{ name: "物联网断路器", max: 100 },
|
||
{ name: "智能摄像机", max: 100 },
|
||
{ name: "智能电表", max: 100 },
|
||
{ name: "烟雾传感器", max: 100 },
|
||
{ name: "智能气表", max: 100 },
|
||
{ name: "智能电表", max: 100 },
|
||
{ name: "智能电表", max: 100 },
|
||
{ name: "智能水表", max: 100 }
|
||
],
|
||
seriesList: [
|
||
{
|
||
value: [],
|
||
name: "预算分配（Allocated Budget）"
|
||
}
|
||
]
|
||
}
|
||
};
|
||
},
|
||
watch: {
|
||
projectId(val) {
|
||
this.getDeviceProportionList()
|
||
}
|
||
},
|
||
created() {
|
||
this.getDeviceProportionList()
|
||
},
|
||
methods: {
|
||
getDeviceProportionList() {
|
||
appDeviceStatistics({ projectId: this.projectId }).then(res => {
|
||
const list = res.data;
|
||
this.radarOption.indicator = [];
|
||
this.radarOption.seriesList = [];
|
||
var _this = this;
|
||
for (var i = 0; i < list.length; i++) {
|
||
_this.radarOption.indicator.push({
|
||
name: list[i].deviceTypeName,
|
||
max: list[i].total <= 0 ? 1 : list[i].total
|
||
});
|
||
_this.radarOption.seriesList.push(list[i].thisTotal);
|
||
}
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss">
|
||
.big-device-proportion-wrap {
|
||
width: 100%;
|
||
height: 300px;
|
||
.title-t {
|
||
font-size: 16px;
|
||
letter-spacing: 1px;
|
||
height: 60px;
|
||
width: 100%;
|
||
background-size: cover;
|
||
display: flex;
|
||
justify-content: left;
|
||
padding-left: 45px;
|
||
align-items: center;
|
||
padding-bottom: 10px;
|
||
background-image: url("../../../../assets/images/big/b.png");
|
||
}
|
||
}
|
||
</style>
|