{"remainingRequest":"D:\\Hjm项目\\TransFlow\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\Hjm项目\\TransFlow\\src\\views\\bounced\\dataBoard.vue?vue&type=script&lang=js&","dependencies":[{"path":"D:\\Hjm项目\\TransFlow\\src\\views\\bounced\\dataBoard.vue","mtime":1673506578715},{"path":"D:\\Hjm项目\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\Hjm项目\\TransFlow\\node_modules\\babel-loader\\lib\\index.js","mtime":499162500000},{"path":"D:\\Hjm项目\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\Hjm项目\\TransFlow\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"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\r\nimport delayChart from '../../components/target/delayChart.vue';\r\nimport speedChart from '../../components/target/speedChart.vue';\r\nimport flowChart from '../../components/target/flowChart.vue';\r\nimport headWayChart from '../../components/target/headWayChart.vue';\r\nimport checkChart from '../../components/target/checkChart.vue';\r\nimport lineUpChart from '../../components/target/lineUpChart.vue';\r\nimport congestionChart from '../../components/target/congestionChart.vue';\r\nimport typeChart from '../../components/target/typeChart.vue'\r\nimport OD from '../../components/target/OD.vue'\r\nexport default {\r\n    components: {\r\n        delayChart,\r\n        speedChart,\r\n        flowChart,\r\n        headWayChart,\r\n        checkChart,\r\n        lineUpChart,\r\n        congestionChart,\r\n        typeChart,\r\n        OD\r\n    },\r\n    props: {\r\n        activeName: {\r\n            type: String\r\n        }\r\n    },\r\n    data() {\r\n        return {\r\n            title1: '01断面',\r\n            title2: '01区域',\r\n            dialogVisible: false,\r\n\r\n            // sectionShow: false,\r\n            // regionShow: false,\r\n\r\n            count1: false,\r\n            count2: false\r\n        };\r\n    },\r\n    created() {},\r\n    methods: {\r\n        // 区域点击事件\r\n        regionHandle() {\r\n            this.count1 = !this.count1;\r\n\r\n            if (this.count1 == false) {\r\n                this.$refs.region.style.height = 47 + 'vh';\r\n                this.$refs.box.style.height = '100vh';\r\n            } else if (this.count1 == true) {\r\n                this.$refs.region.style.height = this.$refs.regionContent.offsetHeight + 30 + 'px';\r\n                this.$refs.box.style.height = 'auto';\r\n            }\r\n        },\r\n        // 断面点击事件\r\n        sectionHandle() {\r\n            this.count2 = !this.count2;\r\n            if (this.count2 == false) {\r\n                this.$refs.section.style.height = 47 + 'vh';\r\n                this.$refs.box.style.height = '100vh';\r\n            } else if (this.count2 == true) {\r\n                this.$refs.section.style.height = this.$refs.sectionContent.offsetHeight + 30 + 'px';\r\n                this.$refs.box.style.height = 'auto';\r\n            }\r\n        }\r\n    },\r\n    mounted() {}\r\n};\r\n",{"version":3,"sources":["dataBoard.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwDA;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;;AAEA;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","file":"dataBoard.vue","sourceRoot":"src/views/bounced","sourcesContent":["<template>\r\n    <div ref=\"box\" class=\"box\" style=\"height: 100vh\">\r\n        <!-- <p class=\"title\" style=\"margin-bottom: 20px;font-size: 20px;font-weight: 400;\">数据看板</p> -->\r\n        <!-- 01断面 -->\r\n        <div class=\"dataBoard\" v-if=\"activeName == 'second'\">\r\n            <div class=\"plate1\">\r\n                <div class=\"section\" ref=\"section\">\r\n                    <div ref=\"sectionContent\">\r\n                        <div>\r\n                            <p class=\"board-title\">\r\n                                <span>{{ title1 }}</span>\r\n                            </p>\r\n                            <span class=\"downPull\" :class=\"count2==true?'upActive':'active'\"  @click=\"sectionHandle()\" ></span>\r\n                        </div>\r\n                        <typeChart :pageType=\"'断面'\" triggerType=\"触发\"/>\r\n                        <speedChart :pageType=\"'断面'\" triggerType=\"触发\" />\r\n                        <flowChart :pageType=\"'断面'\" triggerType=\"触发\" />\r\n                        <congestionChart :pageType=\"'断面'\" triggerType=\"触发\" />\r\n                        <lineUpChart :pageType=\"'断面'\" triggerType=\"周期统计\" />\r\n                        <delayChart :pageType=\"'断面'\" triggerType=\"周期统计\" />\r\n                        <checkChart :pageType=\"'断面'\" triggerType=\"周期统计\" />\r\n                    </div>\r\n                </div>\r\n\r\n                \r\n            </div>\r\n\r\n            <!-- 区域 -->\r\n            <div class=\"plate2\">\r\n                <div class=\"region\" ref=\"region\">\r\n                    <div ref=\"regionContent\">\r\n                        <div>\r\n                            <p class=\"board-title\">\r\n                                <span>{{ title2 }}</span>\r\n                            </p>\r\n                            <span class=\"downPull\" :class=\"count1==true?'upActive':'active'\" @click=\"regionHandle()\"></span>\r\n                        </div>\r\n                        <OD pageType=\"区域\" triggerType=\"触发\"/>\r\n                        <speedChart pageType=\"区域\" triggerType=\"触发\" />\r\n                        <flowChart pageType=\"区域\" triggerType=\"周期统计\" />\r\n                        \r\n                        <lineUpChart pageType=\"区域\" triggerType=\"触发\" />\r\n                        <checkChart pageType=\"区域\" triggerType=\"周期时刻\" />\r\n                        <delayChart pageType=\"区域\" triggerType=\"周期统计\" />\r\n                        <congestionChart pageType=\"区域\" triggerType=\"周期统计\" />\r\n                        <headWayChart pageType=\"区域\" triggerType=\"周期统计\" />\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <!-- 详情框 -->\r\n    </div>\r\n</template>\r\n\r\n<script>\r\nimport delayChart from '../../components/target/delayChart.vue';\r\nimport speedChart from '../../components/target/speedChart.vue';\r\nimport flowChart from '../../components/target/flowChart.vue';\r\nimport headWayChart from '../../components/target/headWayChart.vue';\r\nimport checkChart from '../../components/target/checkChart.vue';\r\nimport lineUpChart from '../../components/target/lineUpChart.vue';\r\nimport congestionChart from '../../components/target/congestionChart.vue';\r\nimport typeChart from '../../components/target/typeChart.vue'\r\nimport OD from '../../components/target/OD.vue'\r\nexport default {\r\n    components: {\r\n        delayChart,\r\n        speedChart,\r\n        flowChart,\r\n        headWayChart,\r\n        checkChart,\r\n        lineUpChart,\r\n        congestionChart,\r\n        typeChart,\r\n        OD\r\n    },\r\n    props: {\r\n        activeName: {\r\n            type: String\r\n        }\r\n    },\r\n    data() {\r\n        return {\r\n            title1: '01断面',\r\n            title2: '01区域',\r\n            dialogVisible: false,\r\n\r\n            // sectionShow: false,\r\n            // regionShow: false,\r\n\r\n            count1: false,\r\n            count2: false\r\n        };\r\n    },\r\n    created() {},\r\n    methods: {\r\n        // 区域点击事件\r\n        regionHandle() {\r\n            this.count1 = !this.count1;\r\n\r\n            if (this.count1 == false) {\r\n                this.$refs.region.style.height = 47 + 'vh';\r\n                this.$refs.box.style.height = '100vh';\r\n            } else if (this.count1 == true) {\r\n                this.$refs.region.style.height = this.$refs.regionContent.offsetHeight + 30 + 'px';\r\n                this.$refs.box.style.height = 'auto';\r\n            }\r\n        },\r\n        // 断面点击事件\r\n        sectionHandle() {\r\n            this.count2 = !this.count2;\r\n            if (this.count2 == false) {\r\n                this.$refs.section.style.height = 47 + 'vh';\r\n                this.$refs.box.style.height = '100vh';\r\n            } else if (this.count2 == true) {\r\n                this.$refs.section.style.height = this.$refs.sectionContent.offsetHeight + 30 + 'px';\r\n                this.$refs.box.style.height = 'auto';\r\n            }\r\n        }\r\n    },\r\n    mounted() {}\r\n};\r\n</script>\r\n\r\n<style scoped>\r\n* {\r\n    margin: 0;\r\n    padding: 0;\r\n}\r\n\r\n/* .box{\r\n  overflow-y: scroll;\r\n} */\r\n.dataBoard {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    /* flex-wrap: wrap; */\r\n}\r\n.plate1,\r\n.plate2 {\r\n    width: 48%;\r\n}\r\n.dataBoard .region,\r\n.dataBoard .section {\r\n    width: 100%;\r\n    border: 1px solid #e4e7ed;\r\n    box-sizing: border-box;\r\n    padding: 15px;\r\n    height: 450px;\r\n    position: relative;\r\n    transition: all 1s;\r\n    overflow: hidden;\r\n}\r\n\r\n/* .downUp{\r\n  height: 2000px !important;\r\n} */\r\n\r\n.dataBoard .board-title {\r\n    font-size: 17px;\r\n    font-weight: 400;\r\n    position: relative;\r\n    margin-bottom: 15px;\r\n    border-bottom: 1px solid #e4e7ed;\r\n}\r\n.dataBoard .board-title span {\r\n    padding: 5px 10px 5px 10px;\r\n    border-bottom: 1px solid #79b7f8;\r\n    /* display: block; */\r\n    display: inline-block;\r\n}\r\n\r\n.test-div i {\r\n    font-size: 25px;\r\n}\r\n\r\n.down {\r\n    position: absolute;\r\n    top: 0;\r\n    right: 0;\r\n}\r\n\r\n.downPull {\r\n    position: absolute;\r\n    top: 20px;\r\n    right: 17px;\r\n    cursor: pointer;\r\n    background-size: 14px 9px;\r\n    background-image: url(../../assets/img/downpull.png);\r\n    width: 14px;\r\n    height: 9px;\r\n    \r\n}\r\n\r\n.upActive {\r\n    transform: rotate(180deg);\r\n    transition: all 0.5s linear;\r\n    /* transform-origin: 7px 7px; */\r\n}\r\n.active{\r\n  transition:  all .5s linear;\r\n}\r\n</style>"]}]}