This commit is contained in:
hujiale 2024-10-25 15:18:50 +08:00
parent 5a8358e132
commit 5afcfed4d4
4 changed files with 9 additions and 22 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.6 KiB

View File

@ -418,7 +418,7 @@ const moveEvent = (e) => {
console.log(layout.value[dom]); console.log(layout.value[dom]);
currentDragItem.value = layout.value[dom]; currentDragItem.value = layout.value[dom];
// //
checkIfOverTargetCanvas(e); // checkIfOverTargetCanvas(e);
} }
}; };
@ -578,19 +578,6 @@ const formState = reactive({
<template> <template>
<div id="container-canvas" class="container h-[calc(100%-10px)] px-[20px]"> <div id="container-canvas" class="container h-[calc(100%-10px)] px-[20px]">
<!-- 自定义布局的部分 -->
{{ screenW }} - {{ rowHeight }}
<div class="layoutJSON">
Displayed as <code>[x, y, w, h]</code>:
<div class="columns">
<div v-for="item in layout">
<b>{{ item.i }}</b
>: [{{ item.x }}, {{ item.y }}, {{ item.w }}, {{ item.h }}]
</div>
</div>
</div>
<div class="grid-box index-grid select-none"> <div class="grid-box index-grid select-none">
<grid-layout <grid-layout
v-if="rowHeight != 0" v-if="rowHeight != 0"
@ -616,8 +603,8 @@ const formState = reactive({
:i="item.i" :i="item.i"
:is-resizable=" :is-resizable="
tilesIsMove && tilesIsMove &&
(item.component.includes('Output2') || ((item.component && item.component.includes('Output2')) ||
item.component.includes('Output5')) (item.component && item.component.includes('Output5')))
? true ? true
: false : false
" "

View File

@ -201,9 +201,9 @@ const tilesList = [
}, },
{ {
name1: 'AUTO_1612159241967.png', name1: 'AUTO_1612159241967.png',
name2: 'AUTO_1612159241967_C车辆调度.png', name2: 'AUTO_1612159241967_C待办列表.png',
size: '2x2', size: '2x2',
name: '车辆调度', name: '待办列表',
w: 8, w: 8,
h: 5, h: 5,
component: './components/Output2/index.vue', component: './components/Output2/index.vue',

View File

@ -97,16 +97,16 @@ export const updateRowHeightByGroup = (domId: string): [number, number] => {
rowHeight = 50; // 宽度 500px ~ 600px rowHeight = 50; // 宽度 500px ~ 600px
colNum = 6; colNum = 6;
} else if (containerWidth > 400) { } else if (containerWidth > 400) {
rowHeight = 45; // 宽度 400px ~ 500px rowHeight = 50; // 宽度 400px ~ 500px
colNum = 6; colNum = 6;
} else if (containerWidth > 300) { } else if (containerWidth > 300) {
rowHeight = 40; // 宽度 300px ~ 400px rowHeight = 45; // 宽度 300px ~ 400px
colNum = 4; colNum = 4;
} else if (containerWidth > 200) { } else if (containerWidth > 200) {
rowHeight = 35; // 宽度 200px ~ 300px rowHeight = 40; // 宽度 200px ~ 300px
colNum = 4; colNum = 4;
} else { } else {
rowHeight = 30; // 宽度 150px ~ 200px (最小屏幕) rowHeight = 35; // 宽度 150px ~ 200px (最小屏幕)
colNum = 4; colNum = 4;
} }
console.log(`屏幕 ${domId}resize 监测:`, containerWidth, rowHeight); console.log(`屏幕 ${domId}resize 监测:`, containerWidth, rowHeight);