XAMYWXTUI/src/views/wel/index.vue

<template>
    <div>
        <el-row :gutter="10">
            <el-col :span="8">
                <el-card shadow="always" style="height:280px">
                    <div ref="rtuInfoCountChart" style="width: 100%;height: 280px;">
                    </div>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card shadow="always" style="height:280px">
                    <div ref="checkOrderChart" style="width: 100%;height: 280px;">
                    </div>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card shadow="always" style="height:280px">
                    <div ref="equipmentInspectionCountChart" style="width: 100%;height: 280px;">
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :span="8">
                <el-card style="width: 100%;height: 500px;overflow-y: auto;">
                    <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="20">
                                <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 style="margin-right: 10px;">维修状态：<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>
                            </el-col>
                            <el-col :span="4" style="display: flex;flex-direction: column;justify-content: center;">
                                <el-button style="margin-right: 10px;" size="mini" type="info" round
                                    @click="openCheckOrderReportDetail(item)">查看详情</el-button>
                            </el-col>
                        </el-row>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card style="width: 100%;height: 500px;overflow-y: auto;">
                    <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="20">
                                <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 style="margin-right: 10px;">填报人：<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="4" style="display: flex;flex-direction: column;justify-content: center;">
                                <el-button style="margin-right: 10px;" size="mini" type="info" round
                                    @click="openInspectionReportDetail(item)">查看详情</el-button>
                            </el-col>
                        </el-row>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="8">
                <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"></warninglist>
        </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 { getRealData } 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 todaynspectionrportlist from "../business/inspection/todaynspectionrportlist.vue";
import todaynoticelist from "../notice/todaynoticelist.vue";
import warninglist from "../business/warning/warninglist.vue";
import checkorderprocessdetail from "../business/order/checkorderprocessdetail.vue";
import inspectionreportdetail from "../business/inspection/inspectionreportdetail.vue";
import inspectionreportlistVue from "../business/inspection/inspectionreportlist.vue";

