增加多IP配置功能

src/common/GlobalData.ts

@@ -42,6 +42,13 @@ export default class GlobalData {
   ) {
     if (config) {
       this._application_config = config;
+      try {
+        this._application_config.ip_list = JSON.parse(
+          (this._application_config.ip_list ?? []).toString()
+        );
+      } catch (e) {
+        console.log(e);
+      }
     }
   }
 

src/components/AdvancedIpAddressDialog.vue

@@ -31,7 +31,7 @@
 
         <q-card-section
           class="scroll q-pa-xs q-ma-none"
-          style="width: 45vw; height: 55vh"
+          style="width: 45vw; max-height: 55vh"
         >
           <q-list>
             <q-item>
@@ -87,7 +87,7 @@
                 />
               </q-item-section>
             </q-item>
-            <q-item>
+            <q-item v-if="$props.showDns">
               <q-item-section avatar class="header_label">
                 {{ $t("dns server") }}1
               </q-item-section>
@@ -104,7 +104,7 @@
                 />
               </q-item-section>
             </q-item>
-            <q-item>
+            <q-item v-if="$props.showDns">
               <q-item-section avatar class="header_label">
                 {{ $t("dns server") }}2
               </q-item-section>
@@ -153,10 +153,17 @@ import { useStore } from "src/store";
 import { useQuasar, copyToClipboard, uid } from "quasar";
 import { useI18n } from "vue-i18n";
 import GlobalData from "src/common/GlobalData";
