| 1 |
- {"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=\"编辑用户信息\"></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"]}]}
|
