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

@@ -17,7 +17,8 @@ enum Api {
   GEOJSONURL = '/map/geo_json/',
   DEVICE_URL = '/device',
   GET_ATTRBUTELIST = '/device/attributes/',
-  GET_DEVICE_LATEST = '/plugins/telemetry/DEVICE/'
+  GET_DEVICE_LATEST = '/plugins/telemetry/DEVICE/',
+  DEVICE_ATTR = '/device/attributes',
 }
 
 export const getDictItemByCode = (value: string) => {
@@ -135,4 +136,13 @@ defHttp.get({
   url: `${Api.GET_DEVICE_LATEST}${tbDeviceId}/values/timeseries`
 }, {
   joinPrefix: false
-})
\ No newline at end of file
+})
+
+//获取产品属性
+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="设备最新属性数据" closable>
+    <n-drawer-content :title="drawerTitle" closable>
       <n-space vertical>
-        <n-data-table size="small" :columns="dimensions" :data="source" :pagination="pagination" />
+        <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 } from 'vue'
+import { ref, reactive } from 'vue'
 import { NDataTable,NDrawer, NDrawerContent, NSpace } from 'naive-ui'
-import { dimensions, pagination } from '../config'
+import { dimensions } from '../config'
 import type { sourceInterface } from '../config'
 import dayjs from 'dayjs'
+import { Placement } from 'naive-ui/es/drawer/src/DrawerBodyWrapper'
 
-// defineProps({
-//   modelShow: Boolean
-// })
-
-const placement = ref('right')
+const placement = ref<Placement>('right')
 
 const modelShow =ref(false)
 
+const drawerTitle = ref('')
+
 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 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
+  openDrawer,
+  setDrawerTitle
 })
 </script>
 

@@ -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,13 @@ export const filterDevice = (items: any) => {
   }
 }
 
+export interface devicePartInfoInterface{
+  tbDeviceId:string
+  name:string
+  alias:string
+  deviceProfileId:string
+}
+
 export const dimensions= [
   {
     "title": "键",
@@ -57,11 +65,6 @@ export  interface sourceInterface {
   lastUpdateTime: string
 }
 
-export const pagination = {
-  page: 1,
-  pageSize: 10
-}
-
 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 class="chart-amap" ref="vChartRef">
-    <device-latest-table ref="deviceLatestTableRef" :tbDeviceId="tbDeviceIdStr"></device-latest-table>
+    <device-latest-table ref="deviceLatestTableRef"></device-latest-table>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, PropType, toRefs, watch, render, h, onMounted, onUnmounted} 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 DeviceLatestTable from './components/DeviceLatestTable.vue'
-import { getDeviceLatest } from '@/api/external/common'
+import { getDeviceLatest, getProfileAttrs } from '@/api/external/common'
 
 const props = defineProps({
   chartConfig: {
@@ -97,13 +97,22 @@ const initMap = (newData: any) => {
 }
 
 
-const tbDeviceIdStr = ref('')
+//携带设备的tbDeviceId和别名或者名称
+const devicePartInfo = reactive<devicePartInfoInterface>({
+  tbDeviceId:'',
+  name:'',
+  alias:'',
+  deviceProfileId:'',
+})
 
 //创建信息弹窗
 const createInfoWindow = async (extraInfo: dataExtraInfoType) => {
   try {
-    const { name, alias, organizationDTO, deviceState, deviceProfile, deviceInfo, tbDeviceId } = extraInfo
-    tbDeviceIdStr.value = tbDeviceId
+    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]
@@ -164,9 +173,11 @@ const createInfoWindow = async (extraInfo: dataExtraInfoType) => {
 
 const handleOpenDrawer = async () => {
   deviceLatestTableRef.value?.openDrawer()
-  if (!tbDeviceIdStr.value) return
-  const resp = await getDeviceLatest(tbDeviceIdStr.value)
-  deviceLatestTableRef.value?.setValue(resp)
+  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)
 }
 
 onMounted(() => {