跳转及socket封装提交

whyczyk

2021-10-08 b77a08b70d8fc45ce700d8fc86e53503e9a8ec05

跳转及socket封装提交

 src/assets/js/getWsUrl.js

New file
@@ -0,0 +1,14 @@
/**
 * 获取Websocket的连接
 * @param action
 * @returns {string}
 */
function getWsUrl(action, port) {
    let _port = port?port:8091;
    let hostname = window.location.hostname;
    if(process.env.NODE_ENV == 'dev') {
        hostname = "localhost";
    }
    return 'ws://' + hostname+':' + _port + action;
}
export default getWsUrl;

 src/assets/js/socket.js

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

function initWebSocket(action, port) { //初始化weosocket
    //ws地址
    const wsUri = getWsUrl(action, port);
    websock = new WebSocket(wsUri);
    websock.onmessage = function (e) {
        websocketonmessage(e);
    }
    websock.onclose = function (e) {
        websocketclose(e);
    }
    websock.onopen = function () {
        websocketOpen();
    }

    //连接发生错误的回调方法
    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);
    } else {
        // 若未开启 ，则等待1s后重新调用
        setTimeout(function () {
            sendSock(agentData, callback);
        }, 1000);
    }
}

//数据接收
function websocketonmessage(e) {
    global_callback(JSON.parse(e.data));
}

//数据发送
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 }

 src/components/charts/RoseChartED.vue

@@ -28,9 +28,9 @@
                cmd: "syncPage",
                params: {
                    pageInfo: {
                        label: "电池实时告警",
                        name: "batteryrTimequery",
                        src: "#/batteryrTimequery",
                        label: "电池续航能力历史查询",
                        name: "endure",
                        src: "#/reportStatistics/endure",
                        closable: true
                    },
                }

 src/components/charts/RoseChartHea.vue

@@ -28,9 +28,9 @@
                cmd: "syncPage",
                params: {
                    pageInfo: {
                        label: "电池实时告警",
                        name: "batteryrTimequery",
                        src: "#/batteryrTimequery",
                        label: "落后单体查询",
                        name: "taskplan",
                        src: "#/reportStatistics/taskplan",
                        closable: true
                    },
                }

 src/components/charts/chinaMap.vue

@@ -528,6 +528,11 @@
    destroyed() {
        window.removeEventListener('resize', this.resize);
        clearInterval(this.timer)
        // this.$socket.initWebSocket("/device", "")
        // this.$socket.sendSock(null, (res) => {
        //     console.log(res)
        // });
        // this.$socket.close();
    },
}
</script>

 src/main.js

@@ -15,6 +15,9 @@
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, {