@gonsin/gview 1.0.1 → 1.0.2

package/src/views/Login.vue

@@ -1,249 +0,0 @@
-<!--
- * @Author: your name
- * @Date: 2020-06-30 18:26:00
- * @LastEditTime: 2022-11-07 17:31:24
- * @LastEditors: lrm lrm@gonsin.cn
- * @Description: In User Settings Edit
- * @FilePath: \client\src\views\Login.vue
--->
-<template>
-    <!-- 登录页面 -->
-    <div class="login" :style="back">
-        <div class="login_box">
-            <div class="logo" :style="logo"></div>
-            <div class="form">
-                <el-form :model="form" ref="form" :rules="formRules">
-                    <el-form-item prop="username">
-                        <el-input
-                            placeholder="请输入用户名"
-                            v-model.trim="form.username"
-                            onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;"
-                        ></el-input>
-                    </el-form-item>
-                    <el-form-item prop="password">
-                        <el-input
-                            type="password"
-                            placeholder="请输入密码"
-                            v-model.trim="form.password"
-                            onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;"
-                        ></el-input>
-                    </el-form-item>
-                    <el-form-item>
-                        <el-button
-                            type="primary"
-                            style="width: 100%"
-                            @click="loginHandle('form')"
-                            >登录</el-button
-                        >
-                    </el-form-item>
-                </el-form>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-// import CommonForm from '../components/CommonForm';
-import { setLogin } from "../websocket/test";
-export default {
-    components: {
-        // CommonForm,
-    },
-    data() {
-        return {
-            sessionId: sessionStorage.getItem("sessionId"),
-            loginUrl: "/api/handle_login",
-            form: {
-                username: "",
-                password: "",
-            },
-            formRules: {
-                username: [
-                    {
-                        required: true,
-                        message: "请输入用户名",
-                        trigger: "blur",
-                    },
-                    {
-                        pattern: /^[_a-zA-Z0-9\s+]{1,255}$/,
-                        message: "您输入的用户名格式不合法",
-                        trigger: "blur",
-                    },
-                ],
-                password: [
-                    {
-                        required: true,
-                        message: "请输入密码",
-                        trigger: "blur",
-                    },
-                    {
-                        pattern: /^[_a-zA-Z0-9\s+]{1,255}$/,
-                        message: "您输入的密码格式不合法",
-                        trigger: "blur",
-                    },
-                ],
-            },
-            // 为了解决线上打包路径解析错误加载不出的问题，这里使用node中提供的方法
-            back: {
-                backgroundImage:
-                    "url(" + require("../../public/imgs/bg.png") + ")",
-                backgroundRepeat: "no-repeat",
-                backgroundSize: "100% 100%",
-            },
-            logo: {
-                backgroundImage:
-                    "url(" + require("../../public/imgs/logo.png") + ")",
-                backgroundRepeat: "no-repeat",
-                backgroundSize: " 100%",
-            },
-        };
-    },
-    mounted() {
-        window.addEventListener("keydown", (e) => {
-            if (e.keyCode == 13) {
-                // this.handleEnterLogin()
-                this.loginHandle("form");
-            }
-        });
-    },
-    methods: {
-        /**
-                 * @description: 登录处理：1、成功后将res.data保存至sessionStorage中,key名：user
-                                            2、建立websocket连接 
-                 * @param {type} 
-                 * @return: 
-                 */
-        loginHandle(formName) {
-            this.$refs[formName].validate((valida) => {
-                if (valida) {
-                    this.$api
-                        .handleLogin({
-                            username: this.form.username,
-                            password: this.form.password,
-                        })
-                        .then((res) => {
-                            switch (res.data.state) {
-                                case 200:
-                                    // console.log(res)
-                                    sessionStorage.setItem(
-                                        "user",
-                                        JSON.stringify(res.data.data)
-                                    );
-                                    this.saveAdminState();
-                                    setLogin(true);
-                                    this.$parent.getPermissions((list) => {
-                                        let arr = res.data.data.permissions;
-                                        if (list.length != 0) {
-                                            let url = "";
-                                            arr.forEach((target) => {
-                                                let filterList =
-                                                    list[0].children.filter(
-                                                        (ele) => {
-                                                            return (
-                                                                ele.name ==
-                                                                target
-                                                            );
-                                                        }
-                                                    );
-                                                if (filterList.length != 0) {
-                                                    if (url == "") {
-                                                        url =
-                                                            "/" +
-                                                            filterList[0].url;
-                                                    }
-                                                    return false;
-                                                }
-                                            });
-                                            sessionStorage.setItem(
-                                                "menu",
-                                                JSON.stringify(list)
-                                            );
-                                            this.$router.push({
-                                                path: url,
-                                            });
-                                        }
-                                    });
-                                    break;
-                                case 303:
-                                    this.$alert("密码错误，请重试", "提示", {
-                                        confirmButtonText: "确定",
-                                        type: "warning",
-                                    });
-                                    break;
-                                case 307:
-                                    this.$alert(
-                                        "您的帐号已被冻结，请联系管理员处理",
-                                        "提示",
-                                        {
-                                            confirmButtonText: "确定",
-                                            type: "warning",
-                                        }
-                                    );
-                                    break;
-                                case 404:
-                                    this.$alert(
-                                        "您输入的账号不存在，请联系管理员",
-                                        "提示",
-                                        {
-                                            confirmButtonText: "确定",
-                                            type: "warning",
-                                        }
-                                    );
-                                    break;
-                            }
-                        });
-                } else {
-                    return false;
-                }
-            });
-        },
-        /**
-         * @description: 保存当前用户是否是管理员账号的状态判断，防止刷新页面丢失该状态
-         * @param {type}
-         * @return {type}
-         */
-        saveAdminState() {
-            this.$store.commit(
-                "isAdmin",
-                JSON.parse(sessionStorage.getItem("user")).admin
-            );
-        },
-    },
-};
-</script>
-
-<style lang="scss" scoped>
-.login {
-    height: 100vh;
-
-    .login_box {
-        width: 500px;
-        height: 400px;
-        position: absolute;
-        background-color: #fff;
-        border-radius: 15px;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
-
-        .logo {
-            width: 314px;
-            height: 79px;
-            margin: 54px auto;
-        }
-
-        .form {
-            width: 250px;
-            margin: 0 auto;
-        }
-    }
-}
-</style>
-<style lang="scss">
-.login_btn {
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-}
-</style>

