feat: 家具编辑数据源使用roomStore数据；

src/components/EditableFurniture/index.vue

@@ -10,95 +10,6 @@
         <furnitureIcon :icon="localItem.type" :width="localItem.width" :height="localItem.length" />
       </div>
     </div>
-
-    <div
-      v-if="false"
-      class="property-panel"
-      :style="{ left: `${panelPosition.left}px`, top: `${panelPosition.top}px` }"
-      @mousedown.stop
-    >
-      <div class="panel-header" @mousedown.prevent="startPanelDrag">
-        <div class="title">{{ localItem.name }} 属性</div>
-        <div class="close" @click="showPanel = false">×</div>
-        <div class="capsule" @mousedown.prevent="startPanelDrag"></div>
-      </div>
-
-      <div class="panel-item">
-        <label>家具尺寸：</label>
-        <a-space>
-          <a-input-number
-            v-model:value="localItem.width"
-            :min="10"
-            size="small"
-            @change="onSizeChange"
-          />
-          <a-input-number
-            v-model:value="localItem.length"
-            :min="10"
-            size="small"
-            @change="onSizeChange"
-          />
-        </a-space>
-      </div>
-
-      <div class="panel-item">
-        <label>家具旋转：</label>
-        <a-select v-model:value="localItem.rotate" size="small" @change="onRotateChange">
-          <a-select-option :value="0">0°</a-select-option>
-          <a-select-option :value="90">90°</a-select-option>
-          <a-select-option :value="180">180°</a-select-option>
-          <a-select-option :value="270">270°</a-select-option>
-        </a-select>
-      </div>
-
-      <div class="panel-item">
-        <label>位置微调：</label>
-        <a-space>
-          <ArrowLeftOutlined @click="nudge('left')" />
-          <ArrowUpOutlined @click="nudge('up')" />
-          <ArrowDownOutlined @click="nudge('down')" />
-          <ArrowRightOutlined @click="nudge('right')" />
-          <a-input-number v-model:value="nudgeStep" :min="1" size="small" style="width: 60px" />
-        </a-space>
-      </div>
-
-      <div class="panel-item">
-        <label>left/top：</label>
-        <a-space>
-          <a-input-number
-            v-model:value="localItem.left"
-            @change="updateByGeoCoords"
-            disabled
-            size="small"
-          />
-          <a-input-number
-            v-model:value="localItem.top"
-            @change="updateByGeoCoords"
-            disabled
-            size="small"
-          />
-        </a-space>
-      </div>
-
-      <div class="panel-item">
-        <label>x/y：</label>
-        <a-space>
-          <a-input-number v-model:value="localItem.x" @change="updateByGeoCoords" size="small" />
-          <a-input-number v-model:value="localItem.y" @change="updateByGeoCoords" size="small" />
-        </a-space>
-      </div>
-
-      <div class="panel-item">
-        <label>操作：</label>
-        <a-space>
-          <a-popconfirm title="确定要删除该家具吗？" @confirm="emit('delete', localItem.nanoid!)">
-            <a-button danger size="small">删除</a-button>
-          </a-popconfirm>
-        </a-space>
-      </div>
-
-      <pre>{{ localItem }}</pre>
-    </div>
   </div>
 </template>
 
@@ -106,13 +17,6 @@
 import { reactive, watch, ref, computed, onMounted, nextTick, type CSSProperties } from 'vue'
 import type { FurnitureItem } from '@/types/radar'
 import furnitureIcon from '../furnitureIcon/index.vue'
-// import type { FurnitureIconType } from '@/types/furniture'
-import {
-  ArrowLeftOutlined,
-  ArrowUpOutlined,
-  ArrowDownOutlined,
-  ArrowRightOutlined,
-} from '@ant-design/icons-vue'
 import type { FurnitureType } from '@/api/room/types'
 
 defineOptions({ name: 'EditableFurniture' })
@@ -138,7 +42,7 @@ const emit = defineEmits<{
 }>()
 
 const showPanel = ref(false)
