{"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\\views\\videoSurveillance\\index.vue?vue&type=script&lang=js&","dependencies":[{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\src\\views\\videoSurveillance\\index.vue","mtime":1664263042590},{"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":["//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\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\nimport videoList from './video.vue';\r\n\r\nexport default {\r\n    components: {\r\n        videoList\r\n    },\r\n    data() {\r\n        return {\r\n            devList: [],\r\n            videoUrlList: []\r\n        };\r\n    },\r\n    watch: {\r\n        filterText(val) {\r\n            this.$refs.tree.filter(val);\r\n        }\r\n    },\r\n    created() {\r\n        this.getList(); //获取左侧场景列表\r\n    },\r\n\r\n    methods: {\r\n        getList() {\r\n            this.$http.get('/sc-community/dahuaDevice/getDeviceList').then(({ data }) => {\r\n                this.devList = data;\r\n                console.log(data);\r\n            });\r\n        },\r\n        clickPlay(val) {\r\n            this.videoUrlList = [val];\r\n        }\r\n    }\r\n};\r\n",{"version":3,"sources":["index.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDA;;AAEA;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","file":"index.vue","sourceRoot":"src/views/videoSurveillance","sourcesContent":["<template>\r\n    <div class=\"realVideoBox\">\r\n        <div class=\"leftAssembly\">\r\n            <div class=\"titles\">设备列表</div>\r\n            <div class=\"componentsBlock\">\r\n                <div class=\"devList active\" @click=\"clickPlay(item.deviceCode)\" v-for=\"(item, index) in devList\" :key=\"index\">\r\n                    {{ item.deviceName }}\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"contentShow\">\r\n            <div class=\"topBlock\">\r\n                <div class=\"separateBlock\">\r\n                    <div class=\"listBlock bg1\">\r\n                        <div class=\"font30\">298</div>\r\n                        <div class=\"titleText\">设备总数</div>\r\n                    </div>\r\n                    <div class=\"listBlock bg2\">\r\n                        <div class=\"font30\">298</div>\r\n                        <div class=\"titleText\">设备在线数</div>\r\n                    </div>\r\n                    <div class=\"listBlock bg3\">\r\n                        <div class=\"font30\">298</div>\r\n                        <div class=\"titleText\">设备离线数</div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"hopBlock\">\r\n                    <div class=\"itemBlock\">\r\n                        <div class=\"font30 mainText\">298</div>\r\n                        <div class=\"titleText\">今日客流</div>\r\n                    </div>\r\n                    <div class=\"itemBlock\">\r\n                        <div class=\"font30 greenText\">298</div>\r\n                        <div class=\"titleText\">本周客流</div>\r\n                    </div>\r\n                    <div class=\"itemBlock\">\r\n                        <div class=\"font30 redText\">298</div>\r\n                        <div class=\"titleText\">本月客流</div>\r\n                    </div>\r\n                    <div class=\"itemBlock\">\r\n                        <div class=\"font30 violetText\">298</div>\r\n                        <div class=\"titleText\">本年客流</div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"videoView\">\r\n                <video-list :videoUrlList=\"videoUrlList\"></video-list>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</template>\r\n\r\n<script>\r\nimport videoList from './video.vue';\r\n\r\nexport default {\r\n    components: {\r\n        videoList\r\n    },\r\n    data() {\r\n        return {\r\n            devList: [],\r\n            videoUrlList: []\r\n        };\r\n    },\r\n    watch: {\r\n        filterText(val) {\r\n            this.$refs.tree.filter(val);\r\n        }\r\n    },\r\n    created() {\r\n        this.getList(); //获取左侧场景列表\r\n    },\r\n\r\n    methods: {\r\n        getList() {\r\n            this.$http.get('/sc-community/dahuaDevice/getDeviceList').then(({ data }) => {\r\n                this.devList = data;\r\n                console.log(data);\r\n            });\r\n        },\r\n        clickPlay(val) {\r\n            this.videoUrlList = [val];\r\n        }\r\n    }\r\n};\r\n</script>\r\n\r\n<style scoped lang='scss'>\r\n@import '@assets/css/public-style.scss';\r\n.realVideoBox {\r\n    height: 100%;\r\n    display: flex;\r\n    justify-content: space-between;\r\n}\r\n.leftAssembly {\r\n    width: rem(300);\r\n    background: #171f32;\r\n    border-radius: rem(4);\r\n    box-sizing: border-box;\r\n    padding: rem(20);\r\n    color: white;\r\n    .titles {\r\n        border-bottom: 1px solid rgba(224, 225, 227, 0.2);\r\n        padding-bottom: rem(20);\r\n        margin-bottom: rem(20);\r\n    }\r\n    .componentsBlock {\r\n        height: calc(100% - #{rem(60)});\r\n        overflow-y: auto;\r\n        overflow-x: hidden;\r\n        &::-webkit-scrollbar {\r\n            z-index: 11;\r\n            width: rem(4);\r\n        }\r\n        &::-webkit-scrollbar-track,\r\n        &::-webkit-scrollbar-corner {\r\n            background: transparent;\r\n        }\r\n        &::-webkit-scrollbar-thumb {\r\n            border-radius: rem(5);\r\n            width: rem(4);\r\n            background: rgba(250, 250, 250, 0.09);\r\n        }\r\n        &::-webkit-scrollbar-track-piece {\r\n            background: transparent;\r\n            width: rem(4);\r\n        }\r\n    }\r\n    .devList {\r\n        height: rem(30);\r\n        line-height: rem(30);\r\n        padding: 0 rem(10);\r\n        cursor: pointer;\r\n        &.active {\r\n            background: #0eaeff36;\r\n            border-radius: rem(4);\r\n        }\r\n    }\r\n}\r\n.contentShow {\r\n    width: calc(100% - #{rem(320)});\r\n    border-radius: rem(4);\r\n    height: 100%;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    flex-direction: column;\r\n    .topBlock {\r\n        height: rem(100);\r\n        display: flex;\r\n        justify-content: space-between;\r\n        color: white;\r\n        .separateBlock {\r\n            width: rem(580);\r\n            display: flex;\r\n            justify-content: space-between;\r\n\r\n            .listBlock {\r\n                width: rem(180);\r\n                border-radius: rem(10);\r\n                padding: rem(20);\r\n            }\r\n        }\r\n        .hopBlock {\r\n            width: calc(100% - #{rem(600)});\r\n            display: flex;\r\n            background: #171f32;\r\n            border-radius: rem(10);\r\n            border: 1px solid rgba(255, 255, 255, 0.2);\r\n            padding: rem(20) 0;\r\n            .itemBlock {\r\n                width: calc(100% / 4);\r\n                padding-left: rem(20);\r\n                box-sizing: border-box;\r\n                &:not(:last-child) {\r\n                    border-right: 1px solid rgba(255, 255, 255, 0.2);\r\n                }\r\n            }\r\n        }\r\n    }\r\n    .videoView {\r\n        height: calc(100% - #{rem(120)});\r\n        background: #171f32;\r\n        border-radius: rem(4);\r\n        overflow: hidden;\r\n    }\r\n}\r\n.bg1 {\r\n    background: linear-gradient(135deg, #488fff 0%, #65dcff 100%);\r\n}\r\n.bg2 {\r\n    background: linear-gradient(315deg, #5eedcc 0%, #24c3f1 100%);\r\n}\r\n.bg3 {\r\n    background: linear-gradient(135deg, #f0646c 0%, #f4994e 100%);\r\n}\r\n.titleText {\r\n    font-size: rem(12);\r\n    margin-top: rem(5);\r\n}\r\n.font30 {\r\n    font-size: rem(30);\r\n}\r\n</style>\r\n"]}]}