514 lines
14 KiB
Vue
514 lines
14 KiB
Vue
<template>
|
|
<q-toolbar
|
|
class="shadow-2 text-accent bg-secondary q-pa-none"
|
|
style="flex-wrap: wrap"
|
|
>
|
|
<q-btn
|
|
class="col-auto"
|
|
:disable="!$store.state.power_state"
|
|
stretch
|
|
stack
|
|
flat
|
|
no-caps
|
|
icon="img:pad/toolbar/close_icon.png"
|
|
:label="$t('close')"
|
|
@click="closeCurrentWindow"
|
|
/>
|
|
|
|
<q-btn
|
|
class="col-auto"
|
|
:disable="!$store.state.power_state"
|
|
stretch
|
|
stack
|
|
flat
|
|
no-caps
|
|
icon="img:pad/toolbar/clean_windows_icon.png"
|
|
:label="$t('clean screen')"
|
|
@click="closeAllWindows"
|
|
/>
|
|
|
|
<q-btn
|
|
class="col-auto"
|
|
:disable="!$store.state.power_state"
|
|
stretch
|
|
stack
|
|
flat
|
|
no-caps
|
|
icon="img:pad/toolbar/full_screen_icon.png"
|
|
:label="$t('full screen window')"
|
|
@click="fullscreenWindow"
|
|
/>
|
|
|
|
<q-btn
|
|
class="col-auto"
|
|
:disable="!$store.state.power_state"
|
|
stretch
|
|
stack
|
|
flat
|
|
no-caps
|
|
icon="img:pad/toolbar/exit_full_screen_icon.png"
|
|
:label="$t('restore window size')"
|
|
@click="exitFullscreenWindow"
|
|
/>
|
|
|
|
<q-btn
|
|
class="col-auto"
|
|
:disable="!$store.state.power_state"
|
|
stretch
|
|
stack
|
|
flat
|
|
no-caps
|
|
icon="img:pad/toolbar/top_window_icon.png"
|
|
:label="$t('win top')"
|
|
@click="topWindow"
|
|
/>
|
|
<q-btn
|
|
class="col-auto"
|
|
:disable="!$store.state.power_state"
|
|
stretch
|
|
stack
|
|
flat
|
|
no-caps
|
|
icon="img:pad/toolbar/lower_window_icon.png"
|
|
:label="$t('win lower')"
|
|
@click="lowerWindow"
|
|
/>
|
|
|
|
<q-btn
|
|
v-if="$store.state.custom_defines.function_center_control"
|
|
:disable="!$store.state.power_state"
|
|
class="col-auto"
|
|
stretch
|
|
stack
|
|
flat
|
|
no-caps
|
|
icon="img:pad/toolbar/center_control_icon.png"
|
|
:label="$t('center control')"
|
|
@click="$refs.center_control_dialog.showDialog()"
|
|
/>
|
|
<q-btn
|
|
class="col-auto"
|
|
stretch
|
|
stack
|
|
flat
|
|
no-caps
|
|
:disable="power_flag"
|
|
icon="img:pad/toolbar/power_on_icon.png"
|
|
:label="$t('power on')"
|
|
@click="powerOn"
|
|
/>
|
|
<q-btn
|
|
class="col-auto"
|
|
stretch
|
|
stack
|
|
flat
|
|
no-caps
|
|
:disable="power_flag"
|
|
icon="img:pad/toolbar/power_off_icon.png"
|
|
:label="$t('power off')"
|
|
@click="powerOff"
|
|
/>
|
|
<q-btn
|
|
stretch
|
|
:disable="!$store.state.power_state"
|
|
flat
|
|
stack
|
|
no-caps
|
|
icon="img:pad/toolbar/stop_plan.png"
|
|
:label="$t('stop plan')"
|
|
class="col-auto"
|
|
v-if="plan_running"
|
|
@click="stopPlan"
|
|
/>
|
|
<q-btn
|
|
stretch
|
|
:disable="!$store.state.power_state"
|
|
flat
|
|
stack
|
|
no-caps
|
|
icon="img:pad/toolbar/subtitle.png"
|
|
:label="$t('subtitle')"
|
|
class="col-auto"
|
|
@click="$refs.subtitle_dialog.showDialog()"
|
|
/>
|
|
|
|
<q-btn
|
|
stretch
|
|
:disable="!$store.state.power_state"
|
|
v-if="$store.state.isLedPlayer()"
|
|
flat
|
|
stack
|
|
no-caps
|
|
icon="img:pad/toolbar/edit_window_rect.png"
|
|
:label="$t('toolbar edit window rect')"
|
|
class="col-auto"
|
|
@click="editRect"
|
|
/>
|
|
|
|
<q-btn
|
|
class="col-auto"
|
|
:disable="!$store.state.power_state"
|
|
stretch
|
|
stack
|
|
flat
|
|
no-caps
|
|
icon="img:pad/toolbar/other_setting.png"
|
|
:label="$t('other setting')"
|
|
>
|
|
<q-popup-proxy>
|
|
<q-list class="shadow-2 text-primary">
|
|
<q-item
|
|
clickable
|
|
v-close-popup
|
|
@click="$refs.system_setting_dialog.showDialog()"
|
|
>
|
|
<q-item-section avatar>
|
|
<q-icon name="img:pad/toolbar/system_setting.png" />
|
|
</q-item-section>
|
|
<q-item-section>
|
|
{{ $t("system setting") }}
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item
|
|
clickable
|
|
v-close-popup
|
|
@click="$refs.file_manage_dialog.showDialogAsync()"
|
|
>
|
|
<q-item-section avatar>
|
|
<q-icon name="img:pad/toolbar/file_upload_icon.png" />
|
|
</q-item-section>
|
|
<q-item-section>
|
|
{{ $t("file manage") }}
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item
|
|
clickable
|
|
v-close-popup
|
|
@click="$refs.background_image_dialog.showDialog()"
|
|
>
|
|
<q-item-section avatar>
|
|
<q-icon name="img:pad/toolbar/wallpaper_icon.png" />
|
|
</q-item-section>
|
|
<q-item-section>
|
|
{{ $t("background image setting") }}
|
|
</q-item-section>
|
|
</q-item>
|
|
|
|
<q-item
|
|
clickable
|
|
v-close-popup
|
|
@click="
|
|
$refs.fusion_settings_dialog.showDialog();
|
|
getconfig();
|
|
"
|
|
v-if="$store.state.custom_defines.function_fusion"
|
|
>
|
|
<q-item-section avatar>
|
|
<q-icon style="color: #63bab4;" name="open_with" />
|
|
</q-item-section>
|
|
<q-item-section>
|
|
{{ $t("fusion settings") }}
|
|
</q-item-section>
|
|
</q-item>
|
|
|
|
<q-item clickable v-close-popup @click="switchLanguage">
|
|
<q-item-section avatar>
|
|
<q-icon name="img:pad/toolbar/cn_en.png" />
|
|
</q-item-section>
|
|
<q-item-section>
|
|
{{ $t("CN/EN switch") }}
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item
|
|
v-if="$store.state.advanced_debug"
|
|
clickable
|
|
v-close-popup
|
|
@click="$refs.advanced_debug_dialog.showDialog()"
|
|
>
|
|
<q-item-section avatar>
|
|
<q-icon name="bug_report" color="accent" />
|
|
</q-item-section>
|
|
<q-item-section> AdvancedDebug </q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-popup-proxy>
|
|
</q-btn>
|
|
<q-space />
|
|
<q-btn
|
|
class="col-1"
|
|
stretch
|
|
stack
|
|
flat
|
|
no-caps
|
|
icon="img:pad/toolbar/logout_icon.png"
|
|
:label="$t('logout')"
|
|
@click="logout"
|
|
/>
|
|
</q-toolbar>
|
|
|
|
<background-image-dialog ref="background_image_dialog" />
|
|
<file-manage-dialog ref="file_manage_dialog" />
|
|
<center-control-dialog ref="center_control_dialog" />
|
|
<subtitle-dialog ref="subtitle_dialog" />
|
|
<advanced-debug-dialog ref="advanced_debug_dialog" />
|
|
<window-rect-edit-dialog ref="window_rect_edit_dialog" />
|
|
<system-setting-dialog ref="system_setting_dialog" />
|
|
|
|
<fusion-settings-dialog ref="fusion_settings_dialog" />
|
|
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, Ref, ref, computed, watch } from "vue";
|
|
import { Cookies, SessionStorage, useQuasar } from "quasar";
|
|
import { useI18n } from "vue-i18n";
|
|
import { useStore } from "src/store";
|
|
|
|
import FusionSettingsDialog from "src/components/FusionSettingsDialog.vue";
|
|
|
|
import BackgroundImageDialog from "src/components/BackgroundImageDialog.vue";
|
|
import FileManageDialog from "src/components/FileManageDialog.vue";
|
|
import SubtitleDialog from "src/components/SubtitleDialog.vue";
|
|
import CenterControlDialog from "src/components/CenterControlDialog.vue";
|
|
import AdvancedDebugDialog from "src/components/AdvancedDebugDialog.vue";
|
|
import WindowRectEditDialog from "src/components/WindowRectEditDialog.vue";
|
|
import SystemSettingDialog from "src/components/SystemSettingDialog.vue";
|
|
|
|
import GlobalData from "src/common/GlobalData";
|
|
import { Protocol } from "src/entities/WSProtocol";
|
|
import { component } from "v-viewer";
|
|
import { EDeviceAttribute } from "src/entities/EDeviceAttribute";
|
|
|
|
export default defineComponent({
|
|
name: "PadTopToolbarPage",
|
|
components: {
|
|
BackgroundImageDialog,
|
|
FileManageDialog,
|
|
CenterControlDialog,
|
|
SubtitleDialog,
|
|
AdvancedDebugDialog,
|
|
WindowRectEditDialog,
|
|
SystemSettingDialog,
|
|
FusionSettingsDialog
|
|
},
|
|
setup() {
|
|
const $store = useStore();
|
|
const $q = useQuasar();
|
|
const $t = useI18n();
|
|
let set = GlobalData.getInstance().getCurrentClient();
|
|
const window_rect_edit_dialog: Ref<any> = ref(null);
|
|
|
|
const plan_running = computed(
|
|
() => $store.state.current_running_plan.trim() != ""
|
|
);
|
|
|
|
const power_flag = ref(false);
|
|
watch(
|
|
() => power_flag.value,
|
|
(newV) => {
|
|
if (newV) {
|
|
setTimeout(() => {
|
|
power_flag.value = false;
|
|
}, 1100 * 5);
|
|
}
|
|
}
|
|
);
|
|
const getconfig = () => {
|
|
set?.SetBlendingOption("blending_grids_select_ui", '4')
|
|
set?.SetBlendingOption('blending_grids_select_projector',"0-0");
|
|
set?.SetBlendingOption("blending_grids_select_point", `4:1`)
|
|
set?.SetBlendingOption("blending_grids_show", "1");
|
|
try {
|
|
set?.GetBlendingConfig("").then((res) => {
|
|
let tmp = JSON.parse(res ? res.config : "");
|
|
$store.commit("setEnablefusion", tmp.enable);
|
|
$store.commit("setfusion_configuration", res?.config);
|
|
});
|
|
} catch (error) {}
|
|
};
|
|
return {
|
|
plan_running,
|
|
window_rect_edit_dialog,
|
|
power_flag,
|
|
getconfig,
|
|
|
|
toogleFullScreen() {
|
|
if (!$q.fullscreen.isCapable) {
|
|
if ($q.platform.is.ipad) {
|
|
$q.notify({
|
|
type: "warning",
|
|
message:
|
|
$t.t("on the iPad, only Safari supports full screen") + "!",
|
|
position: "top",
|
|
timeout: 1500,
|
|
});
|
|
} else {
|
|
$q.notify({
|
|
type: "warning",
|
|
message:
|
|
$t.t("the current browser does not support full screen") + "!",
|
|
position: "top",
|
|
timeout: 1500,
|
|
});
|
|
}
|
|
return;
|
|
}
|
|
if ($q.fullscreen.isActive) {
|
|
$q.fullscreen.exit();
|
|
} else {
|
|
$q.fullscreen.request().catch((e: any) => {
|
|
console.log(e);
|
|
});
|
|
}
|
|
},
|
|
stopPlan() {
|
|
GlobalData.getInstance().getCurrentClient()?.stopCurrentRunningPlan();
|
|
},
|
|
topWindow() {
|
|
const window = $store.state.windows.find(
|
|
(element) => element && element.uuid == $store.state.selected_window
|
|
);
|
|
if (window) {
|
|
GlobalData.getInstance()
|
|
.getCurrentClient()
|
|
?.focusIn(window.window_id);
|
|
}
|
|
},
|
|
lowerWindow() {
|
|
const window = $store.state.windows.find(
|
|
(element) => element && element.uuid == $store.state.selected_window
|
|
);
|
|
if (window) {
|
|
GlobalData.getInstance()
|
|
.getCurrentClient()
|
|
?.lowerWindow(window.window_id);
|
|
}
|
|
},
|
|
fullscreenWindow() {
|
|
const window = $store.state.windows.find(
|
|
(element) => element && element.uuid == $store.state.selected_window
|
|
);
|
|
if (window) {
|
|
GlobalData.getInstance()
|
|
.getCurrentClient()
|
|
?.windowFullScreen(window.window_id, true);
|
|
}
|
|
},
|
|
exitFullscreenWindow() {
|
|
const window = $store.state.windows.find(
|
|
(element) => element && element.uuid == $store.state.selected_window
|
|
);
|
|
if (window) {
|
|
GlobalData.getInstance()
|
|
.getCurrentClient()
|
|
?.windowFullScreen(window.window_id, false);
|
|
}
|
|
},
|
|
closeCurrentWindow() {
|
|
const window = $store.state.windows.find(
|
|
(element) => element && element.uuid == $store.state.selected_window
|
|
);
|
|
if (window) {
|
|
GlobalData.getInstance()
|
|
.getCurrentClient()
|
|
?.closeWindow(window.window_id);
|
|
}
|
|
},
|
|
closeAllWindows() {
|
|
GlobalData.getInstance().getCurrentClient()?.closeWindow(-1);
|
|
},
|
|
switchLanguage() {
|
|
let language = Cookies.get("language");
|
|
if (!language) {
|
|
language = "zh-CN";
|
|
}
|
|
|
|
if (language != "zh-CN" && language != "en-US") {
|
|
language = "zh-CN";
|
|
} else {
|
|
language = language == "zh-CN" ? "en-US" : "zh-CN";
|
|
}
|
|
Cookies.set("language", language, {
|
|
expires: 365,
|
|
});
|
|
window.location.reload();
|
|
},
|
|
logout() {
|
|
const w = window as any;
|
|
if (w.controlLogout && typeof w.controlLogout == "function") {
|
|
w.controlLogout();
|
|
} else {
|
|
Cookies.remove("auto_login");
|
|
SessionStorage.clear();
|
|
try {
|
|
$q.fullscreen.exit();
|
|
} catch {}
|
|
window.location.reload();
|
|
}
|
|
},
|
|
async powerOff() {
|
|
let success = false;
|
|
try {
|
|
const response = await GlobalData.getInstance()
|
|
.getCurrentClient()
|
|
?.deviceStandByMode();
|
|
if (response) {
|
|
success = response?.success ?? false;
|
|
}
|
|
} catch {}
|
|
if (success) {
|
|
power_flag.value = true;
|
|
}
|
|
$q.notify({
|
|
color: success ? "positive" : "negative",
|
|
icon: success ? "done" : "warning",
|
|
message:
|
|
$t.t("send power off command") +
|
|
(success ? $t.t("success") : $t.t("fail")) +
|
|
"!",
|
|
position: "top",
|
|
timeout: 1500,
|
|
});
|
|
},
|
|
async powerOn() {
|
|
let success = false;
|
|
try {
|
|
const response = await GlobalData.getInstance()
|
|
.getCurrentClient()
|
|
?.wakeUpDevice();
|
|
if (response) {
|
|
success = response?.success ?? false;
|
|
}
|
|
} catch {}
|
|
if (success) {
|
|
power_flag.value = true;
|
|
}
|
|
$q.notify({
|
|
color: success ? "positive" : "negative",
|
|
icon: success ? "done" : "warning",
|
|
message:
|
|
$t.t("send power on command") +
|
|
(success ? $t.t("success") : $t.t("fail")) +
|
|
"!",
|
|
position: "top",
|
|
timeout: 1500,
|
|
});
|
|
},
|
|
async editRect() {
|
|
if (window_rect_edit_dialog.value) {
|
|
try {
|
|
const window = $store.state.windows.find(
|
|
(element) =>
|
|
element && element.uuid == $store.state.selected_window
|
|
);
|
|
if (window) {
|
|
window_rect_edit_dialog.value.showDialog(window.window_id);
|
|
}
|
|
} catch {}
|
|
}
|
|
},
|
|
};
|
|
},
|
|
});
|
|
</script>
|