Merge branch 'ft' into 'main_dev'

feat(src/packages): 图表里的地图 新增3d地图，支持凸起和标点

See merge request yunteng/thingskit-view!116

@@ -30,6 +30,7 @@
     "crypto-js": "^4.1.1",
     "dayjs": "^1.11.7",
     "dom-helpers": "^5.2.1",
+    "echarts-gl": "^2.0.9",
     "echarts-liquidfill": "^3.1.0",
     "echarts-stat": "^1.2.0",
     "echarts-wordcloud": "^2.0.0",

@@ -10,7 +10,10 @@ enum Api {
   CONFIGURATION = '/configuration/center',
   CONFIGURATION_SHARE = '/configuration/center/share/',
   BASEORIGINATION = '/organization/me/list/',
-  VIDEO = '/video/list'
+  VIDEO = '/video/list',
+  DEVICE_PROFILE = '/device_profile/me/list',
+  DEVICE = '/device',
+  VIDEOURL = '/video/url/'
 }
 
 export const getDictItemByCode = (value: string) => {
@@ -77,8 +80,29 @@ export const getOrganizationList = (params?: OrganizationListItem) =>
   })
 
 //获取视频列表
-export const getVideoList = (params?:object) =>
+export const getVideoList = (params?: object) =>
   defHttp.get({
     url: Api.VIDEO,
     params
   })
+
+//获取产品列表
+export const getProfileList = (params?: object) =>
+  defHttp.get({
+    url: Api.DEVICE_PROFILE,
+    params
+  })
+
+//获取设备列表
+export const getDeviceList = (params: any, data?: object) =>
+  defHttp.post({
+    url: Api.DEVICE,
+    params,
+    data
+  })
+
+//获取平台视频流播放地址
+export const getVideoUrl = (id: string) =>
+  defHttp.get({
+    url: `${Api.VIDEOURL}${id}`
+  })

+<script lang="ts" setup name="SelectCity">
+import { onMounted, reactive } from 'vue'
+import { getAreaList } from '@/api/external/common/index'
+import { areaEnum } from '../config'
+
+const props = defineProps({
+  drillingIn: {
+    type: Boolean,
+    default: false
+  },
+  optionData: {
+    type: Object
+  }
+})
+
+const emits = defineEmits(['submit'])
+
+const selectOptions = reactive({
+  provinceOptions: [],
+  cityOptions: [],
+  countryOptions: []
+})
+
+const selectValues = reactive({
+  provinceValue: 'china',
+  cityValue: null,
+  countyValue: null
+})
+
+const getAreaLists = async (level = areaEnum.PROVINCE, parentId = 1) => {
+  const resp = await getAreaList({
+    level,
+    parentId
+  })
+  if (!resp) return []
+  return resp.map((item: any) => ({ label: item.name, value: item.code }))
+}
+
+onMounted(async () => {
+  selectOptions.provinceOptions = await getAreaLists()
+  ;(selectOptions.provinceOptions as never as any).unshift({
+    label: '中国',
+    value: 'china'
+  })
+  onHandleSelectProvince(props.optionData?.mapRegion.saveSelect['provinceValue'])
+  for (let i in selectValues) Reflect.set(selectValues, i, props.optionData?.mapRegion.saveSelect[i])
+})
+
+const onHandleSelectProvince = async (value: number | string) => {
+  selectValues.cityValue = null
+  selectValues.countyValue = null
+  if (value === 'china') return
+  selectOptions.cityOptions = await getAreaLists(areaEnum.CITY, value as any)
+}
+
+const onHandleSelectCity = async (value: number) => {
+  selectValues.countyValue = null
+  selectOptions.countryOptions = await getAreaLists(areaEnum.COUNTY, value)
+}
+
+const onHandleSubmit = () => {
+  emits('submit', selectValues)
+}
+</script>
+
+<template>
+  <div class="select-city-content">
+    <n-select
+      @change="onHandleSelectProvince"
+      placeholder="请选择省份"
+      v-model:value="selectValues.provinceValue"
+      :options="selectOptions.provinceOptions"
+    />
+    <n-select
+      v-if="!props.drillingIn"
+      @change="onHandleSelectCity"
+      placeholder="请选择城市"
+      v-model:value="selectValues.cityValue"
+      :options="selectOptions.cityOptions"
+    />
+    <!-- 保留待用（下钻到区以下） -->
+    <!-- <n-select
+      v-if="!drillingIn"
+      placeholder="请选择区域"
+      v-model:value="selectValues.countyValue"
+      :options="selectOptions.countryOptions"
+    /> -->
+    <n-button type="primary" @click="onHandleSubmit">确定</n-button>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.select-city-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  gap: 30px;
+}
+</style>

