fix(EditableFurniture): 修复家具旋转后位置计算错误并添加序号显示

修复家具旋转后位置计算不准确的问题，调整旋转后的位置计算逻辑。为家具添加序号显示功能，便于识别。移除调试日志和未使用的代码。

src/components/EditableFurniture/index.vue

@@ -3,6 +3,7 @@
     <div class="furniture-rotated-container" :style="rotatedContainerStyle">
       <div class="furniture-wrapper">
         <furnitureIcon :icon="localItem.type" :width="localItem.width" :height="localItem.length" />
+        <span class="text"> {{ idx + 1 }}</span>
       </div>
     </div>
   </div>
@@ -17,6 +18,7 @@ defineOptions({ name: 'EditableFurniture' })
 
 interface Props {
   item: FurnitureItem
+  idx: number
   angle: number
   coordinates: [number, number, number, number]
   canvasSize?: number
@@ -118,33 +120,34 @@ const pixelPosition = reactive({ left: props.item.left ?? 0, top: props.item.top
 const boundingBox = computed(() => calculateBoundingBox())
 
 // 容器样式 - 基于边界框
-const containerStyle = computed(
-  () =>
-    ({
-      position: 'absolute',
-      left: `${pixelPosition.left}px`,
-      top: `${pixelPosition.top}px`,
-      width: `${boundingBox.value.width}px`,
-      height: `${boundingBox.value.height}px`,
-      pointerEvents: props.disabled ? 'none' : 'auto',
-      zIndex: 100,
-      cursor: 'move',
-    }) as CSSProperties
-)
+const containerStyle = computed(() => {
+  const cssObj: CSSProperties = {
+    position: 'absolute',
+    left: `${pixelPosition.left}px`,
+    top: `${pixelPosition.top}px`,
+    width: `${boundingBox.value.width}px`,
+    height: `${boundingBox.value.height}px`,
+    pointerEvents: props.disabled ? 'none' : 'auto',
+    zIndex: 100,
+  }
+  console.log('💆‍♀️💆‍♀️💆‍♀️💆‍♀️ AAAAA containerStyle', cssObj)
+  return cssObj
+})
 
 // 旋转容器样式 - 调整位置使左上角对齐
-const rotatedContainerStyle = computed(
-  () =>
-    ({
-      position: 'absolute',
-      left: `${-boundingBox.value.left}px`,
-      top: `${-boundingBox.value.top}px`,
-      width: `${localItem.width}px`,
-      height: `${localItem.length}px`,
-      transform: `rotate(${localItem.rotate}deg)`,
-      transformOrigin: '0 0',
-    }) as CSSProperties
-)
+const rotatedContainerStyle = computed(() => {
+  const cssObj: CSSProperties = {
+    position: 'absolute',
+    left: `${-boundingBox.value.left}px`,
+    top: `${-boundingBox.value.top}px`,
+    width: `${localItem.width}px`,
+    height: `${localItem.length}px`,
+    transform: `rotate(${localItem.rotate}deg)`,
+    transformOrigin: '0 0',
+  }
+  console.log('💆‍♀️💆‍♀️💆‍♀️💆‍♀️ BBBBB rotatedContainerStyle', cssObj)
+  return cssObj
+})
 
 // 监听props变化
 watch(
@@ -219,10 +222,15 @@ const initPixelPosition = () => {
     props.angle
   )
 
+  console.log('🌸🌸🌸回显的家具数据AAAA', props.angle, props.item, itemConvert, rotatedRect)
+
   // === 3️⃣ 应用最终位置 ===
   /* 90度和270度需要特殊处理，因为旋转后家具的中心位置会改变 */
-  pixelPosition.left = props.angle === 90 ? rotatedRect.left + length / 2 : rotatedRect.left
-  pixelPosition.top = props.angle === 270 ? rotatedRect.top - length / 2 : rotatedRect.top
+  // pixelPosition.left = props.angle === 90 ? rotatedRect.left + length / 2 : rotatedRect.left
+  // pixelPosition.top = props.angle === 270 ? rotatedRect.top - length / 2 : rotatedRect.top
+
+  pixelPosition.left = rotatedRect.left
+  pixelPosition.top = rotatedRect.top
 
   // 同步像素位置到 localItem（方便 emit）
   // localItem.left = rotatedRect.left
@@ -326,10 +334,20 @@ const startDrag = (e: MouseEvent) => {
       display: flex;
       align-items: center;
       justify-content: center;
+      position: relative;
 
       :deep(*) {
         pointer-events: none;
       }
+
+      .text {
+        font-size: 14px;
+        color: #f41313;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
     }
   }
 

src/components/EditableSubregion/index.vue

@@ -308,8 +308,6 @@ const echoSubRegions = () => {
 
     const routeRegion = rotateRect_cw(itemRegion, { x: 250, y: 250 }, props.angle)
 
-    console.log(item, itemRegion, routeRegion, '🚀🚀🚀🚀🚀🚀🚀')
-
     return {
       ...item,
       nanoid: item.nanoid || nanoid(),

src/components/RadarEditor/index.vue

@@ -4,9 +4,10 @@
       <template #furnitures>
         <template v-if="showFurniture">
           <EditableFurniture
-            v-for="item in roomStore.localFurnitureItems"
+            v-for="(item, index) in roomStore.localFurnitureItems"
             :key="item.nanoid"
             :item="item"
+            :idx="index"
             :angle="angle"
             :coordinates="coordinates"
             :canvas-size="500"
@@ -113,7 +114,10 @@
                 class="list-item"
               >
                 <a-collapse v-model:activeKey="furnitureActiveKey" ghost>
-                  <a-collapse-panel :key="index + 1" :header="`${furniture.name} 属性`">
+                  <a-collapse-panel
+                    :key="index + 1"
+                    :header="`${index + 1}. ${furniture.name} 属性`"
+                  >
                     <div class="mapConfig">
                       <div class="mapConfig-item">
                         <label class="mapConfig-item-label">家具尺寸：</label>
@@ -245,13 +249,13 @@
                 checked-children="显示"
                 un-checked-children="隐藏"
               />
-              <a-popconfirm
+              <!-- <a-popconfirm
                 v-if="roomStore.localSubRegions.length"
                 title="确定清空子区域吗？"
                 @confirm="clearSubregions"
               >
                 <a-button size="small" type="link">清空</a-button>
-              </a-popconfirm>
+              </a-popconfirm> -->
               <a-button size="small" type="link" @click="createSubregion">新建</a-button>
             </a-space>
           </div>
@@ -341,7 +345,7 @@
                         <div class="mapConfig-item-content"> 默认开启 </div>
                       </div>
 
-                      <div class="mapConfig-item">
+                      <!-- <div class="mapConfig-item">
                         <div class="mapConfig-item-label">删除区域：</div>
                         <div class="mapConfig-item-content">
                           <a-popconfirm
@@ -351,7 +355,7 @@
                             <DeleteOutlined />
                           </a-popconfirm>
                         </div>
-                      </div>
+                      </div> -->
                     </div>
                   </a-collapse-panel>
                 </a-collapse>
@@ -544,11 +548,11 @@ onUnmounted(() => {
 const regionActiveKey = ref<number[]>([])
 const furnitureActiveKey = ref<number[]>([])
 
-const deleteBlockArea = (id: string) => {
-  if (id) {
-    roomStore.localSubRegions = roomStore.localSubRegions.filter((item) => item.nanoid !== id)
-  }
-}
+// const deleteBlockArea = (id: string) => {
+//   if (id) {
+//     roomStore.localSubRegions = roomStore.localSubRegions.filter((item) => item.nanoid !== id)
+//   }
+// }
 
 const modeRadioChange = () => {
   regionActiveKey.value = []
@@ -559,9 +563,9 @@ const modeRadioChange = () => {
 //   console.log('同步坐标', localFurniture.value, localSubRegions.value)
 // }
 
-const clearSubregions = () => {
-  roomStore.localSubRegions = []
-}
+// const clearSubregions = () => {
+//   roomStore.localSubRegions = []
+// }
 
 const clearFurniture = () => {
   roomStore.localFurnitureItems = []

src/views/device/detail/components/deviceAreaConfig/index.vue

@@ -46,7 +46,13 @@ import * as roomApi from '@/api/room'
 import { message } from 'ant-design-vue'
 import RadarEditor from '@/components/RadarEditor/index.vue'
 import { useRoomStore } from '@/stores/room'
-import { convert_furniture_r2c, rotateRect_cw } from '@/utils/coordTransform'
+import {
+  convert_furniture_r2c,
+  convert_region_c2r,
+  convert_region_r2c,
+  rotateRect_ccw,
+  rotateRect_cw,
+} from '@/utils/coordTransform'
 
 defineOptions({
   name: 'deviceAreaConfig',
@@ -181,12 +187,38 @@ const saveAllConfig = () => {
     }
   })
 
+  console.log('保存的家具数据📚📚📚📚📚📚furnitureItems', furnitureItems)
+
   const subRegions = roomStore.localSubRegions.map((item) => {
+    const pRadar = {
+      x: 250,
+      y: 250,
+    }
+
+    const rectRotatedBefore = convert_region_r2c(
+      {
+        x_cm_start: Number(item.startXx),
+        x_cm_stop: Number(item.stopXx),
+        y_cm_start: Number(item.startYy),
+        y_cm_stop: Number(item.stopYy),
+      },
+      {
+        x_radar: 250,
+        y_radar: 250,
+      }
+    )
+
+    const rectRotatedBack = rotateRect_ccw(rectRotatedBefore, pRadar, props.angle)
+    const newRegion = convert_region_c2r(rectRotatedBack, {
+      x_radar: 250,
+      y_radar: 250,
+    })
+
     return {
-      startXx: item.startXx,
-      stopXx: item.stopXx,
-      startYy: item.startYy,
-      stopYy: item.stopYy,
+      startXx: newRegion.x_cm_start,
+      stopXx: newRegion.x_cm_stop,
+      startYy: newRegion.y_cm_start,
+      stopYy: newRegion.y_cm_stop,
       startZz: item.startZz,
       stopZz: item.stopZz,
       isLowSnr: Number(item.isBed),