模块socket优化请求数据

whyczyk

2021-10-09 9fc3a1d5a70a5af805b37476d47331dad0b21d65

模块socket优化请求数据

 src/assets/js/getWsUrl.js

@@ -4,7 +4,7 @@
 * @returns {string}
 */
function getWsUrl(action, port) {
    let _port = port?port:8091;
    let _port = port ? port : 8090;
    let hostname = window.location.hostname;
    if(process.env.NODE_ENV == 'dev') {
        hostname = "localhost";

 src/assets/js/socket.js

@@ -1,67 +1,93 @@
import getWsUrl from "@/assets/js/getWsUrl";
var websock = null;
var global_callback = null;

function initWebSocket(action, port) { //初始化weosocket
export class WebSocketClass {
    //ws地址
    const wsUri = getWsUrl(action, port);
    websock = new WebSocket(wsUri);
    websock.onmessage = function (e) {
        websocketonmessage(e);
    constructor(url, msgCallback, time, port) {
        this.wsUrl = getWsUrl(url, port)
        this.msgCallback = msgCallback;
        this.time = time;     //心跳时间
        this.initTime = 5000   //重连时间
        this.init()
    }
    websock.onclose = function (e) {
        websocketclose(e);
    init(data) {
        let WSINWIN = 'WebSocket' in window
        if (!WSINWIN) {
            return console.log('Websocket not supported')
    }
    websock.onopen = function () {
        websocketOpen();
    }
        this.ws = new WebSocket(this.wsUrl);
        this.ws.onopen = () => {
            this.status = 'open';
            this.heartCheck();
            if (data) { this.ws.send(data) }
        };

    //连接发生错误的回调方法
    websock.onerror = function () {
        console.log("WebSocket连接发生错误");
    }
}

// 实际调用的方法
function sendSock(agentData, callback) {
    global_callback = callback;
    if (websock.readyState === websock.OPEN) {
        //若是ws开启状态
        websocketsend(agentData)
    } else if (websock.readyState === websock.CONNECTING) {
        // 若是 正在开启状态，则等待1s后重新调用
        setTimeout(function () {
            sendSock(agentData, callback);
        }, 1000);
        this.ws.onmessage = e => {
            if (e.data === 'pong') {
                this.pingPong = 'pong'
    } else {
        // 若未开启 ，则等待1s后重新调用
        setTimeout(function () {
            sendSock(agentData, callback);
        }, 1000);
                this.msgCallback(JSON.parse(e.data));
    }
        };

        this.ws.onclose = () => {
            clearInterval(this.pingInterval);
            clearInterval(this.pongInterval)
            if (this.status === 'close') {
                //console.log(‘手动关闭成功‘,new Date())
            } else {
                this.relink();  //非人为关闭进行重连
            }
        }
        this.ws.onerror = e => {
            console.log(e);
            this.relink()
        }
        return false
}

//数据接收
function websocketonmessage(e) {
    global_callback(JSON.parse(e.data));
    heartCheck() {// 心跳
        this.pingPong = 'ping';
        let timer = this.time + 1000
        this.pingInterval = setInterval(() => {
            if (this.ws.readyState === 1) {
                this.ws.send('ping')
            }
        }, this.time);
        this.pongInterval = setInterval(() => {
            if (this.pingPong === 'ping') {
                clearInterval(this.pingInterval);
                clearInterval(this.pongInterval)
                this.ws.close()
            } else {
                this.pingPong = 'ping'
            }
        }, timer)
}

//数据发送
function websocketsend(agentData) {
    websock.send(JSON.stringify(agentData));
    sendHandle(data) {
        return this.ws.send(data);
}

//关闭
function websocketclose() {
    console.log("WebSocket已关闭");
    relink() {
        if (this.status == 'open' && this.readyState == 1) {  //连接正常
            return
}
//WebSocket连接成功
function websocketOpen() {
    console.log("WebSocket连接成功");
        if (this.initTimeOut) { //定时器已经启动
            return;
        }
        this.initTimeOut = setTimeout(() => {
            clearInterval(this.pingInterval);
            clearInterval(this.pongInterval);
            this.initTimeOut = null;
            this.init();
        }, this.initTime)
}

function close() {
    websock.close()
    // 手动关闭WebSocket
    closeMyself() {
        console.log('执行手动关闭', new Date());
        this.status = 'close';
        this.ws.close();
        this.ws = null
}

export { sendSock, initWebSocket, close }
}

 src/components/charts/AcInputWarp.vue

@@ -16,16 +16,16 @@
</template>

<script>
import {
    powerAlarmAcInput
} from '@/assets/js/api'
import AcInput from './AcInput.vue'
import { WebSocketClass } from '@/assets/js/socket'
export default {
    components: {
        AcInput
    },
    data() {
        return {}
        return {
            websock: null
        }
    },
    mounted() {

@@ -54,20 +54,15 @@
                    })
                } else {
                    this.postData()
                    setInterval(() => {
                        this.postData()
                    }, 3000)
                }

            })
        },
        postData() {
            let userId = localStorage.getItem('userId');
            let params = {
                userId: userId
            }
            powerAlarmAcInput(params).then((res) => {
                if (res.data.code == 1) {
            this.websock = new WebSocketClass(`/screen/powerAlarm/acInput/${userId}`, this.wsMessage, 4000)
        },
        wsMessage(res) {
            if (res.code == 1) {
                    let optionData = [{
                        title: '熔丝告警',
                        data: 56,
@@ -89,7 +84,7 @@
                        acColor: '#7f3a29',
                        resColor: '#fc5f02',
                    }]
                    let resData = res.data.data;
                let resData = res.data;
                    for (let key in resData) {
                        optionData.map(item => {
                            if (item.title == key) {
@@ -103,9 +98,11 @@
                        chart.resize();
                    })
                }
            }).catch((err) => {
                console.log(err)
            });
        },
        outClear() {
            this.websock.closeMyself()
            this.websock = null
            window.removeEventListener('resize', this.resize);
        },
        resize() {
            this.$refs.AcInput0.resize();

 src/components/charts/CustomPie.vue

@@ -10,15 +10,15 @@
import {
    chartFontsize
} from '@/assets/js/chartFontsize';
import {
    powerAlarmError
} from '@/assets/js/api'
import { WebSocketClass } from '@/assets/js/socket'
export default {
    name: "CustomPie",
    chart: "",
    chartData: {},
    data() {
        return {}
        return {
            websock: null
        }
    },
    methods: {
        toParentPage() {
@@ -297,18 +297,14 @@
                this.organizeData(sendData)
            } else {
                this.postData()
                setInterval(() => {
                    this.postData()
                }, 3000)
            }
        },
        postData() {
            let userId = localStorage.getItem('userId');
            let params = {
                userId: userId
            }
            powerAlarmError(params).then((res) => {
                if (res.data.code == 1) {
            this.websock = new WebSocketClass(`/screen/powerAlarm/error/${userId}`, this.wsMessage, 4000)
        },
        wsMessage(res) {
            if (res.code == 1) {
                    let optionData = [{
                        value: 0,
                        name: '通讯故障',
@@ -340,7 +336,7 @@
                        color: '#43F9FD'
                    },
                    ]
                    let resData = res.data.data;
                let resData = res.data;
                    for (let key in resData) {
                        optionData.map(item => {
                            if (item.name == key) {
@@ -351,9 +347,11 @@
                    this.$options.chartData = optionData;
                    this.organizeData(optionData)
                }
            }).catch((err) => {
                console.log(err)
            });
        },
        outClear() {
            this.websock.closeMyself()
            this.websock = null
            window.removeEventListener('resize', this.resize);
        },
        resize() {
            setTimeout(() => {

 src/components/charts/MonCap.vue

@@ -17,9 +17,7 @@

<script>
import CircleChart from "@/components/charts/CircleChart";
import {
    batteryAlarmMonCapacity
} from '@/assets/js/api'
import { WebSocketClass } from '@/assets/js/socket'
export default {
    name: "MonCap",
    components: {
@@ -54,7 +52,8 @@
                    color: '#F3E501',
                }
                ]
            }
            },
            websock: null
        }
    },
    methods: {
@@ -80,20 +79,15 @@
                    chart.resize();
                } else {
                    this.postData()
                    setInterval(() => {
                        this.postData()
                    }, 3000)
                }

            })
        },
        postData() {
            let userId = localStorage.getItem('userId');
            let params = {
                userId: userId
            }
            batteryAlarmMonCapacity(params).then((res) => {
                if (res.data.code == 1) {
            this.websock = new WebSocketClass(`/screen/batteryAlarm/monCapacity/${userId}`, this.wsMessage, 4000)
        },
        wsMessage(res) {
            if (res.code == 1) {
                    let optionData = {
                        circle: [{
                            name: '告警数',
@@ -112,7 +106,7 @@
                        },
                        ]
                    }
                    let resData = res.data.data;
                let resData = res.data;
                    for (let key in resData) {
                        optionData.circle.map(item => {
                            if (item.name == key) {
@@ -129,9 +123,11 @@
                    chart.setData(optionData.circle);
                    chart.resize();
                }
            }).catch((err) => {
                console.log(err)
            });
        },
        outClear() {
            this.websock.closeMyself()
            this.websock = null
            window.removeEventListener('resize', this.resize);
        },
        resize() {
            this.$refs.circleChart.resize();

 src/components/charts/PictorialBar.vue

@@ -6,9 +6,7 @@

<script>
import * as echarts from "echarts";
import {
    onlinegroupVolAnalysis
} from '@/assets/js/api'
import { WebSocketClass } from '@/assets/js/socket'
export default {
    name: "PictorialBar",
    chart: "",
@@ -20,7 +18,9 @@
        }
    },
    data() {
        return {}
        return {
            websock: null
        }
    },
    methods: {
        toParentPage() {
@@ -45,7 +45,7 @@
                    top: 40,
                    right: 20,
                    left: 50,
                    bottom: 30
                    bottom: 20
                },
                tooltip: {
                    trigger: 'item',
@@ -76,6 +76,9 @@
                    data: data.xData,
                },
                yAxis: {
                    axisLabel: {
                        color: '#fff',
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#007DD140',
@@ -109,18 +112,14 @@
                this.organizeData(sendData)
            } else {
                this.postData()
                setInterval(() => {
                    this.postData()
                }, 3000)
            }
        },
        postData() {
            let userId = localStorage.getItem('userId');
            let params = {
                userId: userId
            }
            onlinegroupVolAnalysis(params).then((res) => {
                if (res.data.code == 1) {
            this.websock = new WebSocketClass(`/screen/batteryAlarm/onlinegroupVolAnalysis/${userId}`, this.wsMessage, 4000)
        },
        wsMessage(res) {
            if (res.code == 1) {
                    let optionData = {
                        xData: [],
                        series: [{
@@ -135,7 +134,7 @@
                        }
                        ]
                    }
                    let resData = res.data.data;
                let resData = res.data;
                    for (let key in resData) {
                        let seriesData = resData[key]
                        if (key == '在线电压') {
@@ -171,9 +170,11 @@
                    this.$options.chartData = optionData;
                    this.organizeData(optionData)
                }
            }).catch((err) => {
                console.log(err)
            });
        },
        outClear() {
            this.websock.closeMyself()
            this.websock = null
            window.removeEventListener('resize', this.resize);
        },
        resize() {
            setTimeout(() => {

 src/components/charts/RoseChart.vue

@@ -6,9 +6,7 @@

<script>
import * as echarts from 'echarts';
import {
    batteryAlarmBtsStatus
} from '@/assets/js/api'
import { WebSocketClass } from '@/assets/js/socket'
export default {
    name: "RoseChart",
    chart: "",
@@ -20,7 +18,9 @@
        }
    },
    data() {
        return {}
        return {
            websock: null
        }
    },
    methods: {
        toParentPage() {
@@ -127,18 +127,14 @@
                this.organizeData(sendData)
            } else {
                this.postData()
                setInterval(() => {
                    this.postData()
                }, 3000)
            }
        },
        postData() {
            let userId = localStorage.getItem('userId');
            let params = {
                userId: userId
            }
            batteryAlarmBtsStatus(params).then((res) => {
                if (res.data.code == 1) {
            this.websock = new WebSocketClass(`/screen/batteryAlarm/btsStatus/${userId}`, this.wsMessage, 4000)
        },
        wsMessage(res) {
            if (res.code == 1) {
                    let optionData = [{
                        value: 0,
                        name: '在线浮充',
@@ -165,7 +161,7 @@
                        color: '#9EE6B8'
                    },
                    ]
                    let resData = res.data.data;
                let resData = res.data;
                    for (let key in resData) {
                        optionData.map(item => {
                            if (item.name == key) {
@@ -176,9 +172,11 @@
                    this.$options.chartData = optionData;
                    this.organizeData(optionData)
                }
            }).catch((err) => {
                console.log(err)
            });
        },
        outClear() {
            this.websock.closeMyself()
            this.websock = null
            window.removeEventListener('resize', this.resize);
        },
        resize() {
            setTimeout(() => {

 src/components/charts/RoseChartED.vue

@@ -6,9 +6,7 @@

<script>
import * as echarts from 'echarts';
import {
    endurance
} from '@/assets/js/api'
import { WebSocketClass } from '@/assets/js/socket'
export default {
    name: "RoseChartED",
    chart: "",
@@ -20,7 +18,9 @@
        }
    },
    data() {
        return {}
        return {
            websock: null
        }
    },
    methods: {
        toParentPage() {
@@ -66,18 +66,14 @@
                this.organizeData(sendData)
            } else {
                this.postData()
                setInterval(() => {
                    this.postData()
                }, 3000)
            }
        },
        postData() {
            let userId = localStorage.getItem('userId');
            let params = {
                userId: userId
            }
            endurance(params).then((res) => {
                if (res.data.code == 1) {
            this.websock = new WebSocketClass(`/screen/batteryData/endurance/${userId}`, this.wsMessage, 4000)
        },
        wsMessage(res) {
            if (res.code == 1) {
                    let optionData = [{
                        value: 0,
                        name: '续航1小时内',
@@ -99,7 +95,7 @@
                        color: '#8278E9'
                    },
                    ]
                    let resData = res.data.data;
                let resData = res.data;
                    for (let key in resData) {
                        optionData.map(item => {
                            if (item.name == key) {
@@ -110,9 +106,11 @@
                    this.$options.chartData = optionData;
                    this.organizeData(optionData)
                }
            }).catch((err) => {
                console.log(err)
            });
        },
        outClear() {
            this.websock.closeMyself()
            this.websock = null
            window.removeEventListener('resize', this.resize);
        },
        resize() {
            setTimeout(() => {

 src/components/charts/RoseChartHea.vue

@@ -6,9 +6,7 @@

<script>
import * as echarts from 'echarts';
import {
    capStatus
} from '@/assets/js/api'
import { WebSocketClass } from '@/assets/js/socket'
export default {
    name: "RoseChartHea",
    chart: "",
@@ -20,7 +18,9 @@
        }
    },
    data() {
        return {}
        return {
            websock: null
        }
    },
    methods: {
        toParentPage() {
@@ -66,18 +66,14 @@
                this.organizeData(sendData)
            } else {
                this.postData()
                setInterval(() => {
                    this.postData()
                }, 3000)
            }
        },
        postData() {
            let userId = localStorage.getItem('userId');
            let params = {
                userId: userId
            }
            capStatus(params).then((res) => {
                if (res.data.code == 1) {
            this.websock = new WebSocketClass(`/screen/batteryData/capStatus/${userId}`, this.wsMessage, 4000)
        },
        wsMessage(res) {
            if (res.code == 1) {
                    let optionData = [{
                        value: 0,
                        name: '单体容量告警',
@@ -94,7 +90,7 @@
                        color: '#FEDB5B'
                    },
                    ]
                    let resData = res.data.data;
                let resData = res.data;
                    for (let key in resData) {
                        optionData.map(item => {
                            if (item.name == key) {
@@ -105,9 +101,11 @@
                    this.$options.chartData = optionData;
                    this.organizeData(optionData)
                }
            }).catch((err) => {
                console.log(err)
            });
        },
        outClear() {
            this.websock.closeMyself()
            this.websock = null
            window.removeEventListener('resize', this.resize);
        },
        resize() {
            setTimeout(() => {

 src/components/charts/abeamProChart.vue

@@ -16,9 +16,7 @@
import {
    chartFontsize
} from '@/assets/js/chartFontsize'
import {
    batteryStatus
} from '@/assets/js/api'
import { WebSocketClass } from '@/assets/js/socket'
export default {
    name: "abeamProChart",
    chart: "",
@@ -32,7 +30,7 @@
    },
    data() {
        return {

            websock: null
        }
    },
    methods: {
@@ -187,25 +185,21 @@
                this.organizeData(sendData)
            } else {
                this.postData()
                setInterval(() => {
                    this.postData()
                }, 3000)
            }
        },
        postData() {
            let userId = localStorage.getItem('userId');
            let params = {
                userId: userId
            }
            batteryStatus(params).then((res) => {
                if (res.data.code == 1) {
            this.websock = new WebSocketClass(`/screen/battery/status/${userId}`, this.wsMessage, 4000)
        },
        wsMessage(res) {
            if (res.code == 1) {
                    let optionData = {
                        yData: [],
                        color: ['#f58881', '#b4d465', '#ffcb29'],
                        bgColor: ['rgba(245,136,129,0.35)', 'rgba(255,255,255,0.35)', 'rgba(255,203,41,0.35)'],
                        data: []
                    }
                    let resData = res.data.data;
                let resData = res.data;
                    for (let key in resData) {
                        optionData.yData.push(key);
                        optionData.data.push(resData[key]);
@@ -213,9 +207,6 @@
                    this.$options.chartData = optionData;
                    this.organizeData(optionData)
                }
            }).catch((err) => {
                console.log(err)
            });
        },
        resize() {
            setTimeout(() => {
@@ -224,6 +215,11 @@
                    this.setData(this.$options.chartData);
                }
            }, 300)
        },
        outClear() {
            this.websock.closeMyself()
            this.websock = null
            window.removeEventListener('resize', this.resize);
        }
    },
    mounted() {
@@ -233,6 +229,7 @@
        window.addEventListener('resize', this.resize);
    },
    destroyed() {
        this.websock.closeMyself()
        window.removeEventListener('resize', this.resize);
    }
}

 src/components/charts/chinaMap.vue

@@ -48,7 +48,7 @@
let chartData = []; //chart数据
let abnormalArr = []; //异常数组
let tempData = []; //站点数组
let chart, chartLng, chartLat, timers;
let chart, chartLng, chartLat;

export default {
    components: { InfoPanel },
@@ -57,7 +57,7 @@
    chartData: "",
    data() {
        return {
            timer: null,
            timers: null,
            mapName: 'zhongguo',
            mapInfoX: null,
            mapInfoY: null,
@@ -86,7 +86,15 @@
            this.$options.chart.setOption(opt);
        },
        setData(sendData) {
            if (sendData) {
            this.$options.chartData = sendData;
                this.organizeData(sendData)
            } else {
                // 初始化页面
                this.getAllMapOutlineAction();
            }
        },
        organizeData(data) {
            let geoJson = require(`../../../public/mapJson/${this.mapName}.json`);
            echarts.registerMap('map', geoJson);
            // 整体配置项
@@ -166,7 +174,7 @@
                        }
                    }
                },
                series: this.getSeries(sendData)
                series: this.getSeries(data)
            };
            // 设置配置项
            this.setOption(option);
@@ -230,10 +238,9 @@
            return point;
        },
        startSearchMapHomeState() {
            this.timer = setInterval(() => {
            this.timers = setInterval(() => {
                this.searchChartHomeState()
            }, 4000)

        },
        initPage() {
            // 初始化地图
@@ -241,13 +248,12 @@
            chart = echarts.init(document.getElementById('cityChart'));

            chart.on("georoam", (params) => {
                clearInterval(this.timer)
                clearInterval(this.timers)
                if (!this.isShowInfoPanel) {
                    return;
                }
                this.isShowInfoPanel = false;
                clearTimeout(timers);
                timers = setTimeout(() => {
                this.timers = setTimeout(() => {
                    this.isShowInfoPanel = true;
                    let poit = this.convertMain(chartLng, chartLat);
                    this.mapInfoX = poit[0] - 120;
@@ -264,7 +270,7 @@
                    }
                    chart.setOption(option); //设置option

                    this.startSearchMapHomeState();
                    // this.startSearchMapHomeState();
                }, 300);
            });
            chart.off("click"); //防止chart点击触发多次
@@ -504,10 +510,14 @@
                "*"
            );
        },
        outClear() {
            console.log(this.timers)
            window.removeEventListener('resize', this.resize);
            clearInterval(this.timers)
            this.timers = null
        }
    },
    mounted() {
        // 初始化页面
        this.getAllMapOutlineAction();
        // 基于准备好的dom，初始化echarts实例
        this.$options.chart = echarts.init(this.$refs.chart);
        // 监听chartMap的面板
@@ -516,8 +526,7 @@
                return;
            }
            this.isShowInfoPanel = false;
            clearInterval(timers)
            timers = setTimeout(() => {
            setTimeout(() => {
                this.isShowInfoPanel = true;
                let poit = this.convertMain(chartLng, chartLat);
                this.mapInfoX = poit[0] - 120;
@@ -527,12 +536,7 @@
    },
    destroyed() {
        window.removeEventListener('resize', this.resize);
        clearInterval(this.timer)
        // this.$socket.initWebSocket("/device", "")
        // this.$socket.sendSock(null, (res) => {
        //     console.log(res)
        // });
        // this.$socket.close();
        clearInterval(this.timers)
    },
}
</script>

 src/components/charts/dischargeCircuit.vue

@@ -8,6 +8,7 @@

<script>
import * as echarts from 'echarts';
import { WebSocketClass } from '@/assets/js/socket'
// 放电电流 页面
export default {
    name: "dischargeCircuit",
@@ -38,7 +39,8 @@
    },
    data() {
        return {
            userId: ""
            userId: "",
            websock: null
        }
    },
    methods: {
@@ -58,25 +60,18 @@
        setOption(opt) {
            this.$options.discharge.setOption(opt);
        },
        setData(dataList) {
        postData() {
            let userId = localStorage.getItem('userId');
            this.websock = new WebSocketClass(`/screen/batteryAlarm/dischargeAnalysis/${userId}`, this.wsMessage, 4000)
        },
        wsMessage(res) {
            let self = this;
            let xAxisData = [];//['低告警数量', '告警机房总数', '告警机房数比例', '告警总数','告警总数比例']
            let maxYAxis = [];
            let xData = [];
            let data = [];
            // 存值
            self.$options.chartData = dataList;
            if (!dataList) {
                self.$axios({
                    method: "get",
                    url: "/batteryAlarm/dischargeAnalysis",
                    params: {
                        userId: self.userId
                    }

                }).then(res => {
                    if (res.data.code == 1) {
                        let result = res.data.data;
            if (res.code == 1) {
                let result = res.data;
                        for (const key in result) {
                            xAxisData.push(key);
                            xData.push(result[key]);
@@ -93,11 +88,21 @@
                        self.optionSet(xAxisData, maxYAxis, xData, data);
                        console.log(xAxisData, data)
                    }
                })
        },
        outClear() {
            this.websock.closeMyself()
            this.websock = null
            window.removeEventListener('resize', this.resize);
        },
        setData(dataList) {
            let self = this;
            // 存值
            self.$options.chartData = dataList;
            if (!dataList) {
                self.postData()
            } else {
                self.optionSet(dataList.xAxisData, dataList.maxYAxis, dataList.xData, dataList.data);
            }

        },
        // 获取对应数据
        getArrValue(value) {
@@ -112,11 +117,10 @@
            let self = this;
            var option = {
                grid: {
                    left: '15%',
                    right: '15%',
                    bottom: '10%',
                    top: '17%',
                    z: 22
                    top: 40,
                    right: 50,
                    left: 50,
                    bottom: 30
                },
                xAxis: [
                    {

 src/components/charts/histogramAlternating.vue

@@ -12,6 +12,7 @@

<script>
import * as echarts from 'echarts';
import { WebSocketClass } from '@/assets/js/socket'
// 交流ABC 页面
export default {
    name: "histogramAlternating",
@@ -44,7 +45,8 @@
        return {
            gjjfzs: 0,
            gjjfsbl: 0,
            userId: ""
            userId: "",
            websock: null
        }
    },
    methods: {
@@ -64,24 +66,15 @@
        setOption(opt) {
            this.$options.chart.setOption(opt);
        },
        setData(data) {
        postData() {
            let userId = localStorage.getItem('userId');
            this.websock = new WebSocketClass(`/screen/powerAlarm/acABC/${userId}`, this.wsMessage, 4000)
        },
        wsMessage(res) {
            let self = this;
            if (data) {
                self.$options.chartData = data;
                self.gjjfzs = data.gjjfzs;
                self.gjjfsbl = data.gjjfsbl;
                self.optionSet(self.$options.chartData);
            } else {
                self.$axios({
                    method: "get",
                    url: "/powerAlarm/acABC",
                    params: {
                        userId: self.userId
                    }
                }).then(res => {
                    if (res.data.code == 1) {
                        let result = res.data.data[0];
                        let zsObj = res.data.data[1];
            if (res.code == 1) {
                let result = res.data[0];
                let zsObj = res.data[1];
                        let dataList = [];
                        let dataName = [];
                        for (const key in result) {
@@ -93,9 +86,22 @@
                        self.$options.chartData.gjjfzs = zsObj.告警机房总数;
                        self.$options.chartData.gjjfsbl = zsObj.告警机房数比例 + "%";
                        self.optionSet(self.$options.chartData);
                        console.log(res)
                    }
                })
        },
        outClear() {
            this.websock.closeMyself()
            this.websock = null
            window.removeEventListener('resize', this.resize);
        },
        setData(data) {
            let self = this;
            if (data) {
                self.$options.chartData = data;
                self.gjjfzs = data.gjjfzs;
                self.gjjfsbl = data.gjjfsbl;
                self.optionSet(self.$options.chartData);
            } else {
                self.postData()
            }
        },
        optionSet(data) {
@@ -150,6 +156,12 @@

            let option = {
                // backgroundColor: "rgba(72, 84, 96,1.0)",
                grid: {
                    top: 40,
                    right: 20,
                    left: 50,
                    bottom: 30
                },
                xAxis: {
                    type: 'category',
                    data: data.dataName,
@@ -190,7 +202,6 @@
                series: [{
                    type: 'custom',
                    renderItem: (params, api) => {
                        console.log(14777, api.style().aaa)
                        const location = api.coord([api.value(0), api.value(1)])
                        return {
                            type: 'group',

 src/components/charts/imgPieChart.vue

@@ -12,9 +12,7 @@
import {
    chartFontsize
} from '@/assets/js/chartFontsize'
import {
    rectifier
} from '@/assets/js/api'
import { WebSocketClass } from '@/assets/js/socket'
const pieImg = require('../../assets/images/rectifier-img.png');
export default {
    name: "imgPieChart",
@@ -29,7 +27,7 @@
    },
    data() {
        return {

            websock: null
        }
    },
    methods: {
@@ -182,22 +180,18 @@
                this.organizeData(sendData)
            } else {
                this.postData()
                setInterval(() => {
                    this.postData()
                }, 3000)
            }
        },
        postData() {
            let userId = localStorage.getItem('userId');
            let params = {
                userId: userId
            }
            rectifier(params).then((res) => {
                if (res.data.code == 1) {
            this.websock = new WebSocketClass(`/screen/powerAlarm/rectifier/${userId}`, this.wsMessage, 4000)
        },
        wsMessage(res) {
            if (res.code == 1) {
                    let optionData = {
                        data: []
                    }
                    let resData = res.data.data;
                let resData = res.data;
                    for (let key in resData) {
                        let obj = {};
                        obj.name = key;
@@ -207,9 +201,6 @@
                    this.$options.chartData = optionData;
                    this.organizeData(optionData)
                }
            }).catch((err) => {
                console.log(err)
            });
        },
        resize() {
            setTimeout(() => {
@@ -218,6 +209,11 @@
                    this.setData(this.$options.chartData);
                }
            }, 300)
        },
        outClear() {
            this.websock.closeMyself()
            this.websock = null
            window.removeEventListener('resize', this.resize);
        }
    },
    mounted() {
@@ -227,6 +223,7 @@
        window.addEventListener('resize', this.resize);
    },
    destroyed() {
        this.websock.closeMyself()
        window.removeEventListener('resize', this.resize);
    }
}

 src/components/charts/latticeBar.vue

@@ -11,9 +11,7 @@
import {
    chartFontsize
} from '@/assets/js/chartFontsize'
import {
    chargeAnalysis
} from '@/assets/js/api'
import { WebSocketClass } from '@/assets/js/socket'
export default {
    name: "latticeBar",
    chart: "",
@@ -27,7 +25,7 @@
    },
    data() {
        return {

            websock: null
        }
    },
    methods: {
@@ -186,18 +184,14 @@
                this.organizeData(sendData)
            } else {
                this.postData()
                setInterval(() => {
                    this.postData()
                }, 3000)
            }
        },
        postData() {
            let userId = localStorage.getItem('userId');
            let params = {
                userId: userId
            }
            chargeAnalysis(params).then((res) => {
                if (res.data.code == 1) {
            this.websock = new WebSocketClass(`/screen/batteryAlarm/chargeAnalysis/${userId}`, this.wsMessage, 4000)
        },
        wsMessage(res) {
            if (res.code == 1) {
                    let optionData = {
                        xData: [],
                        series: [{
@@ -210,7 +204,7 @@
                            color: '#ff6b6b'
                        }]
                    }
                    let resData = res.data.data;
                let resData = res.data;
                    for (let key in resData.reCharge) {
                        if (typeof resData.reCharge[key] == 'string') {
                            optionData.series[0].data.push(Number(resData.reCharge[key].split('%')[0]))
@@ -229,9 +223,6 @@
                    this.$options.chartData = optionData;
                    this.organizeData(optionData)
                }
            }).catch((err) => {
                console.log(err)
            });
        },
        resize() {
            setTimeout(() => {
@@ -240,6 +231,11 @@
                    this.setData(this.$options.chartData);
                }
            }, 300)
        },
        outClear() {
            this.websock.closeMyself()
            this.websock = null
            window.removeEventListener('resize', this.resize);
        }
    },
    mounted() {
@@ -248,9 +244,6 @@

        window.addEventListener('resize', this.resize);
    },
    destroyed() {
        window.removeEventListener('resize', this.resize);
    }
}
</script>


 src/components/charts/monomerVoltage.vue

@@ -8,6 +8,7 @@

<script>
import * as echarts from 'echarts';
import { WebSocketClass } from '@/assets/js/socket'
// 单体电压、内阻和温度 页面
export default {
    name: "monomerVoltage",
@@ -38,7 +39,8 @@
    },
    data() {
        return {
            userId: ""
            userId: "",
            websock: null
        }
    },
    methods: {
@@ -58,23 +60,17 @@
        setOption(opt) {
            this.$options.chart.setOption(opt);
        },
        setData(dataList) {
        postData() {
            let userId = localStorage.getItem('userId');
            this.websock = new WebSocketClass(`/screen/batteryAlarm/monVRTAnalysis/${userId}`, this.wsMessage, 4000)
        },
        wsMessage(res) {
            let self = this;
            let legendData = [];
            let yAxisData = [];
            let data = [];
            // 存值
            self.$options.chartData = dataList;
            if (!dataList) {
                self.$axios({
                    method: "get",
                    url: "/batteryAlarm/monVRTAnalysis",
                    params: {
                        userId: self.userId
                    }
                }).then(res => {
                    if (res.data.code == 1) {
                        let result = res.data.data;
            if (res.code == 1) {
                let result = res.data;
                        let index = 0;
                        for (const key in result) {
                            let obj = {
@@ -94,7 +90,18 @@
                        }
                        self.optionSet(legendData, yAxisData, data);
                    }
                })
        },
        outClear() {
            this.websock.closeMyself()
            this.websock = null
            window.removeEventListener('resize', this.resize);
        },
        setData(dataList) {
            let self = this;
            // 存值
            self.$options.chartData = dataList;
            if (!dataList) {
                self.postData()
            } else {
                self.optionSet(dataList.legendData, dataList.yAxisData, dataList.data);
            }

 src/components/charts/powerChart.vue

@@ -23,15 +23,16 @@

<script>
import prossPieChart from "./prossPieChart"
import {
    powerAlarmStatus
} from '@/assets/js/api'
import { WebSocketClass } from '@/assets/js/socket'

export default {
    components: {
        prossPieChart
    },
    data() {
        return {}
        return {
            websock: null
        }
    },
    mounted() {

@@ -60,20 +61,16 @@
                    })
                } else {
                    this.postData()
                    setInterval(() => {
                        this.postData()
                    }, 3000)
                }

            })
        },
        postData() {
            let userId = localStorage.getItem('userId');
            let params = {
                userId: userId
            }
            powerAlarmStatus(params).then((res) => {
                if (res.data.code == 1) {
            this.websock = new WebSocketClass(`/screen/powerAlarm/status/${userId}`, this.wsMessage, 4000)
        },
        wsMessage(res) {
            if (res.code == 1) {
                    let optionData = [{
                        title: '',
                        data: 0,
@@ -106,7 +103,7 @@
                        color: '#7fc57c'
                    }]
                    let index = 0;
                    let resData = res.data.data;
                let resData = res.data;
                    for (let key in resData) {
                        optionData[index].title = key;
                        if (typeof resData[key] == 'string') {
@@ -123,9 +120,11 @@
                        chart.resize();
                    })
                }
            }).catch((err) => {
                console.log(err)
            });
        },
        outClear() {
            this.websock.closeMyself()
            this.websock = null
            window.removeEventListener('resize', this.resize);
        },
        resize() {
            this.$refs.prossPieChart0.resize();

 src/components/charts/triangleBarChart.vue

@@ -12,9 +12,7 @@
import {
    chartFontsize
} from '@/assets/js/chartFontsize'
import {
    batteryGroup
} from '@/assets/js/api'
import { WebSocketClass } from '@/assets/js/socket'
export default {
    name: "triangleBarChart",
    chart: "",
@@ -28,7 +26,7 @@
    },
    data() {
        return {

            websock: null
        }
    },
    methods: {
@@ -186,23 +184,19 @@
                this.organizeData(sendData)
            } else {
                this.postData()
                setInterval(() => {
                    this.postData()
                }, 3000)
            }
        },
        postData() {
            let userId = localStorage.getItem('userId');
            let params = {
                userId: userId
            }
            batteryGroup(params).then((res) => {
                if (res.data.code == 1) {
            this.websock = new WebSocketClass(`/screen/powerAlarm/batteryGroup/${userId}`, this.wsMessage, 4000)
        },
        wsMessage(res) {
            if (res.code == 1) {
                    let optionData = {
                        xData: [],
                        data: []
                    }
                    let resData = res.data.data;
                let resData = res.data;
                    for (let key in resData) {
                        optionData.xData.push(key);
                        optionData.data.push(resData[key]);
@@ -210,9 +204,6 @@
                    this.$options.chartData = optionData;
                    this.organizeData(optionData)
                }
            }).catch((err) => {
                console.log(err)
            });
        },
        resize() {
            setTimeout(() => {
@@ -221,6 +212,11 @@
                    this.setData(this.$options.chartData);
                }
            }, 300)
        },
        outClear() {
            this.websock.closeMyself()
            this.websock = null
            window.removeEventListener('resize', this.resize);
        }
    },
    mounted() {
@@ -230,6 +226,7 @@
        window.addEventListener('resize', this.resize);
    },
    destroyed() {
        this.websock.closeMyself()
        window.removeEventListener('resize', this.resize);
    }
}

 src/main.js

@@ -15,9 +15,6 @@
import 'vue-layer/lib/vue-layer.css';
Vue.prototype.$layer = layer(Vue);

import * as socket from '@/assets/js/socket'
Vue.prototype.$socket = socket

Vue.prototype.$axios = axios;

Vue.use(ElementUI, {

 src/pages/exhibition.vue

@@ -2,12 +2,10 @@
  <div class="screenWarp" :style="'background-image:url('+screenBg+')'" ref="cover">
    <screen-title :title="nowlayOut.appName" :bgImg="screenTitleBg" v-if="isHeader"></screen-title>
    <div class="pageWarp" ref="pageWarp">
      <vue-draggable-resizable :w="item.w" :h="item.h" :x="item.x" :y="item.y" :parent="true" :debug="false"
        :snap="true" :snapTolerance="5" :draggable="false" :resizable="false"
        style="transition: none; will-change: transform;" v-for="(item,i) in nowlayOut.children" :key="i">
            <vue-draggable-resizable :w="item.w" :h="item.h" :x="item.x" :y="item.y" :parent="true" :debug="false" :snap="true" :snapTolerance="5" :draggable="false" :resizable="false" style="transition: none; will-change: transform;" v-for="(item,i) in nowlayOut.children" :key="i">
        <div @contextmenu.prevent.stop="openMenu(item,$event)" style="width:100%;height:100%;">
          <layout-box :title="item.name">
            <div style="width:100%;height:100%" :id="'layout-box'+item.id" :ref="'layout-box'+item.id"></div>
                        <div style="width:100%;height:100%" :id="'layout-box'+item.id" :ref="'layout-box'+item.id" v-if="isNow"></div>
          </layout-box>
        </div>
      </vue-draggable-resizable>
@@ -31,7 +29,7 @@
    components: {
      VueDraggableResizable,
      LayoutBox,
      ScreenTitle
        ScreenTitle,
    },
    data() {
      return {
@@ -42,7 +40,8 @@
        modularData: charts.modularData,
        screenTitleBg: null,
        screenBg: null,
        isHeader: true
            isHeader: true,
            isNow: true
      }
    },
    mounted() {
@@ -112,6 +111,14 @@
          console.log(err)
        });
      }
    },
    beforeDestroy() {
        this.modularArr.map(item => {
            if (item.outClear) {
                item.outClear()
            }
        })
        this.isNow = false
    }
  }
</script>
@@ -120,7 +127,7 @@
  .screenWarp {
    width: 100%;
    height: 100%;
    background-color: #031D67;
    background-color: #031d67;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;