调整布局
This commit is contained in:
parent
e64ac15462
commit
b0871b3af9
|
@ -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 {};
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue