91 lines
2.3 KiB
Vue
91 lines
2.3 KiB
Vue
<template>
|
||
<div class="big-device-proportion-wrap">
|
||
<nav-temp htmlType="t1" :title="title">
|
||
<echarts-radar-wrap
|
||
slot="mk-center"
|
||
class="count-info"
|
||
:styles="'width: 100%; height: 200px;'"
|
||
eId="echartsGaugeDP"
|
||
:option="radarOption"
|
||
/>
|
||
</nav-temp>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import titleImg from "@/assets/images/big/b.png";
|
||
import EchartsRadarWrap from "./echartsRadar";
|
||
import { appDeviceStatistics } from "@/api/app";
|
||
import NavTemp from "./navTemp";
|
||
export default {
|
||
name: "DeviceProportionWrap",
|
||
components: {
|
||
EchartsRadarWrap,
|
||
NavTemp,
|
||
},
|
||
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: calc((100% - 20px) / 2);
|
||
height: 190px;
|
||
.count-info {
|
||
width: 100%;
|
||
height: 190px;
|
||
// background-image: url("../../../../assets/images/big/boxleft-center.png");
|
||
// background-size: contain;
|
||
padding-top: 10px;
|
||
}
|
||
}
|
||
</style>
|