+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
+import { AddThreeDimensionalMapConfig } from './index'
+import { chartInitConfig } from '@/settings/designSetting'
+import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
+import dataMaps from './data.json'
+
+//省市区枚举
+export const enum areaEnum {
+  PROVINCE = 'PROVINCE',
+  CITY = 'CITY',
+  COUNTY = 'COUNTY'
+}
+
+export const includes = []
+
+export const option = {
+  iconColor: 'black',
+  showIcon: false,
+  iconDistanceRight: 20,
+  iconDistanceTop: 20,
+  drillingIn: false,
+  dataset: dataMaps,
+  mapRegion: {
+    adcode: 'china',
+    showHainanIsLands: true,
+    saveSelect: {}
+  },
+  tooltip: {
+    show: true
+  },
+  geo3D: {
+    map: 'centerMap',
+    roam: true,
+    regionHeight: 0,
+    label: {
+      show: true,
+      textStyle: {
+        fontSize: 14,
+        color: 'blue',
+        borderWidth: 0,
+        borderColor: '#000'
+      }
+    },
+    emphasis: {
+      label: {
+        show: true,
+        textStyle: {
+          color: 'black',
+          fontSize: 32
+        }
+      },
+      itemStyle: {
+        color: '#fd9c5a'
+      }
+    }
+  },
+  series: [
+    {
+      type: 'map3D',
+      map: 'centerMap',
+      name: 'centerMap',
+      regionHeight: 3,
+      label: {
+        show: true,
+        color: 'yellow',
+        fontSize: 14
+      },
+      itemStyle: {
+        color: 'green',
+        borderWidth: 0.8,
+        borderColor: 'blue'
+      },
+      data: []
+    },
+    {
+      name: 'scatter3D',
+      type: 'scatter3D',
+      coordinateSystem: 'geo3D',
+      symbol: 'circle',
+      symbolSize: 20,
+      animation: true,
+      data: dataMaps
+    }
+  ]
+}
+export const MapDefaultConfig = { ...option }
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = AddThreeDimensionalMapConfig.key
+  public attr = { ...chartInitConfig, w: 750, h: 800, zIndex: -1 }
+  public chartConfig = cloneDeep(AddThreeDimensionalMapConfig)
+  public option = echartOptionProfixHandle(option, includes)
+}

