From 1a82946c5ace4701015421489257941a00790367 Mon Sep 17 00:00:00 2001
From: cwchen <1048842385@qq.com>
Date: Thu, 25 Dec 2025 17:41:28 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BD=91=E7=BB=9C=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/devops/network.js          |  32 +---
 src/views/devops/network/index.vue | 281 ++++++++++++++++++-----------
 2 files changed, 182 insertions(+), 131 deletions(-)

diff --git a/src/api/devops/network.js b/src/api/devops/network.js
index 4b600cc..082b71a 100644
--- a/src/api/devops/network.js
+++ b/src/api/devops/network.js
@@ -1,45 +1,27 @@
 import request from '@/utils/request'
 
 // 系统运维->网络配置->查询TCP/IP配置
-export function getTCPIPConfigAPI(params) {
+export function getNetworkDetailAPI(params) {
     return request({
-        url: '/smartCar/data/device/getTCPIPConfig',
+        url: '/smartCar/data/network/getNetworkDetail',
         method: 'GET',
         params
     })
 }
 
 // 系统运维->网络配置->更新TCP/IP配置
-export function updateTCPIPConfigAPI(data) {
+export function updateNetworkEthernetAPI(data) {
     return request({
-        url: '/smartCar/data/device/updateTCPIPConfig',
+        url: '/smartCar/data/network/updateNetworkEthernet',
         method: 'POST',
         data
     })
 }
 
-// 系统运维->网络配置->查询网络状态
-export function getNetworkStatusAPI(params) {
+// 系统运维->网络配置->更新4G/5G配置
+export function updateNetworkSimAPI(data) {
     return request({
-        url: '/smartCar/data/device/getNetworkStatus',
-        method: 'GET',
-        params
-    })
-}
-
-// 系统运维->网络配置->查询网络配置
-export function getNetworkConfigAPI(params) {
-    return request({
-        url: '/smartCar/data/device/getNetworkConfig',
-        method: 'GET',
-        params
-    })
-}
-
-// 系统运维->网络配置->更新网络配置
-export function updateNetworkConfigAPI(data) {
-    return request({
-        url: '/smartCar/data/device/updateNetworkConfig',
+        url: '/smartCar/data/network/updateNetworkSim',
         method: 'POST',
         data
     })
diff --git a/src/views/devops/network/index.vue b/src/views/devops/network/index.vue
index 02fb83f..99343c1 100644
--- a/src/views/devops/network/index.vue
+++ b/src/views/devops/network/index.vue
@@ -4,37 +4,47 @@
         <el-card class="network-card">
             <div slot="header" class="card-header">
                 <div class="tab-header">
-                    <div class="tab-item" :class="{ active: activeTab === 'tcpip' }" @click="activeTab = 'tcpip'">TCP/IP</div>
-                    <div class="tab-item" :class="{ active: activeTab === '4g5g' }" @click="activeTab = '4g5g'">4G/5G</div>
+                    <div class="tab-item" :class="{ active: activeTab === 'tcpip' }" @click="activeTab = 'tcpip'">TCP/IP
+                    </div>
+                    <div class="tab-item" :class="{ active: activeTab === '4g5g' }" @click="activeTab = '4g5g'">4G/5G
+                    </div>
                 </div>
             </div>
 
             <!-- TCP/IP 标签页 -->
             <div v-if="activeTab === 'tcpip'" class="tab-content">
                 <el-form :model="tcpipForm" :rules="tcpipRules" ref="tcpipForm" label-width="120px">
-                    <el-form-item label="以太网接口">
+                    <el-form-item label="以太网接口" prop="ethernetInterface" required>
                         <el-select v-model="tcpipForm.ethernetInterface" style="width: 400px">
-                            <el-option label="eth0" value="eth0"></el-option>
+                            <el-option v-for="item in dict.type.ethernet_port" :key="item.value" :label="item.label"
+                                :value="item.value"></el-option>
                         </el-select>
                     </el-form-item>
                     <el-form-item label="启用DHCP">
                         <el-checkbox v-model="tcpipForm.enableDHCP" @change="handleDHCPChange"></el-checkbox>
                     </el-form-item>
-                    <el-form-item label="IP地址" prop="ipAddress" required>
-                        <el-input v-model="tcpipForm.ipAddress" placeholder="请输入IP地址" style="width: 400px" :disabled="tcpipForm.enableDHCP"></el-input>
+                    <el-form-item label="IP地址" prop="ipAddress" :required="!tcpipForm.enableDHCP">
+                        <el-input v-model="tcpipForm.ipAddress" placeholder="请输入IP地址" style="width: 400px"
+                            :disabled="tcpipForm.enableDHCP" maxlength="32" clearable show-word-limit></el-input>
                     </el-form-item>
-                    <el-form-item label="子网掩码" prop="subnetMask" required>
-                        <el-input v-model="tcpipForm.subnetMask" placeholder="请输入子网掩码" style="width: 400px" :disabled="tcpipForm.enableDHCP"></el-input>
+                    <el-form-item label="子网掩码" prop="subnetMask" :required="!tcpipForm.enableDHCP">
+                        <el-input v-model="tcpipForm.subnetMask" placeholder="请输入子网掩码" style="width: 400px"
+                            :disabled="tcpipForm.enableDHCP" maxlength="15" clearable show-word-limit></el-input>
                     </el-form-item>
                     <el-form-item label="默认网关">
-                        <el-input v-model="tcpipForm.defaultGateway" placeholder="请输入默认网关" style="width: 400px" :disabled="tcpipForm.enableDHCP"></el-input>
+                        <el-input v-model="tcpipForm.defaultGateway" placeholder="请输入默认网关" style="width: 400px"
+                            :disabled="tcpipForm.enableDHCP" maxlength="15" clearable show-word-limit></el-input>
                     </el-form-item>
                     <el-form-item label="DNS">
                         <div class="dns-list">
                             <div v-for="(dns, index) in tcpipForm.dnsList" :key="index" class="dns-item">
-                                <el-input v-model="dns.value" placeholder="请输入DNS" style="width: 350px" :disabled="tcpipForm.enableDHCP"></el-input>
-                                <el-button type="text" icon="el-icon-plus" class="dns-btn add-btn" @click="addDNS" :disabled="tcpipForm.enableDHCP"></el-button>
-                                <el-button type="text" icon="el-icon-minus" class="dns-btn remove-btn" @click="removeDNS(index)" :disabled="tcpipForm.enableDHCP || tcpipForm.dnsList.length === 1"></el-button>
+                                <el-input v-model="dns.value" placeholder="请输入DNS" style="width: 350px"
+                                    :disabled="tcpipForm.enableDHCP" maxlength="32" clearable show-word-limit></el-input>
+                                <el-button type="text" icon="el-icon-plus" class="dns-btn add-btn" @click="addDNS"
+                                    :disabled="tcpipForm.enableDHCP"></el-button>
+                                <el-button type="text" icon="el-icon-minus" class="dns-btn remove-btn"
+                                    @click="removeDNS(index)"
+                                    :disabled="tcpipForm.enableDHCP || tcpipForm.dnsList.length === 1"></el-button>
                             </div>
                         </div>
                     </el-form-item>
@@ -59,27 +69,27 @@
                         <div class="status-list">
                             <div class="status-item">
                                 <span class="status-label">模块状态：</span>
-                                <span class="status-value">{{ statusInfo.moduleStatus }}</span>
+                                <span class="status-value">{{ statusInfo.moduleStatus || '--' }}</span>
                             </div>
                             <div class="status-item">
                                 <span class="status-label">信号强度：</span>
-                                <span class="status-value">{{ statusInfo.signalStrength }}</span>
+                                <span class="status-value">{{ statusInfo.signalStrength || '--' }}</span>
                             </div>
                             <div class="status-item">
                                 <span class="status-label">拨号获取的IP地址：</span>
-                                <span class="status-value">{{ statusInfo.dialupIp }}</span>
+                                <span class="status-value">{{ statusInfo.dialupIp || '--' }}</span>
                             </div>
                             <div class="status-item">
                                 <span class="status-label">当前网络模式：</span>
-                                <span class="status-value">{{ statusInfo.networkMode }}</span>
+                                <span class="status-value">{{ statusInfo.networkMode || '--' }}</span>
                             </div>
                             <div class="status-item">
                                 <span class="status-label">当前网络运营商：</span>
-                                <span class="status-value">{{ statusInfo.operator }}</span>
+                                <span class="status-value">{{ statusInfo.operator || '--' }}</span>
                             </div>
                             <div class="status-item">
                                 <span class="status-label">模块IMEI：</span>
-                                <span class="status-value">{{ statusInfo.imei }}</span>
+                                <span class="status-value">{{ statusInfo.imei || '--' }}</span>
                             </div>
                         </div>
                     </div>
@@ -98,16 +108,20 @@
                                 <el-checkbox v-model="networkForm.enableDialup"></el-checkbox>
                             </el-form-item>
                             <el-form-item label="APN" prop="apn">
-                                <el-input v-model="networkForm.apn" placeholder="请输入APN" style="width: 400px"></el-input>
+                                <el-input v-model="networkForm.apn" placeholder="请输入APN"
+                                    style="width: 400px" maxlength="32" clearable show-word-limit></el-input>
                             </el-form-item>
                             <el-form-item label="接入号" prop="accessNumber">
-                                <el-input v-model="networkForm.accessNumber" placeholder="请输入接入号" style="width: 400px"></el-input>
+                                <el-input v-model="networkForm.accessNumber" placeholder="请输入接入号"
+                                    style="width: 400px" maxlength="32" clearable show-word-limit></el-input>
                             </el-form-item>
                             <el-form-item label="拨号用户名" prop="dialupUsername">
-                                <el-input v-model="networkForm.dialupUsername" placeholder="请输入拨号用户名" style="width: 400px"></el-input>
+                                <el-input v-model="networkForm.dialupUsername" placeholder="请输入拨号用户名"
+                                    style="width: 400px" maxlength="32" clearable show-word-limit></el-input>
                             </el-form-item>
                             <el-form-item label="拨号密码" prop="dialupPassword">
-                                <el-input v-model="networkForm.dialupPassword" type="password" placeholder="请输入拨号密码" style="width: 400px" show-password></el-input>
+                                <el-input v-model="networkForm.dialupPassword" type="password" placeholder="请输入拨号密码"
+                                    style="width: 400px" show-password maxlength="32" clearable show-word-limit></el-input>
                             </el-form-item>
                             <el-form-item>
                                 <el-button class="save-btn" @click="handleSaveNetwork">保存</el-button>
@@ -121,41 +135,67 @@
 </template>
 
 <script>
-import { getTCPIPConfigAPI, updateTCPIPConfigAPI, getNetworkStatusAPI, getNetworkConfigAPI, updateNetworkConfigAPI } from '@/api/devops/network'
+import { getNetworkDetailAPI, updateNetworkEthernetAPI, updateNetworkSimAPI } from '@/api/devops/network'
 
 export default {
     name: 'Network',
+    dicts: ['ethernet_port'],
     data() {
         return {
             loading: false,
             activeTab: 'tcpip',
             tcpipForm: {
-                ethernetInterface: 'eth0',
+                networkEthernetId: null,
+                systemId: 1,
+                ethernetInterface: '',
                 enableDHCP: false,
                 ipAddress: '',
                 subnetMask: '',
                 defaultGateway: '',
                 dnsList: [{ value: '' }],
-                macAddress: '18-F2-2C-32-DF-B6'
+                macAddress: ''
             },
             tcpipRules: {
+                ethernetInterface: [
+                    { required: true, message: '以太网接口不能为空', trigger: 'change' }
+                ],
                 ipAddress: [
-                    { required: true, message: 'IP地址不能为空', trigger: 'blur' }
+                    {
+                        validator: (rule, value, callback) => {
+                            if (!this.tcpipForm.enableDHCP && !value) {
+                                callback(new Error('IP地址不能为空'))
+                            } else {
+                                callback()
+                            }
+                        },
+                        trigger: 'blur'
+                    }
                 ],
                 subnetMask: [
-                    { required: true, message: '子网掩码不能为空', trigger: 'blur' }
+                    {
+                        validator: (rule, value, callback) => {
+                            if (!this.tcpipForm.enableDHCP && !value) {
+                                callback(new Error('子网掩码不能为空'))
+                            } else {
+                                callback()
+                            }
+                        },
+                        trigger: 'blur'
+                    }
                 ]
             },
             statusInfo: {
-                moduleStatus: '拨号成功',
-                signalStrength: '96',
-                dialupIp: '10.52.34.103',
-                networkMode: 'LTE TDD',
-                operator: '中国移动',
-                imei: '862819047641246'
+                moduleStatus: '',
+                signalStrength: '',
+                dialupIp: '',
+                networkMode: '',
+                operator: '',
+                imei: ''
             },
             networkForm: {
-                networkType: '4G',
+                simId: null,
+                systemId: 1,
+                networkType: '',
                 enableDialup: false,
                 apn: '',
                 accessNumber: '',
@@ -166,79 +206,104 @@ export default {
         }
     },
     created() {
-        this.getTCPIPConfig()
-        this.getNetworkStatus()
-        this.getNetworkConfig()
+        this.getNetworkDetail()
     },
     methods: {
-        /** 获取TCP/IP配置 */
-        async getTCPIPConfig() {
+        /** 获取网络详情（包含以太网和SIM卡配置） */
+        async getNetworkDetail() {
             try {
                 this.loading = true
-                const res = await getTCPIPConfigAPI()
+                const res = await getNetworkDetailAPI()
                 if (res.code === 200 && res.data) {
                     const data = res.data
-                    this.tcpipForm = {
-                        ethernetInterface: data.ethernetInterface || 'eth0',
-                        enableDHCP: data.enableDHCP || false,
-                        ipAddress: data.ipAddress || '',
-                        subnetMask: data.subnetMask || '',
-                        defaultGateway: data.defaultGateway || '',
-                        dnsList: data.dnsList && data.dnsList.length > 0 ? data.dnsList.map(dns => ({ value: dns })) : [{ value: '' }],
-                        macAddress: data.macAddress || '18-F2-2C-32-DF-B6'
+
+                    // 处理以太网配置 (ethernet)
+                    if (data.ethernet) {
+                        const ethernet = data.ethernet
+                        // 处理DNS，将逗号分隔的字符串分割为数组
+                        let dnsList = [{ value: '' }]
+                        if (ethernet.dns) {
+                            if (typeof ethernet.dns === 'string') {
+                                // 使用逗号分割字符串，过滤空值
+                                const dnsArray = ethernet.dns.split(',').map(dns => dns.trim()).filter(dns => dns)
+                                dnsList = dnsArray.length > 0
+                                    ? dnsArray.map(dns => ({ value: dns }))
+                                    : [{ value: '' }]
+                            } else if (Array.isArray(ethernet.dns)) {
+                                dnsList = ethernet.dns.length > 0
+                                    ? ethernet.dns.map(dns => ({ value: dns }))
+                                    : [{ value: '' }]
+                            }
+                        }
+
+                        this.tcpipForm = {
+                            networkEthernetId: ethernet.networkEthernetId || null,
+                            systemId: ethernet.systemId || 1,
+                            ethernetInterface: ethernet.ethernetInterface || '',
+                            enableDHCP: ethernet.enableDhcp === '1' || ethernet.enableDhcp === 1,
+                            ipAddress: ethernet.ipAddress || '',
+                            subnetMask: ethernet.subnetMask || '',
+                            defaultGateway: ethernet.defaultGateway || '',
+                            dnsList: dnsList,
+                            macAddress: ethernet.macAddress || ''
+                        }
+
+                        // 初始化后清除验证状态，让验证规则根据 enableDHCP 状态重新应用
+                        this.$nextTick(() => {
+                            if (this.$refs.tcpipForm) {
+                                this.$refs.tcpipForm.clearValidate(['ipAddress', 'subnetMask'])
+                            }
+                        })
+                    }
+
+                    // 处理SIM卡配置 (sim)
+                    if (data.sim) {
+                        const sim = data.sim
+                        // 状态信息
+                        this.statusInfo = {
+                            moduleStatus: sim.moduleStatus || '',
+                            signalStrength: sim.signalStrength || '',
+                            dialupIp: sim.dialingIpAddress || '',
+                            networkMode: sim.currentNetworkMode || '',
+                            operator: sim.currentNetworkOperators || '',
+                            imei: sim.moduleImel || ''
+                        }
+
+                        // 配置信息
+                        this.networkForm = {
+                            simId: sim.simId || null,
+                            systemId: sim.systemId || 1,
+                            networkType: sim.signalType || '',
+                            enableDialup: sim.enableDialing === '1' || sim.enableDialing === 1,
+                            apn: sim.apn || '',
+                            accessNumber: sim.accessNumber || '',
+                            dialupUsername: sim.dialUpUsername || '',
+                            dialupPassword: sim.dialingPassword || ''
+                        }
                     }
                 }
             } catch (error) {
-                console.error('获取TCP/IP配置失败:', error)
+                console.error('获取网络详情失败:', error)
             } finally {
                 this.loading = false
             }
         },
-        /** 获取网络状态 */
-        async getNetworkStatus() {
-            try {
-                const res = await getNetworkStatusAPI()
-                if (res.code === 200 && res.data) {
-                    this.statusInfo = {
-                        moduleStatus: res.data.moduleStatus || '拨号成功',
-                        signalStrength: res.data.signalStrength || '96',
-                        dialupIp: res.data.dialupIp || '10.52.34.103',
-                        networkMode: res.data.networkMode || 'LTE TDD',
-                        operator: res.data.operator || '中国移动',
-                        imei: res.data.imei || '862819047641246'
-                    }
-                }
-            } catch (error) {
-                console.error('获取网络状态失败:', error)
-            }
-        },
-        /** 获取网络配置 */
-        async getNetworkConfig() {
-            try {
-                const res = await getNetworkConfigAPI()
-                if (res.code === 200 && res.data) {
-                    const data = res.data
-                    this.networkForm = {
-                        networkType: data.networkType || '4G',
-                        enableDialup: data.enableDialup || false,
-                        apn: data.apn || '',
-                        accessNumber: data.accessNumber || '',
-                        dialupUsername: data.dialupUsername || '',
-                        dialupPassword: data.dialupPassword || ''
-                    }
-                }
-            } catch (error) {
-                console.error('获取网络配置失败:', error)
-            }
-        },
         /** DHCP切换 */
         handleDHCPChange() {
-            // DHCP启用时，清空IP相关字段
+            // DHCP启用时，清空IP相关字段和DNS
             if (this.tcpipForm.enableDHCP) {
                 this.tcpipForm.ipAddress = ''
                 this.tcpipForm.subnetMask = ''
                 this.tcpipForm.defaultGateway = ''
+                // 清空DNS列表，重置为只有一个空值
+                this.tcpipForm.dnsList = [{ value: '' }]
             }
+            // 清除验证状态
+            this.$nextTick(() => {
+                if (this.$refs.tcpipForm) {
+                    this.$refs.tcpipForm.clearValidate(['ipAddress', 'subnetMask'])
+                }
+            })
         },
         /** 添加DNS */
         addDNS() {
@@ -253,8 +318,9 @@ export default {
         /** 保存TCP/IP配置 */
         async handleSaveTCPIP() {
             try {
+                // 表单验证，如果验证失败会抛出错误，错误信息会显示在表单项下方
                 await this.$refs.tcpipForm.validate()
-                
+                // 如果未启用DHCP，额外验证IP地址和子网掩码
                 if (!this.tcpipForm.enableDHCP) {
                     if (!this.tcpipForm.ipAddress) {
                         this.$message.error('IP地址不能为空')
@@ -266,28 +332,33 @@ export default {
                     }
                 }
 
+                // 验证通过后，开始保存
                 this.loading = true
+                // 处理DNS，将数组用逗号拼接成字符串
+                const dnsValue = this.tcpipForm.dnsList
+                    .map(item => item.value)
+                    .filter(item => item)
+                    .join(',')
+
                 const params = {
+                    networkEthernetId: this.tcpipForm.networkEthernetId,
                     ethernetInterface: this.tcpipForm.ethernetInterface,
-                    enableDHCP: this.tcpipForm.enableDHCP,
+                    enableDhcp: this.tcpipForm.enableDHCP ? '1' : '0',
                     ipAddress: this.tcpipForm.ipAddress,
                     subnetMask: this.tcpipForm.subnetMask,
                     defaultGateway: this.tcpipForm.defaultGateway,
-                    dnsList: this.tcpipForm.dnsList.map(item => item.value).filter(item => item),
+                    dns: dnsValue,
                     macAddress: this.tcpipForm.macAddress
                 }
-                const res = await updateTCPIPConfigAPI(params)
+                const res = await updateNetworkEthernetAPI(params)
                 if (res.code === 200) {
                     this.$message.success('保存成功')
+                    // 保存后重新获取数据
+                    this.getNetworkDetail()
                 } else {
                     this.$message.error(res.msg || '保存失败')
                 }
             } catch (error) {
-                if (error.message !== '数据未填写完整') {
-                    console.error('保存TCP/IP配置失败:', error)
-                    this.$message.error('保存失败，请稍后重试')
-                }
-            } finally {
                 this.loading = false
             }
         },
@@ -296,24 +367,23 @@ export default {
             try {
                 this.loading = true
                 const params = {
-                    networkType: this.networkForm.networkType,
-                    enableDialup: this.networkForm.enableDialup,
+                    simId: this.networkForm.simId,
+                    signalType: this.networkForm.networkType,
+                    enableDialing: this.networkForm.enableDialup ? '1' : '0',
                     apn: this.networkForm.apn,
                     accessNumber: this.networkForm.accessNumber,
-                    dialupUsername: this.networkForm.dialupUsername,
-                    dialupPassword: this.networkForm.dialupPassword
+                    dialUpUsername: this.networkForm.dialupUsername,
+                    dialingPassword: this.networkForm.dialupPassword
                 }
-                const res = await updateNetworkConfigAPI(params)
+                const res = await updateNetworkSimAPI(params)
                 if (res.code === 200) {
                     this.$message.success('保存成功')
-                    // 保存后重新获取状态
-                    this.getNetworkStatus()
+                    // 保存后重新获取数据
+                    this.getNetworkDetail()
                 } else {
                     this.$message.error(res.msg || '保存失败')
                 }
             } catch (error) {
-                console.error('保存网络配置失败:', error)
-                this.$message.error('保存失败，请稍后重试')
             } finally {
                 this.loading = false
             }
@@ -529,4 +599,3 @@ export default {
     }
 }
 </style>
-