20230227

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

@@ -9,8 +9,34 @@ export default {
         return {
             endData: [],
             startData: [],
-            odData: []
+            odData: [
+                {
+                    data: [{
+                        val: 1,
+                        start: 'zone1'
+                    },
+                    {
+                        val: 2,
+                        start: 'zone2'
+                    }],
+                    end: 'zone1'
+                },
+                {
+                    data: [{
+                        val: 3,
+                        start: 'zone1'
+                    },
+                    {
+                        val: 4,
+                        start: 'zone2'
+                    }],
+                    end: 'zone2'
+                }
+            ]
         };
+    },
+    created() {
+        
     },
     props: {
         list: {
@@ -33,7 +59,38 @@ export default {
         // },
     },
     methods: {
-        drawThermalChart() {
+        //处理od组件数据
+        ODhanlde(odData) {
+            // var odData = this.odData
+            var chartData = []
+            var start = []
+            for (let i = 0; i < odData.length; i++) {
+
+                let item = odData[i].data
+                console.log(item);
+                for (let j = 0; j < item.length; j++) {
+                    start.push(item[j].start)
+                    // 数组去重
+
+                    // od图的数据
+                    chartData.push([i, j, item[j].val])
+                    // console.log([i,j,item[j].val]);
+                }
+            }
+            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) {
+            this.ODhanlde(odData
+            )
             let myChart = this.$echarts.init(this.$refs.thermalChart);
             let option = {
                 grid: {
@@ -44,11 +101,6 @@ export default {
                     containLabel: true
                 },
                 textStyle: { color: '#666', fontSize: 13 },
-                // toolbox: {
-                //     show: true,
-                //     feature: { saveAsImage: { backgroundColor: 'rgba(0,0,0,0)' }, restore: {} },
-                //     iconStyle: { borderColor: '#666' }
-                // },
                 tooltip: {},
                 xAxis: {
                     nameTextStyle: { color: '#666', padding: [0, 0, -10, 0], fontSize: 13 },
@@ -57,11 +109,7 @@ export default {
                     splitLine: { show: false },
                     axisLine: { lineStyle: { color: '#c8c8c8', width: 1 }, show: true },
                     type: 'category',
-                    data: this.list.map(ele=>{
+                    data: ['a','b','c','d'],
-                        return ele.ob_data.map(item=>{
-                            return item.end
-                        })
-                    }),
                     splitArea: { show: true, areaStyle: { color: ['rgba(200,200,200,0.3)', 'rgba(200,200,200,0.2)'] } }
                 },
                 yAxis: {
@@ -71,7 +119,7 @@ export default {
                     splitLine: { show: false },
                     axisLine: { lineStyle: { color: '#c8c8c8', width: 1 }, show: true },
                     type: 'category',
-                    data: ['gate1','gate2','gate3','gate4']
+                    data: ['a','b','c','d'],
                 },
                 visualMap: [
                     {
@@ -97,37 +145,25 @@ export default {
                             [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: {
@@ -144,13 +180,16 @@ export default {
         }
     },
     mounted() {
-        this.drawThermalChart()
+        // if (this.list) {
-    
+        //     this.drawThermalChart()
+        // }
+
+
     },
     watch: {
         list: {
             handler(newVal) {
-                console.log(newVal,'od组件数据');
+                console.log(newVal, 'od组件数据');
                 // this.odData = []
                 // console.log(newVal ,'1111111111');
                 // if (newVal) {
@@ -169,6 +208,4 @@ export default {
     }
 };
 </script>
-<style scoped>
+<style scoped></style>
-
-</style>

src/components/target/OD.vue

@@ -2,7 +2,7 @@
     <div class="setion">
         <div class="border">
             <detailDialog />
-            <thermalChart :pageType="pageType" :list="dataArr" :status="triggerType" :title="title" />
+            <thermalChart :pageType="pageType" :list="dataArr" :status="triggerType" :title="title" ref="ODChartRef"/>
         </div>
     </div>
 </template>

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/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;