+<template>
+  <!-- Echarts 全局设置 -->
+  <global-setting :optionData="optionData"></global-setting>
+  <CollapseItem name="地图" :expanded="true">
+    <!-- <SettingItemBox name="开启下钻">
+      <SettingItem name="">
+        <n-switch v-model:value="optionData.drillingIn" size="small"></n-switch>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="返回图标">
+      <SettingItem name="">
+        <n-switch v-model:value="optionData.drillingIn" size="small"></n-switch>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="图标颜色">
+      <SettingItem name="">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.iconColor"></n-color-picker>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="图标距离">
+      <SettingItem name="距右">
+        <n-input-number
+          v-model:value="optionData.iconDistanceRight"
+          :min="1"
+          size="small"
+          placeholder="请输入"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="距上">
+        <n-input-number
+          v-model:value="optionData.iconDistanceTop"
+          :min="1"
+          size="small"
+          placeholder="请输入"
+        ></n-input-number>
+      </SettingItem>
+    </SettingItemBox> -->
+    <SelectCity :optionData="optionData" :drillingIn="optionData.drillingIn" @submit="onHandleSelectValues" />
+    <SettingItemBox name="颜色">
+      <SettingItem name="区域颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[0].itemStyle.color"></n-color-picker>
+      </SettingItem>
+      <SettingItem name="边框颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="seriesList[0].itemStyle.borderColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="边框大小">
+        <n-input-number
+          v-model:value="seriesList[0].itemStyle.borderWidth"
+          :min="0"
+          size="small"
+          placeholder="请输入"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="厚度">
+        <n-input-number
+          v-model:value="seriesList[0].regionHeight"
+          :min="0"
+          size="small"
+          placeholder="请输入"
+        ></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="标题">
+      <SettingItem name="是否显示">
+        <n-switch v-model:value="seriesList[0].label.show" size="small"></n-switch>
+      </SettingItem>
+      <SettingItem name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[0].label.color"></n-color-picker>
+      </SettingItem>
+      <SettingItem name="大小">
+        <n-input-number
+          v-model:value="seriesList[0].label.fontSize"
+          :min="0"
+          size="small"
+          placeholder="请输入"
+        ></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="高亮">
+      <SettingItem name="标题显示">
+        <n-switch v-model:value="optionData.geo3D.emphasis.label.show" size="small"></n-switch>
+      </SettingItem>
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.geo3D.emphasis.label.textStyle.color"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="大小">
+        <n-input-number
+          v-model:value="optionData.geo3D.emphasis.label.textStyle.fontSize"
+          :min="0"
+          size="small"
+          placeholder="请输入"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="区块颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.geo3D.emphasis.itemStyle.color"
+        ></n-color-picker>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="标记">
+      <SettingItem name="大小">
+        <n-input-number
+          v-model:value="seriesList[1].symbolSize"
+          :min="0"
+          :step="10"
+          size="small"
+          placeholder="请输入"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="形状">
+        <n-select :options="symbolOption" v-model:value="seriesList[1].symbol"></n-select>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType, computed, ref } from 'vue'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
+import { GlobalSetting } from '@/components/Pages/ChartItemSetting'
+import SelectCity from './components/SelectCity.vue'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<GlobalThemeJsonType>,
+    required: true
+  }
+})
+
+const seriesList = computed(() => {
+  return props.optionData.series
+})
+
+const symbolOption = ref([
+  {
+    label: 'circle',
+    value: 'circle'
+  },
+  {
+    label: 'rect',
+    value: 'rect'
+  },
+  {
+    label: 'roundRect',
+    value: 'roundRect'
+  },
+  {
+    label: 'triangle',
+    value: 'triangle'
+  },
+  {
+    label: 'diamond',
+    value: 'diamond'
+  },
+  {
+    label: 'pin',
+    value: 'pin'
+  },
+  {
+    label: 'arrow',
+    value: 'arrow'
+  },
+  {
+    label: 'none',
+    value: 'none'
+  }
+])
+
+const onHandleSelectValues = (values: any) => {
+  const { cityValue, countyValue, provinceValue } = values
+  props.optionData.mapRegion.saveSelect = values
+  props.optionData.mapRegion.adcode = countyValue
+    ? countyValue
+    : cityValue
+    ? cityValue
+    : provinceValue === 'china'
+    ? 'china'
+    : provinceValue
+}
+</script>

