diff --git a/src/components/sensorFusion/echartsBar.vue b/src/components/sensorFusion/echartsBar.vue
index 43d0df4..1b21441 100644
--- a/src/components/sensorFusion/echartsBar.vue
+++ b/src/components/sensorFusion/echartsBar.vue
@@ -56,7 +56,7 @@ export default {
         //     this.chartData.xData.push(this.dataList[0].type_data[i].name);
         //   }
         // }
-
+        if(this.dataList.length>0&&this.dataList[0].type_data){
            for (let j = 0; j < this.dataList[0].type_data.length; j++) {
           if (this.dataList[0].type_data[j].value == undefined) {
             this.chartData.yData.push(this.dataList[0].type_data[j].quantity);
@@ -66,6 +66,7 @@ export default {
             this.chartData.xData.push(this.dataList[0].type_data[j].name);
           }
         }
+        }
       } else if (this.timeMode == "固定时刻") {
         // for (let i = 0; i < this.dataList.length; i++) {
         //   this.chartData.xData = [];
@@ -82,6 +83,7 @@ export default {
         // }
         this.chartData.xData = [];
         this.chartData.yData = [];
+        if(this.dataList.length>0&&this.dataList[0].type_data){
         for (let j = 0; j < this.dataList[0].type_data.length; j++) {
           if (this.dataList[0].type_data[j].value == undefined) {
             this.chartData.yData.push(this.dataList[0].type_data[j].quantity);
@@ -91,6 +93,7 @@ export default {
             this.chartData.xData.push(this.dataList[0].type_data[j].name);
           }
         }
+        }
       } else if (this.timeMode == "固定间隔") {
         // for (let i = 0; i < this.dataList.length; i++) {
         //     this.chartData.xData = [];
@@ -107,6 +110,7 @@ export default {
         // }
         this.chartData.xData = [];
         this.chartData.yData = [];
+        if(this.dataList.length>0&&this.dataList[0].type_data){
         for (let j = 0; j < this.dataList[0].type_data.length; j++) {
           if (this.dataList[0].type_data[j].value == undefined) {
             this.chartData.yData.push(this.dataList[0].type_data[j].quantity);
@@ -116,6 +120,7 @@ export default {
             this.chartData.xData.push(this.dataList[0].type_data[j].name);
           }
         }
+        }
       }
       let myChart = this.chart;
       let option = {
diff --git a/src/components/sensorFusion/echartsLine.vue b/src/components/sensorFusion/echartsLine.vue
index 644d545..d40e40f 100644
--- a/src/components/sensorFusion/echartsLine.vue
+++ b/src/components/sensorFusion/echartsLine.vue
@@ -68,7 +68,7 @@ export default {
         },
         //数据判断处理
         dataProcessing(val) {
-            if (val.length > 10) {
+            if (val && val.length > 10) {
                 val = val.slice(-10);
                 // this.typeData = this.typeData.slice(-10);
             }
@@ -92,23 +92,29 @@ export default {
                         this.chartData.xData = this.extractKeyValues(val, 'time').reverse();
                         let seriesArr = this.extractKeyValues(val, 'type_data');
                         const transformedData = [];
-                        for (let i = 0; i < seriesArr[0].length; i++) {
-                            const item = seriesArr[0][i]; //quantity
-                            const valueList = seriesArr.map((arr) => {
-                                let t = arr[i].value;
-                                if (arr[i].quantity || arr[i].quantity === 0) {
-                                    t = arr[i].quantity;
-                                }
-                                return t;
-                            });
-                            transformedData.push({
-                                name: item.name,
-                                value: valueList
+                        if (seriesArr && seriesArr.length > 0) {
+                            for (let i = 0; i < seriesArr[0].length; i++) {
+                                const item = seriesArr[0][i]; //quantity
+                                const valueList = seriesArr.map((arr) => {
+                                    let t = arr[i].value;
+                                    if (arr[i].quantity || arr[i].quantity === 0) {
+                                        t = arr[i].quantity;
+                                    }
+                                    return t;
+                                });
+                                transformedData.push({
+                                    name: item.name,
+                                    value: valueList
+                                });
+                            }
+                        }
+                        let totalCountList = 0;
+                        if (transformedData.length > 0 && transformedData[0].value) {
+                            totalCountList = transformedData[0].value.map((_, i) => {
+                                return transformedData.reduce((sum, curr) => sum + curr.value[i], 0);
                             });
                         }
-                        const totalCountList = transformedData[0].value.map((_, i) => {
-                            return transformedData.reduce((sum, curr) => sum + curr.value[i], 0);
-                        });
+
                         transformedData.push({
                             name: '总数',
                             value: totalCountList
@@ -141,21 +147,23 @@ export default {
                         let seriesArr = this.extractKeyValues(val, 'type_data');
                         // console.log('seriesArr-固定时刻', seriesArr);
                         const transformedData = [];
-                        for (let i = 0; i < seriesArr[0].length; i++) {
-                            const item = seriesArr[0][i];
-                            //固定间隔主题-类型组件type_data取value字段和历史数据接口不一样，历史数据接口取quantity字段
-                            // const valueList = seriesArr.map((arr) => arr[i].quantity);
-                            const valueList = seriesArr.map((arr) => {
-                                let t = arr[i].value;
-                                if (arr[i].quantity || arr[i].quantity === 0) {
-                                    t = arr[i].quantity;
-                                }
-                                return t;
-                            });
-                            transformedData.push({
-                                name: item.name,
-                                value: valueList
-                            });
+                        if (seriesArr && seriesArr.length > 0) {
+                            for (let i = 0; i < seriesArr[0].length; i++) {
+                                const item = seriesArr[0][i];
+                                //固定间隔主题-类型组件type_data取value字段和历史数据接口不一样，历史数据接口取quantity字段
+                                // const valueList = seriesArr.map((arr) => arr[i].quantity);
+                                const valueList = seriesArr.map((arr) => {
+                                    let t = arr[i].value;
+                                    if (arr[i].quantity || arr[i].quantity === 0) {
+                                        t = arr[i].quantity;
+                                    }
+                                    return t;
+                                });
+                                transformedData.push({
+                                    name: item.name,
+                                    value: valueList
+                                });
+                            }
                         }
                         // console.log('transformedData-1',transformedData)
                         const totalCountList = transformedData[0].value.map((_, i) => {
@@ -194,26 +202,32 @@ export default {
                         // console.log('固定间隔-类型-seriesArr-', seriesArr);
                         // console.log('固定间隔-类型-xData-', this.chartData.xData);
                         const transformedData = [];
-                        for (let i = 0; i < seriesArr[0].length; i++) {
-                            const item = seriesArr[0][i];
-                            //固定间隔主题-类型组件type_data取value字段和历史数据接口不一样，历史数据接口取quantity字段
-                            // const valueList = seriesArr.map((arr) => arr[i].value);
-                            const valueList = seriesArr.map((arr) => {
-                                let t = arr[i].value;
-                                if (arr[i].quantity || arr[i].quantity === 0) {
-                                    t = arr[i].quantity;
-                                }
-                                return t;
-                            });
-                            transformedData.push({
-                                name: item.name,
-                                value: valueList
+                        if (seriesArr && seriesArr.length > 0) {
+                            for (let i = 0; i < seriesArr[0].length; i++) {
+                                const item = seriesArr[0][i];
+                                //固定间隔主题-类型组件type_data取value字段和历史数据接口不一样，历史数据接口取quantity字段
+                                // const valueList = seriesArr.map((arr) => arr[i].value);
+                                const valueList = seriesArr.map((arr) => {
+                                    let t = arr[i].value;
+                                    if (arr[i].quantity || arr[i].quantity === 0) {
+                                        t = arr[i].quantity;
+                                    }
+                                    return t;
+                                });
+                                transformedData.push({
+                                    name: item.name,
+                                    value: valueList
+                                });
+                            }
+                        }
+
+                        // console.log('固定间隔-类型-transformedData-1', transformedData);
+                        let totalCountList = 0;
+                        if (transformedData.length > 0 && transformedData[0].value) {
+                            totalCountList = transformedData[0].value.map((_, i) => {
+                                return transformedData.reduce((sum, curr) => sum + curr.value[i], 0);
                             });
                         }
-                        // console.log('固定间隔-类型-transformedData-1', transformedData);
-                        const totalCountList = transformedData[0].value.map((_, i) => {
-                            return transformedData.reduce((sum, curr) => sum + curr.value[i], 0);
-                        });
                         transformedData.push({
                             name: '总数',
                             value: totalCountList
@@ -245,7 +259,7 @@ export default {
             } else if (this.componentType == '速度') {
                 if (this.dataList.length > 0) {
                     // console.log(this.dataList[0].originalSpeed,'速度速度速度速度')
-                    if (this.dataList[0].originalSpeed >= 0) {
+                    if (this.dataList[0].originalSpeed && this.dataList[0].originalSpeed >= 0) {
                         this.title = 'km/h';
                     } else {
                         this.title = 'pix/s';
@@ -308,30 +322,32 @@ export default {
             var color = ['#0CD2E6', '#3751E6', '#FFC722', 'rgb(255,115,38)'];
             if (this.componentType == '类型') {
                 // console.log('类型-seriesList', this.seriesList);
-                for (let i = 0; i < this.seriesList.length; i++) {
-                    seriesList.push({
-                        name: this.seriesList[i].name,
-                        type: 'line',
-                        data: this.seriesList[i].value,
-                        symbolSize: 8, //标记的大小
-                        lineStyle: {
-                            color: color[i],
-                            width: 3,
-                            shadowColor: 'rgba(255,115,38,0.17)', //设置折线阴影
-                            shadowBlur: 5,
-                            shadowOffsetY: 9
-                        },
-                        itemStyle: {
-                            //折线拐点标志的样式
-                            color: color[i],
-                            borderColor: color[i],
-                            borderWidth: 2
-                        },
-                        smooth: 0.4,
-                        emphasis: {
-                            scale: 1.5
-                        }
-                    });
+                if (this.seriesList.length > 0) {
+                    for (let i = 0; i < this.seriesList.length; i++) {
+                        seriesList.push({
+                            name: this.seriesList[i].name,
+                            type: 'line',
+                            data: this.seriesList[i].value,
+                            symbolSize: 8, //标记的大小
+                            lineStyle: {
+                                color: color[i],
+                                width: 3,
+                                shadowColor: 'rgba(255,115,38,0.17)', //设置折线阴影
+                                shadowBlur: 5,
+                                shadowOffsetY: 9
+                            },
+                            itemStyle: {
+                                //折线拐点标志的样式
+                                color: color[i],
+                                borderColor: color[i],
+                                borderWidth: 2
+                            },
+                            smooth: 0.4,
+                            emphasis: {
+                                scale: 1.5
+                            }
+                        });
+                    }
                 }
             } else {
                 seriesList = [
diff --git a/src/components/sensorFusion/echartsPie.vue b/src/components/sensorFusion/echartsPie.vue
index dc47f8c..b6a5df1 100644
--- a/src/components/sensorFusion/echartsPie.vue
+++ b/src/components/sensorFusion/echartsPie.vue
@@ -1,257 +1,257 @@
 <template>
-  <div :id="echartsRef" ref="echartsPie"></div>
+    <div :id="echartsRef" ref="echartsPie"></div>
 </template>
 
 <script>
 export default {
-  name: "echartsPie", //折线图组件
-  props: {
-    intersectionName: {
-      type: Array,
-      default() {
-        return [];
-      },
-    },
-    chatShowType: {
-      type: String,
-    },
-    echartsRef: {
-      type: String,
-    },
-    dataList: {
-      type: Array,
-      default() {
-        return [];
-      },
-    },
-    timeMode: {
-      type: String,
-    },
-  },
-  data() {
-    return {
-      chart: null,
-    };
-  },
-  created() {},
-
-  methods: {
-    renameField(obj, oldFieldName, newFieldName) {
-      if (Array.isArray(obj)) {
-        obj.forEach((item) => {
-          this.renameField(item, oldFieldName, newFieldName);
-        });
-      } else if (typeof obj === "object") {
-        for (let key in obj) {
-          if (typeof obj[key] === "object") {
-            this.renameField(obj[key], oldFieldName, newFieldName);
-          } else if (key === oldFieldName) {
-            obj[newFieldName] = obj[key];
-            delete obj[key];
-          }
-        }
-      }
-    },
-    //初始化页面
-    initEcharts() {
-      let seriesData = null;
-      let myChart = this.chart;
-      if (this.timeMode == "实时触发") {
-        seriesData = null;
-        this.renameField(this.dataList[0].type_data, "quantity", "value");
-        seriesData = this.dataList[0].type_data;
-      } else if (this.timeMode == "固定时刻") {
-        seriesData = null;
-        // for (let i = 0; i < this.dataList.length; i++) {
-        // this.renameField(this.dataList[0].type_data,'quantity','value')
-        // seriesData = this.dataList[0].type_data
-        // }
-        if (this.dataList[0].type_data&&this.dataList[0].type_data[0].quantity == undefined) {
-          this.renameField(this.dataList[0].type_data, null, null);
-          seriesData = this.dataList[0].type_data;
-        } else {
-          this.renameField(this.dataList[0].type_data, "quantity", "value");
-          seriesData = this.dataList[0].type_data;
-        }
-      } else if (this.timeMode == "固定间隔") {
-        seriesData = null;
-        // for (let i = 0; i < this.dataList.length; i++) {
-        // this.renameField(this.dataList[0].type_data, "quantity", "value");
-        // seriesData = this.dataList[0].type_data;
-        // }
-        if (this.dataList[0].type_data&&this.dataList[0].type_data[0].quantity == undefined) {
-          this.renameField(this.dataList[0].type_data, null, null);
-          seriesData = this.dataList[0].type_data;
-        } else {
-          this.renameField(this.dataList[0].type_data, "quantity", "value");
-          seriesData = this.dataList[0].type_data;
-        }
-      }
-
-      var color = [
-        "#0CD2E6",
-        "#3751E6",
-        "#FFC722",
-        "#00FF80",
-        "#FFEA00",
-        "#FF7300",
-        "#9500B3",
-        "#3377FF",
-        "#5087EC",
-        "#68BBC4",
-        "#58A55C",
-        "#F2BD42",
-        "#EE752F",
-        "#D95040",
-        "#14CAFB",
-      ];
-      let option = {
-        // title: {
-        //     show: true,
-        //     text: this.componentName + '-' + this.chartName + '-' + '饼状图',
-        //     textStyle: {
-        //         lineHeight: '30'
-        //     }
-        // },
-        color: color,
-        animation: false,
-        legend: {
-          top: 20,
-          right: "center",
-          textStyle: {},
-          type: "scroll",
-          width: "80%",
-          //  data: [
-          //     {
-          //         name: '流量_1-zone2-饼状图-实时触发',
-          //         icon: 'circle'
-          //     }
-          // ]
-        },
-        tooltip: {
-          trigger: "axis",
-          backgroundColor: "rgba(1, 13, 19, 0.5)",
-          borderWidth: 1,
-          axisPointer: {
-            type: "shadow",
-            // label: {
-            //   show: true,
-            // },
-          },
-
-          textStyle: {
-            color: "rgba(212, 232, 254, 1)",
-            // fontSize: fontChart(0.24),
-          },
-          extraCssText: "z-index:2",
-        },
-        series: [
-          {
-            name: "流量_1-zone2-饼状图-实时触发",
-            type: "pie",
-            center: ["50%", "55%"],
-            radius: "70%",
-            label: {
-              normal: {
-                show: false,
-              },
-            },
-            labelLine: {
-              show: false,
-              length: 0,
-              length2: 0,
-            },
-            label: {
-              normal: {
-                show: true,
-                position: "inside",
-                formatter: "{value|{c}}",
-                rich: {
-                  value: {
-                    fontSize: 20,
-                    color: "#ffffff",
-                  },
-                },
-              },
-            },
-            data: seriesData,
-          },
-        ],
-      };
-      myChart.setOption(option);
-      window.addEventListener("resize", () => {
-        myChart.resize();
-      });
-      this.$nextTick(() => {
-        myChart.resize();
-      });
-    },
-  },
-  mounted() {
-    let that = this;
-    const $dom = document.getElementById(this.echartsRef);
-    $dom.style.width =  "440px";
-    $dom.style.height =  "260px";
-    setTimeout(() => {
-      that.$nextTick(() => {
-        this.chart = this.$echarts.getInstanceByDom(
-          document.getElementById(this.echartsRef)
-        );
-        if (this.chart == null) {
-          this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
-        }
-        that.initEcharts();
-      });
-    }, 300);
-  },
-  watch: {
-    intersectionName: {
-      handler: function (oldValues, newValues) {
-        this.$nextTick(() => {
-          this.initEcharts();
-        });
-      },
-    },
-    chatShowType: {
-      handler: function (oldValues, newValues) {},
-    },
-    echartsRef: {
-      handler: function (oldValues, newValues) {
-        console.log("old", oldValues);
-        console.log("newV", newValues);
-        let that = this;
-        setTimeout(() => {
-          that.$nextTick(() => {
-            this.chart = this.$echarts.getInstanceByDom(
-              document.getElementById(this.echartsRef)
-            );
-            if (this.chart == null) {
-              this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
+    name: 'echartsPie', //折线图组件
+    props: {
+        intersectionName: {
+            type: Array,
+            default() {
+                return [];
             }
-            that.initEcharts();
-          });
+        },
+        chatShowType: {
+            type: String
+        },
+        echartsRef: {
+            type: String
+        },
+        dataList: {
+            type: Array,
+            default() {
+                return [];
+            }
+        },
+        timeMode: {
+            type: String
+        }
+    },
+    data() {
+        return {
+            chart: null
+        };
+    },
+    created() {},
+
+    methods: {
+        renameField(obj, oldFieldName, newFieldName) {
+            if (Array.isArray(obj)) {
+                obj.forEach((item) => {
+                    this.renameField(item, oldFieldName, newFieldName);
+                });
+            } else if (typeof obj === 'object') {
+                for (let key in obj) {
+                    if (typeof obj[key] === 'object') {
+                        this.renameField(obj[key], oldFieldName, newFieldName);
+                    } else if (key === oldFieldName) {
+                        obj[newFieldName] = obj[key];
+                        delete obj[key];
+                    }
+                }
+            }
+        },
+        //初始化页面
+        initEcharts() {
+            let seriesData = null;
+            let myChart = this.chart;
+            if (this.timeMode == '实时触发') {
+                seriesData = null;
+                if (this.dataList.length > 0 && this.dataList[0].type_data) {
+                    this.renameField(this.dataList[0].type_data, 'quantity', 'value');
+                    seriesData = this.dataList[0].type_data;
+                }
+            } else if (this.timeMode == '固定时刻') {
+                seriesData = null;
+                // for (let i = 0; i < this.dataList.length; i++) {
+                // this.renameField(this.dataList[0].type_data,'quantity','value')
+                // seriesData = this.dataList[0].type_data
+                // }
+                if (this.dataList.length > 0) {
+                    if (this.dataList[0].type_data && this.dataList[0].type_data[0].quantity == undefined) {
+                        this.renameField(this.dataList[0].type_data, null, null);
+                        seriesData = this.dataList[0].type_data;
+                    } else {
+                        this.renameField(this.dataList[0].type_data, 'quantity', 'value');
+                        seriesData = this.dataList[0].type_data;
+                    }
+                }
+            } else if (this.timeMode == '固定间隔') {
+                seriesData = null;
+                // for (let i = 0; i < this.dataList.length; i++) {
+                // this.renameField(this.dataList[0].type_data, "quantity", "value");
+                // seriesData = this.dataList[0].type_data;
+                // }
+                if (this.dataList.length > 0) {
+                    if (this.dataList[0].type_data && this.dataList[0].type_data[0].quantity == undefined) {
+                        this.renameField(this.dataList[0].type_data, null, null);
+                        seriesData = this.dataList[0].type_data;
+                    } else {
+                        this.renameField(this.dataList[0].type_data, 'quantity', 'value');
+                        seriesData = this.dataList[0].type_data;
+                    }
+                }
+            }
+
+            var color = [
+                '#0CD2E6',
+                '#3751E6',
+                '#FFC722',
+                '#00FF80',
+                '#FFEA00',
+                '#FF7300',
+                '#9500B3',
+                '#3377FF',
+                '#5087EC',
+                '#68BBC4',
+                '#58A55C',
+                '#F2BD42',
+                '#EE752F',
+                '#D95040',
+                '#14CAFB'
+            ];
+            let option = {
+                // title: {
+                //     show: true,
+                //     text: this.componentName + '-' + this.chartName + '-' + '饼状图',
+                //     textStyle: {
+                //         lineHeight: '30'
+                //     }
+                // },
+                color: color,
+                animation: false,
+                legend: {
+                    top: 20,
+                    right: 'center',
+                    textStyle: {},
+                    type: 'scroll',
+                    width: '80%'
+                    //  data: [
+                    //     {
+                    //         name: '流量_1-zone2-饼状图-实时触发',
+                    //         icon: 'circle'
+                    //     }
+                    // ]
+                },
+                tooltip: {
+                    trigger: 'axis',
+                    backgroundColor: 'rgba(1, 13, 19, 0.5)',
+                    borderWidth: 1,
+                    axisPointer: {
+                        type: 'shadow'
+                        // label: {
+                        //   show: true,
+                        // },
+                    },
+
+                    textStyle: {
+                        color: 'rgba(212, 232, 254, 1)'
+                        // fontSize: fontChart(0.24),
+                    },
+                    extraCssText: 'z-index:2'
+                },
+                series: [
+                    {
+                        name: '流量_1-zone2-饼状图-实时触发',
+                        type: 'pie',
+                        center: ['50%', '55%'],
+                        radius: '70%',
+                        label: {
+                            normal: {
+                                show: false
+                            }
+                        },
+                        labelLine: {
+                            show: false,
+                            length: 0,
+                            length2: 0
+                        },
+                        label: {
+                            normal: {
+                                show: true,
+                                position: 'inside',
+                                formatter: '{value|{c}}',
+                                rich: {
+                                    value: {
+                                        fontSize: 20,
+                                        color: '#ffffff'
+                                    }
+                                }
+                            }
+                        },
+                        data: seriesData
+                    }
+                ]
+            };
+            myChart.setOption(option);
+            window.addEventListener('resize', () => {
+                myChart.resize();
+            });
+            this.$nextTick(() => {
+                myChart.resize();
+            });
+        }
+    },
+    mounted() {
+        let that = this;
+        const $dom = document.getElementById(this.echartsRef);
+        $dom.style.width = '440px';
+        $dom.style.height = '260px';
+        setTimeout(() => {
+            that.$nextTick(() => {
+                this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
+                if (this.chart == null) {
+                    this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
+                }
+                that.initEcharts();
+            });
         }, 300);
-      },
     },
-    dataList: {
-      handler: function (oldValues, newValues) {
-        this.$nextTick(() => {
-          this.chart = this.$echarts.getInstanceByDom(
-            document.getElementById(this.echartsRef)
-          );
-          if (this.chart == null) {
-            this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
-          }
-          this.initEcharts();
-        });
-      },
-    },
-  },
+    watch: {
+        intersectionName: {
+            handler: function (oldValues, newValues) {
+                this.$nextTick(() => {
+                    this.initEcharts();
+                });
+            }
+        },
+        chatShowType: {
+            handler: function (oldValues, newValues) {}
+        },
+        echartsRef: {
+            handler: function (oldValues, newValues) {
+                console.log('old', oldValues);
+                console.log('newV', newValues);
+                let that = this;
+                setTimeout(() => {
+                    that.$nextTick(() => {
+                        this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
+                        if (this.chart == null) {
+                            this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
+                        }
+                        that.initEcharts();
+                    });
+                }, 300);
+            }
+        },
+        dataList: {
+            handler: function (oldValues, newValues) {
+                this.$nextTick(() => {
+                    this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
+                    if (this.chart == null) {
+                        this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
+                    }
+                    this.initEcharts();
+                });
+            }
+        }
+    }
 };
 </script>
 <style lang="less" scoped>
 #echartsPie {
-  width: 100%;
-  height: 100%;
+    width: 100%;
+    height: 100%;
 }
 </style>
diff --git a/src/components/sensorFusion/thermalOD.vue b/src/components/sensorFusion/thermalOD.vue
index 3f283ea..8646c99 100644
--- a/src/components/sensorFusion/thermalOD.vue
+++ b/src/components/sensorFusion/thermalOD.vue
@@ -1,291 +1,288 @@
 <template>
-  <div :id="echartsRef" ref="echartsOD"></div>
+    <div :id="echartsRef" ref="echartsOD"></div>
 </template>
 
 <script>
 export default {
-  name: "echartsLine", //折线图组件
-  props: {
-    intersectionName: {
-      type: Array,
-      default() {
-        return [];
-      },
-    },
-    chatShowType: {
-      type: String,
-    },
-    echartsRef: {
-      type: String,
-    },
-    dataList: {
-      type: Array,
-      default() {
-        return [];
-      },
-    },
-    startName: {
-      type: String,
-    },
-    endName: {
-      type: String,
-    },
-    timeMode: {
-      type: String,
-    },
-  },
-  data() {
-    return {
-      chart: null,
-    };
-  },
-  created() {},
-
-  methods: {
-    //处理od组件数据
-    ODhanlde(odData) {
-      odData = odData.flat();
-      var chartData = [];
-      var start = [];
-      if (odData[0] != undefined) {
-        for (let i = 0; i < odData.length; i++) {
-          if (odData[i].data == undefined) {
-            return false;
-          } else {
-            let item = odData[i].data;
-            for (let j = 0; j < item.length; j++) {
-              start.push(item[j].start);
-              // 数组去重
-              // od图的数据
-              chartData.push([i, j, item[j].quantity]);
-              // console.log([i,j,item[j].val]);
+    name: 'echartsLine', //折线图组件
+    props: {
+        intersectionName: {
+            type: Array,
+            default() {
+                return [];
             }
-          }
+        },
+        chatShowType: {
+            type: String
+        },
+        echartsRef: {
+            type: String
+        },
+        dataList: {
+            type: Array,
+            default() {
+                return [];
+            }
+        },
+        startName: {
+            type: String
+        },
+        endName: {
+            type: String
+        },
+        timeMode: {
+            type: String
         }
-      }
+    },
+    data() {
+        return {
+            chart: null
+        };
+    },
+    created() {},
 
-      // this.thermalChartData = chartData
-      return chartData;
-    },
-    initEcharts() {
-      let dataList = null;
-      if (this.timeMode == "实时触发") {
-        let dataOd = [];
-        if (this.dataList.length > 0) {
-          for (let i = 0; i < this.dataList.length; i++) {
-            dataOd.push(this.dataList[i].ob_data);
-            dataList = this.ODhanlde(dataOd);
-          }
+    methods: {
+        //处理od组件数据
+        ODhanlde(odData) {
+            odData = odData.flat();
+            var chartData = [];
+            var start = [];
+            if (odData && odData.length > 0 && odData[0] != undefined) {
+                for (let i = 0; i < odData.length; i++) {
+                    if (odData[i].data == undefined) {
+                        return false;
+                    } else {
+                        let item = odData[i].data;
+                        for (let j = 0; j < item.length; j++) {
+                            start.push(item[j].start);
+                            // 数组去重
+                            // od图的数据
+                            chartData.push([i, j, item[j].quantity]);
+                            // console.log([i,j,item[j].val]);
+                        }
+                    }
+                }
+            }
+
+            // this.thermalChartData = chartData
+            return chartData;
+        },
+        initEcharts() {
+            let dataList = null;
+            if (this.timeMode == '实时触发') {
+                let dataOd = [];
+                if (this.dataList.length > 0) {
+                    for (let i = 0; i < this.dataList.length; i++) {
+                        dataOd.push(this.dataList[i].ob_data);
+                        dataList = this.ODhanlde(dataOd);
+                    }
+                }
+            } else if (this.timeMode == '固定时刻') {
+                let dataOd = [];
+                // for (let i = 0; i < this.dataList.length; i++) {
+                // dataOd.push(this.dataList[0][0].ob_data);
+                // dataList = this.ODhanlde(dataOd);
+                // }
+                // if (this.dataList[0][0] == undefined) {
+                //   for (let i = 0; i < this.dataList.length; i++) {
+                if (this.dataList.length > 0 && this.dataList[0].ob_data) {
+                    dataOd.push(this.dataList[0].ob_data);
+                }
+
+                dataList = this.ODhanlde(dataOd);
+                //   }
+                // } else {
+                //   dataOd.push(this.dataList[0][0].ob_data);
+                //   dataList = this.ODhanlde(dataOd);
+                // }
+            } else if (this.timeMode == '固定间隔') {
+                let dataOd = [];
+                // for (let i = 0; i < this.dataList.length; i++) {
+                //   dataOd.push(this.dataList[i].ob_data);
+                //   dataList = this.ODhanlde(dataOd);
+                // }
+                // if (this.dataList[0][0] == undefined) {
+                //   for (let i = 0; i < this.dataList.length; i++) {
+                  if (this.dataList.length > 0 && this.dataList[0].ob_data) {
+                dataOd.push(this.dataList[0].ob_data);
+                  }
+                dataList = this.ODhanlde(dataOd);
+                //   }
+                // } else {
+                //   dataOd.push(this.dataList[0][0].ob_data);
+                //   dataList = this.ODhanlde(dataOd);
+                // }
+            }
+            let myChart = this.chart;
+            let option = {
+                dataZoom: [
+                    {
+                        id: 'dataZoomY',
+                        type: 'slider',
+                        yAxisIndex: [0],
+                        startValue: 0,
+                        endValue: 10,
+                        filterMode: 'empty'
+                    }
+                ],
+                tooltip: {
+                    position: 'top'
+                },
+                animation: false,
+                grid: {
+                    left: '3%',
+                    right: '8%',
+                    bottom: '8%',
+                    containLabel: true
+                },
+                xAxis: {
+                    type: 'category',
+                    data: this.startName.split(','),
+                    axisLine: {
+                        lineStyle: {
+                            color: '#000'
+                        }
+                    },
+                    axisLabel: {
+                        interval: 0,
+                        rotate: 40
+                    },
+                    splitArea: {
+                        show: true
+                    }
+                    // name: "镇街",
+                },
+                yAxis: {
+                    type: 'category',
+                    data: this.endName.split(','),
+                    axisLine: {
+                        lineStyle: {
+                            color: '#000'
+                        }
+                    },
+                    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']
+                },
+                series: [
+                    {
+                        name: 'OD图',
+                        type: 'heatmap',
+                        data: dataList,
+                        label: {
+                            normal: {
+                                show: true
+                            }
+                        },
+                        itemStyle: {
+                            emphasis: {
+                                shadowBlur: 10,
+                                shadowColor: 'rgba(120, 0, 0, 0.5)'
+                            }
+                        }
+                    }
+                ]
+            };
+            myChart.setOption(option);
+            window.addEventListener('resize', () => {
+                myChart.resize();
+            });
         }
-      } else if (this.timeMode == "固定时刻") {
-        let dataOd = [];
-        // for (let i = 0; i < this.dataList.length; i++) {
-        // dataOd.push(this.dataList[0][0].ob_data);
-        // dataList = this.ODhanlde(dataOd);
-        // }
-        // if (this.dataList[0][0] == undefined) {
-        //   for (let i = 0; i < this.dataList.length; i++) {
-        dataOd.push(this.dataList[0].ob_data);
-        dataList = this.ODhanlde(dataOd);
-        //   }
-        // } else {
-        //   dataOd.push(this.dataList[0][0].ob_data);
-        //   dataList = this.ODhanlde(dataOd);
-        // }
-      } else if (this.timeMode == "固定间隔") {
-        let dataOd = [];
-        // for (let i = 0; i < this.dataList.length; i++) {
-        //   dataOd.push(this.dataList[i].ob_data);
-        //   dataList = this.ODhanlde(dataOd);
-        // }
-        // if (this.dataList[0][0] == undefined) {
-        //   for (let i = 0; i < this.dataList.length; i++) {
-        dataOd.push(this.dataList[0].ob_data);
-        dataList = this.ODhanlde(dataOd);
-        //   }
-        // } else {
-        //   dataOd.push(this.dataList[0][0].ob_data);
-        //   dataList = this.ODhanlde(dataOd);
-        // }
-      }
-      let myChart = this.chart;
-      let option = {
-        dataZoom: [
-          {
-            id: "dataZoomY",
-            type: "slider",
-            yAxisIndex: [0],
-            startValue: 0,
-            endValue: 10,
-            filterMode: "empty",
-          },
-        ],
-        tooltip: {
-          position: "top",
-        },
-        animation: false,
-        grid: {
-          left: "3%",
-          right: "8%",
-          bottom: "8%",
-          containLabel: true,
-        },
-        xAxis: {
-          type: "category",
-          data: this.startName.split(","),
-          axisLine: {
-            lineStyle: {
-              color: "#000",
-            },
-          },
-          axisLabel: {
-            interval: 0,
-            rotate: 40,
-          },
-          splitArea: {
-            show: true,
-          },
-          // name: "镇街",
-        },
-        yAxis: {
-          type: "category",
-          data: this.endName.split(","),
-          axisLine: {
-            lineStyle: {
-              color: "#000",
-            },
-          },
-          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"],
-        },
-        series: [
-          {
-            name: "OD图",
-            type: "heatmap",
-            data: dataList,
-            label: {
-              normal: {
-                show: true,
-              },
-            },
-            itemStyle: {
-              emphasis: {
-                shadowBlur: 10,
-                shadowColor: "rgba(120, 0, 0, 0.5)",
-              },
-            },
-          },
-        ],
-      };
-      myChart.setOption(option);
-      window.addEventListener("resize", () => {
-        myChart.resize();
-      });
     },
-  },
-  mounted() {
-    let that = this;
-    const $dom = document.getElementById(this.echartsRef);
-    $dom.style.width = "440px";
-    $dom.style.height = "260px";
-    that.$nextTick(() => {
-      that.chart = that.$echarts.getInstanceByDom(
-        document.getElementById(this.echartsRef)
-      );
-      if (that.chart == null) {
-        that.chart = that.$echarts.init(document.getElementById(this.echartsRef));
-      }
-      that.initEcharts();
-    });
-  },
-  watch: {
-    intersectionName: {
-      handler: function (oldValues, newValues) {
-        this.$nextTick(() => {
-          this.initEcharts();
-        });
-      },
-    },
-    chatShowType: {
-      handler: function (oldValues, newValues) {
+    mounted() {
         let that = this;
-        setTimeout(() => {
-          that.$nextTick(() => {
-            this.chart = this.$echarts.getInstanceByDom(
-              document.getElementById(this.echartsRef)
-            );
-            if (this.chart == null) {
-              this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
+        const $dom = document.getElementById(this.echartsRef);
+        $dom.style.width = '440px';
+        $dom.style.height = '260px';
+        that.$nextTick(() => {
+            that.chart = that.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
+            if (that.chart == null) {
+                that.chart = that.$echarts.init(document.getElementById(this.echartsRef));
             }
             that.initEcharts();
-          });
-        }, 300);
-      },
-    },
-    echartsRef: {
-      handler: function (oldValues, newValues) {
-        console.log("old", oldValues);
-        console.log("newV", newValues);
-        let that = this;
-        setTimeout(() => {
-          that.$nextTick(() => {
-            this.chart = this.$echarts.getInstanceByDom(
-              document.getElementById(this.echartsRef)
-            );
-            if (this.chart == null) {
-              this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
-            }
-            that.initEcharts();
-          });
-        }, 300);
-      },
-    },
-    dataList: {
-      handler: function (oldValues, newValues) {
-        this.$nextTick(() => {
-          this.chart = this.$echarts.getInstanceByDom(
-            document.getElementById(this.echartsRef)
-          );
-          if (this.chart == null) {
-            this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
-          }
-          this.initEcharts();
         });
-      },
     },
-    startName: {
-      handler: function (oldValues, newValues) {},
-    },
-    endName: {
-      handler: function (oldValues, newValues) {},
-    },
-    timeMode: {
-      handler: function (oldValues, newValues) {},
-    },
-  },
+    watch: {
+        intersectionName: {
+            handler: function (oldValues, newValues) {
+                this.$nextTick(() => {
+                    this.initEcharts();
+                });
+            }
+        },
+        chatShowType: {
+            handler: function (oldValues, newValues) {
+                let that = this;
+                setTimeout(() => {
+                    that.$nextTick(() => {
+                        this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
+                        if (this.chart == null) {
+                            this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
+                        }
+                        that.initEcharts();
+                    });
+                }, 300);
+            }
+        },
+        echartsRef: {
+            handler: function (oldValues, newValues) {
+                console.log('old', oldValues);
+                console.log('newV', newValues);
+                let that = this;
+                setTimeout(() => {
+                    that.$nextTick(() => {
+                        this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
+                        if (this.chart == null) {
+                            this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
+                        }
+                        that.initEcharts();
+                    });
+                }, 300);
+            }
+        },
+        dataList: {
+            handler: function (oldValues, newValues) {
+                this.$nextTick(() => {
+                    this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
+                    if (this.chart == null) {
+                        this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
+                    }
+                    this.initEcharts();
+                });
+            }
+        },
+        startName: {
+            handler: function (oldValues, newValues) {}
+        },
+        endName: {
+            handler: function (oldValues, newValues) {}
+        },
+        timeMode: {
+            handler: function (oldValues, newValues) {}
+        }
+    }
 };
 </script>
 <style lang="less" scoped>
 #echartsOD {
-  width: 100%;
-  height: 100%;
+    width: 100%;
+    height: 100%;
 }
 </style>