{"remainingRequest":"D:\\jenkins\\workspace\\sfz-lh-fvue\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\jenkins\\workspace\\sfz-lh-fvue\\src\\views\\BigScreen\\homePage.vue?vue&type=script&lang=js&","dependencies":[{"path":"D:\\jenkins\\workspace\\sfz-lh-fvue\\src\\views\\BigScreen\\homePage.vue","mtime":1715713737026},{"path":"D:\\jenkins\\workspace\\sfz-lh-fvue\\node_modules\\babel-loader\\lib\\index.js","mtime":315532800000},{"path":"D:\\jenkins\\workspace\\sfz-lh-fvue\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\sfz-lh-fvue\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":["//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\r\nimport headline from './headline.vue'\r\nimport iframeComp from './3DModel/iframeComp.vue'\r\nimport threeDModel from './3DModel/modelIndex.vue'\r\nimport * as echarts from 'echarts'\r\nimport VueSeamlessScroll from 'vue-seamless-scroll'\r\nimport commonAPI from '@/api/bigScreen/common.js'\r\nimport moment from 'moment'\r\nimport utils from '@/utils'\r\n// import player from '@/views/Normal/components/videoPlayerDH.vue'\r\nimport player from '@/views/Normal/components/videoPlayerHK.vue'\r\nimport deviceAPI from '@/api/DeviceManagement/device.js'\r\nexport default {\r\n    components: {\r\n        headline,\r\n        threeDModel,\r\n        VueSeamlessScroll,\r\n        iframeComp,\r\n        player,\r\n    },\r\n    name: 'homePage',\r\n    data() {\r\n        return {\r\n            modelType: 'T', // T - threeJS  U - UE\r\n            showDataPage: true,\r\n            wrapperName: 'dialog-video-container',\r\n            test: [],\r\n            tollStationId: '',\r\n            pageQuery: {\r\n                pageBean: {\r\n                    page: 1,\r\n                    pageSize: -1,\r\n                },\r\n                querys: [\r\n                    {\r\n                        group: 'main',\r\n                        operation: 'EQUAL',\r\n                        parentGroup: '',\r\n                        property: 'toll_station_id_',\r\n                        relation: 'AND',\r\n                        value: '',\r\n                    },\r\n                ],\r\n            },\r\n            actualityMoney: 0, //当日通讯费\r\n            carFlow: 0, //当日车流量\r\n            responseName: '', //值班人员\r\n            responseTel: '', //值班电话\r\n            laneDataTotal: 0, // 车道总数\r\n            laneDataETC: 0, //ETC车道\r\n            laneDataMixin: 0, //混合车道\r\n            onlineDevice: 0, //在线设备\r\n            offlineDevice: 0, //离线设备\r\n            faultDevice: 0, //故障设备\r\n            onlineRate: 0, //设备在线率\r\n            transitTimeTotal: 0, // 通行时间 单位秒\r\n            transitTime: {\r\n                minute: '00',\r\n                second: '00',\r\n            },\r\n            transactionRate: {\r\n                int: '00',\r\n                decimal: '00',\r\n            },\r\n            carType: [], // 车辆类型字典\r\n            pieChart: null,\r\n            pieData: [],\r\n            pieOption: null,\r\n            gaugeChart: null, // 设备在线率\r\n            gaugeData: [\r\n                {\r\n                    value: 0,\r\n                },\r\n            ],\r\n            gaugeOption: null,\r\n            curIndex: 0,\r\n            loadObj: {\r\n                scrollListData: false,\r\n                scrollFaultData: false,\r\n                laneData: false,\r\n                gauge: false,\r\n                pieData: false,\r\n            },\r\n            loadingColor: 'rgba(6, 46, 106, 0.01)',\r\n            scrollheader: [\r\n                {\r\n                    name: '时间',\r\n                    width: '34%',\r\n                },\r\n                {name: '车道', width: '20%'},\r\n                {name: '车牌', width: '22%'},\r\n                {name: '金额', width: '24%'},\r\n            ],\r\n            scrollListData: [], // 设备列表\r\n            activeBtn: 'video',\r\n            showDevice: false,\r\n            btnType: [],\r\n            checkListLane: [], // 车道选择\r\n            checkListDevice: [], // 设备选择\r\n            activeDeviceList: [], //选中设备和车道\r\n            laneData: [\r\n                {\r\n                    id: 1,\r\n                    laneName: '出口-车道-ETC车道1',\r\n                    status: 'normal',\r\n                },\r\n                {\r\n                    id: 2,\r\n                    laneName: '出口-车道-ETC车道2',\r\n                    status: 'normal',\r\n                },\r\n                {\r\n                    id: 3,\r\n                    laneName: '出口-车道-混合车道1',\r\n                    status: 'normal',\r\n                },\r\n                {\r\n                    id: 4,\r\n                    laneName: '出口-车道-混合车道2',\r\n                    status: 'normal',\r\n                },\r\n                {\r\n                    id: 5,\r\n                    laneName: '入口-车道-ETC车道1',\r\n                    status: 'normal',\r\n                },\r\n                {\r\n                    id: 6,\r\n                    laneName: '入口-车道-ETC车道2',\r\n                    status: 'normal',\r\n                },\r\n                {\r\n                    id: 7,\r\n                    laneName: '入口-车道-混合车道1',\r\n                    status: 'normal',\r\n                },\r\n                {\r\n                    id: 8,\r\n                    laneName: '入口-车道-混合车道2',\r\n                    status: 'normal',\r\n                },\r\n            ], //车道运行数据\r\n            deviceFaultData: [], // 设备运行记录\r\n            gaugeChart: null,\r\n            activeVideo: null,\r\n            videoDialog: false,\r\n            reconnectCount: 0,\r\n        }\r\n    },\r\n    computed: {\r\n        optionSingleHeightTime() {\r\n            return {\r\n                step: 0.5,\r\n            }\r\n        },\r\n    },\r\n    created() {\r\n        this.tollStationId = sessionStorage.getItem('tollStationId')\r\n        this.heartCheckFun()\r\n        this.initWebSocket()\r\n    },\r\n    mounted() {\r\n        this.getData()\r\n        this.btnType = utils.getDictItemsFromCache('sblx')\r\n        if (this.$route.query && this.$route.query.videoIP) {\r\n            // let cameraCode = this.$route.query.cameraCode\r\n            //     ? this.$route.query.cameraCode\r\n            //     : 1\r\n            // let data = {\r\n            //     ip: this.$route.query.videoIP,\r\n            //     cameraCode: cameraCode,\r\n            // }\r\n            let queryData = {\r\n                pageBean: {\r\n                    page: 1,\r\n                    pageSize: -1,\r\n                    showTotal: true,\r\n                },\r\n                querys: [\r\n                    {\r\n                        group: 'main',\r\n                        operation: 'EQUAL',\r\n                        parentGroup: '',\r\n                        property: 'ip',\r\n                        relation: 'AND',\r\n                        value: this.$route.query.videoIP,\r\n                    },\r\n                ],\r\n            }\r\n            deviceAPI\r\n                .queryDeviceList(queryData)\r\n                .then((res) => {\r\n                    console.log(res, res.state, 'cameraCode')\r\n                    if (res.state) {\r\n                        let rows = res.value && res.value.rows\r\n                        let data = rows[0]\r\n                        if (data && data.ip) {\r\n                            this.handlePlay(data)\r\n                        } else {\r\n                            this.$message.warning('获取摄像机数据视频失败！')\r\n                        }\r\n                    } else {\r\n                        this.$message.warning('获取摄像机数据视频失败！')\r\n                    }\r\n                })\r\n                .catch((err) => {\r\n                    this.$message.warning('获取摄像机数据视频失败！' + err)\r\n                })\r\n        }\r\n    },\r\n    activated() {\r\n        // 组件keepalive 页面显示时重新加载数据\r\n        // this.initDevice()\r\n    },\r\n    methods: {\r\n        handleShowType() {\r\n            this.showDataPage = !this.showDataPage\r\n        },\r\n        handleModelType() {\r\n            if (this.modelType == 'T') {\r\n                this.modelType = 'U'\r\n            } else {\r\n                this.modelType = 'T'\r\n            }\r\n        },\r\n        getDictName(code, value) {\r\n            return utils.getDictName(code, value)\r\n        },\r\n        handlePlay(device) {\r\n            this.activeVideo = device\r\n            this.videoDialog = true\r\n            this.$nextTick(() => {\r\n                this.$refs.player.getVideoURL(device.cameraCode)\r\n            })\r\n        },\r\n        handleVideoDialogClose() {\r\n            this.$nextTick(() => {\r\n                this.$refs.player.stop()\r\n            })\r\n            this.videoDialog = false\r\n        },\r\n        initDevice() {\r\n            this.showDevice = false\r\n            this.checkListLane = [] // 车道选择\r\n            this.checkListDevice = [] // 设备选择\r\n            this.activeDeviceList = [] //选中设备和车道\r\n        },\r\n        changeDeviceList() {\r\n            this.activeDeviceList = [\r\n                ...this.checkListLane,\r\n                ...this.checkListDevice,\r\n            ]\r\n            this.$refs.model.changeDevice(this.activeDeviceList)\r\n        },\r\n        initPieData() {\r\n            this.carType = utils.getDictItemsFromCache('cllx')\r\n            this.pieData = []\r\n            this.carType.forEach((item) => {\r\n                this.pieData.push({\r\n                    value: 0,\r\n                    name: item.name,\r\n                    dictValue: item.value,\r\n                })\r\n            })\r\n        },\r\n        getData() {\r\n            this.tollStationId = sessionStorage.getItem('tollStationId')\r\n            let tollStationData = this.qs.stringify({\r\n                id: this.tollStationId,\r\n            })\r\n            this.pageQuery.querys[0].value = this.tollStationId\r\n            this.initPieData()\r\n            this.getLeftData1(tollStationData) // 通行费车流量\r\n            this.getLaneData() // 车道数量统计\r\n            this.successRate(tollStationData) // 交易成功率\r\n            this.getCarTypeData(tollStationData) // 车辆分类\r\n            this.getCarList() // 车辆记录\r\n            this.getDeviceData() // 设备统计\r\n            this.getLaneState() // 车道运行情况\r\n            this.getDeviceFaultData() //设备运行情况\r\n        },\r\n        getDataLeft() {\r\n            this.tollStationId = sessionStorage.getItem('tollStationId')\r\n            let tollStationData = this.qs.stringify({\r\n                id: this.tollStationId,\r\n            })\r\n            this.pageQuery.querys[0].value = this.tollStationId\r\n            this.initPieData()\r\n            this.getLeftData1(tollStationData) // 通行费车流量\r\n            this.getLaneData() // 车道数量统计\r\n            this.successRate(tollStationData) // 交易成功率\r\n            this.getCarTypeData(tollStationData) // 车辆分类\r\n            this.getCarList() // 车辆记录\r\n        },\r\n        getDataRight() {\r\n            console.log(11)\r\n            this.tollStationId = sessionStorage.getItem('tollStationId')\r\n            let tollStationData = this.qs.stringify({\r\n                id: this.tollStationId,\r\n            })\r\n            this.pageQuery.querys[0].value = this.tollStationId\r\n            this.getDeviceData() // 设备统计\r\n            this.getLaneState() // 车道运行情况\r\n            this.getDeviceFaultData() //设备运行情况\r\n        },\r\n        // 通行费车流量\r\n        getLeftData1(data) {\r\n            this.carFlow = 0\r\n            this.actualityMoney = 0\r\n            commonAPI.getChargeAndCarFlow(data).then((res) => {\r\n                if (res.value && res.value.length) {\r\n                    this.actualityMoney = res.value[0].money\r\n                        ? res.value[0].money\r\n                        : 0\r\n                    this.carFlow = res.value[0].carAmount\r\n                        ? res.value[0].carAmount\r\n                        : 0\r\n                }\r\n            })\r\n        },\r\n        // 车道\r\n        getLaneData() {\r\n            this.laneDataETC = 0\r\n            this.laneDataMixin = 0\r\n            this.laneDataTotal = 0\r\n            commonAPI.getLaneData(this.pageQuery).then((res) => {\r\n                if (res.value) {\r\n                    res.value.forEach((item) => {\r\n                        if (item.type && item.type == 1) {\r\n                            this.laneDataETC = item.amount\r\n                        }\r\n                        if (item.type && item.type == 2) {\r\n                            this.laneDataMixin = item.amount\r\n                        }\r\n                        if (item.totalAmount) {\r\n                            this.laneDataTotal = item.totalAmount\r\n                        }\r\n                    })\r\n                }\r\n            })\r\n        },\r\n        // 交易成功率\r\n        successRate(data) {\r\n            this.transactionRate.int = '00'\r\n            this.transactionRate.decimal = '00'\r\n            commonAPI.getSuccessRate(data).then((res) => {\r\n                if (res.value && res.value.identityRate) {\r\n                    let tempData = (res.value.identityRate + '').split('.')\r\n\r\n                    this.transactionRate.int = tempData[0]\r\n                        ? tempData[0] + ''\r\n                        : '00'\r\n                    this.transactionRate.decimal = tempData[1]\r\n                        ? tempData[1] + ''\r\n                        : '00'\r\n                }\r\n            })\r\n        },\r\n        // 车辆分类\r\n        getCarTypeData(data) {\r\n            this.loadObj.pieData = true\r\n            commonAPI.getCarTypeData(data).then((res) => {\r\n                if (res.value && res.value.length) {\r\n                    res.value.forEach((item) => {\r\n                        this.pieData.forEach((type) => {\r\n                            if (\r\n                                item.carType &&\r\n                                type.dictValue == item.carType\r\n                            ) {\r\n                                type.value = item.amount\r\n                            }\r\n                        })\r\n                    })\r\n                }\r\n                this.loadObj.pieData = false\r\n                this.drawPieChart()\r\n            })\r\n        },\r\n        // 车辆记录\r\n        getCarList() {\r\n            this.loadObj.scrollListData = true\r\n            this.scrollListData = []\r\n            let queryData = {\r\n                pageBean: {\r\n                    page: 1,\r\n                    pageSize: 100,\r\n                },\r\n                querys: [\r\n                    {\r\n                        group: 'main',\r\n                        operation: 'EQUAL',\r\n                        parentGroup: '',\r\n                        property: 'toll_station_id_',\r\n                        relation: 'AND',\r\n                        value: this.tollStationId,\r\n                    },\r\n                ],\r\n                sorter: [\r\n                    {\r\n                        direction: 'DESC',\r\n                        property: 'endTime',\r\n                    },\r\n                ],\r\n            }\r\n            commonAPI.getCarList(queryData).then((res) => {\r\n                if (res.value) {\r\n                    this.scrollListData = res.value.rows || []\r\n                    this.loadObj.scrollListData = false\r\n                }\r\n            })\r\n        },\r\n        // 设备运行情况\r\n        getDeviceData() {\r\n            this.onlineDevice = 0\r\n            this.offlineDevice = 0\r\n            this.faultDevice = 0\r\n            this.onlineRate = 0\r\n            this.gaugeData = [\r\n                {\r\n                    value: 0,\r\n                },\r\n            ]\r\n            commonAPI.getDeviceData(this.pageQuery).then((res) => {\r\n                if (res.value) {\r\n                    res.value.forEach((item) => {\r\n                        if (item.status && item.status == 1) {\r\n                            this.onlineDevice = item.amount\r\n                        }\r\n                        if (item.status && item.status == 2) {\r\n                            this.offlineDevice = item.amount\r\n                        }\r\n                        if (item.status && item.status == 3) {\r\n                            this.faultDevice = item.amount\r\n                        }\r\n                        if (item.totalAmount) {\r\n                            this.onlineRate = (\r\n                                this.onlineDevice / item.totalAmount\r\n                            ).toFixed(4)\r\n                            this.gaugeData = [\r\n                                {\r\n                                    value: this.onlineRate,\r\n                                },\r\n                            ]\r\n                        }\r\n                    })\r\n                }\r\n                this.drawGaugeeChart()\r\n            })\r\n        },\r\n        // 车道运行情况\r\n        getLaneState() {\r\n            this.loadObj.laneData = true\r\n            let tollStationData = this.qs.stringify({\r\n                tollStationId: this.tollStationId,\r\n            })\r\n            commonAPI\r\n                .getLaneState(tollStationData)\r\n                .then((res) => {\r\n                    if (res.value && res.value.length) {\r\n                        this.laneData = res.value\r\n                    }\r\n                })\r\n                .finally(() => {\r\n                    this.loadObj.laneData = false\r\n                })\r\n        },\r\n        // 设备运行情况\r\n        getDeviceFaultData() {\r\n            this.loadObj.scrollFaultData = true\r\n            this.deviceFaultData = []\r\n            let data = {\r\n                pageBean: {\r\n                    page: 1,\r\n                    pageSize: 100,\r\n                },\r\n                querys: [\r\n                    {\r\n                        group: 'main',\r\n                        operation: 'EQUAL',\r\n                        parentGroup: '',\r\n                        property: 'toll_station_id_',\r\n                        relation: 'AND',\r\n                        value: this.tollStationId,\r\n                    },\r\n                    {\r\n                        group: 'main',\r\n                        operation: 'EQUAL',\r\n                        parentGroup: '',\r\n                        property: 'state_',\r\n                        relation: 'AND',\r\n                        value: 0,\r\n                    },\r\n                ],\r\n                sorter: [\r\n                    {\r\n                        direction: 'DESC',\r\n                        property: 'hitchDate',\r\n                    },\r\n                ],\r\n            }\r\n            commonAPI\r\n                .getDeviceFaultData(data)\r\n                .then((res) => {\r\n                    if (res.value && res.value.rows) {\r\n                        this.deviceFaultData = res.value.rows\r\n                    }\r\n                })\r\n                .finally(() => {\r\n                    this.loadObj.scrollFaultData = false\r\n                })\r\n        },\r\n        getDeviceList() {\r\n            this.loadObj.scrollListData = true\r\n            this.scrollListData = []\r\n            commonAPI\r\n                .getDeviceList(this.pageQuery)\r\n                .then((res) => {\r\n                    if (res.value) {\r\n                        this.scrollListData = res.value.rows || []\r\n                    }\r\n                })\r\n                .finally(() => {\r\n                    this.loadObj.scrollListData = false\r\n                })\r\n        },\r\n        formatStatus(status) {\r\n            let label\r\n            if (status == 1) {\r\n                label = '正常'\r\n            } else if (status == 2) {\r\n                label = '离线'\r\n            } else if (status == 3) {\r\n                label = '故障'\r\n            }\r\n            return label\r\n        },\r\n        handleBtnChang(key) {\r\n            this.activeBtn = key\r\n        },\r\n        drawPieChart() {\r\n            // chart 已存在则为更新数据\r\n            if (this.pieChart) {\r\n                this.pieOption.series[0].data = this.pieData\r\n                this.pieChart.setOption(this.pieOption)\r\n            } else {\r\n                // chart 不存在则为初始化数据和图表\r\n                this.pieChart = echarts.init(\r\n                    document.getElementById('pie-chart')\r\n                )\r\n                this.pieOption = {\r\n                    title: {\r\n                        text: this.pieData[0].value + ' 辆',\r\n                        subtext: this.pieData[0].name,\r\n                        x: 'center',\r\n                        y: '36%',\r\n                        textStyle: {\r\n                            color: '#fff',\r\n                            fontSize: '16px',\r\n                            lineHeight: 5,\r\n                        },\r\n                        subtextStyle: {\r\n                            color: '#fff',\r\n                            fontSize: '12px',\r\n                        },\r\n                    },\r\n                    color: ['#3399FF', '#FD9854', '#55EDB0', '#F4DE79'],\r\n                    tooltip: {\r\n                        trigger: 'item',\r\n                        backgroundColor: 'rgba(13, 79, 145, 0.9)',\r\n                        borderColor: '#3399FF',\r\n                        confine: true,\r\n                        textStyle: {\r\n                            color: '#fff',\r\n                        },\r\n                        formatter: '{a} <br/>{b} : {c}辆 ({d}%)',\r\n                    },\r\n                    series: [\r\n                        {\r\n                            name: '车辆类型',\r\n                            type: 'pie',\r\n                            radius: ['65%', '86%'],\r\n                            center: ['50%', '50%'],\r\n                            data: this.pieData,\r\n                            label: {show: false},\r\n                            startAngle: 180,\r\n                            itemStyle: {\r\n                                borderColor: '#4d5664', //'#1c2838',\r\n                                borderWidth: 4,\r\n                            },\r\n                        },\r\n                    ],\r\n                }\r\n                this.pieOption && this.pieChart.setOption(this.pieOption)\r\n                window.addEventListener('resize', () => this.pieChart.resize())\r\n                this.intervalPie()\r\n            }\r\n            this.pieChart.dispatchAction({\r\n                type: 'highlight',\r\n                seriesIndex: 0,\r\n                dataIndex: this.curIndex,\r\n            })\r\n        },\r\n        drawGaugeeChart() {\r\n            // chart 已存在则为更新数据\r\n            if (this.gaugeChart) {\r\n                this.gaugeOption.series[0].data = this.gaugeData\r\n                this.gaugeChart.setOption(this.gaugeOption)\r\n            } else {\r\n                // chart 不存在则为初始化数据和图表\r\n                this.gaugeChart = echarts.init(document.getElementById('gauge'))\r\n                this.gaugeOption = {\r\n                    series: [\r\n                        {\r\n                            type: 'gauge',\r\n                            startAngle: 225,\r\n                            endAngle: -45,\r\n                            center: ['50%', '50%'],\r\n                            radius: '80%',\r\n                            min: 0,\r\n                            max: 1,\r\n                            axisLine: {\r\n                                lineStyle: {\r\n                                    width: 8,\r\n                                    color: [[1, '#3d4953']],\r\n                                },\r\n                            },\r\n                            itemStyle: {\r\n                                color: '#49cc97',\r\n                            },\r\n                            progress: {\r\n                                show: true,\r\n                                roundCap: false,\r\n                                width: 8,\r\n                            },\r\n                            pointer: {\r\n                                show: false,\r\n                            },\r\n                            axisTick: {\r\n                                show: false,\r\n                            },\r\n                            splitLine: {\r\n                                show: false,\r\n                            },\r\n                            axisLabel: {\r\n                                show: false,\r\n                            },\r\n                            title: {\r\n                                offsetCenter: [0, '-10%'],\r\n                                fontSize: 20,\r\n                            },\r\n                            detail: {\r\n                                fontSize: 26,\r\n                                offsetCenter: [0, 0],\r\n                                valueAnimation: true,\r\n                                formatter: function (value) {\r\n                                    return (value * 100).toFixed(2) + '%'\r\n                                },\r\n                                color: 'inherit',\r\n                            },\r\n                            data: this.gaugeData,\r\n                        },\r\n                    ],\r\n                }\r\n                this.gaugeOption && this.gaugeChart.setOption(this.gaugeOption)\r\n                window.addEventListener('resize', () =>\r\n                    this.gaugeChart.resize()\r\n                )\r\n            }\r\n        },\r\n        intervalPie() {\r\n            setInterval(() => {\r\n                this.pieChart.dispatchAction({\r\n                    type: 'downplay',\r\n                    seriesIndex: 0,\r\n                    dataIndex: this.curIndex,\r\n                })\r\n                this.curIndex++\r\n                if (this.curIndex >= this.pieData.length) {\r\n                    this.curIndex = 0\r\n                }\r\n                this.pieChart.dispatchAction({\r\n                    type: 'highlight',\r\n                    seriesIndex: 0,\r\n                    dataIndex: this.curIndex,\r\n                })\r\n\r\n                // 故障统计跟随变化统计数量已经名称\r\n                this.pieOption.title.text =\r\n                    this.pieData[this.curIndex].value + ' 辆'\r\n                this.pieOption.title.subtext = this.pieData[this.curIndex].name\r\n                this.pieOption && this.pieChart.setOption(this.pieOption)\r\n            }, 5000)\r\n        },\r\n        // websocket 刷新数据\r\n        heartCheckFun() {\r\n            //心跳检测,每30秒心跳一次\r\n            this.heartCheck = {\r\n                timeout: 1000 * 30,\r\n                timeoutObj: null,\r\n                serverTimeoutObj: null,\r\n                reset: () => {\r\n                    clearTimeout(this.timeoutObj)\r\n                    this.heartCheck.start()\r\n                    return this\r\n                },\r\n                start: () => {\r\n                    this.timeoutObj = setTimeout(() => {\r\n                        //这里发送一个心跳，后端收到后，返回一个心跳消息，\r\n                        //onmessage拿到返回的心跳就说明连接正常\r\n                        this.websocketSend(\r\n                            '{\"messageType\":\"ping\",\"message\":\"web\"}'\r\n                        )\r\n                        console.info('客户端发送心跳')\r\n                    }, this.timeout)\r\n                },\r\n            }\r\n        },\r\n        websocketOnclose(e) {\r\n            console.log('connection closed (' + e.code + ')')\r\n            this.reconnect()\r\n        },\r\n        websocketSend(text) {\r\n            // 数据发送\r\n            try {\r\n                this.websock.send(text)\r\n            } catch (err) {\r\n                console.log('send failed (' + err.code + ')')\r\n            }\r\n        },\r\n        reconnect() {\r\n            if (this.lockReconnect) return\r\n            this.lockReconnect = true\r\n            //没连接上会一直重连，设置延迟避免请求过多,重试3次结束链接\r\n            if (this.reconnectCount < 3) {\r\n                setTimeout(() => {\r\n                    console.info('尝试重连...')\r\n                    this.initWebSocket()\r\n                    this.lockReconnect = false\r\n                    this.reconnectCount++\r\n                    console.log(this.reconnectCount, 'this.reconnectCount')\r\n                }, 5000)\r\n            }\r\n        },\r\n        initWebSocket() {\r\n            // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https\r\n\r\n            const url =\r\n                window.context.WebSocket.replace('https://', 'wss://').replace(\r\n                    'http://',\r\n                    'ws://'\r\n                ) + '/websocket'\r\n            console.log(url, 'url')\r\n            this.websock = new WebSocket(url)\r\n            this.websock.onopen = this.websocketOnopen\r\n            this.websock.onerror = this.websocketOnerror\r\n            this.websock.onmessage = this.websocketOnmessage\r\n            this.websock.onclose = this.websocketOnclose\r\n        },\r\n        websocketOnopen() {\r\n            console.log('WebSocket连接成功')\r\n            this.heartCheck.start()\r\n        },\r\n        websocketOnerror(e) {\r\n            console.log(e, 'WebSocket连接发生错误')\r\n            this.reconnect()\r\n        },\r\n\r\n        websocketOnmessage(e) {\r\n            let data = JSON.parse(e.data) //解析对象   eval('(' + e.data + ')');\r\n            console.log('-----接收消息-------', e.data, data)\r\n            // 请求数据刷新\r\n            if (data['Station_Trans'] == 'Station_Trans') {\r\n                this.getDataLeft()\r\n            }\r\n            if (data['Station_Device'] == 'Station_Device') {\r\n                this.getDataRight()\r\n            }\r\n            // 模型触发视频播放\r\n            if (data && data.cameraCode) {\r\n                this.handlePlay(data)\r\n            }\r\n            this.heartCheck.reset()\r\n        },\r\n    },\r\n}\r\n",null]}