+[
+  {
+    "name": "四川省",
+    "value": [104.10068024609373, 30.580525329665175, 20000],
+    "height": 5,
+    "itemStyle": {
+      "color": "pink",
+      "opacity": 1,
+      "borderWidth": 0.4,
+      "borderColor": "#5F9EA0"
+    }
+  },
+  {
+    "name": "湖南省",
+    "value": [111.73068512890623, 27.86754509366569, 20000],
+    "height": 4,
+    "itemStyle": {
+      "color": "blue",
+      "opacity": 1,
+      "borderWidth": 0.4,
+      "borderColor": "#5F9EA0"
+    }
+  },
+  {
+    "name": "吉林省",
+    "value": [126.45236481640623, 43.7943407914815, 20000],
+    "height": 5,
+    "itemStyle": {
+      "color": "yellow",
+      "opacity": 1,
+      "borderWidth": 0.4,
+      "borderColor": "#5F9EA0"
+    }
+  },
+  {
+    "name": "山东省",
+    "value": [118.67404450390623, 36.16387465872037, 20000],
+    "height": 6,
+    "itemStyle": {
+      "color": "orange",
+      "opacity": 1,
+      "borderWidth": 0.4,
+      "borderColor": "#5F9EA0"
+    }
+  }
+]

+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/Charts/index.d'
+import { useWidgetKey } from '@/packages/external/useWidgetKey'
+
+const { key, conKey, chartKey } = useWidgetKey('AddThreeDimensionalMap', true)
+
+export const AddThreeDimensionalMapConfig: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: '3d地图',
+  category: ChatCategoryEnum.MAP,
+  categoryName: ChatCategoryEnumName.MAP,
+  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.COMMON,
+  image: 'map3D.png'
+}

+<template>
+  <!-- 原生方式，没有使用vue-echarts -->
+  <div :style="`width:${w}px;height:${h}px;`" ref="map3DRef"></div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, nextTick, PropType, toRefs, watch } from 'vue'
+import * as echarts from 'echarts'
+import { registerMap } from 'echarts/core'
+import 'echarts-gl'
+import config from './config'
+import cityMap from '../OverrideMapBase/mapGeojson/china-main-city-map.json'
+
+type historyDataType = { name: string; code: string }
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<config>,
+    required: true
+  }
+})
+
+const iconStr = ref(
+  'path://M853.333333 245.333333H245.333333l93.866667-93.866666c12.8-12.8 12.8-34.133333 0-46.933334-12.8-12.8-34.133333-12.8-46.933333 0l-145.066667 145.066667c-12.8 12.8-12.8 34.133333 0 46.933333l145.066667 145.066667c6.4 6.4 14.933333 10.666667 23.466666 10.666667s17.066667-4.266667 23.466667-10.666667c12.8-12.8 12.8-34.133333 0-46.933333L256 311.466667h597.333333c6.4 0 10.666667 4.266667 10.666667 10.666666v426.666667c0 6.4-4.266667 10.666667-10.666667 10.666667H170.666667c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32h682.666666c40.533333 0 74.666667-34.133333 74.666667-74.666667V320c0-40.533333-34.133333-74.666667-74.666667-74.666667z'
+)
+
+const historyData = ref<historyDataType[]>([])
+
+const { w, h } = toRefs(props.chartConfig.attr)
+
+const map3DRef = ref()
+
+const chartInstance = ref()
+
+const saveSelectValue = ref('')
+
+const toolBoxOption = ref({
+  show: true,
+  right: 110,
+  top: 20,
+  feature: {
+    myFullButton: {
+      show: true,
+      title: '返回',
+      icon: iconStr.value,
+      iconStyle: {
+        color: ''
+      },
+      onclick: () => watchAdcode()
+    }
+  }
+})
+
+watch(
+  () => props.chartConfig.option,
+  newData => {
+    const { iconColor, drillingIn, iconDistanceRight, iconDistanceTop } = newData
+    toolBoxOption.value.feature.myFullButton.show = drillingIn
+    toolBoxOption.value.feature.myFullButton.iconStyle.color = iconColor
+    toolBoxOption.value.right = iconDistanceRight
+    toolBoxOption.value.top = iconDistanceTop
+  },
+  {
+    deep: true
+  }
+)
+
+props.chartConfig.option = {
+  ...props.chartConfig.option,
+  ...{ toolbox: toolBoxOption.value }
+}
+
+//地图点击返回
+const watchAdcode = () => {
+  if (props.chartConfig.option.drillingIn) {
+    const code = historyData.value.at(-2)?.code
+    props.chartConfig.option.mapRegion.adcode = code ? code : 'china'
+    historyData.value.pop()
+  }
+}
+
+//地图点击
+const handleMap3DClick = async (params: any) => {
+  if (props.chartConfig.option.drillingIn) {
+    const { name } = params
+    saveSelectValue.value = name
+    const findAdcode = (cityMap as any)[name]
+    if (!findAdcode) return
+    props.chartConfig.option.mapRegion.adcode = findAdcode
+    historyData.value.push({
+      name,
+      code: findAdcode
+    })
+  }
+}
+
+//动态获取geojson文件进行注册地图
+const getGeojson = (regionId: string) => {
+  try {
+    return new Promise<boolean>(resolve => {
+      import(`../OverrideMapBase/mapGeojson/${regionId}.json`).then(data => {
+        registerMap(regionId, { geoJSON: data.default as any, specialAreas: {} })
+        resolve(true)
+      })
+    })
+  } catch (e) {
+    console.log(e)
+  }
+}
+
+watch(
+  () => w.value,
+  (value: number) => {
+    chartInstance.value.resize({
+      width: value + 'px',
+      height: h.value + 'px'
+    })
+  }
+)
+
+const initMap = async () => {
+  chartInstance.value = echarts.init(map3DRef.value)
+  await nextTick()
+  await getGeojson(props.chartConfig.option.mapRegion.adcode)
+  await nextTick().then(() => {
+    handleSetOption(chartInstance.value, props.chartConfig.option)
+  })
+  chartInstance.value.on('click', (e: any) => {
+    console.log(`地图点击`, e)
+    // handleMap3DClick(e)
+  })
+}
+
+// 手动触发渲染
+const handleSetOption = (instance: any, option: any) => {
+  if (!instance) return
+  try {
+    instance.clear()
+    instance.setOption(option)
+    // eslint-disable-next-line no-empty
+  } finally {
+  }
+}
+
+onMounted(() => {
+  initMap()
+})
+
+//监听地图展示区域发生变化
+watch(
+  () => `${props.chartConfig.option.mapRegion.adcode}`,
+  async (newData: any) => {
+    try {
+      await getGeojson(newData)
+      props.chartConfig.option.geo3D.map = newData
+      props.chartConfig.option.series.forEach((item: any) => {
+        if (item.type === 'map3D') {
+          item.map = newData
+          item.data = props.chartConfig.option.dataset
+        }
+      })
+      handleSetOption(chartInstance.value, props.chartConfig.option)
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  {
+    immediate: true
+  }
+)
+
+// 监听地图右侧配置项变化
+watch(
+  props.chartConfig.option,
+  async newData => {
+    try {
+      handleSetOption(chartInstance.value, newData)
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  {
+    deep: true
+  }
+)
+
+// 监听地图dataset配置项变化
+watch(
+  () => props.chartConfig.option.dataset,
+  newData => {
+    try {
+      props.chartConfig.option.series.forEach((item: any) => {
+        if (item.type === 'map3D') {
+          item.data = newData
+        }
+      })
+      handleSetOption(chartInstance.value, props.chartConfig.option)
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  {
+    deep: true
+  }
+)
+</script>

+<template>
+  <n-drawer display-directive="if" :show="modelShow" :width="502" :placement="placement">
+    <n-drawer-content title="设备筛选">
+      <n-space vertical>
+        <span>组织</span>
+        <n-tree-select
+          placement="top-start"
+          label-field="name"
+          v-model:value="searchParams.organizationId"
+          key-field="id"
+          children-field="children"
+          :options="originationOption"
+        />
+        <span>产品</span>
+        <n-select v-model:value="searchParams.deviceProfileIds" :options="deviceProfileOption" />
+        <span>设备</span>
+        <n-input v-model:value="searchParams.name" type="text" placeholder="请输入设备名称" />
+        <span>设备状态</span>
+        <n-radio-group v-model:value="searchParams.deviceState" name="radiogroup">
+          <n-space>
+            <n-radio v-for="(item, index) in deviceStateGroup" :key="index" :value="item.value">
+              {{ item.label }}
+            </n-radio>
+          </n-space>
+        </n-radio-group>
+        <span>是否告警</span>
+        <n-radio-group v-model:value="searchParams.alarmStatus" name="radiogroup">
+          <n-space>
+            <n-radio v-for="(item, index) in alarmStatusGroup" :key="index" :value="item.value">
+              {{ item.label }}
+            </n-radio>
+          </n-space>
+        </n-radio-group>
+        <span>配置查询分页</span>
+        <n-space justify="space-between">
+          <n-input-number :min="1" v-model:value="searchPage.page" clearable />
+          <n-input-number :step="10" :min="10" v-model:value="searchPage.pageSize" clearable />
+        </n-space>
+      </n-space>
+      <template #footer>
+        <n-button @click="handleCancel" type="tertiary">取消</n-button>
+        <div style="visibility: hidden; width: 10px">占位</div>
+        <n-button @click="handleSubmit" type="success">确定</n-button>
+      </template>
+    </n-drawer-content>
+  </n-drawer>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, reactive } from 'vue'
+import { NTreeSelect } from 'naive-ui'
+import { getOrganizationList, getProfileList } from '@/api/external/common/index'
+
+interface searchParamsInterface {
+  organizationId: string | null
+  deviceProfileIds: null
+  name: string
+  deviceState: string | null
+  alarmStatus: number
+}
+
+defineProps({
+  modelShow: Boolean
+})
+
+const emit = defineEmits(['searchParams', 'closeDrawer'])
+
+const placement = ref('right')
+
+//设备状态
+const deviceStateGroup = [
+  {
+    label: '全部',
+    value: null
+  },
+  {
+    label: '待激活',
+    value: 'INACTIVE'
+  },
+  {
+    label: '在线',
+    value: 'ONLINE'
+  },
+  {
+    label: '离线',
+    value: 'OFFLINE'
+  }
+]
+
+//告警状态
+const alarmStatusGroup = [
+  {
+    label: '是',
+    value: 1
+  },
+  {
+    label: '否',
+    value: 0
+  }
+]
+
+const searchPage = reactive<{ page: number; pageSize: number }>({
+  page: 1,
+  pageSize: 10
+})
+
+const searchParams = reactive<searchParamsInterface>({
+  organizationId: null,
+  deviceProfileIds: null,
+  name: '',
+  deviceState: null,
+  alarmStatus: 0
+})
+
+const originationOption = ref([])
+
+const deviceProfileOption = ref([])
+
+const loadList = async () => {
+  const resOrganization = await getOrganizationList()
+  const resProfileList = await getProfileList()
+  Promise.all([resOrganization, resProfileList]).then(res => {
+    originationOption.value = res[0]
+    deviceProfileOption.value = res[1].map((item: { name: string; tbProfileId: string }) => ({
+      label: item.name,
+      value: item.tbProfileId
+    }))
+  })
+}
+
+const handleSubmit = () => {
+  searchParams.deviceProfileIds = [searchParams.deviceProfileIds] as any
+  emit('searchParams', searchPage, searchParams)
+  handleCancel()
+}
+
+const handleCancel = () => {
+  for (let i in searchParams) Reflect.set(searchParams, i, null)
+  searchParams.name = ''
+  searchParams.alarmStatus = 0
+  searchPage.page = 1
+  searchPage.pageSize = 10
+  emit('closeDrawer')
+}
+
+onMounted(() => {
+  loadList()
+})
+</script>
+
+<style lang="scss" scoped></style>

@@ -11,6 +11,30 @@ export type dataJsonType = typeof dataJson //data.json类型
 
 export type dataJsonMarkersType = typeof dataJson.markers[number] //data.json markers类型
 
+//标注数据格式
+export const fileterDevice = (items: any) => {
+  const values = items.reduce((acc: any, curr: any) => {
+    acc.push({
+      name: curr.alias,
+      value: 10,
+      position: [curr.deviceInfo.longitude, curr.deviceInfo.latitude],
+      extraInfo: {
+        tbDeviceId: curr.tbDeviceId,
+        name: curr.name,
+        alias: curr.alias,
+        organizationDTO: curr.organizationDTO,
+        deviceState: curr.deviceState,
+        deviceProfile: curr.deviceProfile,
+        deviceInfo: curr.deviceInfo
+      }
+    })
+    return [...acc]
+  }, [])
+  return {
+    markers: values
+  }
+}
+
 export enum ThemeEnum {
   NORMAL = 'normal',
   DARK = 'dark',

 <template>
-  <div ref="vChartRef"></div>
+  <div @mouseenter="handleMouseenter" @mouseleave="handleMouseleave" class="chart-amap" ref="vChartRef">
+    <div v-if="showSearchBox" @click.stop="handleOpenSearchBox" class="search-box"></div>
+    <search-box :modelShow="modelShow" @searchParams="handleSearchParams" @closeDrawer="handleCloseDrawer"></search-box>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -8,13 +11,14 @@ 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, fileterDevice } 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 { getDeviceActiveTime } from '@/api/external/common/index'
+import { getDeviceActiveTime, getDeviceList } from '@/api/external/common/index'
 import dayjs from 'dayjs'
+import SearchBox from './components/SearchBox.vue'
 
 const props = defineProps({
   chartConfig: {
@@ -23,6 +27,10 @@ const props = defineProps({
   }
 })
 
+const modelShow = ref(false)
+
+const showSearchBox = ref(false)
+
 let {
   amapKey,
   amapStyleKey,
@@ -126,6 +134,25 @@ const createInfoWindow = async (extraInfo: dataExtraInfoType) => {
   }
 }
 
+const handleMouseenter = () => (showSearchBox.value = true)
+
+const handleMouseleave = () => (showSearchBox.value = false)
+
+const handleOpenSearchBox = () => (modelShow.value = true)
+
+const handleCloseDrawer = () => (modelShow.value = false)
+
+const handleSearchParams = async (searchPage: any, params: any) => {
+  try {
+    const { items } = await getDeviceList(searchPage, params)
+    const values = fileterDevice(items)
+    if (!values) return
+    dataHandle(values)
+  } finally {
+    handleCloseDrawer()
+  }
+}
+
 //地图点击
 const mapClick = (markerInstance: any, markerItem: dataJsonMarkersType) => {
   markerInstance.setExtData({
@@ -178,7 +205,7 @@ const dataHandle = (newData: dataJsonType) => {
         // markers.push(markerInstance) //原作者这种方式添加，属于JS API 1.4.8版本的
         // markerInstance.setMap(mapIns)
         mapIns.add(markerInstance)
-        mapClick(markerInstance, markerItem)
+        mapClick(markerInstance, markerItem) // circle点击无效
       })
     }
   }
@@ -215,3 +242,20 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
   dataHandle(newData)
 })
 </script>
+
+<style lang="scss" scoped>
+.chart-amap {
+  position: relative;
+  .search-box {
+    cursor: pointer;
+    position: absolute;
+    right: -25px;
+    top: 15px;
+    z-index: 9999;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    background-color: rgba(255, 255, 255, 0.2);
+  }
+}
+</style>