| 1 |
- {"remainingRequest":"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=style&index=0&id=1f234af1&lang=scss&scoped=true&","dependencies":[{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\src\\components\\common\\Header.vue","mtime":1664246648239},{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\css-loader\\index.js","mtime":499162500000},{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":499162500000},{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\postcss-loader\\src\\index.js","mtime":499162500000},{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\sass-loader\\dist\\cjs.js","mtime":499162500000},{"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":["\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\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\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\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\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\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\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.newWorkBench{\r\n border-bottom: rem(1) solid rgba(224, 225, 227, 0.2);\r\n box-sizing: border-box;\r\n}\r\n",{"version":3,"sources":["Header.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyQA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"Header.vue","sourceRoot":"src/components/common","sourcesContent":["<template>\r\n <div class=\"header\" :class=\"[collapse ? 'collapse' : 'expand', routePath ? 'newWorkBench' : '']\">\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 routePath() {\r\n return this.$route.path == '/passengerFlow/index' || this.$route.path == '/videoSurveillance/index';\r\n }\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.newWorkBench{\r\n border-bottom: rem(1) solid rgba(224, 225, 227, 0.2);\r\n box-sizing: border-box;\r\n}\r\n</style>\r\n"]}]}
|
