20230227

node_modules/.cache/babel-loader/24bfb8f6dcfb3e580d4b02c8c2f0253a.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\\OD.vue?vue&type=script&lang=js&","dependencies":[{"path":"E:\\视频边缘计算管理平台\\TransFlow\\src\\components\\target\\OD.vue","mtime":1677392985078},{"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//\nimport lineChart from \"../chart/lineChart.vue\";\nimport barChart from \"../chart/barChart.vue\";\nimport tableShow from \"../chart/tableShow.vue\";\nimport detailDialog from \"../chart/detailDialog.vue\";\nimport thermalChart from \"../chart/thermalChart.vue\";\nimport regionTable from \"../chart/regionTable.vue\";\nexport default {\n  name: 'OD',\n  //od组件\n  components: {\n    lineChart: lineChart,\n    barChart: barChart,\n    tableShow: tableShow,\n    detailDialog: detailDialog,\n    thermalChart: thermalChart,\n    regionTable: regionTable\n  },\n  props: ['pageType', 'triggerType', 'dataArr', 'echartArr', 'componentName', 'title', 'chartName'],\n  data: function data() {\n    return {};\n  },\n  methods: {},\n  mounted: function mounted() {},\n  watch: {}\n};",{"version":3,"sources":["OD.vue"],"names":[],"mappings":";;;;;;;;;AAUA,OAAA,SAAA;AACA,OAAA,QAAA;AACA,OAAA,SAAA;AACA,OAAA,YAAA;AACA,OAAA,YAAA;AACA,OAAA,WAAA;AACA,eAAA;AACA,EAAA,IAAA,EAAA,IADA;AACA;AACA,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,YAAA,EAAA,YALA;AAMA,IAAA,WAAA,EAAA;AANA,GAFA;AAUA,EAAA,KAAA,EAAA,CAAA,UAAA,EAAA,aAAA,EAAA,SAAA,EAAA,WAAA,EAAA,eAAA,EAAA,OAAA,EAAA,WAAA,CAVA;AAWA,EAAA,IAXA,kBAWA;AACA,WAAA,EAAA;AAGA,GAfA;AAgBA,EAAA,OAAA,EAAA,EAhBA;AAiBA,EAAA,OAjBA,qBAiBA,CAAA,CAjBA;AAkBA,EAAA,KAAA,EAAA;AAlBA,CAAA","sourcesContent":["<template>\r\n    <div class=\"setion\">\r\n        <div class=\"border\">\r\n            <detailDialog />\r\n            <thermalChart :pageType=\"pageType\" :list=\"dataArr\" :status=\"triggerType\" :title=\"title\" />\r\n        </div>\r\n    </div>\r\n</template>\r\n\r\n<script>\r\nimport lineChart from '../chart/lineChart.vue';\r\nimport barChart from '../chart/barChart.vue';\r\nimport tableShow from '../chart/tableShow.vue';\r\nimport detailDialog from '../chart/detailDialog.vue';\r\nimport thermalChart from '../chart/thermalChart.vue';\r\nimport regionTable from '../chart/regionTable.vue';\r\nexport default {\r\n    name: 'OD', //od组件\r\n    components: {\r\n        lineChart,\r\n        barChart,\r\n        tableShow,\r\n        detailDialog,\r\n        thermalChart,\r\n        regionTable\r\n    },\r\n    props: ['pageType', 'triggerType', 'dataArr', 'echartArr', 'componentName', 'title', 'chartName'],\r\n    data() {\r\n        return {\r\n\r\n        };\r\n    },\r\n    methods: {},\r\n    mounted() { },\r\n    watch: {\r\n    }\r\n\r\n};\r\n</script>\r\n<style scoped>\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>"],"sourceRoot":"src/components/target"}]}
+{"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\\OD.vue?vue&type=script&lang=js&","dependencies":[{"path":"E:\\视频边缘计算管理平台\\TransFlow\\src\\components\\target\\OD.vue","mtime":1677484923538},{"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//\nimport lineChart from \"../chart/lineChart.vue\";\nimport barChart from \"../chart/barChart.vue\";\nimport tableShow from \"../chart/tableShow.vue\";\nimport detailDialog from \"../chart/detailDialog.vue\";\nimport thermalChart from \"../chart/thermalChart.vue\";\nimport regionTable from \"../chart/regionTable.vue\";\nexport default {\n  name: 'OD',\n  //od组件\n  components: {\n    lineChart: lineChart,\n    barChart: barChart,\n    tableShow: tableShow,\n    detailDialog: detailDialog,\n    thermalChart: thermalChart,\n    regionTable: regionTable\n  },\n  props: ['pageType', 'triggerType', 'dataArr', 'echartArr', 'componentName', 'title', 'chartName'],\n  data: function data() {\n    return {};\n  },\n  methods: {},\n  mounted: function mounted() {},\n  watch: {}\n};",{"version":3,"sources":["OD.vue"],"names":[],"mappings":";;;;;;;;;AAUA,OAAA,SAAA;AACA,OAAA,QAAA;AACA,OAAA,SAAA;AACA,OAAA,YAAA;AACA,OAAA,YAAA;AACA,OAAA,WAAA;AACA,eAAA;AACA,EAAA,IAAA,EAAA,IADA;AACA;AACA,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,YAAA,EAAA,YALA;AAMA,IAAA,WAAA,EAAA;AANA,GAFA;AAUA,EAAA,KAAA,EAAA,CAAA,UAAA,EAAA,aAAA,EAAA,SAAA,EAAA,WAAA,EAAA,eAAA,EAAA,OAAA,EAAA,WAAA,CAVA;AAWA,EAAA,IAXA,kBAWA;AACA,WAAA,EAAA;AAGA,GAfA;AAgBA,EAAA,OAAA,EAAA,EAhBA;AAiBA,EAAA,OAjBA,qBAiBA,CAAA,CAjBA;AAkBA,EAAA,KAAA,EAAA;AAlBA,CAAA","sourcesContent":["<template>\r\n    <div class=\"setion\">\r\n        <div class=\"border\">\r\n            <detailDialog />\r\n            <thermalChart :pageType=\"pageType\" :list=\"dataArr\" :status=\"triggerType\" :title=\"title\" ref=\"ODChartRef\"/>\r\n        </div>\r\n    </div>\r\n</template>\r\n\r\n<script>\r\nimport lineChart from '../chart/lineChart.vue';\r\nimport barChart from '../chart/barChart.vue';\r\nimport tableShow from '../chart/tableShow.vue';\r\nimport detailDialog from '../chart/detailDialog.vue';\r\nimport thermalChart from '../chart/thermalChart.vue';\r\nimport regionTable from '../chart/regionTable.vue';\r\nexport default {\r\n    name: 'OD', //od组件\r\n    components: {\r\n        lineChart,\r\n        barChart,\r\n        tableShow,\r\n        detailDialog,\r\n        thermalChart,\r\n        regionTable\r\n    },\r\n    props: ['pageType', 'triggerType', 'dataArr', 'echartArr', 'componentName', 'title', 'chartName'],\r\n    data() {\r\n        return {\r\n\r\n        };\r\n    },\r\n    methods: {},\r\n    mounted() { },\r\n    watch: {\r\n    }\r\n\r\n};\r\n</script>\r\n<style scoped>\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>"],"sourceRoot":"src/components/target"}]}

src/components/chart/avgChart.vue

@@ -205,11 +205,25 @@ export default {
             window.addEventListener('resize', function() {
                 myChart.resize();
             });
+            //  this.$nextTick(() => {
+            //     myChart.setOption(option)
+            //     myChart.resize();
+            // })
         }
     },
     mounted() {
+        this.drawBar(this.typeValue);
     },
-  
+    watch: {
+        typeValue: {
+            handler(newVal) {
+                if (newVal) {
+                    this.drawBar(newVal);
+                }
+            },
+            deep: true
+        }
+    }
 };
 </script>
 <style>

