SHZHJCYJPTYWXTUI/src/views/wel/index-v2.vue

<template>
    <div>
        <el-row :gutter="10">
            <el-col :span="6">
                <el-card shadow="always" style="height:280px">
                    <div ref="rtuInfoCountPieChart" style="width: 100%;height: 280px;">
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="always" style="height:280px">
                    <div ref="rtuDataUpCountChart" style="width: 100%;height: 280px;">
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="always" style="height:280px">
                    <div ref="checkOrderChart" style="width: 100%;height: 280px;">
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="always" style="height:280px">
                    <div ref="equipmentInspectionCountChart" style="width: 100%;height: 280px;">
                    </div>
                </el-card>
            </el-col>

        </el-row>
        <el-row v-if="adminPageStyle" :gutter="10">
            <el-col :span="12">
                <el-card shadow="always" style="height: 500px;">
                    <div slot="header" class="clearfix">
                        <span>测站异常分布统计信息</span>
                    </div>
                    <avue-crud :option="option" :table-loading="loading" :data="data" ref="crud" v-model="form"
                        @on-load="onLoad" @cell-click="cellClick">
                    </avue-crud>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-row>
                    <el-col :span="24">
                        <el-card class="box-small-card">
                            <div slot="header" class="clearfix">
                                <span>今日维修任务动态</span>
                                <el-button style="float: right; padding: 3px 0" type="text"
                                    @click="openMoreTodayOrderProcess">更多</el-button>
                            </div>
                            <div v-for="(item, index) in todayOrderList" :key="index" class="list-item">
                                <el-row type="flex">
                                    <el-col :span="19">
                                        <div style="padding-right: 5px;">

                                            <div style="display: flex; flex-direction: row;align-items: center;">
                                                <label>{{ item.rtuName }}</label>
                                                <label style="margin-left: 5px;color: gray;"> / {{ item.rtuCode }}</label>
                                            </div>
                                            <div
                                                style="display: flex; flex-direction: row;align-items: center;margin-top: 4px;">
                                                <label>维修状态：<span style="color:gray">{{
                                                    item.orderStatusName }}</span></label>
                                            </div>
                                            <div
                                                style="display: flex; flex-direction: row;align-items: center;margin-top: 4px;">
                                                <label>更新时间：<span style="color:gray">{{ item.updateTime }}</span></label>
                                            </div>
                                            <div style="margin-top: 4px;margin-bottom: 5px;">
                                                <label>备注：<span style="color:gray">{{ item.processDesc }}</span></label>
                                            </div>
                                        </div>
                                    </el-col>
                                    <el-col :span="5" style="display: flex;flex-direction: column;justify-content: center;">
                                        <el-button style="font-size: 0.7rem;" size="mini" type="info" round
                                            @click="openCheckOrderReportDetail(item)">查看详情</el-button>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-card class="box-card-news">
                            <div slot="header" class="clearfix">
                                <span>通知公告</span>
                                <el-button style="float: right; padding: 3px 0" type="text"
                                    @click="openMoreNotice">更多</el-button>
                            </div>
                            <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>{{
                                        item.content
                                    }}</label>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </el-col>
            <el-col :span="6">
                <el-row>
                    <el-col :span="24">
                        <el-card class="box-small-card">
                            <div slot="header" class="clearfix">
                                <span>今日巡检动态</span>
                                <el-button style="float: right; padding: 3px 0" type="text"
                                    @click="openMoreTodayInspectionReport">更多</el-button>
                            </div>
                            <div v-for="(item, index) in todayInspectionReportList" :key="index" class="list-item">
                                <el-row type="flex">
                                    <el-col :span="19">
                                        <div style="display: flex; flex-direction: row;align-items: center;">
                                            <label>{{ item.rtuName }}</label>
                                            <label style="margin-left: 5px;color: gray;"> / {{ item.rtuCode }}</label>
                                        </div>
                                        <div
                                            style="display: flex; flex-direction: row;align-items: center;margin-top: 4px;">
                                            <label>填报人：<span style="color:gray">{{
                                                item.servicePersonName
                                            }}</span></label>
                                        </div>
                                        <div
                                            style="display: flex; flex-direction: row;align-items: center;margin-top: 4px;margin-bottom: 5px;">
                                            <label>填报时间：<span style="color:gray">{{ item.updateTime }}</span></label>
                                        </div>
                                    </el-col>
                                    <el-col :span="5" style="display: flex;flex-direction: column;justify-content: center;">
                                        <el-button style="font-size: 0.7rem;" size="mini" type="info" round
                                            @click="openInspectionReportDetail(item)">查看详情</el-button>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-card>


                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-card class="box-card-apk">
                            <div slot="header" class="clearfix">
                                <span>手机客户端下载</span>
                            </div>
                            <div>
                                <img style="width: 100px;height: 100px;" :src="appinfo.apkQrUrl" />
                            </div>
                            <div style="margin-top: 4px;">
                                <label style="padding-left: 5px;font-size: 0.8rem;">版本号 {{ appinfo.version }}</label>
                            </div>
                            <div style="margin-top: 4px;">
                                <el-button type="text" @click="downloadApk">下载安卓客户端</el-button>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
        <el-row v-else :gutter="10">
            <el-col :span="6">
                <el-card shadow="always" style="height: 500px;">
                    <div ref="rtuWarnCountChart" style="width: 100%;height: 500px;">
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card class="box-high-card">
                    <div slot="header" class="clearfix">
                        <span>今日维修任务动态</span>
                        <el-button style="float: right; padding: 3px 0" type="text"
                            @click="openMoreTodayOrderProcess">更多</el-button>
                    </div>
                    <div v-for="(item, index) in todayOrderList" :key="index" class="list-item">
                        <el-row type="flex">
                            <el-col :span="19">
                                <div style="padding-right: 5px;">

                                    <div style="display: flex; flex-direction: row;align-items: center;">
                                        <label>{{ item.rtuName }}</label>
                                        <label style="margin-left: 5px;color: gray;"> / {{ item.rtuCode }}</label>
                                    </div>
                                    <div style="display: flex; flex-direction: row;align-items: center;margin-top: 4px;">
                                        <label>维修状态：<span style="color:gray">{{
                                            item.orderStatusName }}</span></label>
                                    </div>
                                    <div style="display: flex; flex-direction: row;align-items: center;margin-top: 4px;">
                                        <label>更新时间：<span style="color:gray">{{ item.updateTime }}</span></label>
                                    </div>
                                    <div style="margin-top: 4px;margin-bottom: 5px;">
                                        <label>备注：<span style="color:gray">{{ item.processDesc }}</span></label>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="5" style="display: flex;flex-direction: column;justify-content: center;">
                                <el-button style="font-size: 0.7rem;" size="mini" type="info" round
                                    @click="openCheckOrderReportDetail(item)">查看详情</el-button>
                            </el-col>
                        </el-row>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-row>
                    <el-col :span="24">
                        <el-card class="box-high-card">
                            <div slot="header" class="clearfix">
                                <span>今日巡检动态</span>
                                <el-button style="float: right; padding: 3px 0" type="text"
                                    @click="openMoreTodayInspectionReport">更多</el-button>
                            </div>
                            <div v-for="(item, index) in todayInspectionReportList" :key="index" class="list-item">
                                <el-row type="flex">
                                    <el-col :span="19">
                                        <div style="padding-right: 5px;">
                                            <div style="display: flex; flex-direction: row;align-items: center;">
                                                <label>{{ item.rtuName }}</label>
                                                <label style="margin-left: 5px;color: gray;"> / {{ item.rtuCode }}</label>
                                            </div>
                                            <div
                                                style="display: flex; flex-direction: row;align-items: center;margin-top: 4px;">
                                                <label>填报人：<span style="color:gray">{{
                                                    item.servicePersonName
                                                }}</span></label>
                                            </div>
                                            <div
                                                style="display: flex; flex-direction: row;align-items: center;margin-top: 4px;margin-bottom: 5px;">
                                                <label>填报时间：<span style="color:gray">{{ item.updateTime }}</span></label>
                                            </div>
                                        </div>
                                    </el-col>
                                    <el-col :span="5" style="display: flex;flex-direction: column;justify-content: center;">
                                        <el-button style="font-size: 0.7rem;" size="mini" type="info" round
                                            @click="openInspectionReportDetail(item)">查看详情</el-button>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">

                    </el-col>
                </el-row>
            </el-col>
            <el-col :span="6">
                <el-row>
                    <el-col :span="24">
                        <el-card class="box-card-news">
                            <div slot="header" class="clearfix">
                                <span>通知公告</span>
                                <el-button style="float: right; padding: 3px 0" type="text"
                                    @click="openMoreNotice">更多</el-button>
                            </div>
                            <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>{{
                                        item.content
                                    }}</label>
                                </div>
                            </div>
                        </el-card>


                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-card class="box-card-apk">
                            <div slot="header" class="clearfix">
                                <span>手机客户端下载</span>
                            </div>
                            <div>
                                <img style="width: 100px;height: 100px;" :src="appinfo.apkQrUrl" />
                            </div>
                            <div style="margin-top: 4px;">
                                <label style="padding-left: 5px;font-size: 0.8rem;">版本号 {{ appinfo.version }}</label>
                            </div>
                            <div style="margin-top: 4px;">
                                <el-button type="text" @click="downloadApk">下载安卓客户端</el-button>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
        <el-drawer title="今日维修任务动态信息" :visible.sync="moreTodayOrderProcessDig" v-if="moreTodayOrderProcessDig" size="50%"
            :close-on-click-modal="false" append-to-body>
            <todaycheckorderprocesslist ref="todaycheckorderprocesslist">
            </todaycheckorderprocesslist>
        </el-drawer>
        <el-drawer title="今日巡检动态信息" :visible.sync="moreTodayInspectionReportDig" v-if="moreTodayInspectionReportDig"
            size="50%" :close-on-click-modal="false" append-to-body>
            <todaynspectionrportlist ref="todaynspectionrportlist"></todaynspectionrportlist>
        </el-drawer>
        <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>
        <el-drawer title="离线测站信息" :visible.sync="offlineWarnListDig" v-if="offlineWarnListDig" size="50%"
            :close-on-click-modal="false" append-to-body>
            <offlinewarnlist ref="offlinewarnlist" :deptId="deptId"></offlinewarnlist>
        </el-drawer>
        <el-drawer title="时钟异常测站信息" :visible.sync="clockWarnListDig" v-if="clockWarnListDig" size="50%"
            :close-on-click-modal="false" append-to-body>
            <clockwarnlist ref="clockwarnlist" :deptId="deptId"></clockwarnlist>
        </el-drawer>
        <el-drawer title="小时报漏报测站信息" :visible.sync="hourmissoutWarnListDig" v-if="hourmissoutWarnListDig" size="50%"
            :close-on-click-modal="false" append-to-body>
            <hourmissoutwarnlist ref="hourmissoutwarnlist" :deptId="deptId"></hourmissoutwarnlist>
        </el-drawer>
        <el-drawer title="雨量站小时报漏报测站信息" :visible.sync="rainHourmissoutWarnListDig" v-if="rainHourmissoutWarnListDig"
            size="50%" :close-on-click-modal="false" append-to-body>
            <rainHourmissoutWarnListVue ref="rainHourmissoutWarnList" :deptId="deptId"></rainHourmissoutWarnListVue>
        </el-drawer>
        <el-drawer title="水位站小时报漏报测站信息" :visible.sync="riverHourmissoutWarnListDig" v-if="riverHourmissoutWarnListDig"
            size="50%" :close-on-click-modal="false" append-to-body>
            <riverHourmissoutWarnListVue ref="riverHourmissoutWarnList" :deptId="deptId"></riverHourmissoutWarnListVue>
        </el-drawer>
        <el-drawer title="5分钟报延时测站信息" :visible.sync="minupdelayWarnListDig" v-if="minupdelayWarnListDig" size="50%"
            :close-on-click-modal="false" append-to-body>
            <minupdelaywarnlist ref="minupdelaywarnlist" :deptId="deptId"></minupdelaywarnlist>
        </el-drawer>
        <el-drawer title="小时报延时测站信息" :visible.sync="hourupdelayWarnListDig" v-if="hourupdelayWarnListDig" size="50%"
            :close-on-click-modal="false" append-to-body>
            <hourupdelaywarnlist ref="hourupdelaywarnlist" :deptId="deptId"></hourupdelaywarnlist>
        </el-drawer>
        <el-drawer title="雨量站小时报延时测站信息" :visible.sync="rainHourupdelayWarnListDig" v-if="rainHourupdelayWarnListDig"
            size="50%" :close-on-click-modal="false" append-to-body>
            <rainhourupdelaywarnlistVue ref="rainhourupdelaywarnlist" :deptId="deptId"></rainhourupdelaywarnlistVue>
        </el-drawer>
        <el-drawer title="水位站小时报延时测站信息" :visible.sync="riverHourupdelayWarnListDig" v-if="riverHourupdelayWarnListDig"
            size="50%" :close-on-click-modal="false" append-to-body>
            <riverhourupdelaywarnlistVue ref="riverhourupdelaywarnlist" :deptId="deptId"></riverhourupdelaywarnlistVue>
        </el-drawer>
        <el-drawer title="疑似异常值测站信息" :visible.sync="outlterValueWarnListDig" v-if="outlterValueWarnListDig" size="50%"
            :close-on-click-modal="false" append-to-body>
            <outlitervaluewarnlist ref="outlitervaluewarnlist" :deptId="deptId"></outlitervaluewarnlist>
        </el-drawer>
        <el-drawer title="维修中任务信息" :visible.sync="processingcheckorderlistDig" v-if="processingcheckorderlistDig" size="50%"
            :close-on-click-modal="false" append-to-body>
            <processingcheckorderlist ref="processingcheckorderlist"></processingcheckorderlist>
        </el-drawer>
        <el-drawer title="未确认维修任务信息" :visible.sync="uncomfireCheckOrderDig" v-if="uncomfireCheckOrderDig" size="50%"
            :close-on-click-modal="false" append-to-body>
            <uncomfirecheckorderlist ref="uncomfirecheckorderlist"></uncomfirecheckorderlist>
        </el-drawer>
        <el-drawer title="确认超时维修任务信息" :visible.sync="comfireDelayCheckOrderDig" v-if="comfireDelayCheckOrderDig" size="50%"
            :close-on-click-modal="false" append-to-body>
            <comfiredelaycheckorderlist ref="comfiredelaycheckorderlist"></comfiredelaycheckorderlist>
        </el-drawer>
        <el-drawer title="维修任务详情" :visible.sync="checkorderprocessdetailDig" v-if="checkorderprocessdetailDig" size="50%"
            :close-on-click-modal="false" append-to-body>
            <checkorderprocessdetail ref="checkorderprocessdetail" :orderId="checkOrderReportId"></checkorderprocessdetail>
        </el-drawer>
        <el-drawer title="设备巡检详情" :visible.sync="inspectionreportdetailDig" v-if="inspectionreportdetailDig" size="50%"
            :close-on-click-modal="false" append-to-body>
            <inspectionreportdetail ref="inspectionreportdetail" :id="inspectionReportId"></inspectionreportdetail>
        </el-drawer>
        <el-drawer :visible.sync="inspectionreportlistDig" v-if="inspectionreportlistDig" size="50%"
            :close-on-click-modal="false" append-to-body>
            <div slot="title" class="header-title">
                <span class="name">{{ dialogTitle }}</span>
            </div>
            <inspectionreportlistVue ref="inspectionreportlist" :rainSeasonKind="rainSeasonKind"></inspectionreportlistVue>
        </el-drawer>
    </div>
