模块socket优化请求数据

whyczyk

2021-10-09 9fc3a1d5a70a5af805b37476d47331dad0b21d65

模块socket优化请求数据

 src/assets/js/getWsUrl.js

@@ -4,11 +4,11 @@
 * @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') {
    if (process.env.NODE_ENV == 'dev') {
        hostname = "localhost";
    }
    return 'ws://' + hostname+':' + _port + action;
    return 'ws://' + hostname + ':' + _port + action;
}
export default getWsUrl;

 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);
    }
    websock.onopen = function () {
        websocketOpen();
    init(data) {
        let WSINWIN = 'WebSocket' in window
        if (!WSINWIN) {
            return console.log('Websocket not supported')
        }
        this.ws = new WebSocket(this.wsUrl);
        this.ws.onopen = () => {
            this.status = 'open';
            this.heartCheck();
            if (data) { this.ws.send(data) }
        };

        this.ws.onmessage = e => {
            if (e.data === 'pong') {
                this.pingPong = 'pong'
            } else {
                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
    }

    //连接发生错误的回调方法
    websock.onerror = function () {
        console.log("WebSocket连接发生错误");
    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 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);
    } else {
        // 若未开启 ，则等待1s后重新调用
        setTimeout(function () {
            sendSock(agentData, callback);
        }, 1000);
    sendHandle(data) {
        return this.ws.send(data);
    }
}

//数据接收
function websocketonmessage(e) {
    global_callback(JSON.parse(e.data));
}
    relink() {
        if (this.status == 'open' && this.readyState == 1) {  //连接正常
            return
        }
        if (this.initTimeOut) { //定时器已经启动
            return;
        }
        this.initTimeOut = setTimeout(() => {
            clearInterval(this.pingInterval);
            clearInterval(this.pongInterval);
            this.initTimeOut = null;
            this.init();
        }, this.initTime)
    }

//数据发送
function websocketsend(agentData) {
    websock.send(JSON.stringify(agentData));
}

//关闭
function websocketclose() {
    console.log("WebSocket已关闭");
}
//WebSocket连接成功
function websocketOpen() {
    console.log("WebSocket连接成功");
}

function close() {
    websock.close()
}

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

 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,58 +54,55 @@
                    })
                } 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) {
                    let optionData = [{
                        title: '熔丝告警',
                        data: 56,
                        acColor: '#813a74',
                        resColor: '#ff649d',
                    }, {
                        title: '跳闸',
                        data: 12,
                        acColor: '#287878',
                        resColor: '#5adfaa',
                    }, {
                        title: '频率异常',
                        data: 21,
                        acColor: '#2388a6',
                        resColor: '#43f9fd',
                    }, {
                        title: '三相不平衡',
                        data: 8,
                        acColor: '#7f3a29',
                        resColor: '#fc5f02',
                    }]
                    let resData = res.data.data;
                    for (let key in resData) {
                        optionData.map(item => {
                            if (item.title == key) {
                                item.data = resData[key]
                            }
                        })
                    }
                    optionData.map((item, i) => {
                        let chart = this.$refs[`AcInput${i}`];
                        chart.setData(item);
                        chart.resize();
            this.websock = new WebSocketClass(`/screen/powerAlarm/acInput/${userId}`, this.wsMessage, 4000)
        },
        wsMessage(res) {
            if (res.code == 1) {
                let optionData = [{
                    title: '熔丝告警',
                    data: 56,
                    acColor: '#813a74',
                    resColor: '#ff649d',
                }, {
                    title: '跳闸',
                    data: 12,
                    acColor: '#287878',
                    resColor: '#5adfaa',
                }, {
                    title: '频率异常',
                    data: 21,
                    acColor: '#2388a6',
                    resColor: '#43f9fd',
                }, {
                    title: '三相不平衡',
                    data: 8,
                    acColor: '#7f3a29',
                    resColor: '#fc5f02',
                }]
                let resData = res.data;
                for (let key in resData) {
                    optionData.map(item => {
                        if (item.title == key) {
                            item.data = resData[key]
                        }
                    })
                }
            }).catch((err) => {
                console.log(err)
            });
                optionData.map((item, i) => {
                    let chart = this.$refs[`AcInput${i}`];
                    chart.setData(item);
                    chart.resize();
                })
            }
        },
        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,63 +297,61 @@
                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) {
                    let optionData = [{
                        value: 0,
                        name: '通讯故障',
                        color: '#5062DE'
                    },
                    {
                        value: 0,
                        name: '直流总故障',
                        color: '#FD5E02'
                    },
                    {
                        value: 0,
                        name: '防雷器故障',
                        color: '#8C6BFA'
                    },
                    {
                        value: 0,
                        name: '开关柜故障',
                        color: '#F58881'
                    },
                    {
                        value: 0,
                        name: '监控器故障',
                        color: '#EDE611'
                    },
                    {
                        value: 0,
                        name: '交流总故障',
                        color: '#43F9FD'
                    },
                    ]
                    let resData = res.data.data;
                    for (let key in resData) {
                        optionData.map(item => {
                            if (item.name == key) {
                                item.value = resData[key]
                            }
                        })
                    }
                    this.$options.chartData = optionData;
                    this.organizeData(optionData)
            this.websock = new WebSocketClass(`/screen/powerAlarm/error/${userId}`, this.wsMessage, 4000)
        },
        wsMessage(res) {
            if (res.code == 1) {
                let optionData = [{
                    value: 0,
                    name: '通讯故障',
                    color: '#5062DE'
                },
                {
                    value: 0,
                    name: '直流总故障',
                    color: '#FD5E02'
                },
                {
                    value: 0,
                    name: '防雷器故障',
                    color: '#8C6BFA'
                },
                {
                    value: 0,
                    name: '开关柜故障',
                    color: '#F58881'
                },
                {
                    value: 0,
                    name: '监控器故障',
                    color: '#EDE611'
                },
                {
                    value: 0,
                    name: '交流总故障',
                    color: '#43F9FD'
                },
                ]
                let resData = res.data;
                for (let key in resData) {
                    optionData.map(item => {
                        if (item.name == key) {
                            item.value = resData[key]
                        }
                    })
                }
            }).catch((err) => {
                console.log(err)
            });
                this.$options.chartData = optionData;
                this.organizeData(optionData)
            }
        },
        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,58 +79,55 @@
                    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) {
                    let optionData = {
                        circle: [{
                            name: '告警数',
                            value: 10,
                            color: '#00DFFC',
                        },
                        {
                            name: '告警总数',
                            value: 10,
                            color: '#ED4882',
                        },
                        {
                            name: '告警机房数',
                            value: 10,
                            color: '#2EEA9D',
                        },
                        ]
                    }
                    let resData = res.data.data;
                    for (let key in resData) {
                        optionData.circle.map(item => {
                            if (item.name == key) {
                                if (typeof resData[key] == 'string') {
                                    item.value = Number(resData[key].split('%')[0])
                                } else {
                                    item.value = resData[key]
                                }
                            }
                        })
                    }
                    this.chart = optionData;
                    let chart = this.$refs.circleChart;
                    chart.setData(optionData.circle);
                    chart.resize();
            this.websock = new WebSocketClass(`/screen/batteryAlarm/monCapacity/${userId}`, this.wsMessage, 4000)
        },
        wsMessage(res) {
            if (res.code == 1) {
                let optionData = {
                    circle: [{
                        name: '告警数',
                        value: 10,
                        color: '#00DFFC',
                    },
                    {
                        name: '告警总数',
                        value: 10,
                        color: '#ED4882',
                    },
                    {
                        name: '告警机房数',
                        value: 10,
                        color: '#2EEA9D',
                    },
                    ]
                }
            }).catch((err) => {
                console.log(err)
            });
                let resData = res.data;
                for (let key in resData) {
                    optionData.circle.map(item => {
                        if (item.name == key) {
                            if (typeof resData[key] == 'string') {
                                item.value = Number(resData[key].split('%')[0])
                            } else {
                                item.value = resData[key]
                            }
                        }
                    })
                }
                this.chart = optionData;
                let chart = this.$refs.circleChart;
                chart.setData(optionData.circle);
                chart.resize();
            }
        },
        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,71 +112,69 @@
                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) {
                    let optionData = {
                        xData: [],
                        series: [{
                            name: "在线电压",
                            data: [],
                            color: '#E85D22'
                        },
                        {
                            name: "组端电压",
                            data: [],
                            color: '#2EEA9D'
                        }
                        ]
            this.websock = new WebSocketClass(`/screen/batteryAlarm/onlinegroupVolAnalysis/${userId}`, this.wsMessage, 4000)
        },
        wsMessage(res) {
            if (res.code == 1) {
                let optionData = {
                    xData: [],
                    series: [{
                        name: "在线电压",
                        data: [],
                        color: '#E85D22'
                    },
                    {
                        name: "组端电压",
                        data: [],
                        color: '#2EEA9D'
                    }
                    let resData = res.data.data;
                    for (let key in resData) {
                        let seriesData = resData[key]
                        if (key == '在线电压') {
                            for (let jey in seriesData) {
                                if (typeof seriesData[jey] == 'string') {
                                    optionData.series[0].data.push({
                                        name: jey,
                                        value: Number(seriesData[jey].split('%')[0])
                                    })
                                } else {
                                    optionData.series[0].data.push({
                                        name: jey,
                                        value: seriesData[jey]
                                    })
                                }
                            }
                        } else if (key == '组端电压') {
                            for (let jey in seriesData) {
                                if (typeof seriesData[jey] == 'string') {
                                    optionData.series[1].data.push({
                                        name: jey,
                                        value: Number(seriesData[jey].split('%')[0])
                                    })
                                } else {
                                    optionData.series[1].data.push({
                                        name: jey,
                                        value: seriesData[jey]
                                    })
                                }
                            }
                        }
                    }
                    this.$options.chartData = optionData;
                    this.organizeData(optionData)
                    ]
                }
            }).catch((err) => {
                console.log(err)
            });
                let resData = res.data;
                for (let key in resData) {
                    let seriesData = resData[key]
                    if (key == '在线电压') {
                        for (let jey in seriesData) {
                            if (typeof seriesData[jey] == 'string') {
                                optionData.series[0].data.push({
                                    name: jey,
                                    value: Number(seriesData[jey].split('%')[0])
                                })
                            } else {
                                optionData.series[0].data.push({
                                    name: jey,
                                    value: seriesData[jey]
                                })
                            }
                        }
                    } else if (key == '组端电压') {
                        for (let jey in seriesData) {
                            if (typeof seriesData[jey] == 'string') {
                                optionData.series[1].data.push({
                                    name: jey,
                                    value: Number(seriesData[jey].split('%')[0])
                                })
                            } else {
                                optionData.series[1].data.push({
                                    name: jey,
                                    value: seriesData[jey]
                                })
                            }
                        }
                    }
                }
                this.$options.chartData = optionData;
                this.organizeData(optionData)
            }
        },
        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,58 +127,56 @@
                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) {
                    let optionData = [{
                        value: 0,
                        name: '在线浮充',
                        color: '#E85D22'
                    },
                    {
                        value: 0,
                        name: '充电数量',
                        color: '#76CFDD'
                    },
                    {
                        value: 0,
                        name: '内阻测试数量',
                        color: '#FEDB5B'
                    },
                    {
                        value: 0,
                        name: '故障数量',
                        color: '#8278E9'
                    },
                    {
                        value: 0,
                        name: '核容数量',
                        color: '#9EE6B8'
                    },
                    ]
                    let resData = res.data.data;
                    for (let key in resData) {
                        optionData.map(item => {
                            if (item.name == key) {
                                item.value = resData[key]
                            }
                        })
                    }
                    this.$options.chartData = optionData;
                    this.organizeData(optionData)
            this.websock = new WebSocketClass(`/screen/batteryAlarm/btsStatus/${userId}`, this.wsMessage, 4000)
        },
        wsMessage(res) {
            if (res.code == 1) {
                let optionData = [{
                    value: 0,
                    name: '在线浮充',
                    color: '#E85D22'
                },
                {
                    value: 0,
                    name: '充电数量',
                    color: '#76CFDD'
                },
                {
                    value: 0,
                    name: '内阻测试数量',
                    color: '#FEDB5B'
                },
                {
                    value: 0,
                    name: '故障数量',
                    color: '#8278E9'
                },
                {
                    value: 0,
                    name: '核容数量',
                    color: '#9EE6B8'
                },
                ]
                let resData = res.data;
                for (let key in resData) {
                    optionData.map(item => {
                        if (item.name == key) {
                            item.value = resData[key]
                        }
                    })
                }
            }).catch((err) => {
                console.log(err)
            });
                this.$options.chartData = optionData;
                this.organizeData(optionData)
            }
        },
        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,53 +66,51 @@
                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) {
                    let optionData = [{
                        value: 0,
                        name: '续航1小时内',
                        color: '#E85D22'
                    },
                    {
                        value: 0,
                        name: '续航1小时到2小时',
                        color: '#76CFDD'
                    },
                    {
                        value: 0,
                        name: '续航2小时到3小时',
                        color: '#FEDB5B'
                    },
                    {
                        value: 0,
                        name: '续航3小时以上',
                        color: '#8278E9'
                    },
                    ]
                    let resData = res.data.data;
                    for (let key in resData) {
                        optionData.map(item => {
                            if (item.name == key) {
                                item.value = resData[key]
                            }
                        })
                    }
                    this.$options.chartData = optionData;
                    this.organizeData(optionData)
            this.websock = new WebSocketClass(`/screen/batteryData/endurance/${userId}`, this.wsMessage, 4000)
        },
        wsMessage(res) {
            if (res.code == 1) {
                let optionData = [{
                    value: 0,
                    name: '续航1小时内',
                    color: '#E85D22'
                },
                {
                    value: 0,
                    name: '续航1小时到2小时',
                    color: '#76CFDD'
                },
                {
                    value: 0,
                    name: '续航2小时到3小时',
                    color: '#FEDB5B'
                },
                {
                    value: 0,
                    name: '续航3小时以上',
                    color: '#8278E9'
                },
                ]
                let resData = res.data;
                for (let key in resData) {
                    optionData.map(item => {
                        if (item.name == key) {
                            item.value = resData[key]
                        }
                    })
                }
            }).catch((err) => {
                console.log(err)
            });
                this.$options.chartData = optionData;
                this.organizeData(optionData)
            }
        },
        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,48 +66,46 @@
                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) {
                    let optionData = [{
                        value: 0,
                        name: '单体容量告警',
                        color: '#E85D22'
                    },
                    {
                        value: 0,
                        name: '单体容量更换',
                        color: '#76CFDD'
                    },
                    {
                        value: 0,
                        name: '单体容量健康',
                        color: '#FEDB5B'
                    },
                    ]
                    let resData = res.data.data;
                    for (let key in resData) {
                        optionData.map(item => {
                            if (item.name == key) {
                                item.value = resData[key]
                            }
                        })
                    }
                    this.$options.chartData = optionData;
                    this.organizeData(optionData)
            this.websock = new WebSocketClass(`/screen/batteryData/capStatus/${userId}`, this.wsMessage, 4000)
        },
        wsMessage(res) {
            if (res.code == 1) {
                let optionData = [{
                    value: 0,
                    name: '单体容量告警',
                    color: '#E85D22'
                },
                {
                    value: 0,
                    name: '单体容量更换',
                    color: '#76CFDD'
                },
                {
                    value: 0,
                    name: '单体容量健康',
                    color: '#FEDB5B'
                },
                ]
                let resData = res.data;
                for (let key in resData) {
                    optionData.map(item => {
                        if (item.name == key) {
                            item.value = resData[key]
                        }
                    })
                }
            }).catch((err) => {
                console.log(err)
            });
                this.$options.chartData = optionData;
                this.organizeData(optionData)
            }
        },
        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,35 +185,28 @@
                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) {
                    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;
                    for (let key in resData) {
                        optionData.yData.push(key);
                        optionData.data.push(resData[key]);
                    }
                    this.$options.chartData = optionData;
                    this.organizeData(optionData)
            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: []
                }
            }).catch((err) => {
                console.log(err)
            });
                let resData = res.data;
                for (let key in resData) {
                    optionData.yData.push(key);
                    optionData.data.push(resData[key]);
                }
                this.$options.chartData = optionData;
                this.organizeData(optionData)
            }
        },
        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) {
            this.$options.chartData = 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,46 +60,49 @@
        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 = [];
            if (res.code == 1) {
                let result = res.data;
                for (const key in result) {
                    xAxisData.push(key);
                    xData.push(result[key]);
                    if (typeof (result[key]) == 'string') {
                        data.push(parseFloat(result[key].replace(/%/g, "")));
                    } else {
                        data.push(result[key]);
                    }
                }
                let maxInt = Math.max.apply(null, data) + 100;
                data.forEach(() => {
                    maxYAxis.push(maxInt);
                });
                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.$axios({
                    method: "get",
                    url: "/batteryAlarm/dischargeAnalysis",
                    params: {
                        userId: self.userId
                    }

                }).then(res => {
                    if (res.data.code == 1) {
                        let result = res.data.data;
                        for (const key in result) {
                            xAxisData.push(key);
                            xData.push(result[key]);
                            if (typeof (result[key]) == 'string') {
                                data.push(parseFloat(result[key].replace(/%/g, "")));
                            } else {
                                data.push(result[key]);
                            }
                        }
                        let maxInt = Math.max.apply(null, data) + 100;
                        data.forEach(() => {
                            maxYAxis.push(maxInt);
                        });
                        self.optionSet(xAxisData, maxYAxis, xData, data);
                        console.log(xAxisData, data)
                    }
                })
                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,6 +66,33 @@
        setOption(opt) {
            this.$options.chart.setOption(opt);
        },
        postData() {
            let userId = localStorage.getItem('userId');
            this.websock = new WebSocketClass(`/screen/powerAlarm/acABC/${userId}`, this.wsMessage, 4000)
        },
        wsMessage(res) {
            let self = this;
            if (res.code == 1) {
                let result = res.data[0];
                let zsObj = res.data[1];
                let dataList = [];
                let dataName = [];
                for (const key in result) {
                    dataName.push(key);
                    dataList.push(result[key]);
                }
                self.$options.chartData.dataList = dataList;
                self.$options.chartData.dataName = dataName;
                self.$options.chartData.gjjfzs = zsObj.告警机房总数;
                self.$options.chartData.gjjfsbl = zsObj.告警机房数比例 + "%";
                self.optionSet(self.$options.chartData);
            }
        },
        outClear() {
            this.websock.closeMyself()
            this.websock = null
            window.removeEventListener('resize', this.resize);
        },
        setData(data) {
            let self = this;
            if (data) {
@@ -72,30 +101,7 @@
                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];
                        let dataList = [];
                        let dataName = [];
                        for (const key in result) {
                            dataName.push(key);
                            dataList.push(result[key]);
                        }
                        self.$options.chartData.dataList = dataList;
                        self.$options.chartData.dataName = dataName;
                        self.$options.chartData.gjjfzs = zsObj.告警机房总数;
                        self.$options.chartData.gjjfsbl = zsObj.告警机房数比例 + "%";
                        self.optionSet(self.$options.chartData);
                        console.log(res)
                    }
                })
                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,34 +180,27 @@
                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) {
                    let optionData = {
                        data: []
                    }
                    let resData = res.data.data;
                    for (let key in resData) {
                        let obj = {};
                        obj.name = key;
                        obj.value = resData[key];
                        optionData.data.push(obj)
                    }
                    this.$options.chartData = optionData;
                    this.organizeData(optionData)
            this.websock = new WebSocketClass(`/screen/powerAlarm/rectifier/${userId}`, this.wsMessage, 4000)
        },
        wsMessage(res) {
            if (res.code == 1) {
                let optionData = {
                    data: []
                }
            }).catch((err) => {
                console.log(err)
            });
                let resData = res.data;
                for (let key in resData) {
                    let obj = {};
                    obj.name = key;
                    obj.value = resData[key];
                    optionData.data.push(obj)
                }
                this.$options.chartData = optionData;
                this.organizeData(optionData)
            }
        },
        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,52 +184,45 @@
                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) {
                    let optionData = {
                        xData: [],
                        series: [{
                            name: '放电',
                            data: [],
                            color: '#90ec7d'
                        }, {
                            name: '充电',
                            data: [],
                            color: '#ff6b6b'
                        }]
                    }
                    let resData = res.data.data;
                    for (let key in resData.reCharge) {
                        if (typeof resData.reCharge[key] == 'string') {
                            optionData.series[0].data.push(Number(resData.reCharge[key].split('%')[0]))
                        } else {
                            optionData.series[0].data.push(resData.reCharge[key])
                        }
                    }
                    for (let key in resData.disCharge) {
                        optionData.xData.push(key)
                        if (typeof resData.disCharge[key] == 'string') {
                            optionData.series[1].data.push(Number(resData.disCharge[key].split('%')[0]))
                        } else {
                            optionData.series[1].data.push(resData.disCharge[key])
                        }
                    }
                    this.$options.chartData = optionData;
                    this.organizeData(optionData)
            this.websock = new WebSocketClass(`/screen/batteryAlarm/chargeAnalysis/${userId}`, this.wsMessage, 4000)
        },
        wsMessage(res) {
            if (res.code == 1) {
                let optionData = {
                    xData: [],
                    series: [{
                        name: '放电',
                        data: [],
                        color: '#90ec7d'
                    }, {
                        name: '充电',
                        data: [],
                        color: '#ff6b6b'
                    }]
                }
            }).catch((err) => {
                console.log(err)
            });
                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]))
                    } else {
                        optionData.series[0].data.push(resData.reCharge[key])
                    }
                }
                for (let key in resData.disCharge) {
                    optionData.xData.push(key)
                    if (typeof resData.disCharge[key] == 'string') {
                        optionData.series[1].data.push(Number(resData.disCharge[key].split('%')[0]))
                    } else {
                        optionData.series[1].data.push(resData.disCharge[key])
                    }
                }
                this.$options.chartData = optionData;
                this.organizeData(optionData)
            }
        },
        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,43 +60,48 @@
        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 = [];
            if (res.code == 1) {
                let result = res.data;
                let index = 0;
                for (const key in result) {
                    let obj = {
                        name: key,
                        type: 'bar',
                        data: []
                    }
                    legendData.push(key);
                    for (const item in result[key]) {
                        if (index === 0) {
                            yAxisData.push(item);
                        }
                        obj.data.push(result[key][item])
                    }
                    data.push(obj);
                    index++;
                }
                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.$axios({
                    method: "get",
                    url: "/batteryAlarm/monVRTAnalysis",
                    params: {
                        userId: self.userId
                    }
                }).then(res => {
                    if (res.data.code == 1) {
                        let result = res.data.data;
                        let index = 0;
                        for (const key in result) {
                            let obj = {
                                name: key,
                                type: 'bar',
                                data: []
                            }
                            legendData.push(key);
                            for (const item in result[key]) {
                                if (index === 0) {
                                    yAxisData.push(item);
                                }
                                obj.data.push(result[key][item])
                            }
                            data.push(obj);
                            index++;
                        }
                        self.optionSet(legendData, yAxisData, data);
                    }
                })
                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,72 +61,70 @@
                    })
                } 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) {
                    let optionData = [{
                        title: '',
                        data: 0,
                        unit: '',
                        color: '#37a9b3',
                    }, {
                        title: '',
                        data: 0,
                        unit: '',
                        color: '#f3535f'
                    }, {
                        title: '',
                        data: 0,
                        unit: '',
                        color: '#ff8b00'
                    }, {
                        title: '',
                        data: 0,
                        unit: '',
                        color: '#757ffb'
                    }, {
                        title: '',
                        data: 0,
                        unit: '',
                        color: '#4ba0d9'
                    }, {
                        title: '',
                        data: 0,
                        unit: '',
                        color: '#7fc57c'
                    }]
                    let index = 0;
                    let resData = res.data.data;
                    for (let key in resData) {
                        optionData[index].title = key;
                        if (typeof resData[key] == 'string') {
                            optionData[index].data = Number(resData[key].split('%')[0]);
                            optionData[index].unit = '%';
                        } else {
                            optionData[index].data = resData[key];
                        }
                        index++;
            this.websock = new WebSocketClass(`/screen/powerAlarm/status/${userId}`, this.wsMessage, 4000)
        },
        wsMessage(res) {
            if (res.code == 1) {
                let optionData = [{
                    title: '',
                    data: 0,
                    unit: '',
                    color: '#37a9b3',
                }, {
                    title: '',
                    data: 0,
                    unit: '',
                    color: '#f3535f'
                }, {
                    title: '',
                    data: 0,
                    unit: '',
                    color: '#ff8b00'
                }, {
                    title: '',
                    data: 0,
                    unit: '',
                    color: '#757ffb'
                }, {
                    title: '',
                    data: 0,
                    unit: '',
                    color: '#4ba0d9'
                }, {
                    title: '',
                    data: 0,
                    unit: '',
                    color: '#7fc57c'
                }]
                let index = 0;
                let resData = res.data;
                for (let key in resData) {
                    optionData[index].title = key;
                    if (typeof resData[key] == 'string') {
                        optionData[index].data = Number(resData[key].split('%')[0]);
                        optionData[index].unit = '%';
                    } else {
                        optionData[index].data = resData[key];
                    }
                    optionData.map((item, i) => {
                        let chart = this.$refs[`prossPieChart${i}`];
                        chart.setData(item);
                        chart.resize();
                    })
                    index++;
                }
            }).catch((err) => {
                console.log(err)
            });
                optionData.map((item, i) => {
                    let chart = this.$refs[`prossPieChart${i}`];
                    chart.setData(item);
                    chart.resize();
                })
            }
        },
        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,33 +184,26 @@
                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) {
                    let optionData = {
                        xData: [],
                        data: []
                    }
                    let resData = res.data.data;
                    for (let key in resData) {
                        optionData.xData.push(key);
                        optionData.data.push(resData[key]);
                    }
                    this.$options.chartData = optionData;
                    this.organizeData(optionData)
            this.websock = new WebSocketClass(`/screen/powerAlarm/batteryGroup/${userId}`, this.wsMessage, 4000)
        },
        wsMessage(res) {
            if (res.code == 1) {
                let optionData = {
                    xData: [],
                    data: []
                }
            }).catch((err) => {
                console.log(err)
            });
                let resData = res.data;
                for (let key in resData) {
                    optionData.xData.push(key);
                    optionData.data.push(resData[key]);
                }
                this.$options.chartData = optionData;
                this.organizeData(optionData)
            }
        },
        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

