diff --git a/node_modules/.cache/babel-loader/707c80c5cb9d3ec9ed91511d9d73326f.json b/node_modules/.cache/babel-loader/707c80c5cb9d3ec9ed91511d9d73326f.json
index 9c335522..a8686ed9 100644
--- a/node_modules/.cache/babel-loader/707c80c5cb9d3ec9ed91511d9d73326f.json
+++ b/node_modules/.cache/babel-loader/707c80c5cb9d3ec9ed91511d9d73326f.json
@@ -1 +1 @@
-{"remainingRequest":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\babel-loader\\lib\\index.js!E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js??ref--0-0!E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!E:\\视频边缘计算管理平台\\TransFlow\\src\\components\\target\\typeChart.vue?vue&type=script&lang=js&","dependencies":[{"path":"E:\\视频边缘计算管理平台\\TransFlow\\src\\components\\target\\typeChart.vue","mtime":1677208773943},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\babel-loader\\lib\\index.js","mtime":499162500000},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":["import \"core-js/modules/web.dom.iterable\";\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\nimport avgChart from \"../chart/avgChart.vue\";\nimport lineChart from \"../chart/lineChart.vue\";\nimport barChart from \"../chart/barChart.vue\";\nimport tableShow from \"../chart/tableShow.vue\";\nimport pieChart from \"../chart/pieChart.vue\";\nimport detailDialog from \"../chart/detailDialog.vue\";\nimport regionTable from \"../chart/regionTable.vue\";\nexport default {\n  name: 'typeChart',\n  //类型组件\n  props: ['typeValue', 'pageType', 'triggerType', 'dataArr', 'echartArr', 'componentName', 'title', 'chartName'],\n  components: {\n    lineChart: lineChart,\n    barChart: barChart,\n    tableShow: tableShow,\n    detailDialog: detailDialog,\n    regionTable: regionTable,\n    pieChart: pieChart,\n    avgChart: avgChart\n  },\n  data: function data() {\n    return {\n      // 类型数值\n      total: 0,\n      // 速度数值\n      speed: 0,\n      // 流量数值\n      flow: 0,\n      isRefer: true,\n      valueShow: {},\n      //排队数\n      queue: ''\n    };\n  },\n  created: function created() {\n    console.log(this.title + 'TYPECHARTdataArr', this.dataArr);\n  },\n  methods: {\n    // 计算类型的数值\n    getNewQueue: function getNewQueue(dataArr) {\n      console.log(\"计算类型的数值\", dataArr); // if(dataArr[0].timeMode=='触发'){\n      //     this.queue = dataArr[0].n_queue\n      // }else if(dataArr[0].timeMode=='周期统计'){\n      //     this.queue = dataArr[0].ave_queue\n      // }else if(dataArr[0].timeMode=='周期时刻'){\n      // }\n\n      if (dataArr[0].n_queue) {\n        this.queue = dataArr[0].n_queue;\n      } else if (dataArr[0].ave_queue) {\n        this.queue = dataArr[0].ave_queue;\n      } else if (dataArr[0].timeMode == '周期时刻') {}\n    }\n  },\n  computed: {\n    // 获取类型的总数量\n    getTotal: function getTotal() {\n      return this.dataArr[0].type_data(function (pre, cur) {\n        return pre + cur;\n      }, 0);\n    }\n  },\n  mounted: function mounted() {},\n  watch: {\n    // 监听触发数据\n    dataArr: {\n      handler: function handler(newVal) {\n        console.log('dataArr', newVal);\n        this.getNewQueue(newVal);\n      },\n      immediate: true\n    },\n    typeValue: {\n      handler: function handler(newVal) {\n        var _this = this;\n\n        this.total = 0;\n\n        if (this.title == '类型') {\n          newVal.type_data.forEach(function (ele) {\n            _this.total += ele.quantity;\n          });\n        }\n      }\n    } // cycleTimeData: {\n    //     handler(newVal) {\n    //         console.log(newVal);\n    //     }\n    // }\n\n  }\n};",{"version":3,"sources":["typeChart.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6GA,OAAA,QAAA;AACA,OAAA,SAAA;AACA,OAAA,QAAA;AACA,OAAA,SAAA;AACA,OAAA,QAAA;AACA,OAAA,YAAA;AACA,OAAA,WAAA;AACA,eAAA;AACA,EAAA,IAAA,EAAA,WADA;AACA;AACA,EAAA,KAAA,EAAA,CAAA,WAAA,EAAA,UAAA,EAAA,aAAA,EAAA,SAAA,EAAA,WAAA,EAAA,eAAA,EAAA,OAAA,EAAA,WAAA,CAFA;AAGA,EAAA,UAAA,EAAA;AACA,IAAA,SAAA,EAAA,SADA;AAEA,IAAA,QAAA,EAAA,QAFA;AAGA,IAAA,SAAA,EAAA,SAHA;AAIA,IAAA,YAAA,EAAA,YAJA;AAKA,IAAA,WAAA,EAAA,WALA;AAMA,IAAA,QAAA,EAAA,QANA;AAOA,IAAA,QAAA,EAAA;AAPA,GAHA;AAYA,EAAA,IAZA,kBAYA;AACA,WAAA;AACA;AACA,MAAA,KAAA,EAAA,CAFA;AAGA;AACA,MAAA,KAAA,EAAA,CAJA;AAKA;AACA,MAAA,IAAA,EAAA,CANA;AAOA,MAAA,OAAA,EAAA,IAPA;AASA,MAAA,SAAA,EAAA,EATA;AAUA;AACA,MAAA,KAAA,EAAA;AAXA,KAAA;AAaA,GA1BA;AA2BA,EAAA,OA3BA,qBA2BA;AACA,IAAA,OAAA,CAAA,GAAA,CAAA,KAAA,KAAA,GAAA,kBAAA,EAAA,KAAA,OAAA;AACA,GA7BA;AA8BA,EAAA,OAAA,EAAA;AACA;AACA,IAAA,WAFA,uBAEA,OAFA,EAEA;AACA,MAAA,OAAA,CAAA,GAAA,CAAA,SAAA,EAAA,OAAA,EADA,CAEA;AACA;AACA;AACA;AACA;AAEA;;AACA,UAAA,OAAA,CAAA,CAAA,CAAA,CAAA,OAAA,EAAA;AACA,aAAA,KAAA,GAAA,OAAA,CAAA,CAAA,CAAA,CAAA,OAAA;AACA,OAFA,MAEA,IAAA,OAAA,CAAA,CAAA,CAAA,CAAA,SAAA,EAAA;AACA,aAAA,KAAA,GAAA,OAAA,CAAA,CAAA,CAAA,CAAA,SAAA;AACA,OAFA,MAEA,IAAA,OAAA,CAAA,CAAA,CAAA,CAAA,QAAA,IAAA,MAAA,EAAA,CAEA;AACA;AAlBA,GA9BA;AAmDA,EAAA,QAAA,EAAA;AACA;AACA,IAAA,QAFA,sBAEA;AACA,aAAA,KAAA,OAAA,CAAA,CAAA,EAAA,SAAA,CAAA,UAAA,GAAA,EAAA,GAAA,EAAA;AACA,eAAA,GAAA,GAAA,GAAA;AACA,OAFA,EAEA,CAFA,CAAA;AAGA;AANA,GAnDA;AA2DA,EAAA,OA3DA,qBA2DA,CAAA,CA3DA;AA4DA,EAAA,KAAA,EAAA;AACA;AACA,IAAA,OAAA,EAAA;AACA,MAAA,OADA,mBACA,MADA,EACA;AACA,QAAA,OAAA,CAAA,GAAA,CAAA,SAAA,EAAA,MAAA;AACA,aAAA,WAAA,CAAA,MAAA;AACA,OAJA;AAMA,MAAA,SAAA,EAAA;AANA,KAFA;AAUA,IAAA,SAAA,EAAA;AACA,MAAA,OADA,mBACA,MADA,EACA;AAAA;;AACA,aAAA,KAAA,GAAA,CAAA;;AAEA,YAAA,KAAA,KAAA,IAAA,IAAA,EAAA;AACA,UAAA,MAAA,CAAA,SAAA,CAAA,OAAA,CAAA,UAAA,GAAA,EAAA;AACA,YAAA,KAAA,CAAA,KAAA,IAAA,GAAA,CAAA,QAAA;AACA,WAFA;AAGA;AACA;AATA,KAVA,CAqBA;AACA;AACA;AACA;AACA;;AAzBA;AA5DA,CAAA","sourcesContent":["<template>\r\n    <!-- 触发类型 -->\r\n    <div class=\"setion\">\r\n        <p class=\"chartTitle\"><span class=\"titleIcon\"></span> {{ componentName }} {{ triggerType }}</p>\r\n        <!-- 触发数据数值渲染 -->\r\n        <div class=\"typeContent\">\r\n            <div v-if=\"dataArr && dataArr.length != 0 && dataArr != undefined\">\r\n                <div v-if=\"title == '类型'\" style=\"display:flex\">\r\n                    <el-card v-for=\"(n, i) in dataArr[0].type_data\" :key=\"i\"\r\n                        style=\"width: 150px; margin-bottom: 20px; text-align: center\">\r\n                        <div>\r\n                            <span style=\"font-size: 15px;\">{{ n.name }}</span><br />\r\n                            <span style=\"font-size: 30px; font-weight: bold\">{{ n.quantity }}</span>\r\n                        </div>\r\n                        <div>\r\n                            <div>\r\n                                {{ dataArr[0].time ? dataArr[0].time : '' }}\r\n                            </div>\r\n                        </div>\r\n                    </el-card>\r\n                </div>\r\n            </div>\r\n            <el-card v-show=\"echartArr.includes('数值')\" style=\"width: 150px; margin-bottom: 20px; text-align: center\">\r\n                <div v-if=\"dataArr && dataArr.length != 0 && dataArr != undefined\">\r\n                    <div v-if=\"title == '类型'\">\r\n                        <span style=\"font-size: 15px;\">类型数量总和</span><br />\r\n                        <span style=\"font-size: 30px; font-weight: bold\">\r\n                            {{ }}\r\n                        </span>\r\n                    </div>\r\n                    <div style=\"font-size: 30px; font-weight: bold\" v-if=\"title == '速度'\">\r\n                        <span style=\"font-size: 15px;\">速度</span><br />\r\n                        <!-- <span style=\"font-size: 30px; font-weight: bold\">{{ typeValue.speed }}</span> -->\r\n                        <span style=\"font-size: 30px; font-weight: bold\">{{ dataArr[0].speed }}</span>\r\n                    </div>\r\n                    <div style=\"font-size: 30px; font-weight: bold\" v-if=\"title == '流量'\">\r\n                        <span style=\"font-size: 15px;\">流量</span><br />\r\n                        <span style=\"font-size: 30px; font-weight: bold\">{{ dataArr[0].flow }}</span>\r\n                    </div>\r\n                    <div style=\"font-size: 30px; font-weight: bold\" v-if=\"title == '车头时距'\">\r\n                        <span style=\"font-size: 15px;\">车头时距</span><br />\r\n                        <span style=\"font-size: 30px; font-weight: bold\">{{ dataArr[0].headway }}</span>\r\n                    </div>\r\n                    <div style=\"font-size: 30px; font-weight: bold\" v-if=\"title == '排队数'\">\r\n                        <span style=\"font-size: 15px;\">排队数</span><br />\r\n                        <span style=\"font-size: 30px; font-weight: bold\">{{ queue }}</span>\r\n                    </div>\r\n                    <div style=\"font-size: 30px; font-weight: bold\" v-if=\"title == '检测数'\">\r\n                        <span style=\"font-size: 15px;\">检测数</span><br />\r\n                        <span style=\"font-size: 30px; font-weight: bold\">{{ dataArr[0].n_stay }}</span>\r\n                    </div>\r\n                    <div style=\"font-size: 30px; font-weight: bold\" v-if=\"title == '延误'\">\r\n                        <span style=\"font-size: 15px;\">延误</span><br />\r\n                        <span style=\"font-size: 30px; font-weight: bold\">{{ dataArr[0].ave_delay }}</span>\r\n                    </div>\r\n                    <div>\r\n                        <div>\r\n                            {{ dataArr[0].time ? dataArr[0].time : '' }}\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div v-else>\r\n                    <el-empty :image-size=\"100\"></el-empty>\r\n                </div>\r\n            </el-card>\r\n        </div>\r\n        <div v-show=\"echartArr.includes('表格')\">\r\n            <div class=\"tableTitle\" v-if=\"dataArr && dataArr.length != 0 && dataArr != undefined\">\r\n                <div>\r\n                    <span\r\n                        style=\"width: 10px;height:10px;border-radius: 50%;background-color: #3297ff;display: inline-block;vertical-align: middle;margin-right: 8px;\"></span>\r\n                    <span style=\"font-size:18px;\">{{ this.chartName + '-' + this.componentName + '-' + '表格' + '-' +\r\n                        triggerType }}</span>\r\n                </div>\r\n                <div class=\"tableTime\">\r\n                    {{ dataArr[0].time ? dataArr[0].time : '' }}\r\n                </div>\r\n            </div>\r\n            <div v-if=\"pageType == '断面'\" style=\"margin-bottom: 20px; border: 1px solid #e4e7ed\">\r\n                <tableShow :msg=\"dataArr\" :triggerType=\"triggerType\" />\r\n            </div>\r\n            <div v-if=\"pageType == '区域'\">\r\n                <regionTable :msg=\"dataArr\" :triggerType=\"triggerType\" />\r\n            </div>\r\n        </div>\r\n        <div class=\"border\" v-if=\"echartArr.includes('曲线图')\">\r\n            <detailDialog />\r\n            <lineChart :componentName=\"componentName\" :chartName=\"chartName\" :pageType=\"pageType\" :list=\"dataArr\"\r\n                :status=\"triggerType\" :title=\"title\" :typeValue=\"typeValue\" ref=\"lineChartRef\" />\r\n        </div>\r\n        <div class=\"border\" v-if=\"echartArr.includes('饼状图')\">\r\n            <detailDialog />\r\n            <pieChart :componentName=\"componentName\" :chartName=\"chartName\" :pageType=\"pageType\" :list=\"dataArr\"\r\n                :status=\"triggerType\" :title=\"title\" :typeValue=\"typeValue\" />\r\n        </div>\r\n        <div class=\"border\" v-if=\"echartArr.includes('均值图')\">\r\n            <detailDialog />\r\n            <avgChart ref=\"avgRefChart\" :componentName=\"componentName\" :chartName=\"chartName\" :pageType=\"pageType\"\r\n                :list=\"dataArr\" :status=\"triggerType\" :title=\"title\" :typeValue=\"typeValue\" />\r\n        </div>\r\n        <div class=\"border\" v-if=\"echartArr.includes('直方图')\">\r\n            <detailDialog />\r\n            <barChart :componentName=\"componentName\" :chartName=\"chartName\" :pageType=\"pageType\" :list=\"dataArr\"\r\n                :status=\"triggerType\" :title=\"title\" :typeValue=\"typeValue\" />\r\n        </div>\r\n    </div>\r\n</template>\r\n\r\n<script>\r\nimport avgChart from '../chart/avgChart.vue';\r\nimport lineChart from '../chart/lineChart.vue';\r\nimport barChart from '../chart/barChart.vue';\r\nimport tableShow from '../chart/tableShow.vue';\r\nimport pieChart from '../chart/pieChart.vue';\r\nimport detailDialog from '../chart/detailDialog.vue';\r\nimport regionTable from '../chart/regionTable.vue';\r\nexport default {\r\n    name: 'typeChart', //类型组件\r\n    props: ['typeValue', 'pageType', 'triggerType', 'dataArr', 'echartArr', 'componentName', 'title', 'chartName'],\r\n    components: {\r\n        lineChart,\r\n        barChart,\r\n        tableShow,\r\n        detailDialog,\r\n        regionTable,\r\n        pieChart,\r\n        avgChart\r\n    },\r\n    data() {\r\n        return {\r\n            // 类型数值\r\n            total: 0,\r\n            // 速度数值\r\n            speed: 0,\r\n            // 流量数值\r\n            flow: 0,\r\n            isRefer: true,\r\n\r\n            valueShow: {},\r\n            //排队数\r\n            queue:'',\r\n        };\r\n    },\r\n    created() {\r\n        console.log(this.title + 'TYPECHARTdataArr', this.dataArr)\r\n    },\r\n    methods: {\r\n        // 计算类型的数值\r\n        getNewQueue(dataArr){\r\n            console.log(\"计算类型的数值\",dataArr)\r\n            // if(dataArr[0].timeMode=='触发'){\r\n            //     this.queue = dataArr[0].n_queue\r\n            // }else if(dataArr[0].timeMode=='周期统计'){\r\n            //     this.queue = dataArr[0].ave_queue\r\n            // }else if(dataArr[0].timeMode=='周期时刻'){\r\n\r\n            // }\r\n            if(dataArr[0].n_queue){\r\n                this.queue = dataArr[0].n_queue\r\n            }else if(dataArr[0].ave_queue){\r\n                this.queue = dataArr[0].ave_queue\r\n            }else if(dataArr[0].timeMode=='周期时刻'){\r\n\r\n            }\r\n        }\r\n    },\r\n\r\n    computed: {\r\n        // 获取类型的总数量\r\n        getTotal() {\r\n            return this.dataArr[0].type_data((pre, cur) => {\r\n                return pre + cur\r\n            }, 0)\r\n        }\r\n    },\r\n    mounted() { },\r\n    watch: {\r\n        // 监听触发数据\r\n        dataArr: {\r\n            handler(newVal) {\r\n                console.log('dataArr', newVal);\r\n                this.getNewQueue(newVal)\r\n            },\r\n\r\n            immediate: true\r\n        },\r\n        typeValue: {\r\n            handler(newVal) {\r\n                this.total = 0;\r\n                \r\n                if (this.title == '类型') {\r\n                    newVal.type_data.forEach(ele => {\r\n                        this.total += ele.quantity;\r\n                    });\r\n                }\r\n            }\r\n        }\r\n        // cycleTimeData: {\r\n        //     handler(newVal) {\r\n        //         console.log(newVal);\r\n        //     }\r\n        // }\r\n    }\r\n};\r\n</script>\r\n<style scoped>\r\n.tableTitle {\r\n    background: #f7f8fa;\r\n    margin-bottom: 5px;\r\n    padding: 8px;\r\n}\r\n\r\n.typeContent {\r\n    box-sizing: border-box;\r\n}\r\n\r\n.border {\r\n    width: 100%;\r\n    margin-bottom: 20px;\r\n    position: relative;\r\n}\r\n</style>\r\n"],"sourceRoot":"src/components/target"}]}
\ No newline at end of file
+{"remainingRequest":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\babel-loader\\lib\\index.js!E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js??ref--0-0!E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!E:\\视频边缘计算管理平台\\TransFlow\\src\\components\\target\\typeChart.vue?vue&type=script&lang=js&","dependencies":[{"path":"E:\\视频边缘计算管理平台\\TransFlow\\src\\components\\target\\typeChart.vue","mtime":1677221940936},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\babel-loader\\lib\\index.js","mtime":499162500000},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"E:\\视频边缘计算管理平台\\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//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\nimport avgChart from \"../chart/avgChart.vue\";\nimport lineChart from \"../chart/lineChart.vue\";\nimport barChart from \"../chart/barChart.vue\";\nimport tableShow from \"../chart/tableShow.vue\";\nimport pieChart from \"../chart/pieChart.vue\";\nimport detailDialog from \"../chart/detailDialog.vue\";\nimport regionTable from \"../chart/regionTable.vue\";\nexport default {\n  name: 'typeChart',\n  //类型组件\n  props: ['typeValue', 'pageType', 'triggerType', 'dataArr', 'echartArr', 'componentName', 'title', 'chartName'],\n  components: {\n    lineChart: lineChart,\n    barChart: barChart,\n    tableShow: tableShow,\n    detailDialog: detailDialog,\n    regionTable: regionTable,\n    pieChart: pieChart,\n    avgChart: avgChart\n  },\n  data: function data() {\n    return {\n      // 类型数值\n      total: 0,\n      // 速度数值\n      speed: 0,\n      // 流量数值\n      flow: 0,\n      isRefer: true,\n      valueShow: {},\n      //排队数\n      queue: ''\n    };\n  },\n  created: function created() {// console.log(this.title + 'TYPECHARTdataArr', this.dataArr)\n  },\n  methods: {\n    getTotal: function getTotal(dataArr) {\n      console.log(dataArr[0], 150);\n      return dataArr[0].type_data.reduce(function (prev, cur) {\n        return cur.quantity + prev;\n      }, 0); //   return dataArr[0].type_data((pre, cur) => {\n      //     return pre + cur\n      // }, 0)  \n    },\n    // 计算类型的数值\n    getNewQueue: function getNewQueue(dataArr) {\n      // console.log(\"计算类型的数值\",dataArr)\n      // if(dataArr[0].timeMode=='触发'){\n      //     this.queue = dataArr[0].n_queue\n      // }else if(dataArr[0].timeMode=='周期统计'){\n      //     this.queue = dataArr[0].ave_queue\n      // }else if(dataArr[0].timeMode=='周期时刻'){\n      // }\n      if (dataArr[0].n_queue) {\n        this.queue = dataArr[0].n_queue;\n      } else if (dataArr[0].ave_queue) {\n        this.queue = dataArr[0].ave_queue;\n      } else if (dataArr[0].timeMode == '周期时刻') {}\n    }\n  },\n  computed: {// 获取类型的总数量\n  },\n  mounted: function mounted() {},\n  watch: {\n    // 监听触发数据\n    dataArr: {\n      handler: function handler(newVal) {\n        // console.log('dataArr', newVal);\n        this.getNewQueue(newVal);\n      },\n      immediate: true\n    } // cycleTimeData: {\n    //     handler(newVal) {\n    //         console.log(newVal);\n    //     }\n    // }\n\n  }\n};",{"version":3,"sources":["typeChart.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8GA,OAAA,QAAA;AACA,OAAA,SAAA;AACA,OAAA,QAAA;AACA,OAAA,SAAA;AACA,OAAA,QAAA;AACA,OAAA,YAAA;AACA,OAAA,WAAA;AACA,eAAA;AACA,EAAA,IAAA,EAAA,WADA;AACA;AACA,EAAA,KAAA,EAAA,CAAA,WAAA,EAAA,UAAA,EAAA,aAAA,EAAA,SAAA,EAAA,WAAA,EAAA,eAAA,EAAA,OAAA,EAAA,WAAA,CAFA;AAGA,EAAA,UAAA,EAAA;AACA,IAAA,SAAA,EAAA,SADA;AAEA,IAAA,QAAA,EAAA,QAFA;AAGA,IAAA,SAAA,EAAA,SAHA;AAIA,IAAA,YAAA,EAAA,YAJA;AAKA,IAAA,WAAA,EAAA,WALA;AAMA,IAAA,QAAA,EAAA,QANA;AAOA,IAAA,QAAA,EAAA;AAPA,GAHA;AAYA,EAAA,IAZA,kBAYA;AACA,WAAA;AACA;AACA,MAAA,KAAA,EAAA,CAFA;AAGA;AACA,MAAA,KAAA,EAAA,CAJA;AAKA;AACA,MAAA,IAAA,EAAA,CANA;AAOA,MAAA,OAAA,EAAA,IAPA;AASA,MAAA,SAAA,EAAA,EATA;AAUA;AACA,MAAA,KAAA,EAAA;AAXA,KAAA;AAaA,GA1BA;AA2BA,EAAA,OA3BA,qBA2BA,CACA;AACA,GA7BA;AA8BA,EAAA,OAAA,EAAA;AACA,IAAA,QADA,oBACA,OADA,EACA;AACA,MAAA,OAAA,CAAA,GAAA,CAAA,OAAA,CAAA,CAAA,CAAA,EAAA,GAAA;AACA,aAAA,OAAA,CAAA,CAAA,CAAA,CAAA,SAAA,CAAA,MAAA,CAAA,UAAA,IAAA,EAAA,GAAA,EAAA;AACA,eAAA,GAAA,CAAA,QAAA,GAAA,IAAA;AACA,OAFA,EAEA,CAFA,CAAA,CAFA,CAMA;AACA;AACA;AAEA,KAXA;AAYA;AACA,IAAA,WAbA,uBAaA,OAbA,EAaA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA,UAAA,OAAA,CAAA,CAAA,CAAA,CAAA,OAAA,EAAA;AACA,aAAA,KAAA,GAAA,OAAA,CAAA,CAAA,CAAA,CAAA,OAAA;AACA,OAFA,MAEA,IAAA,OAAA,CAAA,CAAA,CAAA,CAAA,SAAA,EAAA;AACA,aAAA,KAAA,GAAA,OAAA,CAAA,CAAA,CAAA,CAAA,SAAA;AACA,OAFA,MAEA,IAAA,OAAA,CAAA,CAAA,CAAA,CAAA,QAAA,IAAA,MAAA,EAAA,CAEA;AACA;AA7BA,GA9BA;AA8DA,EAAA,QAAA,EAAA,CACA;AADA,GA9DA;AAkEA,EAAA,OAlEA,qBAkEA,CAAA,CAlEA;AAmEA,EAAA,KAAA,EAAA;AACA;AACA,IAAA,OAAA,EAAA;AACA,MAAA,OADA,mBACA,MADA,EACA;AACA;AACA,aAAA,WAAA,CAAA,MAAA;AACA,OAJA;AAMA,MAAA,SAAA,EAAA;AANA,KAFA,CAUA;AACA;AACA;AACA;AACA;;AAdA;AAnEA,CAAA","sourcesContent":["<template>\r\n    <!-- 触发类型 -->\r\n    <div class=\"setion\">\r\n        <p class=\"chartTitle\"><span class=\"titleIcon\"></span> {{ componentName }} {{ triggerType }}</p>\r\n        <!-- 触发数据数值渲染 -->\r\n        <div class=\"typeContent\">\r\n            <div v-if=\"dataArr && dataArr.length != 0 && dataArr != undefined\">\r\n                <div v-if=\"title == '类型'\" style=\"display:flex\">\r\n                    <el-card v-for=\"(n, i) in dataArr[0].type_data\" :key=\"i\"\r\n                        style=\"width: 150px; margin-bottom: 20px; text-align: center\">\r\n                        <div>\r\n                            <span style=\"font-size: 15px;\">{{ n.name }}</span><br />\r\n                            <span style=\"font-size: 30px; font-weight: bold\">{{ n.quantity }}</span>\r\n                        </div>\r\n                        <div>\r\n                            <div>\r\n                                {{ dataArr[0].time ? dataArr[0].time : '' }}\r\n                            </div>\r\n\r\n                        </div>\r\n                    </el-card>\r\n                </div>\r\n            </div>\r\n            <el-card v-show=\"echartArr.includes('数值')\" style=\"width: 150px; margin-bottom: 20px; text-align: center\">\r\n                <div v-if=\"dataArr && dataArr.length != 0 && dataArr != undefined\">\r\n                    <div v-if=\"title == '类型'\">\r\n                        <span style=\"font-size: 15px;\">类型数量总和</span><br />\r\n                        <span style=\"font-size: 30px; font-weight: bold\">\r\n                            {{ getTotal(dataArr) }}\r\n                        </span>\r\n                    </div>\r\n                    <div style=\"font-size: 30px; font-weight: bold\" v-if=\"title == '速度'\">\r\n                        <span style=\"font-size: 15px;\">速度</span><br />\r\n                        <!-- <span style=\"font-size: 30px; font-weight: bold\">{{ typeValue.speed }}</span> -->\r\n                        <span style=\"font-size: 30px; font-weight: bold\">{{ dataArr[0].speed }}</span>\r\n                    </div>\r\n                    <div style=\"font-size: 30px; font-weight: bold\" v-if=\"title == '流量'\">\r\n                        <span style=\"font-size: 15px;\">流量</span><br />\r\n                        <span style=\"font-size: 30px; font-weight: bold\">{{ dataArr[0].flow }}</span>\r\n                    </div>\r\n                    <div style=\"font-size: 30px; font-weight: bold\" v-if=\"title == '车头时距'\">\r\n                        <span style=\"font-size: 15px;\">车头时距</span><br />\r\n                        <span style=\"font-size: 30px; font-weight: bold\">{{ dataArr[0].headway }}</span>\r\n                    </div>\r\n                    <div style=\"font-size: 30px; font-weight: bold\" v-if=\"title == '排队数'\">\r\n                        <span style=\"font-size: 15px;\">排队数</span><br />\r\n                        <span style=\"font-size: 30px; font-weight: bold\">{{ queue }}</span>\r\n                    </div>\r\n                    <div style=\"font-size: 30px; font-weight: bold\" v-if=\"title == '检测数'\">\r\n                        <span style=\"font-size: 15px;\">检测数</span><br />\r\n                        <span style=\"font-size: 30px; font-weight: bold\">{{ dataArr[0].n_stay }}</span>\r\n                    </div>\r\n                    <div style=\"font-size: 30px; font-weight: bold\" v-if=\"title == '延误'\">\r\n                        <span style=\"font-size: 15px;\">延误</span><br />\r\n                        <span style=\"font-size: 30px; font-weight: bold\">{{ dataArr[0].ave_delay }}</span>\r\n                    </div>\r\n                    <div>\r\n                        <div>\r\n                            {{ dataArr[0].time ? dataArr[0].time : '' }}\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div v-else>\r\n                    <el-empty :image-size=\"100\"></el-empty>\r\n                </div>\r\n            </el-card>\r\n        </div>\r\n        <div v-show=\"echartArr.includes('表格')\">\r\n            <div class=\"tableTitle\" v-if=\"dataArr && dataArr.length != 0 && dataArr != undefined\">\r\n                <div>\r\n                    <span\r\n                        style=\"width: 10px;height:10px;border-radius: 50%;background-color: #3297ff;display: inline-block;vertical-align: middle;margin-right: 8px;\"></span>\r\n                    <span style=\"font-size:18px;\">{{ this.chartName + '-' + this.componentName + '-' + '表格' + '-' +\r\n                        triggerType }}</span>\r\n                </div>\r\n                <div class=\"tableTime\">\r\n                    {{ dataArr[0].time ? dataArr[0].time : '' }}\r\n                </div>\r\n            </div>\r\n            <div v-if=\"pageType == '断面'\" style=\"margin-bottom: 20px; border: 1px solid #e4e7ed\">\r\n                <tableShow :msg=\"dataArr\" :triggerType=\"triggerType\" />\r\n            </div>\r\n            <div v-if=\"pageType == '区域'\">\r\n                <regionTable :msg=\"dataArr\" :triggerType=\"triggerType\" />\r\n            </div>\r\n        </div>\r\n        <div class=\"border\" v-if=\"echartArr.includes('曲线图')\">\r\n            <detailDialog />\r\n            <lineChart :componentName=\"componentName\" :chartName=\"chartName\" :pageType=\"pageType\" :list=\"dataArr\"\r\n                :status=\"triggerType\" :title=\"title\" :typeValue=\"typeValue\" ref=\"lineChartRef\" />\r\n        </div>\r\n        <div class=\"border\" v-if=\"echartArr.includes('饼状图')\">\r\n            <detailDialog />\r\n            <pieChart :componentName=\"componentName\" :chartName=\"chartName\" :pageType=\"pageType\" :list=\"dataArr\"\r\n                :status=\"triggerType\" :title=\"title\" :typeValue=\"typeValue\" />\r\n        </div>\r\n        <div class=\"border\" v-if=\"echartArr.includes('均值图')\">\r\n            <detailDialog />\r\n            <avgChart ref=\"avgRefChart\" :componentName=\"componentName\" :chartName=\"chartName\" :pageType=\"pageType\"\r\n                :list=\"dataArr\" :status=\"triggerType\" :title=\"title\" :typeValue=\"typeValue\" />\r\n        </div>\r\n        <div class=\"border\" v-if=\"echartArr.includes('直方图')\">\r\n            <detailDialog />\r\n            <barChart :componentName=\"componentName\" :chartName=\"chartName\" :pageType=\"pageType\" :list=\"dataArr\"\r\n                :status=\"triggerType\" :title=\"title\" :typeValue=\"typeValue\" ref=\"barChartRef\"/>\r\n        </div>\r\n    </div>\r\n</template>\r\n\r\n<script>\r\nimport avgChart from '../chart/avgChart.vue';\r\nimport lineChart from '../chart/lineChart.vue';\r\nimport barChart from '../chart/barChart.vue';\r\nimport tableShow from '../chart/tableShow.vue';\r\nimport pieChart from '../chart/pieChart.vue';\r\nimport detailDialog from '../chart/detailDialog.vue';\r\nimport regionTable from '../chart/regionTable.vue';\r\nexport default {\r\n    name: 'typeChart', //类型组件\r\n    props: ['typeValue', 'pageType', 'triggerType', 'dataArr', 'echartArr', 'componentName', 'title', 'chartName'],\r\n    components: {\r\n        lineChart,\r\n        barChart,\r\n        tableShow,\r\n        detailDialog,\r\n        regionTable,\r\n        pieChart,\r\n        avgChart\r\n    },\r\n    data() {\r\n        return {\r\n            // 类型数值\r\n            total: 0,\r\n            // 速度数值\r\n            speed: 0,\r\n            // 流量数值\r\n            flow: 0,\r\n            isRefer: true,\r\n\r\n            valueShow: {},\r\n            //排队数\r\n            queue: '',\r\n        };\r\n    },\r\n    created() {\r\n        // console.log(this.title + 'TYPECHARTdataArr', this.dataArr)\r\n    },\r\n    methods: {\r\n        getTotal(dataArr) {\r\n            console.log(dataArr[0], 150);\r\n            return dataArr[0].type_data.reduce(function(prev, cur) {\r\n                return cur.quantity + prev\r\n            }, 0)\r\n          \r\n            //   return dataArr[0].type_data((pre, cur) => {\r\n            //     return pre + cur\r\n            // }, 0)  \r\n\r\n        },\r\n        // 计算类型的数值\r\n        getNewQueue(dataArr) {\r\n            // console.log(\"计算类型的数值\",dataArr)\r\n            // if(dataArr[0].timeMode=='触发'){\r\n            //     this.queue = dataArr[0].n_queue\r\n            // }else if(dataArr[0].timeMode=='周期统计'){\r\n            //     this.queue = dataArr[0].ave_queue\r\n            // }else if(dataArr[0].timeMode=='周期时刻'){\r\n\r\n            // }\r\n            if (dataArr[0].n_queue) {\r\n                this.queue = dataArr[0].n_queue\r\n            } else if (dataArr[0].ave_queue) {\r\n                this.queue = dataArr[0].ave_queue\r\n            } else if (dataArr[0].timeMode == '周期时刻') {\r\n\r\n            }\r\n        }\r\n    },\r\n\r\n    computed: {\r\n        // 获取类型的总数量\r\n\r\n    },\r\n    mounted() { },\r\n    watch: {\r\n        // 监听触发数据\r\n        dataArr: {\r\n            handler(newVal) {\r\n                // console.log('dataArr', newVal);\r\n                this.getNewQueue(newVal)\r\n            },\r\n\r\n            immediate: true\r\n        },\r\n        // cycleTimeData: {\r\n        //     handler(newVal) {\r\n        //         console.log(newVal);\r\n        //     }\r\n        // }\r\n    }\r\n};\r\n</script>\r\n<style scoped>\r\n.tableTitle {\r\n    background: #f7f8fa;\r\n    margin-bottom: 5px;\r\n    padding: 8px;\r\n}\r\n\r\n.typeContent {\r\n    box-sizing: border-box;\r\n}\r\n\r\n.border {\r\n    width: 100%;\r\n    margin-bottom: 20px;\r\n    position: relative;\r\n}\r\n</style>\r\n"],"sourceRoot":"src/components/target"}]}
\ No newline at end of file
diff --git a/node_modules/.cache/babel-loader/c90a7db1294db9fc3e3360c0ce4029f4.json b/node_modules/.cache/babel-loader/c90a7db1294db9fc3e3360c0ce4029f4.json
index bd08cb5b..cb52fd49 100644
--- a/node_modules/.cache/babel-loader/c90a7db1294db9fc3e3360c0ce4029f4.json
+++ b/node_modules/.cache/babel-loader/c90a7db1294db9fc3e3360c0ce4029f4.json
@@ -1 +1 @@
-{"remainingRequest":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\babel-loader\\lib\\index.js!E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js??ref--0-0!E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!E:\\视频边缘计算管理平台\\TransFlow\\src\\views\\bounced\\dataBoard.vue?vue&type=script&lang=js&","dependencies":[{"path":"E:\\视频边缘计算管理平台\\TransFlow\\src\\views\\bounced\\dataBoard.vue","mtime":1677208811972},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\babel-loader\\lib\\index.js","mtime":499162500000},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":["import \"core-js/modules/es6.regexp.split\";\nimport \"core-js/modules/es6.set\";\nimport \"core-js/modules/es6.string.iterator\";\nimport \"core-js/modules/es6.array.from\";\nimport \"core-js/modules/web.dom.iterable\";\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\nimport typeChart from \"../../components/target/typeChart.vue\";\nimport OD from \"../../components/target/OD.vue\"; // import {mapMutation} from 'vuex'\n\nimport { getComponentSection } from \"../../api/index\";\nexport default {\n  components: {\n    typeChart: typeChart,\n    OD: OD\n  },\n  props: {\n    activeName: {\n      type: String\n    },\n    triggerData: {\n      type: Array,\n      default: function _default() {\n        return [];\n      }\n    },\n    // 触发数据\n    triggerListData: {\n      type: Array,\n      default: function _default() {\n        return [];\n      }\n    },\n    // 周期时刻数据\n    cycleTimeData: {\n      type: Array,\n      default: function _default() {\n        return [];\n      }\n    },\n    //周期统计\n    cycleStatistics: {\n      type: Array,\n      default: function _default() {\n        return [];\n      }\n    }\n  },\n  data: function data() {\n    return {\n      acticveName: [],\n      title1: '01断面',\n      title2: '01区域',\n      dialogVisible: false,\n      idVal: '',\n      //组件数组\n      componentList: [],\n      // 触发数据数组\n      triggerList: [],\n      sectionData: [],\n      // 单个区域或者断面的表格触发数据\n      tableList: [],\n      // 路线数据\n      headWay: [],\n      tripData: [],\n      sectionArr: [],\n      //触发的类型数值看板显示\n      typeTimeMode: {},\n      // 周期时刻的数值看板展示\n      typeCycleTimeData: {},\n      typeCycleStatistics: {},\n      // 各个组件分类\n      classify: []\n    };\n  },\n  // beforeCeated(){\n  // },\n  created: function created() {// this.getNew()\n  },\n  methods: {\n    getNew: function getNew() {\n      var _this2 = this;\n\n      // this.idVal = ;\n      getComponentSection({\n        VideoId: this.$route.query.id\n      }).then(function (res) {\n        if (res.data.code == 200) {\n          console.log(res.data.data, '组件的数据');\n          _this2.componentList = res.data.data;\n\n          _this2.siftData();\n        }\n      });\n    },\n    siftData: function siftData() {\n      var _this3 = this;\n\n      this.sectionArr = [];\n      this.sectionData = [];\n      this.componentList.forEach(function (val) {\n        _this3.sectionArr.push(val.combinationName);\n\n        _this3.sectionArr = Array.from(new Set(_this3.sectionArr));\n      });\n      this.sectionData = this.sectionArr.map(function (item) {\n        item = {\n          title: item,\n          children: []\n        };\n        _this3.acticveName = [];\n\n        _this3.componentList.forEach(function (val) {\n          if (item.title == val.combinationName) {\n            _this3.classify.push(val);\n\n            item.children.push(val);\n          }\n\n          _this3.acticveName.push(val.analogAreaComponentId);\n        });\n\n        return item;\n      });\n    },\n    // 组件图标点击下拉事件\n    sectionHandle: function sectionHandle(i) {\n      var sections = document.querySelectorAll('.section');\n      var sectionBox = document.querySelectorAll('.sectionBox');\n      var downPulls1 = document.querySelectorAll('.downPull1'); // 断面的小图标\n\n      downPulls1[i].dataset.num++;\n\n      if (downPulls1[i].dataset.num % 2 == 0) {\n        downPulls1[i].style.cssText = 'transform: rotate(180deg);transition: all 0.5s linear;'; // sections[i].style.height = 'auto';\n\n        if (sectionBox[i] != undefined) {// sectionBox[i].style.height = 'auto';\n        }\n      } else {\n        downPulls1[i].style.cssText = 'transition: all 0.5s linear;'; // sections[i].style.height = '500px';\n\n        if (sectionBox[i] != undefined) {}\n      }\n    },\n    channge: function channge(oldVal, newVal) {\n      console.log(\"old\", oldVal);\n      console.log(\"newVal\", newVal);\n\n      if (oldVal == 'second') {\n        this.sectionArr = [];\n        this.sectionData = [];\n        this.getNew();\n      } else if (newVal == 'second') {\n        this.sectionArr = [];\n        this.sectionData = [];\n        this.getNew();\n      }\n    } // 触发数据的类型数值\n\n  },\n  mounted: function mounted() {},\n  watch: {\n    // acticveName: {\n    //     handler(newVal) {\n    //         if (newVal != 'second') {\n    //             // 组件数据赋空\n    //             this.classify = []\n    //         }\n    //     }\n    // },\n    // 触发的原始数据\n    triggerData: {\n      handler: function handler(newVal, oldVal) {},\n      immediate: true\n    },\n    // activeName:'channge',\n    // 处理过的触发数据\n    triggerListData: {\n      handler: function handler(newVal) {\n        this.triggerList = newVal; // 触发数据\n\n        console.log(newVal, 'triggerlistData');\n\n        var _this = this;\n\n        if (newVal.length != 0 && _this.sectionData) {\n          _this.classify.forEach(function (ele, index) {\n            if (ele.trigger == undefined && ele.timeMode == '触发') {\n              ele.trigger = [];\n            }\n\n            newVal.forEach(function (item) {\n              if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '触发') {\n                if (ele.trigger.length == 10) {\n                  ele.trigger.splice(newVal.length - 1, 1);\n                } else {\n                  item.time = item.time.split('.')[0]; // 该时间的触发数据\n\n                  if (item.type_data != null) {\n                    _this.typeTimeMode = item;\n                  }\n\n                  ele.trigger.unshift(item);\n\n                  _this.$nextTick(function () {\n                    console.log(index, '满足条件的索引');\n                    console.log(_this.$refs.typeChartRef[index], index, '...........');\n\n                    if (_this.$refs.typeChartRef[index] != undefined) {\n                      console.log(_this.$refs.typeChartRef[index].dataArr, '数据');\n\n                      _this.$refs.typeChartRef[index].$refs.lineChartRef.drawLine(ele.trigger, ele.componentName.split('_')[0]);\n                    }\n                  });\n                }\n              }\n            });\n          });\n        }\n      },\n      immediate: true\n    },\n    // 周期时刻的数据\n    cycleTimeData: {\n      handler: function handler(newVal) {\n        var _this4 = this;\n\n        // 监听到打印周期时刻数据\n        if (newVal.length != 0 && this.sectionData) {\n          this.componentList.forEach(function (ele) {\n            if (ele.cycleTimeData == undefined && ele.timeMode == '周期时刻') {\n              ele.cycleTimeData = [];\n            }\n\n            newVal.forEach(function (item) {\n              if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '周期时刻') {\n                if (ele.cycleTimeData.length == 10) {\n                  ele.cycleTimeData.splice(newVal.length - 1, 1);\n                } else {\n                  item.time = item.time.split('.')[0];\n\n                  if (item.type_data != null) {\n                    // 周期时刻的类型数据\n                    _this4.typeCycleTimeData = item;\n                  }\n\n                  ele.cycleTimeData.unshift(item);\n                }\n              }\n            });\n          });\n        }\n      },\n      immediate: true\n    },\n    cycleStatistics: {\n      handler: function handler(newVal) {\n        var _this5 = this;\n\n        if (newVal.length != 0 && this.sectionData) {\n          this.componentList.forEach(function (ele) {\n            if (ele.cycleStatistics == undefined && ele.timeMode == '周期统计') {\n              ele.cycleStatistics = [];\n            }\n\n            newVal.forEach(function (item) {\n              if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '周期统计') {\n                if (ele.cycleStatistics.length == 10) {\n                  ele.cycleStatistics.splice(newVal.length - 1, 1);\n                } else {\n                  item.time = item.time.split('.')[0];\n\n                  if (item.type_data != null) {\n                    //周期时刻的类型数据\n                    _this5.typeCycleStatistics = item;\n                  }\n\n                  ele.cycleStatistics.unshift(item);\n                }\n              }\n            });\n          });\n        }\n      }\n    } // activeName: {\n    //     handler(newVal) {\n    //         if (newVal == \"second\") {\n    //             getComponentSection({ VideoId: this.$route.query.id }).then(res => {\n    //                 if (res.data.code == 200) {\n    //                     this.componentList = res.data.data;\n    //                     this.siftData();\n    //                 } else if (res.data.code == 404) {\n    //                 }\n    //             });\n    //         }\n    //     },\n    //     immediate: true\n    // }\n\n  }\n};",{"version":3,"sources":["dataBoard.vue"],"names":[],"mappings":"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","sourcesContent":["<template>\r\n    <div ref=\"box\" class=\"box\">\r\n        <el-empty v-show=\"sectionData.length == 0\" :image-size=\"400\"></el-empty>\r\n        <!-- <p class=\"title\" style=\"margin-bottom: 20px;font-size: 20px;font-weight: 400;\">数据看板</p> -->\r\n        <el-scrollbar class=\"scrollbar\">\r\n            <div class=\"dataBoard\" ref=\"dataBoard\" v-if=\"activeName == 'second'\">\r\n                <!-- 断面 -->\r\n                <div class=\"plate1\" ref=\"plate1\">\r\n                    <div :class=\"sectionData.length <= 2 ? 'sectionBox' : 'section'\" ref=\"section\"\r\n                        v-for=\"(s, i) in sectionData\" :key=\"s.analogAreaComponentId\">\r\n                        <template>\r\n                            <div ref=\"sectionContent\">\r\n                                <div>\r\n                                    <p class=\"board-title\">\r\n                                        <span>{{ s.title }}</span>\r\n                                    </p>\r\n                                    <!-- <span class=\"downPull1\" data-num=\"1\" @click=\"sectionHandle(i)\"></span> -->\r\n                                </div>\r\n                                <el-tabs>\r\n                                    <el-collapse v-model=\"acticveName\">\r\n                                        <div v-for=\"o in s.children\" :key=\"o.analogAreaComponentId\">\r\n                                            <el-collapse-item :title=\"o.componentName\" :name=\"o.analogAreaComponentId\">\r\n                                                <OD v-if=\"o.componentName.includes('OD')\" :pageType=\"o.graphicType\"\r\n                                                    triggerType=\"触发\" :componentName=\"o.componentName\"\r\n                                                    :echartArr=\"o.presentationForm\" :dataArr=\"o.trigger\"\r\n                                                    :title=\"o.componentName.split('_')[0]\" :chartName=\"o.combinationName\" />\r\n                                                <!--触发的组件  -->\r\n                                                <typeChart ref=\"typeChartRef\" v-if=\"o.timeMode === '触发'\"\r\n                                                    :pageType=\"o.graphicType\" :triggerType=\"o.timeMode\"\r\n                                                    :componentName=\"o.componentName\" :dataArr=\"o.trigger\"\r\n                                                    :echartArr=\"o.presentationForm\" :title=\"o.componentName.split('_')[0]\"\r\n                                                    :chartName=\"o.combinationName\" :typeValue=\"typeTimeMode\" />\r\n                                                <typeChart v-if=\"o.timeMode === '周期时刻'\" :pageType=\"o.graphicType\"\r\n                                                    :triggerType=\"o.timeMode\" :componentName=\"o.componentName\"\r\n                                                    :dataArr=\"o.cycleTimeData\" :echartArr=\"o.presentationForm\"\r\n                                                    :title=\"o.componentName.split('_')[0]\" :chartName=\"o.combinationName\"\r\n                                                    :typeValue=\"typeCycleTimeData\" />\r\n                                                <!-- 周期统计的组件 -->\r\n                                                <typeChart style=\"width: 100%;\" v-if=\"o.timeMode === '周期统计'\"\r\n                                                    :pageType=\"o.graphicType\" :triggerType=\"o.timeMode\"\r\n                                                    :componentName=\"o.componentName\" :dataArr=\"o.cycleStatistics\"\r\n                                                    :echartArr=\"o.presentationForm\" :title=\"o.componentName.split('_')[0]\"\r\n                                                    :chartName=\"o.combinationName\" :typeValue=\"typeCycleStatistics\" />\r\n                                            </el-collapse-item>\r\n                                        </div>\r\n                                    </el-collapse>\r\n                                </el-tabs>\r\n                            </div>\r\n                        </template>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </el-scrollbar>\r\n        <!-- 详情框 -->\r\n    </div>\r\n</template>\r\n<script>\r\nimport typeChart from '../../components/target/typeChart.vue';\r\nimport OD from '../../components/target/OD.vue';\r\n// import {mapMutation} from 'vuex'\r\nimport { getComponentSection } from '../../api/index';\r\nexport default {\r\n    components: {\r\n        typeChart,\r\n        OD\r\n    },\r\n    props: {\r\n        activeName: {\r\n            type: String\r\n        },\r\n        triggerData: {\r\n            type: Array,\r\n            default() {\r\n                return [];\r\n            }\r\n        },\r\n        // 触发数据\r\n        triggerListData: {\r\n            type: Array,\r\n            default() {\r\n                return [];\r\n            }\r\n        },\r\n        // 周期时刻数据\r\n        cycleTimeData: {\r\n            type: Array,\r\n            default() {\r\n                return [];\r\n            }\r\n        },\r\n        //周期统计\r\n        cycleStatistics: {\r\n            type: Array,\r\n            default() {\r\n                return [];\r\n            }\r\n        }\r\n    },\r\n    data() {\r\n        return {\r\n            acticveName: [],\r\n            title1: '01断面',\r\n            title2: '01区域',\r\n            dialogVisible: false,\r\n            \r\n\r\n            idVal: '',\r\n            //组件数组\r\n            componentList: [],\r\n            // 触发数据数组\r\n            triggerList: [],\r\n\r\n            sectionData: [],\r\n\r\n            // 单个区域或者断面的表格触发数据\r\n            tableList: [],\r\n\r\n            // 路线数据\r\n            headWay: [],\r\n\r\n            tripData: [],\r\n\r\n            sectionArr: [],\r\n\r\n            //触发的类型数值看板显示\r\n            typeTimeMode: {},\r\n            // 周期时刻的数值看板展示\r\n            typeCycleTimeData: {},\r\n            typeCycleStatistics: {},\r\n\r\n            // 各个组件分类\r\n            classify: []\r\n        };\r\n    },\r\n    // beforeCeated(){\r\n\r\n    // },\r\n    created() {\r\n        // this.getNew()\r\n    },\r\n    methods: {\r\n        getNew() {\r\n            // this.idVal = ;\r\n            getComponentSection({ VideoId: this.$route.query.id }).then(res => {\r\n                if (res.data.code == 200) {\r\n                    console.log(res.data.data, '组件的数据');\r\n                    this.componentList = res.data.data;\r\n                    this.siftData();\r\n                }\r\n            });\r\n        },\r\n        siftData() {\r\n            this.sectionArr=[]\r\n            this.sectionData=[]\r\n            this.componentList.forEach(val => {\r\n                this.sectionArr.push(val.combinationName);\r\n                this.sectionArr = Array.from(new Set(this.sectionArr));\r\n            });\r\n            this.sectionData = this.sectionArr.map(item => {\r\n                item = { title: item, children: [] };\r\n                this.acticveName = [];\r\n                this.componentList.forEach(val => {\r\n                    if (item.title == val.combinationName) {\r\n                        this.classify.push(val)\r\n                        item.children.push(val);\r\n                    }\r\n                    this.acticveName.push(val.analogAreaComponentId);\r\n                });\r\n                return item;\r\n            });\r\n\r\n        },\r\n        // 组件图标点击下拉事件\r\n        sectionHandle(i) {\r\n            let sections = document.querySelectorAll('.section');\r\n            let sectionBox = document.querySelectorAll('.sectionBox');\r\n            let downPulls1 = document.querySelectorAll('.downPull1');\r\n            // 断面的小图标\r\n            downPulls1[i].dataset.num++;\r\n            if (downPulls1[i].dataset.num % 2 == 0) {\r\n                downPulls1[i].style.cssText = 'transform: rotate(180deg);transition: all 0.5s linear;';\r\n                // sections[i].style.height = 'auto';\r\n                if (sectionBox[i] != undefined) {\r\n                    // sectionBox[i].style.height = 'auto';\r\n                }\r\n            } else {\r\n                downPulls1[i].style.cssText = 'transition: all 0.5s linear;';\r\n                // sections[i].style.height = '500px';\r\n                if (sectionBox[i] != undefined) {\r\n\r\n                }\r\n            }\r\n        },\r\n        channge(oldVal, newVal) {\r\n            console.log(\"old\", oldVal)\r\n            console.log(\"newVal\", newVal)\r\n            if (oldVal == 'second') {\r\n                this.sectionArr = []\r\n                this.sectionData = []\r\n                this.getNew()\r\n            } else if (newVal == 'second') {\r\n                this.sectionArr = []\r\n                this.sectionData = []\r\n                this.getNew()\r\n            }\r\n        }\r\n\r\n        // 触发数据的类型数值\r\n    },\r\n    mounted() { },\r\n    watch: {\r\n        // acticveName: {\r\n        //     handler(newVal) {\r\n        //         if (newVal != 'second') {\r\n        //             // 组件数据赋空\r\n        //             this.classify = []\r\n        //         }\r\n        //     }\r\n\r\n        // },\r\n        // 触发的原始数据\r\n        triggerData: {\r\n            handler(newVal, oldVal) { },\r\n            immediate: true\r\n        },\r\n        // activeName:'channge',\r\n        // 处理过的触发数据\r\n        triggerListData: {\r\n            handler(newVal) {\r\n                this.triggerList = newVal;\r\n                // 触发数据\r\n                console.log(newVal, 'triggerlistData');\r\n                var _this = this\r\n                if (newVal.length != 0 && _this.sectionData) {\r\n                    _this.classify.forEach((ele, index) => {\r\n\r\n                        if (ele.trigger == undefined && ele.timeMode == '触发') {\r\n                            ele.trigger = [];\r\n                        }\r\n                        newVal.forEach((item) => {\r\n                            if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '触发') {\r\n                                if (ele.trigger.length == 10) {\r\n                                    ele.trigger.splice(newVal.length - 1, 1);\r\n                                } else {\r\n                                    item.time = item.time.split('.')[0];\r\n                                    // 该时间的触发数据\r\n                                    if (item.type_data != null) {\r\n                                        _this.typeTimeMode = item\r\n                                    }\r\n                                    ele.trigger.unshift(item);\r\n                                    _this.$nextTick(() => {\r\n                                        console.log(index, '满足条件的索引');\r\n                                        console.log(_this.$refs.typeChartRef[index], index, '...........');\r\n                                        if (_this.$refs.typeChartRef[index] != undefined) {\r\n                                            console.log(_this.$refs.typeChartRef[index].dataArr, '数据');\r\n                                            _this.$refs.typeChartRef[index].$refs.lineChartRef.drawLine(ele.trigger, ele.componentName.split('_')[0])\r\n\r\n                                        }\r\n                                    })\r\n                                }\r\n                            }\r\n\r\n                        });\r\n                    });\r\n\r\n\r\n                }\r\n            },\r\n            immediate: true\r\n        },\r\n        // 周期时刻的数据\r\n        cycleTimeData: {\r\n            handler(newVal) {\r\n                // 监听到打印周期时刻数据\r\n                if (newVal.length != 0 && this.sectionData) {\r\n                    this.componentList.forEach(ele => {\r\n                        if (ele.cycleTimeData == undefined && ele.timeMode == '周期时刻') {\r\n                            ele.cycleTimeData = [];\r\n                        }\r\n                        newVal.forEach(item => {\r\n                            if (\r\n                                ele.analogAreaComponentId == item.component_id &&\r\n                                ele.timeMode == '周期时刻'\r\n                            ) {\r\n                                if (ele.cycleTimeData.length == 10) {\r\n                                    ele.cycleTimeData.splice(newVal.length - 1, 1);\r\n                                } else {\r\n                                    item.time = item.time.split('.')[0];\r\n                                    if (item.type_data != null) {\r\n                                        // 周期时刻的类型数据\r\n                                        this.typeCycleTimeData = item;\r\n                                    }\r\n                                    ele.cycleTimeData.unshift(item);\r\n                                }\r\n                            }\r\n                        });\r\n                    });\r\n                }\r\n            },\r\n            immediate: true\r\n        },\r\n        cycleStatistics: {\r\n            handler(newVal) {\r\n\r\n                if (newVal.length != 0 && this.sectionData) {\r\n                    this.componentList.forEach(ele => {\r\n                        if (ele.cycleStatistics == undefined && ele.timeMode == '周期统计') {\r\n                            ele.cycleStatistics = [];\r\n                        }\r\n                        newVal.forEach(item => {\r\n                            if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '周期统计') {\r\n                                if (ele.cycleStatistics.length == 10) {\r\n                                    ele.cycleStatistics.splice(newVal.length - 1, 1);\r\n                                } else {\r\n                                    item.time = item.time.split('.')[0];\r\n                                    if (item.type_data != null) {\r\n                                        //周期时刻的类型数据\r\n                                        this.typeCycleStatistics = item;\r\n                                    }\r\n                                    ele.cycleStatistics.unshift(item);\r\n                                }\r\n                            }\r\n                        });\r\n                    });\r\n                }\r\n            }\r\n        }\r\n        // activeName: {\r\n        //     handler(newVal) {\r\n        //         if (newVal == \"second\") {\r\n        //             getComponentSection({ VideoId: this.$route.query.id }).then(res => {\r\n        //                 if (res.data.code == 200) {\r\n        //                     this.componentList = res.data.data;\r\n        //                     this.siftData();\r\n        //                 } else if (res.data.code == 404) {\r\n        //                 }\r\n        //             });\r\n        //         }\r\n\r\n        //     },\r\n        //     immediate: true\r\n        // }\r\n    }\r\n};\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n* {\r\n    margin: 0;\r\n    padding: 0;\r\n}\r\n\r\n.plate1,\r\n.plate2 {\r\n    width: 100%;\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    justify-content: space-between;\r\n}\r\n\r\n/deep/ .el-scrollbar__view {\r\n    display: inline-block !important;\r\n    width: 100%;\r\n}\r\n\r\n/deep/ .el-scrollbar__wrap {\r\n    overflow-x: hidden !important;\r\n}\r\n\r\n.scrollbar {\r\n    height: 100vh;\r\n    overflow-x: hidden !important;\r\n\r\n    .dataBoard {\r\n        height: 100%;\r\n    }\r\n}\r\n\r\n.dataBoard .region,\r\n.dataBoard .section {\r\n    width: 48%;\r\n    border: 1px solid #e4e7ed;\r\n    box-sizing: border-box;\r\n    padding: 15px;\r\n    height: auto;\r\n    position: relative;\r\n    transition: all 1s;\r\n    overflow: hidden;\r\n}\r\n\r\n.dataBoard .sectionBox {\r\n    width: 100%;\r\n    height: auto;\r\n    border: 1px solid #e4e7ed;\r\n    box-sizing: border-box;\r\n    padding: 15px;\r\n    position: relative;\r\n    transition: all 1s;\r\n    overflow: hidden;\r\n}\r\n\r\n.dataBoard .sectionBox:nth-child(1) {\r\n    margin-bottom: 4vh;\r\n}\r\n\r\n.dataBoard .section {\r\n    float: left;\r\n    margin-top: 20px;\r\n}\r\n\r\n.dataBoard .section:nth-child(1),\r\n.dataBoard .section:nth-child(2) {\r\n    margin-top: 0;\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\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.downPull1 {\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.upActive {\r\n    transform: rotate(180deg);\r\n    transition: all 0.5s linear;\r\n    /* transform-origin: 7px 7px; */\r\n}\r\n\r\n.active {\r\n    transition: all 0.5s linear;\r\n}\r\n</style>\r\n"],"sourceRoot":"src/views/bounced"}]}
\ No newline at end of file
+{"remainingRequest":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\babel-loader\\lib\\index.js!E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js??ref--0-0!E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!E:\\视频边缘计算管理平台\\TransFlow\\src\\views\\bounced\\dataBoard.vue?vue&type=script&lang=js&","dependencies":[{"path":"E:\\视频边缘计算管理平台\\TransFlow\\src\\views\\bounced\\dataBoard.vue","mtime":1677222346740},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\babel-loader\\lib\\index.js","mtime":499162500000},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":["import \"core-js/modules/es6.regexp.split\";\nimport \"core-js/modules/es6.set\";\nimport \"core-js/modules/es6.string.iterator\";\nimport \"core-js/modules/es6.array.from\";\nimport \"core-js/modules/web.dom.iterable\";\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\nimport typeChart from \"../../components/target/typeChart.vue\";\nimport OD from \"../../components/target/OD.vue\"; // import {mapMutation} from 'vuex'\n\nimport { getComponentSection } from \"../../api/index\";\nexport default {\n  components: {\n    typeChart: typeChart,\n    OD: OD\n  },\n  props: {\n    activeName: {\n      type: String\n    },\n    triggerData: {\n      type: Array,\n      default: function _default() {\n        return [];\n      }\n    },\n    // 触发数据\n    triggerListData: {\n      type: Array,\n      default: function _default() {\n        return [];\n      }\n    },\n    // 周期时刻数据\n    cycleTimeData: {\n      type: Array,\n      default: function _default() {\n        return [];\n      }\n    },\n    //周期统计\n    cycleStatistics: {\n      type: Array,\n      default: function _default() {\n        return [];\n      }\n    }\n  },\n  data: function data() {\n    return {\n      acticveName: [],\n      title1: '01断面',\n      title2: '01区域',\n      dialogVisible: false,\n      idVal: '',\n      //组件数组\n      componentList: [],\n      // 触发数据数组\n      triggerList: [],\n      sectionData: [],\n      // 单个区域或者断面的表格触发数据\n      tableList: [],\n      // 路线数据\n      headWay: [],\n      tripData: [],\n      sectionArr: [],\n      //触发的类型数值看板显示\n      typeTimeMode: {},\n      // 周期时刻的数值看板展示\n      typeCycleTimeData: {},\n      typeCycleStatistics: {},\n      // 各个组件分类\n      classify: []\n    };\n  },\n  // beforeCeated(){\n  // },\n  created: function created() {// this.getNew()\n  },\n  methods: {\n    getNew: function getNew() {\n      var _this2 = this;\n\n      // this.idVal = ;\n      getComponentSection({\n        VideoId: this.$route.query.id\n      }).then(function (res) {\n        if (res.data.code == 200) {\n          console.log(res.data.data, '组件的数据');\n          _this2.componentList = res.data.data;\n\n          _this2.siftData();\n        }\n      });\n    },\n    siftData: function siftData() {\n      var _this3 = this;\n\n      this.sectionArr = [];\n      this.sectionData = [];\n      this.classify = [];\n      this.componentList.forEach(function (val) {\n        _this3.sectionArr.push(val.combinationName);\n\n        _this3.sectionArr = Array.from(new Set(_this3.sectionArr));\n      });\n      this.sectionData = this.sectionArr.map(function (item) {\n        item = {\n          title: item,\n          children: []\n        };\n        _this3.acticveName = [];\n\n        _this3.componentList.forEach(function (val) {\n          if (item.title == val.combinationName) {\n            _this3.classify.push(val);\n\n            item.children.push(val);\n          }\n\n          _this3.acticveName.push(val.analogAreaComponentId);\n        });\n\n        return item;\n      });\n    },\n    // 组件图标点击下拉事件\n    sectionHandle: function sectionHandle(i) {\n      var sections = document.querySelectorAll('.section');\n      var sectionBox = document.querySelectorAll('.sectionBox');\n      var downPulls1 = document.querySelectorAll('.downPull1'); // 断面的小图标\n\n      downPulls1[i].dataset.num++;\n\n      if (downPulls1[i].dataset.num % 2 == 0) {\n        downPulls1[i].style.cssText = 'transform: rotate(180deg);transition: all 0.5s linear;'; // sections[i].style.height = 'auto';\n\n        if (sectionBox[i] != undefined) {// sectionBox[i].style.height = 'auto';\n        }\n      } else {\n        downPulls1[i].style.cssText = 'transition: all 0.5s linear;'; // sections[i].style.height = '500px';\n\n        if (sectionBox[i] != undefined) {}\n      }\n    },\n    channge: function channge(oldVal, newVal) {\n      console.log(\"old\", oldVal);\n      console.log(\"newVal\", newVal);\n\n      if (oldVal == 'second') {\n        this.sectionArr = [];\n        this.sectionData = [];\n        this.getNew();\n      } else if (newVal == 'second') {\n        this.sectionArr = [];\n        this.sectionData = [];\n        this.getNew();\n      }\n    } // 触发数据的类型数值\n\n  },\n  mounted: function mounted() {},\n  watch: {\n    // acticveName: {\n    //     handler(newVal) {\n    //         if (newVal != 'second') {\n    //             // 组件数据赋空\n    //             this.classify = []\n    //         }\n    //     }\n    // },\n    // 触发的原始数据\n    triggerData: {\n      handler: function handler(newVal, oldVal) {},\n      immediate: true\n    },\n    // activeName:'channge',\n    // 处理过的触发数据\n    triggerListData: {\n      handler: function handler(newVal) {\n        this.triggerList = newVal; // 触发数据\n\n        var _this = this;\n\n        if (newVal.length != 0 && _this.sectionData) {\n          _this.classify.forEach(function (ele, index) {\n            if (ele.trigger == undefined && ele.timeMode == '触发') {\n              ele.trigger = [];\n            }\n\n            newVal.forEach(function (item) {\n              if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '触发') {\n                if (ele.trigger.length == 10) {\n                  ele.trigger.splice(newVal.length - 1, 1);\n                } else {\n                  item.time = item.time.split('.')[0]; // 该时间的触发数据\n\n                  if (item.type_data != null) {\n                    _this.typeTimeMode = item;\n                  }\n\n                  ele.trigger.unshift(item);\n\n                  _this.$nextTick(function () {\n                    for (var i = 0; i < _this.$refs.typeChartRef.length; i++) {\n                      // console.log(_this.$refs.typeChartRef[i], '触发接收的表格数据');\n                      var _item = _this.$refs.typeChartRef[i];\n\n                      _this.$refs.typeChartRef[i].$refs.lineChartRef.drawLine(_this.$refs.typeChartRef[i].dataArr, _this.$refs.typeChartRef[i].componentName.split('_')[0]);\n\n                      if (_item.componentName.split('_')[0] == \"类型\") {\n                        // 数据改变重新渲染柱状图\n                        _item.$refs.barChartRef.drawBar(_item.dataArr[0]); // 数据改变重新渲染饼图\n\n\n                        _item.$refs.pieChartRef.drawPie(_item.dataArr[0]);\n                      }\n                    }\n                  });\n                }\n              }\n            });\n          });\n        }\n      },\n      immediate: true\n    },\n    // 周期时刻的数据\n    cycleTimeData: {\n      handler: function handler(newVal) {\n        // 监听到打印周期时刻数据\n        console.log(newVal, '周期时刻数据');\n        var that = this;\n\n        if (newVal.length != 0 && this.sectionData) {\n          that.classify.forEach(function (ele, index) {\n            if (ele.cycleTimeData == undefined && ele.timeMode == '周期时刻') {\n              ele.cycleTimeData = [];\n            }\n\n            newVal.forEach(function (item) {\n              if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '周期时刻') {\n                if (ele.cycleTimeData.length == 10) {\n                  ele.cycleTimeData.splice(newVal.length - 1, 1);\n                } else {\n                  item.time = item.time.split('.')[0];\n\n                  if (item.type_data != null) {\n                    // 周期时刻的类型数据\n                    that.typeCycleTimeData = item;\n                  }\n\n                  ele.cycleTimeData.unshift(item);\n                  that.$nextTick(function () {\n                    // 轮循周期时刻生成的各类组件\n                    for (var i = 0; i < that.$refs.typeChartRef1.length; i++) {\n                      that.$refs.typeChartRef1[i].$refs.lineChartRef.drawLine(that.$refs.typeChartRef1[i].dataArr, that.$refs.typeChartRef[i].componentName.split('_')[0]);\n                    }\n                  });\n                }\n              }\n            });\n          });\n        }\n      },\n      immediate: true\n    },\n    cycleStatistics: {\n      handler: function handler(newVal) {\n        var _this4 = this;\n\n        console.log(newVal, '周期统计数据');\n\n        if (newVal.length != 0 && this.sectionData) {\n          this.componentList.forEach(function (ele) {\n            if (ele.cycleStatistics == undefined && ele.timeMode == '周期统计') {\n              ele.cycleStatistics = [];\n            }\n\n            newVal.forEach(function (item) {\n              if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '周期统计') {\n                if (ele.cycleStatistics.length == 10) {\n                  ele.cycleStatistics.splice(newVal.length - 1, 1);\n                } else {\n                  item.time = item.time.split('.')[0];\n\n                  if (item.type_data != null) {\n                    //周期时刻的类型数据\n                    _this4.typeCycleStatistics = item;\n                  }\n\n                  ele.cycleStatistics.unshift(item);\n\n                  for (var i = 0; i < _this4.$refs.typeChartRef2.length; i++) {\n                    // console.log(_this.$refs.typeChartRef[i], '触发接收的表格数据');\n                    _this4.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(_this4.$refs.typeChartRef2[i].dataArr, _this.$refs.typeChartRe2f[i].componentName.split('_')[0]);\n                  }\n                }\n              }\n            });\n          });\n        }\n      }\n    } // activeName: {\n    //     handler(newVal) {\n    //         if (newVal == \"second\") {\n    //             getComponentSection({ VideoId: this.$route.query.id }).then(res => {\n    //                 if (res.data.code == 200) {\n    //                     this.componentList = res.data.data;\n    //                     this.siftData();\n    //                 } else if (res.data.code == 404) {\n    //                 }\n    //             });\n    //         }\n    //     },\n    //     immediate: true\n    // }\n\n  }\n};",{"version":3,"sources":["dataBoard.vue"],"names":[],"mappings":"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","sourcesContent":["<template>\r\n    <div ref=\"box\" class=\"box\">\r\n        <el-empty v-show=\"sectionData.length == 0\" :image-size=\"400\"></el-empty>\r\n        <!-- <p class=\"title\" style=\"margin-bottom: 20px;font-size: 20px;font-weight: 400;\">数据看板</p> -->\r\n        <el-scrollbar class=\"scrollbar\">\r\n            <div class=\"dataBoard\" ref=\"dataBoard\" v-if=\"activeName == 'second'\">\r\n                <!-- 断面 -->\r\n                <div class=\"plate1\" ref=\"plate1\">\r\n                    <div :class=\"sectionData.length <= 2 ? 'sectionBox' : 'section'\" ref=\"section\"\r\n                        v-for=\"(s, i) in sectionData\" :key=\"s.analogAreaComponentId\">\r\n                        <template>\r\n                            <div ref=\"sectionContent\">\r\n                                <div>\r\n                                    <p class=\"board-title\">\r\n                                        <span>{{ s.title }}</span>\r\n                                    </p>\r\n                                    <!-- <span class=\"downPull1\" data-num=\"1\" @click=\"sectionHandle(i)\"></span> -->\r\n                                </div>\r\n                                <el-tabs>\r\n                                    <el-collapse v-model=\"acticveName\">\r\n                                        <div v-for=\"o in s.children\" :key=\"o.analogAreaComponentId\">\r\n                                            <el-collapse-item :title=\"o.componentName\" :name=\"o.analogAreaComponentId\">\r\n                                                <OD v-if=\"o.componentName.includes('OD')\" :pageType=\"o.graphicType\"\r\n                                                    triggerType=\"触发\" :componentName=\"o.componentName\"\r\n                                                    :echartArr=\"o.presentationForm\" :dataArr=\"o.trigger\"\r\n                                                    :title=\"o.componentName.split('_')[0]\" :chartName=\"o.combinationName\" />\r\n                                                <!--触发的组件  -->\r\n                                                <typeChart ref=\"typeChartRef\" v-if=\"o.timeMode === '触发'\"\r\n                                                    :pageType=\"o.graphicType\" :triggerType=\"o.timeMode\"\r\n                                                    :componentName=\"o.componentName\" :dataArr=\"o.trigger\"\r\n                                                    :echartArr=\"o.presentationForm\" :title=\"o.componentName.split('_')[0]\"\r\n                                                    :chartName=\"o.combinationName\" :typeValue=\"typeTimeMode\" />\r\n                                                <typeChart ref=\"typeChartRef1\" v-if=\"o.timeMode === '周期时刻'\"\r\n                                                    :pageType=\"o.graphicType\" :triggerType=\"o.timeMode\"\r\n                                                    :componentName=\"o.componentName\" :dataArr=\"o.cycleTimeData\"\r\n                                                    :echartArr=\"o.presentationForm\" :title=\"o.componentName.split('_')[0]\"\r\n                                                    :chartName=\"o.combinationName\" :typeValue=\"typeCycleTimeData\" />\r\n                                                <!-- 周期统计的组件 -->\r\n                                                <typeChart ref=\"typeChartRef2\" style=\"width: 100%;\" v-if=\"o.timeMode === '周期统计'\"\r\n                                                    :pageType=\"o.graphicType\" :triggerType=\"o.timeMode\"\r\n                                                    :componentName=\"o.componentName\" :dataArr=\"o.cycleStatistics\"\r\n                                                    :echartArr=\"o.presentationForm\" :title=\"o.componentName.split('_')[0]\"\r\n                                                    :chartName=\"o.combinationName\" :typeValue=\"typeCycleStatistics\" />\r\n                                            </el-collapse-item>\r\n                                        </div>\r\n                                    </el-collapse>\r\n                                </el-tabs>\r\n                            </div>\r\n                        </template>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </el-scrollbar>\r\n        <!-- 详情框 -->\r\n    </div>\r\n</template>\r\n<script>\r\nimport typeChart from '../../components/target/typeChart.vue';\r\nimport OD from '../../components/target/OD.vue';\r\n// import {mapMutation} from 'vuex'\r\nimport { getComponentSection } from '../../api/index';\r\nexport default {\r\n    components: {\r\n        typeChart,\r\n        OD\r\n    },\r\n    props: {\r\n        activeName: {\r\n            type: String\r\n        },\r\n        triggerData: {\r\n            type: Array,\r\n            default() {\r\n                return [];\r\n            }\r\n        },\r\n        // 触发数据\r\n        triggerListData: {\r\n            type: Array,\r\n            default() {\r\n                return [];\r\n            }\r\n        },\r\n        // 周期时刻数据\r\n        cycleTimeData: {\r\n            type: Array,\r\n            default() {\r\n                return [];\r\n            }\r\n        },\r\n        //周期统计\r\n        cycleStatistics: {\r\n            type: Array,\r\n            default() {\r\n                return [];\r\n            }\r\n        }\r\n    },\r\n    data() {\r\n        return {\r\n            acticveName: [],\r\n            title1: '01断面',\r\n            title2: '01区域',\r\n            dialogVisible: false,\r\n\r\n\r\n            idVal: '',\r\n            //组件数组\r\n            componentList: [],\r\n            // 触发数据数组\r\n            triggerList: [],\r\n\r\n            sectionData: [],\r\n\r\n            // 单个区域或者断面的表格触发数据\r\n            tableList: [],\r\n\r\n            // 路线数据\r\n            headWay: [],\r\n\r\n            tripData: [],\r\n\r\n            sectionArr: [],\r\n\r\n            //触发的类型数值看板显示\r\n            typeTimeMode: {},\r\n            // 周期时刻的数值看板展示\r\n            typeCycleTimeData: {},\r\n            typeCycleStatistics: {},\r\n\r\n            // 各个组件分类\r\n            classify: []\r\n        };\r\n    },\r\n    // beforeCeated(){\r\n\r\n    // },\r\n    created() {\r\n        // this.getNew()\r\n    },\r\n    methods: {\r\n        getNew() {\r\n            // this.idVal = ;\r\n            getComponentSection({ VideoId: this.$route.query.id }).then(res => {\r\n                if (res.data.code == 200) {\r\n                    console.log(res.data.data, '组件的数据');\r\n                    this.componentList = res.data.data;\r\n                    this.siftData();\r\n                }\r\n            });\r\n        },\r\n        siftData() {\r\n            this.sectionArr = []\r\n            this.sectionData = []\r\n            this.classify = []\r\n            this.componentList.forEach(val => {\r\n                this.sectionArr.push(val.combinationName);\r\n                this.sectionArr = Array.from(new Set(this.sectionArr));\r\n            });\r\n            this.sectionData = this.sectionArr.map(item => {\r\n                item = { title: item, children: [] };\r\n                this.acticveName = [];\r\n                this.componentList.forEach(val => {\r\n                    if (item.title == val.combinationName) {\r\n                        this.classify.push(val)\r\n                        item.children.push(val);\r\n                    }\r\n                    this.acticveName.push(val.analogAreaComponentId);\r\n                });\r\n                return item;\r\n            });\r\n\r\n        },\r\n        // 组件图标点击下拉事件\r\n        sectionHandle(i) {\r\n            let sections = document.querySelectorAll('.section');\r\n            let sectionBox = document.querySelectorAll('.sectionBox');\r\n            let downPulls1 = document.querySelectorAll('.downPull1');\r\n            // 断面的小图标\r\n            downPulls1[i].dataset.num++;\r\n            if (downPulls1[i].dataset.num % 2 == 0) {\r\n                downPulls1[i].style.cssText = 'transform: rotate(180deg);transition: all 0.5s linear;';\r\n                // sections[i].style.height = 'auto';\r\n                if (sectionBox[i] != undefined) {\r\n                    // sectionBox[i].style.height = 'auto';\r\n                }\r\n            } else {\r\n                downPulls1[i].style.cssText = 'transition: all 0.5s linear;';\r\n                // sections[i].style.height = '500px';\r\n                if (sectionBox[i] != undefined) {\r\n\r\n                }\r\n            }\r\n        },\r\n        channge(oldVal, newVal) {\r\n            console.log(\"old\", oldVal)\r\n            console.log(\"newVal\", newVal)\r\n            if (oldVal == 'second') {\r\n                this.sectionArr = []\r\n                this.sectionData = []\r\n                this.getNew()\r\n            } else if (newVal == 'second') {\r\n                this.sectionArr = []\r\n                this.sectionData = []\r\n                this.getNew()\r\n            }\r\n        }\r\n\r\n        // 触发数据的类型数值\r\n    },\r\n    mounted() { },\r\n    watch: {\r\n        // acticveName: {\r\n        //     handler(newVal) {\r\n        //         if (newVal != 'second') {\r\n        //             // 组件数据赋空\r\n        //             this.classify = []\r\n        //         }\r\n        //     }\r\n\r\n        // },\r\n        // 触发的原始数据\r\n        triggerData: {\r\n            handler(newVal, oldVal) { },\r\n            immediate: true\r\n        },\r\n        // activeName:'channge',\r\n        // 处理过的触发数据\r\n        triggerListData: {\r\n            handler(newVal) {\r\n                this.triggerList = newVal;\r\n                // 触发数据\r\n                var _this = this\r\n                if (newVal.length != 0 && _this.sectionData) {\r\n                    _this.classify.forEach((ele, index) => {\r\n\r\n                        if (ele.trigger == undefined && ele.timeMode == '触发') {\r\n                            ele.trigger = [];\r\n                        }\r\n                        newVal.forEach((item) => {\r\n                            if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '触发') {\r\n                                if (ele.trigger.length == 10) {\r\n                                    ele.trigger.splice(newVal.length - 1, 1);\r\n                                } else {\r\n                                    item.time = item.time.split('.')[0];\r\n                                    // 该时间的触发数据\r\n                                    if (item.type_data != null) {\r\n                                        _this.typeTimeMode = item\r\n                                    }\r\n                                    ele.trigger.unshift(item);\r\n                                    _this.$nextTick(() => {\r\n\r\n                                        for (let i = 0; i < _this.$refs.typeChartRef.length; i++) {\r\n                                            // console.log(_this.$refs.typeChartRef[i], '触发接收的表格数据');\r\n                                           let item =  _this.$refs.typeChartRef[i]\r\n                                            _this.$refs.typeChartRef[i].$refs.lineChartRef.drawLine(_this.$refs.typeChartRef[i].dataArr,_this.$refs.typeChartRef[i].componentName.split('_')[0])\r\n                                            if(item.componentName.split('_')[0]==\"类型\"){\r\n                                                // 数据改变重新渲染柱状图\r\n                                                item.$refs.barChartRef.drawBar(item.dataArr[0])\r\n                                                // 数据改变重新渲染饼图\r\n                                                item.$refs.pieChartRef.drawPie(item.dataArr[0])\r\n                                            }\r\n                                        }\r\n\r\n\r\n\r\n                                    })\r\n                                }\r\n                            }\r\n\r\n                        });\r\n                    });\r\n\r\n\r\n                }\r\n            },\r\n            immediate: true\r\n        },\r\n        // 周期时刻的数据\r\n        cycleTimeData: {\r\n            handler(newVal) {\r\n                // 监听到打印周期时刻数据\r\n                console.log(newVal, '周期时刻数据');\r\n                var that = this\r\n                if (newVal.length != 0 && this.sectionData) {\r\n                    that.classify.forEach((ele, index) => {\r\n                        if (ele.cycleTimeData == undefined && ele.timeMode == '周期时刻') {\r\n                            ele.cycleTimeData = [];\r\n                        }\r\n                        newVal.forEach(item => {\r\n                            if (\r\n                                ele.analogAreaComponentId == item.component_id &&\r\n                                ele.timeMode == '周期时刻'\r\n                            ) {\r\n                                if (ele.cycleTimeData.length == 10) {\r\n                                    ele.cycleTimeData.splice(newVal.length - 1, 1);\r\n                                } else {\r\n                                    item.time = item.time.split('.')[0];\r\n                                    if (item.type_data != null) {\r\n                                        // 周期时刻的类型数据\r\n                                        that.typeCycleTimeData = item;\r\n                                    }\r\n                                    ele.cycleTimeData.unshift(item);\r\n                                    that.$nextTick(() => {\r\n                                        // 轮循周期时刻生成的各类组件\r\n                                        for (let i = 0; i < that.$refs.typeChartRef1.length; i++) {\r\n                                            that.$refs.typeChartRef1[i].$refs.lineChartRef.drawLine(that.$refs.typeChartRef1[i].dataArr, that.$refs.typeChartRef[i].componentName.split('_')[0])\r\n                                        }\r\n                                    })\r\n                                }\r\n                            }\r\n                        });\r\n                    });\r\n                }\r\n            },\r\n            immediate: true\r\n        },\r\n        cycleStatistics: {\r\n            handler(newVal) {\r\n                console.log(newVal,'周期统计数据');\r\n                if (newVal.length != 0 && this.sectionData) {\r\n                    this.componentList.forEach(ele => {\r\n                        if (ele.cycleStatistics == undefined && ele.timeMode == '周期统计') {\r\n                            ele.cycleStatistics = [];\r\n                        }\r\n                        newVal.forEach(item => {\r\n                            if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '周期统计') {\r\n                                if (ele.cycleStatistics.length == 10) {\r\n                                    ele.cycleStatistics.splice(newVal.length - 1, 1);\r\n                                } else {\r\n                                    item.time = item.time.split('.')[0];\r\n                                    if (item.type_data != null) {\r\n                                        //周期时刻的类型数据\r\n                                        this.typeCycleStatistics = item;\r\n                                    }\r\n                                    ele.cycleStatistics.unshift(item);\r\n                                    for (let i = 0; i < this.$refs.typeChartRef2.length; i++) {\r\n                                            // console.log(_this.$refs.typeChartRef[i], '触发接收的表格数据');\r\n                                            this.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(this.$refs.typeChartRef2[i].dataArr,_this.$refs.typeChartRe2f[i].componentName.split('_')[0])\r\n                                    }\r\n                                }\r\n                            }\r\n                        });\r\n                    });\r\n                }\r\n            }\r\n        }\r\n        // activeName: {\r\n        //     handler(newVal) {\r\n        //         if (newVal == \"second\") {\r\n        //             getComponentSection({ VideoId: this.$route.query.id }).then(res => {\r\n        //                 if (res.data.code == 200) {\r\n        //                     this.componentList = res.data.data;\r\n        //                     this.siftData();\r\n        //                 } else if (res.data.code == 404) {\r\n        //                 }\r\n        //             });\r\n        //         }\r\n\r\n        //     },\r\n        //     immediate: true\r\n        // }\r\n    }\r\n};\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n* {\r\n    margin: 0;\r\n    padding: 0;\r\n}\r\n\r\n.plate1,\r\n.plate2 {\r\n    width: 100%;\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    justify-content: space-between;\r\n}\r\n\r\n/deep/ .el-scrollbar__view {\r\n    display: inline-block !important;\r\n    width: 100%;\r\n}\r\n\r\n/deep/ .el-scrollbar__wrap {\r\n    overflow-x: hidden !important;\r\n}\r\n\r\n.scrollbar {\r\n    height: 100vh;\r\n    overflow-x: hidden !important;\r\n\r\n    .dataBoard {\r\n        height: 100%;\r\n    }\r\n}\r\n\r\n.dataBoard .region,\r\n.dataBoard .section {\r\n    width: 48%;\r\n    border: 1px solid #e4e7ed;\r\n    box-sizing: border-box;\r\n    padding: 15px;\r\n    height: auto;\r\n    position: relative;\r\n    transition: all 1s;\r\n    overflow: hidden;\r\n}\r\n\r\n.dataBoard .sectionBox {\r\n    width: 100%;\r\n    height: auto;\r\n    border: 1px solid #e4e7ed;\r\n    box-sizing: border-box;\r\n    padding: 15px;\r\n    position: relative;\r\n    transition: all 1s;\r\n    overflow: hidden;\r\n}\r\n\r\n.dataBoard .sectionBox:nth-child(1) {\r\n    margin-bottom: 4vh;\r\n}\r\n\r\n.dataBoard .section {\r\n    float: left;\r\n    margin-top: 20px;\r\n}\r\n\r\n.dataBoard .section:nth-child(1),\r\n.dataBoard .section:nth-child(2) {\r\n    margin-top: 0;\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\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.downPull1 {\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.upActive {\r\n    transform: rotate(180deg);\r\n    transition: all 0.5s linear;\r\n    /* transform-origin: 7px 7px; */\r\n}\r\n\r\n.active {\r\n    transition: all 0.5s linear;\r\n}\r\n</style>\r\n"],"sourceRoot":"src/views/bounced"}]}
\ No newline at end of file
diff --git a/node_modules/.cache/babel-loader/d36b985a450343bbaebc7d3929d30d4d.json b/node_modules/.cache/babel-loader/d36b985a450343bbaebc7d3929d30d4d.json
index 6cb2b185..f6c3bfd6 100644
--- a/node_modules/.cache/babel-loader/d36b985a450343bbaebc7d3929d30d4d.json
+++ b/node_modules/.cache/babel-loader/d36b985a450343bbaebc7d3929d30d4d.json
@@ -1 +1 @@
-{"remainingRequest":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\babel-loader\\lib\\index.js!E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js??ref--0-0!E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!E:\\视频边缘计算管理平台\\TransFlow\\src\\components\\chart\\lineChart.vue?vue&type=script&lang=js&","dependencies":[{"path":"E:\\视频边缘计算管理平台\\TransFlow\\src\\components\\chart\\lineChart.vue","mtime":1677208862802},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\babel-loader\\lib\\index.js","mtime":499162500000},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":["import \"core-js/modules/es6.function.name\";\nimport \"core-js/modules/web.dom.iterable\";\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\nexport default {\n  name: 'lineChart',\n  //折线图组件\n  props: {\n    list: {\n      type: Array,\n      default: function _default() {\n        return [];\n      }\n    },\n    pageType: {\n      type: String\n    },\n    title: {\n      type: String\n    },\n    // 时间模式\n    status: {\n      type: String\n    },\n    // 组件名称\n    componentName: {\n      type: String\n    },\n    chartName: {\n      type: String\n    },\n    // 单个数据接收\n    typeValue: {\n      type: Object,\n      default: function _default() {\n        return {};\n      }\n    }\n  },\n  data: function data() {\n    return {\n      xData: [],\n      yData: [],\n      yData1: [],\n      yData2: [],\n      yData3: [],\n      arrN: [],\n      // series: []\n      // triggerType:'触发时刻'\n      myChart: null,\n      tooltip: {\n        show: true\n      },\n      series: [],\n      // \n      listArr: []\n    };\n  },\n  created: function created() {// console.log( this.componentName + '-' + this.chartName + '-' + '曲线图','40');\n  },\n  methods: {\n    drawLine: function drawLine(newVal, title) {\n      var myChart = this.$echarts.getInstanceByDom(this.$refs.lineChart);\n\n      if (myChart == null) {\n        myChart = this.$echarts.init(this.$refs.lineChart);\n      } // var series = []\n      // myChart.showLoading()　　//开启loading\n\n\n      var option = {\n        legend: {},\n        grid: {\n          left: '2%',\n          right: '4%',\n          bottom: '10%',\n          top: '20%',\n          containLabel: true\n        },\n        tooltip: this.tooltip,\n        xAxis: [{\n          type: 'category',\n          axisLine: {\n            show: true,\n            lineStyle: {\n              color: '#eeebeb',\n              type: 'dashed'\n            }\n          },\n          axisTick: {\n            show: false\n          },\n          axisLabel: {\n            color: '#6c6c6c'\n          },\n          splitLine: {\n            show: false\n          },\n          boundaryGap: ['5%', '5%'],\n          data: this.xData\n        }],\n        yAxis: [{\n          type: 'value',\n          axisLabel: {\n            color: '#6c6c6c'\n          },\n          splitLine: {\n            lineStyle: {\n              color: '#eeebeb',\n              type: 'dashed'\n            }\n          },\n          axisLine: {\n            show: false\n          },\n          axisTick: {\n            show: false\n          }\n        }],\n        series: this.getMessage(newVal, title)\n      };\n      myChart.setOption(option);\n      window.addEventListener('resize', function () {\n        myChart.resize();\n      });\n    },\n    getMessage: function getMessage(newVal, title) {\n      this.xData = newVal.map(function (val) {\n        return val.time;\n      });\n      var series = [{\n        name: '',\n        type: 'line',\n        symbolSize: 6,\n        smooth: true,\n        itemStyle: {\n          color: '#fb864b',\n          borderColor: '#fb864b' // borderWidth: 2\n\n        },\n        data: []\n      }];\n\n      if (title === '类型') {\n        this.tooltip = {\n          formatter: '{a} {b}:{c}个',\n          show: true,\n          confine: true\n        };\n        series[0].name = '总量'; // 映射出类型数组\n\n        var arr = newVal.map(function (ele) {\n          if (ele.type_data != null) {\n            return ele.type_data;\n          }\n        });\n        var mapN = [];\n\n        for (var t = 0; t < arr.length; t++) {\n          for (var i = 0; i < arr[t].length; i++) {\n            mapN.push(arr[t][i]);\n          }\n        }\n\n        var lineArr = [];\n\n        if (newVal[0].type_data != undefined) {\n          newVal[0].type_data.forEach(function (ele) {\n            lineArr.push({\n              name: ele.name,\n              type: 'line',\n              data: [],\n              smooth: true\n            });\n          });\n        }\n\n        mapN.forEach(function (ele) {\n          if (ele.name == '机动车') {\n            lineArr[0].data.push(ele.quantity);\n          } else if (ele.name == '非机动车') {\n            lineArr[1].data.push(ele.quantity);\n          } else {\n            lineArr[2].data.push(ele.quantity);\n          }\n        });\n\n        for (var j = 0; j < lineArr.length; j++) {\n          series.push(lineArr[j]);\n        } // 总和数量\n\n\n        var mapNR1 = [];\n        newVal.map(function (ele) {\n          if (ele.type_data != null) {\n            var sum = ele.type_data.reduce(function (prev, cur) {\n              return cur.quantity + prev;\n            }, 0);\n            mapNR1.push(sum);\n          }\n        });\n        series[0].data = mapNR1;\n      } else if (title === '速度') {\n        this.tooltip = {\n          formatter: '{a} {b}:{c}km/h',\n          show: true,\n          confine: true\n        }; // console.log(\"newVal\",newVal)\n\n        series[0].data = newVal.map(function (val) {\n          return val.speed;\n        });\n      } else if (title === '流量') {\n        series[0].data = newVal.map(function (ele) {\n          return ele.in_flow + ele.out_flow;\n        });\n      } else if (title === '车头时距') {\n        this.tooltip = {\n          formatter: '{a} {b}:{c}/s',\n          show: true,\n          confine: true\n        };\n        series[0].data = newVal.map(function (val) {\n          return val.headway;\n        });\n      } else if (title === '排队数') {\n        series[0].data = newVal.map(function (val) {\n          return val.n_queue;\n        });\n      } else if (title === '检测数') {\n        series[0].data = newVal.map(function (val) {\n          return val.n_stay;\n        });\n      } else if (title === '延误') {\n        series[0].data = newVal.map(function (val) {\n          return val.ave_delay;\n        });\n      } else if (title === '拥堵') {\n        series[0].data = newVal.map(function (val) {});\n      }\n\n      console.log(series, '折线图数据');\n      return series;\n    }\n  },\n  mounted: function mounted() {// this.drawLine();\n    // this.getMessage(this.list)\n    // console.log(this.$parent.dataArr, '父组件的dataArr');\n    // this.$set(this.$parent.dataArr)\n  },\n  watch: {}\n};",{"version":3,"sources":["lineChart.vue"],"names":[],"mappings":"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","sourcesContent":["<template>\r\n    <div style=\"width: 100%;margin-top: 5px;\">\r\n        <div class=\"tableTitle\">\r\n            <div>\r\n                <span\r\n                    style=\"width: 10px;height:10px;border-radius: 50%;background-color: #3297ff;display: inline-block;vertical-align: middle;margin-right: 8px;\"></span>\r\n                <span style=\"font-size:18px;\">{{ this.componentName + '-' + this.chartName + '-' + '曲线图' + '-' + status,\r\n                                    }}</span>\r\n            </div>\r\n        </div>\r\n        <div id=\"lineChart\" ref=\"lineChart\" style=\"width: 100%; height: 300px\"></div>\r\n    </div>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n    name: 'lineChart', //折线图组件\r\n    props: {\r\n        list: {\r\n            type: Array,\r\n            default() {\r\n                return [];\r\n            }\r\n        },\r\n        pageType: {\r\n            type: String\r\n        },\r\n        title: {\r\n            type: String\r\n        },\r\n        // 时间模式\r\n        status: {\r\n            type: String\r\n        },\r\n        // 组件名称\r\n        componentName: {\r\n            type: String\r\n        },\r\n        chartName: {\r\n            type: String\r\n        },\r\n        // 单个数据接收\r\n        typeValue: {\r\n            type: Object,\r\n            default() {\r\n                return {};\r\n            }\r\n        }\r\n    },\r\n    data() {\r\n        return {\r\n            xData: [],\r\n            yData: [],\r\n            yData1: [],\r\n            yData2: [],\r\n            yData3: [],\r\n            arrN: [],\r\n            // series: []\r\n            // triggerType:'触发时刻'\r\n            myChart: null,\r\n            tooltip: {\r\n                show: true\r\n            },\r\n            series: [],\r\n\r\n            // \r\n            listArr: []\r\n        };\r\n    },\r\n    created() {\r\n        // console.log( this.componentName + '-' + this.chartName + '-' + '曲线图','40');\r\n\r\n    },\r\n\r\n    methods: {\r\n        drawLine(newVal, title) {\r\n            let myChart = this.$echarts.getInstanceByDom(this.$refs.lineChart);\r\n            if (myChart == null) {\r\n                myChart = this.$echarts.init(this.$refs.lineChart);\r\n            }\r\n            // var series = []\r\n\r\n\r\n\r\n\r\n            // myChart.showLoading()　　//开启loading\r\n            let option = {\r\n                legend: {},\r\n                grid: {\r\n                    left: '2%',\r\n                    right: '4%',\r\n                    bottom: '10%',\r\n                    top: '20%',\r\n                    containLabel: true\r\n                },\r\n                tooltip: this.tooltip,\r\n                xAxis: [\r\n                    {\r\n                        type: 'category',\r\n                        axisLine: {\r\n                            show: true,\r\n                            lineStyle: {\r\n                                color: '#eeebeb',\r\n                                type: 'dashed'\r\n                            }\r\n                        },\r\n                        axisTick: {\r\n                            show: false\r\n                        },\r\n                        axisLabel: {\r\n                            color: '#6c6c6c'\r\n                        },\r\n                        splitLine: {\r\n                            show: false\r\n                        },\r\n                        boundaryGap: ['5%', '5%'],\r\n\r\n                        data: this.xData\r\n                    }\r\n                ],\r\n                yAxis: [\r\n                    {\r\n                        type: 'value',\r\n                        axisLabel: {\r\n                            color: '#6c6c6c'\r\n                        },\r\n                        splitLine: {\r\n                            lineStyle: {\r\n                                color: '#eeebeb',\r\n                                type: 'dashed'\r\n                            }\r\n                        },\r\n                        axisLine: {\r\n                            show: false\r\n                        },\r\n                        axisTick: {\r\n                            show: false\r\n                        }\r\n                    }\r\n                ],\r\n                series: this.getMessage(newVal, title)\r\n            };\r\n            myChart.setOption(option)\r\n\r\n            window.addEventListener('resize', function () {\r\n                myChart.resize();\r\n            });\r\n        },\r\n\r\n        getMessage(newVal, title) {\r\n            this.xData = newVal.map(val => {\r\n                return val.time;\r\n            });\r\n\r\n            var series = [\r\n                {\r\n                    name: '',\r\n                    type: 'line',\r\n                    symbolSize: 6,\r\n                    smooth: true,\r\n                    itemStyle: {\r\n                        color: '#fb864b',\r\n                        borderColor: '#fb864b'\r\n                        // borderWidth: 2\r\n                    },\r\n                    data: []\r\n                }\r\n            ];\r\n\r\n            if (title === '类型') {\r\n                this.tooltip = {\r\n                    formatter: '{a} {b}:{c}个',\r\n                    show: true,\r\n                    confine: true\r\n                };\r\n                series[0].name = '总量';\r\n                // 映射出类型数组\r\n                let arr = newVal.map(function (ele) {\r\n                    if (ele.type_data != null) {\r\n                        return ele.type_data;\r\n                    }\r\n                });\r\n                var mapN = [];\r\n                for (var t = 0; t < arr.length; t++) {\r\n                    for (var i = 0; i < arr[t].length; i++) {\r\n                        mapN.push(arr[t][i]);\r\n                    }\r\n                }\r\n                var lineArr = []\r\n                if (newVal[0].type_data != undefined) {\r\n                    newVal[0].type_data.forEach(ele => {\r\n                        lineArr.push({\r\n                            name: ele.name,\r\n                            type: 'line',\r\n                            data: [],\r\n                            smooth: true\r\n                        });\r\n                    });\r\n                }\r\n                mapN.forEach(ele => {\r\n                    if (ele.name == '机动车') {\r\n                        lineArr[0].data.push(ele.quantity);\r\n                    } else if (ele.name == '非机动车') {\r\n                        lineArr[1].data.push(ele.quantity);\r\n                    } else {\r\n                        lineArr[2].data.push(ele.quantity);\r\n                    }\r\n                });\r\n                for (let j = 0; j < lineArr.length; j++) {\r\n                    series.push(lineArr[j]);\r\n                }\r\n                // 总和数量\r\n                let mapNR1 = [];\r\n                newVal.map(function (ele) {\r\n                    if (ele.type_data != null) {\r\n                        var sum = ele.type_data.reduce(function (prev, cur) {\r\n                            return cur.quantity + prev;\r\n                        }, 0);\r\n                        mapNR1.push(sum);\r\n                    }\r\n                });\r\n                series[0].data = mapNR1;\r\n            } else if (title === '速度') {\r\n                this.tooltip = {\r\n                    formatter: '{a} {b}:{c}km/h',\r\n                    show: true,\r\n                    confine: true\r\n                };\r\n                // console.log(\"newVal\",newVal)\r\n                series[0].data = newVal.map(val => {\r\n                    return val.speed;\r\n                });\r\n            } else if (title === '流量') {\r\n                series[0].data = newVal.map(ele => {\r\n                    return ele.in_flow + ele.out_flow;\r\n                });\r\n            } else if (title === '车头时距') {\r\n                this.tooltip = {\r\n                    formatter: '{a} {b}:{c}/s',\r\n                    show: true,\r\n                    confine: true\r\n                };\r\n                series[0].data = newVal.map(val => {\r\n                    return val.headway;\r\n                });\r\n            } else if (title === '排队数') {\r\n                series[0].data = newVal.map(val => {\r\n                    return val.n_queue;\r\n                });\r\n            } else if (title === '检测数') {\r\n                series[0].data = newVal.map(val => {\r\n                    return val.n_stay;\r\n                });\r\n            } else if (title === '延误') {\r\n                series[0].data = newVal.map(val => {\r\n                    return val.ave_delay;\r\n                });\r\n            } else if (title === '拥堵') {\r\n                series[0].data = newVal.map(val => { });\r\n            }\r\n            console.log(series, '折线图数据');\r\n            return series\r\n        }\r\n    },\r\n    mounted() {\r\n        // this.drawLine();\r\n        // this.getMessage(this.list)\r\n        // console.log(this.$parent.dataArr, '父组件的dataArr');\r\n        // this.$set(this.$parent.dataArr)\r\n    },\r\n    watch: {\r\n    }\r\n};\r\n</script>\r\n<style scoped>\r\n.tableTitle {\r\n    background: #f7f8fa;\r\n    margin-bottom: 5px;\r\n    padding: 8px;\r\n}\r\n</style>\r\n"],"sourceRoot":"src/components/chart"}]}
\ No newline at end of file
+{"remainingRequest":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\babel-loader\\lib\\index.js!E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js??ref--0-0!E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!E:\\视频边缘计算管理平台\\TransFlow\\src\\components\\chart\\lineChart.vue?vue&type=script&lang=js&","dependencies":[{"path":"E:\\视频边缘计算管理平台\\TransFlow\\src\\components\\chart\\lineChart.vue","mtime":1677217048875},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\babel-loader\\lib\\index.js","mtime":499162500000},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":["import \"core-js/modules/es6.function.name\";\nimport \"core-js/modules/web.dom.iterable\";\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\nexport default {\n  name: 'lineChart',\n  //折线图组件\n  props: {\n    list: {\n      type: Array,\n      default: function _default() {\n        return [];\n      }\n    },\n    pageType: {\n      type: String\n    },\n    title: {\n      type: String\n    },\n    // 时间模式\n    status: {\n      type: String\n    },\n    // 组件名称\n    componentName: {\n      type: String\n    },\n    chartName: {\n      type: String\n    },\n    // 单个数据接收\n    typeValue: {\n      type: Object,\n      default: function _default() {\n        return {};\n      }\n    }\n  },\n  data: function data() {\n    return {\n      xData: [],\n      yData: [],\n      yData1: [],\n      yData2: [],\n      yData3: [],\n      arrN: [],\n      // series: []\n      // triggerType:'触发时刻'\n      myChart: null,\n      tooltip: {\n        show: true\n      },\n      series: [],\n      // \n      listArr: []\n    };\n  },\n  created: function created() {// console.log( this.componentName + '-' + this.chartName + '-' + '曲线图','40');\n  },\n  methods: {\n    drawLine: function drawLine(newVal, title) {\n      var myChart = this.$echarts.getInstanceByDom(this.$refs.lineChart);\n\n      if (myChart == null) {\n        myChart = this.$echarts.init(this.$refs.lineChart);\n      } // var series = []\n      // myChart.showLoading()　　//开启loading\n\n\n      var option = {\n        legend: {},\n        grid: {\n          left: '2%',\n          right: '4%',\n          bottom: '10%',\n          top: '20%',\n          containLabel: true\n        },\n        tooltip: this.tooltip,\n        xAxis: [{\n          type: 'category',\n          axisLine: {\n            show: true,\n            lineStyle: {\n              color: '#eeebeb',\n              type: 'dashed'\n            }\n          },\n          axisTick: {\n            show: false\n          },\n          axisLabel: {\n            color: '#6c6c6c'\n          },\n          splitLine: {\n            show: false\n          },\n          boundaryGap: ['5%', '5%'],\n          data: this.xData\n        }],\n        yAxis: [{\n          type: 'value',\n          axisLabel: {\n            color: '#6c6c6c'\n          },\n          splitLine: {\n            lineStyle: {\n              color: '#eeebeb',\n              type: 'dashed'\n            }\n          },\n          axisLine: {\n            show: false\n          },\n          axisTick: {\n            show: false\n          }\n        }],\n        series: this.getMessage(newVal, title)\n      };\n      myChart.setOption(option);\n      window.addEventListener('resize', function () {\n        myChart.resize();\n      });\n    },\n    getMessage: function getMessage(newVal, title) {\n      if (newVal) {\n        this.xData = newVal.map(function (val) {\n          return val.time;\n        });\n        var series = [{\n          name: '',\n          type: 'line',\n          symbolSize: 6,\n          smooth: true,\n          itemStyle: {\n            color: '#fb864b',\n            borderColor: '#fb864b' // borderWidth: 2\n\n          },\n          data: []\n        }];\n\n        if (title === '类型') {\n          this.tooltip = {\n            formatter: '{a} {b}:{c}个',\n            show: true,\n            confine: true\n          };\n          series[0].name = '总量'; // 映射出类型数组\n\n          var arr = newVal.map(function (ele) {\n            if (ele.type_data != null) {\n              return ele.type_data;\n            }\n          });\n          var mapN = [];\n\n          for (var t = 0; t < arr.length; t++) {\n            for (var i = 0; i < arr[t].length; i++) {\n              mapN.push(arr[t][i]);\n            }\n          }\n\n          var lineArr = [];\n\n          if (newVal[0].type_data != undefined) {\n            newVal[0].type_data.forEach(function (ele) {\n              lineArr.push({\n                name: ele.name,\n                type: 'line',\n                data: [],\n                smooth: true\n              });\n            });\n          }\n\n          mapN.forEach(function (ele) {\n            if (ele.name == '机动车') {\n              lineArr[0].data.push(ele.quantity);\n            } else if (ele.name == '非机动车') {\n              lineArr[1].data.push(ele.quantity);\n            } else {\n              lineArr[2].data.push(ele.quantity);\n            }\n          });\n\n          for (var j = 0; j < lineArr.length; j++) {\n            series.push(lineArr[j]);\n          } // 总和数量\n\n\n          var mapNR1 = [];\n          newVal.map(function (ele) {\n            if (ele.type_data != null) {\n              var sum = ele.type_data.reduce(function (prev, cur) {\n                return cur.quantity + prev;\n              }, 0);\n              mapNR1.push(sum);\n            }\n          });\n          series[0].data = mapNR1;\n        } else if (title === '速度') {\n          this.tooltip = {\n            formatter: '{a} {b}:{c}km/h',\n            show: true,\n            confine: true\n          }; // console.log(\"newVal\",newVal)\n\n          series[0].data = newVal.map(function (val) {\n            return val.speed;\n          });\n        } else if (title === '流量') {\n          series[0].data = newVal.map(function (ele) {\n            return ele.in_flow + ele.out_flow;\n          });\n        } else if (title === '车头时距') {\n          this.tooltip = {\n            formatter: '{a} {b}:{c}/s',\n            show: true,\n            confine: true\n          };\n          series[0].data = newVal.map(function (val) {\n            return val.headway;\n          });\n        } else if (title === '排队数') {\n          series[0].data = newVal.map(function (val) {\n            return val.n_queue;\n          });\n        } else if (title === '检测数') {\n          series[0].data = newVal.map(function (val) {\n            return val.n_stay;\n          });\n        } else if (title === '延误') {\n          series[0].data = newVal.map(function (val) {\n            return val.ave_delay;\n          });\n        } else if (title === '拥堵') {\n          series[0].data = newVal.map(function (val) {});\n        }\n\n        return series;\n      }\n    }\n  },\n  mounted: function mounted() {// this.drawLine();\n    // this.getMessage(this.list)\n    // console.log(this.$parent.dataArr, '父组件的dataArr');\n    // this.$set(this.$parent.dataArr)\n  },\n  watch: {}\n};",{"version":3,"sources":["lineChart.vue"],"names":[],"mappings":"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","sourcesContent":["<template>\r\n    <div style=\"width: 100%;margin-top: 5px;\">\r\n        <div class=\"tableTitle\">\r\n            <div>\r\n                <span\r\n                    style=\"width: 10px;height:10px;border-radius: 50%;background-color: #3297ff;display: inline-block;vertical-align: middle;margin-right: 8px;\"></span>\r\n                <span style=\"font-size:18px;\">{{ this.componentName + '-' + this.chartName + '-' + '曲线图' + '-' + status,\r\n                                    }}</span>\r\n            </div>\r\n        </div>\r\n        <div id=\"lineChart\" ref=\"lineChart\" style=\"width: 100%; height: 300px\"></div>\r\n    </div>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n    name: 'lineChart', //折线图组件\r\n    props: {\r\n        list: {\r\n            type: Array,\r\n            default() {\r\n                return [];\r\n            }\r\n        },\r\n        pageType: {\r\n            type: String\r\n        },\r\n        title: {\r\n            type: String\r\n        },\r\n        // 时间模式\r\n        status: {\r\n            type: String\r\n        },\r\n        // 组件名称\r\n        componentName: {\r\n            type: String\r\n        },\r\n        chartName: {\r\n            type: String\r\n        },\r\n        // 单个数据接收\r\n        typeValue: {\r\n            type: Object,\r\n            default() {\r\n                return {};\r\n            }\r\n        }\r\n    },\r\n    data() {\r\n        return {\r\n            xData: [],\r\n            yData: [],\r\n            yData1: [],\r\n            yData2: [],\r\n            yData3: [],\r\n            arrN: [],\r\n            // series: []\r\n            // triggerType:'触发时刻'\r\n            myChart: null,\r\n            tooltip: {\r\n                show: true\r\n            },\r\n            series: [],\r\n\r\n            // \r\n            listArr: []\r\n        };\r\n    },\r\n    created() {\r\n        // console.log( this.componentName + '-' + this.chartName + '-' + '曲线图','40');\r\n\r\n    },\r\n\r\n    methods: {\r\n        drawLine(newVal, title) {\r\n            let myChart = this.$echarts.getInstanceByDom(this.$refs.lineChart);\r\n            if (myChart == null) {\r\n                myChart = this.$echarts.init(this.$refs.lineChart);\r\n            }\r\n            // var series = []\r\n\r\n\r\n\r\n\r\n            // myChart.showLoading()　　//开启loading\r\n            let option = {\r\n                legend: {},\r\n                grid: {\r\n                    left: '2%',\r\n                    right: '4%',\r\n                    bottom: '10%',\r\n                    top: '20%',\r\n                    containLabel: true\r\n                },\r\n                tooltip: this.tooltip,\r\n                xAxis: [\r\n                    {\r\n                        type: 'category',\r\n                        axisLine: {\r\n                            show: true,\r\n                            lineStyle: {\r\n                                color: '#eeebeb',\r\n                                type: 'dashed'\r\n                            }\r\n                        },\r\n                        axisTick: {\r\n                            show: false\r\n                        },\r\n                        axisLabel: {\r\n                            color: '#6c6c6c'\r\n                        },\r\n                        splitLine: {\r\n                            show: false\r\n                        },\r\n                        boundaryGap: ['5%', '5%'],\r\n\r\n                        data: this.xData\r\n                    }\r\n                ],\r\n                yAxis: [\r\n                    {\r\n                        type: 'value',\r\n                        axisLabel: {\r\n                            color: '#6c6c6c'\r\n                        },\r\n                        splitLine: {\r\n                            lineStyle: {\r\n                                color: '#eeebeb',\r\n                                type: 'dashed'\r\n                            }\r\n                        },\r\n                        axisLine: {\r\n                            show: false\r\n                        },\r\n                        axisTick: {\r\n                            show: false\r\n                        }\r\n                    }\r\n                ],\r\n                series: this.getMessage(newVal, title)\r\n            };\r\n            myChart.setOption(option)\r\n\r\n            window.addEventListener('resize', function () {\r\n                myChart.resize();\r\n            });\r\n        },\r\n\r\n        getMessage(newVal, title) {\r\n            if(newVal){\r\n                this.xData = newVal.map(val => {\r\n                return val.time;\r\n            });\r\n\r\n            var series = [\r\n                {\r\n                    name: '',\r\n                    type: 'line',\r\n                    symbolSize: 6,\r\n                    smooth: true,\r\n                    itemStyle: {\r\n                        color: '#fb864b',\r\n                        borderColor: '#fb864b'\r\n                        // borderWidth: 2\r\n                    },\r\n                    data: []\r\n                }\r\n            ];\r\n\r\n            if (title === '类型') {\r\n                this.tooltip = {\r\n                    formatter: '{a} {b}:{c}个',\r\n                    show: true,\r\n                    confine: true\r\n                };\r\n                series[0].name = '总量';\r\n                // 映射出类型数组\r\n                let arr = newVal.map(function (ele) {\r\n                    if (ele.type_data != null) {\r\n                        return ele.type_data;\r\n                    }\r\n                });\r\n                var mapN = [];\r\n                for (var t = 0; t < arr.length; t++) {\r\n                    for (var i = 0; i < arr[t].length; i++) {\r\n                        mapN.push(arr[t][i]);\r\n                    }\r\n                }\r\n                var lineArr = []\r\n                if (newVal[0].type_data != undefined) {\r\n                    newVal[0].type_data.forEach(ele => {\r\n                        lineArr.push({\r\n                            name: ele.name,\r\n                            type: 'line',\r\n                            data: [],\r\n                            smooth: true\r\n                        });\r\n                    });\r\n                }\r\n                mapN.forEach(ele => {\r\n                    if (ele.name == '机动车') {\r\n                        lineArr[0].data.push(ele.quantity);\r\n                    } else if (ele.name == '非机动车') {\r\n                        lineArr[1].data.push(ele.quantity);\r\n                    } else {\r\n                        lineArr[2].data.push(ele.quantity);\r\n                    }\r\n                });\r\n                for (let j = 0; j < lineArr.length; j++) {\r\n                    series.push(lineArr[j]);\r\n                }\r\n                // 总和数量\r\n                let mapNR1 = [];\r\n                newVal.map(function (ele) {\r\n                    if (ele.type_data != null) {\r\n                        var sum = ele.type_data.reduce(function (prev, cur) {\r\n                            return cur.quantity + prev;\r\n                        }, 0);\r\n                        mapNR1.push(sum);\r\n                    }\r\n                });\r\n                series[0].data = mapNR1;\r\n            } else if (title === '速度') {\r\n                this.tooltip = {\r\n                    formatter: '{a} {b}:{c}km/h',\r\n                    show: true,\r\n                    confine: true\r\n                };\r\n                // console.log(\"newVal\",newVal)\r\n                series[0].data = newVal.map(val => {\r\n                    return val.speed;\r\n                });\r\n            } else if (title === '流量') {\r\n                series[0].data = newVal.map(ele => {\r\n                    return ele.in_flow + ele.out_flow;\r\n                });\r\n            } else if (title === '车头时距') {\r\n                this.tooltip = {\r\n                    formatter: '{a} {b}:{c}/s',\r\n                    show: true,\r\n                    confine: true\r\n                };\r\n                series[0].data = newVal.map(val => {\r\n                    return val.headway;\r\n                });\r\n            } else if (title === '排队数') {\r\n                series[0].data = newVal.map(val => {\r\n                    return val.n_queue;\r\n                });\r\n            } else if (title === '检测数') {\r\n                series[0].data = newVal.map(val => {\r\n                    return val.n_stay;\r\n                });\r\n            } else if (title === '延误') {\r\n                series[0].data = newVal.map(val => {\r\n                    return val.ave_delay;\r\n                });\r\n            } else if (title === '拥堵') {\r\n                series[0].data = newVal.map(val => { });\r\n            }\r\n            return series\r\n        }\r\n            }\r\n            \r\n    },\r\n    mounted() {\r\n        // this.drawLine();\r\n        // this.getMessage(this.list)\r\n        // console.log(this.$parent.dataArr, '父组件的dataArr');\r\n        // this.$set(this.$parent.dataArr)\r\n    },\r\n    watch: {\r\n    }\r\n};\r\n</script>\r\n<style scoped>\r\n.tableTitle {\r\n    background: #f7f8fa;\r\n    margin-bottom: 5px;\r\n    padding: 8px;\r\n}\r\n</style>\r\n"],"sourceRoot":"src/components/chart"}]}
\ No newline at end of file
diff --git a/src/components/chart/barChart.vue b/src/components/chart/barChart.vue
index 6f40c3b1..ccf347e7 100644
--- a/src/components/chart/barChart.vue
+++ b/src/components/chart/barChart.vue
@@ -41,13 +41,19 @@ export default {
     },
     data() {
         return {
-            xData: [],
-            yData: []
         };
     },
     created() {},
     methods: {
-        drawBar() {
+        drawBar(newVal) {
+            if (newVal) {
+                    var xData = newVal.type_data.map(ele => {
+                        return ele.name;
+                    });
+                    var yData = newVal.type_data.map(ele => {
+                        return ele.quantity;
+                    });
+                }
             let myChart = this.$echarts.getInstanceByDom(this.$refs.barChart);
             if (myChart == null) {
                 myChart = this.$echarts.init(this.$refs.barChart);
@@ -66,7 +72,7 @@ export default {
                 },
                 xAxis: {
                     type: 'category',
-                    data: this.xData,
+                    data: xData,
                     axisLine: {
                         lineStyle: {
                             color: '#000'
@@ -114,7 +120,7 @@ export default {
                         barWidth: 20,
                         itemStyle: { barBorderRadius: [5, 5, 0, 0] },
                         name: '时间',
-                        data: this.yData
+                        data:yData
                     }
                 ]
             };
@@ -125,23 +131,9 @@ export default {
         }
     },
     mounted() {
-        
-        this.drawBar();
     },
     watch: {
-        typeValue: {
-            handler(newVal) {
-                if (newVal) {
-                    this.xData = newVal.type_data.map(ele => {
-                        return ele.name;
-                    });
-                    this.yData = newVal.type_data.map(ele => {
-                        return ele.quantity;
-                    });
-                    this.drawBar();
-                }
-            }
-        }
+        
     }
 };
 </script>
diff --git a/src/components/chart/lineChart.vue b/src/components/chart/lineChart.vue
index 1a5dd98e..24736d60 100644
--- a/src/components/chart/lineChart.vue
+++ b/src/components/chart/lineChart.vue
@@ -148,7 +148,8 @@ export default {
         },
 
         getMessage(newVal, title) {
-            this.xData = newVal.map(val => {
+            if(newVal){
+                this.xData = newVal.map(val => {
                 return val.time;
             });
 
@@ -258,9 +259,10 @@ export default {
             } else if (title === '拥堵') {
                 series[0].data = newVal.map(val => { });
             }
-            console.log(series, '折线图数据');
             return series
         }
+            }
+            
     },
     mounted() {
         // this.drawLine();
diff --git a/src/components/chart/pieChart.vue b/src/components/chart/pieChart.vue
index 2f7f6f26..3689eb0d 100644
--- a/src/components/chart/pieChart.vue
+++ b/src/components/chart/pieChart.vue
@@ -37,28 +37,25 @@ export default {
     },
     data() {
         return {
-            // 图例数据
-            legend: [],
-            // pie图数据
-            seriesData: [
-                {
-                    name: '机动车',
-                    value: 0
-                },
-                {
-                    name: '非机动车',
-                    value: 0
-                },
-                {
-                    name: '行人',
-                    value: 0
-                }
-            ]
+            
         };
     },
     created() {},
     methods: {
-        drawPie() {
+        drawPie(newVal) {
+            if (newVal) {
+                    var  legend = newVal.type_data.map(ele => {
+                        return ele.name;
+                    });
+                    var  seriesData = [];
+                    newVal.type_data.forEach(ele => {
+                        seriesData.push({
+                            name: ele.name,
+                            value: ele.quantity
+                        });
+                    });
+                    this.drawPie();
+                }
             let myChart = this.$echarts.getInstanceByDom(this.$refs.pieChart);
             if (myChart == null) {
                 myChart = this.$echarts.init(this.$refs.pieChart);
@@ -77,7 +74,7 @@ export default {
                     top: 20,
                     right: 'center',
                     textStyle: {},
-                    data: this.legend
+                    data:legend
                 },
                 tooltip: {},
                 series: [
@@ -108,7 +105,7 @@ export default {
                                 }
                             }
                         },
-                        data: this.seriesData
+                        data: seriesData
                     }
                 ]
             };
@@ -124,36 +121,10 @@ export default {
         }
     },
     mounted() {
-        if (this.typeValue) {
-            this.typeValue.type_data.forEach(ele => {
-                this.seriesData.push({
-                    name: ele.name,
-                    value: ele.quantity
-                });
-            });
-            this.drawPie();
-        }
+      
     },
     watch: {
         // 监听单个的数据
-        typeValue: {
-            handler(newVal) {
-                if (newVal) {
-                    this.legend = newVal.type_data.map(ele => {
-                        return ele.name;
-                    });
-                    this.seriesData = [];
-                    newVal.type_data.forEach(ele => {
-                        this.seriesData.push({
-                            name: ele.name,
-                            value: ele.quantity
-                        });
-                    });
-                    this.drawPie();
-                }
-            },
-
-        }
     }
 };
 </script>
diff --git a/src/components/chart/regionTable.vue b/src/components/chart/regionTable.vue
index fe8acb48..1c1ff501 100644
--- a/src/components/chart/regionTable.vue
+++ b/src/components/chart/regionTable.vue
@@ -27,6 +27,7 @@
                         <span v-if="scope.row.type == 'Motor Vehicle|Non_Motor'">机动车|非机动车</span>
                         <span v-if="scope.row.type == 'Motor Vehicle|Person'">机动车|行人</span>
                         <span v-if="scope.row.type == 'Person|Non_Motor'">行人|非机动车</span>
+                        <span v-if="scope.row.type == 'Person|Motor Vehicle'">行人机动车</span>
                         <span v-if="scope.row.type == 'Person|Non_Motor|Motor Vehicle'">行人|非机动车|机动车</span>
                         <span v-if="scope.row.type == 'Person|Motor Vehicle|Non_Motor'">行人|非机动车|机动车</span>
                         <span v-if="scope.row.type == 'Non_Motor|Person|Motor Vehicle'">行人|非机动车|机动车</span>
@@ -61,6 +62,7 @@
                         <span v-if="scope.row.type == 'Motor Vehicle|Non_Motor'">机动车|非机动车</span>
                         <span v-if="scope.row.type == 'Motor Vehicle|Person'">机动车|行人</span>
                         <span v-if="scope.row.type == 'Person|Non_Motor'">行人|非机动车</span>
+                        <span v-if="scope.row.type == 'Person|Motor Vehicle'">行人机动车</span>
                         <span v-if="scope.row.type == 'Person|Non_Motor|Motor Vehicle'">行人|非机动车|机动车</span>
                         <span v-if="scope.row.type == 'Person|Motor Vehicle|Non_Motor'">行人|非机动车|机动车</span>
                         <span v-if="scope.row.type == 'Non_Motor|Person|Motor Vehicle'">行人|非机动车|机动车</span>
@@ -95,6 +97,7 @@
                         <span v-if="scope.row.type == 'Motor Vehicle|Non_Motor'">机动车|非机动车</span>
                         <span v-if="scope.row.type == 'Motor Vehicle|Person'">机动车|行人</span>
                         <span v-if="scope.row.type == 'Person|Non_Motor'">行人|非机动车</span>
+                        <span v-if="scope.row.type == 'Person|Motor Vehicle'">行人机动车</span>
                         <span v-if="scope.row.type == 'Person|Non_Motor|Motor Vehicle'">行人|非机动车|机动车</span>
                         <span v-if="scope.row.type == 'Person|Motor Vehicle|Non_Motor'">行人|非机动车|机动车</span>
                         <span v-if="scope.row.type == 'Non_Motor|Person|Motor Vehicle'">行人|非机动车|机动车</span>
diff --git a/src/config/apiurl.js b/src/config/apiurl.js
index 0c9bdcdf..76591a76 100644
--- a/src/config/apiurl.js
+++ b/src/config/apiurl.js
@@ -7,14 +7,15 @@ export default {
     //   addFigure: "http://172.16.1.22:8080/api/AddJianktx",
     //   //编辑图形名称
     //   editFigure: "http://172.16.1.22:8080/api/EditTuxmc",
-    //   //编辑保存组件弹窗传参
-    //   editComponent: "http://172.16.1.22:8080/api/SetMonqjkzjcs",
+   
 
     dataUrl: 'http://172.16.1.168:5000/api/AddShipjk',
     getSpareElementOrder: 'http://172.16.1.168:5000/api/Upload',
     postSetQuanjsz: 'http://172.16.1.168:5000/api/SetQuanjsz',
     saveRoleApi: 'http://172.16.1.168:5000/api/AddZhangh',
     editRoleApi: 'http://172.16.1.168:5000/api/EditZhangh',
+     //   //编辑保存组件弹窗传参
+      editComponent: "http://172.16.1.22:8080/api/SetMonqjkzjcs",
     //保存主机名称
     editRoleApi: 'http://172.16.1.168:5000/api/EditZhangh',
     //新增图形接口
diff --git a/src/views/bounced/dataBoard.vue b/src/views/bounced/dataBoard.vue
index 1c4e418c..1737ea01 100644
--- a/src/views/bounced/dataBoard.vue
+++ b/src/views/bounced/dataBoard.vue
@@ -30,13 +30,13 @@
                                                     :componentName="o.componentName" :dataArr="o.trigger"
                                                     :echartArr="o.presentationForm" :title="o.componentName.split('_')[0]"
                                                     :chartName="o.combinationName" :typeValue="typeTimeMode" />
-                                                <typeChart v-if="o.timeMode === '周期时刻'" :pageType="o.graphicType"
-                                                    :triggerType="o.timeMode" :componentName="o.componentName"
-                                                    :dataArr="o.cycleTimeData" :echartArr="o.presentationForm"
-                                                    :title="o.componentName.split('_')[0]" :chartName="o.combinationName"
-                                                    :typeValue="typeCycleTimeData" />
+                                                <typeChart ref="typeChartRef1" v-if="o.timeMode === '周期时刻'"
+                                                    :pageType="o.graphicType" :triggerType="o.timeMode"
+                                                    :componentName="o.componentName" :dataArr="o.cycleTimeData"
+                                                    :echartArr="o.presentationForm" :title="o.componentName.split('_')[0]"
+                                                    :chartName="o.combinationName" :typeValue="typeCycleTimeData" />
                                                 <!-- 周期统计的组件 -->
-                                                <typeChart style="width: 100%;" v-if="o.timeMode === '周期统计'"
+                                                <typeChart ref="typeChartRef2" style="width: 100%;" v-if="o.timeMode === '周期统计'"
                                                     :pageType="o.graphicType" :triggerType="o.timeMode"
                                                     :componentName="o.componentName" :dataArr="o.cycleStatistics"
                                                     :echartArr="o.presentationForm" :title="o.componentName.split('_')[0]"
@@ -102,7 +102,7 @@ export default {
             title1: '01断面',
             title2: '01区域',
             dialogVisible: false,
-            
+
 
             idVal: '',
             //组件数组
@@ -152,7 +152,9 @@ export default {
             });
         },
         siftData() {
-           
+            this.sectionArr = []
+            this.sectionData = []
+            this.classify = []
             this.componentList.forEach(val => {
                 this.sectionArr.push(val.combinationName);
                 this.sectionArr = Array.from(new Set(this.sectionArr));
@@ -230,7 +232,6 @@ export default {
             handler(newVal) {
                 this.triggerList = newVal;
                 // 触发数据
-                console.log(newVal, 'triggerlistData');
                 var _this = this
                 if (newVal.length != 0 && _this.sectionData) {
                     _this.classify.forEach((ele, index) => {
@@ -252,11 +253,21 @@ export default {
                                     ele.trigger.unshift(item);
                                     // console.log("ele.trigger",ele.trigger)
                                     _this.$nextTick(() => {
-                                        if (_this.$refs.typeChartRef[index] != undefined) {
-                                            // console.log(_this.$refs.typeChartRef[index].dataArr, '数据');
-                                            _this.$refs.typeChartRef[index].$refs.lineChartRef.drawLine(ele.trigger, ele.componentName.split('_')[0])
 
+                                        for (let i = 0; i < _this.$refs.typeChartRef.length; i++) {
+                                            // console.log(_this.$refs.typeChartRef[i], '触发接收的表格数据');
+                                           let item =  _this.$refs.typeChartRef[i]
+                                            _this.$refs.typeChartRef[i].$refs.lineChartRef.drawLine(_this.$refs.typeChartRef[i].dataArr,_this.$refs.typeChartRef[i].componentName.split('_')[0])
+                                            if(item.componentName.split('_')[0]=="类型"){
+                                                // 数据改变重新渲染柱状图
+                                                item.$refs.barChartRef.drawBar(item.dataArr[0])
+                                                // 数据改变重新渲染饼图
+                                                item.$refs.pieChartRef.drawPie(item.dataArr[0])
+                                            }
                                         }
+
+
+
                                     })
                                 }
                             }
@@ -273,8 +284,10 @@ export default {
         cycleTimeData: {
             handler(newVal) {
                 // 监听到打印周期时刻数据
+                console.log(newVal, '周期时刻数据');
+                var that = this
                 if (newVal.length != 0 && this.sectionData) {
-                    this.componentList.forEach(ele => {
+                    that.classify.forEach((ele, index) => {
                         if (ele.cycleTimeData == undefined && ele.timeMode == '周期时刻') {
                             ele.cycleTimeData = [];
                         }
@@ -289,9 +302,15 @@ export default {
                                     item.time = item.time.split('.')[0];
                                     if (item.type_data != null) {
                                         // 周期时刻的类型数据
-                                        this.typeCycleTimeData = item;
+                                        that.typeCycleTimeData = item;
                                     }
                                     ele.cycleTimeData.unshift(item);
+                                    that.$nextTick(() => {
+                                        // 轮循周期时刻生成的各类组件
+                                        for (let i = 0; i < that.$refs.typeChartRef1.length; i++) {
+                                            that.$refs.typeChartRef1[i].$refs.lineChartRef.drawLine(that.$refs.typeChartRef1[i].dataArr, that.$refs.typeChartRef[i].componentName.split('_')[0])
+                                        }
+                                    })
                                 }
                             }
                         });
@@ -302,7 +321,7 @@ export default {
         },
         cycleStatistics: {
             handler(newVal) {
-
+                console.log(newVal,'周期统计数据');
                 if (newVal.length != 0 && this.sectionData) {
                     this.componentList.forEach(ele => {
                         if (ele.cycleStatistics == undefined && ele.timeMode == '周期统计') {
@@ -319,6 +338,10 @@ export default {
                                         this.typeCycleStatistics = item;
                                     }
                                     ele.cycleStatistics.unshift(item);
+                                    for (let i = 0; i < this.$refs.typeChartRef2.length; i++) {
+                                            // console.log(_this.$refs.typeChartRef[i], '触发接收的表格数据');
+                                            this.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(this.$refs.typeChartRef2[i].dataArr,_this.$refs.typeChartRe2f[i].componentName.split('_')[0])
+                                    }
                                 }
                             }
                         });