feat(src/packages): 图表高德地图新增右上角弹窗筛选

@@ -10,7 +10,9 @@ 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'
 }
 
 export const getDictItemByCode = (value: string) => {
@@ -77,8 +79,23 @@ 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
+  })

+<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>