fix(src/api/external): 修改设备分布新增设备最新属性表格

@@ -16,7 +16,8 @@ enum Api {
   VIDEOURL = '/video/url/',
   GEOJSONURL = '/map/geo_json/',
   DEVICE_URL = '/device',
-  GET_ATTRBUTELIST = '/device/attributes/'
+  GET_ATTRBUTELIST = '/device/attributes/',
+  GET_DEVICE_LATEST = '/plugins/telemetry/DEVICE/'
 }
 
 export const getDictItemByCode = (value: string) => {
@@ -127,3 +128,11 @@ export const getAttribute = (deviceProfileId: string) =>
   defHttp.get({
     url: `${Api.GET_ATTRBUTELIST}${deviceProfileId}`
   })
+
+// 获取设备最新数据
+export const getDeviceLatest = (tbDeviceId: string) =>
+defHttp.get({
+  url: `${Api.GET_DEVICE_LATEST}${tbDeviceId}/values/timeseries`
+}, {
+  joinPrefix: false
+})
\ No newline at end of file

+<template>
+  <n-drawer display-directive="if" v-model:show="modelShow" :width="502" :placement="placement">
+    <n-drawer-content title="设备最新属性数据" closable>
+      <n-space vertical>
+        <n-data-table size="small" :columns="dimensions" :data="source" :pagination="pagination" />
+      </n-space>
+    </n-drawer-content>
+  </n-drawer>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { NDataTable,NDrawer, NDrawerContent, NSpace } from 'naive-ui'
+import { dimensions, pagination } from '../config'
+import type { sourceInterface } from '../config'
+import dayjs from 'dayjs'
+
+// defineProps({
+//   modelShow: Boolean
+// })
+
+const placement = ref('right')
+
+const modelShow =ref(false)
+
+const source =ref<sourceInterface[]>([])
+
+const setValue = (value: Recordable) => {
+  if (!value) return
+  source.value = Object.keys(value).map((item:string) => {
+    return {
+      key: item,
+      value: value[item][0].value,
+      lastUpdateTime: dayjs( value[item][0].ts).format('YYYY-MM-DD HH:mm:ss')
+    }
+  })
+}
+
+const openDrawer = () => modelShow.value = true
+
+defineExpose({
+  setValue,
+  openDrawer
+})
+</script>
+
+<style lang="scss" scoped></style>

@@ -36,6 +36,32 @@ export const filterDevice = (items: any) => {
   }
 }
 
+export const dimensions= [
+  {
+    "title": "键",
+    "key": "key"
+  },
+  {
+    "title": "值",
+    "key": "value"
+  },
+  {
+    "title": "最后更新时间",
+    "key": "lastUpdateTime"
+  }
+]
+
+export  interface sourceInterface {
+  key: string
+  value: string
+  lastUpdateTime: string
+}
+
+export const pagination = {
+  page: 1,
+  pageSize: 10
+}
+
 export enum ThemeEnum {
   NORMAL = 'normal',
   DARK = 'dark',

 <template>
-  <div @mouseenter="handleMouseenter" @mouseleave="handleMouseleave" class="chart-amap" ref="vChartRef">
-    <!-- <div v-show="showSearchBox" @click.stop="handleOpenSearchBox" class="search-box"></div>
-    <search-box :modelShow="modelShow" @searchParams="handleSearchParams" @closeDrawer="handleCloseDrawer"></search-box> -->
+  <div class="chart-amap" ref="vChartRef">
+    <device-latest-table ref="deviceLatestTableRef" :tbDeviceId="tbDeviceIdStr"></device-latest-table>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, PropType, toRefs, watch, render, h } from 'vue'
+import { ref, PropType, toRefs, watch, render, h, onMounted, onUnmounted} from 'vue'
 import AMapLoader from '@amap/amap-jsapi-loader'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartDataFetch } from '@/hooks'
@@ -17,9 +16,11 @@ import djh from './images/djh.png'
 import online from './images/online.png'
 import lx1 from './images/lx1.png'
 import onLineImg from './images/marker/3.png'
+import listImg from './images/list.png'
 import { getDeviceActiveTime } from '@/api/external/common/index'
 import dayjs from 'dayjs'
