修改

apps/web-test/src/views/dashboard/home/index.vue

@@ -418,7 +418,7 @@ const moveEvent = (e) => {
     console.log(layout.value[dom]);
     currentDragItem.value = layout.value[dom];
     // 检查是否进入目标画布区域
-    checkIfOverTargetCanvas(e);
+    // checkIfOverTargetCanvas(e);
   }
 };
 
@@ -578,19 +578,6 @@ const formState = reactive({
 
 <template>
   <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">
       <grid-layout
         v-if="rowHeight != 0"
@@ -616,8 +603,8 @@ const formState = reactive({
           :i="item.i"
           :is-resizable="
             tilesIsMove &&
-            (item.component.includes('Output2') ||
-              item.component.includes('Output5'))
+            ((item.component && item.component.includes('Output2')) ||
+              (item.component && item.component.includes('Output5')))
               ? true
               : false
           "

apps/web-test/src/views/dashboard/home/tiles.ts

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

apps/web-test/src/views/dashboard/home/utils.ts

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