package/src/websocket/test.js

@@ -1,140 +0,0 @@
-/*
- * @Author: lzx lzx@gonsin.cn
- * @Date: 2022-06-28 15:27:45
- * @LastEditors: lrm lrm@gonsin.cn
- * @LastEditTime: 2022-11-29 15:08:50
- * @FilePath: \client\src\websocket\test.js
- * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
- */
-let pre = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
-
-let webSocketIP = process.env.NODE_ENV !== 'development' ? window.location.origin.replace(window.location.protocol, pre) + '/gview/websocket' : "http://192.168.2.192:8088/gview/websocket".replace('http', 'ws');
- 
-let socket = '';
- 
-let isFirst = true;
-
-let Interval = null;
-
-let isLogin = true;//是否已经登录
-
-let isLink = false;//是否正在链接中
-
-let isReSet = false;//是否重连
-
-export const createSocket = () => {
-    isLink = true;
-    isFirst = true;
-    // console.log('establish websocket connection')
-    socket = new WebSocket(webSocketIP);
-    socket.onopen = onopenWs;
-    socket.onclose = oncloseWs;
-    socket.onerror = onerrorWs;
-    socket.onmessage = onmessageWs;
-    isLink = false;
-}
-
-const onopenWs = event => {
-    // console.log("链接", event);
-    let model = {
-        head: "gonsin",
-        cmd: {
-            cmd: "client",
-            subcmd: "heart",
-            respone: 0,
-        },
-        args: {},
-    };
-    Interval = setInterval(function () {
-        //这里发送一个心跳，后端收到后，返回一个心跳消息，
-        //onmessage拿到返回的心跳就说明连接正常
-        socket.send(JSON.stringify(model));
-    }, 40000);
-    // socket.send("websocket client connect testss");
-    if(isReSet){
-        let dataId = localStorage.getItem('dataId');
-        if(dataId){
-            onsendregisterWs(dataId)
-        }
-        
-    }
-}
-
-export const onsendregisterWs = (dataId) => {
-    // console.log("发送", dataId);
-    let params = {
-        head: "gonsin",
-        cmd: {
-            cmd: "gview_client",
-            subcmd: "register",
-        },
-        args: {
-            dataId: dataId,
-        },
-    };
-    socket.send(JSON.stringify(params));
-    isReSet = false;
-    // socket.send("websocket client connect testss");
-}
-
-export const onsendunregisterWs = (dataId) => {
-    // console.log("发送", dataId);
-    let params = {
-        head: "gonsin",
-        cmd: {
-            cmd: "gview_client",
-            subcmd: "unregister",
-        },
-        args: {
-            dataId: dataId,
-        },
-    };
-    socket.send(JSON.stringify(params));
-    // socket.send("websocket client connect testss");
-}
-const oncloseWs = event => {
-    console.log("断开链接", event);
-    if(isLogin && !isLink){
-        clearInterval(Interval)
-        isReSet = true;
-        socket = null;
-        Interval = null;
-        let timeout = setTimeout(() => {
-            console.log("断开链接重连");
-            createSocket();
-            clearTimeout(timeout)
-        }, 5000);
-    }
-}
-
-const onerrorWs = event => {
-    console.log("出现错误", event);
-}
-
-const onmessageWs = event => {
-    // console.log(event.data)
-    let data = JSON.parse(event.data)
-    // console.log(data);
-    window.dispatchEvent(new CustomEvent('onmessageWS', {
-        detail: {
-            data: data,
-            isFirst: isFirst
-        }
-    }))
-
-    if(isFirst) {
-        isFirst = false;
-    }
-}
-
-export const setLogin = (bool) => {
-    isLogin = bool;
-}
-
-export const closeWebsocket = () =>{
-    socket.close()
-    clearInterval(Interval)
-    socket = null;
-    Interval = null;
-    isReSet = false;
-}

