2.27

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":1677026201574},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\babel-loader\\lib\\index.js","mtime":499162500000},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":["//\n//\n//\n//\n//\n//\n//\n//\n//\n//\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    dataArr: {\n      handler: function handler(newVal) {\n        console.log(newVal, '292929');\n      }\n    }\n  }\n};",{"version":3,"sources":["OD.vue"],"names":[],"mappings":";;;;;;;;;;AAWA,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;AACA,IAAA,OAAA,EAAA;AACA,MAAA,OADA,mBACA,MADA,EACA;AACA,QAAA,OAAA,CAAA,GAAA,CAAA,MAAA,EAAA,QAAA;AACA;AAHA;AADA;AAlBA,CAAA","sourcesContent":["<template>\r\n    <div class=\"setion\">\r\n        <p class=\"chartTitle\"><span class=\"titleIcon\"></span> {{ componentName }}{{ triggerType }}</p>\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        dataArr: {\r\n            handler(newVal) {\r\n                console.log(newVal,'292929');\r\n            }\r\n        }\r\n\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/api/aboutMachine.js

@@ -11,7 +11,30 @@ export const getUpdInfoApi = params => {
         params
     });
 };
-
+// 保存udp
+export const setUpdInfoApi = data => {
+    return axios.post('api/SetUdppz', data, { headers: { 'Content-Type': 'multipart/form-data' } });
+};
 export const resetReboot = data => {
     return axios.post('api/SetReboot', data, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } });
 };
+
+// 关于本机备份配置
+
+export const ConfigBackup = () => {
+    return axios.post('api/ConfigBackup', { headers: { 'Content-Type': 'application/json' } });
+};
+
+// 还原服务器设置
+
+export const ConfigRestore = () => {
+    return axios.post('api/ConfigRestore');
+};
+
+// 还原服务器出厂设置
+
+export const ResetFactory = () => {
+    return axios.post('api/ResetFactory',  { headers: { 'Content-Type': 'application/json' } });
+};
+
+

src/components/chart/thermalChart.vue

@@ -7,10 +7,11 @@ export default {
     name: 'thermalChart', //热点图组件
     data() {
         return {
-            endData: [],
+            thermalChartData:[]
-            startData: [],
-            odData: []
         };
+    },
+    created() {
+
     },
     props: {
         list: {
@@ -33,106 +34,132 @@ export default {
         // },
     },
     methods: {
-        drawThermalChart() {
+        //处理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
+                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
+            // console.log(chartData, this.unique(start), 'od图的数据');
+        },
+        //数组去重
+        unique(arr) {
+            let newArr = []
+            arr.forEach(item => {
+                return newArr.includes(item) ? '' : newArr.push(item)
+            })
+            return newArr
+        },
+        // 绘制热力图
+        drawThermalChart(odData, startEnd) {
+            
+            // 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",
                     },
-                textStyle: { color: '#666', fontSize: 13 },
+                ],
-                // toolbox: {
+                tooltip: {
-                //     show: true,
+                    position: "top",
-                //     feature: { saveAsImage: { backgroundColor: 'rgba(0,0,0,0)' }, restore: {} },
+                    // formatter: function (params) {
-                //     iconStyle: { borderColor: '#666' }
+                    //     return (
+                    //         "学历：" + days[params.value[1]] + "<br/>" + "人数：" + params.data[2]
+                    //     );
                     // },
-                tooltip: {},
+                },
+                animation: false,
+                grid: {
+                    left: "3%",
+                    right: "8%",
+                    bottom: "8%",
+                    containLabel: true,
+                },
                 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: this.endData,
+                    },
-                    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: ['gate1','gate2']
                         },
-                visualMap: [
+                    },
-                    {
+                    axisLabel: {
-                        min: 100,
+                        interval: 0,
-                        max: 400,
+                        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,
-                        orient: 'horizontal',
+                    color: ["#22DDDD", "#fec42c", "#80F1BE"],
-                        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],
-                            // [0, 4, 100],
-                            // [0, 5, 100],
-                            // [0, 6, 200],
-
-                            [1, 0, 120],
-                            [1, 1, 120],
-                            [1, 2, 125],
-                            [1, 3, 120],
-                            // [1, 4, 120],
-                            // [1, 5, 120],
-                            // [1, 6, 120],
-
-                            [2, 0, 120],
-                            [2, 1, 140],
-                            [2, 2, 140],
-                            [2, 3, 140],
-                            // [2, 4, 140],
-                            // [2, 5, 140],
-                            // [2, 6, 140],
-
-                            [3, 0, 200],
-                            [3, 1, 200],
-                            [3, 2, 200],
-                            [3, 3, 200]
-                            // [3, 4, 200],
-                            // [3, 5, 200],
-                            // [3, 6, 200],
-
-                            // [4, 4, 300],
-                            // [4, 5, 300],
-                            // [4, 6, 300]
-                        ],
-                        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();
@@ -144,29 +171,15 @@ export default {
         }
     },
     mounted() {
+        // if (this.list) {
+        //     this.drawThermalChart()
+        // }
+
 
     },
     watch: {
-        list: {
-            handler(newVal) {
-                // 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
-        }
 
     }
 };
 </script>