@@ -1,171 +1,178 @@
<template>
  <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">
        <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>
          </layout-box>
        </div>
      </vue-draggable-resizable>
    </div>
  </div>
    <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">
                <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" v-if="isNow"></div>
                    </layout-box>
                </div>
            </vue-draggable-resizable>
        </div>
    </div>

</template>

<script>
  import Vue from "vue";
  import VueDraggableResizable from 'vue-draggable-resizable-gorkys'
  import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css'
  import LayoutBox from "@/components/LayoutBox";
  import {
    screenAllConfig
  } from '@/assets/js/api'
  let clientWidth, clientHeight;
  import charts from '@/assets/js/charts';
  import ScreenTitle from '../components/screenTitle.vue'
  export default {
    components: {
      VueDraggableResizable,
      LayoutBox,
      ScreenTitle
    },
    data() {
      return {
        nowlayOut: {},
        modularArr: [],
        modularTitle: charts.modularTitle,
        modularBg: charts.modularBg,
        modularData: charts.modularData,
        screenTitleBg: null,
        screenBg: null,
        isHeader: true
      }
    },
    mounted() {
      this.nowlayOut.appName = this.$route.query.name;
      if (this.$route.query.head && this.$route.query.head == 1) {
        this.isHeader = false
      }
      this.$nextTick(() => {
        clientWidth = this.$refs.pageWarp.clientWidth;
        clientHeight = this.$refs.pageWarp.clientHeight;
        this.loadLayout();
      })
      window.addEventListener('resize', () => {
        this.$nextTick(() => {
          location.reload()
        })
      })
    },
    methods: {
      // 加载布局数据
      loadLayout() {
        let sendData = {
          appId: this.$route.query.id
        }
        screenAllConfig(sendData).then((res) => {
          if (res.data && res.data.data && res.data.code == 1) {
            this.nowlayOut = res.data.data;
            this.nowlayOut.children.map((item) => {
              for (const key in this.modularData) {
                if (item.type == this.modularData[key].chartData.type) {
                  item.setData = this.modularData[key].chartData.setData
                }
              }
              this.modularTitle.map((item) => {
                if (item.name == this.nowlayOut.headPic) {
                  this.screenTitleBg = item.img;
                }
              });
              this.modularBg.map((item) => {
                if (item.name == this.nowlayOut.bgPic) {
                  this.screenBg = item.img;
                }
              });
              item.x *= clientWidth;
              item.y *= clientHeight;
              item.w *= clientWidth;
              item.h *= clientHeight;
              setTimeout(() => {
                let nowBox = this.$refs[`layout-box${item.id}`];
                let modular = require(`@/components/charts/${item.type}.vue`).default;
                let modularExtend = Vue.extend(modular);
                let chartModular = new modularExtend().$mount();
                chartModular.id = `chart${item.id}`
                if (nowBox[0].children.length > 0) {
                  nowBox[0].replaceChild(chartModular.$el, nowBox[0].children[0])
                } else {
                  nowBox[0].appendChild(chartModular.$el)
                  this.modularArr.push(chartModular);
                }
                chartModular.setData();
                chartModular.resize();
              }, 0)
import Vue from "vue";
import VueDraggableResizable from 'vue-draggable-resizable-gorkys'
import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css'
import LayoutBox from "@/components/LayoutBox";
import {
    screenAllConfig
} from '@/assets/js/api'
let clientWidth, clientHeight;
import charts from '@/assets/js/charts';
import ScreenTitle from '../components/screenTitle.vue'
export default {
    components: {
        VueDraggableResizable,
        LayoutBox,
        ScreenTitle,
    },
    data() {
        return {
            nowlayOut: {},
            modularArr: [],
            modularTitle: charts.modularTitle,
            modularBg: charts.modularBg,
            modularData: charts.modularData,
            screenTitleBg: null,
            screenBg: null,
            isHeader: true,
            isNow: true
        }
    },
    mounted() {
        this.nowlayOut.appName = this.$route.query.name;
        if (this.$route.query.head && this.$route.query.head == 1) {
            this.isHeader = false
        }
        this.$nextTick(() => {
            clientWidth = this.$refs.pageWarp.clientWidth;
            clientHeight = this.$refs.pageWarp.clientHeight;
            this.loadLayout();
        })
        window.addEventListener('resize', () => {
            this.$nextTick(() => {
                location.reload()
            })
        })
    },
    methods: {
        // 加载布局数据
        loadLayout() {
            let sendData = {
                appId: this.$route.query.id
            }
            screenAllConfig(sendData).then((res) => {
                if (res.data && res.data.data && res.data.code == 1) {
                    this.nowlayOut = res.data.data;
                    this.nowlayOut.children.map((item) => {
                        for (const key in this.modularData) {
                            if (item.type == this.modularData[key].chartData.type) {
                                item.setData = this.modularData[key].chartData.setData
                            }
                        }
                        this.modularTitle.map((item) => {
                            if (item.name == this.nowlayOut.headPic) {
                                this.screenTitleBg = item.img;
                            }
                        });
                        this.modularBg.map((item) => {
                            if (item.name == this.nowlayOut.bgPic) {
                                this.screenBg = item.img;
                            }
                        });
                        item.x *= clientWidth;
                        item.y *= clientHeight;
                        item.w *= clientWidth;
                        item.h *= clientHeight;
                        setTimeout(() => {
                            let nowBox = this.$refs[`layout-box${item.id}`];
                            let modular = require(`@/components/charts/${item.type}.vue`).default;
                            let modularExtend = Vue.extend(modular);
                            let chartModular = new modularExtend().$mount();
                            chartModular.id = `chart${item.id}`
                            if (nowBox[0].children.length > 0) {
                                nowBox[0].replaceChild(chartModular.$el, nowBox[0].children[0])
                            } else {
                                nowBox[0].appendChild(chartModular.$el)
                                this.modularArr.push(chartModular);
                            }
                            chartModular.setData();
                            chartModular.resize();
                        }, 0)

            })
          }
        }).catch((err) => {
          console.log(err)
        });
      }
    }
  }
                    })
                }
            }).catch((err) => {
                console.log(err)
            });
        }
    },
    beforeDestroy() {
        this.modularArr.map(item => {
            if (item.outClear) {
                item.outClear()
            }
        })
        this.isNow = false
    }
}
</script>

