XAMYWXTUI/src/views/wel/index.vue

<template>
    <div>
        <el-row :gutter="10" style="margin-bottom: 0px;">
            <el-col :span="24">
                <!-- 重点监控信息 -->
                <el-card shadow="hover">
                    <div slot="header">
                        <i class="el-icon-star-on" style="color: lightcoral;"></i>
                        <span style="font-size: 18;color: #464646;">重点监控信息</span>
                    </div>
                    <el-row>
                        <el-col :span="6">
                            <el-card shadow="hover" style="width: 98%;height:280px">
                                <div ref="rtuInfoCountPieChart" style="width: 100%;height: 280px;">
                                </div>
                            </el-card>
                        </el-col>
                        <el-col :span="6">
                            <el-card shadow="hover" style="width: 98%;height: 280px;">
                                <div slot="header" class="clearfix">
                                    <span style="color: rgb(84, 112, 198);">监测点信息</span>
                                </div>
                                <div style="display: flex;flex-direction: column;justify-content: center;">
                                    <div><span style="margin-right: 10px;color: 0.9rem;">取用水户数量：</span> <el-button
                                            type="text" size="medium">{{ waterUseConsumerCount }}
                                        </el-button></div>

                                </div>
                                <div style="display: flex;flex-direction: column;justify-content: center;">
                                    <div><span style="margin-right: 10px;color: 0.9rem;">监测站数量：</span> <el-button
                                            type="text" size="medium">{{ monitorSiteCount }}
                                        </el-button></div>

                                </div>
                                <div style="display: flex;flex-direction: column;justify-content: center;">
                                    <div><span style="margin-right: 10px;color: 0.9rem;">监测点数量：</span> <el-button
                                            type="text" size="medium">{{ monitorPointCount }}
                                        </el-button></div>

                                </div>
                            </el-card>
                        </el-col>
                        <el-col :span="6">
                            <el-card shadow="hover" style="width: 98%;height: 280px;">
                                <div slot="header" class="clearfix">
                                    <span style="color: rgb(84, 112, 198);">监测点日上报率</span>
                                </div>
                                <div style="display: flex;flex-direction: column;justify-content: center;">

                                    <div><span style="margin-right: 10px;color: 0.9rem;">监测点数量：</span> <el-button
                                            type="text" size="medium">{{ monitorPointCount }}
                                        </el-button></div>
                                    <div><span style="margin-right: 10px;color: 0.9rem;">已上报监测点数量：</span> <el-button
                                            type="text" size="medium">{{ dayUpDataCount }}
                                        </el-button></div>
                                    <div><span style="margin-right: 10px;color: 0.9rem;">上报率：</span>
                                        <el-button type="text" size="medium">{{ dayUpDataPercent }}%
                                        </el-button>
                                    </div>
                                    <div style="color: lightcoral;font-size: 0.8rem;margin-top: 10px;">注：统计口径为上一个自然天</div>
                                </div>
                            </el-card>
                        </el-col>
                        <el-col :span="6">
                            <el-card shadow="hover" style="width: 98%;height: 280px;">
                                <div slot="header" class="clearfix">
                                    <span style="color: rgb(84, 112, 198);">监测点实时上报率</span>
                                </div>
                                <div style="display: flex;flex-direction: column;justify-content: center;">
                                    <div><span style="margin-right: 10px;color: 0.9rem;">监测点数量：</span> <el-button
                                            type="text" size="medium">{{ monitorPointCount }}
                                        </el-button></div>
                                    <div><span style="margin-right: 10px;color: 0.9rem;">已上报监测点数量：</span> <el-button
                                            type="text" size="medium">{{ hourUpDataCount }}
                                        </el-button></div>
                                    <div><span style="margin-right: 10px;color: 0.9rem;">上报率：</span>
                                        <el-button type="text" size="medium">{{ hourUpDataPercent }}%
                                        </el-button>
                                    </div>
                                    <div style="color: lightcoral;font-size: 0.8rem;margin-top: 10px;">注：统计口径为上一个整点小时</div>
                                </div>
                            </el-card>
                        </el-col>

                    </el-row>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="10" style="margin-bottom: 5px;">
            <el-col :span="12">
                <el-card shadow="hover" style="height: 400px;">
                    <div slot="header" class="clearfix">
                        <span>异常统计信息</span>
                    </div>
                    <avue-crud :option="option" :table-loading="loading" :data="data" ref="crud" v-model="form"
                        @cell-click="cellClick">
                    </avue-crud>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card shadow="hover" style="height: 400px;">
                    <div slot="header" class="clearfix">
                        <span>通知公告</span>
                        <el-button style="float: right; padding: 3px 0" type="text" @click="openMoreNotice">更多</el-button>
                    </div>
                    <div style="height: 160px;overflow-y: auto;">
                        <div v-for="(item, index) in noticeList" :key="index" class="notice-item">
                            <div>
                                <label>{{ item.title }}</label>
                            </div>
                            <div style="margin-top: 4px;">
                                <label class="notice-time">发布时间: {{ item.releaseTime }}</label>
                            </div>
                            <div style="margin-top: 4px;margin-bottom: 2px;">
                                <label style="font-size: 0.8rem;">{{
                                    item.content
                                }}</label>
                            </div>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-drawer title="通知公告信息" :visible.sync="moreNoticeDig" v-if="moreNoticeDig" size="50%"
            :close-on-click-modal="false" append-to-body>
            <todaynoticelist ref="todaynoticelist"></todaynoticelist>
        </el-drawer>
        <el-drawer title="异常测站信息" :visible.sync="warninglistDig" v-if="warninglistDig" size="50%"
            :close-on-click-modal="false" append-to-body>
            <warninglist ref="warninglist" :deptId="deptId"></warninglist>
        </el-drawer>
    </div>
</template>

