<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>
