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