fix(s8): avoid duplicate monitoring layout updates

Web/src/views/aidop/s8/monitoring/components/S8MonitoringCategoryGrid.vue

@@ -76,6 +76,17 @@ const gridLayoutRef = ref<{
 } | null>(null);
 const localLayout = ref<ModuleGridItem[]>(props.layout.map((item) => ({ ...item })));
 
+function isLayoutEqual(a: ModuleGridItem[], b: ModuleGridItem[]): boolean {
+  if (a.length !== b.length) return false;
+  const map = new Map(b.map((item) => [item.i, item]));
+  for (const ai of a) {
+    const bi = map.get(ai.i);
+    if (!bi) return false;
+    if (ai.x !== bi.x || ai.y !== bi.y || ai.w !== bi.w || ai.h !== bi.h) return false;
+  }
+  return true;
+}
+
 function syncGridWidth() {
   const vm = gridLayoutRef.value;
   const el = containerRef.value;
@@ -112,6 +123,7 @@ function scheduleGridSync() {
 watch(
   () => props.layout,
   (val) => {
+    if (isLayoutEqual(val, localLayout.value)) return;
     localLayout.value = val.map((item) => ({ ...item }));
   },
   { deep: true },
@@ -135,6 +147,7 @@ watch(
 );
 
 function onLayoutUpdated(newLayout: ModuleGridItem[]) {
+  if (isLayoutEqual(newLayout, props.layout)) return;
   emit('update:layout', newLayout.map((item) => ({ ...item })));
 }
 

Web/src/views/aidop/s8/monitoring/components/S8MonitoringModulesGrid.vue

@@ -94,6 +94,17 @@ const gridLayoutRef = ref<{
 } | null>(null)
 const localLayout = ref<ModuleGridItem[]>(props.layout.map((item) => ({ ...item })))
 
+function isLayoutEqual(a: ModuleGridItem[], b: ModuleGridItem[]): boolean {
+  if (a.length !== b.length) return false
+  const map = new Map(b.map((item) => [item.i, item]))
+  for (const ai of a) {
+    const bi = map.get(ai.i)
+    if (!bi) return false
+    if (ai.x !== bi.x || ai.y !== bi.y || ai.w !== bi.w || ai.h !== bi.h) return false
+  }
+  return true
+}
+
 function syncGridWidth() {
   const vm = gridLayoutRef.value
   const el = containerRef.value
@@ -130,6 +141,7 @@ function scheduleGridSync() {
 watch(
   () => props.layout,
   (val) => {
+    if (isLayoutEqual(val, localLayout.value)) return
     localLayout.value = val.map((item) => ({ ...item }))
   },
   { deep: true },
@@ -154,6 +166,7 @@ watch(
 )
 
 function onLayoutUpdated(newLayout: ModuleGridItem[]) {
+  if (isLayoutEqual(newLayout, props.layout)) return
   emit('update:layout', newLayout.map((item) => ({ ...item })))
 }