Merge branch 'ft' into 'main_dev'

feat(src/packages): 设备分布新增点击弹出抽屉展示设备最新属性数据值

See merge request yunteng/thingskit-view!138

@@ -16,7 +16,9 @@ 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/',
+  DEVICE_ATTR = '/device/attributes',
 }
 
 export const getDictItemByCode = (value: string) => {
@@ -127,3 +129,20 @@ 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
+})
+
+//获取产品属性
+export const getProfileAttrs = (params: { deviceProfileId: string; dataType?: string }) => {
+  const { deviceProfileId, dataType } = params;
+  return defHttp.get({
+    url: `${Api.DEVICE_ATTR}/${deviceProfileId}`,
+    params: { dataType },
+  });
+};
\ No newline at end of file

+<template>
+  <n-drawer display-directive="if" v-model:show="modelShow" :width="502" :placement="placement">
+    <n-drawer-content :title="drawerTitle" closable>
+      <n-space vertical>
+        <n-data-table size="small" :columns="dimensions" :data="source" :pagination="paginationReactive" />
+      </n-space>
+    </n-drawer-content>
+  </n-drawer>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive } from 'vue'
+import { NDataTable,NDrawer, NDrawerContent, NSpace } from 'naive-ui'
+import { dimensions } from '../config'
+import type { sourceInterface } from '../config'
+import dayjs from 'dayjs'
+import { Placement } from 'naive-ui/es/drawer/src/DrawerBodyWrapper'
+
+const placement = ref<Placement>('right')
+
+const modelShow =ref(false)
+
+const drawerTitle = ref('')
+
+const source =ref<sourceInterface[]>([])
+
+const paginationReactive = reactive({
+      page: 1,
+      pageSize: 10,
+      showSizePicker: true,
+      pageSizes: [10, 20],
+      onChange: (page: number) => {
+        paginationReactive.page = page
+      },
+      onUpdatePageSize: (pageSize: number) => {
+        paginationReactive.pageSize = pageSize
+        paginationReactive.page = 1
+      }
+    })
+
+const setValue = (value: Recordable, attrs: Recordable[]) => {
+  source.value = []
+  try {
+    if (!value) return
+    const deviceLatestList = 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 list = deviceLatestList?.reduce((acc:sourceInterface[],curr: sourceInterface)=>{
+      const byKeyFindName = attrs?.find(item => item.identifier === curr.key)?.name
+      curr.key = byKeyFindName
+      acc.push({...curr})
+      return [...acc]
+    },[])
+    source.value = list.filter(item=>Boolean(item.key))
+  }catch(e){
+    console.log(e)
+  }
+}
+
+const setDrawerTitle = (title:string) => drawerTitle.value = title
+
+const openDrawer = () => modelShow.value = true
+
+defineExpose({
+  setValue,
+  openDrawer,
+  setDrawerTitle
+})
+</script>
+
+<style lang="scss" scoped></style>

@@ -4,7 +4,7 @@ import { OverrideMapAmapConfig } from './index'
 import { chartInitConfig } from '@/settings/designSetting'
 import cloneDeep from 'lodash/cloneDeep'
 import dataJson from './data.json'
-import defaultImg from './images/marker/1.png'
+import defaultImg from '../../../../../../assets/external/marker/1.png'
 
 export type dataExtraInfoType = typeof dataJson.markers[number]['extraInfo'] //data.json下的extraInfo类型
 
@@ -26,6 +26,7 @@ export const filterDevice = (items: any) => {
         organizationDTO: curr.organizationDTO,
         deviceState: curr.deviceState,
         deviceProfile: curr.deviceProfile,
+        deviceProfileId: curr.deviceProfileId,
         deviceInfo: curr.deviceInfo
       }
     })
@@ -36,6 +37,34 @@ export const filterDevice = (items: any) => {
   }
 }
 