src/components/chart/barChart.vue

@@ -128,6 +128,10 @@ export default {
             window.addEventListener('resize', function() {
                 myChart.resize();
             });
+            //  this.$nextTick(() => {
+            //     myChart.setOption(option)
+            //     myChart.resize();
+            // })
         }
     },
     mounted() {

src/components/chart/lineChart.vue

@@ -79,7 +79,7 @@ export default {
                 myChart = this.$echarts.init(this.$refs.lineChart);
             }
             // var series = []
-
+           
 
 
 
@@ -140,11 +140,17 @@ export default {
                 ],
                 series: this.getMessage(newVal, title)
             };
-            myChart.setOption(option)
+             myChart.setOption(option);
-
+            window.addEventListener('resize', function() {
-            window.addEventListener('resize', function () {
                 myChart.resize();
             });
+//  this.$nextTick(() => {
+//   myChart.setOption(option)
+//                 myChart.resize();
+//             })
+          
+
+           
         },
 
         getMessage(newVal, title) {

src/components/chart/pieChart.vue

@@ -111,13 +111,13 @@ export default {
             };
 
             myChart.setOption(option);
-
-            // window.onresize = () => {  // 根据窗口大小变化图表自适应
-            //     myChart.resize();
-            // };
             window.addEventListener('resize', function() {
                 myChart.resize();
             });
+            //  this.$nextTick(() => {
+            //     myChart.setOption(option)
+            //     myChart.resize();
+            // })
         }
     },
     mounted() {

src/components/chart/thermalChart.vue

@@ -7,36 +7,11 @@ export default {
     name: 'thermalChart', //热点图组件
     data() {
         return {
-            endData: [],
+            thermalChartData:[]
-            startData: [],
-            odData: [
-                {
-                    data: [{
-                        val: 1,
-                        start: 'zone1'
-                    },
-                    {
-                        val: 2,
-                        start: 'zone2'
-                    }],
-                    end: 'zone1'
-                },
-                {
-                    data: [{
-                        val: 3,
-                        start: 'zone1'
-                    },
-                    {
-                        val: 4,
-                        start: 'zone2'
-                    }],
-                    end: 'zone2'
-                }
-            ]
         };
     },
     created() {
-        
+
     },
     props: {
         list: {
@@ -61,23 +36,24 @@ export default {
     methods: {
         //处理od组件数据
         ODhanlde(odData) {
+            console.log(odData);
             // var odData = this.odData
             var chartData = []
             var start = []
             for (let i = 0; i < odData.length; i++) {
-
                 let item = odData[i].data
-                console.log(item);
                 for (let j = 0; j < item.length; j++) {
                     start.push(item[j].start)
                     // 数组去重
 
                     // od图的数据
-                    chartData.push([i, j, item[j].val])
+                    chartData.push([i, j, item[j].quantity])
                     // console.log([i,j,item[j].val]);
                 }
             }
-            console.log(chartData, this.unique(start), 'od图的数据');
+            // this.thermalChartData = chartData
+            return chartData
+            // console.log(chartData, this.unique(start), 'od图的数据');
         },
         //数组去重
         unique(arr) {
@@ -88,95 +64,110 @@ export default {
             return newArr
         },
         // 绘制热力图
-        drawThermalChart(odData) {
+        drawThermalChart(odData, startEnd) {
-            this.ODhanlde(odData
+            
-            )
+            // console.log(chartData);
             let myChart = this.$echarts.init(this.$refs.thermalChart);
             let option = {
-                grid: {
+                dataZoom: [
-                    left: '2%',
+                    {
-                    right: '4%',
+                        id: "dataZoomY",
-                    bottom: '10%',
+                        type: "slider",
-                    top: '20%',
+                        yAxisIndex: [0],
-                    containLabel: true
+                        startValue: 0,
+                        endValue: 10,
+                        filterMode: "empty",
+                    },
+                ],
+                tooltip: {
+                    position: "top",
+                    // formatter: function (params) {
+                    //     return (
+                    //         "学历：" + days[params.value[1]] + "<br/>" + "人数：" + params.data[2]
+                    //     );
+                    // },
+                },
+                animation: false,
+                grid: {
+                    left: "3%",
+                    right: "8%",
+                    bottom: "8%",
+                    containLabel: true,
                 },
-                textStyle: { color: '#666', fontSize: 13 },
-                tooltip: {},
                 xAxis: {
-                    nameTextStyle: { color: '#666', padding: [0, 0, -10, 0], fontSize: 13 },
+                    type: "category",
-                    axisLabel: { interval: 0, textStyle: { fontSize: 13 } },
+                    data: startEnd.start.split(','),
-                    axisTick: { lineStyle: { color: '#c8c8c8', width: 1 }, show: true },
+                    axisLine: {
-                    splitLine: { show: false },
+                        lineStyle: {
-                    axisLine: { lineStyle: { color: '#c8c8c8', width: 1 }, show: true },
+                            color: "#000",
-                    type: 'category',
+                        },
-                    data: ['a','b','c','d'],
+                    },
-                    splitArea: { show: true, areaStyle: { color: ['rgba(200,200,200,0.3)', 'rgba(200,200,200,0.2)'] } }
+                    axisLabel: {
+                        interval: 0,
+                        rotate: 40,
+                    },
+                    splitArea: {
+                        show: true,
+                    },
+                    // name: "镇街",
                 },
                 yAxis: {
-                    nameTextStyle: { color: '#666', padding: [0, 0, -10, 0], fontSize: 13 },
+                    type: "category",
-                    axisLabel: { interval: 0, textStyle: { fontSize: 13 } },
+                    data: startEnd.end.split(','),
-                    axisTick: { lineStyle: { color: '#c8c8c8', width: 1 }, show: true },
+                    axisLine: {
-                    splitLine: { show: false },
+                        lineStyle: {
-                    axisLine: { lineStyle: { color: '#c8c8c8', width: 1 }, show: true },
+                            color: "#000",
-                    type: 'category',
+                        },
-                    data: ['a','b','c','d'],
+                    },
+                    axisLabel: {
+                        interval: 0,
+                        rotate: 40,
+                    },
+                    splitArea: {
+                        show: true,
+                    },
+                    // name: "",
+                },
+                visualMap: {
+                    min: 1,
+                    max: 50,
+                    calculable: true,
+                    orient: "horizontal",
+                    left: "center",
+                    bottom: "1%",
+                    text: ["50", "1"], // 文本，默认为数值文本
+                    //color:['#20a0ff','#D2EDFF'],
+                    calculable: false,
+                    color: ["#22DDDD", "#fec42c", "#80F1BE"],
                 },
-                visualMap: [
-                    {
-                        min: 100,
-                        max: 400,
-                        calculable: false,
-                        orient: 'horizontal',
-                        left: 'center',
-                        top: 20,
-                        color: ['#C7021D', '#79E73C'],
-                        text: ['高', '低'],
-                        textStyle: { color: '#666', fontSize: 13 }
-                    }
-                ],
                 series: [
                     {
-                        type: 'heatmap',
+                        name: "OD图",
-                        // pageSize: 20,
+                        type: "heatmap",
-                        pointSize: 10,
+                        data: this.ODhanlde(odData),
-                        blurSize: 10,
+                        label: {
-                        data: [
+                            normal: {
-                            [0, 0, 100],
+                                show: true,
-                            [0, 1, 100],
+                            },
-                            [0, 2, 100],
+                        },
-                            [0, 3, 100],
-
-
-                            [1, 0, 120],
-                            [1, 1, 120],
-                            [1, 2, 125],
-                            [1, 3, 120],
-
-
-                            [2, 0, 120],
-                            [2, 1, 140],
-                            [2, 2, 140],
-                            [2, 3, 140],
-
-
-                            [3, 0, 200],
-                            [3, 1, 200],
-                            [3, 2, 200],
-                            [3, 3, 200]
-
-                        ],
-                        label: { show: true, color: '#fff' },
                         itemStyle: {
-                            borderColor: 'rgba(255, 255, 255, 0.5)',
+                            emphasis: {
-                            emphasis: { shadowBlur: 0, shadowColor: 'rgba(255, 255, 255, 0.5)' }
+                                shadowBlur: 10,
-                        }
+                                shadowColor: "rgba(120, 0, 0, 0.5)",
-                    }
+                            },
-                ]
+                        },
+                    },
+                ],
             };
+
             myChart.setOption(option);
             window.addEventListener('resize', function () {
                 myChart.resize();
             });
+            //   this.$nextTick(() => {
+            //     myChart.setOption(option)
+            //     myChart.resize();
+            // })
         }
     },
     mounted() {
@@ -187,23 +178,6 @@ export default {
 
     },
     watch: {
-        list: {
-            handler(newVal) {
-                console.log(newVal, 'od组件数据');
-                // this.odData = []
-                // console.log(newVal ,'1111111111');
-                // if (newVal) {
-                //     newVal[newVal.length - 1].ob_data.forEach(ele => {
-                //         ele.forEach(item => {
-                //             this.odData.push([])
-                //         })
-                //     })
-                // }
-                // console.log(this.odData,'155');
-                this.drawThermalChart();
-            },
-            // immediate:true
-        }
 
     }
 };

src/components/target/OD.vue

@@ -1,50 +0,0 @@
-<template>
-    <div class="setion">
-        <div class="border">
-            <detailDialog />
-            <thermalChart :pageType="pageType" :list="dataArr" :status="triggerType" :title="title" ref="ODChartRef"/>
-        </div>
-    </div>
-</template>
-
-<script>
-import lineChart from '../chart/lineChart.vue';
-import barChart from '../chart/barChart.vue';
-import tableShow from '../chart/tableShow.vue';
-import detailDialog from '../chart/detailDialog.vue';
-import thermalChart from '../chart/thermalChart.vue';
-import regionTable from '../chart/regionTable.vue';
-export default {
-    name: 'OD', //od组件
-    components: {
-        lineChart,
-        barChart,
-        tableShow,
-        detailDialog,
-        thermalChart,
-        regionTable
-    },
-    props: ['pageType', 'triggerType', 'dataArr', 'echartArr', 'componentName', 'title', 'chartName'],
-    data() {
-        return {
-
-        };
-    },
-    methods: {},
-    mounted() { },
-    watch: {
-    }
-
-};
-</script>
-<style scoped>
-.typeContent {
-    box-sizing: border-box;
-}
-
-.border {
-    width: 100%;
-    margin-bottom: 20px;
-    position: relative;
-}
-</style>

src/components/target/typeChart.vue

@@ -4,42 +4,44 @@
         <!-- <p class="chartTitle"><span class="titleIcon"></span> {{ componentName }} {{ triggerType }}</p> -->
         <!-- 触发数据数值渲染 -->
         <div class="typeContent">
-            <div v-if="dataArr && dataArr.length != 0 && dataArr != undefined">
+            <div v-if="newDataArr && newDataArr.length != 0 && newDataArr != undefined">
-                <div v-if="title == '类型' && echartArr.includes('数值')" style="display:flex">
+                <div v-if="title == '类型'" style="display:flex">
-                    <el-card v-for="(n, i) in dataArr[0].type_data" :key="i" style="width: 150px; margin-bottom: 20px; text-align: center">
+                    <el-card v-for="(n, i) in newDataArr[0].type_data" :key="i"
+                        style="width: 150px; margin-bottom: 20px; text-align: center">
                         <div>
-                            <span style="font-size: 15px;">{{ n.name }}</span
+                            <span style="font-size: 15px;">{{ n.name }}</span><br />
-                            ><br />
                             <span style="font-size: 30px; font-weight: bold">{{ n.quantity }}</span>
                         </div>
                         <div>
                             <div>
-                                {{ dataArr[0].time ? dataArr[0].time : '' }}
+                                {{ newDataArr[0].time ? newDataArr[0].time : '' }}
                             </div>
                         </div>
                     </el-card>
                 </div>
             </div>
             <el-card v-show="echartArr.includes('数值')" style="width: 150px; margin-bottom: 20px; text-align: center">
-                <div v-if="dataArr && dataArr.length != 0 && dataArr != undefined">
+                <div v-if="newDataArr && newDataArr.length != 0 && newDataArr != undefined">
                     <div v-if="title == '类型'">
                         <span style="font-size: 15px;">类型数量总和</span><br />
                         <span style="font-size: 30px; font-weight: bold">
-                            {{ getTotal(dataArr) }}
+                            {{ getTotal(newDataArr) }}
                         </span>
                     </div>
-                    <div style="font-size: 30px; font-weight: bold" v-if="title == '速度'">
+                    <div style="font-size: 30px; font-weight: bold"
+                        v-if="title == '速度' && dataArr.length != 0 && dataArr != undefined">
                         <span style="font-size: 15px;">速度</span><br />
                         <!-- <span style="font-size: 30px; font-weight: bold">{{ typeValue.speed }}</span> -->
-                        <span style="font-size: 30px; font-weight: bold">{{ dataArr[0].speed? dataArr[0].speed : '' }}</span>
+                        <span style="font-size: 30px; font-weight: bold">{{ newDataArr[0].speed }}</span>
                     </div>
-                    <div style="font-size: 30px; font-weight: bold" v-if="title == '流量'">
+                    <div style="font-size: 30px; font-weight: bold"
+                        v-if="title == '流量' && dataArr.length != 0 && dataArr != undefined">
                         <span style="font-size: 15px;">流量</span><br />
-                        <span style="font-size: 30px; font-weight: bold">{{ dataArr[0].flow? dataArr[0].flow : '' }}</span>
+                        <span style="font-size: 30px; font-weight: bold">{{ newDataArr[0].flow }}</span>
                     </div>
                     <div style="font-size: 30px; font-weight: bold" v-if="title == '车头时距'">
                         <span style="font-size: 15px;">车头时距</span><br />
-                        <span style="font-size: 30px; font-weight: bold">{{ dataArr[0].headway?dataArr[0].headway:'' }}</span>
+                        <span style="font-size: 30px; font-weight: bold">{{ newDataArr[0].headway }}</span>
                     </div>
                     <div style="font-size: 30px; font-weight: bold" v-if="title == '排队数'">
                         <span style="font-size: 15px;">排队数</span><br />
@@ -47,15 +49,15 @@
                     </div>
                     <div style="font-size: 30px; font-weight: bold" v-if="title == '检测数'">
                         <span style="font-size: 15px;">检测数</span><br />
-                        <span style="font-size: 30px; font-weight: bold">{{ dataArr[0].n_stay?dataArr[0].n_stay:'' }}</span>
+                        <span style="font-size: 30px; font-weight: bold">{{ newDataArr[0].n_stay }}</span>
                     </div>
                     <div style="font-size: 30px; font-weight: bold" v-if="title == '延误'">
                         <span style="font-size: 15px;">延误</span><br />
-                        <span style="font-size: 30px; font-weight: bold">{{ dataArr[0].ave_delay?dataArr[0].ave_delay:'' }}</span>
+                        <span style="font-size: 30px; font-weight: bold">{{ newDataArr[0].ave_delay }}</span>
                     </div>
                     <div>
                         <div>
-                            {{ dataArr[0].time ? dataArr[0].time : '' }}
+                            {{ newDataArr[0].time ? newDataArr[0].time : '' }}
                         </div>
                     </div>
                 </div>
@@ -65,75 +67,48 @@
             </el-card>
         </div>
         <div v-show="echartArr.includes('表格')">
-            <div class="tableTitle" v-if="dataArr && dataArr.length != 0 && dataArr != undefined">
+            <div class="tableTitle" v-if="newDataArr && newDataArr.length != 0 && newDataArr != undefined">
                 <div>
                     <span
-                        style="width: 10px;height:10px;border-radius: 50%;background-color: #3297ff;display: inline-block;vertical-align: middle;margin-right: 8px;"
+                        style="width: 10px;height:10px;border-radius: 50%;background-color: #3297ff;display: inline-block;vertical-align: middle;margin-right: 8px;"></span>
-                    ></span>
+                    <span style="font-size:18px;">{{ this.chartName + '-' + this.componentName + '-' + '表格' + '-' +
-                    <span style="font-size:18px;">{{ this.chartName + '-' + this.componentName + '-' + '表格' + '-' + triggerType }}</span>
+                        triggerType }}</span>
                 </div>
                 <div class="tableTime">
-                    {{ dataArr[0].time ? dataArr[0].time : '' }}
+                    {{ newDataArr[0].time ? newDataArr[0].time : '' }}
                 </div>
             </div>
             <div v-if="pageType == '断面'" style="margin-bottom: 20px; border: 1px solid #e4e7ed">
-                <tableShow :msg="dataArr" :triggerType="triggerType" />
+                <tableShow :msg="newDataArr" :triggerType="triggerType" />
             </div>
             <div v-if="pageType == '区域'">
-                <regionTable :msg="dataArr" :triggerType="triggerType" />
+                <regionTable :msg="newDataArr" :triggerType="triggerType" />
             </div>
         </div>
         <div class="border" v-if="echartArr.includes('曲线图')">
             <detailDialog />
-            <lineChart
+            <lineChart :componentName="componentName" :chartName="chartName" :pageType="pageType" :list="newDataArr"
-                :componentName="componentName"
+                :status="triggerType" :title="title" :typeValue="typeValue" ref="lineChartRef" />
-                :chartName="chartName"
-                :pageType="pageType"
-                :list="dataArr"
-                :status="triggerType"
-                :title="title"
-                :typeValue="typeValue"
-                ref="lineChartRef"
-            />
         </div>
         <div class="border" v-if="echartArr.includes('饼状图')">
             <detailDialog />
-            <pieChart
+            <pieChart :componentName="componentName" :chartName="chartName" :pageType="pageType" :list="newDataArr"
-                :componentName="componentName"
+                :status="triggerType" :title="title" :typeValue="typeValue" ref="pieChartRef" />
-                :chartName="chartName"
-                :pageType="pageType"
-                :list="dataArr"
-                :status="triggerType"
-                :title="title"
-                :typeValue="typeValue"
-                ref="pieChartRef"
-            />
         </div>
         <div class="border" v-if="echartArr.includes('均值图')">
             <detailDialog />
-            <avgChart
+            <avgChart ref="avgChartRef" :componentName="componentName" :chartName="chartName" :pageType="pageType"
-                ref="avgChartRef"
+                :list="newDataArr" :status="triggerType" :title="title" :typeValue="typeValue" />
-                :componentName="componentName"
-                :chartName="chartName"
-                :pageType="pageType"
-                :list="dataArr"
-                :status="triggerType"
-                :title="title"
-                :typeValue="typeValue"
-            />
         </div>
         <div class="border" v-if="echartArr.includes('直方图')">
             <detailDialog />
-            <barChart
+            <barChart :componentName="componentName" :chartName="chartName" :pageType="pageType" :list="newDataArr"
-                :componentName="componentName"
+                :status="triggerType" :title="title" :typeValue="typeValue" ref="barChartRef" />
-                :chartName="chartName"
+        </div>
-                :pageType="pageType"
+        <div class="border" v-if="echartArr.includes('矩阵图')">
-                :list="dataArr"
+            <detailDialog />
-                :status="triggerType"
+            <thermalChart :componentName="componentName"  :pageType="pageType" :list="newDataArr"
-                :title="title"
+                :status="triggerType" :title="title" :typeValue="typeValue" ref="ODChartRef" />
-                :typeValue="typeValue"
-                ref="barChartRef"
-            />
         </div>
     </div>
 </template>
@@ -146,9 +121,10 @@ import tableShow from '../chart/tableShow.vue';
 import pieChart from '../chart/pieChart.vue';
 import detailDialog from '../chart/detailDialog.vue';
 import regionTable from '../chart/regionTable.vue';
+import thermalChart from '../chart/thermalChart.vue';
 export default {
     name: 'typeChart', //类型组件
-    props: ['typeValue', 'pageType', 'triggerType', 'dataArr', 'echartArr', 'componentName', 'title', 'chartName'],
+    props: ['typeValue', 'pageType', 'triggerType', 'dataArr', 'echartArr', 'componentName', 'title', 'chartName','startEndData'],
     components: {
         lineChart,
         barChart,
@@ -156,7 +132,8 @@ export default {
         detailDialog,
         regionTable,
         pieChart,
-        avgChart
+        avgChart,
+        thermalChart
     },
     data() {
         return {
@@ -170,51 +147,61 @@ export default {
 
             valueShow: {},
             //排队数
-            queue: ''
+            queue: '',
+            newDataArr: []
         };
     },
     created() {
-        console.log(this.title);
+        // console.log(this.title);
+        console.log(this.componentName);
     },
     methods: {
         // 计算类型数量的总和
-
+        getDataArr(val) {
+            this.newDataArr = val
+            this.getNewQueue(this.newDataArr)
+        },
         getTotal(dataArr) {
-            if(this.title=='类型'){
+            if (this.title == '类型') {
-             return dataArr[0].type_data.reduce(function(prev, cur) {
+                return dataArr[0].type_data.reduce(function (prev, cur) {
-                return cur.quantity + prev;
+                    return cur.quantity + prev;
-            }, 0);   
+                }, 0);
             }
         },
         // 计算类型的数值
-        getNewQueue(dataArr) {
+        getNewQueue(val) {
-           
 
-            if (dataArr[0].timeMode == '触发') {
+            if (val[0].n_queue) {
-                this.queue = dataArr[0].n_queue;
+                this.queue = val[0].n_queue;
-            } else if (dataArr[0].timeMode == '周期统计') {
+            } else if (val[0].ave_queue) {
-                this.queue = dataArr[0].ave_queue;
+                this.queue = val[0].ave_queue;
-            } else if (dataArr[0].timeMode == '周期时刻') {
             }
-        }
+        },
+
     },
 
     computed: {
         // 获取类型的总数量
     },
-    mounted() {},
+    mounted() { },
     watch: {
         // 监听触发数据
-        dataArr: {
+        // dataArr: {
-            handler(newVal) {
+        //     handler(newVal) {
-                // console.log('dataArr', newVal);
+        //         // console.log('dataArr', newVal);
-                if (newVal != undefined && newVal.length != 0) {
+        //         if (newVal != undefined && newVal.length != 0) {
-                    this.getNewQueue(newVal);
+        //             this.getNewQueue(newVal);
-                }
+        //         }
-            },
+        //     },
 
-            immediate: true
+        //     immediate: true
-        }
+        // }
+        // typeValue:{
+        //          handler(newVal) {
+        //         // console.log('dataArr', newVal);
+        //     },
+        //      immediate: true
+        // }
     }
 };
 </script>

src/views/bounced/analysisConfiguration.vue

@@ -106,6 +106,7 @@
                                     maxlength="30"
                                     placeholder="请输入"
                                     @blur="updateName($event)"
+                                   
                                 />
                             </template>
                         </el-table-column>
@@ -116,6 +117,7 @@
                                     v-model="scope.row.longitude"
                                     maxlength="20"
                                     placeholder="请输入"
+                                    oninput ="value=value.replace(/[^0-9.]/g,'')"
                                 />
                             </template>
                         </el-table-column>
@@ -126,6 +128,7 @@
                                     v-model="row.latitude"
                                     maxlength="20"
                                     placeholder="请输入"
+                                      oninput ="value=value.replace(/[^0-9.]/g,'')"
                                 />
                             </template>
                         </el-table-column>

src/views/bounced/analysisPreview.vue

@@ -67,8 +67,8 @@ export default {
       //   const host = 'ws://49.234.27.18:10087/'; // 一个测试用url，改成给的，ws://broker.emqx.io:8083/mqtt
       var ip = window.location.host.split(":")[0];
         console.log("ip",ip)
-      const host = `ws://${ip}:10087`;
+    //   const host = `ws://${ip}:10087`;
-    //   const host = 'ws://172.16.1.168:10087/';
+      const host = 'ws://172.16.1.168:10087/';
 
       const options = {
         // 配置

src/views/bounced/dataBoard.vue

@@ -6,8 +6,8 @@
             <div class="dataBoard" ref="dataBoard" v-if="activeName == 'second'">
                 <!-- 断面 -->
                 <div class="plate1" ref="plate1">
-                    <div :class="sectionData.length <= 1 ? 'sectionBox' : 'section'" ref="section"
+                    <div :class="sectionData.length <= 1 ? 'sectionBox' : 'section'" ref="section" v-for="s in sectionData"
-                        v-for="(s, i) in sectionData" :key="s.analogAreaComponentId">
+                        :key="s.analogAreaComponentId">
                         <template>
                             <div ref="sectionContent">
                                 <div>
@@ -16,35 +16,36 @@
                                     </p>
                                     <!-- <span class="downPull1" data-num="1" @click="sectionHandle(i)"></span> -->
                                 </div>
-                                <el-tabs :lazy=true>
+                                <el-tabs>
-                                    <el-collapse v-model="upName" @change="handleChange">
+                                    <el-collapse v-model="acticveName" @change="handleChange">
                                         <div style="position:relative" v-for="o in s.children"
                                             :key="o.analogAreaComponentId">
                                             <div class="titleGnag"></div>
                                             <el-collapse-item :title="o.componentName + o.timeMode"
                                                 :name="o.analogAreaComponentId">
-                                                <OD v-if="o.componentName.includes('OD')" :pageType="o.graphicType"
+
-                                                    triggerType="触发" :componentName="o.componentName"
-                                                    :echartArr="o.presentationForm" :dataArr="o.trigger"
-                                                    :title="o.componentName.split('_')[0]" :chartName="o.combinationName" />
                                                 <!--触发的组件  -->
                                                 <typeChart ref="typeChartRef" v-if="o.timeMode === '触发'"
                                                     :pageType="o.graphicType" :triggerType="o.timeMode"
                                                     :componentName="o.componentName" :dataArr="o.trigger"
                                                     :echartArr="o.presentationForm" :title="o.componentName.split('_')[0]"
-                                                    :chartName="o.combinationName" :typeValue="typeTimeMode" />
+                                                    :chartName="o.combinationName" :typeValue="typeTimeMode"
+                                                    :startEndData="{ start: o.startSectionNames, end: o.endSectionNames }" />
                                                 <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" />
+                                                    :chartName="o.combinationName" :typeValue="typeCycleTimeData"
+                                                    :startEndData="{ start: o.startSectionNames, end: o.endSectionNames }" />
+
                                                 <!-- 周期统计的组件 -->
                                                 <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"
+                                                    :dataArr="o.cycleStatisticsData" :echartArr="o.presentationForm"
                                                     :title="o.componentName.split('_')[0]" :chartName="o.combinationName"
-                                                    :typeValue="typeCycleStatistics" />
+                                                    :typeValue="typeCycleStatistics"
+                                                    :startEndData="{ start: o.startSectionNames, end: o.endSectionNames }" />
                                             </el-collapse-item>
                                         </div>
                                     </el-collapse>
@@ -60,13 +61,12 @@
 </template>
 <script>
 import typeChart from '../../components/target/typeChart.vue';
-import OD from '../../components/target/OD.vue';
 // import {mapMutation} from 'vuex'
 import { getComponentSection } from '../../api/index';
 export default {
     components: {
         typeChart,
-        OD
+
     },
     props: {
         activeName: {
@@ -93,7 +93,7 @@ export default {
             }
         },
         //周期统计
-        cycleStatistics: {
+        cycleStatisticsData: {
             type: Array,
             default() {
                 return [];
@@ -102,7 +102,7 @@ export default {
     },
     data() {
         return {
-            upName: [],
+            acticveName: [],
             title1: '01断面',
             title2: '01区域',
             dialogVisible: false,
@@ -145,39 +145,97 @@ export default {
         // 手风琴下拉切换
         handleChange(val) {
 
-                this.$nextTick(function () {
+            this.$nextTick(function () {
-                    var myEvent = new Event("resize");
+                var myEvent = new Event("resize");
-                    window.dispatchEvent(myEvent);
+                window.dispatchEvent(myEvent);
-                });
+            });
 
         },
         getNew() {
             // this.idVal = ;
-            getComponentSection({ VideoId: this.$route.query.id }).then(res => {
+            getComponentSection({ VideoId: this.$route.query.id, Number: 10 }).then(res => {
                 if (res.data.code == 200) {
-                    console.log(res.data.data, '组件的数据');
+                    // console.log(res.data.data, '组件的数据');
                     this.componentList = res.data.data;
                     this.siftData();
                 }
             });
         },
+
         siftData() {
             this.sectionArr = [];
             this.sectionData = [];
             this.classify = [];
             this.componentList.forEach(val => {
+                //    console.log("val",val)
                 this.sectionArr.push(val.combinationName);
                 this.sectionArr = Array.from(new Set(this.sectionArr));
+
             });
             this.sectionData = this.sectionArr.map(item => {
+
                 item = { title: item, children: [] };
                 this.acticveName = [];
                 this.componentList.forEach(val => {
                     if (item.title == val.combinationName) {
                         this.classify.push(val);
                         item.children.push(val);
+                        if (val.timeMode == '周期统计' || this.cycleStatisticsData.length == 0) {
+                            this.cycleStatisticsData = item.cycleStatisticsData
+                            var _that = this
+                            _that.componentList.forEach(ele => {
+                                if (ele.timeMode == '周期统计') {
+                                    if (ele.cycleStatisticsData.length == 10) {
+                                        ele.cycleStatisticsData.pop();
+                                    } else {
+                                        // item.time = item.time.split('.')[0];
+                                        //     _that.typeCycleStatistics = item;
+                                        ele.cycleStatisticsData.unshift();
+                                        if (_that.$refs.typeChartRef2 != undefined) {
+                                            for (let i = 0; i < _that.$refs.typeChartRef2.length; i++) {
+                                                let itemTypeChartRef2 = _that.$refs.typeChartRef2[i];
+                                                // console.log(_this.$refs.typeChartRef[i], '触发接收的表格数据');
+                                                if (itemTypeChartRef2.length != 0 && itemTypeChartRef2.dataArr != undefined && itemTypeChartRef2.dataArr.length != 0) {
+                                                    // this.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(this.$refs.typeChartRef2[i].dataArr, _this.$refs.typeChartRe2f[i].componentName.split('_')[0])
+                                                    if (itemTypeChartRef2.echartArr.includes('时间曲线图')) {
+                                                        _that.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(_that.$refs.typeChartRef2[i].dataArr, _that.$refs.typeChartRef2[i].componentName.split('_')[0])
+                                                    }
+                                                    if (itemTypeChartRef2.echartArr.includes('数值')) {
+                                                        _that.$refs.typeChartRef2[i].getDataArr(_that.$refs.typeChartRef2[i].dataArr)
+                                                    }
+                                                    // console.log(item,'组件数据');
+                                                    if (itemTypeChartRef2.echartArr.includes('直方图') && itemTypeChartRef2.$refs.barChartRef.drawBar) {
+                                                        // 数据改变重新渲染柱状图
+                                                        // console.log(item, '组件');
+                                                        itemTypeChartRef2.$refs.barChartRef.drawBar(itemTypeChartRef2.dataArr[0])
+                                                    }
+                                                    if (itemTypeChartRef2.echartArr.includes('饼状图') && itemTypeChartRef2.$refs.pieChartRef.drawPie) {
+                                                        // 数据改变重新渲染饼图
+                                                        itemTypeChartRef2.$refs.pieChartRef.drawPie(itemTypeChartRef2.dataArr[0])
+                                                    }
+
+                                                    //  if (item.echartArr.includes('均值图') && item.$refs.avgChartRef != undefined && item.dataArr.length != 0) {
+                                                    //     item.$refs.avgChartRef.drawBar(item.dataArr[0])
+                                                    // }
+                                                    if (itemTypeChartRef2.echartArr.includes('均值图') && itemTypeChartRef2.$refs.avgChartRef != undefined) {
+                                                        itemTypeChartRef2.$refs.avgChartRef.drawBar(itemTypeChartRef2.dataArr[0])
+                                                    }
+                                                }
+
+                                            }
+                                        }
+
+                                    }
+                                }
+
+                            });
+                        }
+                        if (val.timeMode == '周期时刻' || this.cycleTimeData.length == 0) {
+                            this.cycleTimeData = item.cycleTimeData
+
+                        }
                     }
-                    this.acticveName.push([]);
+                    this.acticveName.push([val.analogAreaComponentId]);
                 });
                 return item;
             });
@@ -201,6 +259,17 @@ export default {
                 if (sectionBox[i] != undefined) {
                 }
             }
+        },
+        channge(oldVal, newVal) {
+            if (oldVal == 'second') {
+                this.sectionArr = [];
+                this.sectionData = [];
+                this.getNew();
+            } else if (newVal == 'second') {
+                this.sectionArr = [];
+                this.sectionData = [];
+                this.getNew();
+            }
         }
 
         // 触发数据的类型数值
@@ -246,31 +315,38 @@ export default {
                                     }
                                     ele.trigger.unshift(item);
                                     _this.$nextTick(() => {
-                                        for (let i = 0; i < _this.$refs.typeChartRef.length; i++) {
+                                        if (_this.$refs.typeChartRef != undefined) {
-                                            // console.log(_this.$refs.typeChartRef[i], '触发接收的表格数据');
+                                            for (let i = 0; i < _this.$refs.typeChartRef.length; i++) {
-                                            let item = _this.$refs.typeChartRef[i]
+                                                // console.log(_this.$refs.typeChartRef[i], '触发接收的表格数据');
-                                            if (item.dataArr != undefined && item.dataArr) {
+                                                let itemTypeChart = _this.$refs.typeChartRef[i]
-                                                if (item.echartArr.includes('曲线图')) {
+                                                if (itemTypeChart.dataArr != undefined && itemTypeChart.dataArr.length != 0) {
-                                                    _this.$refs.typeChartRef[i].$refs.lineChartRef.drawLine(_this.$refs.typeChartRef[i].dataArr, _this.$refs.typeChartRef[i].componentName.split('_')[0])
+                                                    if (itemTypeChart.echartArr.includes('时间曲线图')) {
-                                                }
+                                                        _this.$refs.typeChartRef[i].$refs.lineChartRef.drawLine(_this.$refs.typeChartRef[i].dataArr, _this.$refs.typeChartRef[i].componentName.split('_')[0])
-                                                if (item.echartArr.includes('直方图') && item.componentName.split('_')[0] == '类型') {
+                                                    }
-                                                    // 数据改变重新渲染柱状图
+                                                    if (itemTypeChart.echartArr.includes('数值')) {
-                                                    item.$refs.barChartRef.drawBar(item.dataArr[0])
+                                                        _this.$refs.typeChartRef[i].getDataArr(_this.$refs.typeChartRef[i].dataArr)
-                                                }
+                                                    }
-                                                if (item.echartArr.includes('饼状图') && item.componentName.split('_')[0] == '类型') {
-                                                    // 数据改变重新渲染饼图
-                                                    item.$refs.pieChartRef.drawPie(item.dataArr[0])
-                                                }
-                                                if (item.echartArr.includes('均值图') && item.$refs.avgChartRef != undefined && item.dataArr.length != 0) {
-                                                    item.$refs.avgChartRef.drawBar(item.dataArr[0])
-                                                }
-
-
 
+                                                    if (itemTypeChart.echartArr.includes('直方图') && itemTypeChart.componentName.split('_')[0]) {
+                                                        // 数据改变重新渲染柱状图
+                                                        itemTypeChart.$refs.barChartRef.drawBar(itemTypeChart.dataArr[0])
+                                                    }
+                                                    if (itemTypeChart.echartArr.includes('饼状图') && itemTypeChart.componentName.split('_')[0]) {
+                                                        // 数据改变重新渲染饼图
+                                                        itemTypeChart.$refs.pieChartRef.drawPie(itemTypeChart.dataArr[0])
+                                                    }
+                                                    if (itemTypeChart.echartArr.includes('均值图') && itemTypeChart.$refs.avgChartRef != undefined) {
+                                                        itemTypeChart.$refs.avgChartRef.drawBar(itemTypeChart.dataArr[0])
+                                                    }
+                                                    if (itemTypeChart.componentName.includes('OD') && itemTypeChart.$refs.ODChartRef != undefined && itemTypeChart.dataArr[0].ob_data.length != 0) {
+                                                        itemTypeChart.$refs.ODChartRef.drawThermalChart(itemTypeChart.dataArr[0].ob_data, itemTypeChart.startEndData)
+                                                    }
+                                                }
                                             }
                                         }
 
 
+
                                     })
                                 }
                             }
@@ -285,12 +361,14 @@ export default {
             handler(newVal) {
                 // 监听到打印周期时刻数据
                 console.log(newVal, '周期时刻数据');
-                var that = this;
+                var thatN = this;
-                if (newVal.length != 0 && this.sectionData) {
+                if (newVal != undefined && newVal.length != 0 && thatN.sectionData) {
-                    that.classify.forEach((ele, index) => {
+                    thatN.classify.forEach((ele, index) => {
-                        if (ele.cycleTimeData == undefined && ele.timeMode == '周期时刻') {
+                        // if (ele.cycleTimeData == undefined && ele.timeMode == '周期时刻') {
-                            ele.cycleTimeData = [];
+                        //     ele.cycleTimeData = [];
-                        }
+                        // }else{
+
+                        // }
                         newVal.forEach(item => {
                             if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '周期时刻') {
                                 if (ele.cycleTimeData.length == 10) {
@@ -299,83 +377,220 @@ export default {
                                     item.time = item.time.split('.')[0];
                                     if (item.type_data != null) {
                                         // 周期时刻的类型数据
-                                        that.typeCycleTimeData = item;
+                                        thatN.typeCycleTimeData = item;
                                     }
                                     ele.cycleTimeData.unshift(item);
-                                    that.$nextTick(() => {
+                                    // thatN.$nextTick(() => {
+                                    if (thatN.$refs.typeChartRef1 != undefined) {
+                                        // console.log("thatN.$refs.typeChartRef1",thatN.$refs.typeChartRef1)
                                         // 轮循周期时刻生成的各类组件
-                                        for (let i = 0; i < that.$refs.typeChartRef1.length; i++) {
+                                        for (let i = 0; i < thatN.$refs.typeChartRef1.length; i++) {
-                                            item = that.$refs.typeChartRef1[i]
+                                            let itemTypeChartRef1 = thatN.$refs.typeChartRef1[i]
-                                            if (item.dataArr) {
+                                            if (itemTypeChartRef1.length != 0 && itemTypeChartRef1.dataArr != undefined && itemTypeChartRef1.dataArr.length != 0) {
 
-                                                if (item.echartArr.includes('曲线图')) {
+                                                if (itemTypeChartRef1.echartArr.includes('时间曲线图')) {
-                                                    that.$refs.typeChartRef1[i].$refs.lineChartRef.drawLine(that.$refs.typeChartRef1[i].dataArr, that.$refs.typeChartRef[i].componentName.split('_')[0])
+                                                    thatN.$refs.typeChartRef1[i].$refs.lineChartRef.drawLine(thatN.$refs.typeChartRef1[i].dataArr, thatN.$refs.typeChartRef1[i].componentName.split('_')[0])
+                                                }
+                                                if (itemTypeChartRef1.echartArr.includes('数值')) {
+                                                    thatN.$refs.typeChartRef1[i].getDataArr(thatN.$refs.typeChartRef1[i].dataArr)
                                                 }
 
-                                                if (item.echartArr.includes('直方图') && item.componentName.split('_')[0] == '类型') {
+                                                if (itemTypeChartRef1.echartArr.includes('直方图') && itemTypeChartRef1.$refs.barChartRef.drawBar) {
                                                     // 数据改变重新渲染柱状图
-                                                    item.$refs.barChartRef.drawBar(item.dataArr[0])
+                                                    itemTypeChartRef1.$refs.barChartRef.drawBar(itemTypeChartRef1.dataArr[0])
                                                 }
-                                                if (item.echartArr.includes('饼状图') && item.componentName.split('_')[0] == '类型') {
+                                                if (itemTypeChartRef1.echartArr.includes('饼状图') && itemTypeChartRef1.$refs.pieChartRef.drawPie) {
                                                     // 数据改变重新渲染饼图
-                                                    item.$refs.pieChartRef.drawPie(item.dataArr[0])
+                                                    itemTypeChartRef1.$refs.pieChartRef.drawPie(itemTypeChartRef1.dataArr[0])
                                                 }
-                                                if (item.echartArr.includes('均值图') && item.$refs.avgChartRef != undefined && item.dataArr.length != 0) {
+                                                if (itemTypeChartRef1.echartArr.includes('均值图') && itemTypeChartRef1.$refs.avgChartRef != undefined) {
-                                                    item.$refs.avgChartRef.drawBar(item.dataArr[0])
+                                                    itemTypeChartRef1.$refs.avgChartRef.drawBar(itemTypeChartRef1.dataArr[0])
+                                                }
+                                                if (itemTypeChartRef1.componentName.includes('OD') && itemTypeChartRef1.$refs.ODChartRef != undefined && itemTypeChartRef1.dataArr[0].ob_data.length != 0) {
+                                                    itemTypeChartRef1.$refs.ODChartRef.drawThermalChart(itemTypeChartRef1.dataArr[0].ob_data, itemTypeChartRef1.startEndData)
                                                 }
                                             }
                                         }
-                                    });
+                                    }
+
+                                    // });
                                 }
                             }
                         });
                     });
+                } else {
+                    var _thatN = this
+                    _thatN.classify.forEach((ele, index) => {
+                        // if (ele.cycleTimeData == undefined && ele.timeMode == '周期时刻') {
+                        //     ele.cycleTimeData = [];
+                        // }else{
+
+                        // }
+                        // newVal.forEach(item => {
+                        if (ele.timeMode == '周期时刻') {
+                            if (ele.cycleTimeData.length == 10) {
+                                ele.cycleTimeData.pop();
+                            } else {
+                                // item.time = item.time.split('.')[0];
+                                // if (item.type_data != null) {
+                                // 周期时刻的类型数据
+                                _thatN.typeCycleTimeData = item;
+                                // }
+                                // ele.cycleTimeData.unshift(item);
+                                // _thatN.$nextTick(() => {
+                                if (_thatN.$refs.typeChartRef1 != undefined) {
+                                    // console.log("thatN.$refs.typeChartRef1",_thatN.$refs.typeChartRef1)
+                                    // 轮循周期时刻生成的各类组件
+                                    for (let i = 0; i < _thatN.$refs.typeChartRef1.length; i++) {
+                                        let itemTypeChartRef1 = thatN.$refs.typeChartRef1[i]
+                                        if (itemTypeChartRef1.length != 0 && itemTypeChartRef1.dataArr != undefined && itemTypeChartRef1.dataArr.length != 0) {
+
+                                            if (itemTypeChartRef1.echartArr.includes('时间曲线图')) {
+                                                _thatN.$refs.typeChartRef1[i].$refs.lineChartRef.drawLine(_thatN.$refs.typeChartRef1[i].dataArr, _thatN.$refs.typeChartRef1[i].componentName.split('_')[0])
+                                            }
+                                            if (itemTypeChartRef1.echartArr.includes('数值')) {
+                                                _thatN.$refs.typeChartRef1[i].getDataArr(_thatN.$refs.typeChartRef1[i].dataArr)
+                                            }
+
+                                            if (itemTypeChartRef1.echartArr.includes('直方图') && itemTypeChartRef1.$refs.barChartRef.drawBar) {
+                                                // 数据改变重新渲染柱状图
+                                                itemTypeChartRef1.$refs.barChartRef.drawBar(itemTypeChartRef1.dataArr[0])
+                                            }
+                                            if (itemTypeChartRef1.echartArr.includes('饼状图') && itemTypeChartRef1.$refs.pieChartRef.drawPie) {
+                                                // 数据改变重新渲染饼图
+                                                itemTypeChartRef1.$refs.pieChartRef.drawPie(itemTypeChartRef1.dataArr[0])
+                                            }
+                                            if (itemTypeChartRef1.echartArr.includes('均值图') && itemTypeChartRef1.$refs.avgChartRef != undefined) {
+                                                itemTypeChartRef1.$refs.avgChartRef.drawBar(itemTypeChartRef1.dataArr[0])
+                                            }
+                                            if (itemTypeChartRef1.componentName.includes('OD') && itemTypeChartRef1.$refs.ODChartRef != undefined && itemTypeChartRef1.dataArr[0].ob_data.length != 0) {
+                                                itemTypeChartRef1.$refs.ODChartRef.drawThermalChart(itemTypeChartRef1.dataArr[0].ob_data, itemTypeChartRef1.startEndData)
+                                            }
+                                        }
+                                    }
+                                }
+
+                                // });
+                            }
+                        }
+                        // });
+                    });
                 }
             },
             immediate: true
         },
-        cycleStatistics: {
+        //周期统计
+        cycleStatisticsData: {
             handler(newVal) {
-                if (newVal.length != 0 && this.sectionData) {
+
-                    this.componentList.forEach(ele => {
+                var that = this;
-                        if (ele.cycleStatistics == undefined && ele.timeMode == '周期统计') {
+                if (newVal != undefined && newVal.length != 0 && that.sectionData) {
-                            ele.cycleStatistics = [];
+                    console.log("newVal", newVal)
-                        }
+                    that.componentList.forEach(ele => {
+                        // if (ele.cycleStatisticsData == undefined && ele.timeMode == '周期统计') {
+                        //     ele.cycleStatisticsData = [];
+                        // }else{
+                        //     // ele.cycleStatisticsData = 
+                        // }
+                        console.log(" ele.cycleStatisticsData", ele.cycleStatisticsData)
                         newVal.forEach(item => {
                             if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '周期统计') {
-                                if (ele.cycleStatistics.length == 10) {
+                                if (ele.cycleStatisticsData.length == 10) {
-                                    ele.cycleStatistics.pop();
+                                    ele.cycleStatisticsData.pop();
                                 } else {
+                                    ele.cycleStatisticsData.unshift(item);
                                     item.time = item.time.split('.')[0];
                                     if (item.type_data != null) {
-                                        this.typeCycleStatistics = item;
+                                        that.typeCycleStatistics = item;
                                     }
-                                    ele.cycleStatistics.unshift(item);
+                                    console.log(" ele.cycleStatisticsData", ele.cycleStatisticsData)
-                                    for (let i = 0; i < this.$refs.typeChartRef2.length; i++) {
+                                    if (that.$refs.typeChartRef2 != undefined) {
-                                        item = that.$refs.typeChartRef2[i];
+                                        for (let i = 0; i < that.$refs.typeChartRef2.length; i++) {
+                                            let itemTypeChartRef2 = that.$refs.typeChartRef2[i];
+                                            // console.log(_this.$refs.typeChartRef[i], '触发接收的表格数据');
+                                            if (itemTypeChartRef2.length != 0 && itemTypeChartRef2.dataArr != undefined && itemTypeChartRef2.dataArr.length != 0) {
+                                                // this.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(this.$refs.typeChartRef2[i].dataArr, _this.$refs.typeChartRe2f[i].componentName.split('_')[0])
+                                                if (itemTypeChartRef2.echartArr.includes('时间曲线图')) {
+                                                    that.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(that.$refs.typeChartRef2[i].dataArr, that.$refs.typeChartRef2[i].componentName.split('_')[0])
+                                                }
+                                                if (itemTypeChartRef2.echartArr.includes('数值')) {
+                                                    that.$refs.typeChartRef2[i].getDataArr(that.$refs.typeChartRef2[i].dataArr)
+                                                }
+                                                // console.log(item,'组件数据');
+                                                if (itemTypeChartRef2.echartArr.includes('直方图') && itemTypeChartRef2.$refs.barChartRef.drawBar) {
+                                                    // 数据改变重新渲染柱状图
+                                                    // console.log(item, '组件');
+                                                    itemTypeChartRef2.$refs.barChartRef.drawBar(itemTypeChartRef2.dataArr[0])
+                                                }
+                                                if (itemTypeChartRef2.echartArr.includes('饼状图') && itemTypeChartRef2.$refs.pieChartRef.drawPie) {
+                                                    // 数据改变重新渲染饼图
+                                                    itemTypeChartRef2.$refs.pieChartRef.drawPie(itemTypeChartRef2.dataArr[0])
+                                                }
+
+                                                //  if (item.echartArr.includes('均值图') && item.$refs.avgChartRef != undefined && item.dataArr.length != 0) {
+                                                //     item.$refs.avgChartRef.drawBar(item.dataArr[0])
+                                                // }
+                                                if (itemTypeChartRef2.echartArr.includes('均值图') && itemTypeChartRef2.$refs.avgChartRef != undefined) {
+                                                    itemTypeChartRef2.$refs.avgChartRef.drawBar(itemTypeChartRef2.dataArr[0])
+                                                }
+                                            }
+
+                                        }
+                                    }
+
+                                }
+                            }
+                        });
+                    });
+                }
+                else {
+
+                    var _that = this
+                    _that.componentList.forEach(ele => {
+                        if (ele.timeMode == '周期统计') {
+                            if (ele.cycleStatisticsData.length == 10) {
+                                ele.cycleStatisticsData.pop();
+                            } else {
+                                // item.time = item.time.split('.')[0];
+                                //     _that.typeCycleStatistics = item;
+                                ele.cycleStatisticsData.unshift();
+                                if (_that.$refs.typeChartRef2 != undefined) {
+                                    for (let i = 0; i < _that.$refs.typeChartRef2.length; i++) {
+                                        let itemTypeChartRef2 = _that.$refs.typeChartRef2[i];
                                         // console.log(_this.$refs.typeChartRef[i], '触发接收的表格数据');
-                                        if (item.dataArr) {
+                                        if (itemTypeChartRef2.length != 0 && itemTypeChartRef2.dataArr != undefined && itemTypeChartRef2.dataArr.length != 0) {
-                                            if (item.echartArr.includes('曲线图')) {
+                                            // this.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(this.$refs.typeChartRef2[i].dataArr, _this.$refs.typeChartRe2f[i].componentName.split('_')[0])
-                                                this.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(this.$refs.typeChartRef2[i].dataArr, _this.$refs.typeChartRe2f[i].componentName.split('_')[0])
+                                            if (itemTypeChartRef2.echartArr.includes('时间曲线图')) {
+                                                _that.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(_that.$refs.typeChartRef2[i].dataArr, _that.$refs.typeChartRef2[i].componentName.split('_')[0])
                                             }
-                                            if (item.echartArr.includes('直方图') && item.componentName.split('_')[0] == '类型') {
+                                            if (itemTypeChartRef2.echartArr.includes('数值')) {
+                                                _that.$refs.typeChartRef2[i].getDataArr(_that.$refs.typeChartRef2[i].dataArr)
+                                            }
+                                            // console.log(item,'组件数据');
+                                            if (itemTypeChartRef2.echartArr.includes('直方图') && itemTypeChartRef2.$refs.barChartRef.drawBar) {
                                                 // 数据改变重新渲染柱状图
-                                                item.$refs.barChartRef.drawBar(item.dataArr[0])
+                                                // console.log(item, '组件');
+                                                itemTypeChartRef2.$refs.barChartRef.drawBar(itemTypeChartRef2.dataArr[0])
                                             }
-                                            if (item.echartArr.includes('饼状图') && item.componentName.split('_')[0] == '类型') {
+                                            if (itemTypeChartRef2.echartArr.includes('饼状图') && itemTypeChartRef2.$refs.pieChartRef.drawPie) {
-                                                console.log(item, '饼图组件');
                                                 // 数据改变重新渲染饼图
-                                                item.$refs.pieChartRef.drawPie(item.dataArr[0])
+                                                itemTypeChartRef2.$refs.pieChartRef.drawPie(itemTypeChartRef2.dataArr[0])
                                             }
-                                            if (item.echartArr.includes('均值图') && item.$refs.avgChartRef != undefined && item.dataArr.length != 0) {
+
-                                                item.$refs.avgChartRef.drawBar(item.dataArr[0])
+                                            //  if (item.echartArr.includes('均值图') && item.$refs.avgChartRef != undefined && item.dataArr.length != 0) {
+                                            //     item.$refs.avgChartRef.drawBar(item.dataArr[0])
+                                            // }
+                                            if (itemTypeChartRef2.echartArr.includes('均值图') && itemTypeChartRef2.$refs.avgChartRef != undefined) {
+                                                itemTypeChartRef2.$refs.avgChartRef.drawBar(itemTypeChartRef2.dataArr[0])
                                             }
                                         }
 
                                     }
                                 }
+
                             }
-                        });
+                        }
+
                     });
                 }
             }

src/views/bounced/form.vue

@@ -409,8 +409,8 @@ export default {
     getDataByMqtt(url, topic, cIdNum) {
       const clientId = "test_id_" + String(new Date().getTime()); // 用户名
     //   const host = 'ws://49.234.27.18:10087/'; // 一个测试用url，改成给的，ws://broker.emqx.io:8083/mqtt
-      const host = `ws://${ip}:10087`;
+    //   const host = `ws://${ip}:10087`;
-    //   const host = 'ws://172.16.1.168:10087/'; 
+      const host = 'ws://172.16.1.168:10087/'; 
      
       const options = {
         // 配置

src/views/index.vue

@@ -634,7 +634,9 @@ export default {
                         const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
                         var detId = [];
                         const msgN = JSON.parse(temp);
-                        this.cycleStatisticsData = msgN;
+                            this.cycleStatisticsData = msgN;
+                       
+                        
                     } catch (error) { }
                     break;
             }