lingling
/
media_player_client
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加系统设置界面,功能未实现

This commit is contained in:
fangxiang 2021-12-17 15:38:03 +08:00
parent c13dfc7acb
commit 4003b1b715
7 changed files with 720 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/SubtitleDialog.vue
View File

@ -136,12 +136,12 @@
</q-item>
<q-separator inset />
<q-item ref="editor_parent" style="height: 40vh">
<q-item ref="editor_parent" style="height: 35vh">
<div class="col">
<div class="row">
<div ref="wysiwyg_toolbar" class="fit ck-reset_all"></div>
</div>
<div class="row">
<div class="row" style="height: 90%">
<div ref="wysiwyg_editor"></div>
</div>
</div>
@ -253,7 +253,6 @@ export default defineComponent({
const createEditor = () => {
if (!wysiwyg_editor.value) {
throw "wysiwyg_editor is null";
return;
}
const fontOptions: number[] = [9, 11, 13, 17];

567
src/components/SystemSettingDialog.vue Normal file
View File

@ -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>

8
src/entities/ApplicationConfigEntity.ts
View File

@ -1,7 +1,13 @@
export default class ApplicationConfigEntity {
auto_ip_address: string = "";
gateway: 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_col: number = 1;
screen_width: number = 1;

55
src/i18n/zh-CN/index.ts
View File

@ -118,6 +118,7 @@ export default {
"local disk": "本地磁盘",
usb: "U盘",
"Please input vaild ip address": "请输入合法的IP地址",
"Please input vaild mac address": "请输入合法的MAC地址",
"server ip address": "服务器地址",
"please input server ip address": "请输入服务器地址",
mode: "模式",
@ -172,4 +173,58 @@ export default {
"editor error": "富文本编辑器内部错误",
"Exit 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": "时区",
};

8
src/pages/Login.vue
View File

@ -143,6 +143,7 @@ import PermissionLevel from "src/entities/PermissionLevel";
import { useI18n } from "vue-i18n";
import { useRouter } from "vue-router";
import EventBus, { EventNamesDefine } from "src/common/EventBus";
import { useStore } from "src/store";
class _Data {
user_name: string | null = null;
@ -180,6 +181,7 @@ export default defineComponent({
const $q = useQuasar();
const $t = useI18n();
const $route = useRouter();
const $store = useStore();
const data = reactive(new _Data());
let web_socket: ClientConnection | null = null;
let is_pwa = ["fullscreen", "standalone", "minimal-ui"].some(
@ -197,9 +199,6 @@ export default defineComponent({
data,
landspace,
is_pwa,
loga(a: any) {
console.log(a);
},
async onSubmit() {
return new Promise((resolve) => {
data.loading = true;
@ -245,6 +244,9 @@ export default defineComponent({
SessionStorage.set("name", data.ip_address);
SessionStorage.set("user_name", data.user_name);
SessionStorage.set("password", data.password);
$store.commit("setDeviceIpAddress", data.ip_address);
$route.push("/");
} else {
$q.notify({

29
src/pages/TopToolBar.vue
View File

@ -1,6 +1,6 @@
<template>
<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
v-touch-hold:10000.mouse="handleHold"
:disable-dropdown="!show_advanced_menu"
@ -27,6 +27,15 @@
</q-btn-dropdown>
<q-separator vertical inset />
<q-btn
stretch
flat
icon="settings"
:label="$t('system setting')"
class="q-mr-sm"
@click="$refs.system_setting_dialog.showDialog()"
/>
<q-btn
stretch
flat
@ -92,14 +101,14 @@
stretch
flat
icon="devices"
label="localhost"
:label="$store.state.device_ip_address"
class="q-mr-sm"
>
<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-label>localhost</q-item-label>
<q-item-label caption>localhost</q-item-label>
{{ $t("logout") }}
</q-item-section>
</q-item>
</q-list>
@ -112,6 +121,7 @@
<recovery-database-dialog ref="recovery_database_dialog" />
<upgrade-dialog ref="upgrade_dialog" />
<file-manage-dialog ref="file_manage_dialog" />
<system-setting-dialog ref="system_setting_dialog" />
</template>
<script lang="ts">
@ -124,13 +134,14 @@ import RecoveryDatabaseDialog from "src/components/RecoveryDatabaseDialog.vue";
import UpgradeDialog from "src/components/UpgradeDialog.vue";
import FileManageDialog from "src/components/FileManageDialog.vue";
import SubtitleDialog from "src/components/SubtitleDialog.vue";
import SystemSettingDialog from "src/components/SystemSettingDialog.vue";
import EventBus, { EventNamesDefine } from "src/common/EventBus";
import { Protocol } from "src/entities/WSProtocol";
import GlobalData from "src/common/GlobalData";
import { api } from "boot/axios";
import { HttpProtocol } from "src/entities/HttpProtocol";
import { openURL, useQuasar } from "quasar";
import { SessionStorage, openURL, useQuasar } from "quasar";
import { useI18n } from "vue-i18n";
import { NotifyMessage } from "src/common/ClientConnection";
@ -144,6 +155,7 @@ export default defineComponent({
UpgradeDialog,
FileManageDialog,
SubtitleDialog,
SystemSettingDialog,
},
setup() {
@ -189,7 +201,6 @@ export default defineComponent({
url.protocol = "http:";
console.log(url.toString());
let response = await api.get(url.toString());
console.log(response.data);
if (response.status == 200 && response && response.data) {
url.pathname =
HttpProtocol.RequestPathDBBackup + "/" + response.data;
@ -221,6 +232,10 @@ export default defineComponent({
timeout: 1000,
});
},
logout() {
SessionStorage.clear();
window.location.reload();
},
};
},
});

5
src/store/index.ts
View File

@ -38,6 +38,7 @@ export interface StateInterface {
device_screen_width: number;
device_screen_height: number;
windows: WindowOpenNotifyEntity[];
device_ip_address: string;
}
// provide typings for `this.$store`
@ -262,6 +263,7 @@ export default store(function (/* { ssrContext } */) {
device_screen_width: 1920,
device_screen_height: 1080,
windows: [],
device_ip_address: "localhost",
},
mutations: {
@ -622,6 +624,9 @@ export default store(function (/* { ssrContext } */) {
playload
);
},
setDeviceIpAddress(state: StateInterface, playload?: any) {
state.device_ip_address = playload;
},
},
// enable strict mode (adds overhead!)