-<style scoped>
+<style scoped></style>
-
-</style>

src/components/target/OD.vue

@@ -1,56 +0,0 @@
-<template>
-    <div class="setion">
-        <div class="border">
-            <detailDialog />
-            <thermalChart :pageType="pageType" :list="dataArr" :status="triggerType" :title="title" />
-        </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: {
-        dataArr: {
-            handler(newVal) {
-                console.log(newVal,'292929');
-            }
-        }
-
-    }
-
-};
-</script>
-<style scoped>
-.typeContent {
-    box-sizing: border-box;
-}
-
-.border {
-    width: 100%;
-    margin-bottom: 20px;
-    position: relative;
-}
-</style>

src/components/target/typeChart.vue

@@ -6,10 +6,10 @@
         <div class="typeContent">
             <div v-if="newDataArr && newDataArr.length != 0 && newDataArr != undefined">
                 <div v-if="title == '类型'" style="display:flex">
-                    <el-card v-for="(n, i) in newDataArr[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>
@@ -28,12 +28,14 @@
                             {{ getTotal(newDataArr) }}
                         </span>
                     </div>
-                    <div style="font-size: 30px; font-weight: bold" v-if="title == '速度' && dataArr.length != 0 && dataArr != undefined">
+                    <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">{{ newDataArr[0].speed }}</span>
                     </div>
-                    <div style="font-size: 30px; font-weight: bold" v-if="title == '流量' && dataArr.length != 0 && dataArr != undefined">
+                    <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">{{ newDataArr[0].flow }}</span>
                     </div>
@@ -68,9 +70,9 @@
             <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">
                     {{ newDataArr[0].time ? newDataArr[0].time : '' }}
@@ -85,55 +87,28 @@
         </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="newDataArr"
-                :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="newDataArr"
-                :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="newDataArr"
-                :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="newDataArr"
+            <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 {
@@ -171,21 +148,22 @@ export default {
             valueShow: {},
             //排队数
             queue: '',
-            newDataArr:[]
+            newDataArr: []
         };
     },
     created() {
-        console.log(this.title);
+        // console.log(this.title);
+        console.log(this.componentName);
     },
     methods: {
         // 计算类型数量的总和
-        getDataArr(val){
+        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;
                 }, 0);
             }
