优霸定制VideoWall宫格横屏竖屏成比例显示
about菜单从工具栏other移动到system system增加user
This commit is contained in:
fangxiang
parent
9064d2c3a7
commit
0c7ebfa2ba
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "media_player_client",
|
||||
"version": "1.5.5",
|
||||
"version": "1.5.6",
|
||||
"description": "A Quasar Framework app",
|
||||
"productName": "MediaPlayerClient",
|
||||
"author": "fangxiang <fangxiang@cloudview.work>",
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
"reconnecting-websocket": "^4.4.0",
|
||||
"sortablejs": "^1.15.0",
|
||||
"to": "^0.2.9",
|
||||
"ts-md5": "^1.2.11",
|
||||
"ts-md5": "^1.3.1",
|
||||
"update": "^0.7.4",
|
||||
"v-viewer": "^3.0.9",
|
||||
"vue": "^3.0.0",
|
||||
|
|
|
|||
|
|
@ -1,2 +1,3 @@
|
|||
// window.media_control_client_product = "LED_PLAYER";
|
||||
window.media_control_client_product = "SPECIAL_VIDEO";
|
||||
window.media_control_client_product = "LED_PLAYER";
|
||||
// window.media_control_client_product = "SPECIAL_VIDEO";
|
||||
// window.media_control_client_product = "RK_3568";
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 2.0 KiB |
|
|
@ -715,6 +715,26 @@ export default class ClientConnection {
|
|||
);
|
||||
}
|
||||
|
||||
public setUserName(user_name: string) {
|
||||
this.ws?.send(
|
||||
JSON.stringify(
|
||||
new Protocol.SetApplicationConfigRequestEntity(
|
||||
0,
|
||||
"user_name",
|
||||
user_name
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
public setPassword(password: string) {
|
||||
this.ws?.send(
|
||||
JSON.stringify(
|
||||
new Protocol.SetApplicationConfigRequestEntity(0, "password", password)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
public setSpecialVideoLayoutRotation(rotation: string) {
|
||||
this.ws?.send(
|
||||
JSON.stringify(
|
||||
|
|
|
|||
|
|
@ -46,6 +46,8 @@
|
|||
indicator-color="primary"
|
||||
align="justify"
|
||||
narrow-indicator
|
||||
outside-arrows
|
||||
mobile-arrows
|
||||
class="bg-grey-2 text-teal"
|
||||
@update:model-value="onTabChanged"
|
||||
>
|
||||
|
|
@ -98,6 +100,21 @@
|
|||
:label="$t('output board setting')"
|
||||
:disable="loading"
|
||||
/>
|
||||
<q-tab
|
||||
name="user"
|
||||
no-caps
|
||||
icon="account_circle"
|
||||
:label="$t('user')"
|
||||
:disable="loading"
|
||||
/>
|
||||
<q-tab
|
||||
name="about"
|
||||
no-caps
|
||||
:icon="'info' /*'img:new_icon/about.png'*/"
|
||||
:label="$t('about')"
|
||||
:disable="loading"
|
||||
@click="++click_count"
|
||||
/>
|
||||
</q-tabs>
|
||||
<q-separator />
|
||||
<q-tab-panels v-model="tab" animated>
|
||||
|
|
@ -772,26 +789,6 @@
|
|||
/>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-item class="q-mt-xl border">
|
||||
<q-space />
|
||||
<q-btn
|
||||
@click="onCleanBrowserCache"
|
||||
outline
|
||||
:label="$t('clean browser cache')"
|
||||
color="primary"
|
||||
class="q-mx-md"
|
||||
no-caps
|
||||
/>
|
||||
<q-btn
|
||||
@click="onRestore"
|
||||
outline
|
||||
:label="$t('system') + $t(' ') + $t('restore')"
|
||||
color="primary"
|
||||
class="q-mx-md"
|
||||
no-caps
|
||||
/>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-form>
|
||||
</q-card-section>
|
||||
|
|
@ -1022,6 +1019,229 @@
|
|||
</q-card-section>
|
||||
</q-card>
|
||||
</q-tab-panel>
|
||||
|
||||
<q-tab-panel name="user" class="_panel">
|
||||
<q-card class="fit">
|
||||
<q-card-section>
|
||||
<q-form ref="user_form" @submit="applyUser">
|
||||
<q-list>
|
||||
<q-item class="q-pa-none">
|
||||
<q-item-section avatar class="width_5_1">{{
|
||||
$t("user name") + ":"
|
||||
}}</q-item-section>
|
||||
<q-item-section>
|
||||
<q-input
|
||||
v-model="user_name"
|
||||
:loading="loading"
|
||||
:disable="loading"
|
||||
maxlength="16"
|
||||
:rules="[
|
||||
(val) =>
|
||||
(val && val.length > 0) ||
|
||||
$t('Please type something'),
|
||||
]"
|
||||
lazy-rules
|
||||
/>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item class="q-pa-none">
|
||||
<q-item-section avatar class="width_5_1">{{
|
||||
$t("old password") + ":"
|
||||
}}</q-item-section>
|
||||
<q-item-section>
|
||||
<q-input
|
||||
v-model="old_password"
|
||||
:loading="loading"
|
||||
:disable="loading"
|
||||
:type="show_old_password ? 'text' : 'password'"
|
||||
maxlength="16"
|
||||
:rules="[
|
||||
(val) =>
|
||||
(val && val.length > 0) ||
|
||||
$t('Please type something'),
|
||||
]"
|
||||
lazy-rules
|
||||
>
|
||||
<template v-if="old_password" v-slot:append>
|
||||
<q-icon
|
||||
:name="
|
||||
show_old_password
|
||||
? 'visibility'
|
||||
: 'visibility_off'
|
||||
"
|
||||
class="cursor-pointer"
|
||||
@click="show_old_password = !show_old_password"
|
||||
/>
|
||||
<q-icon
|
||||
name="cancel"
|
||||
@click.stop="old_password = ''"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item class="q-pa-none">
|
||||
<q-item-section avatar class="width_5_1">{{
|
||||
$t("new password") + ":"
|
||||
}}</q-item-section>
|
||||
<q-item-section>
|
||||
<q-input
|
||||
v-model="new_password"
|
||||
:loading="loading"
|
||||
:disable="loading"
|
||||
:type="show_new_password ? 'text' : 'password'"
|
||||
maxlength="16"
|
||||
:rules="[
|
||||
(val) =>
|
||||
(val && val.length > 0) ||
|
||||
$t('Please type something'),
|
||||
]"
|
||||
lazy-rules
|
||||
>
|
||||
<template v-if="new_password" v-slot:append>
|
||||
<q-icon
|
||||
:name="
|
||||
show_new_password
|
||||
? 'visibility'
|
||||
: 'visibility_off'
|
||||
"
|
||||
class="cursor-pointer"
|
||||
@click="show_new_password = !show_new_password"
|
||||
/>
|
||||
<q-icon
|
||||
name="cancel"
|
||||
@click.stop="new_password = ''"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-form>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-tab-panel>
|
||||
|
||||
<q-tab-panel name="about" class="_panel">
|
||||
<q-card class="fit">
|
||||
<q-card-section>
|
||||
<q-form ref="about_form">
|
||||
<q-list>
|
||||
<q-item v-if="false">
|
||||
<q-item-section avatar class="width_5_5_5">
|
||||
{{ $t("product name") }}:
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
{{ $t("TV splicing box") }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item v-if="false">
|
||||
<q-item-section avatar class="width_5_5_5">
|
||||
{{ $t("copyright") }}:
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
{{ $t("guangdong chuangxian jishu") }} LTD.
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section avatar class="width_5_5_5"
|
||||
>{{ $t("client version") }}:
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
{{ client_version.version }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section avatar class="width_5_5_5"
|
||||
>{{ $t("server version") }}:
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
{{ server_version }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<div
|
||||
v-if="
|
||||
(click_count >= target_click_count &&
|
||||
(click_count % target_click_count == 0 ||
|
||||
click_count % target_click_count == 1)) ||
|
||||
$store.state.advanced_debug
|
||||
"
|
||||
>
|
||||
<q-item>
|
||||
<q-item-section avatar class="width_5_5_5"
|
||||
>{{ $t("server commit hash") }}:
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
{{ server_commit_hash }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section avatar class="width_5_5_5"
|
||||
>{{ $t("server branch name") }}:
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
{{ server_branch_name }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section avatar class="width_5_5_5"
|
||||
>{{ $t("server build date") }}:
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
{{ server_build_date }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section avatar class="width_5_5_5"
|
||||
>{{ $t("kernel version") }}:
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
{{ kernel_version }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section avatar class="width_5_5_5"
|
||||
>{{ $t("rootfs version") }}:
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
{{ rootfs_version }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</div>
|
||||
<q-item class="q-mt-xl border">
|
||||
<q-space />
|
||||
|
||||
<q-btn
|
||||
@click="onRestore"
|
||||
outline
|
||||
:label="$t('system') + $t(' ') + $t('restore')"
|
||||
color="primary"
|
||||
class="q-mx-md"
|
||||
no-caps
|
||||
/>
|
||||
<q-space />
|
||||
</q-item>
|
||||
<q-item class="border">
|
||||
<q-space />
|
||||
<q-btn
|
||||
@click="onCleanBrowserCache"
|
||||
outline
|
||||
:label="$t('clean browser cache')"
|
||||
color="primary"
|
||||
class="q-mx-md"
|
||||
no-caps
|
||||
/>
|
||||
|
||||
<q-space />
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-form>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-tab-panel>
|
||||
</q-tab-panels>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
|
|
@ -1101,6 +1321,18 @@
|
|||
width: 20%;
|
||||
}
|
||||
|
||||
.width_5_5 {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.width_5_5_5 {
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
.width_5_6 {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
._panel {
|
||||
padding: 3px;
|
||||
height: 60vh;
|
||||
|
|
@ -1129,6 +1361,10 @@ import { AdvancedIpAddressEntity } from "src/entities/AdvancedIpAddressEntity";
|
|||
|
||||
import { EDeviceAttribute } from "src/entities/EDeviceAttribute";
|
||||
|
||||
import version from "../../package.json";
|
||||
|
||||
import { Md5 } from "ts-md5";
|
||||
|
||||
const _time_zones = [
|
||||
"UTC-12(Central Pacific)",
|
||||
"UTC-11(Central Pacific)",
|
||||
|
|
@ -1265,6 +1501,7 @@ export default defineComponent({
|
|||
let other_form: Ref<any> = ref(null);
|
||||
let graphics_form: Ref<any> = ref(null);
|
||||
let output_board_form: Ref<any> = ref(null);
|
||||
const user_form: Ref<any> = ref(null);
|
||||
|
||||
let output_board_wall_row = ref(2);
|
||||
let output_board_wall_col = ref(2);
|
||||
|
|
@ -1281,6 +1518,16 @@ export default defineComponent({
|
|||
|
||||
const timing_tasks: Ref<TimingTaskEntity[]> = ref([]);
|
||||
|
||||
let click_count = ref(0);
|
||||
const target_click_count = ref(30);
|
||||
let client_version = ref(version);
|
||||
let server_version = ref("unknow");
|
||||
let server_commit_hash = ref("unknow");
|
||||
let server_build_date = ref("unknow");
|
||||
let server_branch_name = ref("unknow");
|
||||
let kernel_version = ref("unknow");
|
||||
let rootfs_version = ref("unknow");
|
||||
|
||||
const refresh_network = () => {
|
||||
const config = GlobalData.getInstance()?.applicationConfig;
|
||||
if (config) {
|
||||
|
|
@ -1691,8 +1938,87 @@ export default defineComponent({
|
|||
case "output_board":
|
||||
output_board_form.value.submit();
|
||||
break;
|
||||
case "user":
|
||||
user_form.value.submit();
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const applyUser = async () => {
|
||||
loading.value = true;
|
||||
console.log("zzz");
|
||||
const request = new Protocol.SetOutputBoardSettingRequestEntity();
|
||||
request.wall_col = parseInt(output_board_wall_col.value.toString());
|
||||
request.wall_row = parseInt(output_board_wall_row.value.toString());
|
||||
request.splicing = output_board_splicing.value == $t.t("on");
|
||||
request.vertical_blanking = parseInt(
|
||||
output_board_vertical_blanking.value.toString()
|
||||
);
|
||||
request.horizon_blanking = parseInt(
|
||||
output_board_horizon_blanking.value.toString()
|
||||
);
|
||||
request.rotate = parseInt(output_board_rotate.value.toString());
|
||||
request.volume = parseInt(output_board_volume.value.toString());
|
||||
request.mute = output_board_mute.value == $t.t("on");
|
||||
request.output_board_resolution = output_board_resolution.value;
|
||||
|
||||
let success = false;
|
||||
try {
|
||||
const appconfig = GlobalData.getInstance().applicationConfig;
|
||||
if (
|
||||
user_name.value.trim().length > 0 &&
|
||||
old_password.value.trim().length > 0 &&
|
||||
new_password.value.trim().length > 0 &&
|
||||
appconfig
|
||||
) {
|
||||
const old_pwd = Md5.hashStr(old_password.value.trim()).toLowerCase();
|
||||
const new_pwd = Md5.hashStr(new_password.value.trim()).toLowerCase();
|
||||
if (
|
||||
appconfig.password &&
|
||||
appconfig.password.toLowerCase() == old_pwd
|
||||
) {
|
||||
if (user_name.value.trim() != appconfig.user_name) {
|
||||
GlobalData.getInstance()
|
||||
.getCurrentClient()
|
||||
?.setUserName(user_name.value.trim());
|
||||
}
|
||||
|
||||
if (new_pwd != old_pwd) {
|
||||
GlobalData.getInstance().getCurrentClient()?.setPassword(new_pwd);
|
||||
}
|
||||
success = true;
|
||||
} else {
|
||||
$q.notify({
|
||||
color: "negative",
|
||||
icon: "warning",
|
||||
message:
|
||||
$t.t("edit user or password") +
|
||||
$t.t(" ") +
|
||||
$t.t("fail") +
|
||||
", " +
|
||||
$t.t("old password error") +
|
||||
"!",
|
||||
position: "top",
|
||||
timeout: 2500,
|
||||
});
|
||||
loading.value = false;
|
||||
return;
|
||||
}
|
||||
}
|
||||
} catch {}
|
||||
$q.notify({
|
||||
color: success ? "positive" : "negative",
|
||||
icon: success ? "done" : "warning",
|
||||
message:
|
||||
$t.t("edit user or password") +
|
||||
(success ? $t.t("success") : $t.t("fail")) +
|
||||
"!",
|
||||
position: "top",
|
||||
timeout: 2500,
|
||||
});
|
||||
loading.value = false;
|
||||
};
|
||||
|
||||
const restoreOutputBoard = () => {
|
||||
GlobalData.getInstance().getCurrentClient()?.restoreOutputBoard();
|
||||
};
|
||||
|
|
@ -1710,6 +2036,31 @@ export default defineComponent({
|
|||
}
|
||||
};
|
||||
|
||||
const user_name = ref(
|
||||
GlobalData.getInstance().applicationConfig?.user_name ?? "admin"
|
||||
);
|
||||
const old_password = ref("");
|
||||
const show_old_password = ref(false);
|
||||
const new_password = ref("");
|
||||
const show_new_password = ref(false);
|
||||
|
||||
watch(
|
||||
() => tab.value,
|
||||
(newV, oldV) => {
|
||||
if (newV == "user") {
|
||||
user_name.value =
|
||||
GlobalData.getInstance().applicationConfig?.user_name ?? "admin";
|
||||
old_password.value = "";
|
||||
new_password.value = "";
|
||||
show_old_password.value = false;
|
||||
show_new_password.value = false;
|
||||
}
|
||||
if (newV != "about") {
|
||||
click_count.value = 0;
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
return {
|
||||
show_dialog,
|
||||
e_week_Days: ref(EWeekDays),
|
||||
|
|
@ -1761,7 +2112,22 @@ export default defineComponent({
|
|||
other_form,
|
||||
graphics_form,
|
||||
output_board_form,
|
||||
user_form,
|
||||
mirroring_output,
|
||||
click_count,
|
||||
target_click_count,
|
||||
client_version,
|
||||
server_version,
|
||||
server_commit_hash,
|
||||
server_build_date,
|
||||
server_branch_name,
|
||||
kernel_version,
|
||||
rootfs_version,
|
||||
user_name,
|
||||
old_password,
|
||||
new_password,
|
||||
show_new_password,
|
||||
show_old_password,
|
||||
refresh_all,
|
||||
apply,
|
||||
restoreOutputBoard,
|
||||
|
|
@ -1769,6 +2135,7 @@ export default defineComponent({
|
|||
applyGraphics,
|
||||
applyOther,
|
||||
applyOutputBoard,
|
||||
applyUser,
|
||||
loga(a: any) {
|
||||
console.log(a);
|
||||
},
|
||||
|
|
@ -1785,8 +2152,26 @@ export default defineComponent({
|
|||
});
|
||||
|
||||
refresh_all();
|
||||
|
||||
try {
|
||||
GlobalData.getInstance()
|
||||
.getCurrentClient()
|
||||
?.getBuildInfo()
|
||||
?.then((build_info) => {
|
||||
if (build_info) {
|
||||
server_version.value = build_info.version;
|
||||
server_commit_hash.value = build_info.commit_hash;
|
||||
server_build_date.value = build_info.build_date;
|
||||
server_branch_name.value = build_info.branch_name;
|
||||
kernel_version.value = build_info.kernel_version;
|
||||
rootfs_version.value = build_info.rootfs_version;
|
||||
}
|
||||
});
|
||||
// console.log(build_info);
|
||||
} catch {}
|
||||
},
|
||||
resetData() {
|
||||
click_count.value = 0;
|
||||
loading.value = false;
|
||||
tab.value = "network";
|
||||
},
|
||||
|
|
|
|||
|
|
@ -98,33 +98,32 @@
|
|||
|
||||
<q-separator />
|
||||
|
||||
<q-card-section style="width: 55vw">
|
||||
<div
|
||||
style="max-height: 50vh"
|
||||
:style="{ height: screen_mode == 0 ? '28vh' : '48vh' }"
|
||||
class="row items-center justify-center"
|
||||
>
|
||||
<q-card-section style="width: 60vw">
|
||||
<div style="max-height: 50vh">
|
||||
<div
|
||||
ref="preview_grid"
|
||||
style="height: 100%"
|
||||
:style="{ width: screen_mode == 0 ? '90%' : '40%' }"
|
||||
class="preview_grid"
|
||||
style="height: 100%; width: 98%"
|
||||
class="preview_grid1 items-center justify-center"
|
||||
>
|
||||
<div
|
||||
v-for="row in preview_rows"
|
||||
:key="'row' + (row - 1)"
|
||||
class="row"
|
||||
class="row items-center justify-center"
|
||||
>
|
||||
<div
|
||||
v-for="col in preview_cols"
|
||||
:style="{ height: previce_grid_height + 'px' }"
|
||||
class="preview_grid_item col row items-center justify-center"
|
||||
:style="{
|
||||
height: previce_grid_height + 'px',
|
||||
width: previce_grid_width + 'px',
|
||||
}"
|
||||
class="preview_grid_item row items-center justify-center"
|
||||
:key="(row - 1) * preview_cols + col"
|
||||
>
|
||||
<div class="fit row items-center justify-center">
|
||||
<div class="preview_wall_item">
|
||||
<div class="preview_wall_item" style="font-size: 0.8rem">
|
||||
<span>
|
||||
HI: {{ (row - 1) * preview_cols + col }}
|
||||
HDMI Port:
|
||||
{{ (row - 1) * preview_cols + col }}
|
||||
</span>
|
||||
<br />
|
||||
<span
|
||||
|
|
@ -132,7 +131,7 @@
|
|||
outputs.length > (row - 1) * preview_cols + col - 1
|
||||
"
|
||||
>
|
||||
SI:
|
||||
Splice Index:
|
||||
{{
|
||||
(outputs[(row - 1) * preview_cols + col - 1]
|
||||
.output_index ?? (row - 1) * preview_cols + col) + 1
|
||||
|
|
@ -219,12 +218,21 @@
|
|||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, Ref, watch, computed, onMounted } from "vue";
|
||||
import {
|
||||
defineComponent,
|
||||
ref,
|
||||
Ref,
|
||||
watch,
|
||||
computed,
|
||||
onMounted,
|
||||
nextTick,
|
||||
} from "vue";
|
||||
import { useStore } from "src/store";
|
||||
import { useQuasar, date as DateHelper } from "quasar";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import GlobalData from "src/common/GlobalData";
|
||||
import OutputBoardItemConfigEntity from "src/entities/OutputBoardItemConfigEntity";
|
||||
import EventBus, { EventNamesDefine } from "src/common/EventBus";
|
||||
const elementResizeDetectorMaker = require("element-resize-detector");
|
||||
|
||||
export default defineComponent({
|
||||
|
|
@ -270,6 +278,7 @@ export default defineComponent({
|
|||
const preview_cols = ref(3);
|
||||
const preview_rotation = ref(0);
|
||||
const previce_grid_height = ref(100);
|
||||
const previce_grid_width = ref(80);
|
||||
const outputs: Ref<OutputBoardItemConfigEntity[]> = ref(
|
||||
<OutputBoardItemConfigEntity[]>[]
|
||||
);
|
||||
|
|
@ -311,6 +320,41 @@ export default defineComponent({
|
|||
return result;
|
||||
};
|
||||
|
||||
const refreshPreiewGridWH = () => {
|
||||
if (preview_grid.value) {
|
||||
const max_height = window.innerHeight * 0.49; // items-center justify-center
|
||||
const max_width = preview_grid.value.clientWidth * 0.95;
|
||||
let cell_width = 0;
|
||||
let cell_height = 0;
|
||||
if (screen_mode.value == 0) {
|
||||
cell_width = max_width / preview_cols.value;
|
||||
cell_height = (cell_width * 9) / 16;
|
||||
if (cell_height * preview_rows.value > max_height) {
|
||||
cell_height = max_height / preview_rows.value;
|
||||
cell_width = (cell_height * 16) / 9;
|
||||
}
|
||||
} else {
|
||||
cell_height = max_height / preview_rows.value;
|
||||
if (preview_cols.value == 1 && preview_rows.value == 4) {
|
||||
cell_width = (cell_height * 18) / 16;
|
||||
} else {
|
||||
cell_width = (cell_height * 13) / 16;
|
||||
}
|
||||
if (cell_width * preview_cols.value > max_width) {
|
||||
cell_width = max_width / preview_cols.value;
|
||||
if (preview_cols.value == 1 && preview_rows.value == 4) {
|
||||
cell_height = (cell_width * 16) / 18;
|
||||
} else {
|
||||
cell_height = (cell_width * 16) / 13;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
previce_grid_width.value = cell_width;
|
||||
previce_grid_height.value = cell_height;
|
||||
}
|
||||
};
|
||||
|
||||
watch(
|
||||
() => splice_mode.value,
|
||||
(newV: string) => {
|
||||
|
|
@ -318,10 +362,8 @@ export default defineComponent({
|
|||
preview_cols.value = result.cols;
|
||||
preview_rows.value = result.rows;
|
||||
preview_rotation.value = result.rotation;
|
||||
if (preview_grid.value) {
|
||||
previce_grid_height.value =
|
||||
preview_grid.value.clientHeight / preview_rows.value;
|
||||
}
|
||||
|
||||
refreshPreiewGridWH();
|
||||
}
|
||||
);
|
||||
|
||||
|
|
@ -332,25 +374,15 @@ export default defineComponent({
|
|||
const result = parseSpliceMode(splice_mode.value);
|
||||
splice_mode.value = result.rows + "x" + result.cols;
|
||||
}
|
||||
refreshPreiewGridWH();
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => preview_grid.value,
|
||||
(newV: any) => {
|
||||
if (newV) {
|
||||
elementResizeDetectorMaker().listenTo(
|
||||
newV,
|
||||
(element: HTMLElement) => {
|
||||
if (element) {
|
||||
previce_grid_height.value =
|
||||
element.clientHeight / preview_rows.value;
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
EventBus.getInstance().on(
|
||||
EventNamesDefine.WindowResize,
|
||||
refreshPreiewGridWH
|
||||
);
|
||||
|
||||
return {
|
||||
show_dialog,
|
||||
loading,
|
||||
|
|
@ -364,6 +396,7 @@ export default defineComponent({
|
|||
preview_rotation,
|
||||
previce_grid_height,
|
||||
outputs,
|
||||
previce_grid_width,
|
||||
|
||||
async showDialog() {
|
||||
{
|
||||
|
|
@ -429,6 +462,9 @@ export default defineComponent({
|
|||
}
|
||||
}
|
||||
|
||||
nextTick(() => {
|
||||
refreshPreiewGridWH();
|
||||
});
|
||||
show_dialog.value = true;
|
||||
},
|
||||
resetData() {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
import { AdvancedIpAddressEntity } from "./AdvancedIpAddressEntity";
|
||||
export default class ApplicationConfigEntity {
|
||||
user_name: string = "admin";
|
||||
password: string = "";
|
||||
auto_ip_address: string = "";
|
||||
ip_address: string = "";
|
||||
gateway: string = "";
|
||||
|
|
|
|||
|
|
@ -391,4 +391,11 @@ export default {
|
|||
"video wall": "Video Wall",
|
||||
"set splice index": "Set Splice Index",
|
||||
"please select new index": "Please Select New Index",
|
||||
splice: "Splice",
|
||||
user: "User",
|
||||
"old password": "Old Password",
|
||||
"new password": "New Password",
|
||||
"server commit hash": "Server Commit Hash",
|
||||
"edit user or password": "Edit User Or Password",
|
||||
"old password error": "Old Password Error",
|
||||
};
|
||||
|
|
|
|||
|
|
@ -662,4 +662,10 @@ export default {
|
|||
"video wall": "拼接墙",
|
||||
"set splice index": "设置拼接序号",
|
||||
"please select new index": "请选择新序号",
|
||||
splice: "拼接",
|
||||
user: "用户",
|
||||
"old password": "旧密码",
|
||||
"new password": "新密码",
|
||||
"edit user or password": "修改用户名和密码",
|
||||
"old password error": "旧密码不匹配",
|
||||
};
|
||||
|
|
|
|||
|
|
@ -412,6 +412,7 @@
|
|||
clickable
|
||||
v-close-popup
|
||||
@click="$refs.about_dialog.showDialog()"
|
||||
v-if="false"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<!-- <q-icon name="info_outline" /> -->
|
||||
|
|
|
|||
|
|
@ -43,7 +43,6 @@
|
|||
:label="$t('file manage')"
|
||||
class="q-mr-sm"
|
||||
@click="$refs.file_manage_dialog.showDialogAsync()"
|
||||
v-if="false"
|
||||
/>
|
||||
|
||||
<q-btn
|
||||
|
|
@ -85,7 +84,6 @@
|
|||
: $refs.grid_setting_dialog
|
||||
)?.showDialog()
|
||||
"
|
||||
v-if="false"
|
||||
/>
|
||||
|
||||
<q-btn
|
||||
|
|
@ -101,6 +99,18 @@
|
|||
@click="$refs.subtitle_dialog.showDialog()"
|
||||
/>
|
||||
|
||||
<q-btn
|
||||
stretch
|
||||
no-caps
|
||||
flat
|
||||
stack
|
||||
:disable="plan_running || !$store.state.power_state"
|
||||
:icon="/*vertical_align_bottom*/ 'img:new_icon/edit_window_rect.png'"
|
||||
:label="$t('toolbar edit window rect')"
|
||||
class="q-mr-sm"
|
||||
@click="editRect"
|
||||
/>
|
||||
|
||||
<q-btn
|
||||
stretch
|
||||
no-caps
|
||||
|
|
@ -125,18 +135,6 @@
|
|||
@click="lowerWindow"
|
||||
/>
|
||||
|
||||
<q-btn
|
||||
stretch
|
||||
no-caps
|
||||
flat
|
||||
stack
|
||||
:disable="plan_running || !$store.state.power_state"
|
||||
:icon="/*vertical_align_bottom*/ 'img:new_icon/edit_window_rect.png'"
|
||||
:label="$t('toolbar edit window rect')"
|
||||
class="q-mr-sm"
|
||||
@click="editRect"
|
||||
/>
|
||||
|
||||
<q-btn
|
||||
stretch
|
||||
no-caps
|
||||
|
|
@ -174,30 +172,6 @@
|
|||
@click="stopPlan"
|
||||
/>
|
||||
|
||||
<q-btn
|
||||
stretch
|
||||
no-caps
|
||||
flat
|
||||
stack
|
||||
:disable="power_flag"
|
||||
icon="img:new_icon/power_off.png"
|
||||
:label="$t('power off')"
|
||||
class="q-mr-sm"
|
||||
@click="powerOff"
|
||||
/>
|
||||
|
||||
<q-btn
|
||||
stretch
|
||||
no-caps
|
||||
flat
|
||||
stack
|
||||
:disable="power_flag"
|
||||
icon="img:new_icon/power_on.png"
|
||||
:label="$t('power on')"
|
||||
class="q-mr-sm"
|
||||
@click="powerOn"
|
||||
/>
|
||||
|
||||
<q-btn
|
||||
v-if="$store.state.custom_defines.function_center_control"
|
||||
:disable="!$store.state.power_state"
|
||||
|
|
@ -235,10 +209,10 @@
|
|||
>
|
||||
<q-item-section avatar>
|
||||
<!-- <q-icon name="image" /> -->
|
||||
<q-icon name="img:new_icon/grid_setting.png" />
|
||||
<q-icon name="img:new_icon/power_off.png" />
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
{{ $t("grid setting") }}
|
||||
{{ $t("power off") }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item
|
||||
|
|
@ -249,10 +223,10 @@
|
|||
>
|
||||
<q-item-section avatar>
|
||||
<!-- <q-icon name="image" /> -->
|
||||
<q-icon name="img:new_icon/file_manager.png" />
|
||||
<q-icon name="img:new_icon/power_on.png" />
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
{{ $t("file manage") }}
|
||||
{{ $t("power on") }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item
|
||||
|
|
@ -307,6 +281,7 @@
|
|||
clickable
|
||||
v-close-popup
|
||||
@click="$refs.about_dialog.showDialog()"
|
||||
v-if="false"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<!-- <q-icon name="info_outline" /> -->
|
||||
|
|
|
|||
|
|
@ -10600,10 +10600,10 @@ ts-loader@9.2.6:
|
|||
micromatch "^4.0.0"
|
||||
semver "^7.3.4"
|
||||
|
||||
ts-md5@^1.2.11:
|
||||
version "1.2.11"
|
||||
resolved "https://registry.npmmirror.com/ts-md5/-/ts-md5-1.2.11.tgz#0bbdf884eecf7da3952fe8671a109d7e55d322c6"
|
||||
integrity sha512-vAwy9rEuRE6a8xa1MavIVkLFyyU0ydk4CLMFA5vOVccmQKLOuGb/BHm3oEN7XHf2FoqS+z0pSvhaad/ombd1Vg==
|
||||
ts-md5@^1.3.1:
|
||||
version "1.3.1"
|
||||
resolved "https://registry.npmmirror.com/ts-md5/-/ts-md5-1.3.1.tgz#f5b860c0d5241dd9bb4e909dd73991166403f511"
|
||||
integrity sha512-DiwiXfwvcTeZ5wCE0z+2A9EseZsztaiZtGrtSaY5JOD7ekPnR/GoIVD5gXZAlK9Na9Kvpo9Waz5rW64WKAWApg==
|
||||
|
||||
tslib@2.3.0:
|
||||
version "2.3.0"
|
||||
|
|
|
|||
Loading…
Reference in New Issue