调整布局

This commit is contained in:
fangxiang 2021-08-09 15:05:14 +08:00
parent e64ac15462
commit b0871b3af9
3 changed files with 44 additions and 62 deletions

View File

@ -18,6 +18,8 @@ export default defineComponent({
window.onresize = (evt: any) => window.onresize = (evt: any) =>
EventBus.getInstance().emit(EventNamesDefine.WindowResize, evt); EventBus.getInstance().emit(EventNamesDefine.WindowResize, evt);
document.body.classList.add("overflow-hidden");
return {}; return {};
}, },
}); });

View File

@ -5,19 +5,24 @@
<top-tool-bar /> <top-tool-bar />
</q-header> </q-header>
<!-- drawer -->
<q-drawer
v-if="landspace"
v-model="data.show_left_drawer"
side="left"
bordered
>
<left-tool-bar />
</q-drawer>
<!-- page --> <!-- page -->
<q-page-container> <q-page-container class="col">
<router-view /> <div class="row">
<!-- left -->
<div v-if="landspace" class="col-2" style="border: 1px solid #bdbdbd">
<left-tool-bar />
</div>
<!-- cener content -->
<div class="col q-ma-sm">
<router-view />
</div>
<!-- left -->
<div v-if="landspace" class="col-2" style="border: 1px solid #bdbdbd">
<left-tool-bar />
</div>
</div>
</q-page-container> </q-page-container>
<!-- fotter --> <!-- fotter -->
@ -29,7 +34,7 @@
> >
<div class="text-center">SX</div> <div class="text-center">SX</div>
</q-footer> </q-footer>
<q-footer v-else elevated class="bg-white text-black" style="height: 40vh"> <q-footer v-else elevated class="bg-white text-black" style="height: 35vh">
<left-tool-bar /> <left-tool-bar />
</q-footer> </q-footer>
</q-layout> </q-layout>

View File

@ -177,10 +177,11 @@ const _initialize = async (options: _OptionsType) => {
await Common.waitFor(100); await Common.waitFor(100);
} }
_initSignalSourceTree(options).then(() => { await _getApplicationConfig(options);
await _initSignalSourceTree(options).then(() => {
_getWindows(options); _getWindows(options);
}); });
_getApplicationConfig(options);
} }
}; };
@ -191,10 +192,6 @@ export default defineComponent({
setup() { setup() {
const $store = useStore(); const $store = useStore();
const $t = useI18n(); const $t = useI18n();
_initialize({
$t,
$store,
});
const windows = computed({ const windows = computed({
get: () => $store.state.windows, get: () => $store.state.windows,
@ -213,31 +210,8 @@ export default defineComponent({
const wall: Ref<HTMLElement | null> = ref(null); const wall: Ref<HTMLElement | null> = ref(null);
const item_witdh = computed({ let item_witdh = ref(0);
get: () => { const item_height = ref(0);
if (wall.value && wall.value.parentElement) {
return wall.value.parentElement.offsetWidth / wall_cols.value;
}
return 0;
},
set: (val) => $store.commit("setWallCol", val),
});
const item_height = computed({
get: () => {
if (wall.value && wall.value.parentElement) {
const wv_scaler =
$store.state.device_screen_width /
$store.state.device_screen_height;
return (
wall.value.parentElement.offsetHeight / wv_scaler / wall_rows.value
);
}
return 0;
},
set: (val) => $store.commit("setWallCol", val),
});
const wall_width_scaler = ref(0); const wall_width_scaler = ref(0);
const wall_height_scaler = ref(0); const wall_height_scaler = ref(0);
@ -256,8 +230,22 @@ export default defineComponent({
} }
}; };
const calcWallItemWH = () => {
item_witdh.value =
wall?.value?.parentElement?.offsetWidth ?? 0 / wall_cols.value;
if (wall.value && wall.value.parentElement) {
const wv_scaler =
$store.state.device_screen_width / $store.state.device_screen_height;
item_height.value =
wall.value.parentElement.offsetWidth / wv_scaler / wall_rows.value;
} else {
item_height.value = 0;
}
};
EventBus.getInstance().on(EventNamesDefine.WindowResize, () => { EventBus.getInstance().on(EventNamesDefine.WindowResize, () => {
calcWallVWScaler(); calcWallVWScaler();
calcWallItemWH();
}); });
interface _ResponseMessage { interface _ResponseMessage {
@ -348,23 +336,6 @@ export default defineComponent({
(item) => item.window_id == temp.window_id (item) => item.window_id == temp.window_id
); );
if (window) { if (window) {
// $store.commit("setWindowPropertys", [
// {
// window,
// property_name: "playing",
// value: temp.playing,
// },
// {
// window,
// property_name: "focus",
// value: temp.focus,
// },
// {
// window,
// property_name: "muted",
// value: temp.muted,
// },
// ]);
window.window_state; // window.window_state; //
$store.commit("setWindowProperty", { $store.commit("setWindowProperty", {
window, window,
@ -388,7 +359,11 @@ export default defineComponent({
} }
); );
onMounted(() => { _initialize({
$t,
$store,
}).then(() => {
calcWallItemWH();
calcWallVWScaler(); calcWallVWScaler();
}); });