media_player_client/src/layouts/MainLayout.vue

168 lines
4.3 KiB
Vue

<template>
<q-layout view="hHh lpR fFf">
<div v-show="$store.state.initialized">
<!-- header -->
<q-header
elevated
class="header text-black"
@click="(evt) => evt.stopPropagation()"
>
<top-tool-bar v-if="!$store.state.custom_defines.is_custom_isv" />
<i-s-v-top-toolbar v-else />
</q-header>
<!-- page -->
<div
v-if="!$store.state.power_state"
class="fit text-h5 text-center"
style="position: fixed; top: 49.5vh"
>
{{ $t("device standby mode") }}
</div>
<q-page-container class="col">
<div class="row">
<!-- left -->
<div
v-if="landspace"
class="col-auto overflow-auto"
style="border: 1px solid #bdbdbd; max-width: 45vw"
@click="(evt) => evt.stopPropagation()"
>
<left-tool-bar />
</div>
<!-- cener content -->
<div class="col q-ma-sm">
<router-view />
</div>
<!-- right -->
<div
v-if="landspace"
class="col-auto overflow-auto"
style="border: 1px solid #bdbdbd; max-width: 45vw"
>
<right-tool-bar />
</div>
</div>
</q-page-container>
<!-- fotter -->
<div v-show="false">
<q-footer
elevated
v-if="landspace"
class="bg-white text-black"
style="height: 25px"
>
<div class="text-center fit">
Copyright © 2020 - 2021 广东创显技术有限公司
</div>
</q-footer>
<q-footer
v-else
elevated
class="bg-white text-black"
style="height: 35vh"
>
<footer-portrait class="fit" />
</q-footer>
</div>
</div>
<div v-show="!$store.state.initialized">
<q-page-container class="col">
<q-page class="row items-center justify-evenly">
<q-list>
<q-item>
<q-item-section>
<q-spinner color="primary" size="8em" :thickness="2" />
</q-item-section>
</q-item>
<q-item />
<q-item>
<q-item-section>
<div class="text-h5">loading...</div>
</q-item-section>
</q-item>
<q-item v-show="show_back">
<q-item-section>
<a href="javascript:void(0);" OnClick="window.controlLogout()">
{{ $t("back to login page") }}
</a>
</q-item-section>
</q-item>
</q-list>
</q-page>
</q-page-container>
</div>
</q-layout>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import LeftToolBar from "src/pages/LeftToolBar.vue";
import RightToolBar from "src/pages/RightToolBar.vue";
import TopToolBar from "src/pages/TopToolBar.vue";
import ISVTopToolbar from "src/pages/custom/ISVTopToolBar.vue";
import FooterPortrait from "src/pages/FooterPortrait.vue";
import EventBus, { EventNamesDefine } from "src/common/EventBus";
import { useStore } from "src/store";
import FileSuffixHelper from "src/common/FileSuffixHelper";
export default defineComponent({
name: "MainLayout",
components: {
LeftToolBar,
RightToolBar,
TopToolBar,
ISVTopToolbar,
FooterPortrait,
},
setup() {
const $store = useStore();
try {
(window as any).setPcTheme();
} catch {}
if ($store.state.advanced_debug) {
FileSuffixHelper.debug_mode = true;
}
const landspace = $store.state.landspace;
const show_back = ref(true);
EventBus.getInstance().on(EventNamesDefine.WindowResize, () => {
const new_landspace = window.innerHeight < window.innerWidth;
if (landspace != new_landspace) {
window.location.reload();
}
});
EventBus.getInstance().on(EventNamesDefine.CurrentConnectDisconnect, () => {
show_back.value = false;
});
EventBus.getInstance().on(EventNamesDefine.CurrentConnectConnected, () => {
show_back.value = true;
});
if ($store.state.advanced_debug) {
EventBus.getInstance().emit(EventNamesDefine.CheckDebug);
}
return {
landspace,
show_back,
loga(a: any) {
console.log(a);
},
};
},
});
</script>