加滚动条

This commit is contained in:
joylink_zhaoerwei 2024-10-15 18:16:18 +08:00
parent ed3392d378
commit 702cc229a3

View File

@ -154,12 +154,17 @@
<div
v-show="subMenuDisplayForm !== DisplayForm.draw"
id="component-container"
class="show-component"
>
<cCTV-monitoring
v-if="drawStore.selectSubmenuAndStation.submenu == '监控布局图'"
:stationName="drawStore.selectSubmenuAndStation.station"
/>
<q-scroll-area
:style="`width: ${showComponent.width}px;height: ${showComponent.height}px`"
>
<div class="show-component">
<cCTV-monitoring
v-if="drawStore.selectSubmenuAndStation.submenu == '监控布局图'"
:stationName="drawStore.selectSubmenuAndStation.station"
/>
</div>
</q-scroll-area>
</div>
<q-page-sticky position="bottom-right" :offset="fabPos">
<q-fab
@ -555,6 +560,10 @@ const canvasHeight = ref(0);
const headerHeight = ref(0);
const footerHeight = ref(0);
const rightWidth = ref(0);
const showComponent = reactive({
width: 0,
height: 0,
});
function onHeaderResize(size: { height: number; width: number }) {
headerHeight.value = size.height;
@ -581,6 +590,7 @@ function onResize() {
const componentDom = document.getElementById('component-container');
if (dom) {
dom.style.width = canvasWidth.value + 'px';
showComponent.width = canvasWidth.value;
if (subMenuDisplayForm.value == DisplayForm.draw) {
dom.style.height = canvasHeight.value + 'px';
} else if (subMenuDisplayForm.value == DisplayForm.drawAndComponent) {
@ -588,10 +598,12 @@ function onResize() {
(subMenu) => subMenu.value == selectSubMenuName.value
).heightPercent;
dom.style.height = (heightPercent / 100) * canvasHeight.value + 'px';
componentDom.style.height =
(1 - heightPercent / 100) * canvasHeight.value - 1 + 'px';
const height = (1 - heightPercent / 100) * canvasHeight.value - 1;
componentDom.style.height = height + 'px';
showComponent.height = height;
} else {
componentDom.style.height = canvasHeight.value + 'px';
showComponent.height = canvasHeight.value;
}
}
}