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":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"}]}
+{"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"}]}

src/api/aboutMachine.js

@@ -11,30 +11,7 @@ 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,11 +7,10 @@ export default {
     name: 'thermalChart', //热点图组件
     data() {
         return {
-            thermalChartData:[]
+            endData: [],
+            startData: [],
+            odData: []
         };
-    },
-    created() {
-
     },
     props: {
         list: {
@@ -34,132 +33,106 @@ export default {
         // },
     },
     methods: {
-        //处理od组件数据
-        ODhanlde(odData) {
-            console.log(odData);
-            // var odData = this.odData
-            var chartData = []
-            var start = []
-            for (let i = 0; i < odData.length; i++) {
-                let item = odData[i].data
-                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);
+        drawThermalChart() {
             let myChart = this.$echarts.init(this.$refs.thermalChart);
             let option = {
-                dataZoom: [
-                    {
-                        id: "dataZoomY",
-                        type: "slider",
-                        yAxisIndex: [0],
-                        startValue: 0,
-                        endValue: 10,
-                        filterMode: "empty",
-                    },
-                ],
-                tooltip: {
-                    position: "top",
-                    // formatter: function (params) {
-                    //     return (
-                    //         "学历：" + days[params.value[1]] + "<br/>" + "人数：" + params.data[2]
-                    //     );
-                    // },
-                },
-                animation: false,
                 grid: {
-                    left: "3%",
-                    right: "8%",
-                    bottom: "8%",
-                    containLabel: true,
+                    left: '2%',
+                    right: '4%',
+                    bottom: '10%',
+                    top: '20%',
+                    containLabel: true
                 },
+                textStyle: { color: '#666', fontSize: 13 },
+                // toolbox: {
+                //     show: true,
+                //     feature: { saveAsImage: { backgroundColor: 'rgba(0,0,0,0)' }, restore: {} },
+                //     iconStyle: { borderColor: '#666' }
+                // },
+                tooltip: {},
                 xAxis: {
-                    type: "category",
-                    data: startEnd.start.split(','),
-                    axisLine: {
-                        lineStyle: {
-                            color: "#000",
-                        },
-                    },
-                    axisLabel: {
-                        interval: 0,
-                        rotate: 40,
-                    },
-                    splitArea: {
-                        show: true,
-                    },
-                    // name: "镇街",
+                    nameTextStyle: { color: '#666', padding: [0, 0, -10, 0], fontSize: 13 },
+                    axisLabel: { interval: 0, textStyle: { fontSize: 13 } },
+                    axisTick: { lineStyle: { color: '#c8c8c8', width: 1 }, show: true },
+                    splitLine: { show: false },
+                    axisLine: { lineStyle: { color: '#c8c8c8', width: 1 }, show: true },
+                    type: 'category',
+                    data: this.endData,
+                    splitArea: { show: true, areaStyle: { color: ['rgba(200,200,200,0.3)', 'rgba(200,200,200,0.2)'] } }
                 },
                 yAxis: {
-                    type: "category",
-                    data: startEnd.end.split(','),
-                    axisLine: {
-                        lineStyle: {
-                            color: "#000",
+                    nameTextStyle: { color: '#666', padding: [0, 0, -10, 0], fontSize: 13 },
+                    axisLabel: { interval: 0, textStyle: { fontSize: 13 } },
+                    axisTick: { lineStyle: { color: '#c8c8c8', width: 1 }, show: true },
+                    splitLine: { show: false },
+                    axisLine: { lineStyle: { color: '#c8c8c8', width: 1 }, show: true },
+                    type: 'category',
+                    data: ['gate1','gate2']
                 },
-                    },
-                    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'],
+                visualMap: [
+                    {
+                        min: 100,
+                        max: 400,
                         calculable: false,
-                    color: ["#22DDDD", "#fec42c", "#80F1BE"],
-                },
+                        orient: 'horizontal',
+                        left: 'center',
+                        top: 20,
+                        color: ['#C7021D', '#79E73C'],
+                        text: ['高', '低'],
+                        textStyle: { color: '#666', fontSize: 13 }
+                    }
+                ],
                 series: [
                     {
-                        name: "OD图",
-                        type: "heatmap",
-                        data: this.ODhanlde(odData),
-                        label: {
-                            normal: {
-                                show: true,
-                            },
-                        },
-                        itemStyle: {
-                            emphasis: {
-                                shadowBlur: 10,
-                                shadowColor: "rgba(120, 0, 0, 0.5)",
-                            },
-                        },
-                    },
-                ],
-            };
+                        type: 'heatmap',
+                        // pageSize: 20,
+                        pointSize: 10,
+                        blurSize: 10,
+                        data: [
+                            [0, 0, 100],
+                            [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: { shadowBlur: 0, shadowColor: 'rgba(255, 255, 255, 0.5)' }
+                        }
+                    }
+                ]
+            };
             myChart.setOption(option);
             window.addEventListener('resize', function () {
                 myChart.resize();
@@ -171,15 +144,29 @@ 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>
+<style scoped>
+
+</style>

src/components/target/OD.vue

@@ -0,0 +1,56 @@
+<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><br />
+                            <span style="font-size: 15px;">{{ n.name }}</span
+                            ><br />
                             <span style="font-size: 30px; font-weight: bold">{{ n.quantity }}</span>
                         </div>
                         <div>
@@ -28,14 +28,12 @@
                             {{ 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>
@@ -70,9 +68,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;"></span>
-                    <span style="font-size:18px;">{{ this.chartName + '-' + this.componentName + '-' + '表格' + '-' +
-                        triggerType }}</span>
+                        style="width: 10px;height:10px;border-radius: 50%;background-color: #3297ff;display: inline-block;vertical-align: middle;margin-right: 8px;"
+                    ></span>
+                    <span style="font-size:18px;">{{ this.chartName + '-' + this.componentName + '-' + '表格' + '-' + triggerType }}</span>
                 </div>
                 <div class="tableTime">
                     {{ newDataArr[0].time ? newDataArr[0].time : '' }}
@@ -87,28 +85,55 @@
         </div>
         <div class="border" v-if="echartArr.includes('曲线图')">
             <detailDialog />
-            <lineChart :componentName="componentName" :chartName="chartName" :pageType="pageType" :list="newDataArr"
-                :status="triggerType" :title="title" :typeValue="typeValue" ref="lineChartRef" />
+            <lineChart
+                :componentName="componentName"
+                :chartName="chartName"
+                :pageType="pageType"
+                :list="newDataArr"
+                :status="triggerType"
+                :title="title"
+                :typeValue="typeValue"
+                ref="lineChartRef"
+            />
         </div>
         <div class="border" v-if="echartArr.includes('饼状图')">
             <detailDialog />
-            <pieChart :componentName="componentName" :chartName="chartName" :pageType="pageType" :list="newDataArr"
-                :status="triggerType" :title="title" :typeValue="typeValue" ref="pieChartRef" />
+            <pieChart
+                :componentName="componentName"
+                :chartName="chartName"
+                :pageType="pageType"
+                :list="newDataArr"
+                :status="triggerType"
+                :title="title"
+                :typeValue="typeValue"
+                ref="pieChartRef"
+            />
         </div>
         <div class="border" v-if="echartArr.includes('均值图')">
             <detailDialog />
-            <avgChart ref="avgChartRef" :componentName="componentName" :chartName="chartName" :pageType="pageType"
-                :list="newDataArr" :status="triggerType" :title="title" :typeValue="typeValue" />
+            <avgChart
+                ref="avgChartRef"
+                :componentName="componentName"
+                :chartName="chartName"
+                :pageType="pageType"
+                :list="newDataArr"
+                :status="triggerType"
+                :title="title"
+                :typeValue="typeValue"
+            />
         </div>
         <div class="border" v-if="echartArr.includes('直方图')">
             <detailDialog />
-            <barChart :componentName="componentName" :chartName="chartName" :pageType="pageType" :list="newDataArr"
-                :status="triggerType" :title="title" :typeValue="typeValue" ref="barChartRef" />
-        </div>
-        <div class="border" v-if="echartArr.includes('矩阵图')">
-            <detailDialog />
-            <thermalChart :componentName="componentName"  :pageType="pageType" :list="newDataArr"
-                :status="triggerType" :title="title" :typeValue="typeValue" ref="ODChartRef" />
+            <barChart
+                :componentName="componentName"
+                :chartName="chartName"
+                :pageType="pageType"
+                :list="newDataArr"
+                :status="triggerType"
+                :title="title"
+                :typeValue="typeValue"
+                ref="barChartRef"
+            />
         </div>
     </div>
 </template>
@@ -121,10 +146,9 @@ 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','startEndData'],
+    props: ['typeValue', 'pageType', 'triggerType', 'dataArr', 'echartArr', 'componentName', 'title', 'chartName'],
     components: {
         lineChart,
         barChart,
@@ -132,8 +156,7 @@ export default {
         detailDialog,
         regionTable,
         pieChart,
-        avgChart,
-        thermalChart
+        avgChart
     },
     data() {
         return {
@@ -152,8 +175,7 @@ export default {
         };
     },
     created() {
-        // console.log(this.title);
-        console.log(this.componentName);
+        console.log(this.title);
     },
     methods: {
         // 计算类型数量的总和

src/views/SystemSettings/UDPServiceSettings.vue

@@ -1,9 +1,9 @@
 <template>
     <div class="content-box">
         <div class="container">
-            <p class="title">UDP服务设置</p>
+            <p class="title">UPD服务设置</p>
             <el-form :model="form" label-position="left" label-width="180px">
-                <el-form-item label="UDP服务器端口：">
+                <el-form-item label="upd服务器端口：">
                     <el-input-number v-model="form.name" controls-position="right" :min="1"></el-input-number>
                 </el-form-item>
 
@@ -16,20 +16,16 @@
                     bytes
                 </el-form-item>
             </el-form>
-            <div>
-                <el-button type="primary" @click="saveBtn()">保存</el-button>
-            </div>
         </div>
     </div>
 </template>
 
 <script>
-import { getUpdInfoApi ,setUpdInfoApi} from '../../api/aboutMachine';
+import { getUpdInfoApi } from '../../api/aboutMachine';
 export default {
     data() {
         return {
             form: {
-                id:'1',
                 name: 55570,
                 delivery: true,
                 bytes: 4096
@@ -37,32 +33,14 @@ export default {
         };
     },
     methods: {
-        // 获取接口
         getUpd() {
             getUpdInfoApi()
                 .then(res => {
-                    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 + ''
+                    console.log(res.data.data);
                 })
                 .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,8 +6,12 @@
             <div class="dataBoard" ref="dataBoard" v-if="activeName == 'second'">
                 <!-- 断面 -->
                 <div class="plate1" ref="plate1">
-                    <div :class="sectionData.length <= 1 ? 'sectionBox' : 'section'" ref="section" v-for="s in sectionData"
-                        :key="s.analogAreaComponentId">
+                    <div
+                        :class="sectionData.length <= 1 ? 'sectionBox' : 'section'"
+                        ref="section"
+                        v-for="s in sectionData"
+                        :key="s.analogAreaComponentId"
+                    >
                         <template>
                             <div ref="sectionContent">
                                 <div>
@@ -18,34 +22,59 @@
                                 </div>
                                 <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" :name="o.analogAreaComponentId" >
+                                                <OD
+                                                    v-if="o.componentName.includes('OD')"
+                                                    :pageType="o.graphicType"
+                                                    triggerType="触发"
+                                                    :componentName="o.componentName"
+                                                    :echartArr="o.presentationForm"
+                                                    :dataArr="o.trigger"
+                                                    :title="o.componentName.split('_')[0]"
+                                                    :chartName="o.combinationName"
+                                                />
                                                 <!--触发的组件  -->
-                                                <typeChart ref="typeChartRef" v-if="o.timeMode === '触发'"
-                                                    :pageType="o.graphicType" :triggerType="o.timeMode"
-                                                    :componentName="o.componentName" :dataArr="o.trigger"
-                                                    :echartArr="o.presentationForm" :title="o.componentName.split('_')[0]"
-                                                    :chartName="o.combinationName" :typeValue="typeTimeMode"
-                                                    :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"
-                                                    :startEndData="{ start: o.startSectionNames, end: o.endSectionNames }" />
-
+                                                <!--触发的组件  -->
+                                                <typeChart
+                                                    ref="typeChartRef"
+                                                    v-if="o.timeMode === '触发'"
+                                                    :pageType="o.graphicType"
+                                                    :triggerType="o.timeMode"
+                                                    :componentName="o.componentName"
+                                                    :dataArr="o.trigger"
+                                                    :echartArr="o.presentationForm"
+                                                    :title="o.componentName.split('_')[0]"
+                                                    :chartName="o.combinationName"
+                                                    :typeValue="typeTimeMode"
+                                                />
+                                                <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 ref="typeChartRef2" style="width: 100%;"
-                                                    v-if="o.timeMode === '周期统计'" :pageType="o.graphicType"
-                                                    :triggerType="o.timeMode" :componentName="o.componentName"
-                                                    :dataArr="o.cycleStatisticsData" :echartArr="o.presentationForm"
-                                                    :title="o.componentName.split('_')[0]" :chartName="o.combinationName"
+                                                <typeChart
+                                                    ref="typeChartRef2"
+                                                    style="width: 100%;"
+                                                    v-if="o.timeMode === '周期统计'"
+                                                    :pageType="o.graphicType"
+                                                    :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>
@@ -61,12 +90,13 @@
 </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: {
@@ -142,15 +172,6 @@ export default {
         // this.getNew()
     },
     methods: {
-        // 手风琴下拉切换
-        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 => {
@@ -158,10 +179,18 @@ export default {
                     // console.log(res.data.data, '组件的数据');
                     this.componentList = res.data.data;
                     this.siftData();
+                    
                 }
             });
         },
+        // 手风琴下拉切换
+        handleChange() {
+                this.$nextTick(function () {
+                    var myEvent = new Event("resize");
+                    window.dispatchEvent(myEvent);
+                });
 
+        },
         siftData() {
             this.sectionArr = [];
             this.sectionData = [];
@@ -296,6 +325,7 @@ export default {
             handler(newVal) {
                 this.triggerList = newVal;
                 // 触发数据
+                // console.log(newVal, '触发数据');
                 var _this = this
                 if (newVal.length != 0 && _this.sectionData) {
                     _this.classify.forEach((ele, index) => {
@@ -314,7 +344,7 @@ export default {
                                     }
                                     ele.trigger.unshift(item);
                                     _this.$nextTick(() => {
-                                        if (_this.$refs.typeChartRef != undefined) {
+                                         if(_this.$refs.typeChartRef1!=undefined){
                                              for (let i = 0; i < _this.$refs.typeChartRef.length; i++) {
                                             // console.log(_this.$refs.typeChartRef[i], '触发接收的表格数据');
                                             let itemTypeChart = _this.$refs.typeChartRef[i]
@@ -337,9 +367,7 @@ 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)
-                                                    }
+
                                             }
                                         }
                                          }
@@ -405,9 +433,6 @@ export default {
                                                 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)
-                                                }
                                             }
                                         }
                                         }
@@ -462,9 +487,6 @@ export default {
                                                 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)
-                                            }
                                             }
                                         }
                                         }
@@ -622,7 +644,6 @@ export default {
     position: absolute;
     top: 14px;
 }
-
 .el-collapse-item__header {
     font-size: 15px;
     margin-left: 10px;

src/views/general/AboutMachine.vue

@@ -8,25 +8,39 @@
                     <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 type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期"
-                        v-model="sizeForm.date1" style="width: 50%;" autocomplete="off"></el-date-picker>
+                    <el-date-picker
+                        type="datetime"
+                        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" @click="backupHandle()">备份</el-button>
+                        <el-button type="primary" size="small">备份</el-button>
                     </el-col>
                 </el-form-item>
                 <el-form-item label="还原服务器设置：">
                     <el-col :span="3">
-                        <el-button type="primary" size="small" @click="restoreHandle()">备份</el-button>
+                        <el-button type="primary" disabled size="small">备份</el-button>
                     </el-col>
                     <el-col :span="4">
-                        <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
-                            :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple
-                            :limit="3" :on-exceed="handleExceed" :file-list="fileList">
+                        <el-upload
+                            class="upload-demo"
+                            action="https://jsonplaceholder.typicode.com/posts/"
+                            :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>
@@ -51,8 +65,7 @@
 
                 <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
@@ -64,7 +77,7 @@
 </template>
 
 <script>
-import { getHostInfoApi, resetReboot, ConfigBackup, ConfigRestore, ResetFactory } from '../../api/aboutMachine';
+import { getHostInfoApi, resetReboot } from '../../api/aboutMachine';
 import { getQuanjszData } from '../../api/index';
 import serverUrl from '../../config/apiurl.js';
 import { setQuanjsz } from '@/api/index';
@@ -186,62 +199,6 @@ 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: '确定',
@@ -249,17 +206,10 @@ export default {
                 type: 'warning'
             })
                 .then(() => {
-                    // 出厂默认设置
-                    ResetFactory().then(res => {
-                        // console.log(res.data,'出厂默认设置');
-                        this.$message({
-                            type: 'success',
-                            message: '重置' + res.data.msg
-                        });
-                    }).catch(()=>{
-                        this.$message.error(res.data.msg);
-                    })
-
+                    // this.$message({
+                    //   type: 'success',
+                    //   message: '删除成功!'
+                    // });
                 })
                 .catch(() => {
                     this.$message({
@@ -361,15 +311,12 @@ 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;