-const nudgeStep = ref(5)
+// const nudgeStep = ref(5)
 // const showDebug = ref(true) // 调试模式
 
 // 坐标转换函数
@@ -344,24 +248,24 @@ onMounted(() => {
 })
 
 // 通过地理坐标更新
-const updateByGeoCoords = () => {
-  updatePixelPosition()
-  emit('update', { ...localItem })
-}
+// const updateByGeoCoords = () => {
+//   updatePixelPosition()
+//   emit('update', { ...localItem })
+// }
 
 // 尺寸变化处理
-const onSizeChange = () => {
-  updatePixelPosition()
-  setPanelInitialPosition()
-  emit('update', { ...localItem })
-}
+// const onSizeChange = () => {
+//   updatePixelPosition()
+//   setPanelInitialPosition()
+//   emit('update', { ...localItem })
+// }
 
 // 旋转变化处理
-const onRotateChange = () => {
-  updatePixelPosition()
-  setPanelInitialPosition()
-  emit('update', { ...localItem })
-}
+// const onRotateChange = () => {
+//   updatePixelPosition()
+//   setPanelInitialPosition()
+//   emit('update', { ...localItem })
+// }
 
 // 拖拽家具
 const startDrag = (e: MouseEvent) => {
@@ -394,49 +298,49 @@ const startDrag = (e: MouseEvent) => {
 }
 
 // 面板拖拽
-const startPanelDrag = (e: MouseEvent) => {
-  e.preventDefault()
-  e.stopPropagation()
+// const startPanelDrag = (e: MouseEvent) => {
+//   e.preventDefault()
+//   e.stopPropagation()
 
-  const startX = e.clientX
-  const startY = e.clientY
-  const initLeft = panelPosition.left
-  const initTop = panelPosition.top
+//   const startX = e.clientX
+//   const startY = e.clientY
+//   const initLeft = panelPosition.left
+//   const initTop = panelPosition.top
 
-  const onMove = (ev: MouseEvent) => {
-    panelPosition.left = initLeft + (ev.clientX - startX)
-    panelPosition.top = initTop + (ev.clientY - startY)
-  }
+//   const onMove = (ev: MouseEvent) => {
+//     panelPosition.left = initLeft + (ev.clientX - startX)
+//     panelPosition.top = initTop + (ev.clientY - startY)
+//   }
 
-  const onUp = () => {
-    window.removeEventListener('mousemove', onMove)
-    window.removeEventListener('mouseup', onUp)
-  }
+//   const onUp = () => {
+//     window.removeEventListener('mousemove', onMove)
+//     window.removeEventListener('mouseup', onUp)
+//   }
 
-  window.addEventListener('mousemove', onMove)
-  window.addEventListener('mouseup', onUp)
-}
+//   window.addEventListener('mousemove', onMove)
+//   window.addEventListener('mouseup', onUp)
+// }
 
 // 微调功能
-const nudge = (direction: 'left' | 'right' | 'up' | 'down') => {
-  const step = nudgeStep.value
-  switch (direction) {
-    case 'left':
-      pixelPosition.left -= step
-      break
-    case 'right':
-      pixelPosition.left += step
-      break
-    case 'up':
-      pixelPosition.top -= step
-      break
-    case 'down':
-      pixelPosition.top += step
-      break
-  }
-  updateGeoPosition()
-  emit('update', { ...localItem })
-}
+// const nudge = (direction: 'left' | 'right' | 'up' | 'down') => {
+//   const step = nudgeStep.value
+//   switch (direction) {
+//     case 'left':
+//       pixelPosition.left -= step
+//       break
+//     case 'right':
+//       pixelPosition.left += step
+//       break
+//     case 'up':
+//       pixelPosition.top -= step
+//       break
+//     case 'down':
+//       pixelPosition.top += step
+//       break
+//   }
+//   updateGeoPosition()
+//   emit('update', { ...localItem })
+// }
 </script>
 
 <style scoped lang="less">

src/components/RadarEditor/index.vue

@@ -1,23 +1,15 @@
 <template>
   <div class="radarEditor" :class="{ disabled: props.disabled }">
-    <DetectionAreaView
-      :coordinates="coordinates"
-      :direction="angle"
-      :furniture-items="localFurniture"
-      :canvas-size="500"
-      mode="edit"
-    >
+    <DetectionAreaView :coordinates="coordinates" :direction="angle" mode="edit">
       <template #furnitures>
         <EditableFurniture
-          v-for="item in localFurniture"
+          v-for="item in roomStore.localFurnitureItems"
           :key="item.nanoid"
           :item="item"
           :angle="angle"
           :coordinates="coordinates"
           :canvas-size="400"
           :disabled="disabled"
-          @update="updateFurniture"
-          @delete="deleteFurniture"
         />
       </template>
 
@@ -48,7 +40,7 @@
           <a-radio-button :value="1">配置面板</a-radio-button>
           <a-radio-button :value="2">信息面板</a-radio-button>
         </a-radio-group>
-        <a-button type="link" size="small" @click="syncCoordinates">同步坐标</a-button>
+        <!-- <a-button type="link" size="small" @click="syncCoordinates">同步坐标</a-button> -->
       </div>
 
       <div v-if="modeRadio === 1" class="config">
@@ -113,11 +105,14 @@
         <div class="panel">
           <div class="panel-hd">
             <div
-              >家具列表 <span v-if="localFurniture.length">({{ localFurniture.length }})</span></div
+              >家具列表
+              <span v-if="roomStore.localFurnitureItems.length"
+                >({{ roomStore.localFurnitureItems.length }})</span
+              ></div
             >
             <a-space>
               <a-popconfirm
-                v-if="localFurniture.length"
+                v-if="roomStore.localFurnitureItems.length"
                 title="确定清空家具吗？"
                 @confirm="clearFurniture"
               >
@@ -127,8 +122,12 @@
             </a-space>
           </div>
           <div class="panel-ct">
-            <template v-if="localFurniture.length">
-              <div v-for="(furniture, index) in localFurniture" :key="index" class="list-item">
+            <template v-if="roomStore.localFurnitureItems.length">
+              <div
+                v-for="(furniture, index) in roomStore.localFurnitureItems"
+                :key="index"
+                class="list-item"
+              >
                 <a-collapse v-model:activeKey="furnitureActiveKey" ghost>
                   <a-collapse-panel :key="index + 1" :header="`${furniture.name} 属性`">
                     <div class="mapConfig">
@@ -249,11 +248,13 @@
           <div class="panel-hd">
             <div
               >区域列表
-              <span v-if="localSubRegions.length">({{ localSubRegions.length }})</span></div
+              <span v-if="roomStore.localSubRegions.length"
+                >({{ roomStore.localSubRegions.length }})</span
+              ></div
             >
             <a-space>
               <a-popconfirm
-                v-if="localSubRegions.length"
+                v-if="roomStore.localSubRegions.length"
                 title="确定清空子区域吗？"
                 @confirm="clearSubregions"
               >
@@ -264,7 +265,11 @@
           </div>
           <div class="panel-ct">
             <template v-if="localSubRegions.length">
-              <div v-for="(region, index) in localSubRegions" :key="index" class="list-item">
+              <div
+                v-for="(region, index) in roomStore.localSubRegions"
+                :key="index"
+                class="list-item"
+              >
                 <a-collapse v-model:activeKey="regionActiveKey" ghost>
                   <a-collapse-panel :key="index + 1" :header="`子区域 ${index + 1} 属性`">
                     <div class="mapConfig">
@@ -371,7 +376,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, computed, onUnmounted, reactive } from 'vue'
+import { ref, computed, onUnmounted, reactive } from 'vue'
 // import type { FurnitureItem } from '@/types/radar'
 import DetectionAreaView from '../DetectionAreaView/index.vue'
 import EditableFurniture from '../EditableFurniture/index.vue'
