update

components.d.ts

@@ -11,8 +11,6 @@ declare module 'vue' {
     ElAside: typeof import('element-plus/es')['ElAside']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
-    ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
-    ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDivider: typeof import('element-plus/es')['ElDivider']
     ElForm: typeof import('element-plus/es')['ElForm']

src/api/setting.ts

@@ -260,6 +260,24 @@ export function putLineCrossingDetection(data:any) {
     })
 }
 
+// 设置端口
+export function getNetworkPort() {
+    return request<any>({
+        url: `/API/V1.0/Network/Port`,
+        method: 'get',
+        timeout: 5000
+    })
+}
+
+export function putNetworkPort(data:any) {
+    return request<any>({
+        url: `/API/V1.0/Network/Port`,
+        method: 'put',
+        data:data,
+        timeout: 10000
+    })
+}
+
 
 
 

src/views/settings/audioVideo/components/audio/index.vue

@@ -166,7 +166,7 @@ onMounted(() => {
 
 .slider-control {
   flex: 1;
-  max-width: 320px;
+  max-width: 300px;
   gap: 12px;
 
   .el-slider {

src/views/settings/audioVideo/components/nightVisionIlluminator/index.vue

@@ -244,7 +244,8 @@ onMounted(() => {
 
   .section-title {
     font-size: 14px;
-    color: #909399;
+    font-weight: 500;
+    color: #4a4b4c;
     margin-bottom: 14px;
     padding-bottom: 10px;
     border-bottom: 1px solid #e4e7ed;
@@ -280,7 +281,7 @@ onMounted(() => {
 
 .slider-control {
   flex: 1;
-  max-width: 400px;
+  max-width: 300px;
   gap: 8px;
 
   .el-slider {

src/views/settings/audioVideo/components/video/index.vue

@@ -288,8 +288,9 @@ onMounted(() => {
   margin-bottom: 20px;
 
   legend {
+    font-weight: 500;
+    color: #4a4b4c;
     font-size: 14px;
-    color: #606266;
     padding: 0 8px;
   }
 }

src/views/settings/netSettings/index.vue

@@ -10,7 +10,15 @@
             <div class="section-title">Port Settings</div>
             <div class="port-row">
               <span class="label">Port：</span>
-              <el-input v-model="Port" placeholder="Enter port number" style="width: 220px;" />
+              <el-input-number
+                v-model="Port"
+                :min="1"
+                :max="65535"
+                :step="1"
+                :controls="false"
+                placeholder="1-65535"
+                style="width: 220px;"
+              />
             </div>
           </div>
           <el-divider class="short-divider" />
@@ -28,14 +36,34 @@
 import {ref} from "vue";
 import IP from './components/IP/index.vue'
 import NetworkDiagnostics from './components/networkDiagnostics/index.vue'
+import { getNetworkPort, putNetworkPort } from '@/api/setting'
 
 const activeName = ref('first')
 const Port = ref('')
 
-function handleSave(){
-
+function getPortSetting() {
+  getNetworkPort().then(res => {
+    if (res.data) {
+      Port.value = res.data.Port
+    }
+  })
 }
 
+onMounted(() => {
+  getPortSetting()
+})
+
+function handleSave(){
+  putNetworkPort({
+    Port: Number(Port.value)
+  }).then(res => {
+    if (res.data === 'ok\n') {
+      ElMessage.success('Save success')
+    } else {
+      ElMessage.warning('Save failed')
+    }
+  })
+}
 </script>
 
 

src/views/standardProtocol/components/onvif/index.vue

@@ -7,36 +7,38 @@
       </div>
 
       <!-- ONVIF Settings Form -->
-      <el-form :model="onvifConfig" label-width="125px" class="onvif-form">
+      <el-form ref="formRef" :model="onvifConfig" :rules="formRules" label-width="140px" class="onvif-form">
         <!-- Enable ONVIF -->
         <el-form-item label="Enable ONVIF">
           <el-switch v-model="onvifConfig.OnvifEnable"/>
         </el-form-item>
 
-        <!-- IP Address -->
-        <el-form-item label="IP Address">
-          <el-input v-model="onvifConfig.IpAddr" placeholder="Enter IP address"/>
-        </el-form-item>
-
-        <!-- Port -->
-        <el-form-item label="Port">
-          <el-input v-model="onvifConfig.Port" placeholder="Enter port number"/>
-        </el-form-item>
-
-        <!-- ONVIF Username -->
-        <el-form-item label="ONVIF Username">
-          <el-input v-model="onvifConfig.OnvifName" placeholder="Enter ONVIF username"/>
-        </el-form-item>
-
-        <!-- ONVIF Password -->
-        <el-form-item label="ONVIF Password">
-          <el-input v-model="onvifConfig.Password" type="password" placeholder="Enter ONVIF password" show-password/>
-        </el-form-item>
-
-        <!-- Save Button -->
-        <el-form-item>
-          <el-button type="primary" @click="saveOnvifConfig" :loading="saving">Save</el-button>
-        </el-form-item>
+        <template v-if="onvifConfig.OnvifEnable">
+          <!-- IP Address -->
+          <el-form-item label="IP Address" prop="IpAddr">
+            <el-input v-model="onvifConfig.IpAddr" placeholder="Enter IP address"/>
+          </el-form-item>
+
+          <!-- Port -->
+          <el-form-item label="Port" prop="Port">
+            <el-input v-model="onvifConfig.Port" placeholder="Enter port number"/>
+          </el-form-item>
+
+          <!-- ONVIF Username -->
+          <el-form-item label="ONVIF Username" prop="OnvifName">
+            <el-input v-model="onvifConfig.OnvifName" placeholder="Enter ONVIF username"/>
+          </el-form-item>
+
+          <!-- ONVIF Password -->
+          <el-form-item label="ONVIF Password" prop="Password">
+            <el-input v-model="onvifConfig.Password" type="password" placeholder="Enter ONVIF password" show-password/>
+          </el-form-item>
+
+          <!-- Save Button -->
+          <el-form-item>
+            <el-button type="primary" @click="saveOnvifConfig" :loading="saving">Save</el-button>
+          </el-form-item>
+        </template>
       </el-form>
 
       <!-- Access Example -->
@@ -74,9 +76,12 @@
 </template>
 
 <script setup lang="ts">
-import {ref, onMounted} from 'vue'
+import {ref, computed, onMounted} from 'vue'
 import {getOnvifProtocolApi, OnvifProtocolApi} from '@/api/protocol'
 import {ElMessage} from 'element-plus'
+import type {FormInstance, FormRules} from 'element-plus'
+
+const formRef = ref<FormInstance>()
 
 const onvifConfig = ref({
   OnvifEnable: false,
@@ -90,6 +95,49 @@ const saving = ref(false)
 const showSaveToast = ref(false)
 const showCopyToast = ref(false)
 
+// IP address validation
+const validateIp = (_rule: any, value: string, callback: any) => {
+  if (!value) return callback(new Error('Please enter IP address'))
+  const ipReg = /^((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$/
+  if (!ipReg.test(value)) {
+    callback(new Error('Please enter a valid IP address'))
+  } else {
+    callback()
+  }
+}
+
+// Port validation
+const validatePort = (_rule: any, value: string, callback: any) => {
+  if (!value) return callback(new Error('Please enter port number'))
+  const port = Number(value)
+  if (!Number.isInteger(port) || port < 1 || port > 65535) {
+    callback(new Error('Port range is 1-65535'))
+  } else {
+    callback()
+  }
+}
+
+// Dynamically generate validation rules based on ONVIF switch
+const formRules = computed<FormRules>(() => {
+  if (!onvifConfig.value.OnvifEnable) return {}
+  return {
+    IpAddr: [
+      {required: true, validator: validateIp, trigger: 'blur'}
+    ],
+    Port: [
+      {required: true, validator: validatePort, trigger: 'blur'}
+    ],
+    OnvifName: [
+      {required: true, message: 'Please enter username', trigger: 'blur'},
+      {min: 6, max: 16, message: 'Username must be 6-16 characters', trigger: 'blur'}
+    ],
+    Password: [
+      {required: true, message: 'Please enter password', trigger: 'blur'},
+      {min: 6, max: 16, message: 'Password must be 6-16 characters', trigger: 'blur'}
+    ]
+  }
+})
+
 // Computed ONVIF access URL
 // const onvifAccessUrl = computed(() => {
 //   return `http://${onvifConfig.value.IpAddr}:${onvifConfig.value.Port}/onvif/device_service`
@@ -100,7 +148,7 @@ onMounted(async () => {
     const resp = await getOnvifProtocolApi()
     if (resp.data) {
       onvifConfig.value = {
-        OnvifEnable: resp.data.OnvifEnable || false,
+        OnvifEnable: resp.data.OnvifEnable,
         IpAddr: resp.data.IpAddr,
         Port: resp.data.Port,
         OnvifName: resp.data.OnvifName,
@@ -113,19 +161,23 @@ onMounted(async () => {
 })
 
 const saveOnvifConfig = async () => {
-  saving.value = true
-  try {
-    const response = await OnvifProtocolApi(onvifConfig.value)
-    if (response.data === 'ok\n') {
-      ElMessage.success('Configuration saved successfully')
-    } else {
-      ElMessage.error('Failed to save ONVIF configuration')
+  if (!formRef.value) return
+  await formRef.value.validate(async (valid) => {
+    if (!valid) return
+    saving.value = true
+    try {
+      const response = await OnvifProtocolApi(onvifConfig.value)
+      if ((response as any).data === 'ok\n') {
+        ElMessage.success('Configuration saved successfully')
+      } else {
+        ElMessage.error('Failed to save configuration')
+      }
+    } catch (error) {
+      ElMessage.error('Failed to save configuration')
+    } finally {
+      saving.value = false
     }
-  } catch (error) {
-    ElMessage.error('Failed to save ONVIF configuration:', error)
-  } finally {
-    saving.value = false
-  }
+  })
 }
 
 // // Copy to clipboard