From 2bf510dced89e2bf066eb7cfad1df5de8f0bbbbb Mon Sep 17 00:00:00 2001
From: jingna <1264204245@qq.com>
Date: Mon, 18 May 2026 17:39:42 +0800
Subject: [PATCH] =?UTF-8?q?=E9=80=9A=E8=AE=AF=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/communicationSetting/index.vue  | 152 +++++++++++-------
 1 file changed, 97 insertions(+), 55 deletions(-)

diff --git a/frontend/src/views/communicationSetting/index.vue b/frontend/src/views/communicationSetting/index.vue
index 21a61a7..f29c248 100644
--- a/frontend/src/views/communicationSetting/index.vue
+++ b/frontend/src/views/communicationSetting/index.vue
@@ -1,38 +1,37 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-
+import { fetchDeviceNet, fetchDevicePort, saveDeviceConfig, verifyAccessPassword, fetchChannelConfig } from '@/api/platform'
 // 表单数据
-const formData = ref({
-    networkCard: '网卡二',
-    ipAddress: '192.168.1.56',
-    subnetMask: '255.255.255.255',
-    gateway: '192.168.1.56',
-    tcpProtocol: 'Modbus TCP',
-    // 串口设置
-    comPort: 'COM3',
-    baudRate: 115200,
-    parity: 'NONE',
-    dataBits: 8,
-    stopBits: 1,
-    rtuProtocol: 'Modbus RTU'
+const formData: any = ref({
+    nic: '',
+    ip: '',
+    mask: '',
+    gateway: '',
+    protocol: '',
 })
-
-const networkCardOptions = [
+const formData2: any = ref({
+    port: '',
+    baud: null,
+    parity: '',
+    data_bits: null,
+    stop_bits: null,
+    protocol: ''
+})
+const networkCardOptions: any = ref([
     { label: '网卡一', value: '网卡一' },
-    { label: '网卡二', value: '网卡二' }
-]
+    { label: '网卡二', value: '网卡二' },
+])
 
-const tcpProtocolOptions = [
+const tcpProtocolOptions: any = [
     { label: 'Modbus TCP', value: 'Modbus TCP' },
     { label: 'IEC104 ', value: 'IEC104' }
 ]
 
-const comPortOptions = [
+const comPortOptions: any = ref([
     { label: 'COM1', value: 'COM1' },
     { label: 'COM2', value: 'COM2' },
-    { label: 'COM3', value: 'COM3' }
-]
+])
 
 const baudRateOptions = [
     { label: '9600', value: 9600 },
@@ -68,29 +67,70 @@ const rtuProtocolOptions = [
 // 保存
 const handleSave = () => {
     ElMessageBox.prompt('请输入密码', '保存', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    closeOnClickModal: false,
-    // inputType: 'password', 
-  })
-    .then(({ value }) => {
-        console.log(value)
-      
-    //   ElMessage({
-    //     type: 'success',
-    //     message: `密码正确，保存成功`,
-    //   })
-    })
-    .catch(() => {
-    //   ElMessage({
-    //     type: 'info',
-    //     message: '密码错误',
-    //   })
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        closeOnClickModal: false,
     })
+        .then(({ value }) => {
+            verifyAccessPassword(value).then((res: any) => {
+                if (res.code == 200) {
+                    const params = {
+                        net: [formData.value],
+                        uart: [formData2.value],
+                        password: config.value.password,
+                        hardware_version: config.value.hardware_version,
+                        software_version: config.value.software_version,
+                    }
+                    saveDeviceConfig(params).then((res: any) => {
+                        if (res.code == 200) {
+                            ElMessage({
+                                type: 'success',
+                                message: `保存成功`,
+                            })
+                        } else {
+                            ElMessage({
+                                type: 'info',
+                                message: '保存失败',
+                            })
+                        }
+                    })
+                } else {
+                    ElMessage({
+                        type: 'info',
+                        message: '密码错误',
+                    })
+                }
+            })
+        })
+        .catch(() => {
+            //   ElMessage({
+            //     type: 'info',
+            //     message: '密码错误',
+            //   })
+        })
     console.log('保存配置:', formData.value)
 }
+const config: any = ref({})
+const handleChange = (val: any) => {
+    fetchDeviceNet(val).then((res: any) => {
+        formData.value = res
+    })
+}
+const handleChangePort = (val: any) => {
+    fetchDevicePort(val).then((res: any) => {
+        formData2.value = res
+    })
+}
 function init() {
-   
+    fetchDeviceNet('网卡一').then((res: any) => {
+        formData.value = res
+    })
+    fetchDevicePort('COM1').then((res: any) => {
+        formData2.value = res
+    })
+    fetchChannelConfig().then((res: any) => {
+        config.value = res
+    })
 }
 onMounted(() => {
     init()
@@ -108,18 +148,18 @@ onMounted(() => {
                 </div>
                 <div class="form-row">
                     <el-form-item label="网卡号">
-                        <el-select v-model="formData.networkCard" placeholder="请选择">
+                        <el-select v-model="formData.nic" placeholder="请选择" @change="handleChange">
                             <el-option v-for="item in networkCardOptions" :key="item.value" :label="item.label"
-                                :value="item.value" />
+                                :value="item.label" />
                         </el-select>
                     </el-form-item>
                     <el-form-item label="IP地址">
-                        <el-input v-model="formData.ipAddress" />
+                        <el-input v-model="formData.ip" />
                     </el-form-item>
                 </div>
                 <div class="form-row">
                     <el-form-item label="子网掩码">
-                        <el-input v-model="formData.subnetMask" />
+                        <el-input v-model="formData.mask" />
                     </el-form-item>
                     <el-form-item label="默认网关">
                         <el-input v-model="formData.gateway" />
@@ -127,9 +167,9 @@ onMounted(() => {
                 </div>
                 <div class="form-row">
                     <el-form-item label="通讯协议">
-                        <el-select v-model="formData.tcpProtocol" placeholder="请选择">
+                        <el-select v-model="formData.protocol" placeholder="请选择">
                             <el-option v-for="item in tcpProtocolOptions" :key="item.value" :label="item.label"
-                                :value="item.value" />
+                                :value="item.label" />
                         </el-select>
                     </el-form-item>
                     <el-form-item />
@@ -142,13 +182,13 @@ onMounted(() => {
                 </div>
                 <div class="form-row">
                     <el-form-item label="串口号">
-                        <el-select v-model="formData.comPort" placeholder="请选择">
-                            <el-option v-for="item in comPortOptions" :key="item.value" :label="item.label"
-                                :value="item.value" />
+                        <el-select v-model="formData2.port" placeholder="请选择" @change="handleChangePort">
+                            <el-option v-for="item in comPortOptions" :key="item.label" :label="item.label"
+                                :value="item.label" />
                         </el-select>
                     </el-form-item>
                     <el-form-item label="波特率">
-                        <el-select v-model="formData.baudRate" placeholder="请选择">
+                        <el-select v-model="formData2.baud" placeholder="请选择">
                             <el-option v-for="item in baudRateOptions" :key="item.value" :label="item.label"
                                 :value="item.value" />
                         </el-select>
@@ -156,13 +196,13 @@ onMounted(() => {
                 </div>
                 <div class="form-row">
                     <el-form-item label="校验位">
-                        <el-select v-model="formData.parity" placeholder="请选择">
+                        <el-select v-model="formData2.parity" placeholder="请选择">
                             <el-option v-for="item in parityOptions" :key="item.value" :label="item.label"
                                 :value="item.value" />
                         </el-select>
                     </el-form-item>
                     <el-form-item label="数据位">
-                        <el-select v-model="formData.dataBits" placeholder="请选择">
+                        <el-select v-model="formData2.data_bits" placeholder="请选择">
                             <el-option v-for="item in dataBitsOptions" :key="item.value" :label="item.label"
                                 :value="item.value" />
                         </el-select>
@@ -170,13 +210,13 @@ onMounted(() => {
                 </div>
                 <div class="form-row">
                     <el-form-item label="停止位">
-                        <el-select v-model="formData.stopBits" placeholder="请选择">
+                        <el-select v-model="formData2.stop_bits" placeholder="请选择">
                             <el-option v-for="item in stopBitsOptions" :key="item.value" :label="item.label"
                                 :value="item.value" />
                         </el-select>
                     </el-form-item>
                     <el-form-item label="通讯协议">
-                        <el-select v-model="formData.rtuProtocol" placeholder="请选择">
+                        <el-select v-model="formData2.protocol" placeholder="请选择">
                             <el-option v-for="item in rtuProtocolOptions" :key="item.value" :label="item.label"
                                 :value="item.value" />
                         </el-select>
@@ -197,6 +237,7 @@ onMounted(() => {
     width: 100%;
     height: 100%;
     padding: 20px;
+
     .form-wrapper {
         background: #fff;
         padding: 20px 50px;
@@ -204,6 +245,7 @@ onMounted(() => {
         padding-bottom: 120px;
         box-shadow: 0px 0px 10px rgba(219, 225, 236, 1);
     }
+
     .section {
         margin-bottom: 24px;
         padding-bottom: 16px;