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