@@ -382,8 +387,8 @@ import { nanoid } from 'nanoid'
 import { furnitureIconNameMap, furnitureIconSizeMap } from '@/const/furniture'
 import type {
   FurnitureItem,
-  LocalFurnitureItem,
-  LocalSubRegionItem,
+  // LocalFurnitureItem,
+  // LocalSubRegionItem,
   SubRegions,
 } from '@/api/room/types'
 import {
@@ -393,14 +398,15 @@ import {
   ArrowDownOutlined,
   ArrowRightOutlined,
 } from '@ant-design/icons-vue'
+import { useRoomStore } from '@/stores/room'
 
 defineOptions({ name: 'RadarEditor' })
 
 interface Props {
   coordinates: [number, number, number, number]
   angle: number
-  furnitureItems?: LocalFurnitureItem[]
-  subRegions?: LocalSubRegionItem[]
+  // furnitureItems?: LocalFurnitureItem[]
+  // subRegions?: LocalSubRegionItem[]
   disabled?: boolean
 }
 const props = defineProps<Props>()
@@ -409,8 +415,9 @@ const emit = defineEmits<{
   (e: 'update:subRegions', regions: SubRegions[]): void
 }>()
 
-const localFurniture = ref<FurnitureItem[]>(props.furnitureItems ?? [])
-const localSubRegions = ref<SubRegions[]>(props.subRegions ?? [])
+const roomStore = useRoomStore()
+const localFurniture = ref<FurnitureItem[]>(roomStore.localFurnitureItems ?? [])
+const localSubRegions = ref<SubRegions[]>(roomStore.localSubRegions ?? [])
 
 console.log('props', props)
 
@@ -438,42 +445,8 @@ const nudge = (direction: 'left' | 'right' | 'up' | 'down') => {
   // emit('update', { ...localItem })
 }
 
-watch(
-  () => props.furnitureItems,
-  (newVal) => {
-    if (newVal) localFurniture.value = [...newVal]
-  },
-  { deep: true }
-)
-
-watch(
-  () => props.subRegions,
-  (newVal) => {
-    if (newVal) localSubRegions.value = [...newVal]
-  },
-  { deep: true }
-)
-
-// 监听本地子区域变化，通知父组件
-watch(
-  localSubRegions,
-  (newRegions) => {
-    // emit('update:subRegions', newRegions)
-    console.log('子区域变化', newRegions)
-    // 缓存起来
-    localStorage.setItem('subRegions', JSON.stringify(newRegions))
-  },
-  { deep: true }
-)
-
-function updateFurniture(item: FurnitureItem) {
-  localFurniture.value = localFurniture.value.map((i) => (i.nanoid === item.nanoid ? item : i))
-  emit('update:furnitureItems', localFurniture.value)
-}
-
 function deleteFurniture(nanoid: string) {
-  localFurniture.value = localFurniture.value.filter((i) => i.nanoid !== nanoid)
-  emit('update:furnitureItems', localFurniture.value)
+  roomStore.localFurnitureItems = roomStore.localFurnitureItems.filter((i) => i.nanoid !== nanoid)
 }
 
 function addFurniture(item: FurnitureItem) {
@@ -596,16 +569,16 @@ const modeRadioChange = () => {
   furnitureActiveKey.value = []
 }
 
-const syncCoordinates = () => {
-  console.log('同步坐标', localFurniture.value, localSubRegions.value)
-}
+// const syncCoordinates = () => {
+//   console.log('同步坐标', localFurniture.value, localSubRegions.value)
+// }
 
 const clearSubregions = () => {
   localSubRegions.value = []
 }
 
 const clearFurniture = () => {
-  localFurniture.value = []
+  roomStore.localFurnitureItems = []
 }
 </script>
 

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

@@ -34,8 +34,6 @@
         ref="radarEditorRef"
         :coordinates="props.ranges"
         :angle="props.angle"
-        :furnitureItems="roomStore.localFurnitureItems"
-        :subRegions="roomStore.localSubRegions"
         :disabled="!isEditDraggable"
       />
     </div>