<style scoped>
  .screenWarp {
    width: 100%;
    height: 100%;
    background-color: #031D67;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
.screenWarp {
    width: 100%;
    height: 100%;
    background-color: #031d67;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

  .pageWarp {
    width: 100%;
    flex: 1;
  }
.pageWarp {
    width: 100%;
    flex: 1;
}

  .contextmenu {
    margin: 0;
    background: #27343e;
    z-index: 3000;
    position: absolute;
    list-style-type: none;
    padding: 5px 0;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 400;
    color: #bcc9d4;
    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
  }
.contextmenu {
    margin: 0;
    background: #27343e;
    z-index: 3000;
    position: absolute;
    list-style-type: none;
    padding: 5px 0;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 400;
    color: #bcc9d4;
    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
}

  .contextmenu li {
    padding: 0 6px;
    line-height: 28px;
    height: 28px;
    border-left: 2px solid transparent;
    cursor: pointer;
    overflow: hidden;
    padding-right: 3em;
    display: flex;
    align-items: center;
  }
.contextmenu li {
    padding: 0 6px;
    line-height: 28px;
    height: 28px;
    border-left: 2px solid transparent;
    cursor: pointer;
    overflow: hidden;
    padding-right: 3em;
    display: flex;
    align-items: center;
}

  .contextmenu li i {
    margin-right: 8px;
  }
.contextmenu li i {
    margin-right: 8px;
}

  .contextmenu li:hover {
    background-color: #1d262e;
    color: #2681ff;
    border-left: 2px solid #2681ff;
  }
.contextmenu li:hover {
    background-color: #1d262e;
    color: #2681ff;
    border-left: 2px solid #2681ff;
}
</style>