+export interface devicePartInfoInterface{
+  tbDeviceId:string
+  name:string
+  alias:string
+  deviceProfileId:string
+}
+
+export const dimensions= [
+  {
+    "title": "键",
+    "key": "key"
+  },
+  {
+    "title": "值",
+    "key": "value"
+  },
+  {
+    "title": "最后更新时间",
+    "key": "lastUpdateTime"
+  }
+]
+
+export  interface sourceInterface {
+  key: string
+  value: string
+  lastUpdateTime: string
+}
+
 export enum ThemeEnum {
   NORMAL = 'normal',
   DARK = 'dark',

@@ -254,7 +254,7 @@ const isHref = (url: string) => {
 
 // import.meta.glob 这个不能封装，必须是字符串，不能通过传值传进去
 const iconMarkerOptions = computed(() => {
-  const pathList = import.meta.glob('./images/marker/*')
+  const pathList = import.meta.glob('../../../../../../assets/external/marker/*')
   return Object.keys(pathList).map(item => {
     const imgName = item.split('/').at(-1)
     return {
@@ -266,7 +266,7 @@ const iconMarkerOptions = computed(() => {
 //
 
 const getMarkerImagePath = (name: string) => {
-  return isHref(name) ? name : new URL(`./images/marker/${name}`, import.meta.url).href
+  return isHref(name) ? name : new URL(`../../../../../../assets/external/marker/${name}`, import.meta.url).href
 }
 
 const renderOption = (option: SelectOption) => {
@@ -334,6 +334,7 @@ const selectMapBorderHandle = (value: string) => {
 onMounted(() => {
   iconMarkerValue.value = props.optionData.mapOptions.iconMarker?.split('/')?.at(-1) as string
   props.optionData.mapOptions.iconMarker = getMarkerImagePath(iconMarkerValue.value)
+  console.log(getMarkerImagePath(iconMarkerValue.value));
   mapSelectBorderValue.value = `${props.optionData.mapOptions.mpBorderConfig.value?.toLocaleLowerCase()}.png`
 })
 </script>

@@ -15,6 +15,7 @@
         "deviceProfile": {
           "transportType": "MQTT"
         },
+        "deviceProfileId":"",
         "deviceInfo": {
           "address": "四川省",
           "longitude": 103.856504,
@@ -37,6 +38,7 @@
         "deviceProfile": {
           "transportType": "TCP"
         },
+        "deviceProfileId":"",
         "deviceInfo": {
           "address": "四川省",
           "longitude": 104.095368,

 <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"></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, reactive} from 'vue'
 import AMapLoader from '@amap/amap-jsapi-loader'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartDataFetch } from '@/hooks'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { MarkerEnum, ThemeEnum, dataExtraInfoType, dataJsonType, dataJsonMarkersType } from './config'
+import { MarkerEnum, ThemeEnum, dataExtraInfoType, dataJsonType, dataJsonMarkersType, devicePartInfoInterface } from './config'
 import { isArray } from '@/utils'
 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 onLineImg from '../../../../../../assets/external/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, getProfileAttrs } 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,23 @@ const initMap = (newData: any) => {
     })
 }
 
+
+//携带设备的tbDeviceId和别名或者名称
+const devicePartInfo = reactive<devicePartInfoInterface>({
+  tbDeviceId:'',
+  name:'',
+  alias:'',
+  deviceProfileId:'',
+})
+
 //创建信息弹窗
 const createInfoWindow = async (extraInfo: dataExtraInfoType) => {
   try {
-    const { name, alias, organizationDTO, deviceState, deviceProfile, deviceInfo, tbDeviceId } = extraInfo
+    const { name, alias, organizationDTO, deviceState, deviceProfile, deviceInfo, tbDeviceId, deviceProfileId } = extraInfo
+    devicePartInfo.tbDeviceId = tbDeviceId
+    devicePartInfo.alias = alias
+    devicePartInfo.name = name
+    devicePartInfo.deviceProfileId = deviceProfileId
     if (tbDeviceId.startsWith('@')) return //假的模拟数据则终止
     const res = await getDeviceActiveTime(tbDeviceId) //查询设备最后离线时间
     let { lastUpdateTs } = res[0]
@@ -142,7 +154,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 +171,30 @@ 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()
+  deviceLatestTableRef.value?.setDrawerTitle(devicePartInfo.alias || devicePartInfo.name)
+  if (!devicePartInfo.tbDeviceId) return
+  const resp = await getDeviceLatest(devicePartInfo.tbDeviceId)
+  const respGetAttrs = await getProfileAttrs({deviceProfileId: devicePartInfo.deviceProfileId})
+  deviceLatestTableRef.value?.setValue(resp,respGetAttrs)
+}
 
-// 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 +203,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) => {