fix(iot): 修复产品编辑和地图展示相关问题

- 修改工作台数据面板中的产品数为告警数
- 优化设备地图页面布局和样式
-修复产品编辑页面中图标和预览图显示问题
- 优化地图标记点图标和样式

src/views/dashboard/workplace/components/data-panel.vue

@@ -75,7 +75,7 @@
           <a-row align="center">
             <a-col :span="12">
               <a-statistic
-                title="产品数"
+                title="告警数"
                 value-style="font-size:36px"
                 :value="props.alarmInfo.warningCount"
                 :value-from="0"

src/views/iot/deviceMap/index.vue

@@ -7,48 +7,47 @@
           v-model="searchKeyword"
           placeholder="设备名称"
           @change="handleSearch"
-          @search="handleSearch"
+          @search="handleSearch"          style="margin-bottom: 16px"
-          style="margin-bottom: 16px"
         />
       </a-card>
-<!--       设备列表 -->
+      <!-- 设备列表容器 -->
-      <a-row>
+      <div class="device-list-container">
-        <a-col
+        <a-row>
-          :span="24"
+          <a-col
-          v-for="device in deviceList"
+            :span="24"
-          :key="device.id"
+            v-for="device in deviceList"
-          @click="selectDevice(device)"
+            :key="device.id"
-        >
+            @click="selectDevice(device)"
-          <a-card hoverable :style="{ margin: '5px', height: '100px' }">
+          >
-            <div
+            <a-card hoverable :style="{ margin: '5px', height: '100px' }">
-              :style="{
+              <div
-                display: 'flex',
+                :style="{
-                alignItems: 'center',
+                  display: 'flex',
-                justifyContent: 'space-between',
+                  alignItems: 'center',
-              }"
+                  justifyContent: 'space-between',
-            >
+                }"
-              <span
-                :style="{ display: 'flex', alignItems: 'center', color: '#1D2129' }"
               >
-                <a-avatar
+                <span
-                  shape="square"
+                  :style="{ display: 'flex', alignItems: 'center', color: '#1D2129' }"
-                  :size="70"
                 >
-                  <a-image
+                  <a-avatar
-                    :src="getImageUrl(device.previewId)"
+                    shape="square"
-                  />
+                    :size="70"
-                </a-avatar>
+                  >
-                <a-descriptions layout="inline-horizontal" :style="{ marginLeft: '10px'}">
+                    <a-image
-                     <a-descriptions-item label="设备名称" :span="3">{{ device.name }}</a-descriptions-item>
+                      :src="getImageUrl(device.previewId)"
-<!--                 <a-descriptions-item label="硬件版本">{{ device.hardwareVersion }}</a-descriptions-item>-->
+                    />
-<!--                 <a-descriptions-item label="固件版本">{{ device.firmwareVersion }}</a-descriptions-item>-->
+                  </a-avatar>
-                     <a-descriptions-item label="所属产品">{{ device.productName }}</a-descriptions-item>
+                  <a-descriptions layout="inline-horizontal" :style="{ marginLeft: '10px'}">
-                   </a-descriptions>
+                    <a-descriptions-item label="设备名称" :span="3">{{ device.name }}</a-descriptions-item>
-              </span>
+                    <a-descriptions-item label="所属产品">{{ device.productName }}</a-descriptions-item>
-            </div>
+                  </a-descriptions>
-          </a-card>
+                </span>
-        </a-col>
+              </div>
-      </a-row>
+            </a-card>
+          </a-col>
+        </a-row>
+      </div>
     </a-layout-sider>
     <a-layout-content>
       <div id="container"></div>
@@ -128,10 +127,10 @@
           const content = document.createElement('div');
           content.className = 'custom-content-marker';
           const markerIcon = device.warning === '1'
-            ? `/api/rest/attachment/${device.icon?.url}` // 警告标记
+            ? `/api/rest/attachment/${device.iconId}` // 警告标记
-            : `/api/rest/attachment/${device.icon?.url}`; // 默认标记
+            : `/api/rest/attachment/${device.iconId}`; // 默认标记
 
-          content.innerHTML = `<img src="${markerIcon}" alt="标记点" />`;
+          content.innerHTML = `<img src="${markerIcon}" alt="标记点" width="30px"  />`;
           // 创建标记点
           const marker = new AMap.Marker({
             position: lngLat,
@@ -204,4 +203,9 @@
     height: 100%;
   }
 
+  /* 设备列表容器样式 */
+  .device-list-container {
+    height: calc(100vh - 100px); /* 根据实际高度调整 */
+    overflow-y: auto; /* 添加垂直滚动条 */
+  }
 </style>

src/views/iot/product/components/product-edit.vue

@@ -253,6 +253,14 @@
     const res = await queryProductDetail(Id);
     formData.value = res.data;
     paramsData.value = res.data.params;
+
+    // 判断 iconId 和 previewId 是否存在
+    if (!formData.value.iconId) {
+      formData.value.icon = [];
+    }
+    if (!formData.value.previewId) {
+      formData.value.preview = [];
+    }
   };
 
   // 预览图列表