@@ -205,7 +183,7 @@ export default {
     computed: {
         // 获取类型的总数量
     },
-    mounted() {},
+    mounted() { },
     watch: {
         // 监听触发数据
         // dataArr: {

src/views/SystemSettings/UDPServiceSettings.vue

@@ -1,9 +1,9 @@
 <template>
     <div class="content-box">
         <div class="container">
-            <p class="title">UPD服务设置</p>
+            <p class="title">UDP服务设置</p>
             <el-form :model="form" label-position="left" label-width="180px">
-                <el-form-item label="upd服务器端口：">
+                <el-form-item label="UDP服务器端口：">
                     <el-input-number v-model="form.name" controls-position="right" :min="1"></el-input-number>
                 </el-form-item>
 
@@ -16,16 +16,20 @@
                     bytes
                 </el-form-item>
             </el-form>
+            <div>
+                <el-button type="primary" @click="saveBtn()">保存</el-button>
+            </div>
         </div>
     </div>
 </template>
 
 <script>
-import { getUpdInfoApi } from '../../api/aboutMachine';
+import { getUpdInfoApi ,setUpdInfoApi} from '../../api/aboutMachine';
 export default {
     data() {
         return {
             form: {
+                id:'1',
                 name: 55570,
                 delivery: true,
                 bytes: 4096
@@ -33,14 +37,32 @@ export default {
         };
     },
     methods: {
+        // 获取接口
         getUpd() {
             getUpdInfoApi()
                 .then(res => {
-                    console.log(res.data.data);
+                    console.log(res.data);
+                    this.form.id = res.data.data.id
+                    this.form.name = res.data.data.udp_port  
+                    this.form.delivery = res.data.data.is_qiong == '是' ? true:false
+                    this.form.bytes = res.data.data.max_pack + ''
                 })
                 .catch(err => {
                     this.$message.error(res.data.msg);
                 });
+        },
+        saveBtn(){
+            let formData = new FormData();
+            formData.append('id', this.form.id);
+            formData.append('udp_port', this.form.name);
+            formData.append('is_qiong', this.form.delivery==true?'是':'否');
+            formData.append('max_pack', this.form.bytes );
+        
+            setUpdInfoApi(formData).then(res=>{
+                this.$message.success('保存' + res.data.msg);
+            }).catch(error=>{
+                // this.$message.error(res.data.msg);
+            })
         }
     },
     mounted() {

src/views/bounced/dataBoard.vue

@@ -6,12 +6,8 @@
             <div class="dataBoard" ref="dataBoard" v-if="activeName == 'second'">
                 <!-- 断面 -->
                 <div class="plate1" ref="plate1">
-                    <div
+                    <div :class="sectionData.length <= 1 ? 'sectionBox' : 'section'" ref="section" v-for="s in sectionData"
-                        :class="sectionData.length <= 1 ? 'sectionBox' : 'section'"
+                        :key="s.analogAreaComponentId">
-                        ref="section"
-                        v-for="s in sectionData"
-                        :key="s.analogAreaComponentId"
-                    >
                         <template>
                             <div ref="sectionContent">
                                 <div>
@@ -20,61 +16,36 @@
                                     </p>
                                     <!-- <span class="downPull1" data-num="1" @click="sectionHandle(i)"></span> -->
                                 </div>
-                                <el-tabs  >
+                                <el-tabs>
                                     <el-collapse v-model="acticveName" @change="handleChange">
-                                        <div style="position:relative" v-for="o in s.children" :key="o.analogAreaComponentId">
+                                        <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" >
+                                            <el-collapse-item :title="o.componentName + o.timeMode"
-                                                <OD
+                                                :name="o.analogAreaComponentId">
-                                                    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 === '触发'"
-                                                <typeChart
+                                                    :pageType="o.graphicType" :triggerType="o.timeMode"
-                                                    ref="typeChartRef"
+                                                    :componentName="o.componentName" :dataArr="o.trigger"
-                                                    v-if="o.timeMode === '触发'"
+                                                    :echartArr="o.presentationForm" :title="o.componentName.split('_')[0]"
-                                                    :pageType="o.graphicType"
+                                                    :chartName="o.combinationName" :typeValue="typeTimeMode"
-                                                    :triggerType="o.timeMode"
+                                                    :startEndData="{ start: o.startSectionNames, end: o.endSectionNames }" />
-                                                    :componentName="o.componentName"
+                                                <typeChart ref="typeChartRef1" v-if="o.timeMode === '周期时刻'"
-                                                    :dataArr="o.trigger"
+                                                    :pageType="o.graphicType" :triggerType="o.timeMode"
-                                                    :echartArr="o.presentationForm"
+                                                    :componentName="o.componentName" :dataArr="o.cycleTimeData"
-                                                    :title="o.componentName.split('_')[0]"
+                                                    :echartArr="o.presentationForm" :title="o.componentName.split('_')[0]"
-                                                    :chartName="o.combinationName"
+                                                    :chartName="o.combinationName" :typeValue="typeCycleTimeData"
-                                                    :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"
-                                                />
                                                 <!-- 周期统计的组件 -->
-                                                <typeChart
+                                                <typeChart ref="typeChartRef2" style="width: 100%;"
-                                                    ref="typeChartRef2"
+                                                    v-if="o.timeMode === '周期统计'" :pageType="o.graphicType"
-                                                    style="width: 100%;"
+                                                    :triggerType="o.timeMode" :componentName="o.componentName"
-                                                    v-if="o.timeMode === '周期统计'"
+                                                    :dataArr="o.cycleStatisticsData" :echartArr="o.presentationForm"
-                                                    :pageType="o.graphicType"
+                                                    :title="o.componentName.split('_')[0]" :chartName="o.combinationName"
-                                                    :triggerType="o.timeMode"
-                                                    :componentName="o.componentName"
-                                                    :dataArr="o.cycleStatisticsData"
-                                                    :echartArr="o.presentationForm"
-                                                    :title="o.componentName.split('_')[0]"
-                                                    :chartName="o.combinationName"
                                                     :typeValue="typeCycleStatistics"
-                                                />
+                                                    :startEndData="{ start: o.startSectionNames, end: o.endSectionNames }" />
                                             </el-collapse-item>
                                         </div>
                                     </el-collapse>
@@ -90,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: {
@@ -172,25 +142,26 @@ export default {
         // this.getNew()
     },
     methods: {
-        getNew() {
-            // this.idVal = ;
-            getComponentSection({ VideoId: this.$route.query.id ,Number:10}).then(res => {
-                if (res.data.code == 200) {
-                    // console.log(res.data.data, '组件的数据');
-                    this.componentList = res.data.data;
-                    this.siftData();
-                    
-                }
-            });
-        },
         // 手风琴下拉切换
-        handleChange() {
+        handleChange(val) {
+
             this.$nextTick(function () {
                 var myEvent = new Event("resize");
                 window.dispatchEvent(myEvent);
             });
 
         },
+        getNew() {
+            // this.idVal = ;
+            getComponentSection({ VideoId: this.$route.query.id, Number: 10 }).then(res => {
+                if (res.data.code == 200) {
+                    // console.log(res.data.data, '组件的数据');
+                    this.componentList = res.data.data;
+                    this.siftData();
+                }
+            });
+        },
+
         siftData() {
             this.sectionArr = [];
             this.sectionData = [];
@@ -209,22 +180,22 @@ export default {
                     if (item.title == val.combinationName) {
                         this.classify.push(val);
                         item.children.push(val);
-                        if(val.timeMode=='周期统计'||this.cycleStatisticsData.length==0){
+                        if (val.timeMode == '周期统计' || this.cycleStatisticsData.length == 0) {
                             this.cycleStatisticsData = item.cycleStatisticsData
                             var _that = this
                             _that.componentList.forEach(ele => {
-                            if ( ele.timeMode == '周期统计') {
+                                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){
+                                        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) {
+                                                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])
@@ -233,12 +204,12 @@ export default {
                                                         _that.$refs.typeChartRef2[i].getDataArr(_that.$refs.typeChartRef2[i].dataArr)
                                                     }
                                                     // console.log(item,'组件数据');
-                                                if (itemTypeChartRef2.echartArr.includes('直方图')&&itemTypeChartRef2.$refs.barChartRef.drawBar) {
+                                                    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) {
+                                                    if (itemTypeChartRef2.echartArr.includes('饼状图') && itemTypeChartRef2.$refs.pieChartRef.drawPie) {
                                                         // 数据改变重新渲染饼图
                                                         itemTypeChartRef2.$refs.pieChartRef.drawPie(itemTypeChartRef2.dataArr[0])
                                                     }
@@ -259,7 +230,7 @@ export default {
 
                             });
                         }
-                        if(val.timeMode=='周期时刻'||this.cycleTimeData.length==0){
+                        if (val.timeMode == '周期时刻' || this.cycleTimeData.length == 0) {
                             this.cycleTimeData = item.cycleTimeData
 
                         }
@@ -303,7 +274,7 @@ export default {
 
         // 触发数据的类型数值
     },
-    mounted() {},
+    mounted() { },
     watch: {
         // acticveName: {
         //     handler(newVal) {
@@ -316,7 +287,7 @@ export default {
         // },
         // 触发的原始数据
         triggerData: {
-            handler(newVal, oldVal) {},
+            handler(newVal, oldVal) { },
             immediate: true
         },
         // activeName:'channge',
@@ -325,7 +296,6 @@ export default {
             handler(newVal) {
                 this.triggerList = newVal;
                 // 触发数据
-                // console.log(newVal, '触发数据');
                 var _this = this
                 if (newVal.length != 0 && _this.sectionData) {
                     _this.classify.forEach((ele, index) => {
@@ -344,11 +314,11 @@ export default {
                                     }
                                     ele.trigger.unshift(item);
                                     _this.$nextTick(() => {
-                                         if(_this.$refs.typeChartRef1!=undefined){
+                                        if (_this.$refs.typeChartRef != undefined) {
                                             for (let i = 0; i < _this.$refs.typeChartRef.length; i++) {
                                                 // console.log(_this.$refs.typeChartRef[i], '触发接收的表格数据');
                                                 let itemTypeChart = _this.$refs.typeChartRef[i]
-                                            if (itemTypeChart.dataArr!= undefined && itemTypeChart.dataArr.length != 0) {
+                                                if (itemTypeChart.dataArr != undefined && itemTypeChart.dataArr.length != 0) {
                                                     if (itemTypeChart.echartArr.includes('时间曲线图')) {
                                                         _this.$refs.typeChartRef[i].$refs.lineChartRef.drawLine(_this.$refs.typeChartRef[i].dataArr, _this.$refs.typeChartRef[i].componentName.split('_')[0])
                                                     }
@@ -367,7 +337,9 @@ export default {
                                                     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)
+                                                    }
                                                 }
                                             }
                                         }
@@ -389,7 +361,7 @@ export default {
                 // 监听到打印周期时刻数据
                 console.log(newVal, '周期时刻数据');
                 var thatN = this;
-                if (newVal!= undefined&&newVal.length != 0 && thatN.sectionData) {
+                if (newVal != undefined && newVal.length != 0 && thatN.sectionData) {
                     thatN.classify.forEach((ele, index) => {
                         // if (ele.cycleTimeData == undefined && ele.timeMode == '周期时刻') {
                         //     ele.cycleTimeData = [];
@@ -408,12 +380,12 @@ export default {
                                     }
                                     ele.cycleTimeData.unshift(item);
                                     // thatN.$nextTick(() => {
-                                        if(thatN.$refs.typeChartRef1!=undefined){
+                                    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.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])
@@ -422,17 +394,20 @@ export default {
                                                     thatN.$refs.typeChartRef1[i].getDataArr(thatN.$refs.typeChartRef1[i].dataArr)
                                                 }
 
-                                                if (itemTypeChartRef1.echartArr.includes('直方图') &&itemTypeChartRef1.$refs.barChartRef.drawBar) {
+                                                if (itemTypeChartRef1.echartArr.includes('直方图') && itemTypeChartRef1.$refs.barChartRef.drawBar) {
                                                     // 数据改变重新渲染柱状图
                                                     itemTypeChartRef1.$refs.barChartRef.drawBar(itemTypeChartRef1.dataArr[0])
                                                 }
-                                                if (itemTypeChartRef1.echartArr.includes('饼状图') &&itemTypeChartRef1.$refs.pieChartRef.drawPie) {
+                                                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)
+                                                }
                                             }
                                         }
                                     }
@@ -442,8 +417,8 @@ export default {
                             }
                         });
                     });
-                }else{
+                } else {
-                    var _thatN= this
+                    var _thatN = this
                     _thatN.classify.forEach((ele, index) => {
                         // if (ele.cycleTimeData == undefined && ele.timeMode == '周期时刻') {
                         //     ele.cycleTimeData = [];
@@ -462,12 +437,12 @@ export default {
                                 // }
                                 // ele.cycleTimeData.unshift(item);
                                 // _thatN.$nextTick(() => {
-                                        if(_thatN.$refs.typeChartRef1!=undefined){
+                                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.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])
@@ -476,17 +451,20 @@ export default {
                                                 _thatN.$refs.typeChartRef1[i].getDataArr(_thatN.$refs.typeChartRef1[i].dataArr)
                                             }
 
-                                                if (itemTypeChartRef1.echartArr.includes('直方图') &&itemTypeChartRef1.$refs.barChartRef.drawBar) {
+                                            if (itemTypeChartRef1.echartArr.includes('直方图') && itemTypeChartRef1.$refs.barChartRef.drawBar) {
                                                 // 数据改变重新渲染柱状图
                                                 itemTypeChartRef1.$refs.barChartRef.drawBar(itemTypeChartRef1.dataArr[0])
                                             }
-                                                if (itemTypeChartRef1.echartArr.includes('饼状图') &&itemTypeChartRef1.$refs.pieChartRef.drawPie) {
+                                            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)
+                                            }
                                         }
                                     }
                                 }
@@ -505,8 +483,8 @@ export default {
             handler(newVal) {
 
                 var that = this;
-                if (newVal!= undefined&& newVal.length != 0 && that.sectionData) {
+                if (newVal != undefined && newVal.length != 0 && that.sectionData) {
-                    console.log("newVal",newVal)
+                    console.log("newVal", newVal)
                     that.componentList.forEach(ele => {
                         // if (ele.cycleStatisticsData == undefined && ele.timeMode == '周期统计') {
                         //     ele.cycleStatisticsData = [];
@@ -525,11 +503,11 @@ export default {
                                         that.typeCycleStatistics = item;
                                     }
                                     console.log(" ele.cycleStatisticsData", ele.cycleStatisticsData)
-                                     if(that.$refs.typeChartRef2!=undefined){
+                                    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) {
+                                            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])
@@ -538,12 +516,12 @@ export default {
                                                     that.$refs.typeChartRef2[i].getDataArr(that.$refs.typeChartRef2[i].dataArr)
                                                 }
                                                 // console.log(item,'组件数据');
-                                                if (itemTypeChartRef2.echartArr.includes('直方图')&&itemTypeChartRef2.$refs.barChartRef.drawBar) {
+                                                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) {
+                                                if (itemTypeChartRef2.echartArr.includes('饼状图') && itemTypeChartRef2.$refs.pieChartRef.drawPie) {
                                                     // 数据改变重新渲染饼图
                                                     itemTypeChartRef2.$refs.pieChartRef.drawPie(itemTypeChartRef2.dataArr[0])
                                                 }
@@ -564,22 +542,22 @@ export default {
                         });
                     });
                 }
-                else{
+                else {
 
                     var _that = this
                     _that.componentList.forEach(ele => {
-                            if ( ele.timeMode == '周期统计') {
+                        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){
+                                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) {
+                                        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])
@@ -588,12 +566,12 @@ export default {
                                                 _that.$refs.typeChartRef2[i].getDataArr(_that.$refs.typeChartRef2[i].dataArr)
                                             }
                                             // console.log(item,'组件数据');
-                                                if (itemTypeChartRef2.echartArr.includes('直方图')&&itemTypeChartRef2.$refs.barChartRef.drawBar) {
+                                            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) {
+                                            if (itemTypeChartRef2.echartArr.includes('饼状图') && itemTypeChartRef2.$refs.pieChartRef.drawPie) {
                                                 // 数据改变重新渲染饼图
                                                 itemTypeChartRef2.$refs.pieChartRef.drawPie(itemTypeChartRef2.dataArr[0])
                                             }
@@ -644,6 +622,7 @@ export default {
     position: absolute;
     top: 14px;
 }
+
 .el-collapse-item__header {
     font-size: 15px;
     margin-left: 10px;

src/views/general/AboutMachine.vue

@@ -8,39 +8,25 @@
                     <el-button type="primary" style="margin-left:10px" @click="saveHostName" size="small">保存</el-button>
                 </el-form-item>
                 <el-form-item label="时间：" :label-width="formLabelWidth">
-                    <el-date-picker
+                    <el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期"
-                        type="datetime"
+                        v-model="sizeForm.date1" style="width: 50%;" autocomplete="off"></el-date-picker>
-                        value-format="yyyy-MM-dd HH:mm:ss"
-                        placeholder="选择日期"
-                        v-model="sizeForm.date1"
-                        style="width: 50%;"
-                        autocomplete="off"
-                    ></el-date-picker>
 
                     <el-button @click="saveTime" type="primary" style="margin-left:10px" size="small">校时</el-button>
                 </el-form-item>
                 <p>备份&恢复</p>
                 <el-form-item label="备份服务器设置：">
                     <el-col :span="12">
-                        <el-button type="primary" size="small">备份</el-button>
+                        <el-button type="primary" size="small" @click="backupHandle()">备份</el-button>
                     </el-col>
                 </el-form-item>
                 <el-form-item label="还原服务器设置：">
                     <el-col :span="3">
-                        <el-button type="primary" disabled size="small">备份</el-button>
+                        <el-button type="primary" size="small" @click="restoreHandle()">备份</el-button>
                     </el-col>
                     <el-col :span="4">
-                        <el-upload
+                        <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
-                            class="upload-demo"
+                            :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple
-                            action="https://jsonplaceholder.typicode.com/posts/"
+                            :limit="3" :on-exceed="handleExceed" :file-list="fileList">
-                            :on-preview="handlePreview"
-                            :on-remove="handleRemove"
-                            :before-remove="beforeRemove"
-                            multiple
-                            :limit="3"
-                            :on-exceed="handleExceed"
-                            :file-list="fileList"
-                        >
                             <el-button size="small" type="primary">点击上传</el-button>
                         </el-upload>
                     </el-col>
@@ -65,7 +51,8 @@
 
                 <el-form-item label="跳帧设置：">
                     <el-select v-model="FPS" size="mini" placeholder="请选择">
-                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+                        </el-option>
                     </el-select>
                     <i class="el-icon-warning" style="color: #409EFF; margin: 0 3px 0 10px;"></i>默认取值：单路视频流 0 ；2-3 路视频流
                     1；4-6 路视频流 4
@@ -77,7 +64,7 @@
 </template>
 
 <script>
-import { getHostInfoApi, resetReboot } from '../../api/aboutMachine';
+import { getHostInfoApi, resetReboot, ConfigBackup, ConfigRestore, ResetFactory } from '../../api/aboutMachine';
 import { getQuanjszData } from '../../api/index';
 import serverUrl from '../../config/apiurl.js';
 import { setQuanjsz } from '@/api/index';
@@ -199,6 +186,62 @@ export default {
                     });
                 });
         },
+        // 备份事件
+        backupHandle() {
+            this.$confirm('此操作将备份操作, 是否继续?', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            })
+                .then(() => {
+                    ConfigBackup().then(res => {
+                        this.$message({
+                            type: 'success',
+                            message: '备份' + res.data.msg
+                        });
+                    }).catch(() => {
+                        this.$message.error(res.data.msg);
+                    })
+
+                })
+                .catch(() => {
+                    this.$message({
+                        type: 'info',
+                        message: '已取消备份'
+                    });
+                });
+        },
+        // 还原服务器设置
+        restoreHandle() {
+            this.$confirm('此操作将还原服务器设置, 是否继续?', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            })
+                .then(() => {
+                    // 出厂默认设置
+                    ConfigRestore().then(res => {
+
+                        console.log(res.data, '还原服务器设置');
+                        this.$message({
+                            type: 'success',
+                            message: '还原' 
+                        });
+
+
+                    }).catch(() => {
+                        this.$message.error(res.data.msg);
+                    })
+
+                })
+                .catch(() => {
+                    this.$message({
+                        type: 'info',
+                        message: '已取消备份'
+                    });
+                });
+        },
+        // 重置默认值
         handleReset() {
             this.$confirm('此操作将重置默认值, 是否继续?', '提示', {
                 confirmButtonText: '确定',
@@ -206,10 +249,17 @@ export default {
                 type: 'warning'
             })
                 .then(() => {
-                    // this.$message({
+                    // 出厂默认设置
-                    //   type: 'success',
+                    ResetFactory().then(res => {
-                    //   message: '删除成功!'
+                        // console.log(res.data,'出厂默认设置');
-                    // });
+                        this.$message({
+                            type: 'success',
+                            message: '重置' + res.data.msg
+                        });
+                    }).catch(()=>{
+                        this.$message.error(res.data.msg);
+                    })
+
                 })
                 .catch(() => {
                     this.$message({
@@ -311,12 +361,15 @@ export default {
     text-align: left;
     font-size: 15px;
 }
+
 /deep/ .el-form-item {
     margin-bottom: 15px;
 }
+
 .container {
     width: 100%;
     height: 100%;
+
     p {
         width: 95%;
         font-size: 25px;