<script>
import { getRtuStatusCountData, getRtuUpCountData, getWarnKindCountData, getWarnCountList } from "@/api/home/home.js";
import { todayOrderProcessList } from "@/api/business/order/process.js";
import { todayInspectionReportList } from "@/api/business/inspection/inspectionreport.js";
import { getLastList } from "@/api/notice/notice.js";
import { getStore } from '@/util/store.js';
import { getAppInfo } from "@/api/versionmanage/version.js";
import todaycheckorderprocesslist from "../business/order/todaycheckorderprocesslist.vue";
import uncomfirecheckorderlist from "../business/order/uncomfirecheckorderlist.vue";
import comfiredelaycheckorderlist from "../business/order/comfiredelaycheckorderlist.vue";
import processingcheckorderlist from "../business/order/processingcheckorderlist.vue";
import todaynspectionrportlist from "../business/inspection/todaynspectionrportlist.vue";
import todaynoticelist from "../notice/todaynoticelist.vue";
import reportcheckorderlist from "../business/order/reportcheckorderlist.vue"
import warninglist from "../business/warning/warninglist.vue";
import offlinewarnlist from "../business/warning/offlinewarnlist.vue";
import otherswarnlist from "../business/warning/otherswarnlist.vue";
import clockwarnlist from "../business/warning/clockwarnlist.vue";
import hourmissoutwarnlist from "../business/warning/hourmissoutwarnlist.vue";
import rainHourmissoutWarnListVue from "../business/warning/rainhourmissoutwarnlist.vue";
import riverHourmissoutWarnListVue from "../business/warning/riverhourmissoutwarnlist.vue";
import minupdelaywarnlist from "../business/warning/minupdelaywarnlist.vue";
import hourupdelaywarnlist from "../business/warning/hourupdelaywarnlist.vue";
import rainhourupdelaywarnlistVue from "../business/warning/rainhourupdelaywarnlist.vue";
import riverhourupdelaywarnlistVue from "../business/warning/riverhourupdelaywarnlist.vue";
import outlitervaluewarnlist from "../business/warning/outlitervaluewarnlist.vue";
import checkorderprocessdetail from "../business/order/checkorderprocessdetail.vue";
import inspectionreportdetail from "../business/inspection/inspectionreportdetail.vue";
import inspectionreportlistVue from "../business/inspection/inspectionreportlist.vue";
import { mapGetters } from "vuex";
export default {
    name: "home",
    components: {
        todaycheckorderprocesslist,
        todaynspectionrportlist,
        todaynoticelist,
        warninglist,
        offlinewarnlist,
        hourmissoutwarnlist,
        minupdelaywarnlist,
        hourupdelaywarnlist,
        uncomfirecheckorderlist,
        comfiredelaycheckorderlist,
        checkorderprocessdetail,
        inspectionreportdetail,
        inspectionreportlistVue,
        clockwarnlist,
        rainHourmissoutWarnListVue,
        riverHourmissoutWarnListVue,
        rainhourupdelaywarnlistVue,
        riverhourupdelaywarnlistVue,
        outlitervaluewarnlist,
        processingcheckorderlist,
        reportcheckorderlist,
        otherswarnlist
    },
    data() {
        return {
            adminPageStyle: false,
            warninglistDig: false,
            offlineWarnListDig: false,
            clockWarnListDig: false,
            hourmissoutWarnListDig: false,
            rainHourmissoutWarnListDig: false,
            riverHourmissoutWarnListDig: false,
            minupdelayWarnListDig: false,
            hourupdelayWarnListDig: false,
            rainHourupdelayWarnListDig: false,
            riverHourupdelayWarnListDig: false,
            outlterValueWarnListDig: false,
            uncomfireCheckOrderDig: false,
            comfireDelayCheckOrderDig: false,
            processingcheckorderlistDig: false,
            moreTodayOrderProcessDig: false,
            moreTodayInspectionReportDig: false,
            moreNoticeDig: false,
            checkorderprocessdetailDig: false,
            inspectionreportdetailDig: false,
            inspectionreportlistDig: false,
            reportcheckorderlistDig: false,
            othersWarnListDig: false,
            dialogTitle: '',
            deptId: 0,
            rtus: 0,
            form: {},
            selectionList: [],
            query: {},
            loading: false,
            waterUseConsumerCount: '',
            monitorSiteCount: '',
            monitorPointCount: '',
            dayUpDataCount: '',
            dayUpDataPercent: '',
            hourUpDataCount: '',
            hourUpDataPercent: '',
            data: [],
            option: {
                height: "420",
                align: "center",
                headerAlign: "center",
                tip: false,
                simplePage: true,
                searchShow: false,
                searchMenuSpan: 6,
                addBtn: false,
                tree: true,
                border: true,
                index: false,
                editBtn: false,
                delBtn: false,
                menu: false,
                dialogType: "drawer",
                dialogClickModal: false,
                columnBtn: false,
                refreshBtn: false,
                header: false,
                column: [
                    {
                        label: "地区",
                        prop: "adCity",
                        span: 24,
                        overHidden: true,
                    },
                    {
                        label: "监测点数量",
                        prop: "rtus",
                        span: 12,
                    },
                    {
                        label: "异常总数",
                        prop: "warnRtus",
                        span: 12,
                    },
                    {
                        label: "离线",
                        prop: "offlineRtus",
                        span: 12,
                        html: true,
                        formatter: (val) => {
                            if (val.offlineRtus && val.offlineRtus > 0) {
                                let n = val.offlineRtus / val.rtus * 100;
                                let num = new Number(n);
                                return '<span style="cursor:pointer;text-decoration-line: underline;"><b style="color:rgb(238,112,112)">' + val.offlineRtus + '</b> / ' + '<b style="color:rgb(84,123,201)">' + num.toFixed(1) + '%</b></span>'
                            } else {
                                return '<b>0</b>'
                            }

                        }
                    }, {
                        label: "其他异常",
                        prop: "otherWarnRtus",
                        span: 12,
                        html: true,
                        formatter: (val) => {
                            if (val.otherWarnRtus && val.otherWarnRtus > 0) {
                                let n = val.otherWarnRtus / val.rtus * 100;
                                let num = new Number(n);
                                return '<span style="cursor:pointer;text-decoration-line: underline;"><b style="color:rgb(238,112,112)">' + val.otherWarnRtus + '</b> / ' + '<b style="color:rgb(84,123,201)">' + num.toFixed(1) + '%</b></span>'
                            } else {
                                return '<b>0</b>'
                            }
                        }
                    },
                ],
            },
            appinfo: {
                apkUrl: '',
                apkQrUrl: '',
                version: ''
            },
            checkOrderReportId: '',
            inspectionReportId: '',
            realData: {
            },
            stompClient: null,
            layout: [],
            cache: [],
            editSw: false,
            dialog: false,
            id: "",
            guideForm: {},
            second: 0,
            timer: null,
            state: 5,
            todayOrderList: [],
            todayInspectionReportList: [],
            noticeList: [],
            userInfo: getStore({ name: 'userInfo' }) || [],
            rtuInfoCountPieMap: null,
            rtuInfoCountPieOption: {
                title: {
                    text: '测站状态统计信息',
                    subtext: '测站总数量',
                    left: 'center',
                    textStyle: {
                        fontWeight: 'normal',
                        fontSize: 16
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)',
                    textStyle: {
                        fontSize: 12
                    }
                },
                legend: {
                    bottom: 20,
                    left: 'center',
                    data: ['运行正常', '测站离线', '其他异常']
                },
                series: [
                    {
                        name: '状态信息',
                        type: 'pie',
                        radius: '40%',
                        center: ['50%', '50%'],
                        selectedMode: 'single',
                        data: [
                            {
                                value: 0,
                                percent: 0,
                                name: '运行正常',
                                label: {
                                    show: true,
                                    formatter(param) {
                                        // correct the percentage                                      
                                        return ' (' + param.value + ' / ' + param.percent.toFixed(1) + '%)';
                                    }
                                },
                                itemStyle: {
                                    //color: '#547bc9'
                                    color: 'rgba(145, 204, 122,1.0)'
                                }
                            },
                            {
                                value: 0,
                                percent: 0,
                                name: '测站离线',
                                label: {
                                    show: true,
                                    formatter(param) {
                                        // correct the percentage
                                        return ' (' + param.value + ' / ' + param.percent.toFixed(1) + '%)';
                                    }
                                },
                                itemStyle: {
                                    color: '#ff0000'
                                }
                            },
                            {
                                value: 0,
                                percent: 0,
                                name: '其他异常',
                                label: {
                                    show: true,
                                    formatter(param) {
                                        // correct the percentage
                                        return ' (' + param.value + ' / ' + param.percent.toFixed(1) + '%)';
                                    }
                                },
                                itemStyle: {
                                    // color: '#ee7070'
                                    color: 'rgba(250, 200, 88,1.0)'
                                }
                            },
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            },
            rtuDataUpCountMap: null,
            rtuDataUpCountOption: {
                title: {
                    text: '测站上报率统计信息',
                    subtext: '统计口径为上一个自然天',
                    left: 'center',
                    textStyle: {
                        fontWeight: 'normal',
                        fontSize: 16
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    showContent: true,
                    formatter: function (params) {
                        //console.log(JSON.stringify(params))
                        return '<b>' + params[0].name + '数量:' + params[0].data.value + '</b><br/><b>上报数量:' + params[1].data.value + '/' + params[1].data.percent + '</b><br/><b>点击打开列表页</b>';
                    },
                    textStyle: {
                        fontSize: 10,
                    }
                },
                legend: {
                    show: true,
                    bottom: 20,

                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '18%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01]
                },
                yAxis: {
                    type: 'category',
                    data: ['墒情站', '水位站', '雨量站']
                },
                series: [
                    {
                        name: '测站数量',
                        type: 'bar',
                        data: [{
                            value: 0,
                            showpercent: false,
                            percent: 0
                        }, {
                            value: 0,
                            showpercent: false,
                            percent: 0
                        }, {
                            value: 0,
                            showpercent: false,
                            percent: 0
                        }],
                        itemStyle: {
                            color: 'rgba(84, 112, 198,1.0)'
                        },
                        label: {
                            show: true,
                            position: 'insideLeft',
                            formatter(params) {
                                if (params.data.showpercent) {
                                    return '    ' + params.data.value + ' / ' + params.data.percent + '%';
                                } else {
                                    return '    ' + params.data.value;
                                }



                            }
                        },
                    },
                    {
                        name: '上报数量',
                        type: 'bar',
                        data: [{
                            value: 0,
                            showpercent: true,
                            percent: 0
                        }, {
                            value: 0,
                            showpercent: true,
                            percent: 0
                        }, {
                            value: 0,
                            showpercent: true,
                            percent: 0
                        }],
                        itemStyle: {
                            color: 'rgba(145, 204, 122,1.0)'
                        },
                        label: {
                            show: true,
                            position: 'insideLeft',
                            formatter(params) {

                                if (params.data.showpercent) {
                                    return '    ' + params.data.value + ' / ' + params.data.percent + '%';
                                } else {
                                    return '    ' + params.data.value;
                                }



                            }
                        },
                    }
                ]
            },
            checkOrderMap: null,
            checkOrderCountOption: {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                    },
                    showContent: true,
                    formatter: function (params) {
                        //console.log(JSON.stringify(params))
                        if (params[0].data.showpercent) {
                            return '<b>' + params[0].name + ':' + params[0].data.value + '</b><br/><b>百分比:' + params[0].data.percent + '</b><br/><b>点击打开列表页</b>';
                        } else {
                            return "点击跳转到维修任务管理页面";
                        }
                    },
                    textStyle: {
                        fontSize: 10
                    }
                },
                title: {
                    text: '维修任务统计信息',
                    left: 'center',
                    subtext: '实时统计',
                    textStyle: {
                        fontWeight: 'normal',
                        fontSize: 16
                    }
                    // textStyle: {
                    //     fontSize: 16,
                    //     fontWeight: "bold",
                    //     color: "#464646",
                    // }
                },
                color: ['#5470c6'],
                yAxis: {
                    type: 'category',
                    data: ['已处理', '处理中', '超时未确认任务', '未确认任务', '维修任务总量']
                },
                xAxis: {
                    type: 'value',

                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '18%',
                    containLabel: true
                },
                series: [
                    {
                        data: [
                            {
                                value: 0,
                                itemStyle: {
                                    color: 'rgba(145, 204, 122,1.0)'
                                },
                                showpercent: true,
                                percent: 0
                            },
                            {
                                value: 0,
                                itemStyle: {
                                    color: 'rgba(155, 208, 229,1.0)'
                                },
                                showpercent: true,
                                percent: 0
                            },
                            {
                                value: 0,
                                itemStyle: {
                                    color: 'rgba(238, 122, 122,1.0)'
                                },
                                showpercent: true,
                                percent: 0
                            },
                            {
                                value: 0,
                                itemStyle: {

                                    color: 'rgba(250, 200, 88,1.0)'
                                },
                                showpercent: true,
                                percent: 0
                            },
                            {
                                value: 0,
                                itemStyle: {
                                    color: 'rgba(84, 112, 198,1.0)'
                                },
                                showpercent: false,
                                percent: 0
                            },
                        ],
                        type: 'bar',
                        barWidth: 20,
                        label: {
                            show: true,
                            position: 'insideLeft',
                            formatter(params) {
                                if (params.data.showpercent) {
                                    return '    ' + params.data.value + ' / ' + params.data.percent + '%';
                                } else {
                                    return '    ' + params.data.value;
                                }

                            }
                        },
                    }
                ]
            },
            equipmentInspectionChartMap: null,
            equipmentInspectionCountOption: {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                    },
                    showContent: true,
                    formatter: function (params) {
                        // console.log(JSON.stringify(params))
                        if (params[0].data.showpercent) {
                            // return "点击柱状图可查看详情";
                            return '<b>已巡检:' + params[0].data.value + '</b><br/><b>百分比:' + params[0].data.percent + '</b><br/><b>点击打开列表页</b>';
                        } else {
                            return "点击跳转到设备巡检管理页面";
                        }
                    },
                    textStyle: {
                        fontSize: 10
                    }
                },
                title: {
                    text: '本年度设备巡检统计信息',
                    left: 'center',
                    subtext: '实时统计',
                    textStyle: {
                        fontWeight: 'normal',
                        fontSize: 16
                    }
                    // textStyle: {
                    //     fontSize: 16,
                    //     fontWeight: "bold",
                    //     color: "#464646",
                    // }
                },
                color: ['#5470c6'],
                yAxis: {
                    type: 'category',
                    data: ['汛中（二）已巡检', '汛中（一）已巡检', '汛前已巡检', '需巡检站点数量']
                },
                xAxis: {
                    type: 'value',

                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '18%',
                    containLabel: true
                },
                series: [
                    {
                        data: [
                            {
                                value: 0,
                                itemStyle: {
                                    color: 'rgba(145, 204, 122,1.0)'
                                },
                                showpercent: true,
                                percent: 0
                            },
                            {
                                value: 0,
                                itemStyle: {
                                    color: 'rgba(145, 204, 122,1.0)'
                                },
                                showpercent: true,
                                percent: 0
                            },
                            {
                                value: 0,
                                itemStyle: {
                                    color: 'rgba(145, 204, 122,1.0)'
                                },
                                showpercent: true,
                                percent: 4
                            },
                            {
                                value: 0,
                                itemStyle: {
                                    color: 'rgba(84, 112, 198,1.0)'
                                },
                                showpercent: false,
                                percent: 0
                            },
                        ],
                        type: 'bar',
                        barWidth: 20,
                        label: {
                            show: true,
                            position: 'insideLeft',
                            formatter(params) {
                                if (params.data.showpercent) {
                                    return '    ' + params.data.value + ' / ' + params.data.percent + '%';
                                } else {
                                    return '    ' + params.data.value;
                                }

                            }
                        },
                    }
                ]
            },
            rtuWarnCountMap: null,
            rtuWarnCountOption: {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                    },
                    showContent: true,
                    formatter: function (params) {
                        // console.log(JSON.stringify(params))
                        if (params[0].data.showpercent) {
                            //return "点击柱状图可查看详情";
                            return '<b>' + params[0].name + ':' + params[0].data.value + '</b><br/><b>百分比:' + params[0].data.percent + '</b><br/><b>点击打开列表页</b>';
                        } else {
                            return '<b>' + params[0].name + ':' + params[0].data.value + '</b><br/><b>点击打开列表页</b>';
                        }
                    },
                    textStyle: {
                        fontSize: 10
                    }
                },
                title: {

                    text: '测站异常分类统计信息',
                    left: 'center',
                    subtext: '实时统计',
                    textStyle: {
                        fontWeight: 'normal',
                        fontSize: 16
                    }
                    // textStyle: {
                    //     fontSize: 16,
                    //     fontWeight: "bold",
                    //     color: "#464646",
                    // }
                },
                color: ['#5470c6'],
                yAxis: {
                    type: 'category',
                    data: ['疑似异常值', '水位站小时报上报延时', '雨量站小时报上报延时', '5分钟上报延时', '水位站小时报漏报', '雨量站小时报漏报', '时钟异常', '离线', '异常测站总数']
                },
                xAxis: {
                    type: 'value',
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '10%',
                    containLabel: true
                },
                series: [
                    {
                        data: [
                            {
                                value: 0,
                                itemStyle: {
                                    color: 'rgba(238, 122, 122,1.0)'

                                },
                                showpercent: true,
                                percent: 0
                            },
                            {
                                value: 0,
                                itemStyle: {
                                    color: 'rgba(238, 122, 122,1.0)'

                                },
                                showpercent: true,
                                percent: 0
                            },
                            {
                                value: 0,
                                itemStyle: {
                                    color: 'rgba(238, 122, 122,1.0)'

                                },
                                showpercent: true,
                                percent: 0
                            },
                            {
                                value: 0,
                                itemStyle: {
                                    color: 'rgba(238, 122, 122,1.0)'

                                },
                                showpercent: true,
                                percent: 0
                            },
                            {
                                value: 0,
                                itemStyle: {
                                    color: 'rgba(238, 122, 122,1.0)'

                                },
                                showpercent: true,
                                percent: 0
                            },
                            {
                                value: 0,
                                itemStyle: {
                                    color: 'rgba(238, 122, 122,1.0)'

                                },
                                showpercent: true,
                                percent: 0
                            },
                            {
                                value: 0,
                                itemStyle: {
                                    color: 'rgba(238, 122, 122,1.0)'

                                },
                                showpercent: true,
                                percent: 0
                            },
                            {
                                value: 0,
                                itemStyle: {
                                    color: 'rgba(238, 122, 122,1.0)'
                                },
                                showpercent: true,
                                percent: 0
                            },
                            {
                                value: 0,
                                itemStyle: {

                                    color: 'rgba(84, 112, 198,1.0)'
                                },
                                showpercent: false,
                                percent: 0
                            },
                        ],
                        type: 'bar',
                        barWidth: 20,
                        label: {
                            show: true,
                            position: 'insideLeft',
                            formatter(params) {
                                if (params.data.showpercent) {
                                    return '    ' + params.data.value + ' / ' + params.data.percent + '%';
                                } else {
                                    return '    ' + params.data.value;
                                }

                            }
                        },
                    }
                ]
            },
        };
    },
    created() {
        // let u = getStore({ name: 'userInfo' });
        //console.log(JSON.stringify(this.userInfo));
        // this.getData();
        // if (this.userInfo.role_name === "sys_admin") {
        //     this.adminPageStyle = true;
        // }
        this.$nextTick(() => {
            this.loadData();
        });
    },
    computed: {
        ...mapGetters(["userInfo"]),
    },
    mounted() {
        // console.log("mounted ++++++++++++++++++++");
        // this.initWebsocket();
        var that = this;
        let chart = this.$refs.rtuInfoCountPieChart;
        if (chart) {
            this.rtuInfoCountPieMap = this.$echarts.init(chart);
            this.rtuInfoCountPieMap.setOption(this.rtuInfoCountPieOption);
            // this.rtuInfoCountPieMap.off('click');
            // this.rtuInfoCountPieMap.on('click', function (p) {
            //     console.log(p)
            //     if (p.name === '设备异常') {
            //         that.warninglistDig = true;
            //         that.$nextTick(() => {
            //             that.$refs['warninglist'].init();
            //         });
            //     }
            // })
        }

        chart = this.$refs.rtuDataUpCountChart;
        if (chart) {
            this.rtuDataUpCountMap = this.$echarts.init(chart);
            this.rtuDataUpCountMap.setOption(this.rtuDataUpCountOption);
            // this.rtuDataUpCountMap.off('click');
            // this.rtuDataUpCountMap.on('click', function (p) {
            //     console.log(p)

            // })
            this.rtuDataUpCountMap.getZr().off('click');
            this.rtuDataUpCountMap.getZr().on('click', function (p) {
                let pointInPixel = [p.offsetX, p.offsetY];
                if (that.rtuDataUpCountMap.containPixel('grid', pointInPixel)) {
                    let yIndex = that.rtuDataUpCountMap.convertFromPixel({ seriesIndex: 0 }, [p.offsetX, p.offsetY])[1];
                    //let  yData=that.checkOrderCountOption.yAxis.data[yIndex];//当前点击柱子的数据
                    //   let value = that.rtuDataUpCountOption.series[0].data[yIndex].value;
                    if (yIndex == 2) {
                        that.$router.push({ path: '/business/data/rainDataCache' });
                    } else if (yIndex == 1) {
                        that.$router.push({ path: '/business/data/riverDataCache' });
                    } else if (yIndex == 0) {
                        that.$router.push({ path: '/business/data/groundDataCache' });
                    }
                }
            });
        }

        chart = this.$refs.checkOrderChart;
        if (chart) {
            this.checkOrderMap = this.$echarts.init(chart);
            this.checkOrderMap.setOption(this.checkOrderCountOption);
            this.checkOrderMap.getZr().off('click');
            this.checkOrderMap.getZr().on('click', function (p) {
                //console.log("checkOrderChart  zr ++++++++++++++++++++++++++++++++++++")
                let pointInPixel = [p.offsetX, p.offsetY];
                if (that.checkOrderMap.containPixel('grid', pointInPixel)) {
                    let yIndex = that.checkOrderMap.convertFromPixel({ seriesIndex: 0 }, [p.offsetX, p.offsetY])[1];
                    //let  yData=that.checkOrderCountOption.yAxis.data[yIndex];//当前点击柱子的数据
                    let value = that.checkOrderCountOption.series[0].data[yIndex].value;
                    if (yIndex == 4) {
                        //console.log("维修数量 index " + yIndex)
                        that.$router.push({ path: '/business/order/checkorderlist' });
                    } else if (yIndex == 3) {
                        if (value > 0) {
                            //console.log("未确认 index " + yIndex)
                            that.uncomfireCheckOrderDig = true;
                            that.$nextTick(() => {
                                that.$refs["uncomfirecheckorderlist"].init();
                            });
                        } else {
                            that.$message.warning("未确认维修任务暂无数据");
                        }
                    } else if (yIndex == 2) {
                        if (value > 0) {
                            //console.log("超时未确认 index " + yIndex)
                            that.comfireDelayCheckOrderDig = true;
                            that.$nextTick(() => {
                                that.$refs["comfiredelaycheckorderlist"].init();
                            });
                        } else {
                            that.$message.warning("超时未确认维修任务暂无数据");
                        }
                    } else if (yIndex == 1) {
                        if (value > 0) {
                            //console.log("处理中 index " + yIndex)
                            that.processingcheckorderlistDig = true;
                            that.$nextTick(() => {
                                that.$refs["processingcheckorderlist"].init();
                            });
                        } else {
                            that.$message.warning("处理中暂无数据");
                        }
                    } else if (yIndex == 0) {
                        if (value > 0) {
                            // console.log("已处理 index " + yIndex)
                            that.reportcheckorderlistDig = true;
                            that.$nextTick(() => {
                                that.$refs["reportcheckorderlist"].init();
                            });
                        } else {
                            that.$message.warning("已处理暂无数据");
                        }
                    }
                }
            });

            // this.checkOrderMap.off('click');
            // this.checkOrderMap.on('click', function (p) {
            //     console.log("checkOrderChart++++++++++++++++++++++++++++++++++++")
            //     if (p.name === '维修任务数量') {
            //         that.$router.push({ name: 'checkordermanagepage' });
            //     } else if (p.name === '维修中') {
            //     } else if (p.name === '未确认任务') {
            //         that.uncomfireCheckOrderDig = true;
            //         that.$nextTick(() => {
            //             that.$refs["uncomfirecheckorderlist"].init();
            //         });
            //     } else if (p.name === '超时未确认任务') {
            //         that.comfireDelayCheckOrderDig = true;
            //         that.$nextTick(() => {
            //             that.$refs["comfiredelaycheckorderlist"].init();
            //         });
            //     }
            // })
        }
        chart = this.$refs.equipmentInspectionCountChart;
        if (chart) {
            this.equipmentInspectionChartMap = this.$echarts.init(chart);
            this.equipmentInspectionChartMap.setOption(this.equipmentInspectionCountOption);
            this.equipmentInspectionChartMap.getZr().off('click');
            this.equipmentInspectionChartMap.getZr().on('click', function (p) {
                //console.log("checkOrderChart  zr ++++++++++++++++++++++++++++++++++++")
                let pointInPixel = [p.offsetX, p.offsetY];
                if (that.equipmentInspectionChartMap.containPixel('grid', pointInPixel)) {
                    let yIndex = that.equipmentInspectionChartMap.convertFromPixel({ seriesIndex: 0 }, [p.offsetX, p.offsetY])[1];
                    //let yData = that.equipmentInspectionCountOption.yAxis.data[yIndex];//当前点击柱子的数据
                    let value = that.equipmentInspectionCountOption.series[0].data[yIndex].value;
                    // console.log(" yData " + value)
                    if (yIndex == 3) {
                        //console.log("巡检数量 index " + yIndex)
                        that.$router.push({ path: '/business/inspection/index' });
                    } else if (yIndex == 2) {

                        if (value > 0) {
                            // console.log("汛前 index " + yIndex)
                            that.rainSeasonKind = 1;
                            that.inspectionreportlistDig = true;
                            that.dialogTitle = '汛前已巡检信息';
                            that.$nextTick(() => {
                                that.$refs["inspectionreportlist"].init();
                            });

                        } else {
                            that.$message.warning("汛前巡检暂无上报数据");
                        }
                    } else if (yIndex == 1) {
                        if (value > 0) {
                            //console.log("汛中一 index " + yIndex)
                            that.rainSeasonKind = 2;
                            that.inspectionreportlistDig = true;
                            that.dialogTitle = '汛中（一）已巡检信息';
                            that.$nextTick(() => {
                                that.$refs["inspectionreportlist"].init();
                            });
                        } else {
                            that.$message.warning("汛中第一次巡检暂无上报数据");
                        }
                    } else if (yIndex == 0) {
                        if (value > 0) {
                            // console.log("汛中二 index " + yIndex)
                            that.rainSeasonKind = 3;
                            that.inspectionreportlistDig = true;
                            that.dialogTitle = '汛中（二）已巡检信息';
                            that.$nextTick(() => {
                                that.$refs["inspectionreportlist"].init();
                            });
                        } else {
                            that.$message.warning("汛中第二次巡检暂无上报数据");
                        }
                    }
                }
            });

            // this.equipmentInspectionChartMap.off('click')
            // this.equipmentInspectionChartMap.on('click', function (p) {
            //     console.log(p)
            // })
        }

        chart = this.$refs.rtuWarnCountChart;
        if (chart) {
            this.rtuWarnCountMap = this.$echarts.init(chart);
            this.rtuWarnCountMap.setOption(this.rtuWarnCountOption);
            this.rtuWarnCountMap.getZr().off('click');
            this.rtuWarnCountMap.getZr().on('click', function (p) {
                // console.log(p)
                let pointInPixel = [p.offsetX, p.offsetY];
                if (that.rtuWarnCountMap.containPixel('grid', pointInPixel)) {
                    let yIndex = that.rtuWarnCountMap.convertFromPixel({ seriesIndex: 0 }, [p.offsetX, p.offsetY])[1];
                    let name = that.rtuWarnCountOption.yAxis.data[yIndex];
                    let value = that.rtuWarnCountOption.series[0].data[yIndex].value;
                    if (name === '异常测站总数') {
                        if (value > 0) {
                            that.warninglistDig = true;
                            that.$nextTick(() => {
                                that.$refs["warninglist"].init();
                            });
                        } else {
                            that.$message.warning("暂无异常数据");
                        }
                    } else if (name === '离线') {
                        if (value > 0) {
                            that.offlineWarnListDig = true;
                            that.$nextTick(() => {
                                that.$refs["offlinewarnlist"].init();
                            });
                        } else {
                            that.$message.warning("暂无异常数据");
                        }
                    } else if (name === '时钟异常') {
                        if (value > 0) {
                            that.clockWarnListDig = true;
                            that.$nextTick(() => {
                                that.$refs["clockwarnlist"].init();
                            });
                        } else {
                            that.$message.warning("暂无异常数据");
                        }
                    } else if (name === '雨量站小时报漏报') {
                        if (value > 0) {
                            that.rainHourmissoutWarnListDig = true;
                            that.$nextTick(() => {
                                that.$refs["rainHourmissoutWarnList"].init();
                            });
                        } else {
                            that.$message.warning("暂无异常数据");
                        }
                    } else if (name === '水位站小时报漏报') {
                        if (value > 0) {
                            that.riverHourmissoutWarnListDig = true;
                            that.$nextTick(() => {
                                that.$refs["riverHourmissoutWarnList"].init();
                            });
                        } else {
                            that.$message.warning("暂无异常数据");
                        }
                    } else if (name === '5分钟上报延时') {
                        if (value > 0) {
                            that.minupdelayWarnListDig = true;
                            that.$nextTick(() => {
                                that.$refs["minupdelaywarnlist"].init();
                            });
                        } else {
                            that.$message.warning("暂无异常数据");
                        }
                    } else if (name === '雨量站小时报上报延时') {
                        if (value > 0) {
                            that.rainHourupdelayWarnListDig = true;
                            that.$nextTick(() => {
                                that.$refs["rainhourupdelaywarnlist"].init();
                            });
                        } else {
                            that.$message.warning("暂无异常数据");
                        }
                    } else if (name === '水位站小时报上报延时') {
                        if (value > 0) {
                            that.riverHourupdelayWarnListDig = true;
                            that.$nextTick(() => {
                                that.$refs["riverhourupdelaywarnlist"].init();
                            });
                        } else {
                            that.$message.warning("暂无异常数据");
                        }
                    } else if (name === '疑似异常值') {
                        if (value > 0) {
                            that.outlterValueWarnListDig = true;
                            that.$nextTick(() => {
                                that.$refs["outlitervaluewarnlist"].init();
                            });
                        } else {
                            that.$message.warning("暂无异常数据");
                        }
                    }
                }
            })
        }


    },
    beforeDestroy() {
        // console.log("beforeDestroy ++++++++++++++++++++");
        //  this.closeSocket();
        if (this.timer != null) {
            // console.log("clear timer ++++++++++++++ ")
            clearInterval(this.timer);
            this.timer = null;
        }
    },
    methods: {
        loadData() {
            this.getRtuStatusCountInfo();
            this.getRtuUpCountInfo();
            this.getWarnCountInfo();
            this.getNoticeInfo();
            // if (this.timer == null) {
            //     this.timer = setInterval(this.timeCall, 30000);
            // }
        },
        timeCall() {
            //console.log("time ++++++++++++++++++++");
            this.getRtuStatusCountInfo();
            this.getRtuUpCountInfo();
            this.getCheckOrderCountInfo();
            this.getInspectionReportCountInfo();
            if (this.adminPageStyle) {
                this.getWarnCountInfo();
            } else {
                this.getWarnKindCountInfo();
            }
            this.getTodayOrderProcessInfo();
            this.getTodayInspectionReportInfo();
            this.getNoticeInfo();
            this.getAppVersionInfo();
        },
        close() {
            this.dialog = false;
        },
        cellClick(row, column, cell, event) {
            // console.log("cellClick event  " + JSON.stringify(event));
            //  console.log("cellClick " + JSON.stringify(row));
            if (event.isTrusted) {
                if (column.label === '测站离线') {
                    if (row.offlineRtus) {
                        this.deptId = row.deptId;
                        this.offlineWarnListDig = true;
                        //  console.log("warn offline " + this.deptId)
                        this.$nextTick(() => {
                            this.$refs["offlinewarnlist"].init();
                        });
                    }
                } else if (column.label === '其他异常') {
                    if (row.otherWarnRtus) {
                        this.deptId = row.deptId;
                        this.othersWarnListDig = true;
                        this.$nextTick(() => {
                            this.$refs["otherswarnlistref"].init();
                        });

                    }
                }
            }
        },
        openMoreTodayOrderProcess() {
            this.moreTodayOrderProcessDig = true;
            this.$nextTick(() => {
                this.$refs["todaycheckorderprocesslist"].init();
            });
        },
        openMoreTodayInspectionReport() {
            this.moreTodayInspectionReportDig = true;
            this.$nextTick(() => {
                this.$refs["todaynspectionrportlist"].init();
            });
        },
        openMoreNotice() {
            this.moreNoticeDig = true;
            this.$nextTick(() => {
                this.$refs["todaynoticelist"].init();
            });
        },
        openCheckOrderReportDetail(item) {
            this.checkOrderReportId = item.orderId;
            this.checkorderprocessdetailDig = true;
            this.$nextTick(() => {
                this.$refs["checkorderprocessdetail"].init();
            });
        },
        openInspectionReportDetail(item) {
            this.inspectionReportId = item.id;
            this.inspectionreportdetailDig = true;
            this.$nextTick(() => {
                this.$refs["inspectionreportdetail"].init();
            });
        },
        downloadApk() {
            if (this.appinfo.apkUrl !== '') {
                window.open(this.appinfo.apkUrl);
            }
        },
        getWarnCountInfo() {
            getWarnCountList().then((res) => {
                this.data = res.data.data;
            });
        },
        getRtuStatusCountInfo() {
            getRtuStatusCountData().then((res) => {
                //   console.log("status count " + JSON.stringify(res.data))
                if (res.data.code === 200) {
                    let data = res.data.data;
                    this.waterUseConsumerCount = data.waterUseConsumers;
                    this.monitorSiteCount = data.monitorSites;
                    this.monitorPointCount = data.monitorPoints;


                    this.rtuInfoCountPieOption.title.subtext = "监测点数量【" + data.monitorPoints + "】";

                    //正常测站
                    this.rtuInfoCountPieOption.series[0].data[0].value = data.monitorSites - data.warnRtus;
                    let num = new Number((data.monitorSites - data.warnRtus) / data.monitorSites * 100);
                    this.rtuInfoCountPieOption.series[0].data[0].percent = num.toFixed(2);
                    //离线
                    this.rtuInfoCountPieOption.series[0].data[1].value = data.offlineRtus;
                    let num2 = new Number(data.offlineRtus / data.monitorSites * 100);
                    this.rtuInfoCountPieOption.series[0].data[1].percent = num2.toFixed(2);

                    //其他异常
                    this.rtuInfoCountPieOption.series[0].data[2].value = data.warningRtus - data.offlineRtus;
                    let num3 = new Number((data.warningRtus - data.offlineRtus) / data.rtus * 100);
                    this.rtuInfoCountPieOption.series[0].data[2].percent = num3.toFixed(2);

                    this.rtuInfoCountPieMap.setOption(this.rtuInfoCountPieOption);
                }
            });
        },
        getRtuUpCountInfo() {
            getRtuUpCountData().then((res) => {
                //  console.log("up count " + JSON.stringify(res.data))
                if (res.data.code === 200) {
                    let data = res.data.data;
                    this.monitorPointCount = data.monitorPoints;
                    this.dayUpDataCount = data.dayUpDataCount;
                    let num = new Number(this.dayUpDataCount / this.monitorPointCount * 100);
                    this.dayUpDataPercent = num.toFixed(2);
                    this.hourUpDataCount = data.hourUpDataCount;
                    num = new Number(this.hourUpDataCount / this.monitorPointCount * 100);
                    this.hourUpDataPercent = num.toFixed(2);
                }
            });

        },

        getWarnKindCountInfo() {
            getWarnKindCountData().then((res) => {
                //  console.log("warn kind count " + JSON.stringify(res.data))
                if (res.data.code === 200) {
                    let data = res.data.data;
                    this.rtuWarnCountOption.series[0].data[8].value = data.warnRtus;

                    let num = new Number(data.offlineRtus / data.warnRtus * 100);
                    this.rtuWarnCountOption.series[0].data[7].value = data.offlineRtus;
                    this.rtuWarnCountOption.series[0].data[7].percent = num.toFixed(1);

                    num = new Number(data.clockWarn / data.warnRtus * 100);
                    this.rtuWarnCountOption.series[0].data[6].value = data.clockWarn;
                    this.rtuWarnCountOption.series[0].data[6].percent = num.toFixed(1);

                    num = new Number(data.rainUpMissOut / data.warnRtus * 100);
                    this.rtuWarnCountOption.series[0].data[5].value = data.rainUpMissOut;
                    this.rtuWarnCountOption.series[0].data[5].percent = num.toFixed(1);

                    num = new Number(data.riverUpMissOut / data.warnRtus * 100);
                    this.rtuWarnCountOption.series[0].data[4].value = data.riverUpMissOut;
                    this.rtuWarnCountOption.series[0].data[4].percent = num.toFixed(1);


                    num = new Number(data.minUpDelay / data.warnRtus * 100);
                    this.rtuWarnCountOption.series[0].data[3].value = data.minUpDelay;
                    this.rtuWarnCountOption.series[0].data[3].percent = num.toFixed(1);


                    num = new Number(data.rainHourUpDelay / data.warnRtus * 100);
                    this.rtuWarnCountOption.series[0].data[2].value = data.rainHourUpDelay;
                    this.rtuWarnCountOption.series[0].data[2].percent = num.toFixed(1);

                    num = new Number(data.riverHourUpDelay / data.warnRtus * 100);
                    this.rtuWarnCountOption.series[0].data[1].value = data.riverHourUpDelay;
                    this.rtuWarnCountOption.series[0].data[1].percent = num.toFixed(1);

                    num = new Number(data.outlierValue / data.warnRtus * 100);
                    this.rtuWarnCountOption.series[0].data[0].value = data.outlierValue;
                    this.rtuWarnCountOption.series[0].data[0].percent = num.toFixed(1);

                    this.rtuWarnCountMap.setOption(this.rtuWarnCountOption);
                }
            });
        },
        getTodayOrderProcessInfo() {
            todayOrderProcessList().then((res) => {
                this.todayOrderList = [];
                let showCount = 3;
                for (let i = 0; i < showCount && i < res.data.data.length; i++) {
                    this.todayOrderList.push(res.data.data[i]);
                }
            });
        },
        getTodayInspectionReportInfo() {
            todayInspectionReportList().then((res) => {
                this.todayInspectionReportList = [];
                let showCount = 3;
                for (let i = 0; i < showCount && i < res.data.data.length; i++) {
                    this.todayInspectionReportList.push(res.data.data[i]);
                }
            });
        },
        getNoticeInfo() {
            let data = {};
            data['limit'] = 1;
            getLastList(data).then((res) => {
                // this.noticeList = [];
                this.noticeList = res.data.data;
            });
        },
        getAppVersionInfo() {
            getAppInfo().then((res) => {
                //  console.log(JSON.stringify(res.data.data))
                this.appinfo = res.data.data;
            });
        },
        changeState(state) {
            this.state = state;
            if (state != 5) {
                if (this.timer) clearInterval(this.timer);
                this.timer = setInterval(() => {
                    this.second++;
                }, 1000);
            } else {
                if (this.timer) {
                    clearInterval(this.timer);
                }
                this.second = 0;
            }
        },
        confirm() {
            // let arr = this.layout.map((e) => {
            //   return {
            //     x: e.x,
            //     y: e.y,
            //     width: e.w,
            //     height: e.h,
            //     isShow: e.isShow,
            //     moduleName: e.i,
            //     moduleCode: e.i,
            //   };
            // });
            // let params = {
            //   layoutId: "",
            //   homeLayoutDetailEntityList: arr,
            // };
            // insertCustom(params).then((res) => {});
            // this.cache = [...this.layout];
            // this.editSw = false;
        },

        /**
         * 建立websocket连接
         */
        // initWebsocket: function () {
        //     console.log("WebSocket 准备建立连接");
        //     const socket = new SockJS("/api/galaxy-yjjcpt/ws");
        //     this.stompClient = Stomp.over(socket);
        //     this.stompClient.connect({}, this.onConnected, this.onError);
        // },

        /**
         * 连接成功： 订阅服务器的地址。为了浏览器可以接收到消息，必须先订阅服务器的地址
         */
        // onConnected: function () {
        //     console.log("WebSocket 连接成功");

        //     // 设置心跳发送接受频率（ms）默认为10000ms。 heart-beating是利用window.setInterval()去规律地发送heart-beats或者检查服务端的heart-beats。
        //     this.stompClient.heartbeat.outgoing = 10000;
        //     this.stompClient.heartbeat.incoming = 0;

        //     // 订阅
        //     this.stompClient.subscribe("/topic/event", this.onMessageReceived);
        // },

        /**
         * 连接失败
         */
        // onError: function (error) {
        //     console.log("WebSocket 连接失败", error);
        // },

        /**
         * 接收消息
         */
        // onMessageReceived: function (res) {
        //     console.log(res.body);

        //     console.log("WebSocket 接收消息-----------------------------------");
        // },

        /**
         * 发送消息
         */
        // sendMessage: function () {
        //     const chatMessage = {
        //         sender: "",
        //         content: "",
        //         type: "CHAT",
        //     };
        //     this.stompClient.send(
        //         "/app/chat.sendMessage",
        //         {},
        //         JSON.stringify(chatMessage)
        //     );
        // },

        /**
         * 关闭websocket连接
         */
        // closeSocket: function () {
        //     if (this.stompClient != null) {
        //         // this.stompClient.disconnect();
        //         this.stompClient.disconnect(() => {
        //             console.log("连接关闭");
        //         });
        //     }
        // },
    },
};
</script>
  