+import { AdvancedIpAddressEntity } from "src/entities/AdvancedIpAddressEntity";
 
 export default defineComponent({
   name: "ComponentSystenSettingAdvancedNetworkDialog",
   components: {},
+  props: {
+    showDns: {
+      type: Boolean,
+      default: true,
+    },
+  },
   setup() {
     let $store = useStore();
     let $q = useQuasar();
@@ -188,7 +195,7 @@ export default defineComponent({
       },
       async showDialogAsync(
         _status: string,
-        data: any,
+        data: AdvancedIpAddressEntity,
         _ip_filter_list: any[]
       ) {
         if (_resolove) {
@@ -201,7 +208,7 @@ export default defineComponent({
           if (data) {
             ip_address.value = data.ip_address || "192.168.1.1";
             gateway.value = data.gateway || "192.168.1.1";
-            netmask.value = data.netmask || "255.0.0.0";
+            netmask.value = data.netmask || "255.255.255.0";
             dns1.value = data.dns1 || "";
             dns2.value = data.dns2 || "";
           }
@@ -222,7 +229,7 @@ export default defineComponent({
         status.value = "add";
         ip_address.value = "192.168.1.1";
         gateway.value = "192.168.1.1";
-        netmask.value = "192.168.1.1";
+        netmask.value = "255.255.255.0";
         dns1.value = "";
         dns2.value = "";
       },
@@ -231,13 +238,13 @@ export default defineComponent({
         try {
           if (_resolove) {
             try {
-              _resolove({
+              const data = new AdvancedIpAddressEntity();
-                ip_address: ip_address.value,
+              data.ip_address = ip_address.value;
-                gateway: gateway.value,
+              data.gateway = gateway.value;
-                netmask: netmask.value,
+              data.netmask = netmask.value;
-                dns1: dns1.value,
+              data.dns1 = dns1.value;
-                dns2: dns2.value,
+              data.dns2 = dns2.value;
-              });
+              _resolove(data);
             } catch {
               _resolove(null);
             }

src/components/SystemSettingDialog.vue

@@ -91,7 +91,7 @@
               <q-card-section>
                 <q-form ref="network_form" @submit="applyNetwork">
                   <q-list>
-                    <q-item>
+                    <q-item class="q-pa-none">
                       <q-item-section avatar class="width_5_1">{{
                         $t("auto ip") + ":"
                       }}</q-item-section>
@@ -105,7 +105,7 @@
                         />
                       </q-item-section>
                     </q-item>
-                    <q-item v-if="auto_ip != $t('enable')">
+                    <q-item class="q-pa-none" v-if="auto_ip != $t('enable')">
                       <q-item-section avatar class="width_5_1">{{
                         $t("ip address") + ":"
                       }}</q-item-section>
@@ -127,7 +127,7 @@
                         />
                       </q-item-section>
                     </q-item>
-                    <q-item v-if="auto_ip != $t('enable')">
+                    <q-item class="q-pa-none" v-if="auto_ip != $t('enable')">
                       <q-item-section avatar class="width_5_1">{{
                         $t("gateway") + ":"
                       }}</q-item-section>
@@ -149,7 +149,7 @@
                         />
                       </q-item-section>
                     </q-item>
-                    <q-item v-if="auto_ip != $t('enable')">
+                    <q-item class="q-pa-none" v-if="auto_ip != $t('enable')">
                       <q-item-section avatar class="width_5_1">{{
                         $t("netmask") + ":"
                       }}</q-item-section>
@@ -171,7 +171,7 @@
                         />
                       </q-item-section>
                     </q-item>
-                    <q-item v-if="auto_ip != $t('enable')">
+                    <q-item class="q-pa-none" v-if="auto_ip != $t('enable')">
                       <q-item-section avatar class="width_5_1">{{
                         $t("dns server") + "1:"
                       }}</q-item-section>
@@ -191,7 +191,7 @@
                         />
                       </q-item-section>
                     </q-item>
-                    <q-item v-if="auto_ip != $t('enable')">
+                    <q-item class="q-pa-none" v-if="auto_ip != $t('enable')">
                       <q-item-section avatar class="width_5_1">{{
                         $t("dns server") + "2:"
                       }}</q-item-section>
@@ -211,7 +211,7 @@
                         />
                       </q-item-section>
                     </q-item>
-                    <q-item>
+                    <q-item class="q-pa-none">
                       <q-item-section avatar class="width_5_1">{{
                         $t("mac address") + ":"
                       }}</q-item-section>
@@ -234,13 +234,11 @@
                         />
                       </q-item-section>
                     </q-item>
-                    <q-item>
+                    <q-item class="q-pa-none">
                       <q-item-section> </q-item-section>
                       <q-item-section avatar>
                         <q-btn
-                          @click="
+                          @click="onAdvanceNetwork"
-                            $refs.system_setting_advanced_network_dialog.showDialogAsync()
-                          "
                           outline
                           color="primary"
                           :label="$t('advanced')"
@@ -1066,6 +1064,7 @@ import TimingTaskEntity, {
 import { EWeekDays } from "src/entities/EWeekDays";
 
 import SystenSettingAdvancedNetworkDialog from "src/components/SystenSettingAdvancedNetworkDialog.vue";
+import { AdvancedIpAddressEntity } from "src/entities/AdvancedIpAddressEntity";
 
 const _time_zones = [
   "UTC-12(Central Pacific)",
@@ -1108,6 +1107,7 @@ export default defineComponent({
     let loading = ref(false);
 
     const timing_task_dialog: Ref<any> = ref(null);
+    const system_setting_advanced_network_dialog: Ref<any> = ref(null);
 
     const function_mirroring_output = ref(
       ($store.state.device_attribute &
@@ -1124,6 +1124,7 @@ export default defineComponent({
     let dns1 = ref();
     let dns2 = ref();
     let mac_address = ref("11:22:33:44:55:66");
+    let ip_address_list: AdvancedIpAddressEntity[] = [];
 
     let brightness = ref(0);
     let contrast = ref(0);
@@ -1251,6 +1252,7 @@ export default defineComponent({
         ip_address.value = $store.state.device_ip_address || "192.168.1.168";
         dns1.value = config.dns1 || "";
         dns2.value = config.dns2 || "";
+        ip_address_list = config.ip_list || [];
       }
     };
 
@@ -1377,6 +1379,7 @@ export default defineComponent({
       request.mac_address = mac_address.value;
       request.dns1 = dns1.value;
       request.dns2 = dns2.value;
+      request.ip_address_list = ip_address_list;
 
       let success = false;
       try {
@@ -1612,6 +1615,7 @@ export default defineComponent({
       show_dialog,
       e_week_Days: ref(EWeekDays),
       timing_task_dialog,
+      system_setting_advanced_network_dialog,
       timing_tasks,
       function_mirroring_output,
       function_output_board_attribute,
@@ -1843,6 +1847,18 @@ export default defineComponent({
             "1920x1080@60"
         );
       },
+      async onAdvanceNetwork() {
+        const _ip_address_list =
+          await system_setting_advanced_network_dialog.value.showDialogAsync(
+            GlobalData.getInstance()?.applicationConfig?.ip_list
+          );
+        if (Array.isArray(_ip_address_list)) {
+          ip_address_list = _ip_address_list;
+        } else {
+          ip_address_list =
+            GlobalData.getInstance()?.applicationConfig?.ip_list || [];
+        }
+      },
     };
   },
 });

src/components/SystenSettingAdvancedNetworkDialog.vue

@@ -114,7 +114,10 @@
       </q-form>
     </q-card>
   </q-dialog>
-  <advanced-ip-address-dialog ref="advanced_ip_address_dialog" />
+  <advanced-ip-address-dialog
+    ref="advanced_ip_address_dialog"
+    :showDns="false"
+  />
 </template>
 
 <style scoped>
@@ -134,6 +137,7 @@ import { useQuasar, copyToClipboard, uid } from "quasar";
 import { useI18n } from "vue-i18n";
 import GlobalData from "src/common/GlobalData";
 import AdvancedIpAddressDialog from "src/components/AdvancedIpAddressDialog.vue";
+import { AdvancedIpAddressEntity } from "src/entities/AdvancedIpAddressEntity";
 
 export default defineComponent({
   name: "ComponentSystenSettingAdvancedNetworkDialog",
@@ -147,7 +151,7 @@ export default defineComponent({
 
     let show_dialog = ref(false);
 
-    const advance_ip_table_selected: Ref<any> = ref([]);
+    const advance_ip_table_selected: Ref<AdvancedIpAddressEntity[]> = ref([]);
 
     const advance_ip_columns = [
       {
@@ -169,21 +173,21 @@ export default defineComponent({
         label: $t.t("gateway"),
         field: "gateway",
       },
-      {
+      // {
-        name: "dns1",
+      //   name: "dns1",
-        align: "left",
+      //   align: "left",
-        field: "dns1",
+      //   field: "dns1",
-        label: $t.t("dns server") + " 1",
+      //   label: $t.t("dns server") + " 1",
-      },
+      // },
-      {
+      // {
-        name: "dns2",
+      //   name: "dns2",
-        align: "left",
+      //   align: "left",
-        field: "dns2",
+      //   field: "dns2",
-        label: $t.t("dns server") + " 2",
+      //   label: $t.t("dns server") + " 2",
-      },
+      // },
     ];
 
-    const advance_ip_rows: Ref<any> = ref([]);
+    const advance_ip_rows: Ref<AdvancedIpAddressEntity[]> = ref([]);
 
     const isIpAddress = (str: string) => {
       return (
@@ -205,12 +209,23 @@ export default defineComponent({
       loga(a: any) {
         console.log(a);
       },
-      async showDialogAsync(_data: any) {
+      async showDialogAsync(_data: AdvancedIpAddressEntity[]) {
         if (_resolove) {
           _resolove();
           _resolove = null;
         }
         return new Promise((resolove) => {
+          _resolove = resolove;
+
+          if (Array.isArray(_data)) {
+            for (const item of _data) {
+              if (item) {
+                (<any>item).uuid = uid();
+                advance_ip_rows.value.push(item);
+              }
+            }
+          }
+
           show_dialog.value = true;
         });
       },
@@ -224,14 +239,12 @@ export default defineComponent({
       },
 
       async onSubmit() {
-        let success = false;
+        // let success = false;
 
         try {
           if (_resolove) {
             try {
-              _resolove({
+              _resolove(advance_ip_rows.value);
-                ip_address_list: advance_ip_rows.value,
-              });
             } catch {
               _resolove(null);
             }
@@ -259,14 +272,15 @@ export default defineComponent({
             advance_ip_rows.value.map((element: any) => element.ip_address)
           );
         if (data) {
-          advance_ip_rows.value.push({
+          const push_data = new AdvancedIpAddressEntity();
-            uuid: uid(),
+          (<any>push_data).uuid = uid();
-            ip_address: data.ip_address,
+          push_data.ip_address = data.ip_address;
-            gateway: data.gateway,
+          push_data.gateway = data.gateway;
-            netmask: data.netmask,
+          push_data.netmask = data.netmask;
-            dns1: data.dns1,
+          // push_data.dns1= data.dns1
-            dns2: data.dns2,
+          // push_data.dns2= data.dns2
-          });
+
+          advance_ip_rows.value.push(push_data);
         }
       },
       async advance_ip_editRow() {
@@ -281,8 +295,8 @@ export default defineComponent({
             advance_ip_table_selected.value[0].ip_address = data.ip_address;
             advance_ip_table_selected.value[0].gateway = data.gateway;
             advance_ip_table_selected.value[0].netmask = data.netmask;
-            advance_ip_table_selected.value[0].dns1 = data.dns1;
+            // advance_ip_table_selected.value[0].dns1 = data.dns1;
-            advance_ip_table_selected.value[0].dns2 = data.dns2;
+            // advance_ip_table_selected.value[0].dns2 = data.dns2;
           }
         }
       },

src/entities/AdvancedIpAddressEntity.ts

@@ -0,0 +1,7 @@
+export class AdvancedIpAddressEntity {
+  ip_address = "";
+  netmask = "";
+  gateway = "";
+  dns1 = "";
+  dns2 = "";
+}

src/entities/AdvancedNetworkDialogEntity.ts

@@ -1,11 +0,0 @@
-export class AdvancedIpEntity {
-  ip_address = "";
-  net_mask = "";
-  dns1 = "";
-  dns2 = "";
-}
-
-export class AdvancedNetworkDialogEntity {
-  ip_address_list: AdvancedIpEntity[] = [];
-  gateway_list: string[] = [];
-}

src/entities/ApplicationConfigEntity.ts

@@ -1,3 +1,4 @@
+import { AdvancedIpAddressEntity } from "./AdvancedIpAddressEntity";
 export default class ApplicationConfigEntity {
   auto_ip_address: string = "";
   ip_address: string = "";
@@ -6,6 +7,7 @@ export default class ApplicationConfigEntity {
   subnet_mask: string = "";
   dns1 = "";
   dns2 = "";
+  ip_list: AdvancedIpAddressEntity[] = [];
   use_ntp: string = "";
   ntp_server: string = "";
   ntp_sync_delay: string = "";

src/entities/WSProtocol.ts

@@ -1,3 +1,4 @@
+import { AdvancedIpAddressEntity } from "./AdvancedIpAddressEntity";
 import { StringKeyValueEntity } from "./StringKeyValueEntity";
 import { SignalSourceEntity } from "./SignalSourceEntity";
 import ApplicationConfigEntity from "./ApplicationConfigEntity";
@@ -1690,6 +1691,7 @@ export namespace Protocol {
     dns1: string = "";
     dns2: string = "";
     mac_address: string = "04:D9:F5:D3:F4:C5";
+    ip_address_list: AdvancedIpAddressEntity[] = [];
 
     constructor(rcp_id?: number) {
       super();