package/src/websocket/websocket.js

@@ -1,141 +0,0 @@
-/*
- * @Author: lzx lzx@gonsin.cn
- * @Date: 2022-06-27 13:55:43
- * @LastEditors: lrm lrm@gonsin.cn
- * @LastEditTime: 2022-11-22 16:17:58
- * @FilePath: \client\src\websocket\websocket.js
- * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
- */
-// import { mapActions,mapState } from "vuex";
-export default {
-    computed: {
-        // 映射 state 中的数据为计算属性
-      },
-    data() {
-        return {
-            //websocket
-            ip: process.env.NODE_ENV !== 'development' ? window.location.origin.replace(window.location.protocol, 'ws:') + '/gview/websocket' : "http://192.168.2.192:8088/gview/websocket".replace('http', 'ws'),
-            webSocket: null,
-            lockReconnect: false,
-            tt: false,
-            sendParams: {
-                head: "gonsin",
-                cmd: {
-                    cmd: "client",
-                    subcmd: "heart",
-                    respone: 0,
-                },
-                args: {},
-            },
-            // 心跳发送指令,超过40s未发送则断开连接
-            //心跳检测
-            heartCheck: null,
-            timeoutObj: null,
-            serverTimeoutObj: null,
-        }
-    },
-    methods: {
-        // 初始化websockey,登录成功后建立连接  new WebSocket(url)
-        initWebSocket() {
-            let that = this;
-            try {
-                if (typeof WebSocket === "undefined") {
-                    alert("您的浏览器不支持WebSocket，请尽快升级");
-                } else {
-                    console.log(that.ip)
-                    that.webSocket = new WebSocket(that.ip);
-                    that.init(); // 封装有websocket监听方法
-                }
-            } catch (error) {
-                console.log(error);
-            }
-        },
-        init() {
-            let that = this;
-            that.webSocket.onopen = () => {
-                // this.$notify.success('Websocket successfully connected')
-                console.log("webSocket连接成功至:" + that.websocketIp);
-                clearInterval(that.timeoutObj);
-                clearTimeout(that.serverTimeoutObj);
-                let model = {
-                    head: "gonsin",
-                    cmd: {
-                        cmd: "client",
-                        subcmd: "heart",
-                        respone: 0,
-                    },
-                    args: {},
-                };
-                that.timeoutObj = setInterval(function () {
-                    //这里发送一个心跳，后端收到后，返回一个心跳消息，
-                    //onmessage拿到返回的心跳就说明连接正常
-                    that.webSocket.send(JSON.stringify(model));
-                }, 40000);
-                // // 连接成功，注册dataId
-                // that.registerMessage();
-            };
-            that.webSocket.onmessage = (msg) => {
-                console.log("onmessage....................");
-                // console.log('on_message:',msg);
-                let data = JSON.parse(msg.data);
-
-            };
-            that.webSocket.onerror = () => {
-                console.log("websocket连接错误...");
-            };
-            that.webSocket.onclose = () => {
-                console.log("websocket断开连接...");
-                that.msg = that.msg + "websocket断开连接...; ";
-            };
-        },
-        /**
-         * 注册站内信指令
-         */
-        registerMessage(dataId, fun) {
-            let params = {
-                head: "gonsin",
-                cmd: {
-                    cmd: "gview_client",
-                    subcmd: "register",
-                },
-                args: {
-                    dataId: dataId,
-                },
-            };
-            console.log(this.websocket)
-            // this.webSocket.send(JSON.stringify(params));
-            // this.$store.dispatch('setUpdateFunction', dataId,fun);
-        },
-        /**
-         * 注销站内信指令
-         */
-        unregisterMessage(dataId) {
-            let params = {
-                head: "gonsin",
-                cmd: {
-                    cmd: "gview_client",
-                    subcmd: "unregister",
-                },
-                args: {
-                    dataId: dataId,
-                },
-            };
-            this.webSocket.send(JSON.stringify(params));
-        },
-        /**
-         * 处理站内消息回调
-         */
-        handleMessageCallback(data) {
-            console.log(data);
-            console.log("处理站内消息................");
-            this.$notify({
-                title: data.args.message,
-                message: data.args.message,
-                type: "success",
-                offset: 100,
-            });
-        },
-    }
-
-
-}

