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'
export default {
    props: {
        orgId: {
            type: String,
            isRequired: true,
        },
    },
    data() {
        return {
            data: {
                normalCount: 0,
                alarmCount: 0
            },
            // activeName: types[0].value,
        };
    },

    components: {},

    computed: {},

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

    created() {
        this.refreshTime = 1 * 10 * 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
            );
            option = {
                title: {
                    text: "设备告警状态",
                    top: 35,
                    left: 20,
                    textStyle: {
                        fontSize: 18,
                        color: "#fff",
                    },
                },
                tooltip: {
                    trigger: "item",
                    formatter: "{a} <br/>{b}: {c} ({d}%)",
                },
                legend: {
                    right: 20,
                    top: 35,
                    data: ["告警", "正常"],
                    textStyle: {
                        color: "#fff",
                    },
                },
                series: [
                    {
                        name: "设备告警状态",
                        type: "pie",
                        radius: ["0", "60%"],
                        center: ["50%", "60%"],
                        // color: ['#e72325', '#98e002', '#2ca3fd'],
                        color: ["#F6A645", "#13D0B2", "#2ca3fd"],
                        label: {
                            normal: {
                                formatter: "{b}\n{d}%",
                            },
                        },
                        data: [
                            {
                                value: this.data.alarmCount,
                                name: "告警",
                            },
                            {
                                value: this.data.normalCount,
                                name: "正常",
                                selected: true,
                            },
                        ],
                    },
                ],
            };
            // 使用刚指定的配置项和数据显示图表。
            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>