feat(设备详情): 添加检测区域范围警告提示；点位图家具超出检测区域隐藏；

- 在设备详情页和区域配置组件中添加警告提示，当检测区域小于50cm时显示
- 移除设备列表和社区列表表格中action列的固定定位
- 添加AAlert组件类型声明
- 调整设备详情页布局样式

components.d.ts

@@ -8,6 +8,7 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    AAlert: typeof import('ant-design-vue/es')['Alert']
     AAvatar: typeof import('ant-design-vue/es')['Avatar']
     AButton: typeof import('ant-design-vue/es')['Button']
     ACascader: typeof import('ant-design-vue/es')['Cascader']

src/views/community/list/const.ts

@@ -32,7 +32,7 @@ export const columns = [
     key: 'action',
     dataIndex: 'action',
     align: 'center',
-    fixed: 'right',
+    // fixed: 'right',
     width: 120,
   },
 ]

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

@@ -1,5 +1,10 @@
 <template>
   <a-spin :spinning="spinning">
+    <a-alert
+      v-if="areaAvailable"
+      message="检测区域范围未配置或数值较小，建议通过设备配置调整参数！"
+      banner
+    />
     <furnitureCard
       v-if="isEditDraggable"
       v-model:is-edit="isEditDraggable"
@@ -11,7 +16,9 @@
       <div class="viewer-header">
         <div>
           <div class="viewer-header-title">家具配置</div>
-          <div class="viewer-header-subtitle">检测范围 {{ areaWidth }} x {{ areaHeight }} cm</div>
+          <div class="viewer-header-subtitle">
+            <span>检测范围 {{ areaWidth }} x {{ areaHeight }} cm</span>
+          </div>
         </div>
         <div class="viewer-header-extra">
           <a-space>
@@ -31,7 +38,7 @@
           </a-space>
         </div>
       </div>
-      <div class="viewer-content">
+      <div v-if="!areaAvailable" class="viewer-content">
         <div
           ref="contentEl"
           class="mapBox"
@@ -172,7 +179,7 @@
         </div>
       </div>
 
-      <div class="viewer-content">
+      <div v-if="!areaAvailable" class="viewer-content">
         <div
           class="mapBox blockArea"
           :style="{
@@ -390,6 +397,11 @@ const areaHeight = computed(() => {
   return Math.abs(props.width)
 })
 
+// 检测区域是否可用，小于50cm的区域，不可用
+const areaAvailable = computed(() => {
+  return areaWidth.value < 50 || areaHeight.value < 50
+})
+
 const spinning = ref(false)
 // 获取房间布局
 const fetchRoomLayout = async () => {

src/views/device/detail/index.vue

@@ -1,18 +1,24 @@
 <template>
   <a-spin :spinning="spinning">
     <div class="deviceDetail">
-      <div class="radarMap">
-        <info-card title="点位图">
-          <template #extra>
-            <a-button type="primary" size="small" @click="roomConfigHandler('area')">
-              区域配置
-            </a-button>
-          </template>
+      <info-card title="点位图">
+        <template #extra>
+          <a-button type="primary" size="small" @click="roomConfigHandler('area')">
+            区域配置
+          </a-button>
+        </template>
+        <a-alert
+          v-if="areaAvailable"
+          message="检测区域范围未配置或数值较小，建议通过设备配置调整参数！"
+          banner
+          style="margin-bottom: 10px"
+        />
+        <div class="radarMap">
           <div
             class="radarBox"
             :style="{
-              width: `${detailState?.length}px`,
-              height: `${detailState?.width}px`,
+              width: `${detailState?.length || 400}px`,
+              height: `${detailState?.width || 400}px`,
             }"
           >
             <template v-if="targets && Object.keys(targets).length > 0">
@@ -74,8 +80,8 @@
           >
             <BreathLineChart></BreathLineChart>
           </div>
-        </info-card>
-      </div>
+        </div>
+      </info-card>
 
       <info-card title="基本信息">
         <template #extra>
@@ -157,7 +163,7 @@
 <script setup lang="ts">
 import infoCard from './components/infoCard/index.vue'
 import infoItem from './components/infoItem/index.vue'
-import { ref, reactive, onMounted, onUnmounted } from 'vue'
+import { ref, reactive, onMounted, onUnmounted, computed } from 'vue'
 import { useRoute } from 'vue-router'
 import { message } from 'ant-design-vue'
 import * as roomApi from '@/api/room'
@@ -426,6 +432,11 @@ onMounted(() => {
   })
 })
 
+const areaAvailable = computed(() => {
+  const { length, width } = detailState.value
+  return Number(length) < 50 || Number(width) < 50
+})
+
 onUnmounted(() => {
   if (mqttClient) mqttClient.end()
   if (mqttTimeout) clearTimeout(mqttTimeout)
@@ -440,16 +451,11 @@ onUnmounted(() => {
 
   .radarMap {
     flex-shrink: 0;
-    min-width: 430px;
+    min-width: 400px;
     min-height: 400px;
-    background-color: #f5f5f5;
     border-radius: 10px;
-
-    :deep(.info) {
-      &-content {
-        flex-direction: row;
-      }
-    }
+    display: flex;
+    flex-direction: row;
 
     .radarBox {
       position: relative;

src/views/device/list/const.ts

@@ -40,7 +40,7 @@ export const columns = [
     key: 'action',
     dataIndex: 'action',
     align: 'center',
-    fixed: 'right',
+    // fixed: 'right',
     width: 150,
   },
 ]