{"remainingRequest":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\babel-loader\\lib\\index.js!C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\cache-loader\\dist\\cjs.js??ref--0-0!C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\style-vw-loader\\index.js??ref--0-2!C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\src\\components\\common\\Header.vue?vue&type=script&lang=js&","dependencies":[{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\src\\components\\common\\Header.vue","mtime":1663828782921},{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\babel.config.js","mtime":1663828782900},{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\babel-loader\\lib\\index.js","mtime":315532800000},{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000},{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\style-vw-loader\\index.js","mtime":1540864632000}],"contextDependencies":[],"result":["import \"core-js/modules/es7.object.get-own-property-descriptors\";\nimport \"core-js/modules/web.dom.iterable\";\nimport \"core-js/modules/es6.object.keys\";\nimport _defineProperty from \"C:/Users/100zone/Desktop/baizong/community/SmartCommunity/videoSurveillance/node_modules/@babel/runtime/helpers/esm/defineProperty.js\";\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\nimport { mapState, mapGetters, mapMutations, mapActions } from 'vuex';\nimport envConfig from '@/config';\nimport vTags from \"./Tags.vue\";\nexport default {\n  data: function data() {\n    return {\n      name: '',\n      envConfig: envConfig,\n      imgList: {\n        1: require('@/assets/img/icon_msg1.png'),\n        2: require('@/assets/img/icon_msg7.png'),\n        10: require('@/assets/img/icon_msg9.png'),\n        11: require('@/assets/img/icon_msg9.png'),\n        13: require('@/assets/img/icon_msg9.png')\n      }\n    };\n  },\n  components: {\n    vTags: vTags\n  },\n  computed: _objectSpread(_objectSpread({\n    cruUserInfo: function cruUserInfo() {\n      return this.$store.getters['getCruUserInfo'];\n    },\n    collapse: function collapse() {\n      return this.$store.getters['getCollapse'];\n    }\n  }, mapState(['messageNumber'])), mapState(['messageList'])),\n  methods: {\n    toUrl: function toUrl(type) {\n      this.$router.push({\n        path: '/msg'\n      });\n    },\n    // 退出登录\n    logOut: function logOut() {\n      var _this = this;\n\n      var access_token = localStorage.getItem('SC_token');\n      this.$http.postForm('/sc-user-auth/user/logout', {\n        access_token: access_token\n      }).then(function (_ref) {\n        var status = _ref.status,\n            data = _ref.data,\n            msg = _ref.msg;\n\n        if (0 === status) {\n          _this.$message({\n            type: 'success',\n            message: '您已退出登录'\n          });\n\n          localStorage.removeItem('SC_token');\n          sessionStorage.removeItem('SC_listMuen');\n\n          _this.$store.commit('setloginInfo', '');\n\n          _this.$store.dispatch('tags', []);\n\n          sessionStorage.removeItem('tabs');\n          window.location.href = _this.envConfig.loginUrl;\n        } else {\n          _this.$message.error(msg);\n        }\n      });\n    },\n    getUserInfo: function getUserInfo(resolve) {\n      var _this2 = this;\n\n      this.$http.postForm('/sc-user-center/user/findLoginUserById').then(function (_ref2) {\n        var status = _ref2.status,\n            data = _ref2.data,\n            msg = _ref2.msg;\n\n        if (status === 0) {\n          _this2.$store.commit('setcCruUserInfo', data);\n        } else {\n          _this2.$message.error('获取用户信息失败');\n        }\n\n        resolve && resolve(true);\n      });\n    },\n    editUserInfo: function editUserInfo() {\n      var _this3 = this;\n\n      new Promise(function (resolve) {\n        _this3.$store.dispatch('addPopup', {\n          url: '/system/edituser.vue',\n          width: '500px',\n          height: '500px',\n          props: {\n            data: JSON.parse(JSON.stringify(_this3.cruUserInfo)),\n            callback: resolve\n          },\n          title: '编辑用户信息'\n        });\n      }).then(function () {\n        _this3.getUserInfo();\n      });\n    },\n    goMessage: function goMessage(msg) {\n      var messageStatus = 2; //全部\n\n      if (msg == 'unread') {\n        messageStatus = 0; //未读\n      }\n\n      this.$store.commit('setmessageStatus', messageStatus);\n      this.$router.push({\n        path: '/msg'\n      });\n    },\n    //获取最新消息列表\n    getMessageList: function getMessageList() {\n      var _this4 = this;\n\n      this.$http.postForm('/sc-message/message/queryLastMessage', {\n        num: '5'\n      }).then(function (_ref3) {\n        var status = _ref3.status,\n            data = _ref3.data,\n            msg = _ref3.msg;\n\n        if (status === 0) {\n          _this4.$store.commit('setmessageList', data);\n        }\n      });\n    },\n    //查询未读消息数量\n    getUnreadNumber: function getUnreadNumber() {\n      var _this5 = this;\n\n      this.$http.postForm('/sc-message/message/queryUnreadMessageStatic').then(function (_ref4) {\n        var status = _ref4.status,\n            data = _ref4.data,\n            msg = _ref4.msg;\n\n        if (status === 0) {\n          data.map(function (item, index) {\n            if (item.cn) {\n              _this5.$store.commit('setmessageNumber', true);\n            }\n          });\n        }\n      });\n    },\n    //初始化websoket\n    initWebSocket: function initWebSocket(id) {\n      if ('WebSocket' in window) {\n        var serviceIp = this.envConfig.websoketUrl;\n        this.websocket = new WebSocket('ws://' + serviceIp + '/sc-message/webSocket/' + id);\n      } else {\n        console.log('当前浏览器 Not support websocket');\n      }\n\n      var that = this;\n      this.interval = window.setInterval(function () {\n        //每隔30秒钟发送一次心跳，避免websocket连接因超时而自动断开\n        if (that.websocket != null) {// that.websocket.send('HeartBeat');\n          // console.log('发送心跳包：HeartBeat');\n        }\n      }, 30000); //连接发生错误的回调方法\n\n      this.websocket.onerror = function (ev) {\n        console.log('WebSocket连接发生错误');\n      }; //连接成功建立的回调方法\n\n\n      this.websocket.onopen = function (ev) {\n        console.log('WebSocket连接成功'); // this.send('addsocket');\n      }; //接收到消息的回调方法\n\n\n      this.websocket.onmessage = function (event) {\n        try {\n          var msg = JSON.parse(event.data); // let i = msg.typeId - 1;\n\n          var i = msg.typeId;\n\n          if (msg.userId) {\n            that.$notify({\n              dangerouslyUseHTMLString: true,\n              showClose: true,\n              customClass: 'notice_icon',\n              offset: 50,\n              duration: 3000,\n              message: \"<div class='notice'><img src=\" + that.imgList[i] + \" class='img'/><div class='notice-content'><span class='title'>新消息通知</span><span class='nowrap'>\" + '【' + msg.type + '】' + msg.content + '</span></div></div>'\n            });\n            that.getMessageList();\n            that.getUnreadNumber();\n          }\n        } catch (e) {}\n      }; //连接关闭的回调方法\n\n\n      this.websocket.onclose = function (ev) {\n        console.log('WebSocket连接关闭');\n        this.websocket = null;\n      };\n    },\n    send: function send(message) {\n      if (this.websocket && this.websocket != null) {\n        // this.websocket.send(message);\n        console.log('发送的消息：' + message);\n      }\n    },\n    //关闭WebSocket连接\n    closeWebSocket: function closeWebSocket() {\n      if (this.websocket != null) {\n        this.websocket.close();\n      }\n\n      if (this.interval) {\n        window.clearInterval(this.interval);\n      }\n    }\n  },\n  mounted: function mounted() {\n    var vm = this;\n\n    window.onbeforeunload = function () {\n      vm.closeWebSocket();\n    };\n  },\n  destoryed: function destoryed() {\n    this.closeWebSocket();\n  },\n  created: function created() {\n    var _this6 = this;\n\n    new Promise(function (resolve) {\n      _this6.getUserInfo(resolve);\n    }).then(function (_) {\n      var id = _this6.$store.state.cruUserInfo.id;\n\n      _this6.initWebSocket(id);\n\n      _this6.getMessageList();\n\n      _this6.getUnreadNumber();\n    });\n  }\n};",{"version":3,"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDA;AACA;AACA;AACA;AACAA,MADA,kBACA;AACA;AACAC,cADA;AAEAC,0BAFA;AAGAC;AACA,gDADA;AAEA,gDAFA;AAGA,iDAHA;AAIA,iDAJA;AAKA;AALA;AAHA;AAWA,GAbA;AAcAC;AACAC;AADA,GAdA;AAiBAC;AACAC,eADA,yBACA;AACA;AACA,KAHA;AAIAC,YAJA,sBAIA;AACA;AACA;AANA,KAOAC,2BAPA,GAQAA,yBARA,CAjBA;AA2BAC;AACAC,SADA,iBACAC,IADA,EACA;AACA;AACAC;AADA;AAGA,KALA;AAMA;AACAC,UAPA,oBAOA;AAAA;;AACA;AACA;AAAAC;AAAA;AAAA;AAAA;AAAA;;AACA;AACA;AACAH,2BADA;AAEAI;AAFA;;AAIAC;AACAC;;AACA;;AACA;;AAEAA;AACAC;AACA,SAZA,MAYA;AACA;AACA;AACA,OAhBA;AAiBA,KA1BA;AA2BAC,eA3BA,uBA2BAC,OA3BA,EA2BA;AAAA;;AACA;AAAA;AAAA;AAAA;;AACA;AACA;AACA,SAFA,MAEA;AACA;AACA;;AACAA;AACA,OAPA;AAQA,KApCA;AAqCAC,gBArCA,0BAqCA;AAAA;;AACA;AACA;AACAC,qCADA;AAEAC,wBAFA;AAGAC,yBAHA;AAIAC;AACA1B,gEADA;AAEA2B;AAFA,WAJA;AAQAC;AARA;AAUA,OAXA,EAWAC,IAXA,CAWA;AACA;AACA,OAbA;AAcA,KApDA;AAqDAC,aArDA,qBAqDAC,GArDA,EAqDA;AACA,4BADA,CACA;;AACA;AACAC,0BADA,CACA;AACA;;AACA;AACA;AACAnB;AADA;AAGA,KA9DA;AA+DA;AACAoB,kBAhEA,4BAgEA;AAAA;;AACA;AAAAC;AAAA;AAAA;AAAA;AAAA;;AACA;AACA;AACA;AACA,OAJA;AAKA,KAtEA;AAuEA;AACAC,mBAxEA,6BAwEA;AAAA;;AACA;AAAA;AAAA;AAAA;;AACA;AACAnC;AACA;AACA;AACA;AACA,WAJA;AAKA;AACA,OARA;AASA,KAlFA;AAmFA;AACAoC,iBApFA,yBAoFAC,EApFA,EAoFA;AACA;AACA;AACA;AACA,OAHA,MAGA;AACAC;AACA;;AACA;AACA;AACA;AACA,qCACA;AACA;AACA;AACA,OANA,EAMA,KANA,EARA,CAeA;;AACA;AACAA;AACA,OAFA,CAhBA,CAoBA;;;AACA;AACAA,qCADA,CAEA;AACA,OAHA,CArBA,CA0BA;;;AACA;AACA;AACA,2CADA,CAEA;;AACA;;AACA;AACAC;AACAC,4CADA;AAEAC,6BAFA;AAGAC,wCAHA;AAIAC,wBAJA;AAKAC,4BALA;AAMA5B,uBACA,kCACAuB,eADA,GAEA,iGAFA,GAGA,GAHA,GAIAR,QAJA,GAKA,GALA,GAMAA,WANA,GAOA;AAdA;AAgBAQ;AACAA;AACA;AACA,SAxBA,CAwBA;AACA,OA1BA,CA3BA,CAuDA;;;AACA;AACAD;AACA;AACA,OAHA;AAIA,KAhJA;AAiJAO,QAjJA,gBAiJA7B,OAjJA,EAiJA;AACA;AACA;AACAsB;AACA;AACA,KAtJA;AAuJA;AACAQ,kBAxJA,4BAwJA;AACA;AACA;AACA;;AACA;AACA3B;AACA;AACA;AA/JA,GA3BA;AA4LA4B,SA5LA,qBA4LA;AACA;;AACA5B;AACA6B;AACA,KAFA;AAGA,GAjMA;AAkMAC,WAlMA,uBAkMA;AACA;AACA,GApMA;AAqMAC,SArMA,qBAqMA;AAAA;;AACA;AACA;AACA,KAFA,EAEArB,IAFA,CAEA;AACA;;AACA;;AACA;;AACA;AACA,KAPA;AAQA;AA9MA","names":["data","name","envConfig","imgList","components","vTags","computed","cruUserInfo","collapse","mapState","methods","toUrl","type","path","logOut","access_token","message","localStorage","sessionStorage","window","getUserInfo","resolve","editUserInfo","url","width","height","props","callback","title","then","goMessage","msg","messageStatus","getMessageList","num","getUnreadNumber","initWebSocket","id","console","that","dangerouslyUseHTMLString","showClose","customClass","offset","duration","send","closeWebSocket","mounted","vm","destoryed","created"],"sourceRoot":"src/components/common","sources":["Header.vue"],"sourcesContent":["<template>\r\n    <div class=\"header\" :class=\"[collapse ? 'collapse' : 'expand']\">\r\n        <div class=\"el-fl-left\"><v-tags></v-tags></div>\r\n        <div class=\"header-right\">\r\n            <div class=\"header-user-con\">\r\n                <div>欢迎你,{{ cruUserInfo.username }}</div>\r\n                <!-- 用户头像 -->\r\n                <div class=\"user-avator\" @click=\"editUserInfo\">\r\n                    <i class=\"iconfont\" v-show=\"!cruUserInfo.photo\" v-bottom-txt-tip data-txt=\"编辑用户信息\">&#xe6e8;</i>\r\n                    <img v-show=\"cruUserInfo.photo\" :src=\"envConfig.baseImgApi + cruUserInfo.photo\" style=\"object-fit: cover\" />\r\n                </div>\r\n                <div class=\"message\">\r\n                    <span class=\"main\" @click=\"goMessage('unread')\">\r\n                        <img src=\"@assets/img/btn_news.png\" alt=\"\" />\r\n                        <span class=\"iconfont point\" v-if=\"messageNumber\"></span>\r\n                    </span>\r\n                    <div class=\"msg-content\" v-if=\"messageList && messageList.length\">\r\n                        <p>消息通知</p>\r\n                        <ul>\r\n                            <li v-for=\"(items, index) in messageList\" :key=\"index\" @click=\"toUrl(items.typeId)\" style=\"cursor: pointer\">\r\n                                <img :src=\"imgList[items.typeId]\" style=\"width: 1.5625vw; height: 1.5625vw\" />\r\n\r\n                                <div>\r\n                                    <span class=\"cont\">【{{ items.shortName }}】{{ items.messageContent }}</span>\r\n                                    <span class=\"time\">{{ items.dateCreate }}</span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                        <el-button type=\"text\" class=\"more\" @click=\"goMessage('more')\">查看更多</el-button>\r\n                    </div>\r\n                    <div class=\"msg-content\" v-else>\r\n                        <p>消息通知</p>\r\n                        <ul>\r\n                            <li style=\"text-align: center; display: block; padding: 0 rem(20); line-height: rem(60)\">暂无消息</li>\r\n                        </ul>\r\n                        <el-button type=\"text\" class=\"more\" disabled>查看更多</el-button>\r\n                    </div>\r\n                </div>\r\n                <span class=\"border\"></span>\r\n                <div class=\"logout\" @click=\"logOut\">\r\n                    <el-tooltip placement=\"bottom\" content=\"退出\">\r\n                        <i class=\"zoniot_font zoniot-icon-tuichu\"></i>\r\n                    </el-tooltip>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</template>\r\n<script>\r\nimport { mapState, mapGetters, mapMutations, mapActions } from 'vuex';\r\nimport envConfig from '@/config';\r\nimport vTags from './Tags.vue';\r\nexport default {\r\n    data() {\r\n        return {\r\n            name: '',\r\n            envConfig: envConfig,\r\n            imgList: {\r\n                1: require('@/assets/img/icon_msg1.png'),\r\n                2: require('@/assets/img/icon_msg7.png'),\r\n                10: require('@/assets/img/icon_msg9.png'),\r\n                11: require('@/assets/img/icon_msg9.png'),\r\n                13: require('@/assets/img/icon_msg9.png')\r\n            }\r\n        };\r\n    },\r\n    components: {\r\n        vTags\r\n    },\r\n    computed: {\r\n        cruUserInfo() {\r\n            return this.$store.getters['getCruUserInfo'];\r\n        },\r\n        collapse() {\r\n            return this.$store.getters['getCollapse'];\r\n        },\r\n        ...mapState(['messageNumber']),\r\n        ...mapState(['messageList'])\r\n    },\r\n    methods: {\r\n        toUrl(type) {\r\n            this.$router.push({\r\n                path: '/msg'\r\n            });\r\n        },\r\n        // 退出登录\r\n        logOut() {\r\n            var access_token = localStorage.getItem('SC_token');\r\n            this.$http.postForm('/sc-user-auth/user/logout', { access_token: access_token }).then(({ status, data, msg }) => {\r\n                if (0 === status) {\r\n                    this.$message({\r\n                        type: 'success',\r\n                        message: '您已退出登录'\r\n                    });\r\n                    localStorage.removeItem('SC_token');\r\n                    sessionStorage.removeItem('SC_listMuen');\r\n                    this.$store.commit('setloginInfo', '');\r\n                    this.$store.dispatch('tags', []);\r\n\r\n                    sessionStorage.removeItem('tabs');\r\n                    window.location.href = this.envConfig.loginUrl;\r\n                } else {\r\n                    this.$message.error(msg);\r\n                }\r\n            });\r\n        },\r\n        getUserInfo(resolve) {\r\n            this.$http.postForm('/sc-user-center/user/findLoginUserById').then(({ status, data, msg }) => {\r\n                if (status === 0) {\r\n                    this.$store.commit('setcCruUserInfo', data);\r\n                } else {\r\n                    this.$message.error('获取用户信息失败');\r\n                }\r\n                resolve && resolve(true);\r\n            });\r\n        },\r\n        editUserInfo() {\r\n            new Promise((resolve) => {\r\n                this.$store.dispatch('addPopup', {\r\n                    url: '/system/edituser.vue',\r\n                    width: '500px',\r\n                    height: '500px',\r\n                    props: {\r\n                        data: JSON.parse(JSON.stringify(this.cruUserInfo)),\r\n                        callback: resolve\r\n                    },\r\n                    title: '编辑用户信息'\r\n                });\r\n            }).then(() => {\r\n                this.getUserInfo();\r\n            });\r\n        },\r\n        goMessage(msg) {\r\n            let messageStatus = 2; //全部\r\n            if (msg == 'unread') {\r\n                messageStatus = 0; //未读\r\n            }\r\n            this.$store.commit('setmessageStatus', messageStatus);\r\n            this.$router.push({\r\n                path: '/msg'\r\n            });\r\n        },\r\n        //获取最新消息列表\r\n        getMessageList() {\r\n            this.$http.postForm('/sc-message/message/queryLastMessage', { num: '5' }).then(({ status, data, msg }) => {\r\n                if (status === 0) {\r\n                    this.$store.commit('setmessageList', data);\r\n                }\r\n            });\r\n        },\r\n        //查询未读消息数量\r\n        getUnreadNumber() {\r\n            this.$http.postForm('/sc-message/message/queryUnreadMessageStatic').then(({ status, data, msg }) => {\r\n                if (status === 0) {\r\n                    data.map((item, index) => {\r\n                        if (item.cn) {\r\n                            this.$store.commit('setmessageNumber', true);\r\n                        }\r\n                    });\r\n                }\r\n            });\r\n        },\r\n        //初始化websoket\r\n        initWebSocket(id) {\r\n            if ('WebSocket' in window) {\r\n                var serviceIp = this.envConfig.websoketUrl;\r\n                this.websocket = new WebSocket('ws://' + serviceIp + '/sc-message/webSocket/' + id);\r\n            } else {\r\n                console.log('当前浏览器 Not support websocket');\r\n            }\r\n            let that = this;\r\n            this.interval = window.setInterval(function () {\r\n                //每隔30秒钟发送一次心跳，避免websocket连接因超时而自动断开\r\n                if (that.websocket != null) {\r\n                    // that.websocket.send('HeartBeat');\r\n                    // console.log('发送心跳包：HeartBeat');\r\n                }\r\n            }, 30000);\r\n            //连接发生错误的回调方法\r\n            this.websocket.onerror = function (ev) {\r\n                console.log('WebSocket连接发生错误');\r\n            };\r\n\r\n            //连接成功建立的回调方法\r\n            this.websocket.onopen = function (ev) {\r\n                console.log('WebSocket连接成功');\r\n                // this.send('addsocket');\r\n            };\r\n\r\n            //接收到消息的回调方法\r\n            this.websocket.onmessage = function (event) {\r\n                try {\r\n                    let msg = JSON.parse(event.data);\r\n                    // let i = msg.typeId - 1;\r\n                    let i = msg.typeId;\r\n                    if (msg.userId) {\r\n                        that.$notify({\r\n                            dangerouslyUseHTMLString: true,\r\n                            showClose: true,\r\n                            customClass: 'notice_icon',\r\n                            offset: 50,\r\n                            duration: 3000,\r\n                            message:\r\n                                \"<div class='notice'><img src=\" +\r\n                                that.imgList[i] +\r\n                                \" class='img'/><div class='notice-content'><span class='title'>新消息通知</span><span class='nowrap'>\" +\r\n                                '【' +\r\n                                msg.type +\r\n                                '】' +\r\n                                msg.content +\r\n                                '</span></div></div>'\r\n                        });\r\n                        that.getMessageList();\r\n                        that.getUnreadNumber();\r\n                    }\r\n                } catch (e) {}\r\n            };\r\n\r\n            //连接关闭的回调方法\r\n            this.websocket.onclose = function (ev) {\r\n                console.log('WebSocket连接关闭');\r\n                this.websocket = null;\r\n            };\r\n        },\r\n        send(message) {\r\n            if (this.websocket && this.websocket != null) {\r\n                // this.websocket.send(message);\r\n                console.log('发送的消息：' + message);\r\n            }\r\n        },\r\n        //关闭WebSocket连接\r\n        closeWebSocket() {\r\n            if (this.websocket != null) {\r\n                this.websocket.close();\r\n            }\r\n            if (this.interval) {\r\n                window.clearInterval(this.interval);\r\n            }\r\n        }\r\n    },\r\n    mounted() {\r\n        let vm = this;\r\n        window.onbeforeunload = function () {\r\n            vm.closeWebSocket();\r\n        };\r\n    },\r\n    destoryed() {\r\n        this.closeWebSocket();\r\n    },\r\n    created() {\r\n        new Promise((resolve) => {\r\n            this.getUserInfo(resolve);\r\n        }).then((_) => {\r\n            let id = this.$store.state.cruUserInfo.id;\r\n            this.initWebSocket(id);\r\n            this.getMessageList();\r\n            this.getUnreadNumber();\r\n        });\r\n    }\r\n};\r\n</script>\r\n<style lang='scss' scoped>\r\n@import '@assets/css/public-style.scss';\r\n.border {\r\n    width: 1px;\r\n    height: rem(10);\r\n    background: #ffffffa5;\r\n}\r\n.header {\r\n    height: rem(46);\r\n    font-size: rem(14);\r\n    color: #fff;\r\n    background: #2c354a;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    &.expand::before {\r\n        content: '';\r\n        display: inline-block;\r\n        width: rem(220);\r\n        height: rem(46);\r\n        background: #2c354a;\r\n        position: absolute;\r\n        left: 0;\r\n    }\r\n    &.collapse::before {\r\n        content: '';\r\n        display: inline-block;\r\n        width: rem(85);\r\n        height: rem(46);\r\n        background: #2c354a;\r\n        position: absolute;\r\n        left: 0;\r\n    }\r\n}\r\n.header-right {\r\n    padding-right: rem(20);\r\n    color: rgba(255, 255, 255, 0.6);\r\n    .name-txt {\r\n        font-size: rem(12);\r\n        font-family: PingFangSC-Regular, PingFang SC;\r\n        font-weight: 400;\r\n        color: #ffffff;\r\n    }\r\n}\r\n.header-user-con {\r\n    display: flex;\r\n    align-items: center;\r\n}\r\n.logout {\r\n    margin-left: rem(20);\r\n    i {\r\n        color: white;\r\n        font-size: rem(20);\r\n    }\r\n}\r\n.iconfont {\r\n    font-size: rem(20);\r\n    color: rgba(255, 255, 255, 0.6);\r\n    &:hover {\r\n        color: rgba(255, 255, 255, 1);\r\n    }\r\n}\r\n.user-avator {\r\n    margin-left: rem(10);\r\n    margin-right: rem(20);\r\n}\r\n.user-avator img {\r\n    display: block;\r\n    width: rem(20);\r\n    height: rem(20);\r\n    cursor: pointer;\r\n}\r\n.message {\r\n    margin-right: rem(20);\r\n    color: #000000;\r\n    cursor: pointer;\r\n    &:hover {\r\n        .msg-content {\r\n            display: block;\r\n            background: #ffffff;\r\n            box-shadow: 0px rem(5) rem(20) 0px rgba(144, 144, 144, 0.4);\r\n            border-radius: rem(6);\r\n            z-index: 200;\r\n        }\r\n    }\r\n    .main {\r\n        height: rem(46);\r\n        line-height: rem(46);\r\n        position: relative;\r\n        img {\r\n            width: rem(20);\r\n            height: rem(20);\r\n            vertical-align: text-bottom;\r\n        }\r\n        .point {\r\n            position: absolute;\r\n            top: rem(-4);\r\n            right: -1px;\r\n            width: rem(4);\r\n            height: rem(4);\r\n            background: #fe7271;\r\n            border-radius: 50%;\r\n            display: block;\r\n        }\r\n    }\r\n\r\n    .msg-content {\r\n        position: absolute;\r\n        width: rem(380);\r\n        background: #ffffff;\r\n        z-index: 20;\r\n        right: rem(20);\r\n        top: rem(40);\r\n        transition: all 0.3s;\r\n        display: none;\r\n        p {\r\n            height: rem(40);\r\n            line-height: rem(40);\r\n            padding-left: rem(20);\r\n            color: #212226;\r\n        }\r\n        li {\r\n            display: flex;\r\n            align-items: center;\r\n            height: rem(60);\r\n            padding-left: rem(20);\r\n            border-top: 1px solid #f6f6f6;\r\n            font-size: rem(12);\r\n            cursor: auto;\r\n            span {\r\n                width: rem(300);\r\n                overflow: hidden; //超出的文本隐藏\r\n                text-overflow: ellipsis; //溢出用省略号显示\r\n                white-space: nowrap; //溢出不换行\r\n                display: block;\r\n                line-height: rem(20);\r\n                padding-left: 1rem (5);\r\n            }\r\n            .cont {\r\n                color: #424656;\r\n                text-indent: -0.4em;\r\n            }\r\n            .time {\r\n                color: #7d7f87;\r\n            }\r\n        }\r\n        .more {\r\n            width: 100%;\r\n        }\r\n    }\r\n}\r\n</style>\r\n"]}]}