增加多IP配置功能

This commit is contained in:
fangxiang 2022-06-28 20:06:23 +08:00
parent e2c876b6bd
commit be5dce60bf
8 changed files with 109 additions and 65 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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