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

<template>
    <div class="component_box" style="display: flex;" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
        <div ref="chart" style="width: 50%; height: 100%; "></div>
        <div class="health">
            <header class="header">
                <span>网点设备健康度检查</span>
                <!-- <h3><span>网点数：100</span></h3> -->
                <!-- <img src="img/end.png"></img> -->
                <!-- <span>已检查：90</span> -->
            </header>
            <main class="banklet_main">
                <!-- <img src="img/map.png" alt=""> -->
                <div class="item_box">
                    <span>网点数</span>
                    <div>
                        <i></i>
                        <h2>{{ healthSummary.total }}</h2>
                    </div>
                </div>
                <div class="item_box">
                    <span>已检</span>

                    <div>
                        <i></i>
                        <h2>{{ healthSummary.checkedCount }}</h2>
                    </div>
                </div>
                <div class="item_box">
                    <span>90分以上</span>
                    <div>
                        <i></i>
                        <h2>{{ healthSummary.over90Count }}</h2>
                    </div>
                </div>
                <div class="item_box">
                    <span>90及以下</span>
                    <div>
                        <i></i>
                        <h2>{{ healthSummary.notover90Count }}</h2>
                    </div>
                </div>
            </main>

            <header class="t_b_h_1">
                <span>网点健康度检查TOP3</span>
            </header>
            <main class="t_b_m_1" style="top:70%">
                <div v-for="(item, index) in healthRanking" :key="index">
                    <i>
                        <t>{{ index + 1 }}</t>
                    </i> {{ item.orgName }} {{ parseFloat(item.score).toFixed(2) }}分
                </div>
            </main>
        </div>
    </div>
</template>
<script>
import { deviceOnline, deviceHealth } from "@/api/iot/board";

export default {
    props: {
        orgId: {
            type: String,
            isRequired: true,
        },
    },
    data() {
        return {
            chartData: {
                total: [],
                onLineCount: [],
                name: [],
            },
            healthSummary: {
                total: 0,
                checkedCount: 0,
                over90Count: 0,
                notover90Count: 0,
            },
            healthRanking: [],
            isMouseOver: false
        };
    },

    components: {},

    computed: {},

    watch: {
        orgId: {
            deep: true,
            handler(val) {
                this.resetTimer();
                this.getData();
            },
        },
        chartData: {
            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: {
        handleMouseEnter() {
            this.isMouseOver = true;
        },
        handleMouseLeave() {
            this.isMouseOver = false;
        },
        async getData() {
            deviceOnline(this.orgId).then(r => {
                let data = r.data;
                let chartData = {
                    total: [],
                    onLineCount: [],
                    name: [],
                };

                for (let item of data) {
                    chartData.total.push(item.deviceCount);
                    chartData.onLineCount.push(item.completedCount);
                    // chartData.rate.push((item.completedRate * 100).toFixed(2));
                    chartData.name.push(item.orgName);
                }
                this.chartData = chartData;
            });

            deviceHealth(this.orgId).then(r => {
                this.healthSummary = r.data.healthSummary;
                this.healthRanking = r.data.healthRanking
            })
        },

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

            // 基于准备好的dom，初始化echarts实例
            this.myChart = echarts.init(
                c
                // document.getElementById("commAlarmEvent_Chart")
            );
            // var data = [70, 34, 60, 78, 69];
            // var titlename = [
            //     "监控主机",
            //     "报警主机",
            //     "动环主机",
            //     "对讲主机",
            //     "门禁主机",
            // ];
            // var valdata = [702, 406, 664, 793, 505];
            var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448"];
            option = {
                title: {
                    text: "设备在线率",
                    x: "center",
                    textStyle: {
                        color: "#FFF",
                    },
                    left: "6%",
                    top: "10%",
                },
                //图标位置
                grid: {
                    top: "20%",
                    left: "32%",
                },
                xAxis: {
                    show: false,
                },
                yAxis: [
                    {
                        show: true,
                        data: this.chartData.name,
                        inverse: true,
                        axisLine: {
                            show: false,
                        },
                        splitLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            color: "#fff",
                            formatter: (value, index) => {
                                return [`{lg|${index + 1}}  ` + "{title|" + value + "} "].join(
                                    "\n"
                                );
                            },
                            rich: {
                                lg: {
                                    backgroundColor: "#339911",
                                    color: "#fff",
                                    borderRadius: 15,
                                    // padding: 5,
                                    align: "center",
                                    width: 15,
                                    height: 15,
                                },
                            },
                        },
                    },
                    {
                        show: true,
                        inverse: true,
                        data: this.chartData.total,
                        axisLabel: {
                            textStyle: {
                                fontSize: 12,
                                color: "#fff",
                            },
                        },
                        axisLine: {
                            show: false,
                        },
                        splitLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                    },
                ],
                series: [
                    {
                        name: "条",
                        type: "bar",
                        yAxisIndex: 0,
                        data: this.chartData.onLineCount,
                        barWidth: 10,
                        itemStyle: {
                            normal: {
                                barBorderRadius: 20,
                                color: function (params) {
                                    var num = myColor.length;
                                    return myColor[params.dataIndex % num];
                                },
                            },
                        },
                        label: {
                            normal: {
                                show: true,
                                position: "inside",
                                formatter: "{c}%",
                            },
                        },
                    },
                    {
                        name: "框",
                        type: "bar",
                        yAxisIndex: 1,
                        barGap: "-100%",
                        data: [100, 100, 100, 100, 100],
                        barWidth: 15,
                        itemStyle: {
                            normal: {
                                color: "none",
                                borderColor: "#00c1de",
                                borderWidth: 3,
                                barBorderRadius: 15,
                            },
                        },
                    },
                ],
            };
            // 使用刚指定的配置项和数据显示图表。
            this.myChart.setOption(option);
        },

        resetTimer() {
            this.timer && clearInterval(this.timer);
            this.timer = setInterval(() => {
                if (this.isMouseOver) {
                    return;
                }
                this.getData();
            }, this.refreshTime);
        },
    },
};
</script>
<style scoped src="./../css/index.css"></style>
<style lang="scss" scoped>
.health {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 3%;

    ::v-deep .header {
        color: #fff;
        width: 100%;
        height: 12%;
        font-size: 20px;
    }

    ::v-deep .banklet_main {
        height: 40%;
        width: 100%;
    }

    ::v-deep .item_box {
        border: 1px dotted #f0ff00;
        border-radius: 5px;
        margin-top: 5%;
        height: 45%;
        width: 45%;
        float: left;
        display: flex;
        flex-direction: column;
        font-size: 14px;
    }


    ::v-deep .item_box:nth-child(even) {
        margin-left: 10%;
    }

    ::v-deep .item_box>span:first-child {
        line-height: 20px;
    }

    ::v-deep .item_box>div:last-child {
        // display: block;
        width: 100%;
        height: calc(100% - 20px);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    ::v-deep .item_box>div:last-child>i {
        width: 16px;
        height: 16px;
        display: inline-block;
        position: absolute;
        left: 20%;
    }

    ::v-deep .item_box:first-child>div:last-child>i {
        background: url("../img/t.png") no-repeat;
        background-size: 100% 100%;
    }

    ::v-deep .item_box:nth-child(2)>div:last-child>i {
        background: url("../img/s.png") no-repeat;
        background-size: 100% 100%;
    }

    ::v-deep .item_box:nth-child(3)>div:last-child>i {
        background: url("../img/j.png") no-repeat;
        background-size: 100% 100%;
    }

    ::v-deep .item_box:nth-child(4)>div:last-child>i {
        background: url("../img/g.png") no-repeat;
        background-size: 100% 100%;
    }
}

.t_b_m img {
    position: absolute;
    left: 52%;
    top: 22%;
    border-top: 1px dotted #f0ff00;
    padding: 0 0.18rem;
    padding-top: 20px;
    width: 3.19rem;
    height: 1.67rem;
}

.t_b_h_1 {
    position: absolute;
    font-size: 0.16rem;
    left: 54%;
    width: 50%;
    height: 2.1rem;
    top: 60%;
}

.t_b_h_1 span {
    position: absolute;
    color: #fff;
    top: 10%;
    font-size: 20px;
}

.t_b_h_1 img {
    position: absolute;
    width: 0.53rem;
    height: 0.53rem;
    top: 6%;
    left: 24%;
}

.t_b_h_1 h3 {
    font-size: 0.36rem;
    color: #f0ff00;
    position: absolute;
    left: 55%;
    top: 8%;
    width: 1rem;
}

.t_b_h_1 h3 span {
    font-size: 0.2rem;
    position: absolute;
    left: 50%;
    top: 28%;
    color: #0072ff;
}

.t_b_m_1 {
    position: absolute;
    font-size: 0.16rem;
    left: 54%;
    width: 50%;
    height: 2.1rem;
    top: 70%;
}

.t_b_m_1 div {
    margin-top: 15px;
    height: 20px;
    color: white;
    font-size: 14px;
}

.t_b_m_1 div>i {
    background-color: #339911;
    font-family: 仿宋体;
    width: 19px;
    display: inline-block;
    border-radius: 9.5px;
}

.t_b_m_1 div>i>t {
    left: 3px;
    position: relative;
}

.t_b_box,
.t_b_box1,
.t_b_box2,
.t_b_box3 {
    width: 35%;
    height: 10%;

    position: absolute;
}

.t_b_box {
    top: 25%;
    left: 56%;
}

.t_b_box span,
.t_b_box1 span,
.t_b_box2 span,
.t_b_box3 span {
    font-size: 0.14rem;
    color: #fff;
    position: absolute;
    left: 10%;
}

.t_b_box i,
.t_b_box1 i,
.t_b_box2 i,
.t_b_box3 i {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    left: 15%;
}



.t_b_box h2,
.t_b_box1 h2,
.t_b_box2 h2,
.t_b_box3 h2 {
    font-size: 0.18rem;
    color: #fff;
    position: absolute;
    top: 30%;
    left: 40%;
}

.t_b_box1 {
    top: 25%;
    left: 78%;
}

.t_b_box2 {
    top: 45%;
    left: 56%;
}

.t_b_box3 {
    top: 45%;
    left: 78%;
}
</style>