<template>
<div style="display:flex;margin-top:60px;">
<!--    <div style="margin-left:10px;color:#32c5e9;">-->
<!--        <dv-decoration-9 style="width:90px;height:90px;font-weight:600;" :dur="10" :color="['#32c5e9', '#238aa4']">{{deviceStatistic.deviceCount}}</dv-decoration-9>-->
<!--        <div style="text-align: center;margin-top:25px;">设备总数</div>-->
<!--    </div>-->
    <div style="margin:0 50px;color:#9fe6b8">
        <dv-decoration-9 style="width:90px;height:90px;font-weight:600;" :dur="10" :color="['#9fe6b8', '#70a181']">{{deviceStatistic.deviceOnlineCount}}%</dv-decoration-9>
        <div style="text-align: center;margin-top:25px;font-weight:400;color: #999999">在线率</div>
    </div>
    <div style="margin-right:50px;color:#ffdb5c">
        <dv-decoration-9 style="width:90px;height:90px;font-weight:600;" :dur="10" :color="['#ffdb5c', '#b39a41']">{{deviceStatistic.deviceOfflineCount}}%</dv-decoration-9>
        <div style="text-align: center;margin-top:25px;font-weight:400;color: #999999">离线率</div>
    </div>
    <div style="color:#fb7293;">
        <dv-decoration-9 style="width:90px;height:90px;font-weight:600;" :dur="10" :color="['#fb7293', '#ad4f65']">{{deviceStatistic.alertCount}}%</dv-decoration-9>
        <div style="text-align: center;margin-top:25px;font-weight:400;color: #999999">告警率</div>
    </div>
</div>
</template>

<script>
import {
    getDeviceStatistic, listDeviceShort,
} from "@/api/iot/device";
export default {
    data() {
        return {
            // 设备统计信息
            deviceStatistic: {
                deviceCount: 100,
                productCount: 100,
                eventCount: 100,
                alertCount: 100,
                deviceOnlineCount: 100,
                deviceOfflineCount: 100,
            }
        };
    },
    created() {
        this.getDeviceStatic()
    },
    beforeDestroy() {
        this.clearData()
    },
    methods: {
        clearData() {
            if (this.timer) {
                clearInterval(this.timer)
                this.timer = null
            }
        },
        getDeviceStatic() {
            listDeviceShort().then(response => {
                let data = response.rows;
                // 初始化在线和离线设备计数
                let onlineCount = 0;
                let offlineCount = 0;
                let totalCount = 0;

                // 遍历rows数组，计算在线和离线设备数量
                data.forEach(device => {
                    totalCount++;
                    if (device.status === 3) {
                        onlineCount++;
                    } else if (device.status === 4) {
                        offlineCount++;
                    }
                });

                // 计算在线率和离线率
                let onlineRate = ((onlineCount / totalCount) * 100).toFixed(1);
                let offlineRate = ((offlineCount / totalCount) * 100).toFixed(1);

                // 将计算结果存储到deviceStatistic对象中
                this.deviceStatistic.deviceCount = totalCount;
                this.deviceStatistic.deviceOnlineCount = onlineRate;
                this.deviceStatistic.deviceOfflineCount = offlineRate;

            }).then(() => {
                // 在listDeviceShort完成后，再调用getDeviceStatistic
                return getDeviceStatistic();
            }).then(response => {
                if (response.code == 200) {
                    // // 合并对象，避免覆盖已计算的在线率和离线率
                    // this.deviceStatistic = { ...this.deviceStatistic, ...response.data };
                    this.deviceStatistic.alertCount = response.data.alertCount;
                    this.deviceStatistic.deviceCount = response.data.deviceCount;
                    // 计算告警率并保留一位小数
                    this.deviceStatistic.alertCount = ((this.deviceStatistic.alertCount / this.deviceStatistic.deviceCount) * 100).toFixed(1);
                }
            });
        },

    },
};
</script>