<style>
.box-card {
    width: 100%;
    height: 220px;
    overflow-y: auto;
}



.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}

.point-view-card {
    width: 100%;
    height: 250px;
}

.list-card {
    width: 100%;
    height: 300px;
}

.card-content {
    width: 100%;
    height: 240px;
    overflow-y: auto;
}

.todo-card {
    width: 99%;
    height: 250px;

    .content {
        width: 100%;
        height: 200px;
        overflow-y: auto;
    }
}

.report-card {
    width: 99%;
    height: 200px;

    .content {
        width: 100%;
        height: 180px;
        overflow-y: auto;
    }
}

.news-card {
    width: 100%;
    min-height: 120px;
}

.box-high-card {
    width: 100%;
    height: 500px;
    overflow-y: auto;
}

.box-small-card {
    width: 100%;
    height: 235px;
    overflow-y: auto;
}

.box-card-news {
    width: 100%;
    height: 235px;
    overflow-y: auto;
}

.box-card-apk {
    width: 99%;
    height: 195px;
}

.el-row {
    margin-bottom: 20px;
}

.el-col {
    border-radius: 4px;
}

.bg-purple-dark {
    background: #99a9bf;
}

.bg-purple {
    background: #d3dce6;
}

.bg-purple-light {
    background: #e5e9f2;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}

.list-item {
    padding-top: 5px;
    padding-left: 2px;
    border-width: thin;
    border-bottom-style: solid;
    border-bottom-color: lightgray;
}

.notice-item {
    padding-top: 5px;
    padding-left: 2px;
    border-width: thin;
    border-bottom-style: solid;
    border-bottom-color: lightgray;
}

.notice-time {
    font-size: 0.8rem;
    color: gray;
}

.notice-content {
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background-color: lightcoral;
}

.el-carousel__item:nth-child(2n+1) {
    background-color: lightcoral;
}
</style>