| 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\\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"]}]}
|
