添加系统设置界面,功能未实现
This commit is contained in:
fangxiang
parent
c13dfc7acb
commit
4003b1b715
|
|
@ -136,12 +136,12 @@
|
||||||
</q-item>
|
</q-item>
|
||||||
<q-separator inset />
|
<q-separator inset />
|
||||||
|
|
||||||
<q-item ref="editor_parent" style="height: 40vh">
|
<q-item ref="editor_parent" style="height: 35vh">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div ref="wysiwyg_toolbar" class="fit ck-reset_all"></div>
|
<div ref="wysiwyg_toolbar" class="fit ck-reset_all"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row" style="height: 90%">
|
||||||
<div ref="wysiwyg_editor"></div>
|
<div ref="wysiwyg_editor"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -253,7 +253,6 @@ export default defineComponent({
|
||||||
const createEditor = () => {
|
const createEditor = () => {
|
||||||
if (!wysiwyg_editor.value) {
|
if (!wysiwyg_editor.value) {
|
||||||
throw "wysiwyg_editor is null";
|
throw "wysiwyg_editor is null";
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const fontOptions: number[] = [9, 11, 13, 17];
|
const fontOptions: number[] = [9, 11, 13, 17];
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,567 @@
|
||||||
|
<template>
|
||||||
|
<q-dialog persistent v-model="show_dialog" @before-hide="resetData">
|
||||||
|
<q-card class="overflow-hidden" style="overflow-y: scroll; max-width: 60vw">
|
||||||
|
<q-card-section class="q-ma-none q-pa-sm">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-auto text-h6">
|
||||||
|
{{ $t("system setting") }}
|
||||||
|
</div>
|
||||||
|
<q-space />
|
||||||
|
<div>
|
||||||
|
<q-btn
|
||||||
|
:loading="loading"
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
icon="close"
|
||||||
|
color="red"
|
||||||
|
v-close-popup
|
||||||
|
>
|
||||||
|
<q-tooltip>
|
||||||
|
{{ $t("close") }}
|
||||||
|
</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
|
||||||
|
<q-separator />
|
||||||
|
|
||||||
|
<q-card-section style="max-height: 75vh; width: 60vw" class="scroll">
|
||||||
|
<q-tabs
|
||||||
|
v-model="tab"
|
||||||
|
dense
|
||||||
|
active-color="primary"
|
||||||
|
indicator-color="primary"
|
||||||
|
align="justify"
|
||||||
|
narrow-indicator
|
||||||
|
class="bg-grey-2 text-teal"
|
||||||
|
>
|
||||||
|
<q-tab
|
||||||
|
name="network"
|
||||||
|
icon="language"
|
||||||
|
:label="$t('network setting')"
|
||||||
|
/>
|
||||||
|
<q-tab
|
||||||
|
name="graphics"
|
||||||
|
icon="picture_in_picture_alt"
|
||||||
|
:label="$t('graphics setting')"
|
||||||
|
/>
|
||||||
|
<q-tab name="other" icon="build" :label="$t('other setting')" />
|
||||||
|
</q-tabs>
|
||||||
|
<q-separator />
|
||||||
|
<q-tab-panels v-model="tab" animated>
|
||||||
|
<q-tab-panel name="network" class="_panel">
|
||||||
|
<q-card class="fit">
|
||||||
|
<q-card-section>
|
||||||
|
<q-form ref="network_form">
|
||||||
|
<q-list>
|
||||||
|
<q-item>
|
||||||
|
<q-item-section avatar class="width_5_1">{{
|
||||||
|
$t("auto ip") + ":"
|
||||||
|
}}</q-item-section>
|
||||||
|
<q-item-section>
|
||||||
|
<q-select
|
||||||
|
v-model="auto_ip"
|
||||||
|
:options="[$t('enable'), $t('disable')]"
|
||||||
|
:loading="loading"
|
||||||
|
/>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
<q-item v-if="auto_ip != $t('enable')">
|
||||||
|
<q-item-section avatar class="width_5_1">{{
|
||||||
|
$t("ip address") + ":"
|
||||||
|
}}</q-item-section>
|
||||||
|
<q-item-section>
|
||||||
|
<q-input
|
||||||
|
v-model="ip_address"
|
||||||
|
:loading="loading"
|
||||||
|
maxlength="15"
|
||||||
|
:rules="[
|
||||||
|
(val) =>
|
||||||
|
(val && val.length > 0) ||
|
||||||
|
$t('Please type something'),
|
||||||
|
(val) =>
|
||||||
|
isIpAddress(val) ||
|
||||||
|
$t('Please input vaild ip address'),
|
||||||
|
]"
|
||||||
|
lazy-rules
|
||||||
|
/>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
<q-item v-if="auto_ip != $t('enable')">
|
||||||
|
<q-item-section avatar class="width_5_1">{{
|
||||||
|
$t("gateway") + ":"
|
||||||
|
}}</q-item-section>
|
||||||
|
<q-item-section>
|
||||||
|
<q-input
|
||||||
|
:loading="loading"
|
||||||
|
v-model="gateway"
|
||||||
|
maxlength="15"
|
||||||
|
:rules="[
|
||||||
|
(val) =>
|
||||||
|
(val && val.length > 0) ||
|
||||||
|
$t('Please type something'),
|
||||||
|
(val) =>
|
||||||
|
isIpAddress(val) ||
|
||||||
|
$t('Please input vaild ip address'),
|
||||||
|
]"
|
||||||
|
lazy-rules
|
||||||
|
/>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
<q-item v-if="auto_ip != $t('enable')">
|
||||||
|
<q-item-section avatar class="width_5_1">{{
|
||||||
|
$t("netmask") + ":"
|
||||||
|
}}</q-item-section>
|
||||||
|
<q-item-section>
|
||||||
|
<q-input
|
||||||
|
:loading="loading"
|
||||||
|
v-model="netmask"
|
||||||
|
maxlength="15"
|
||||||
|
:rules="[
|
||||||
|
(val) =>
|
||||||
|
(val && val.length > 0) ||
|
||||||
|
$t('Please type something'),
|
||||||
|
(val) =>
|
||||||
|
isIpAddress(val) ||
|
||||||
|
$t('Please input vaild ip address'),
|
||||||
|
]"
|
||||||
|
lazy-rules
|
||||||
|
/>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
<q-item>
|
||||||
|
<q-item-section avatar class="width_5_1">{{
|
||||||
|
$t("mac address") + ":"
|
||||||
|
}}</q-item-section>
|
||||||
|
<q-item-section>
|
||||||
|
<q-input
|
||||||
|
v-model="mac_address"
|
||||||
|
:loading="loading"
|
||||||
|
maxlength="17"
|
||||||
|
:rules="[
|
||||||
|
(val) =>
|
||||||
|
(val && val.length > 0) ||
|
||||||
|
$t('Please type something'),
|
||||||
|
(val) =>
|
||||||
|
isMacAddress(val) ||
|
||||||
|
$t('Please input vaild mac address') +
|
||||||
|
' (04:XX:XX:XX:XX:XX)',
|
||||||
|
]"
|
||||||
|
lazy-rules
|
||||||
|
/>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</q-form>
|
||||||
|
</q-card-section>
|
||||||
|
</q-card>
|
||||||
|
</q-tab-panel>
|
||||||
|
|
||||||
|
<q-tab-panel name="graphics" class="_panel">
|
||||||
|
<q-card class="fit">
|
||||||
|
<q-card-section>
|
||||||
|
<q-form ref="graphics_form">
|
||||||
|
<q-list>
|
||||||
|
<q-item>
|
||||||
|
<q-item-section avatar class="width_5_2">{{
|
||||||
|
$t("brightness") + ":"
|
||||||
|
}}</q-item-section>
|
||||||
|
<q-item-section>
|
||||||
|
<q-input
|
||||||
|
v-model="brightness"
|
||||||
|
:loading="loading"
|
||||||
|
type="number"
|
||||||
|
/>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
<q-item>
|
||||||
|
<q-item-section avatar class="width_5_2">{{
|
||||||
|
$t("contrast") + ":"
|
||||||
|
}}</q-item-section>
|
||||||
|
<q-item-section>
|
||||||
|
<q-input
|
||||||
|
v-model="contrast"
|
||||||
|
:loading="loading"
|
||||||
|
type="number"
|
||||||
|
/>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
<q-item>
|
||||||
|
<q-item-section avatar class="width_5_2">{{
|
||||||
|
$t("hue") + ":"
|
||||||
|
}}</q-item-section>
|
||||||
|
<q-item-section>
|
||||||
|
<q-input
|
||||||
|
v-model="hue"
|
||||||
|
:loading="loading"
|
||||||
|
type="number"
|
||||||
|
/>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
<q-item>
|
||||||
|
<q-item-section avatar class="width_5_2_2">{{
|
||||||
|
$t("device resolution") + ":"
|
||||||
|
}}</q-item-section>
|
||||||
|
<q-item-section>
|
||||||
|
<q-select
|
||||||
|
v-model="device_resolution"
|
||||||
|
:loading="loading"
|
||||||
|
:options="device_resolution_options"
|
||||||
|
/>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
<q-item>
|
||||||
|
<q-item-section avatar class="width_5_2_2">{{
|
||||||
|
$t("output board resolution") + ":"
|
||||||
|
}}</q-item-section>
|
||||||
|
<q-item-section>
|
||||||
|
<q-select
|
||||||
|
v-model="output_board_resolution"
|
||||||
|
:loading="loading"
|
||||||
|
:options="output_board_resolution_options"
|
||||||
|
/>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</q-form>
|
||||||
|
</q-card-section>
|
||||||
|
</q-card>
|
||||||
|
</q-tab-panel>
|
||||||
|
|
||||||
|
<q-tab-panel name="other" class="_panel">
|
||||||
|
<q-card class="fit">
|
||||||
|
<q-card-section>
|
||||||
|
<q-form ref="other_form">
|
||||||
|
<q-list>
|
||||||
|
<q-item>
|
||||||
|
<q-item-section avatar class="width_5_3">{{
|
||||||
|
$t("use ntp") + ":"
|
||||||
|
}}</q-item-section>
|
||||||
|
<q-item-section>
|
||||||
|
<q-select
|
||||||
|
v-model="use_ntp"
|
||||||
|
:loading="loading"
|
||||||
|
:options="[$t('enable'), $t('disable')]"
|
||||||
|
/>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
<q-item v-if="use_ntp == $t('enable')">
|
||||||
|
<q-item-section avatar class="width_5_3">{{
|
||||||
|
$t("ntp server") + ":"
|
||||||
|
}}</q-item-section>
|
||||||
|
<q-item-section>
|
||||||
|
<q-input v-model="ntp_server" :loading="loading" />
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
<q-item v-if="use_ntp == $t('enable')">
|
||||||
|
<q-item-section avatar class="width_5_3">{{
|
||||||
|
$t("ntp sync delay(S)") + ":"
|
||||||
|
}}</q-item-section>
|
||||||
|
<q-item-section>
|
||||||
|
<q-input
|
||||||
|
v-model="ntp_sync_delay"
|
||||||
|
:loading="loading"
|
||||||
|
type="number"
|
||||||
|
/>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
<q-item v-if="use_ntp == $t('disable')">
|
||||||
|
<q-item-section avatar class="width_5_3">{{
|
||||||
|
$t("current datetime") + ":"
|
||||||
|
}}</q-item-section>
|
||||||
|
<q-item-section>
|
||||||
|
<q-input
|
||||||
|
v-model="current_date"
|
||||||
|
:loading="loading"
|
||||||
|
type="date"
|
||||||
|
/>
|
||||||
|
</q-item-section>
|
||||||
|
<q-item-section>
|
||||||
|
<q-input
|
||||||
|
v-model="current_time"
|
||||||
|
:loading="loading"
|
||||||
|
type="time"
|
||||||
|
/>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
<q-item>
|
||||||
|
<q-item-section avatar class="width_5_3">{{
|
||||||
|
$t("time zone") + ":"
|
||||||
|
}}</q-item-section>
|
||||||
|
<q-item-section>
|
||||||
|
<q-select
|
||||||
|
v-model="time_zone"
|
||||||
|
:loading="loading"
|
||||||
|
:options="time_zone_options"
|
||||||
|
/>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</q-form>
|
||||||
|
</q-card-section>
|
||||||
|
</q-card>
|
||||||
|
</q-tab-panel>
|
||||||
|
</q-tab-panels>
|
||||||
|
</q-card-section>
|
||||||
|
<q-separator />
|
||||||
|
<q-card-actions align="right">
|
||||||
|
<q-btn
|
||||||
|
:loading="loading"
|
||||||
|
flat
|
||||||
|
:label="$t('revert and exit')"
|
||||||
|
color="primary"
|
||||||
|
v-close-popup
|
||||||
|
/>
|
||||||
|
<q-btn
|
||||||
|
:loading="loading"
|
||||||
|
flat
|
||||||
|
:label="$t('revert')"
|
||||||
|
color="primary"
|
||||||
|
@click="refresh_all"
|
||||||
|
/>
|
||||||
|
<q-btn
|
||||||
|
:loading="loading"
|
||||||
|
flat
|
||||||
|
:label="$t('apply')"
|
||||||
|
color="primary"
|
||||||
|
@click="apply"
|
||||||
|
/>
|
||||||
|
<q-btn
|
||||||
|
:loading="loading"
|
||||||
|
flat
|
||||||
|
:label="$t('apply and exit')"
|
||||||
|
color="primary"
|
||||||
|
@click="applyAndExit"
|
||||||
|
/>
|
||||||
|
</q-card-actions>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.width_5_1 {
|
||||||
|
width: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.width_5_2 {
|
||||||
|
width: 10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.width_5_2_2 {
|
||||||
|
width: 18%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.width_5_3 {
|
||||||
|
width: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
._panel {
|
||||||
|
padding: 3px;
|
||||||
|
height: 60vh;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, ref, Ref, watch, computed } from "vue";
|
||||||
|
import { useStore } from "src/store";
|
||||||
|
import { useQuasar } from "quasar";
|
||||||
|
import { useI18n } from "vue-i18n";
|
||||||
|
import GlobalData from "src/common/GlobalData";
|
||||||
|
import { HttpProtocol } from "src/entities/HttpProtocol";
|
||||||
|
import { date } from "quasar";
|
||||||
|
|
||||||
|
const _time_zones = [
|
||||||
|
"UTC-12(Central Pacific)",
|
||||||
|
"UTC-11(Central Pacific)",
|
||||||
|
"UTC-10(Honolulu of USA)",
|
||||||
|
"UTC-9(Alaska of USA)",
|
||||||
|
"UTC-8(California of USA)",
|
||||||
|
"UTC-7(Phoenix of USA, Arizona of USA)",
|
||||||
|
"UTC-6(Chicago of USA, Mexico)",
|
||||||
|
"UTC-5(New York of USA)",
|
||||||
|
"UTC-4(Republic of Chile)",
|
||||||
|
"UTC-3(Brazil, Argentina)",
|
||||||
|
"UTC-2(Mid Atlantic)",
|
||||||
|
"UTC-1(West African continent)",
|
||||||
|
"UTC(England, Portugal)",
|
||||||
|
"UTC+1(Spain, France, Germany, ...)",
|
||||||
|
"UTC+2(Turkey, South Africa, Rome, Egypt, ...)",
|
||||||
|
"UTC+3(Moscow of Russia, Iran)",
|
||||||
|
"UTC+4(The united Arab emirates)",
|
||||||
|
"UTC+5(Pakistan, India)",
|
||||||
|
"UTC+6(Bangladesh, Myanmar, Xinjiang Autonomous Region of China)",
|
||||||
|
"UTC+7(Thailand, Malaysia, Singapore)",
|
||||||
|
"UTC+8(Beijing of China, Philippines)",
|
||||||
|
"UTC+9(Japan)",
|
||||||
|
"UTC+10(Vladivostok of Russia, Guam, Australia)",
|
||||||
|
"UTC+11(Solomon Islands)",
|
||||||
|
"UTC+12(New Zealand)",
|
||||||
|
];
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: "SystemSettingDialog",
|
||||||
|
|
||||||
|
setup() {
|
||||||
|
let $store = useStore();
|
||||||
|
let $q = useQuasar();
|
||||||
|
let $t = useI18n();
|
||||||
|
|
||||||
|
let show_dialog = ref(false);
|
||||||
|
let loading = ref(false);
|
||||||
|
|
||||||
|
let tab = ref("network");
|
||||||
|
|
||||||
|
let auto_ip = ref($t.t("enable"));
|
||||||
|
let ip_address = ref("127.0.0.1");
|
||||||
|
let gateway = ref("127.0.0.1");
|
||||||
|
let netmask = ref("127.0.0.1");
|
||||||
|
let mac_address = ref("11:22:33:44:55:66");
|
||||||
|
|
||||||
|
let brightness = ref(0);
|
||||||
|
let contrast = ref(0);
|
||||||
|
let hue = ref(0);
|
||||||
|
|
||||||
|
let device_resolution = ref("");
|
||||||
|
let device_resolution_options = ref(["11", "22", "33"]);
|
||||||
|
let output_board_resolution = ref("");
|
||||||
|
let output_board_resolution_options = ref(["1", "2", "3"]);
|
||||||
|
|
||||||
|
let use_ntp = ref($t.t("enable"));
|
||||||
|
let ntp_server = ref("");
|
||||||
|
let ntp_sync_delay = ref("");
|
||||||
|
let current_date = ref("");
|
||||||
|
let current_time = ref("");
|
||||||
|
let time_zone = ref("");
|
||||||
|
let time_zone_options: Ref<string[]> = ref([]);
|
||||||
|
for (const item of _time_zones) {
|
||||||
|
time_zone_options.value.push($t.t(item));
|
||||||
|
}
|
||||||
|
|
||||||
|
let network_form: Ref<any> = ref(null);
|
||||||
|
let other_form: Ref<any> = ref(null);
|
||||||
|
let graphics_form: Ref<any> = ref(null);
|
||||||
|
|
||||||
|
const refresh_all = () => {
|
||||||
|
const config = GlobalData.getInstance()?.applicationConfig;
|
||||||
|
if (config) {
|
||||||
|
auto_ip.value =
|
||||||
|
config.auto_ip_address != "0" ? $t.t("enable") : $t.t("disable");
|
||||||
|
gateway.value = config.gateway;
|
||||||
|
netmask.value = config.subnet_mask;
|
||||||
|
mac_address.value = config.mac_address;
|
||||||
|
|
||||||
|
use_ntp.value =
|
||||||
|
config.use_ntp != "0" ? $t.t("enable") : $t.t("disable");
|
||||||
|
ntp_server.value = config.ntp_server;
|
||||||
|
ntp_sync_delay.value = config.ntp_sync_delay;
|
||||||
|
try {
|
||||||
|
time_zone.value = time_zone_options.value[parseInt(config.time_zone)];
|
||||||
|
} catch (e) {
|
||||||
|
time_zone.value = time_zone_options.value[0];
|
||||||
|
}
|
||||||
|
|
||||||
|
const timeStamp = Date.now();
|
||||||
|
current_date.value = date.formatDate(timeStamp, "YYYY-MM-DD");
|
||||||
|
current_time.value = date.formatDate(timeStamp, "HH:mm:ss");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const applyNetwork = async () => {
|
||||||
|
const ret = await network_form.value.validate();
|
||||||
|
if (ret) {
|
||||||
|
console.log("network");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const applyGraphics = async () => {
|
||||||
|
const ret = await graphics_form.value.validate();
|
||||||
|
if (ret) {
|
||||||
|
console.log("graphics");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const applyOther = async () => {
|
||||||
|
const ret = await other_form.value.validate();
|
||||||
|
if (ret) {
|
||||||
|
console.log("other");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const apply = async () => {
|
||||||
|
loading.value = true;
|
||||||
|
try {
|
||||||
|
switch (tab.value) {
|
||||||
|
case "network":
|
||||||
|
await applyNetwork();
|
||||||
|
break;
|
||||||
|
case "graphics":
|
||||||
|
await applyGraphics();
|
||||||
|
break;
|
||||||
|
case "other":
|
||||||
|
await applyOther();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.log(e);
|
||||||
|
}
|
||||||
|
loading.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
show_dialog,
|
||||||
|
loading,
|
||||||
|
tab,
|
||||||
|
auto_ip,
|
||||||
|
ip_address,
|
||||||
|
gateway,
|
||||||
|
netmask,
|
||||||
|
mac_address,
|
||||||
|
brightness,
|
||||||
|
contrast,
|
||||||
|
hue,
|
||||||
|
device_resolution,
|
||||||
|
device_resolution_options,
|
||||||
|
output_board_resolution,
|
||||||
|
output_board_resolution_options,
|
||||||
|
use_ntp,
|
||||||
|
ntp_server,
|
||||||
|
ntp_sync_delay,
|
||||||
|
current_date,
|
||||||
|
current_time,
|
||||||
|
time_zone,
|
||||||
|
time_zone_options,
|
||||||
|
network_form,
|
||||||
|
other_form,
|
||||||
|
graphics_form,
|
||||||
|
refresh_all,
|
||||||
|
apply,
|
||||||
|
loga(a: any) {
|
||||||
|
console.log(a);
|
||||||
|
},
|
||||||
|
showDialog() {
|
||||||
|
show_dialog.value = true;
|
||||||
|
|
||||||
|
refresh_all();
|
||||||
|
},
|
||||||
|
resetData() {
|
||||||
|
loading.value = false;
|
||||||
|
tab.value = "network";
|
||||||
|
},
|
||||||
|
async applyAndExit() {
|
||||||
|
await apply();
|
||||||
|
show_dialog.value = false;
|
||||||
|
},
|
||||||
|
isIpAddress(str: string) {
|
||||||
|
return (
|
||||||
|
str == "localhost" ||
|
||||||
|
/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
|
||||||
|
str
|
||||||
|
)
|
||||||
|
);
|
||||||
|
},
|
||||||
|
isMacAddress(str: string) {
|
||||||
|
return /(04:)([A-Fa-f0-9]{2}:){4}[A-Fa-f0-9]{2}/.test(str);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
@ -1,7 +1,13 @@
|
||||||
export default class ApplicationConfigEntity {
|
export default class ApplicationConfigEntity {
|
||||||
|
auto_ip_address: string = "";
|
||||||
gateway: string = "";
|
gateway: string = "";
|
||||||
mac_address: string = "";
|
mac_address: string = "";
|
||||||
network_mask: string = "";
|
subnet_mask: string = "";
|
||||||
|
ip_address: string = "";
|
||||||
|
use_ntp: string = "";
|
||||||
|
ntp_server: string = "";
|
||||||
|
ntp_sync_delay: string = "";
|
||||||
|
time_zone: string = "";
|
||||||
wall_row: number = 1;
|
wall_row: number = 1;
|
||||||
wall_col: number = 1;
|
wall_col: number = 1;
|
||||||
screen_width: number = 1;
|
screen_width: number = 1;
|
||||||
|
|
|
||||||
|
|
@ -118,6 +118,7 @@ export default {
|
||||||
"local disk": "本地磁盘",
|
"local disk": "本地磁盘",
|
||||||
usb: "U盘",
|
usb: "U盘",
|
||||||
"Please input vaild ip address": "请输入合法的IP地址",
|
"Please input vaild ip address": "请输入合法的IP地址",
|
||||||
|
"Please input vaild mac address": "请输入合法的MAC地址",
|
||||||
"server ip address": "服务器地址",
|
"server ip address": "服务器地址",
|
||||||
"please input server ip address": "请输入服务器地址",
|
"please input server ip address": "请输入服务器地址",
|
||||||
mode: "模式",
|
mode: "模式",
|
||||||
|
|
@ -172,4 +173,58 @@ export default {
|
||||||
"editor error": "富文本编辑器内部错误",
|
"editor error": "富文本编辑器内部错误",
|
||||||
"Exit Fullscreen": "退出全屏",
|
"Exit Fullscreen": "退出全屏",
|
||||||
"Go Fullscreen": "全屏",
|
"Go Fullscreen": "全屏",
|
||||||
|
logout: "注销",
|
||||||
|
"system setting": "系统设置",
|
||||||
|
"network setting": "网络设置",
|
||||||
|
"graphics setting": "图像设置",
|
||||||
|
"other setting": "其它设置",
|
||||||
|
"UTC-12(Central Pacific)": "UTC-12（太平洋中部）",
|
||||||
|
"UTC-11(Central Pacific)": "UTC-11（太平洋中部）",
|
||||||
|
"UTC-10(Honolulu of USA)": "UTC-10（美国檀香山）",
|
||||||
|
"UTC-9(Alaska of USA)": "UTC-9 （美国阿拉斯加州）",
|
||||||
|
"UTC-8(California of USA)": "UTC-8 （美国加里福利亚州）",
|
||||||
|
"UTC-7(Phoenix of USA, Arizona of USA)": "UTC-7 （美国亚利桑那州,菲尼克斯）",
|
||||||
|
"UTC-6(Chicago of USA, Mexico)": "UTC-6 （美国芝加哥，墨西哥）",
|
||||||
|
"UTC-5(New York of USA)": "UTC-5 （美国纽约）",
|
||||||
|
"UTC-4(Republic of Chile)": "UTC-4 （智利共和国）",
|
||||||
|
"UTC-3(Brazil, Argentina)": "UTC-3 （巴西，阿根廷）",
|
||||||
|
"UTC-2(Mid Atlantic)": "UTC-2 （大西洋中部）",
|
||||||
|
"UTC-1(West African continent)": "UTC-1 （非洲大陆西）",
|
||||||
|
"UTC(England, Portugal)": "UTC (英国，葡萄牙)",
|
||||||
|
"UTC+1(Spain, France, Germany, ...)": "UTC+1 (西班牙,法国,德国)",
|
||||||
|
"UTC+2(Turkey, South Africa, Rome, Egypt, ...)":
|
||||||
|
"UTC+2 (土耳其,南非,罗马尼亚)",
|
||||||
|
"UTC+3(Moscow of Russia, Iran)": "UTC+3 (俄罗斯莫斯科,伊朗)",
|
||||||
|
"UTC+4(The united Arab emirates)": "UTC+4 (阿联酋)",
|
||||||
|
"UTC+5(Pakistan, India)": "UTC+5 (巴基斯坦,印度)",
|
||||||
|
"UTC+6(Bangladesh, Myanmar, Xinjiang Autonomous Region of China)":
|
||||||
|
"UTC+6 (孟加拉国,缅甸,中国新疆自治区)",
|
||||||
|
"UTC+7(Thailand, Malaysia, Singapore)": "UTC+7 (泰国,马来西亚,新加坡)",
|
||||||
|
"UTC+8(Beijing of China, Philippines)": "UTC+8 (中国北京,菲律宾)",
|
||||||
|
"UTC+9(Japan)": "UTC+9 (日本)",
|
||||||
|
"UTC+10(Vladivostok of Russia, Guam, Australia)":
|
||||||
|
"UTC+10(俄罗斯海参崴，美国关岛，澳大利亚)",
|
||||||
|
"UTC+11(Solomon Islands)": "UTC+11(所罗门群岛)",
|
||||||
|
"UTC+12(New Zealand)": "UTC+12(新西兰)",
|
||||||
|
"ntp sync delay(S)": "NTP同步间隔(秒)",
|
||||||
|
"ntp server": "NTP服务器",
|
||||||
|
disable: "禁用",
|
||||||
|
enable: "启用",
|
||||||
|
apply: "应用",
|
||||||
|
"apply and exit": "应用并退出",
|
||||||
|
revert: "恢复",
|
||||||
|
"revert and exit": "不保存退出",
|
||||||
|
"auto ip": "自动获取IP地址",
|
||||||
|
gateway: "网关",
|
||||||
|
netmask: "子网掩码",
|
||||||
|
"mac address": "MAC地址",
|
||||||
|
"ip address": "IP地址",
|
||||||
|
brightness: "亮度",
|
||||||
|
contrast: "对比度",
|
||||||
|
hue: "锐度",
|
||||||
|
"device resolution": "设备分辨率",
|
||||||
|
"output board resolution": "输出板分辨率",
|
||||||
|
"use ntp": "使用NTP服务器",
|
||||||
|
"current datetime": "当前日期时间",
|
||||||
|
"time zone": "时区",
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -143,6 +143,7 @@ import PermissionLevel from "src/entities/PermissionLevel";
|
||||||
import { useI18n } from "vue-i18n";
|
import { useI18n } from "vue-i18n";
|
||||||
import { useRouter } from "vue-router";
|
import { useRouter } from "vue-router";
|
||||||
import EventBus, { EventNamesDefine } from "src/common/EventBus";
|
import EventBus, { EventNamesDefine } from "src/common/EventBus";
|
||||||
|
import { useStore } from "src/store";
|
||||||
|
|
||||||
class _Data {
|
class _Data {
|
||||||
user_name: string | null = null;
|
user_name: string | null = null;
|
||||||
|
|
@ -180,6 +181,7 @@ export default defineComponent({
|
||||||
const $q = useQuasar();
|
const $q = useQuasar();
|
||||||
const $t = useI18n();
|
const $t = useI18n();
|
||||||
const $route = useRouter();
|
const $route = useRouter();
|
||||||
|
const $store = useStore();
|
||||||
const data = reactive(new _Data());
|
const data = reactive(new _Data());
|
||||||
let web_socket: ClientConnection | null = null;
|
let web_socket: ClientConnection | null = null;
|
||||||
let is_pwa = ["fullscreen", "standalone", "minimal-ui"].some(
|
let is_pwa = ["fullscreen", "standalone", "minimal-ui"].some(
|
||||||
|
|
@ -197,9 +199,6 @@ export default defineComponent({
|
||||||
data,
|
data,
|
||||||
landspace,
|
landspace,
|
||||||
is_pwa,
|
is_pwa,
|
||||||
loga(a: any) {
|
|
||||||
console.log(a);
|
|
||||||
},
|
|
||||||
async onSubmit() {
|
async onSubmit() {
|
||||||
return new Promise((resolve) => {
|
return new Promise((resolve) => {
|
||||||
data.loading = true;
|
data.loading = true;
|
||||||
|
|
@ -245,6 +244,9 @@ export default defineComponent({
|
||||||
SessionStorage.set("name", data.ip_address);
|
SessionStorage.set("name", data.ip_address);
|
||||||
SessionStorage.set("user_name", data.user_name);
|
SessionStorage.set("user_name", data.user_name);
|
||||||
SessionStorage.set("password", data.password);
|
SessionStorage.set("password", data.password);
|
||||||
|
|
||||||
|
$store.commit("setDeviceIpAddress", data.ip_address);
|
||||||
|
|
||||||
$route.push("/");
|
$route.push("/");
|
||||||
} else {
|
} else {
|
||||||
$q.notify({
|
$q.notify({
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<q-toolbar style="background-color: #3e9acd;" class="shadow-2 text-white">
|
<q-toolbar style="background-color: #3e9acd" class="shadow-2 text-white">
|
||||||
<q-btn-dropdown
|
<q-btn-dropdown
|
||||||
v-touch-hold:10000.mouse="handleHold"
|
v-touch-hold:10000.mouse="handleHold"
|
||||||
:disable-dropdown="!show_advanced_menu"
|
:disable-dropdown="!show_advanced_menu"
|
||||||
|
|
@ -27,64 +27,73 @@
|
||||||
</q-btn-dropdown>
|
</q-btn-dropdown>
|
||||||
<q-separator vertical inset />
|
<q-separator vertical inset />
|
||||||
|
|
||||||
<q-btn
|
<q-btn
|
||||||
stretch
|
stretch
|
||||||
flat
|
flat
|
||||||
icon="description"
|
icon="settings"
|
||||||
:label="$t('file manage')"
|
:label="$t('system setting')"
|
||||||
class="q-mr-sm"
|
class="q-mr-sm"
|
||||||
@click="$refs.file_manage_dialog.showDialog()"
|
@click="$refs.system_setting_dialog.showDialog()"
|
||||||
/>
|
/>
|
||||||
<q-btn
|
|
||||||
stretch
|
|
||||||
flat
|
|
||||||
icon="grid_on"
|
|
||||||
:label="$t('grid setting')"
|
|
||||||
class="q-mr-sm"
|
|
||||||
@click="$refs.grid_setting_dialog.showDialog()"
|
|
||||||
/>
|
|
||||||
<q-btn
|
|
||||||
stretch
|
|
||||||
flat
|
|
||||||
icon="image"
|
|
||||||
:label="$t('background image')"
|
|
||||||
class="q-mr-sm"
|
|
||||||
@click="$refs.background_image_dialog.showDialog()"
|
|
||||||
/>
|
|
||||||
<q-btn
|
|
||||||
stretch
|
|
||||||
flat
|
|
||||||
icon="art_track"
|
|
||||||
:label="$t('subtitle')"
|
|
||||||
class="q-mr-sm"
|
|
||||||
@click="$refs.subtitle_dialog.showDialog()"
|
|
||||||
/>
|
|
||||||
<q-btn
|
|
||||||
stretch
|
|
||||||
flat
|
|
||||||
icon="backup"
|
|
||||||
:label="$t('data import')"
|
|
||||||
class="q-mr-sm"
|
|
||||||
@click="$refs.recovery_database_dialog.showDialog()"
|
|
||||||
/>
|
|
||||||
<q-btn
|
|
||||||
stretch
|
|
||||||
flat
|
|
||||||
icon="cloud_download"
|
|
||||||
:label="$t('data export')"
|
|
||||||
class="q-mr-sm"
|
|
||||||
@click="backupDB"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<q-btn
|
<q-btn
|
||||||
stretch
|
stretch
|
||||||
flat
|
flat
|
||||||
icon="stop"
|
icon="description"
|
||||||
:label="$t('stop plan')"
|
:label="$t('file manage')"
|
||||||
class="q-mr-sm"
|
class="q-mr-sm"
|
||||||
v-if="show_stop_plan"
|
@click="$refs.file_manage_dialog.showDialog()"
|
||||||
@click="stopPlan"
|
/>
|
||||||
/>
|
<q-btn
|
||||||
|
stretch
|
||||||
|
flat
|
||||||
|
icon="grid_on"
|
||||||
|
:label="$t('grid setting')"
|
||||||
|
class="q-mr-sm"
|
||||||
|
@click="$refs.grid_setting_dialog.showDialog()"
|
||||||
|
/>
|
||||||
|
<q-btn
|
||||||
|
stretch
|
||||||
|
flat
|
||||||
|
icon="image"
|
||||||
|
:label="$t('background image')"
|
||||||
|
class="q-mr-sm"
|
||||||
|
@click="$refs.background_image_dialog.showDialog()"
|
||||||
|
/>
|
||||||
|
<q-btn
|
||||||
|
stretch
|
||||||
|
flat
|
||||||
|
icon="art_track"
|
||||||
|
:label="$t('subtitle')"
|
||||||
|
class="q-mr-sm"
|
||||||
|
@click="$refs.subtitle_dialog.showDialog()"
|
||||||
|
/>
|
||||||
|
<q-btn
|
||||||
|
stretch
|
||||||
|
flat
|
||||||
|
icon="backup"
|
||||||
|
:label="$t('data import')"
|
||||||
|
class="q-mr-sm"
|
||||||
|
@click="$refs.recovery_database_dialog.showDialog()"
|
||||||
|
/>
|
||||||
|
<q-btn
|
||||||
|
stretch
|
||||||
|
flat
|
||||||
|
icon="cloud_download"
|
||||||
|
:label="$t('data export')"
|
||||||
|
class="q-mr-sm"
|
||||||
|
@click="backupDB"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<q-btn
|
||||||
|
stretch
|
||||||
|
flat
|
||||||
|
icon="stop"
|
||||||
|
:label="$t('stop plan')"
|
||||||
|
class="q-mr-sm"
|
||||||
|
v-if="show_stop_plan"
|
||||||
|
@click="stopPlan"
|
||||||
|
/>
|
||||||
|
|
||||||
<q-space />
|
<q-space />
|
||||||
<q-separator vertical inset />
|
<q-separator vertical inset />
|
||||||
|
|
@ -92,14 +101,14 @@
|
||||||
stretch
|
stretch
|
||||||
flat
|
flat
|
||||||
icon="devices"
|
icon="devices"
|
||||||
label="localhost"
|
:label="$store.state.device_ip_address"
|
||||||
class="q-mr-sm"
|
class="q-mr-sm"
|
||||||
>
|
>
|
||||||
<q-list>
|
<q-list>
|
||||||
<q-item clickable v-close-popup>
|
<q-item clickable v-close-popup @click="logout">
|
||||||
|
<q-item-section avatar> <q-icon name="logout" /> </q-item-section>
|
||||||
<q-item-section>
|
<q-item-section>
|
||||||
<q-item-label>localhost</q-item-label>
|
{{ $t("logout") }}
|
||||||
<q-item-label caption>localhost</q-item-label>
|
|
||||||
</q-item-section>
|
</q-item-section>
|
||||||
</q-item>
|
</q-item>
|
||||||
</q-list>
|
</q-list>
|
||||||
|
|
@ -112,6 +121,7 @@
|
||||||
<recovery-database-dialog ref="recovery_database_dialog" />
|
<recovery-database-dialog ref="recovery_database_dialog" />
|
||||||
<upgrade-dialog ref="upgrade_dialog" />
|
<upgrade-dialog ref="upgrade_dialog" />
|
||||||
<file-manage-dialog ref="file_manage_dialog" />
|
<file-manage-dialog ref="file_manage_dialog" />
|
||||||
|
<system-setting-dialog ref="system_setting_dialog" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
|
@ -124,13 +134,14 @@ import RecoveryDatabaseDialog from "src/components/RecoveryDatabaseDialog.vue";
|
||||||
import UpgradeDialog from "src/components/UpgradeDialog.vue";
|
import UpgradeDialog from "src/components/UpgradeDialog.vue";
|
||||||
import FileManageDialog from "src/components/FileManageDialog.vue";
|
import FileManageDialog from "src/components/FileManageDialog.vue";
|
||||||
import SubtitleDialog from "src/components/SubtitleDialog.vue";
|
import SubtitleDialog from "src/components/SubtitleDialog.vue";
|
||||||
|
import SystemSettingDialog from "src/components/SystemSettingDialog.vue";
|
||||||
|
|
||||||
import EventBus, { EventNamesDefine } from "src/common/EventBus";
|
import EventBus, { EventNamesDefine } from "src/common/EventBus";
|
||||||
import { Protocol } from "src/entities/WSProtocol";
|
import { Protocol } from "src/entities/WSProtocol";
|
||||||
import GlobalData from "src/common/GlobalData";
|
import GlobalData from "src/common/GlobalData";
|
||||||
import { api } from "boot/axios";
|
import { api } from "boot/axios";
|
||||||
import { HttpProtocol } from "src/entities/HttpProtocol";
|
import { HttpProtocol } from "src/entities/HttpProtocol";
|
||||||
import { openURL, useQuasar } from "quasar";
|
import { SessionStorage, openURL, useQuasar } from "quasar";
|
||||||
import { useI18n } from "vue-i18n";
|
import { useI18n } from "vue-i18n";
|
||||||
import { NotifyMessage } from "src/common/ClientConnection";
|
import { NotifyMessage } from "src/common/ClientConnection";
|
||||||
|
|
||||||
|
|
@ -144,6 +155,7 @@ export default defineComponent({
|
||||||
UpgradeDialog,
|
UpgradeDialog,
|
||||||
FileManageDialog,
|
FileManageDialog,
|
||||||
SubtitleDialog,
|
SubtitleDialog,
|
||||||
|
SystemSettingDialog,
|
||||||
},
|
},
|
||||||
|
|
||||||
setup() {
|
setup() {
|
||||||
|
|
@ -189,7 +201,6 @@ export default defineComponent({
|
||||||
url.protocol = "http:";
|
url.protocol = "http:";
|
||||||
console.log(url.toString());
|
console.log(url.toString());
|
||||||
let response = await api.get(url.toString());
|
let response = await api.get(url.toString());
|
||||||
console.log(response.data);
|
|
||||||
if (response.status == 200 && response && response.data) {
|
if (response.status == 200 && response && response.data) {
|
||||||
url.pathname =
|
url.pathname =
|
||||||
HttpProtocol.RequestPathDBBackup + "/" + response.data;
|
HttpProtocol.RequestPathDBBackup + "/" + response.data;
|
||||||
|
|
@ -221,6 +232,10 @@ export default defineComponent({
|
||||||
timeout: 1000,
|
timeout: 1000,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
logout() {
|
||||||
|
SessionStorage.clear();
|
||||||
|
window.location.reload();
|
||||||
|
},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -38,6 +38,7 @@ export interface StateInterface {
|
||||||
device_screen_width: number;
|
device_screen_width: number;
|
||||||
device_screen_height: number;
|
device_screen_height: number;
|
||||||
windows: WindowOpenNotifyEntity[];
|
windows: WindowOpenNotifyEntity[];
|
||||||
|
device_ip_address: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
// provide typings for `this.$store`
|
// provide typings for `this.$store`
|
||||||
|
|
@ -262,6 +263,7 @@ export default store(function (/* { ssrContext } */) {
|
||||||
device_screen_width: 1920,
|
device_screen_width: 1920,
|
||||||
device_screen_height: 1080,
|
device_screen_height: 1080,
|
||||||
windows: [],
|
windows: [],
|
||||||
|
device_ip_address: "localhost",
|
||||||
},
|
},
|
||||||
|
|
||||||
mutations: {
|
mutations: {
|
||||||
|
|
@ -622,6 +624,9 @@ export default store(function (/* { ssrContext } */) {
|
||||||
playload
|
playload
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
setDeviceIpAddress(state: StateInterface, playload?: any) {
|
||||||
|
state.device_ip_address = playload;
|
||||||
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
// enable strict mode (adds overhead!)
|
// enable strict mode (adds overhead!)
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue