feat(src/packages): 优化高德地图组件部分代码

@@ -129,7 +129,7 @@ const loadList = async () => {
 }
 
 const handleSubmit = () => {
-  searchParams.deviceProfileIds = [searchParams.deviceProfileIds] as any
+  // searchParams.deviceProfileIds = [searchParams.deviceProfileIds] as any
   emit('searchParams', searchPage, searchParams)
   handleCancel()
 }

@@ -90,8 +90,9 @@ export const option = {
     amapZindex: 11,
     iconMarker: '1.png',
     mpBorderConfig: {
-      value: 'Border01',
+      value: 'Border01'
     },
+    bgColor: 'rgba(255, 255, 255, 0.1)',
     marker: {
       fillColor: '#E98984FF',
       fillOpacity: 0.5,

@@ -105,6 +105,11 @@
         />
       </setting-item>
     </setting-item-box>
+    <setting-item-box name="弹窗背景" v-if="optionData.mapOptions.mapMarkerType === MarkerEnum.MARKER">
+      <div style="width: 10vw">
+        <n-color-picker :modes="['rgb']" v-model:value="optionData.mapOptions.bgColor" size="small"></n-color-picker>
+      </div>
+    </setting-item-box>
   </collapse-item>
 </template>
 
@@ -326,6 +331,5 @@ onMounted(() => {
   iconMarkerValue.value = props.optionData.mapOptions.iconMarker?.split('/')?.at(-1) as string
   props.optionData.mapOptions.iconMarker = getMarkerImagePath(iconMarkerValue.value)
   mapSelectBorderValue.value = `${props.optionData.mapOptions.mpBorderConfig.value?.toLocaleLowerCase()}.png`
-  props.optionData.mapOptions.mpBorderConfig.value = getMarkerImagePath(mapSelectBorderValue.value)
 })
 </script>

 <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 v-show="showSearchBox" @click.stop="handleOpenSearchBox" class="search-box"></div>
+    <search-box :modelShow="modelShow" @searchParams="handleSearchParams" @closeDrawer="handleCloseDrawer"></search-box> -->
   </div>
 </template>
 
@@ -16,7 +16,7 @@ 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/1.png'
+import onLineImg from './images/marker/3.png'
 import { getDeviceActiveTime, getDeviceList } from '@/api/external/common/index'
 import dayjs from 'dayjs'
 import SearchBox from './components/SearchBox.vue'
@@ -32,7 +32,7 @@ const modelShow = ref(false)
 
 const showSearchBox = ref(false)
 
-let {
+const {
   amapKey,
   amapStyleKey,
   amapLon,
@@ -47,7 +47,8 @@ let {
   skyColor,
   marker,
   iconMarker,
-  mpBorderConfig
+  mpBorderConfig,
+  bgColor
 } = toRefs(props.chartConfig.option.mapOptions)
 
 //官方没有高德地图api的ts，所以类型全用的any
@@ -132,7 +133,7 @@ const createInfoWindow = async (extraInfo: dataExtraInfoType) => {
           </div>
           <div style="color:white;">所属组织：${organizationDTO.name}</div>
           <div style="margin-top:6px;color:white">接入协议：${deviceProfile.transportType}</div>
-          <div style="margin-top:6px;color:white">
+          <div style="margin-top:6px;color:white;width:15vw;text-overflow: ellipsis;overflow: hidden; word-break: break-all;white-space: nowrap;">
             设备位置：${!deviceInfo.address ? '该设备暂无地理位置' : deviceInfo.address}
           </div>
           <div style="margin-top:6px;color:white">
@@ -158,10 +159,15 @@ const handleCloseDrawer = () => (modelShow.value = false)
 
 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
-    dataHandle(values)
+    setTimeout(() => {
+      dataHandle(values)
+    }, 1000)
   } finally {
     handleCloseDrawer()
   }
@@ -198,10 +204,11 @@ const dataHandle = (newData: dataJsonType) => {
     // 记录新标记
     if (mapMarkerType.value === MarkerEnum.MARKER) {
       newData.markers.forEach((markerItem: dataJsonMarkersType) => {
+        const { deviceState } = markerItem.extraInfo
         const markerInstance = new AMapIns.Marker({
           position: [markerItem.position[0], markerItem.position[1]],
           offset: new AMapIns.Pixel(-13, -30),
-          icon: iconMarker.value || positionImg
+          icon: deviceState === 'ONLINE' ? onLineImg : iconMarker.value
         })
         // markers.push(markerInstance) 原作者这种方式添加，属于JS API 1.4.8版本的
         // markerInstance.setMap(mapIns)
@@ -255,7 +262,9 @@ watch(
 // 预览
 useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
   stopWatch()
-  dataHandle(newData)
+  setTimeout(() => {
+    dataHandle(newData)
+  }, 1000)
 })
 </script>
 
@@ -271,15 +280,9 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
 }
 .amap-info-content .go-border-box {
   position: absolute;
-  transform: scale(0.7);
+  transform: scale(0.68);
   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); */
+  background-color: v-bind(bgColor);
 }
 </style>
 <style lang="scss" scoped>

 <template>
   <div>
     <n-tree
+      ref="nTreeRef"
       :accordion="treeConfig.accordion"
       :checkable="treeConfig.checkable"
       :default-expand-all="treeConfig.defaultExpandAll"
@@ -11,17 +12,20 @@
       label-field="name"
       children-field="children"
       @update:selected-keys="onClick"
+      @update:checked-keys="onClick"
+      :checked-keys="checkedKeys"
     />
   </div>
 </template>
 
 <script setup lang="ts">
-import { PropType, toRefs } from 'vue'
+import { PropType, toRefs, ref } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useChartInteract } from '@/hooks/external/useChartSelectInteract.hook'
 import { InteractEventOn } from '@/enums/eventEnum'
 import { ComponentInteractParamsEnum } from './interact'
+import { NTree } from 'naive-ui'
 
 const props = defineProps({
   chartConfig: {
@@ -32,7 +36,16 @@ const props = defineProps({
 
 const { dataset, treeConfig } = toRefs(props.chartConfig.option)
 
+const nTreeRef = ref<null | InstanceType<typeof NTree>>(null)
+
+const checkedKeys = ref([])
+
 const onClick = (v: string[]) => {
+  // nTreeRef.value?.selectedKeys(v)
+  console.log(nTreeRef.value)
+  console.log(v)
+  // nTreeRef.value?.onUpdateCheckedKeys(v)
+  if (Array.isArray(v) && v.length == 0) return
   useChartInteract(
     props.chartConfig,
     useChartEditStore,