soc_web/src/views/iot/board/components/alarmRate.vue

<template>
  <div class="component_box">
    <div
      ref="chart"
      style="width: 100%; height: 100%"
      @mouseenter="handleMouseEnter"
      @mouseleave="handleMouseLeave"
    ></div>
  </div>
</template>
<script>
import { alarmRate } from "@/api/iot/board";
import * as echarts from "echarts";
export default {
  props: {
    orgId: {
      type: String,
      isRequired: true,
    },
  },
  data() {
    return {
      data: {
        normalCount: 0,
        alarmCount: 0,
      },
    };
  },

  components: {},

  computed: {},

  watch: {
    orgId: {
      deep: true,
      handler(val) {
        this.resetTimer();
        this.getData();
      },
    },
    data: {
      deep: true,
      handler() {
        this.initMap();
      },
    },
  },

  created() {
    this.refreshTime = 1 * 60 * 1000;
    this.isMouseOver = false;
  },

  async mounted() {
    window.addEventListener("resize", this.windowResize);
  },
  beforeDestroy() {
    this.timer && clearInterval(this.timer);
    this.timer = null;

    window.removeEventListener("resize", this.windowResize);
  },

  methods: {
    handleClick() {
      this.resetTimer();
      this.getData();
    },
    handleMouseEnter() {
      this.isMouseOver = true;
    },
    handleMouseLeave() {
      this.isMouseOver = false;
    },
    async getData() {
      let r = (await alarmRate(this.orgId)).data;
      this.data = r;
    },

    windowResize() {
      this.myChart && this.myChart.resize();
    },
    initMap() {
      this.myChart && this.myChart.dispose();
      let c = this.$refs["chart"];

      // 基于准备好的dom，初始化echarts实例
      this.myChart = echarts.init(c);
      let option = {
        title: {
          text: "设备告警状态",
          top: 18,
          left: '3%',
          textStyle: {
            color: "#fff",
            fontWeight:'normal',
            fontSize:16
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          right: 20,
          top: 18,
          data: ["告警", "正常"],
          textStyle: {
            color: "#fff",
          },
        },
        series: [
          {
            name: "设备告警状态",
            type: "pie",
            radius: ["0", "55%"],
            center: ["50%", "60%"],
            // color: ['#e72325', '#98e002', '#2ca3fd'],
            color: ["#F6A645", "#13D0B2"],
            selectedMode: true,
            selectedOffset: 4,
            // avoidLabelOverlap:false,
            // padAngle: 5,
            // emphasis:{
            //     label:{
            //         show:true
            //     }
            // },
            // itemStyle: {
            //   borderWidth: 2,
            //   borderColor: 'rgba(12,30,50,1)'
            //   emphasis: {
            //     shadowBlur: 10,
            //     shadowOffsetX: 0,
            //     shadowColor: "rgba(0,0,0,0,5)",
            //   },
            // },
            label: {
              color: "inherit",
              formatter: (param) => {
                return `${param.name}\n${
                  param.percent == null ? 0 : param.percent
                }%`;
              },
            },
            data: [
              {
                value: this.data.alarmCount,
                name: "告警",
                selected: true,
              },
              {
                value: this.data.normalCount,
                name: "正常",
              },
            ],
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      if (option && typeof option === "object") {
        this.myChart.setOption(option);
      }
    },

    resetTimer() {
      this.timer && clearInterval(this.timer);
      this.timer = setInterval(() => {
        if (this.isMouseOver) {
          return;
        }
        // this.activeName = getNextPeriod(this.types, this.activeName);
        this.getData();
      }, this.refreshTime);
    },
  },
};
</script>
<style scoped src="./../css/index.css"></style>