-// import SearchBox from './components/SearchBox.vue'
+import DeviceLatestTable from './components/DeviceLatestTable.vue'
+import { getDeviceLatest } from '@/api/external/common'
 
 const props = defineProps({
   chartConfig: {
@@ -28,9 +29,7 @@ const props = defineProps({
   }
 })
 
-// const modelShow = ref(false)
-
-const showSearchBox = ref(false)
+const deviceLatestTableRef = ref<Nullable<InstanceType<typeof DeviceLatestTable>>>(null);
 
 const {
   amapKey,
@@ -88,7 +87,7 @@ const initMap = (newData: any) => {
           `amap://styles/${amapStyleKeyCustom.value !== '' ? amapStyleKeyCustom.value : amapStyleKey.value}`
         )
       }
-      mapIns.on('mouseout', () => {
+      mapIns.on('click', () => {
         mapIns.clearInfoWindow()
       })
     })
@@ -97,10 +96,14 @@ const initMap = (newData: any) => {
     })
 }
 
+
+const tbDeviceIdStr = ref('')
+
 //创建信息弹窗
 const createInfoWindow = async (extraInfo: dataExtraInfoType) => {
   try {
     const { name, alias, organizationDTO, deviceState, deviceProfile, deviceInfo, tbDeviceId } = extraInfo
+    tbDeviceIdStr.value = tbDeviceId
     if (tbDeviceId.startsWith('@')) return //假的模拟数据则终止
     const res = await getDeviceActiveTime(tbDeviceId) //查询设备最后离线时间
     let { lastUpdateTs } = res[0]
@@ -142,7 +145,10 @@ const createInfoWindow = async (extraInfo: dataExtraInfoType) => {
                </div>`
           }
         </div>
-        <div style="display:flex;flex-direction:column;justify-content:space-between;color:white;margin-top:2rem;gap:0.8rem;">
+        <div style="display:flex;justify-content:flex-end;cursor:pointer;" onclick="handleOpenDrawer()">
+          <img style="${deviceStateImg};position:relative;top:0.7rem" src="${listImg}"/>
+        </div>
+        <div style="display:flex;flex-direction:column;justify-content:space-between;color:white;margin-top:1rem;gap:0.8rem;">
           <div style="${textOverflow}">所属组织：${organizationDTO.name}</div>
           <div style="${textOverflow}">接入协议：${deviceProfile.transportType}</div>
           <div style="${textOverflow}">设备位置：${!deviceInfo.address ? '该设备暂无地理位置' : deviceInfo.address}</div>
@@ -156,37 +162,28 @@ const createInfoWindow = async (extraInfo: dataExtraInfoType) => {
   }
 }
 
-const handleMouseenter = () => (showSearchBox.value = true)
-
-const handleMouseleave = () => (showSearchBox.value = false)
-
-// const handleOpenSearchBox = () => (modelShow.value = true)
+const handleOpenDrawer = async () => {
+  deviceLatestTableRef.value?.openDrawer()
+  if (!tbDeviceIdStr.value) return
+  const resp = await getDeviceLatest(tbDeviceIdStr.value)
+  deviceLatestTableRef.value?.setValue(resp)
+}
 
-// const handleCloseDrawer = () => (modelShow.value = false)
+onMounted(() => {
+    (window as any).handleOpenDrawer = handleOpenDrawer;
+});
 
-// const handleSearchParams = async (searchPage: any, params: any) => {
-//   try {
-//     Object.keys(params).forEach(item => {
-//       if (!params[item]) Reflect.deleteProperty(params, item)
-//     })
-//     const { items } = await getDeviceList(searchPage, params)
-//     const values = filterDevice(items)
-//     if (!values) return
-//     setTimeout(() => {
-//       dataHandle(values)
-//     }, 1000)
-//   } finally {
-//     handleCloseDrawer()
-//   }
-// }
+onUnmounted(() => {
+    (window as any).handleOpenDrawer = null;
+});
 
 //地图鼠标hover
 const mapClick = (markerInstance: any, markerItem: dataJsonMarkersType) => {
   markerInstance.setExtData({
     extraInfo: markerItem.extraInfo
   })
-  // click
-  markerInstance.on('mouseover', async (e: any) => {
+  // mouseover
+  markerInstance.on('click', async (e: any) => {
     const { extraInfo } = e.target.getExtData()
     if (extraInfo.tbDeviceId.startsWith('@')) return //假的模拟数据则终止弹窗
     let infoWindow = new AMapIns.InfoWindow({
@@ -195,9 +192,9 @@ const mapClick = (markerInstance: any, markerItem: dataJsonMarkersType) => {
     })
     infoWindow.open(mapIns, e.target.getPosition())
   })
-  markerInstance.on('mouseout', () => {
-    mapIns.clearInfoWindow()
-  })
+  // markerInstance.on('click', () => {
+  //   mapIns.clearInfoWindow()
+  // })
 }
 
 const dataHandle = (newData: dataJsonType) => {