{"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\\Tags.vue?vue&type=style&index=0&id=47c5997d&lang=scss&scoped=true&","dependencies":[{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\src\\components\\common\\Tags.vue","mtime":1663828782923},{"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\r\n@import '@assets/css/public-style.scss';\r\n.tags ul {\r\n    box-sizing: border-box;\r\n    width: 100%;\r\n    height: 100%;\r\n    display: flex;\r\n}\r\n\r\n.tags-li {\r\n    float: left;\r\n    font-size: rem(12);\r\n    cursor: pointer;\r\n    border-right: 1px solid #a6abb6;\r\n    padding: 0 rem(20) 0 rem(20);\r\n    vertical-align: middle;\r\n    -webkit-transition: all 0.3s ease-in;\r\n    -moz-transition: all 0.3s ease-in;\r\n    transition: all 0.3s ease-in;\r\n}\r\n.close {\r\n    padding: 0 rem(20) 0 rem(20);\r\n    -webkit-transition: all 0.3s ease-in;\r\n    -moz-transition: all 0.3s ease-in;\r\n    transition: all 0.3s ease-in;\r\n    text-align: inherit;\r\n    position: relative;\r\n}\r\n.tags-li-icon {\r\n    width: rem(14);\r\n    height: rem(14);\r\n    min-width: 14px;\r\n    min-height: 14px;\r\n    display: inline-block;\r\n    border-radius: 50%;\r\n    background: url('../../assets/img/closed.png') no-repeat center center;\r\n    vertical-align: bottom;\r\n}\r\n.active .tags-li-icon {\r\n    background: url('../../assets/img/close.png') no-repeat center center;\r\n    vertical-align: bottom;\r\n}\r\n\r\n.tags-li.active {\r\n    color: $mainTextColor;\r\n}\r\n\r\n.tags-li-title {\r\n    max-width: rem(80);\r\n    font-size: rem(12);\r\n    overflow: hidden;\r\n    white-space: nowrap;\r\n    text-overflow: ellipsis;\r\n    margin-right: rem(10);\r\n    color: #a6abb6;\r\n}\r\n\r\n.tags-li.active .tags-li-title {\r\n    color: #fefeff;\r\n}\r\n\r\n.tags-li:last-child {\r\n    border-right: none;\r\n}\r\n.allclose {\r\n    display: inline-block;\r\n    position: absolute;\r\n    top: 0;\r\n    width: max-content;\r\n    height: rem(18);\r\n    min-height: 18px;\r\n    line-height: inherit;\r\n    padding: 0 rem(7);\r\n    background: $mainTextColor;\r\n    border-radius: rem(10);\r\n    vertical-align: middle;\r\n    font-family: PingFangSC-Regular, PingFang SC;\r\n    font-weight: 400;\r\n    color: #ffffff;\r\n    text-align: center;\r\n}\r\n.allclose span {\r\n    padding: 0px rem(10);\r\n}\r\n.allclosed {\r\n    width: rem(14);\r\n    height: rem(14);\r\n    display: inline-block;\r\n    background: url('../../assets/img/allClosed.png') no-repeat center center;\r\n    vertical-align: middle;\r\n    margin-left: rem(10);\r\n}\r\n",{"version":3,"sources":["Tags.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiIA;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;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;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","file":"Tags.vue","sourceRoot":"src/components/common","sourcesContent":["<template>\r\n    <div class=\"tags\" v-if=\"showTags\">\r\n        <ul>\r\n            <li class=\"tags-li\" v-for=\"(item, index) in tagsList\" :class=\"{ active: isActive(item.path) }\" :key=\"index\">\r\n                <router-link :to=\"{ path: item.path, query: { closeDialog: true } }\" class=\"tags-li-title\"> {{ item.title }} </router-link>\r\n                <span class=\"tags-li-icon\" @click=\"closeTags(index)\"></span>\r\n            </li>\r\n            <li class=\"tags-li close\" v-if=\"tagsList.length > 1\">\r\n                <span class=\"allclose\" @click=\"closeOther\">全部关闭</span>\r\n            </li>\r\n        </ul>\r\n    </div>\r\n</template>\r\n<script>\r\nconst detaillist = ['/viewDetail', '/installplanView'];\r\nexport default {\r\n    data() {\r\n        return {\r\n            // tagsList: []\r\n        };\r\n    },\r\n    methods: {\r\n        // 点击标签页\r\n        isActive(path) {\r\n            if (path instanceof Object) {\r\n                let fullpath = this.setFullPath(path);\r\n                return fullpath === this.$route.fullPath;\r\n            }\r\n            return path === this.$route.fullPath;\r\n        },\r\n        // 关闭单个标签\r\n        closeTags(index) {\r\n            if (this.tagsList.length > 1) {\r\n                const delItem = this.tagsList.splice(index, 1)[0];\r\n                const item = this.tagsList[index] ? this.tagsList[index] : this.tagsList[index - 1];\r\n                if (item) {\r\n                    if (detaillist.includes(delItem.path.path)) {\r\n                        let delfullpath = this.setFullPath(delItem.path);\r\n                        delfullpath === this.$route.fullPath && this.$router.push(item.path);\r\n                    } else {\r\n                        delItem.path === this.$route.fullPath && this.$router.push(item.path);\r\n                    }\r\n                }\r\n            }\r\n        },\r\n        // 关闭其他标签\r\n        closeOther() {\r\n            const curItem = this.tagsList.filter((item) => {\r\n                if (detaillist.includes(this.$route.path)) {\r\n                    let fullpath = item.path instanceof Object ? this.setFullPath(item.path) : item.path;\r\n                    return fullpath === this.$route.fullPath;\r\n                }\r\n                return item.path === this.$route.fullPath;\r\n            });\r\n            this.tagsList.splice(0, this.tagsList.length);\r\n            this.$store.dispatch('tags', curItem.concat());\r\n        },\r\n        setFullPath(item) {\r\n            let itemfullpath = '';\r\n            if (JSON.stringify(item) != '{}') {\r\n                itemfullpath = item.path + '?';\r\n                _.mapKeys(item.query, (val, key) => {\r\n                    if (!_.isEmpty(String(val)) && val) {\r\n                        if (key == 'planName') {\r\n                            val = encodeURI(val);\r\n                        }\r\n                        itemfullpath += `${key}=${val}&`;\r\n                    }\r\n                });\r\n                if (itemfullpath.substr(itemfullpath.length - 1, 1) == '&') {\r\n                    itemfullpath = itemfullpath.slice(0, itemfullpath.length - 1);\r\n                }\r\n            }\r\n            return itemfullpath;\r\n        },\r\n        // 设置标签\r\n        setTags(route) {\r\n            let tagArr = {\r\n                title: route.title || route.meta.title,\r\n                path: route.fullPath\r\n            };\r\n            if (!!route.name) {\r\n                tagArr = {\r\n                    title: route.title || route.meta.title,\r\n                    path: route.fullPath,\r\n                    name: route.name\r\n                };\r\n            }\r\n\r\n            const isExist = this.tagsList.some((item, index) => {\r\n                let thisBi = item.path.indexOf(route.path) > -1;\r\n                if (thisBi) {\r\n                    this.tagsList.splice(index, 1, tagArr);\r\n\r\n                    this.$store.dispatch('tags', this.tagsList);\r\n                }\r\n                return thisBi;\r\n            });\r\n            if (!isExist) {\r\n                if (route.path === '/') {\r\n                    return;\r\n                }\r\n                if (this.tagsList.length >= 8) {\r\n                    this.tagsList.shift();\r\n                }\r\n                this.tagsList.push(tagArr);\r\n                this.$store.dispatch('tags', this.tagsList);\r\n            }\r\n        }\r\n    },\r\n    computed: {\r\n        showTags() {\r\n            return this.tagsList.length > 0;\r\n        },\r\n        tagsList() {\r\n            return this.$store.getters['getTagsList'];\r\n        }\r\n    },\r\n    watch: {\r\n        $route(newValue, oldValue) {\r\n            this.setTags(newValue);\r\n        }\r\n    },\r\n    created() {\r\n        this.setTags(this.$route);\r\n    }\r\n};\r\n</script>\r\n<style lang=\"scss\" scoped>\r\n@import '@assets/css/public-style.scss';\r\n.tags ul {\r\n    box-sizing: border-box;\r\n    width: 100%;\r\n    height: 100%;\r\n    display: flex;\r\n}\r\n\r\n.tags-li {\r\n    float: left;\r\n    font-size: rem(12);\r\n    cursor: pointer;\r\n    border-right: 1px solid #a6abb6;\r\n    padding: 0 rem(20) 0 rem(20);\r\n    vertical-align: middle;\r\n    -webkit-transition: all 0.3s ease-in;\r\n    -moz-transition: all 0.3s ease-in;\r\n    transition: all 0.3s ease-in;\r\n}\r\n.close {\r\n    padding: 0 rem(20) 0 rem(20);\r\n    -webkit-transition: all 0.3s ease-in;\r\n    -moz-transition: all 0.3s ease-in;\r\n    transition: all 0.3s ease-in;\r\n    text-align: inherit;\r\n    position: relative;\r\n}\r\n.tags-li-icon {\r\n    width: rem(14);\r\n    height: rem(14);\r\n    min-width: 14px;\r\n    min-height: 14px;\r\n    display: inline-block;\r\n    border-radius: 50%;\r\n    background: url('../../assets/img/closed.png') no-repeat center center;\r\n    vertical-align: bottom;\r\n}\r\n.active .tags-li-icon {\r\n    background: url('../../assets/img/close.png') no-repeat center center;\r\n    vertical-align: bottom;\r\n}\r\n\r\n.tags-li.active {\r\n    color: $mainTextColor;\r\n}\r\n\r\n.tags-li-title {\r\n    max-width: rem(80);\r\n    font-size: rem(12);\r\n    overflow: hidden;\r\n    white-space: nowrap;\r\n    text-overflow: ellipsis;\r\n    margin-right: rem(10);\r\n    color: #a6abb6;\r\n}\r\n\r\n.tags-li.active .tags-li-title {\r\n    color: #fefeff;\r\n}\r\n\r\n.tags-li:last-child {\r\n    border-right: none;\r\n}\r\n.allclose {\r\n    display: inline-block;\r\n    position: absolute;\r\n    top: 0;\r\n    width: max-content;\r\n    height: rem(18);\r\n    min-height: 18px;\r\n    line-height: inherit;\r\n    padding: 0 rem(7);\r\n    background: $mainTextColor;\r\n    border-radius: rem(10);\r\n    vertical-align: middle;\r\n    font-family: PingFangSC-Regular, PingFang SC;\r\n    font-weight: 400;\r\n    color: #ffffff;\r\n    text-align: center;\r\n}\r\n.allclose span {\r\n    padding: 0px rem(10);\r\n}\r\n.allclosed {\r\n    width: rem(14);\r\n    height: rem(14);\r\n    display: inline-block;\r\n    background: url('../../assets/img/allClosed.png') no-repeat center center;\r\n    vertical-align: middle;\r\n    margin-left: rem(10);\r\n}\r\n</style>\r\n"]}]}