feat(iot): 优化设备详情和地图展示

- 移除了不必要的导入语句
- 优化了设备上报记录的展示逻辑，添加了详情弹窗
-修复了设备地图组件的样式问题
- 优化了产品 TSL 数据的请求逻辑，提高了数据加载效率
- 改进了设备列表中的在线状态展示，使用标签进行区分

src/api/device.ts

@@ -1,5 +1,4 @@
 import axios from 'axios';
-import dashboard from '@/router/routes/modules/dashboard';
 
 export interface DeviceRecord {
   size: number;

src/views/iot/device/components/device-detail.vue

@@ -89,17 +89,27 @@
               <div>{{ dayjs(record.recordTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
             </template>
             <template #content="{ record }">
-              <div v-for="(value, key) in record.content" :key="key">
-                <strong>{{ key }}:</strong> {{ value }}
+              <div v-if="record.content">
+                <span v-for="(value, key, index) in record.content" :key="key">
+                  <template v-if="index === 0">
+                    <strong>{{ key }}:</strong> {{ value }}
+                  </template>
+                </span>
+                <span v-if="Object.keys(record.content).length > 1">. . . . . .</span>
               </div>
             </template>
+            <template #operations="{ record }">
+              <a-button type="text" @click="openDetailModal(record)">
+                <template #icon><icon-list /></template>
+                查看详情
+              </a-button>
+            </template>
 
 
           </a-table>
         </a-tab-pane>
         <a-tab-pane key="5" tab="设备地图" title="设备地图">
-          <DeviceMap :renderData=renderData />
-
+          <DeviceMap v-if="renderData.id" :renderData=renderData />
         </a-tab-pane>
       </a-tabs>
     </a-card>
@@ -120,13 +130,31 @@
         <a-button class="editor-button" type="primary" @click="handleSubmit">确定</a-button>
       </template>
     </a-modal>
+
+    <a-modal
+      :visible="detailVisible"
+      @cancel="closeDetailModal"
+      title="上报记录详情"
+    >
+      <template #footer>
+        <a-button @click="closeDetailModal">关闭</a-button>
+      </template>
+      <div v-if="selectedRecord">
+        <p><strong>上报时间:</strong> {{ dayjs(selectedRecord.recordTime).format('YYYY-MM-DD HH:mm:ss') }}</p>
+        <div v-if="selectedRecord.content">
+          <div v-for="(value, key) in selectedRecord.content" :key="key">
+            <strong>{{ key }}:</strong> {{ value }}
+          </div>
+        </div>
+      </div>
+    </a-modal>
   </div>
 </template>
 
 <script lang="ts" setup>
   import dayjs from 'dayjs';
   import { useRoute } from 'vue-router';
-  import { onMounted, reactive, ref } from 'vue';
+  import { onMounted, ref } from 'vue';
   import { Message } from '@arco-design/web-vue';
   import { queryDeviceDetail, queryDeviceRecord, sendCommand } from '@/api/device';
   import { queryServeDetail, queryServeList } from '@/api/tsl';
@@ -170,6 +198,11 @@
       dataIndex: 'content',
       slotName: 'content',
     },
+    {
+      title: '操作',
+      dataIndex: 'operations',
+      slotName: 'operations',
+    }
   ];
   const deviceServeColumns = [
     {
@@ -189,11 +222,26 @@
     },
   ];
   const activeKey = ref('1');
-  const renderData = ref({
-    deviceId: 0,
-    clientId: 1,
-    productId: 1
-  });
+
+  const detailVisible = ref(false);
+  const selectedRecord = ref<any>(null);
+
+  const openDetailModal = (record: any) => {
+    selectedRecord.value = record;
+    detailVisible.value = true;
+  };
+
+  const closeDetailModal = () => {
+    detailVisible.value = false;
+    selectedRecord.value = null;
+  };
+
+  const renderData = ref(
+    {
+      clientId: 0,
+      productId: 0,
+    }
+  );
   const deviceReportData = ref([]);
   const deviceServerData = ref([]);
   const fields = ref([]);
@@ -217,7 +265,6 @@
     activeKey.value = e;
   };
   const dynamicFormData = ref();
-  const formRef = ref();
   // 关闭
   const handleCancel = async () => {
     setVisible(false);

src/views/iot/device/components/device-map.vue

@@ -1,7 +1,7 @@
 <template>
   <a-layout>
     <a-layout-content>
-      <div id="container"></div>
+      <div id="container" style="height: 600px"></div>
     </a-layout-content>
   </a-layout>
 </template>

src/views/iot/device/index.vue

@@ -174,7 +174,8 @@
           {{ record.state == "UNACTIVATED" ? '未激活' : '激活'}}
         </template>
         <template #online="{ record }">
-          {{ record.online == true ? '是' : '否' }}
+          <a-tag v-if="record.online == true" color="green">在线</a-tag>
+          <a-tag v-else color="red">离线</a-tag>
         </template>
         <template #operations="{ record }">
           <a-button

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

@@ -616,13 +616,23 @@
       current: 1,
       productId: Id,
     };
-    const res1 = await queryServeList(params);
-    serveData.value = res1.data.records;
-    const res2 = await queryPropertyList(params);
-    propertyData.value = res2.data.records;
-    const res3 = await queryEventList(params);
-    eventData.value = res3.data.records;
+
+    try {
+      const [res1, res2, res3] = await Promise.all([
+        queryServeList(params),
+        queryPropertyList(params),
+        queryEventList(params),
+      ]);
+
+      serveData.value = res1.data.records;
+      propertyData.value = res2.data.records;
+      eventData.value = res3.data.records;
+    } catch (error) {
+      console.error('请求失败:', error);
+      Message.error('获取数据失败，请稍后重试');
+    }
   };
+
   const changeKey = (e: any) => {
     keyValue.value = e;
   };