Merge branch 'ft' into 'main_dev'

perf(src/packages): 优化高德地图标点弹窗和数据展示

See merge request yunteng/thingskit-view!133

@@ -235,6 +235,7 @@ const updateVChart = async (newData: SocketReceiveMessageType) => {
 }
 
 const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any, targetComponent: any) => {
+  props.chartConfig.option.queryCondition.timeRange=[targetComponent.requestParams.Params.startTs,targetComponent.requestParams.Params.endTs]
   //联动支持分组
   /**
    * 修复多个分组，然后下拉框联动，会影响另一个组件

@@ -12,7 +12,7 @@ export type dataJsonType = typeof dataJson //data.json类型
 export type dataJsonMarkersType = typeof dataJson.markers[number] //data.json markers类型
 
 //标注数据格式
-export const fileterDevice = (items: any) => {
+export const filterDevice = (items: any) => {
   const values = items.reduce((acc: any, curr: any) => {
     acc.push({
       name: curr.alias,
@@ -88,6 +88,10 @@ export const option = {
     amapLon: 104.108689,
     amapLat: 30.66176,
     amapZindex: 11,
+    typeMarker: '',
+    mpBorderConfig: {
+      value: 'Border01',
+    },
     marker: {
       fillColor: '#E98984FF',
       fillOpacity: 0.5,

@@ -71,19 +71,64 @@
       <setting-item name="类型">
         <n-select size="small" v-model:value="optionData.mapOptions.mapMarkerType" :options="MarkerOptions" />
       </setting-item>
-      <setting-item name="颜色">
+      <setting-item v-if="optionData.mapOptions.mapMarkerType === MarkerEnum.CIRCLE_MARKER" name="颜色">
         <n-color-picker v-model:value="optionData.mapOptions.marker.fillColor" size="small"></n-color-picker>
       </setting-item>
     </setting-item-box>
+    <setting-item-box name="图标选择" v-if="optionData.mapOptions.mapMarkerType === MarkerEnum.MARKER">
+      <setting-item name="图标选择">
+        <NSelect
+          size="small"
+          placeholder="请选择您要使用的图标"
+          style="width: 250px"
+          :value="typeMarkerValue"
+          :options="typeMarkerOptions"
+          :render-label="renderOption"
+          clearable
+          filterable
+          @update:value="selectHandle"
+        />
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="弹窗选择" v-if="optionData.mapOptions.mapMarkerType === MarkerEnum.MARKER">
+      <setting-item name="弹窗选择">
+        <!-- <NSelect
+          size="small"
+          placeholder="请选择您要使用的弹窗"
+          style="width: 250px"
+          :value="mapSelectBorderValue"
+          :options="mapSelectBorderOption.option"
+          @update:value="mapSelectBorderHandle"
+          clearable
+          filterable
+        /> -->
+        <NSelect
+          size="small"
+          placeholder="请选择您要使用的弹窗"
+          style="width: 250px"
+          :value="mapSelectBorderValue"
+          :options="mapBorderOptions"
+          :render-label="renderMapBorderOption"
+          clearable
+          filterable
+          @update:value="selectMapBorderHandle"
+        />
+      </setting-item>
+    </setting-item-box>
   </collapse-item>
 </template>
 
 <script setup lang="ts">
-import { PropType } from 'vue'
+import { PropType, ref, computed, h, onMounted, reactive } from 'vue'
 import { option, MarkerEnum, ThemeEnum, LangEnum, ViewModeEnum, FeaturesEnum } from './config'
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { NEllipsis, NImage, NSelect, NSpace, SelectOption } from 'naive-ui'
 
-defineProps({
+interface BaseSelectBorderIF extends SelectOption {
+  config?: string
+}
+
+const props = defineProps({
   optionData: {
     type: Object as PropType<typeof option>,
     required: true
@@ -187,10 +232,10 @@ const featuresOptions = [
 ]
 
 const MarkerOptions = [
-  {
-    value: MarkerEnum.CIRCLE_MARKER,
-    label: '圆形标点'
-  },
+  // {
+  //   value: MarkerEnum.CIRCLE_MARKER,
+  //   label: '圆形标点'
+  // },
   {
     value: MarkerEnum.MARKER,
     label: '定位标点'
@@ -200,4 +245,101 @@ const MarkerOptions = [
     label: '隐藏标点'
   }
 ]
+
+onMounted(() => {
+  props.optionData.mapOptions.typeMarker = getMarkerImagePath(props.optionData.mapOptions.typeMarker || 'position1.png')
+  typeMarkerValue.value = props.optionData.mapOptions.typeMarker || 'position1.png'
+  mapSelectBorderValue.value =
+    `${props.optionData.mapOptions.mpBorderConfig.value.toLocaleLowerCase()}.png` || 'border01.png'
+})
+
+const typeMarkerValue = ref<string | null>('position1.png')
+
+const mapSelectBorderValue = ref<string | null>('border01.png')
+
+const isHref = (url: string) => {
+  try {
+    new URL(url)
+    return true
+  } catch (error) {
+    return false
+  }
+}
+
+// import.meta.glob 这个不能封装，必须是字符串，不能通过传值传进去
+const typeMarkerOptions = computed(() => {
+  const pathList = import.meta.glob('./images/marker/*')
+  return Object.keys(pathList).map(item => {
+    const imgName = item.split('/').at(-1)
+    return {
+      label: imgName,
+      value: imgName
+    } as SelectOption
+  })
+})
+//
+
+const getMarkerImagePath = (name: string) => {
+  return isHref(name) ? name : new URL(`./images/marker/${name}`, import.meta.url).href
+}
+
+const renderOption = (option: SelectOption) => {
+  return h(NSpace, { justify: 'space-between', style: 'padding: 0 15px; height: 28px; line-height: 28px;' }, () => [
+    h(NImage, {
+      width: 25,
+      src: getMarkerImagePath(option.value as string),
+      previewDisabled: true,
+      style: { height: '25px' }
+    } as Recordable),
+    h(NEllipsis, null, () => option.label)
+  ])
+}
+
+const selectHandle = (value: string) => {
+  typeMarkerValue.value = value
+  props.optionData.mapOptions.typeMarker = getMarkerImagePath(value)
+}
+
+const needBorder = ['border01.png', 'border02.png', 'border03.png', 'border05.png', 'border07.png']
+
+// import.meta.glob 这个不能封装，必须是字符串，不能通过传值传进去
+const mapBorderOptions = computed(() => {
+  const pathList = import.meta.glob('../../../../../../assets/images/chart/decorates/*')
+  return Object.keys(pathList)
+    .map(item => {
+      const imgName = item.split('/').at(-1) as string
+      if (needBorder.includes(imgName)) {
+        return {
+          label: imgName,
+          value: imgName
+        } as SelectOption
+      }
+    })
+    .filter(Boolean) as SelectOption[]
+})
+//
+
+const getMapBorderImagePath = (name: string) => {
+  return isHref(name) ? name : new URL(`../../../../../../assets/images/chart/decorates/${name}`, import.meta.url).href
+}
+
+const renderMapBorderOption = (option: SelectOption) => {
+  return h(NSpace, { justify: 'space-between', style: 'padding: 0 15px; height: 28px; line-height: 28px;' }, () => [
+    h(NImage, {
+      width: 25,
+      src: getMapBorderImagePath(option.value as string),
+      previewDisabled: true,
+      style: { height: '25px' }
+    } as Recordable),
+    h(NEllipsis, null, () => option.label)
+  ])
+}
+
+const selectMapBorderHandle = (value: string) => {
+  mapSelectBorderValue.value = value
+  const toLowerValue = value.toLocaleLowerCase()
+  ;(props.optionData.mapOptions.mpBorderConfig as BaseSelectBorderIF) = {
+    value: toLowerValue[0]?.toUpperCase() + toLowerValue?.substr(1)?.split('.')[0]
+  }
+}
 </script>

 {
   "markers": [
     {
-      "name": "模拟11111111111",
+      "name": "模拟数据1",
       "value": 20,
       "position": [103.856504, 30.687278],
       "extraInfo": {
         "tbDeviceId": "@xxxxxxxxxxx",
-        "name": "模拟11111111111",
-        "alias": "模拟11111111111",
+        "name": "模拟数据1",
+        "alias": "模拟数据1",
         "organizationDTO": {
-          "name": "模拟11111111111"
+          "name": "模拟数据1"
         },
         "deviceState": "INACTIVE",
         "deviceProfile": {
@@ -23,15 +23,15 @@
       }
     },
     {
-      "name": "模拟22222222222",
+      "name": "模拟数据2",
       "value": 30,
       "position": [104.095368, 30.716787],
       "extraInfo": {
         "tbDeviceId": "@xxxxxxxxxxxxxxx",
-        "name": "模拟22222222222",
-        "alias": "模拟22222222222",
+        "name": "模拟数据2",
+        "alias": "模拟数据2",
         "organizationDTO": {
-          "name": "模拟22222222222"
+          "name": "模拟数据2"
         },
         "deviceState": "INACTIVE",
         "deviceProfile": {

@@ -6,16 +6,17 @@
 </template>
 
 <script setup lang="ts">
-import { ref, PropType, toRefs, watch } from 'vue'
+import { ref, PropType, toRefs, watch, render, h } 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, fileterDevice } from './config'
+import { MarkerEnum, ThemeEnum, dataExtraInfoType, dataJsonType, dataJsonMarkersType, filterDevice } 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 positionImg from './images/marker/position1.png'
 import { getDeviceActiveTime, getDeviceList } from '@/api/external/common/index'
 import dayjs from 'dayjs'
 import SearchBox from './components/SearchBox.vue'
@@ -44,7 +45,9 @@ let {
   viewMode,
   pitch,
   skyColor,
-  marker
+  marker,
+  typeMarker,
+  mpBorderConfig
 } = toRefs(props.chartConfig.option.mapOptions)
 
 //官方没有高德地图api的ts，所以类型全用的any
@@ -84,8 +87,7 @@ const initMap = (newData: any) => {
           `amap://styles/${amapStyleKeyCustom.value !== '' ? amapStyleKeyCustom.value : amapStyleKey.value}`
         )
       }
-      //点击地图任意地方关闭infoWindow窗体
-      mapIns.on('click', () => {
+      mapIns.on('mouseout', () => {
         mapIns.clearInfoWindow()
       })
     })
@@ -102,26 +104,38 @@ const createInfoWindow = async (extraInfo: dataExtraInfoType) => {
     const res = await getDeviceActiveTime(tbDeviceId) //查询设备最后离线时间
     let { lastUpdateTs } = res[0]
     const lastUpdateFormatTs = dayjs(lastUpdateTs).format('YYYY-MM-DD HH:mm:ss')
+    //render方式渲染小组件里的边框组件
+    const BorderInstance = await import(`../../../../Decorates/Borders/${mpBorderConfig.value.value}/index.vue`)
+    const config = await import(`../../../../Decorates/Borders/${mpBorderConfig.value.value}/config.ts`)
+    const BorderConfigInstance = new config.default()
+    const id = Date.now().toString()
+    setTimeout(() => {
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      render(h(BorderInstance.default, { chartConfig: BorderConfigInstance }), document.getElementById(id)!)
+    }, 100)
+    //
     return `
-        <div style="width:15vw;height:18vh;background-color:white;">
-         <div style="margin:0px 10px">
+        <div id="${id}" style="width:25vw;height:29vh;position:relative;top:30px;">
+         <div style="position: absolute;top: 52px;left: 105px;">
           <div style="display:flex;justify-content:space-between; margin:20px 0px;">
-            <div style="font-size:16px;font-weight:bold">${alias || name}</div>
+            <div style="width:12vw;text-overflow: ellipsis;overflow: hidden; word-break: break-all;white-space: nowrap;font-size:18px;font-weight:bold;color:white">${
+              alias || name
+            }</div>
             ${
               deviceState === 'INACTIVE'
-                ? `<div style="display:flex;align-items:center;"><img style="width:15px;height:15px" src="${djh}" class="mr-1">待激活</div>`
+                ? `<div style="display:flex;align-items:center;color:#999999"><img style="width:15px;height:15px;margin-right:5px" src="${djh}">待激活</div>`
                 : deviceState === 'ONLINE'
-                ? `<div style="display:flex;align-items:center; ">
-                <img style="width:15px;height:15px"  src="${online}"  class="mr-1">在线</div>`
-                : `<div style="display:flex;align-items:center;"><img style="width:15px;height:15px" src="${lx1}" class="mr-1">离线</div>`
+                ? `<div style="display:flex;align-items:center;color:green">
+                <img style="width:15px;height:15px;margin-right:5px"  src="${online}"  class="mr-1">在线</div>`
+                : `<div style="display:flex;align-items:center;color:#F5222D"><img style="width:15px;height:15px;margin-right:5px" src="${lx1}">离线</div>`
             }
           </div>
-          <div>所属组织：${organizationDTO.name}</div>
-          <div style="margin-top:6px;">接入协议：${deviceProfile.transportType}</div>
-          <div style="margin-top:6px;">
+          <div style="color:white;">所属组织：${organizationDTO.name}</div>
+          <div style="margin-top:6px;color:white">接入协议：${deviceProfile.transportType}</div>
+          <div style="margin-top:6px;color:white">
             设备位置：${!deviceInfo.address ? '该设备暂无地理位置' : deviceInfo.address}
           </div>
-          <div style="margin-top:6px;">
+          <div style="margin-top:6px;color:white">
             ${
               deviceState === 'ONLINE' ? '在线' : deviceState === 'INACTIVE' ? '创建' : '离线'
             }时间：${lastUpdateFormatTs}
@@ -145,7 +159,7 @@ const handleCloseDrawer = () => (modelShow.value = false)
 const handleSearchParams = async (searchPage: any, params: any) => {
   try {
     const { items } = await getDeviceList(searchPage, params)
-    const values = fileterDevice(items)
+    const values = filterDevice(items)
     if (!values) return
     dataHandle(values)
   } finally {
@@ -153,22 +167,23 @@ const handleSearchParams = async (searchPage: any, params: any) => {
   }
 }
 
-//地图点击
+//地图鼠标hover
 const mapClick = (markerInstance: any, markerItem: dataJsonMarkersType) => {
   markerInstance.setExtData({
     extraInfo: markerItem.extraInfo
   })
-  markerInstance.setLabel({
-    content: markerItem.extraInfo.alias || markerItem.extraInfo.name
-  })
-  markerInstance.on('click', async (e: any) => {
+  markerInstance.on('mouseover', async (e: any) => {
     const { extraInfo } = e.target.getExtData()
+    if (extraInfo.tbDeviceId.startsWith('@')) return //假的模拟数据则终止弹窗
     let infoWindow = new AMapIns.InfoWindow({
       content: await createInfoWindow(extraInfo),
-      offset: new AMapIns.Pixel(0, -50)
+      offset: new AMapIns.Pixel(3, -30)
     })
     infoWindow.open(mapIns, e.target.getPosition())
   })
+  markerInstance.on('mouseout', () => {
+    mapIns.clearInfoWindow()
+  })
 }
 
 const dataHandle = (newData: dataJsonType) => {
@@ -185,7 +200,8 @@ const dataHandle = (newData: dataJsonType) => {
       newData.markers.forEach((markerItem: dataJsonMarkersType) => {
         const markerInstance = new AMapIns.Marker({
           position: [markerItem.position[0], markerItem.position[1]],
-          offset: new AMapIns.Pixel(-13, -30)
+          offset: new AMapIns.Pixel(-13, -30),
+          icon: typeMarker.value || positionImg
         })
         // markers.push(markerInstance) 原作者这种方式添加，属于JS API 1.4.8版本的
         // markerInstance.setMap(mapIns)
@@ -243,6 +259,29 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
 })
 </script>
 
+<style>
+.amap-info-outer {
+  background-color: rgba(0, 0, 0, 0) !important;
+}
+.amap-info-close {
+  display: none !important;
+}
+.amap-info-content {
+  overflow: hidden !important;
+}
+.amap-info-content .go-border-box {
+  position: absolute;
+  transform: scale(0.7);
+  top: -10px;
+  /* opacity: 0,8; */
+  /* background-color: rgba(0, 0, 0, 0.1); */
+  background-color:rgba(255,255,255,0.1)
+}
+.amap-info-content .go-border-box svg {
+  /* background-color: rgba(0, 0, 0, 0.1); */
+  /* background-color: rgba(255, 255, 255, 0.8); */
+}
+</style>
 <style lang="scss" scoped>
 .chart-amap {
   position: relative;

@@ -82,7 +82,9 @@ import { fetchConfigComponent, fetchChartComponent } from '@/packages/index'
 import { componentInstall, loadingStart, loadingFinish, loadingError } from '@/utils'
 import { ChartGlobImage } from '@/components/Pages/ChartGlobImage'
 import { Icon } from '@iconify/vue'
-
+// THINGS_KIT 修改搜索未过滤隐藏的组件
+import { hideAsideComponentsObj } from '../../external/components/ChartsOptionContent/config'
+//
 const props = defineProps({
   menuOptions: {
     type: Array,
@@ -136,6 +138,9 @@ const searchHandle = (key: string | null) => {
   searchRes.value = List.filter(
     (e: ConfigType) => !e.disabled && (!key || e.title.toLowerCase().includes(key.toLowerCase()))
   )
+  // THINGS_KIT 修改搜索未过滤隐藏的组件
+  searchRes.value = searchRes.value.filter((e: ConfigType) =>!hideAsideComponentsObj['all'].includes(e.chartKey))
+  //
   setTimeout(() => {
     loading.value = undefined
   }, 500)