</template>

<script>
import { getRtuStatusCountData, getRtuUpCountData, getCheckOrderCountData, getInspectionReportCountData, 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 warninglist from "../business/warning/warninglist.vue";
import offlinewarnlist from "../business/warning/offlinewarnlist.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
    },
    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,
            dialogTitle: '',
            deptId: 0,
            form: {},
            selectionList: [],
            query: {},
            loading: true,
            data: [],
            option: {
                height: "420",
                align: "center",
                headerAlign: "center",
                tip: false,
                simplePage: true,
                searchShow: false,
                searchMenuSpan: 6,
                addBtn: false,
                tree: true,
                border: true,
                index: true,
                editBtn: false,
                delBtn: false,
                menu: false,
                dialogType: "drawer",
                dialogClickModal: false,
                columnBtn: false,
                refreshBtn: false,
                header: false,
                column: [
                    {
                        label: "盟市",
                        prop: "adCity",
                        span: 24,
                    },
                    {
                        label: "测站数量",
                        prop: "rtus",
                        span: 12,
                    },
                    {
                        label: "测站离线",
                        prop: "warnOffline",
                        span: 12,
                        html: true,
                        formatter: (val) => {
                            if (val.warnOffline && val.warnOffline > 0) {
                                let n = val.warnOffline / val.rtus * 100;
                                let num = new Number(n);
                                // if (val.deptId == 0) {
                                //     return '<span><b style="color:rgb(238,112,112)">' + val.warnOffline + '</b> / ' + '<b style="color:rgb(84,123,201)">' + num.toFixed(2) + '%</b></span>'
                                // } else {
                                return '<span style="cursor:pointer;text-decoration-line: underline;"><b style="color:rgb(238,112,112)">' + val.warnOffline + '</b> / ' + '<b style="color:rgb(84,123,201)">' + num.toFixed(2) + '%</b></span>'
                                // }
                            } else {
                                return '<b></b>'
                            }

                        }
                    }, {
                        label: "小时报漏报",
                        prop: "warnMissOut",
                        span: 12,
                        html: true,
                        formatter: (val) => {
                            if (val.warnMissOut && val.warnMissOut > 0) {
                                let n = val.warnMissOut / val.rtus * 100;
                                let num = new Number(n);
                                // if (val.deptId == 0) {
                                //     return '<span><b style="color:rgb(238,112,112)">' + val.warnMissOut + '</b> / ' + '<b style="color:rgb(84,123,201)">' + num.toFixed(2) + '%</b></span>'
                                // } else {
                                return '<span style="cursor:pointer;text-decoration-line: underline;"><b style="color:rgb(238,112,112)">' + val.warnMissOut + '</b> / ' + '<b style="color:rgb(84,123,201)">' + num.toFixed(2) + '%</b></span>'
                                // }
                            } else {
                                return '<b></b>'
                            }
                        }
                    }, {
                        label: "5分钟上报延时",
                        prop: "warnUpMinDelay",
                        span: 12,
                        html: true,
                        formatter: (val) => {
                            if (val.warnUpMinDelay && val.warnUpMinDelay > 0) {
                                let n = val.warnUpMinDelay / val.rtus * 100;
                                let num = new Number(n);
                                // if (val.deptId == 0) {
                                //     return '<span><b style="color:rgb(238,112,112)">' + val.warnUpMinDelay + '</b> / ' + '<b style="color:rgb(84,123,201)">' + num.toFixed(2) + '%</b></span>'
                                // } else {
                                return '<span style="cursor:pointer;text-decoration-line: underline;"><b style="color:rgb(238,112,112)">' + val.warnUpMinDelay + '</b> / ' + '<b style="color:rgb(84,123,201)">' + num.toFixed(2) + '%</b></span>'
                                // }

                            } else {
                                return '<b></b>'
                            }
                        }
                    }, {
                        label: "小时上报延时",
                        prop: "warnUpHourDelay",
                        span: 12,
                        html: true,
                        formatter: (val) => {
                            if (val.warnUpHourDelay && val.warnUpHourDelay > 0) {
                                let n = val.warnUpHourDelay / val.rtus * 100;
                                let num = new Number(n);
                                // if (val.deptId == 0) {
                                //     return '<span><b style="color:rgb(238,112,112)">' + val.warnUpHourDelay + '</b> / ' + '<b style="color:rgb(84,123,201)">' + num.toFixed(2) + '%</b></span>'
                                // } else {
                                return '<span style="cursor:pointer;text-decoration-line: underline;"><b style="color:rgb(238,112,112)">' + val.warnUpHourDelay + '</b> / ' + '<b style="color:rgb(84,123,201)">' + num.toFixed(2) + '%</b></span>'
                                // }

                            } else {
                                return '<b></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'
                },
                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,
                                name: '运行正常',
                                label: {
                                    show: true,
                                    formatter(param) {
                                        // correct the percentage
                                        return ' (' + param.value + ' / ' + param.percent + '%)';
                                    }
                                },
                                itemStyle: {
                                    color: '#547bc9'
                                }
                            },
                            {
                                value: 0,
                                name: '测站离线',
                                label: {
                                    show: true,
                                    formatter(param) {
                                        // correct the percentage
                                        return ' (' + param.value + ' / ' + param.percent + '%)';
                                    }
                                },
                                itemStyle: {
                                    color: '#ff0000'
                                }
                            },
                            {
                                value: 0,
                                name: '其他异常',
                                label: {
                                    show: true,
                                    formatter(param) {
                                        // correct the percentage
                                        return ' (' + param.value + ' / ' + param.percent + '%)';
                                    }
                                },
                                itemStyle: {
                                    color: '#ee7070'
                                }
                            },
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            },
            rtuDataUpCountMap: null,
            rtuDataUpCountOption: {
                title: {
                    text: '测站上报率统计信息',
                    subtext: '统计口径为上一个自然天',
                    left: 'center'
                },
                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: {
                    //     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(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(145, 204, 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;
                                }

                            }
                        },
                    }
                ]
            },
            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: {
                    //     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: {
                    //     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;
        }
    },
    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 == 3) {
                        console.log("维修数量 index " + yIndex)
                        that.$router.push({ path: '/business/order/checkorderlist' });
                    } else if (yIndex == 2) {
                        if (value > 0) {
                            console.log("维修中 index " + yIndex)
                            that.processingcheckorderlistDig = true;
                            that.$nextTick(() => {
                                that.$refs["processingcheckorderlist"].init();
                            });
                        } else {
                            that.$message.warning("维修中暂无数据");
                        }
                    } else if (yIndex == 1) {
                        if (value > 0) {
                            console.log("未确认 index " + yIndex)
                            that.uncomfireCheckOrderDig = true;
                            that.$nextTick(() => {
                                that.$refs["uncomfirecheckorderlist"].init();
                            });
                        } else {
                            that.$message.warning("未确认维修任务暂无数据");
                        }
                    } else if (yIndex == 0) {
                        if (value > 0) {
                            console.log("超时未确认 index " + yIndex)
                            that.comfireDelayCheckOrderDig = true;
                            that.$nextTick(() => {
                                that.$refs["comfiredelaycheckorderlist"].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("暂无异常数据");
                        }
                    }
                }
            })
        }

        this.$nextTick(() => {
            this.loadData();
        });
    },
    beforeDestroy() {
        console.log("beforeDestroy ++++++++++++++++++++");
        //  this.closeSocket();
        if (this.timer != null) {
            console.log("clear timer ++++++++++++++ ")
            clearInterval(this.timer);
            this.timer = null;
        }
    },
    methods: {
        loadData() {
            this.getCountData();
            if (this.timer == null) {
                this.timer = setInterval(this.timeCall, 10000);
            }
        },
        onLoad() {
            this.loading = true;
            getWarnCountList().then((res) => {
                this.data = res.data.data;
                this.loading = false;
            });
        },
        timeCall() {
            console.log("time ++++++++++++++++++++");
            this.getCountData();
            this.getWarnCountList().then((res) => {
                this.data = res.data.data;
            });
        },
        close() {
            this.dialog = false;
        },
        cellClick(row, column, cell, event) {
            if (event.isTrusted) {
                if (column.label === '测站离线') {
                    if (row.warnOffline) {
                        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.warnMissOut) {
                        this.deptId = row.deptId;
                        this.hourmissoutWarnListDig = true;
                        this.$nextTick(() => {
                            this.$refs["hourmissoutwarnlist"].init();
                        });
                    }
                } else if (column.label === '5分钟上报延时') {
                    if (row.warnUpMinDelay) {
                        this.deptId = row.deptId;
                        this.minupdelayWarnListDig = true;
                        this.$nextTick(() => {
                            this.$refs["minupdelaywarnlist"].init();
                        });
                    }
                } else if (column.label === '小时上报延时') {
                    if (row.warnUpHourDelay) {
                        this.deptId = row.deptId;
                        this.hourupdelayWarnListDig = true;
                        this.$nextTick(() => {
                            this.$refs["hourupdelaywarnlist"].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);
            }
        },
        getCountData() {
            getRtuStatusCountData().then((res) => {
                console.log("status count " + JSON.stringify(res.data))
                if (res.data.code === 200) {
                    let data = res.data.data;
                    let num = new Number((data.rtus - data.warningRtus) / data.rtus * 100);
                    this.rtuInfoCountPieOption.series[0].data[0].value = data.rtus - data.warningRtus;
                    this.rtuInfoCountPieOption.series[0].data[0].percent = num.toFixed(2);
                    num = new Number(data.offlineRtus / data.rtus * 100);
                    this.rtuInfoCountPieOption.series[0].data[1].value = data.offlineRtus;
                    this.rtuInfoCountPieOption.series[0].data[1].percent = num.toFixed(2);
                    num = new Number((data.warningRtus - data.offlineRtus) / data.rtus * 100);
                    this.rtuInfoCountPieOption.series[0].data[0].value = data.warningRtus - data.offlineRtus;
                    this.rtuInfoCountPieOption.series[0].data[0].percent = num.toFixed(2);
                    this.rtuInfoCountPieMap.setOption(this.rtuInfoCountPieOption);
                }
            });


            getRtuUpCountData().then((res) => {
                console.log("up count " + JSON.stringify(res.data))
                if (res.data.code === 200) {
                    let data = res.data.data;
                    this.rtuDataUpCountOption.series[0].data[2].value = data.rainRtuCount;
                    this.rtuDataUpCountOption.series[0].data[1].value = data.riverRtuCount;
                    this.rtuDataUpCountOption.series[0].data[0].value = data.groundRtuCount;
                    let num = new Number(data.rainUpDataCount / data.rainRtuCount * 100);
                    this.rtuDataUpCountOption.series[1].data[2].value = data.rainUpDataCount;
                    this.rtuDataUpCountOption.series[1].data[2].percent = num.toFixed(2);
                    num = new Number(data.riverUpDataCount / data.riverRtuCount * 100);
                    this.rtuDataUpCountOption.series[1].data[1].value = data.riverUpDataCount;
                    this.rtuDataUpCountOption.series[1].data[1].percent = num.toFixed(2);
                    num = new Number(data.groundUpDataCount / data.groundRtuCount * 100);
                    this.rtuDataUpCountOption.series[1].data[0].value = data.groundUpDataCount;
                    this.rtuDataUpCountOption.series[1].data[0].percent = num.toFixed(2);
                    this.rtuDataUpCountMap.setOption(this.rtuDataUpCountOption);
                }
            });

            getCheckOrderCountData().then((res) => {
                console.log("CheckOrder count " + JSON.stringify(res.data))
                if (res.data.code === 200) {
                    let data = res.data.data;
                    this.checkOrderCountOption.series[0].data[3].value = data.orderCount;
                    let num = new Number((data.orderCount - data.unconfirmOrderCount) / data.orderCount * 100);
                    this.checkOrderCountOption.series[0].data[2].value = data.orderCount - data.unconfirmOrderCount;
                    this.checkOrderCountOption.series[0].data[2].percent = num.toFixed(2);
                    num = new Number(data.unconfirmOrderCount / data.orderCount * 100);
                    this.checkOrderCountOption.series[0].data[1].value = data.unconfirmOrderCount;
                    this.checkOrderCountOption.series[0].data[1].percent = num.toFixed(2);
                    num = new Number(data.delayComfireOrders / data.orderCount * 100);
                    this.checkOrderCountOption.series[0].data[0].value = data.delayComfireOrders;
                    this.checkOrderCountOption.series[0].data[0].percent = num.toFixed(2);
                    this.checkOrderMap.setOption(this.checkOrderCountOption);
                }
            });

            getInspectionReportCountData().then((res) => {
                console.log("InspectionReport count " + JSON.stringify(res.data))
                if (res.data.code === 200) {
                    let data = res.data.data;
                    this.equipmentInspectionCountOption.series[0].data[3].value = data.equipmentInspectionCount;
                    let num = new Number(data.equipmentInspectionBeforeRainReports / data.equipmentInspectionCount * 100);
                    this.equipmentInspectionCountOption.series[0].data[2].value = data.equipmentInspectionBeforeRainReports;
                    this.equipmentInspectionCountOption.series[0].data[2].percent = num.toFixed(2);
                    num = new Number(data.equipmentInspectionRainFirstReports / data.equipmentInspectionCount * 100);
                    this.equipmentInspectionCountOption.series[0].data[1].value = data.equipmentInspectionRainFirstReports;
                    this.equipmentInspectionCountOption.series[0].data[1].percent = num.toFixed(2);
                    num = new Number(data.equipmentInspectionRainSecondReports / data.equipmentInspectionCount * 100);
                    this.equipmentInspectionCountOption.series[0].data[0].value = data.equipmentInspectionRainSecondReports;
                    this.equipmentInspectionCountOption.series[0].data[0].percent = num.toFixed(2);
                    this.equipmentInspectionChartMap.setOption(this.equipmentInspectionCountOption);
                }
            });

            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(2);

                    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(2);

                    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(2);

                    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(2);


                    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(2);


                    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(2);

                    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(2);

                    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(2);

                    this.rtuWarnCountMap.setOption(this.rtuWarnCountOption);
                }
            });


            todayOrderProcessList().then((res) => {
                this.todayOrderList = [];
                let showCount = 3;
                if (this.adminPageStyle) {
                    showCount = 1;
                }
                for (let i = 0; i < showCount && i < res.data.data.length; i++) {
                    this.todayOrderList.push(res.data.data[i]);
                }
            });
            todayInspectionReportList().then((res) => {
                this.todayInspectionReportList = [];
                let showCount = 3;
                if (this.adminPageStyle) {
                    showCount = 1;
                }
                for (let i = 0; i < showCount && i < res.data.data.length; i++) {
                    this.todayInspectionReportList.push(res.data.data[i]);
                }
            });
            getLastList(1).then((res) => {
                this.noticeList = [];
                this.noticeList = res.data.data;
            });
            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;
}

.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: 100%;
    height: 235px;
}

.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;
}
</style>