package/src/websocket/websocket1.js

@@ -1,117 +0,0 @@
-/*
- * @Author: lzx lzx@gonsin.cn
- * @Date: 2022-06-27 13:55:43
- * @LastEditors: lzx lzx@gonsin.cn
- * @LastEditTime: 2022-06-28 13:59:41
- * @FilePath: \client\src\websocket\websocket.js
- * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
- */
-export default {
-    //websocket
-    ip: process.env.NODE_ENV !== 'development' ? window.location.origin.replace(window.location.protocol, pre) + '/gview/websocket' : "http://192.168.2.192:8089/gview/websocket".replace('http', 'ws'),
-    webSocket: null,
-    lockReconnect: false,
-    tt: false,
-    sendParams: {
-        head: "gonsin",
-        cmd: {
-            cmd: "client",
-            subcmd: "heart",
-            respone: 0,
-        },
-        args: {},
-    },
-    // 心跳发送指令,超过40s未发送则断开连接
-    //心跳检测
-    heartCheck: null,
-    timeoutObj: null,
-    serverTimeoutObj: null,
-    // 初始化websockey,登录成功后建立连接  new WebSocket(url)
-    initWebSocket() {
-        try {
-            if (typeof WebSocket === "undefined") {
-                alert("您的浏览器不支持WebSocket，请尽快升级");
-            } else {
-                this.webSocket = new WebSocket(this.ip);
-                this.init(); // 封装有websocket监听方法
-            }
-        } catch (error) {
-            console.log(error);
-        }
-    },
-    init() {
-        let that = this;
-        that.webSocket.onopen = () => {
-            // this.$notify.success('Websocket successfully connected')
-            console.log("webSocket连接成功至:" + that.ip);
-            clearInterval(that.timeoutObj);
-            clearTimeout(that.serverTimeoutObj);
-            let model = {
-                head: "gonsin",
-                cmd: {
-                    cmd: "client",
-                    subcmd: "heart",
-                    respone: 0,
-                },
-                args: {},
-            };
-            that.timeoutObj = setInterval(function () {
-                //这里发送一个心跳，后端收到后，返回一个心跳消息，
-                //onmessage拿到返回的心跳就说明连接正常
-                that.webSocket.send(JSON.stringify(model));
-            }, 40000);
-            // // 连接成功，注册dataId
-            // that.registerMessage();
-        };
-        that.webSocket.onmessage = (msg) => {
-            console.log('this.$store')
-            console.log(this.$store)
-            console.log("onmessage....................");
-            // console.log('on_message:',msg);
-            let data = JSON.parse(msg.data);
-
-        };
-        that.webSocket.onerror = () => {
-            console.log("websocket连接错误...");
-        };
-        that.webSocket.onclose = () => {
-            console.log("websocket断开连接...");
-            that.msg = that.msg + "websocket断开连接...; ";
-        };
-    },
-    /**
-     * 注册站内信指令
-     */
-    registerMessage(dataId, fun) {
-        let params = {
-            head: "gonsin",
-            cmd: {
-                cmd: "gview_client",
-                subcmd: "register",
-            },
-            args: {
-                dataId: dataId,
-            },
-        };
-        this.webSocket.send(JSON.stringify(params));
-    },
-    /**
-     * 注销站内信指令
-     */
-    unregisterMessage(dataId) {
-        let params = {
-            head: "gonsin",
-            cmd: {
-                cmd: "gview_client",
-                subcmd: "unregister",
-            },
-            args: {
-                dataId: dataId,
-            },
-        };
-        this.webSocket.send(JSON.stringify(params));
-    },
-   
-
-
-}