export default {
    name: "home",
    components: {
        todaycheckorderprocesslist,
        todaynspectionrportlist,
        todaynoticelist,
        warninglist,
        uncomfirecheckorderlist,
        comfiredelaycheckorderlist,
        checkorderprocessdetail,
        inspectionreportdetail,
        inspectionreportlistVue
    },
    data() {
        return {
            warninglistDig: false,
            uncomfireCheckOrderDig: false,
            comfireDelayCheckOrderDig: false,
            moreTodayOrderProcessDig: false,
            moreTodayInspectionReportDig: false,
            moreNoticeDig: false,
            checkorderprocessdetailDig: false,
            inspectionreportdetailDig: false,
            inspectionreportlistDig: false,
            appinfo: {
                apkUrl: '',
                apkQrUrl: '',
                version: ''
            },
            checkOrderReportId: '',
            inspectionReportId: '',
            realData: {
            },
            stompClient: null,
            layout: [],
            cache: [],
            editSw: false,
            dialog: false,
            dialogTitle: '',
            id: "",
            guideForm: {},
            second: 0,
            timer: null,
            state: 5,
            todayOrderList: [],
            todayInspectionReportList: [],
            noticeList: [],
            userInfo: getStore({ name: 'userInfo' }) || [],
            rainSeasonKind: 0,
            rtuInfoMap: null,
            rtuInfoCountOption: {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                    },
                    showContent: true,
                    formatter: function (params) {
                        console.log(JSON.stringify(params))
                        if (params[0].data.showpercent) {
                            return "点击柱状图可查看详情";
                        } else {
                            return "点击打开管理工作台页面";
                        }
                    }
                },
                title: {
                    text: '测站统计信息',
                    textStyle: {
                        fontSize: 16,
                        fontWeight: "bold",
                        color: "#464646",
                    }
                },
                color: ['#5470c6'],
                yAxis: {
                    type: 'category',
                    data: ['设备异常', '测站数量']
                },
                xAxis: {
                    type: 'value',

                },
                grid: {
                    right: '2%',
                    containLabel: true
                },
                series: [
                    {
                        data: [
                            {
                                value: 0,
                                itemStyle: {
                                    color: 'rgba(84, 112, 198,1.0)'
                                },
                                showpercent: false,
                                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',
                            rich: {
                                a: {
                                    color: 'red',
                                    width: 20,
                                    padding: [0, 0, 4, 0]
                                },
                                b: {
                                    color: 'red',
                                    width: 50,
                                    height: 0,
                                    borderWidth: 1,
                                    borderColor: 'red'
                                }
                            },
                            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 "点击柱状图可查看详情";
                        } else {
                            return "点击打开维修任务页面";
                        }
                    },
                    textStyle: {
                        fontSize: 12
                    }
                },
                title: {
                    text: '维修任务统计信息',
                    textStyle: {
                        fontSize: 16,
                        fontWeight: "bold",
                        color: "#464646",
                    }
                },
                color: ['#5470c6'],
                yAxis: {
                    type: 'category',
                    data: ['超时未确认任务', '未确认任务', '维修任务数量']
                },
                xAxis: {
                    type: 'value',

                },
                grid: {
                    right: '2%',
                    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(84, 112, 198,1.0)'
                                },
                                showpercent: true,
                                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 "点击柱状图可查看详情";
                        } else {
                            return "点击打开设备巡检信息页面";
                        }
                    }
                },
                title: {
                    text: '本年度设备巡检统计信息',
                    textStyle: {
                        fontSize: 16,
                        fontWeight: "bold",
                        color: "#464646",
                    }
                },
                color: ['#5470c6'],
                yAxis: {
                    type: 'category',
                    data: ['汛中（二）已巡检', '汛中（一）已巡检', '汛前已巡检', '需巡检站点数量']
                },
                xAxis: {
                    type: 'value',

                },
                grid: {
                    right: '2%',
                    containLabel: true
                },
                series: [
                    {
                        data: [
                            {
                                value: 0,
                                itemStyle: {
                                    color: 'rgba(84, 112, 198,1.0)'
                                },
                                showpercent: false,
                                percent: 0
                            },
                            {
                                value: 0,
                                itemStyle: {
                                    color: 'rgba(84, 112, 198,1.0)'
                                },
                                showpercent: false,
                                percent: 0
                            },
                            {
                                value: 0,
                                itemStyle: {
                                    color: 'rgba(84, 112, 198,1.0)'
                                },
                                showpercent: false,
                                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(u));
        this.getData();

    },
    computed: {
        // ...mapGetters(["userInfo"]),
    },
    mounted() {
        console.log("mounted ++++++++++++++++++++");
        // this.initWebsocket();

        this.initRtuInfoCountMap();
        this.initCheckOrderCountMap();
        this.initEquipmentInspectionCountMap();
        if (this.timer == null) {
            this.timer = setInterval(this.timeCall, 10000);
        }
    },
    beforeDestroy() {
        console.log("beforeDestroy ++++++++++++++++++++");
        //  this.closeSocket();
        if (this.timer != null) {
            console.log("clear timer ++++++++++++++ ")
            clearInterval(this.timer);
            this.timer = null;
        }
    },
    methods: {
        timeCall() {
            console.log("time ++++++++++++++++++++");
            this.getData();
        },
        initRtuInfoCountMap() {
            var that = this;

            let chart = this.$refs.rtuInfoCountChart;
            if (chart) {
                this.rtuInfoMap = this.$echarts.init(chart);
                this.rtuInfoMap.setOption(this.rtuInfoCountOption);
                // window.addEventListener("resize", function () {
                //     that.$refs['rtuInfoChart'].resize();
                // })

                // this.$on('hook:destroyed', () => {
                //     window.removeEventListener("resize", function () {
                //         that.$refs['rtuInfoChart'].resize();
                //     })
                // })

                //  this.rtuInfoMap.clear();

                this.rtuInfoMap.getZr().off('click');
                this.rtuInfoMap.getZr().on('click', function (p) {
                    console.log("checkOrderChart  zr ++++++++++++++++++++++++++++++++++++")
                    let pointInPixel = [p.offsetX, p.offsetY];
                    if (that.rtuInfoMap.containPixel('grid', pointInPixel)) {
                        let yIndex = that.rtuInfoMap.convertFromPixel({ seriesIndex: 0 }, [p.offsetX, p.offsetY])[1];
                        //let  yData=that.checkOrderCountOption.yAxis.data[yIndex];//当前点击柱子的数据
                        let value = that.rtuInfoCountOption.series[0].data[yIndex].value;
                        if (yIndex == 1) {
                            console.log("测站数量 index " + yIndex)
                            that.$router.push({ path: '/business/manage/index' });
                        } else if (yIndex == 0) {
                            if (value > 0) {
                                console.log("设备异常 index " + yIndex)
                                that.warninglistDig = true;
                                that.$nextTick(() => {
                                    that.$refs['warninglist'].init();
                                });
                            } else {
                                that.$message.warning("超时未确认维修任务暂无数据");
                            }
                        }
                    }
                });

                // this.rtuInfoMap.off('click');
                // this.rtuInfoMap.on('click', function (p) {
                //     if (p.name === '设备异常') {
                //         that.warninglistDig = true;
                //         that.$nextTick(() => {
                //             that.$refs['warninglist'].init();
                //         });
                //     }
                // })
            }
        },
        initCheckOrderCountMap() {
            let chart = this.$refs.checkOrderChart;
            if (chart) {
                this.checkOrderMap = this.$echarts.init(chart);
                this.checkOrderMap.setOption(this.checkOrderCountOption);
                // window.addEventListener("resize", function () {
                //     this.$refs.checkOrderChart.resize();
                // })

                // this.$on('hook:destroyed', () => {
                //     window.removeEventListener("resize", function () {
                //         this.$refs.checkOrderChart.resize();
                //     })
                // })

                var that = this;

                //this.checkOrderMap.clear();

                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 == 2) {
                            console.log("维修数量 index " + yIndex)
                            that.$router.push({ path: '/business/order/checkorderlist' });
                        } 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) {
                //     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();
                //         });
                //     }
                // })
            }
        },
        initEquipmentInspectionCountMap() {
            let chart = this.$refs.equipmentInspectionCountChart;
            if (chart) {
                this.equipmentInspectionChartMap = this.$echarts.init(chart);
                this.equipmentInspectionChartMap.setOption(this.equipmentInspectionCountOption);
                // window.addEventListener("resize", function () {
                //     this.$refs.equipmentInspectionCountChart.resize();
                // })

                // this.$on('hook:destroyed', () => {
                //     window.removeEventListener("resize", function () {
                //         this.$refs.equipmentInspectionCountChart.resize();
                //     })
                // })
                var that = this;
                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("equipmentInspectionChartMap**********************************")

                //     console.log(p)

                //     if (p.name === '汛前已巡检') {
                //         that.rainSeasonKind = 1;
                //         that.inspectionreportlistDig = true;
                //         that.dialogTitle = '汛前已巡检信息';
                //         that.$nextTick(() => {
                //             that.$refs["inspectionreportlist"].init();
                //         });
                //     } else if (p.name === '汛中（一）已巡检') {
                //         that.rainSeasonKind = 2;
                //         that.inspectionreportlistDig = true;
                //         that.dialogTitle = '汛中（一）已巡检信息';
                //         that.$nextTick(() => {
                //             that.$refs["inspectionreportlist"].init();
                //         });
                //     } else if (p.name === '汛中（二）已巡检') {
                //         that.rainSeasonKind = 3;
                //         that.inspectionreportlistDig = true;
                //         that.dialogTitle = '汛中（二）已巡检信息';
                //         that.$nextTick(() => {
                //             that.$refs["inspectionreportlist"].init();
                //         });
                //     }
                // })
            }
        },
        close() {
            this.dialog = false;
        },
        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);
            }
        },
        getData() {
            getRealData().then((res) => {
                if (res.data.code === 200) {
                    this.realData = res.data.data;
                    let data = [];
                    let num = new Number(this.realData.warningRtus / this.realData.rtus * 100);
                    let bar = {
                        value: this.realData.warningRtus,
                        itemStyle: {
                            color: 'rgba(255, 0, 0,1.0)'
                        },
                        showpercent: true,
                        percent: num.toFixed(2),
                    }
                    data.push(bar)
                    bar = {
                        value: this.realData.rtus,
                        itemStyle: {
                            color: 'rgba(84, 112, 198,1.0)'
                        },
                        showpercent: false,
                        percent: 0
                    }
                    data.push(bar)
                    this.rtuInfoCountOption.series[0].data = data;
                    this.rtuInfoMap.setOption(this.rtuInfoCountOption);
                    num = new Number(this.realData.delayComfireOrders / this.realData.orderCount * 100);
                    this.checkOrderCountOption.series[0].data[0].value = this.realData.delayComfireOrders;
                    this.checkOrderCountOption.series[0].data[0].showpercent = true;
                    this.checkOrderCountOption.series[0].data[0].percent = num.toFixed(2);

                    num = new Number(this.realData.unconfirmOrderCount / this.realData.orderCount * 100);
                    this.checkOrderCountOption.series[0].data[1].value = this.realData.unconfirmOrderCount;
                    this.checkOrderCountOption.series[0].data[1].showpercent = true;
                    this.checkOrderCountOption.series[0].data[1].percent = num.toFixed(2);

                    // num = new Number((this.realData.orderCount - this.realData.unconfirmOrderCount) / this.realData.orderCount * 100);
                    // this.checkOrderCountOption.series[0].data[2].value = this.realData.orderCount - this.realData.unconfirmOrderCount;
                    // this.checkOrderCountOption.series[0].data[2].showpercent = true;
                    // this.checkOrderCountOption.series[0].data[2].percent = num.toFixed(2);


                    this.checkOrderCountOption.series[0].data[2].value = this.realData.orderCount;
                    this.checkOrderCountOption.series[0].data[2].showpercent = false;
                    this.checkOrderCountOption.series[0].data[2].percent = num.toFixed(2);

                    // let data = [];
                    // num = new Number(this.realData.delayComfireOrders / this.realData.orderCount * 100);
                    // bar = {
                    //     value: this.realData.delayComfireOrders,
                    //     itemStyle: {
                    //         color: 'rgba(255, 0, 0,1.0)'
                    //     },
                    //     showpercent: true,
                    //     percent: num.toFixed(2),
                    // }
                    // data.push(bar)
                    // let num = new Number(this.realData.unconfirmOrderCount / this.realData.orderCount * 100);
                    // let bar = {
                    //     value: this.realData.unconfirmOrderCount,
                    //     itemStyle: {
                    //         color: 'rgba(255, 0, 0,1.0)'
                    //     },
                    //     showpercent: true,
                    //     percent: num.toFixed(2),
                    // }
                    // data.push(bar)
                    // bar = {
                    //     value: this.realData.orderCount,
                    //     itemStyle: {
                    //         color: 'rgba(84, 112, 198,1.0)'
                    //     },
                    //     showpercent: false,
                    //     percent: 0
                    // }
                    // data.push(bar)
                    // this.checkOrderCountOption.series[0].data = data;
                    this.checkOrderMap.setOption(this.checkOrderCountOption);
                    data = [];
                    num = new Number(this.realData.equipmentInspectionRainSecondReports / this.realData.equipmentInspectionCount * 100);
                    bar = {
                        value: this.realData.equipmentInspectionRainSecondReports,
                        itemStyle: {
                            color: 'rgba(0, 133, 133,1.0)'
                        },
                        showpercent: true,
                        percent: num.toFixed(2),
                    }
                    data.push(bar)
                    num = new Number(this.realData.equipmentInspectionRainFirstReports / this.realData.equipmentInspectionCount * 100);
                    bar = {
                        value: this.realData.equipmentInspectionRainFirstReports,
                        itemStyle: {
                            color: 'rgba(0, 133, 133,1.0)'
                        },
                        showpercent: true,
                        percent: num.toFixed(2),
                    }
                    data.push(bar)
                    num = new Number(this.realData.equipmentInspectionBeforeRainReports / this.realData.equipmentInspectionCount * 100);
                    bar = {
                        value: this.realData.equipmentInspectionBeforeRainReports,
                        itemStyle: {
                            color: 'rgba(0, 133, 133,1.0)'
                        },
                        showpercent: true,
                        percent: num.toFixed(2),
                    }
                    data.push(bar)
                    bar = {
                        value: this.realData.equipmentInspectionCount,
                        itemStyle: {
                            color: 'rgba(84, 112, 198,1.0)'
                        },
                        showpercent: false,
                        percent: 0,
                    }
                    data.push(bar)
                    this.equipmentInspectionCountOption.series[0].label.position = 'insideLeft';
                    this.equipmentInspectionCountOption.series[0].data = data;
                    this.equipmentInspectionChartMap.setOption(this.equipmentInspectionCountOption);
                }
            });
            todayOrderProcessList().then((res) => {
                this.todayOrderList = [];
                for (let i = 0; i < 3 && i < res.data.data.length; i++) {
                    this.todayOrderList.push(res.data.data[i]);
                }
            });
            todayInspectionReportList().then((res) => {
                this.todayInspectionReportList = [];
                for (let i = 0; i < 3 && 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: 500px;
    overflow-y: auto;
}

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

.box-card-apk {
    width: 100%;
    height: 220px;
}

.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>