添加输出板设置界面
This commit is contained in:
parent
56cc1f7712
commit
23bab5c099
|
@ -631,6 +631,36 @@ export default class ClientConnection {
|
|||
}
|
||||
}
|
||||
|
||||
public async getOutputBoardSetting() {
|
||||
try {
|
||||
return await this.doRpc<Protocol.GetOutputBoardSettingResponseEntity>(
|
||||
new Protocol.GetOutputBoardSettingRequestEntity(0)
|
||||
);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
public async setOutputBoardSetting(
|
||||
request: Protocol.SetOutputBoardSettingRequestEntity
|
||||
) {
|
||||
try {
|
||||
return await this.doRpc<Protocol.SetOutputBoardSettingResponseEntity>(
|
||||
request
|
||||
);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
public async restoreOutputBoard() {
|
||||
try {
|
||||
return await this.doRpc<Protocol.RestoreOutputBoardResponseEntity>(
|
||||
new Protocol.RestoreOutputBoardRequestEntity(0)
|
||||
);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
|
||||
public restartDevice() {
|
||||
this.ws?.send(JSON.stringify(new Protocol.RestartDeviceRequestEntity()));
|
||||
}
|
||||
|
|
|
@ -54,6 +54,12 @@
|
|||
:label="$t('other setting')"
|
||||
:disable="loading"
|
||||
/>
|
||||
<q-tab
|
||||
name="output_board"
|
||||
icon="save"
|
||||
:label="$t('output board setting')"
|
||||
:disable="loading"
|
||||
/>
|
||||
</q-tabs>
|
||||
<q-separator />
|
||||
<q-tab-panels v-model="tab" animated>
|
||||
|
@ -328,6 +334,134 @@
|
|||
</q-card-section>
|
||||
</q-card>
|
||||
</q-tab-panel>
|
||||
|
||||
<q-tab-panel name="output_board" class="_panel">
|
||||
<q-card class="fit">
|
||||
<q-card-section>
|
||||
<q-scroll-area style="height: 55vh">
|
||||
<q-form ref="output_board_form">
|
||||
<q-list>
|
||||
<q-item>
|
||||
<q-item-section avatar class="width_5_4">{{
|
||||
$t("wall row") + ":"
|
||||
}}</q-item-section>
|
||||
<q-item-section>
|
||||
<q-input
|
||||
v-model="output_board_wall_row"
|
||||
:loading="loading"
|
||||
:disable="loading"
|
||||
type="number"
|
||||
/>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section avatar class="width_5_4">{{
|
||||
$t("wall col") + ":"
|
||||
}}</q-item-section>
|
||||
<q-item-section>
|
||||
<q-input
|
||||
v-model="output_board_wall_col"
|
||||
:loading="loading"
|
||||
:disable="loading"
|
||||
type="number"
|
||||
/>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section avatar class="width_5_4">{{
|
||||
$t("splicing") + ":"
|
||||
}}</q-item-section>
|
||||
<q-item-section>
|
||||
<q-select
|
||||
v-model="output_board_splicing"
|
||||
:loading="loading"
|
||||
:disable="loading"
|
||||
:options="[$t('on'), $t('off')]"
|
||||
/>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section avatar class="width_5_4">{{
|
||||
$t("vertical blanking") + ":"
|
||||
}}</q-item-section>
|
||||
<q-item-section>
|
||||
<q-input
|
||||
v-model="output_board_vertical_blanking"
|
||||
:loading="loading"
|
||||
:disable="loading"
|
||||
type="number"
|
||||
/>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section avatar class="width_5_4">{{
|
||||
$t("horizon blanking") + ":"
|
||||
}}</q-item-section>
|
||||
<q-item-section>
|
||||
<q-input
|
||||
v-model="output_board_horizon_blanking"
|
||||
:loading="loading"
|
||||
:disable="loading"
|
||||
type="number"
|
||||
/>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section avatar class="width_5_4">{{
|
||||
$t("rotate") + ":"
|
||||
}}</q-item-section>
|
||||
<q-item-section>
|
||||
<q-select
|
||||
v-model="output_board_rotate"
|
||||
:loading="loading"
|
||||
:disable="loading"
|
||||
:options="output_board_rotate_options"
|
||||
emit-value
|
||||
map-options
|
||||
/>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section avatar class="width_5_4">{{
|
||||
$t("volume") + ":"
|
||||
}}</q-item-section>
|
||||
<q-item-section>
|
||||
<q-input
|
||||
v-model="output_board_volume"
|
||||
:loading="loading"
|
||||
:disable="loading"
|
||||
type="number"
|
||||
/>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section avatar class="width_5_4">{{
|
||||
$t("mute") + ":"
|
||||
}}</q-item-section>
|
||||
<q-item-section>
|
||||
<q-select
|
||||
v-model="output_board_mute"
|
||||
:loading="loading"
|
||||
:disable="loading"
|
||||
:options="[$t('on'), $t('off')]"
|
||||
/>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-btn
|
||||
class="q-mx-xl"
|
||||
:label="$t('restore output board')"
|
||||
@click="restoreOutputBoard"
|
||||
></q-btn>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-form>
|
||||
</q-scroll-area>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-tab-panel>
|
||||
</q-tab-panels>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
|
@ -382,6 +516,10 @@
|
|||
width: 20%;
|
||||
}
|
||||
|
||||
.width_5_4 {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
._panel {
|
||||
padding: 3px;
|
||||
height: 60vh;
|
||||
|
@ -468,8 +606,34 @@ export default defineComponent({
|
|||
let network_form: Ref<any> = ref(null);
|
||||
let other_form: Ref<any> = ref(null);
|
||||
let graphics_form: Ref<any> = ref(null);
|
||||
let output_board_form: Ref<any> = ref(null);
|
||||
|
||||
const refresh_all = () => {
|
||||
let output_board_wall_row = ref(2);
|
||||
let output_board_wall_col = ref(2);
|
||||
let output_board_splicing = ref($t.t("on"));
|
||||
let output_board_vertical_blanking = ref(0);
|
||||
let output_board_horizon_blanking = ref(0);
|
||||
let output_board_rotate = ref(0);
|
||||
const output_board_rotate_options = ref([
|
||||
{ label: "0°", value: 0 },
|
||||
{ label: "180°", value: 1 },
|
||||
]);
|
||||
let output_board_volume = ref(100);
|
||||
let output_board_mute = ref($t.t("on"));
|
||||
|
||||
const refresh_network = () => {
|
||||
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;
|
||||
ip_address.value = $store.state.device_ip_address;
|
||||
}
|
||||
};
|
||||
|
||||
const refresh_graphics = () => {
|
||||
const config = GlobalData.getInstance()?.applicationConfig;
|
||||
if (config) {
|
||||
setTimeout(async () => {
|
||||
|
@ -515,17 +679,16 @@ export default defineComponent({
|
|||
}
|
||||
}
|
||||
}, 1);
|
||||
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;
|
||||
ip_address.value = $store.state.device_ip_address;
|
||||
|
||||
brightness.value = config.graphics_brightness;
|
||||
contrast.value = config.graphics_contrast;
|
||||
hue.value = config.graphics_hue;
|
||||
}
|
||||
};
|
||||
|
||||
const refresh_other = () => {
|
||||
const config = GlobalData.getInstance()?.applicationConfig;
|
||||
if (config) {
|
||||
use_ntp.value =
|
||||
config.use_ntp != "0" ? $t.t("enable") : $t.t("disable");
|
||||
ntp_server.value = config.ntp_server;
|
||||
|
@ -545,6 +708,31 @@ export default defineComponent({
|
|||
}
|
||||
};
|
||||
|
||||
const refresh_output_board = async () => {
|
||||
const settings = await GlobalData.getInstance()
|
||||
.getCurrentClient()
|
||||
?.getOutputBoardSetting();
|
||||
if (settings) {
|
||||
output_board_wall_row.value = settings.wall_row;
|
||||
output_board_wall_col.value = settings.wall_col;
|
||||
output_board_splicing.value = settings.splicing
|
||||
? $t.t("on")
|
||||
: $t.t("off");
|
||||
output_board_vertical_blanking.value = settings.vertical_blanking;
|
||||
output_board_horizon_blanking.value = settings.horizon_blanking;
|
||||
output_board_rotate.value = settings.rotate;
|
||||
output_board_volume.value = settings.volume;
|
||||
output_board_mute.value = settings.mute ? $t.t("on") : $t.t("off");
|
||||
}
|
||||
};
|
||||
|
||||
const refresh_all = () => {
|
||||
refresh_network();
|
||||
refresh_graphics();
|
||||
refresh_other();
|
||||
refresh_output_board();
|
||||
};
|
||||
|
||||
const applyNetwork = async () => {
|
||||
const ret = await network_form.value.validate();
|
||||
if (ret) {
|
||||
|
@ -618,6 +806,7 @@ export default defineComponent({
|
|||
});
|
||||
}
|
||||
};
|
||||
|
||||
const applyOther = async () => {
|
||||
const ret = await other_form.value.validate();
|
||||
if (ret) {
|
||||
|
@ -654,6 +843,21 @@ export default defineComponent({
|
|||
}
|
||||
};
|
||||
|
||||
const applyOutputBoard = async () => {
|
||||
const request = new Protocol.SetOutputBoardSettingRequestEntity();
|
||||
request.wall_col = output_board_wall_col.value;
|
||||
request.wall_row = output_board_wall_row.value;
|
||||
request.splicing = output_board_splicing.value == $t.t("on");
|
||||
request.vertical_blanking = output_board_vertical_blanking.value;
|
||||
request.horizon_blanking = output_board_horizon_blanking.value;
|
||||
request.rotate = output_board_rotate.value;
|
||||
request.volume = output_board_volume.value;
|
||||
request.mute = output_board_mute.value == $t.t("on");
|
||||
GlobalData.getInstance()
|
||||
.getCurrentClient()
|
||||
?.setOutputBoardSetting(request);
|
||||
};
|
||||
|
||||
const apply = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
|
@ -667,6 +871,9 @@ export default defineComponent({
|
|||
case "other":
|
||||
await applyOther();
|
||||
break;
|
||||
case "output_board":
|
||||
await applyOutputBoard();
|
||||
break;
|
||||
}
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
|
@ -674,6 +881,10 @@ export default defineComponent({
|
|||
loading.value = false;
|
||||
};
|
||||
|
||||
const restoreOutputBoard = () => {
|
||||
GlobalData.getInstance().getCurrentClient()?.restoreOutputBoard();
|
||||
};
|
||||
|
||||
return {
|
||||
show_dialog,
|
||||
loading,
|
||||
|
@ -697,11 +908,22 @@ export default defineComponent({
|
|||
current_time,
|
||||
time_zone,
|
||||
time_zone_options,
|
||||
output_board_mute,
|
||||
output_board_volume,
|
||||
output_board_rotate_options,
|
||||
output_board_rotate,
|
||||
output_board_horizon_blanking,
|
||||
output_board_vertical_blanking,
|
||||
output_board_splicing,
|
||||
output_board_wall_col,
|
||||
output_board_wall_row,
|
||||
network_form,
|
||||
other_form,
|
||||
graphics_form,
|
||||
output_board_form,
|
||||
refresh_all,
|
||||
apply,
|
||||
restoreOutputBoard,
|
||||
loga(a: any) {
|
||||
console.log(a);
|
||||
},
|
||||
|
|
|
@ -208,6 +208,18 @@ export namespace Protocol {
|
|||
return Commands.PROTOCOL_PREFIX + "RpcGetSupportResolutions";
|
||||
}
|
||||
|
||||
public static get kRpcGetOutputBoardSetting() {
|
||||
return Commands.PROTOCOL_PREFIX + "RpcGetOutputBoardSetting";
|
||||
}
|
||||
|
||||
public static get kRpcSetOutputBoardSetting() {
|
||||
return Commands.PROTOCOL_PREFIX + "RpcSetOutputBoardSetting";
|
||||
}
|
||||
|
||||
public static get kRpcRestoreOutputBoard() {
|
||||
return Commands.PROTOCOL_PREFIX + "RpcRestoreOutputBoard";
|
||||
}
|
||||
|
||||
static _all_commands = new Set([
|
||||
Commands.kUnKnowCommand,
|
||||
Commands.kSearchDevice,
|
||||
|
@ -255,6 +267,9 @@ export namespace Protocol {
|
|||
Commands.kRpcSetSystemGraphics,
|
||||
Commands.kRpcSetSystemOther,
|
||||
Commands.kRpcGetSupportResolutions,
|
||||
Commands.kRpcRestoreOutputBoard,
|
||||
Commands.kRpcSetOutputBoardSetting,
|
||||
Commands.kRpcGetOutputBoardSetting,
|
||||
]);
|
||||
|
||||
public static get AllCommands() {
|
||||
|
@ -1222,4 +1237,74 @@ export namespace Protocol {
|
|||
this.command = Protocol.Commands.kRpcGetSupportResolutions;
|
||||
}
|
||||
}
|
||||
|
||||
export class GetOutputBoardSettingRequestEntity extends Protocol.PacketEntity {
|
||||
timestamp = new Date().getMilliseconds();
|
||||
|
||||
constructor(rcp_id?: number) {
|
||||
super();
|
||||
this.rpc_id = rcp_id ?? 0;
|
||||
this.command = Protocol.Commands.kRpcGetOutputBoardSetting;
|
||||
}
|
||||
}
|
||||
|
||||
export class GetOutputBoardSettingResponseEntity extends Protocol.PacketEntity {
|
||||
wall_row: number = 2;
|
||||
wall_col: number = 2;
|
||||
splicing: boolean = false;
|
||||
vertical_blanking: number = 0;
|
||||
horizon_blanking: number = 0;
|
||||
rotate: number = 0;
|
||||
volume: number = 0;
|
||||
mute: boolean = false;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.command = Protocol.Commands.kRpcGetOutputBoardSetting;
|
||||
}
|
||||
}
|
||||
export class SetOutputBoardSettingRequestEntity extends Protocol.PacketEntity {
|
||||
wall_row: number = 2;
|
||||
wall_col: number = 2;
|
||||
splicing: boolean = false;
|
||||
vertical_blanking: number = 0;
|
||||
horizon_blanking: number = 0;
|
||||
rotate: number = 0;
|
||||
volume: number = 0;
|
||||
mute: boolean = false;
|
||||
|
||||
constructor(rcp_id?: number) {
|
||||
super();
|
||||
this.rpc_id = rcp_id ?? 0;
|
||||
this.command = Protocol.Commands.kRpcSetOutputBoardSetting;
|
||||
}
|
||||
}
|
||||
|
||||
export class SetOutputBoardSettingResponseEntity extends Protocol.PacketEntity {
|
||||
timestamp = new Date().getMilliseconds();
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.command = Protocol.Commands.kRpcSetOutputBoardSetting;
|
||||
}
|
||||
}
|
||||
|
||||
export class RestoreOutputBoardRequestEntity extends Protocol.PacketEntity {
|
||||
timestamp = new Date().getMilliseconds();
|
||||
|
||||
constructor(rcp_id?: number) {
|
||||
super();
|
||||
this.rpc_id = rcp_id ?? 0;
|
||||
this.command = Protocol.Commands.kRpcRestoreOutputBoard;
|
||||
}
|
||||
}
|
||||
|
||||
export class RestoreOutputBoardResponseEntity extends Protocol.PacketEntity {
|
||||
timestamp = new Date().getMilliseconds();
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.command = Protocol.Commands.kRpcRestoreOutputBoard;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -243,4 +243,15 @@ export default {
|
|||
"set system other": "系统参数配置",
|
||||
"set system network": "系统网络参数配置",
|
||||
"set system graphics": "系统图像参数配置",
|
||||
restore: "复位",
|
||||
mute: "静音",
|
||||
volume: "音量",
|
||||
rotate: "旋转",
|
||||
"horizon blanking": "水平消隐",
|
||||
"vertical blanking": "垂直消隐",
|
||||
splicing: "拼接",
|
||||
"restore output board": "复位输出板",
|
||||
on: "开",
|
||||
off: "关",
|
||||
"output board setting": "输出板设置",
|
||||
};
|
||||
|
|
|
@ -52,14 +52,7 @@
|
|||
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
|
||||
|
@ -68,22 +61,6 @@
|
|||
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
|
||||
|
@ -95,6 +72,49 @@
|
|||
@click="stopPlan"
|
||||
/>
|
||||
|
||||
<q-btn-dropdown
|
||||
stretch
|
||||
flat
|
||||
icon="build"
|
||||
:label="$t('other setting')"
|
||||
class="q-mr-sm"
|
||||
>
|
||||
<q-list style="background-color: #3e9acd" class="shadow-2 text-white">
|
||||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="$refs.background_image_dialog.showDialog()"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="image" />
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
{{ $t("background image") }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="$refs.recovery_database_dialog.showDialog()"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="backup" />
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
{{ $t("data import") }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable v-close-popup @click="backupDB">
|
||||
<q-item-section avatar>
|
||||
<q-icon name="cloud_download" />
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
{{ $t("data export") }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-btn-dropdown>
|
||||
|
||||
<q-space />
|
||||
<q-separator vertical inset />
|
||||
<q-btn-dropdown
|
||||
|
|
|
@ -65,7 +65,12 @@
|
|||
<q-popup-proxy context-menu>
|
||||
<q-popup-proxy context-menu />
|
||||
<q-list>
|
||||
<q-item clickable v-close-popup @click="closeAllWindows">
|
||||
<q-item
|
||||
:disable="plan_running"
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="closeAllWindows"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="close" color="red" />
|
||||
</q-item-section>
|
||||
|
@ -123,6 +128,8 @@ export default defineComponent({
|
|||
const $store = useStore();
|
||||
const $t = useI18n();
|
||||
|
||||
const plan_running = ref(false);
|
||||
|
||||
const windows = computed({
|
||||
get: () => $store.state.windows,
|
||||
set: (val) => $store.commit("setWindows", val),
|
||||
|
@ -284,6 +291,16 @@ export default defineComponent({
|
|||
}
|
||||
}
|
||||
break;
|
||||
case Protocol.Commands.kCurrentRunningPlanStateChanged:
|
||||
{
|
||||
const temp = JSON.parse(
|
||||
notify.data
|
||||
) as Protocol.PlanRunningStateChangeNotifyEntity;
|
||||
if (temp && temp.plan) {
|
||||
plan_running.value = temp.running;
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
} catch {}
|
||||
}
|
||||
|
@ -312,6 +329,7 @@ export default defineComponent({
|
|||
item_height,
|
||||
wall_width_scaler,
|
||||
wall_height_scaler,
|
||||
plan_running,
|
||||
onDrop(e: DragEvent) {
|
||||
e.preventDefault();
|
||||
let target = e.target as any;
|
||||
|
@ -383,6 +401,7 @@ export default defineComponent({
|
|||
},
|
||||
|
||||
onDragEnter(e: DragEvent) {
|
||||
e.stopPropagation();
|
||||
let target: HTMLElement | null = e.target as HTMLElement;
|
||||
if (target && target.draggable !== true) {
|
||||
while (
|
||||
|
@ -403,7 +422,9 @@ export default defineComponent({
|
|||
},
|
||||
|
||||
onDragOver(e: DragEvent) {
|
||||
e.preventDefault();
|
||||
if (!plan_running.value) {
|
||||
e.preventDefault();
|
||||
}
|
||||
},
|
||||
|
||||
onWallGridsClick(e: MouseEvent) {
|
||||
|
|
Loading…
Reference in New Issue