v1.1.2_Release

@@ -8,7 +8,7 @@ VITE_GLOB_API_URL = /api
 VITE_GLOB_API_URL_PREFIX = /yt
 
 # 内容安全协议
-VITE_GLOB_CONTENT_SECURITY_POLICY = true
+VITE_GLOB_CONTENT_SECURITY_POLICY = false
 
 # 公共路径
 VITE_GLOB_PUBLIC_PATH = /large-designer/

@@ -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",

 import { defHttp } from '@/utils/external/http/axios'
-import { DictItem, UploadResponse } from './model'
+import { DictItem, OrganizationListItem, UploadResponse } from './model'
 
 enum Api {
   GET_DICT = '/dict_item',
@@ -8,7 +8,15 @@ enum Api {
   AREALIST = '/area/list',
   PLATFORM = '/platform/get',
   CONFIGURATION = '/configuration/center',
-  CONFIGURATION_SHARE = '/configuration/center/share/'
+  CONFIGURATION_SHARE = '/configuration/center/share/',
+  BASEORIGINATION = '/organization/me/list/',
+  VIDEO = '/video/list',
+  DEVICE_PROFILE = '/device_profile/me/list',
+  DEVICE = '/device',
+  VIDEOURL = '/video/url/',
+  GEOJSONURL = '/map/geo_json/',
+  DEVICE_URL = '/device',
+  GET_ATTRBUTELIST = '/device/attributes/'
 }
 
 export const getDictItemByCode = (value: string) => {
@@ -46,10 +54,76 @@ export const getPlatformInfo = () => defHttp.get({ url: Api.PLATFORM })
 export const getConfigurationList = (params: object) => {
   return defHttp.get({ url: `${Api.CONFIGURATION}`, params })
 }
+
 //组态设置是否公开或私有
-export const setConfigurationIsShare = (params: string,isShare:boolean,data:object) => {
+export const setConfigurationIsShare = (params: string, isShare: boolean, data: object) => {
   return defHttp.post({
     url: `${Api.CONFIGURATION_SHARE}${params}?isShare=${isShare}`,
     data
   })
 }
+
+// 获取设备状态，在线 or 离线时间
+export const getDeviceActiveTime = (entityId: string) => {
+  return defHttp.get(
+    {
+      url: `/plugins/telemetry/DEVICE/${entityId}/values/attributes?keys=active`
+    },
+    {
+      joinPrefix: false
+    }
+  )
+}
+
+//获取组织列表
+export const getOrganizationList = (params?: OrganizationListItem) =>
+  defHttp.get({
+    url: Api.BASEORIGINATION,
+    params
+  })
+
+//获取视频列表
+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}`
+  })
+
+//获取行政区域
+export const getGeoJsonMap = (code: number, level: string) =>
+  defHttp.get({
+    url: `${Api.GEOJSONURL}${code}/${level}`
+  })
+
+// 获取设备详情
+export const getDeviceDetail = (id: string) =>
+  defHttp.get({
+    url: Api.DEVICE_URL + `/${id}`
+  })
+
+// 获取产品属性
+export const getAttribute = (deviceProfileId: string) =>
+  defHttp.get({
+    url: `${Api.GET_ATTRBUTELIST}${deviceProfileId}`
+  })

@@ -16,3 +16,11 @@ export interface UploadResponse {
   size: number
   fileStaticUri: string
 }
+
+
+export interface OrganizationListItem {
+  id: string;
+  name: string;
+  parentId?: string;
+  remark: string;
+}
\ No newline at end of file

@@ -91,7 +91,7 @@ export const saveDataViewList = (data: object) => {
  */
 export const uploadFile = async (file: FormData, mode: ErrorMessageMode = 'modal') => {
   return defHttp.post(
-    { url: Api.FILE_UPLOAD, params: file },
+    { url: Api.FILE_UPLOAD, params: file},
     {
       errorMessageMode: mode
     }

@@ -16,7 +16,7 @@ import { PaginationResult } from '/#/external/axios';
     DEVICE_ATTR_LIST = '/device/attributes',
     GET_PUBLIC_INTERFACE_ALL = '/data_view_interface/find/can_use_interfaces',
     //ft
-  GET_PUBLIC_INTERFACE_DETAIL = '/data_view_interface/get_interface_details'
+    GET_PUBLIC_INTERFACE_DETAIL = '/data_view_interface/get_interface_details'
 }
 
 export const getPublicInterface = async (params: Record<'page' | 'pageSize', number>) => {
@@ -26,9 +26,10 @@ export const getPublicInterface = async (params: Record<'page' | 'pageSize', num
   })
 }
 
-export const getOrgList = async () => {
+export const getOrgList = async (params:object) => {
   return defHttp.get({
-    url: Api.ORG_LISt
+    url: Api.ORG_LISt,
+    params
   })
 }
 

@@ -75,7 +75,7 @@ export const useChartDataFetch = (
               echartsUpdateHandle(value)
               // 更新回调函数
               if (updateCallback) {
-                updateCallback(value)
+                updateCallback(value, targetComponent.request)//为了处理设备最新数据轮播列表，这里传过去当前组件的信息
               }
             } catch (error) {
               console.error(error)
@@ -117,8 +117,10 @@ export const useChartDataFetch = (
      * 如果是分组并且绑定了ws
      */
     chartEditStore.componentList.forEach((item:CreateComponentType | CreateComponentGroupType)=>{
-      if(item.request.requestUrl?.includes('ws')){
-        initial(item, useChartEditStore, updateCallback)
+      if(item.isGroup){
+        if(item.request.requestUrl?.includes('ws')){
+          initial(item, useChartEditStore, updateCallback)
+        }
       }
     })
     //

 import { RequestContentTypeEnum } from "@/enums/external/httpEnum";
 import { CreateComponentType } from "@/packages/index.d";
-import { useSocketStore} from "@/store/external/modules/socketStore";
-import { SocketReceiveMessageType,SocketSendMessageType } from "@/store/external/modules/socketStore.d";
+import { useSocketStore } from "@/store/external/modules/socketStore";
+import { SocketReceiveMessageType, SocketSendMessageType } from "@/store/external/modules/socketStore.d";
 import { useChartEditStore } from "@/store/modules/chartEditStore/chartEditStore";
 import { getJwtToken, getShareJwtToken } from "@/utils/external/auth";
 import { useWebSocket, WebSocketResult } from "@vueuse/core";
-import {onMounted, ref, unref} from "vue";
+import { onMounted, ref, unref } from "vue";
 import { ExtraRequestConfigType } from "@/store/external/modules/extraComponentInfo.d";
 import { isShareMode } from "@/views/share/hook";
 
@@ -16,14 +16,14 @@ interface SocketConnectionPoolType {
   url: string
 }
 
-interface SaveHistoryWsMessage{
+interface SaveHistoryWsMessage {
   id: string
   message: SocketSendMessageType
 }
 
 const socketConnectionPool: SocketConnectionPoolType[] = []
 
-const saveHistoryWsMessage=ref([] as SaveHistoryWsMessage[])
+const saveHistoryWsMessage = ref([] as SaveHistoryWsMessage[])
 
 const parse = (value: string) => {
   try {
@@ -48,7 +48,7 @@ const getSocketInstance = (request: ExtraRequestConfigType) => {
   if (~index) {
     return socketConnectionPool[index].ws
   }
-  const token = isShareMode() ? getShareJwtToken() :  getJwtToken()
+  const token = isShareMode() ? getShareJwtToken() : getJwtToken()
   const socketUrl = `${getOriginUrl(requestOriginUrl || '')}${requestUrl}?token=${token}`
 
   const instance = useWebSocket(socketUrl, {
@@ -112,18 +112,18 @@ export const useChartDataSocket = () => {
    * @param targetComponent
    */
   //删除组件 发送断开消息
-  const disconnectWs=(targetComponent:CreateComponentType)=>{
-    try{
-      saveHistoryWsMessage.value.forEach((item)=>{
-      if(item.id===targetComponent.id){
+  const disconnectWs = (targetComponent: CreateComponentType) => {
+    try {
+      saveHistoryWsMessage.value.forEach((item) => {
+        if (item.id === targetComponent.id) {
           const { request } = unref(targetComponent)
-          if((request.requestContentType as RequestContentTypeEnum) !== RequestContentTypeEnum.WEB_SOCKET)return
+          if ((request.requestContentType as RequestContentTypeEnum) !== RequestContentTypeEnum.WEB_SOCKET) return
           const { send } = getSocketInstance(request)
-          item.message.tsSubCmds[0].unsubscribe=true
+          item.message.tsSubCmds[0].unsubscribe = true
           send(JSON.stringify(item.message))
-      }
-    })
-    }catch (e) {
+        }
+      })
+    } catch (e) {
       console.log(`
       错误位置：src/hooks/external/useChartDataSocket.ts
       错误原因：${e}

+/**
+ * 特殊处理单设备-属性-历史数据查询组件联动
+ */
+import { toRefs } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+
+// 获取类型
+type ChartEditStoreType = typeof useChartEditStore
+
+// Params 参数修改触发 api 更新图表请求
+export const useChartInteract = (
+  chartConfig: CreateComponentType,
+  useChartEditStore: ChartEditStoreType,
+  param: { [T: string]: any }
+) => {
+  const chartEditStore = useChartEditStore()
+  const { id } = chartConfig
+  const index = chartEditStore.fetchTargetIndex(id)
+  const { data } = param
+  if (index === -1) return
+  chartEditStore.getComponentList.forEach(targetItem => {
+    if (targetItem.id === id) {
+      const { Params } = toRefs(targetItem.request.requestParams)
+      if (Reflect.get(param.data, 'agg') !== 'NONE') {
+        Reflect.deleteProperty(Params.value, 'limit')
+      }
+      Object.keys(data).forEach((item: string) => {
+        Params.value[item] = data[item]
+      })
+    }
+  })
+}

@@ -45,16 +45,25 @@ export const useChartInteract = (
         })
       } else {
         if (targetItem.id === item.interactComponentId) {
-            const { Params, Header } = toRefs(targetItem.request.requestParams)
-            Object.keys(item.interactFn).forEach(key => {
-              if (Params.value[key]) {
-                Params.value[key] = param[item.interactFn[key]]
+          const { Params, Header } = toRefs(targetItem.request.requestParams)
+          //特殊处理 只针对两个下拉选择器，一个是产品下拉，一个是设备下拉，选择了产品，设备列表选择值清空
+          if (targetItem.chartConfig.title.includes('设备列表下拉选择器')) {
+            if (window.location.href.includes('preview')) {
+              if (window.sessionStorage.getItem('deviceProfileSelectStatus') === 'selected') {
+                targetItem.option.selectValue = "'"
               }
-              if (Header.value[key]) {
-                Header.value[key] = param[item.interactFn[key]]
-              }
-            })
+            }
           }
+          //
+          Object.keys(item.interactFn).forEach(key => {
+            if (Params.value[key]) {
+              Params.value[key] = param[item.interactFn[key]]
+            }
+            if (Header.value[key]) {
+              Header.value[key] = param[item.interactFn[key]]
+            }
+          })
+        }
       }
       //
     })

@@ -99,7 +99,7 @@ export const originUseChartDataFetch = (
             fetchFn()
           },
           {
-            immediate: false,
+            immediate: true,
             deep: true
           }
         )

@@ -48,10 +48,10 @@ export const useLifeHandler = (chartConfig: CreateComponentType | CreateComponen
   try {
     return new Function(`
       return (
-        async function(mouseEvent){
+        async function(components,mouseEvent){
           ${fnStr}
         }
-      )`)()
+      )`)().bind(undefined,components)
   } catch (error) {
     console.error(error)
   }

@@ -19,8 +19,9 @@
 import { LayoutHeader } from '@/layout/components/LayoutHeader'
 /**
  * THINGS_KIT 升级版本这里有冲突
- * 源文件 '@/components/GoUserInfo'
- * 修改后 '@/components/external/GoUserInfo'
+ * 修改引入路径
+ * 源文件路径 import { GoUserInfo } from '@/components/GoUserInfo'
+ * 修改后路径 import { GoUserInfo } from '@/components/external/GoUserInfo'
  */
 import { GoUserInfo } from '@/components/external/GoUserInfo'
 </script>

+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
+import { BarLineConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
+import dataJson from './data.json'
+
+export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
+// 柱状折线组合图 分别定义series
+// 写死name可以定义legend显示的名称
+export const barSeriesItem = {
+  type: 'bar',
+  barWidth: 15,
+  label: {
+    show: true,
+    position: 'top',
+    color: '#fff',
+    fontSize: 12
+  },
+  itemStyle: {
+    color: null,
+    borderRadius: 2
+  }
+}
+
+export const lineSeriesItem = {
+  type: 'line',
+  symbol: 'circle',
+  label: {
+    show: true,
+    position: 'top',
+    color: '#fff',
+    fontSize: 12
+  },
+  symbolSize: 5, //设定实心点的大小
+  itemStyle: {
+    color: '#FFE47A',
+    borderWidth: 1
+  },
+  lineStyle: {
+    type: 'solid',
+    width: 3,
+    color: null
+  }
+}
+
+export const option = {
+  tooltip: {
+    show: true,
+    trigger: 'axis',
+    axisPointer: {
+      show: true,
+      type: 'shadow'
+    }
+  },
+  legend: {
+    data: null
+  },
+  xAxis: {
+    show: true,
+    type: 'category'
+  },
+  yAxis: {
+    show: true,
+    type: 'value'
+  },
+  dataset: { ...dataJson },
+  series: [barSeriesItem, lineSeriesItem]
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = BarLineConfig.key
+  public chartConfig = cloneDeep(BarLineConfig)
+  // 图表配置项
+  public option = echartOptionProfixHandle(option, includes)
+}

+<template>
+  <!-- Echarts 全局设置 -->
+  <global-setting :optionData="optionData"></global-setting>
+  <CollapseItem
+    v-for="(item, index) in seriesList"
+    :key="index"
+    :name="`${item.type == 'bar' ? '柱状图' : '折线图'}`"
+    :expanded="true"
+  >
+    <SettingItemBox name="图形" v-if="item.type == 'bar'">
+      <SettingItem name="宽度">
+        <n-input-number
+          v-model:value="item.barWidth"
+          :min="1"
+          :max="100"
+          size="small"
+          placeholder="自动计算"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="圆角">
+        <n-input-number v-model:value="item.itemStyle.borderRadius" :min="0" size="small"></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="线条" v-if="item.type == 'line'">
+      <SettingItem name="宽度">
+        <n-input-number
+          v-model:value="item.lineStyle.width"
+          :min="1"
+          :max="100"
+          size="small"
+          placeholder="自动计算"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="类型">
+        <n-select v-model:value="item.lineStyle.type" size="small" :options="lineConf.lineStyle.type"></n-select>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="实心点" v-if="item.type == 'line'">
+      <SettingItem name="大小">
+        <n-input-number
+          v-model:value="item.symbolSize"
+          :min="1"
+          :max="100"
+          size="small"
+          placeholder="自动计算"
+        ></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+    <setting-item-box name="标签">
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="item.label.show" size="small" />
+          <n-text>展示标签</n-text>
+        </n-space>
+      </setting-item>
+      <setting-item name="大小">
+        <n-input-number v-model:value="item.label.fontSize" size="small" :min="1"></n-input-number>
+      </setting-item>
+      <setting-item name="tip颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="item.label.color"></n-color-picker>
+      </setting-item>
+      <setting-item name="位置">
+        <n-select
+          v-model:value="item.label.position"
+          :options="[
+            { label: 'top', value: 'top' },
+            { label: 'left', value: 'left' },
+            { label: 'right', value: 'right' },
+            { label: 'bottom', value: 'bottom' }
+          ]"
+        />
+      </setting-item>
+    </setting-item-box>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType, computed } from 'vue'
+import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { lineConf } from '@/packages/chartConfiguration/echarts'
+import { GlobalThemeJsonType } from '@/settings/chartThemes'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<GlobalThemeJsonType>,
+    required: true
+  }
+})
+
+const seriesList = computed(() => {
+  return props.optionData.series
+})
+</script>

+{
+  "dimensions": ["product", "data1", "data2"],
+  "source": [
+    {
+      "product": "1月",
+      "data1": 104,
+      "data2": 30
+    },
+    {
+      "product": "2月",
+      "data1": 56,
+      "data2": 56
+    },
+    {
+      "product": "3月",
+      "data1": 136,
+      "data2": 36
+    },
+    {
+      "product": "4月",
+      "data1": 86,
+      "data2": 6
+    },
+    {
+      "product": "5月",
+      "data1": 98,
+      "data2": 10
+    },
+    {
+      "product": "6月",
+      "data1": 86,
+      "data2": 70
+    },
+    {
+      "product": "7月",
+      "data1": 77,
+      "data2": 57
+    }
+  ]
+}

+// 公共类型声明
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+// 当前[信息模块]分类声明
+import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
+
+export const BarLineConfig: ConfigType = {
+  key: 'BarLine',
+  chartKey: 'VBarLine',
+  conKey: 'VCBarLine',
+  title: '柱状图 & 折线图',
+  category: ChatCategoryEnum.BAR,
+  categoryName: ChatCategoryEnumName.BAR,
+  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.ECHARTS,
+  image: 'bar_line.png'
+}
\ No newline at end of file

+<template>
+  <v-chart
+    ref="vChartRef"
+    :init-options="initOptions"
+    :theme="themeColor"
+    :option="option"
+    :manual-update="isPreview()"
+    autoresize
+  ></v-chart>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, PropType, nextTick } from 'vue'
+import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+//引入柱状图 折线图
+import { BarChart, LineChart } from 'echarts/charts'
+import config, { includes, barSeriesItem, lineSeriesItem } from './config'
+import { mergeTheme } from '@/packages/public/chart'
+import { useChartDataFetch } from '@/hooks'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { isPreview } from '@/utils'
+import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
+
+const props = defineProps({
+  themeSetting: {
+    type: Object,
+    required: true
+  },
+  themeColor: {
+    type: Object,
+    required: true
+  },
+  chartConfig: {
+    type: Object as PropType<config>,
+    required: true
+  }
+})
+
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
+use([DatasetComponent, CanvasRenderer, BarChart, LineChart, GridComponent, TooltipComponent, LegendComponent])
+
+const replaceMergeArr = ref<string[]>()
+
+const option = computed(() => {
+  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+})
+
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData, oldData) => {
+    if (newData.dimensions.length !== oldData.dimensions.length) {
+      const seriesArr = []
+      for (let i = 0; i < newData.dimensions.length - 1; i++) {
+        seriesArr.push(barSeriesItem, lineSeriesItem)
+      }
+      replaceMergeArr.value = ['series']
+      props.chartConfig.option.series = seriesArr
+      nextTick(() => {
+        replaceMergeArr.value = []
+      })
+    }
+  },
+  {
+    deep: false
+  }
+)
+
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
+</script>

 import { BarCommonConfig } from './BarCommon/index'
 import { BarCrossrangeConfig } from './BarCrossrange/index'
 import { CapsuleChartConfig } from './CapsuleChart/index'
+import { BarLineConfig } from './BarLine/index'
 
-export default [BarCommonConfig, BarCrossrangeConfig, CapsuleChartConfig]
+export default [BarCommonConfig, BarCrossrangeConfig, BarLineConfig, CapsuleChartConfig]

@@ -33,6 +33,10 @@ export const option = {
         width: 3,
         color: {
           type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
           colorStops: [
             {
               offset: 0,

@@ -84,7 +84,10 @@ export const option = {
         shadowColor: '#E1FFFF',
         shadowBlur: 10
       },
-      data: []
+      data: [],
+      encode: {
+        value: 2
+      }
     },
     {
       name: '区域',

@@ -3,7 +3,7 @@
     :type="type"
     :height="h"
     :processing="processing"
-    :percentage="option.dataset"
+    :percentage="dataset"
     :indicator-placement="indicatorPlacement"
     :color="color"
     :rail-color="railColor"
@@ -15,7 +15,7 @@
         fontSize: `${indicatorTextSize}px`
       }"
     >
-      {{ option.dataset }} {{ unit }}
+      {{ dataset }} {{ unit }}
     </n-text>
   </n-progress>
 </template>

@@ -14,5 +14,6 @@ export enum ChatCategoryEnumName {
   LINE = '折线图',
   SCATTER = '散点图',
   MAP = '地图',
+  COMBINATION = '组合图',
   MORE = '更多'
 }

+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { chartInitConfig } from '@/settings/designSetting'
+import { FullScreenConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  border: 6,
+  bgColor: '#84a5e9',
+  borderColor: '#84a5e9'
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = FullScreenConfig.key
+  public attr = { ...chartInitConfig, w: 150, h: 150, zIndex: -1 }
+  public chartConfig = cloneDeep(FullScreenConfig)
+  public option = cloneDeep(option)
+}

+<template>
+  <CollapseItem name="全屏按钮" expanded>
+    <SettingItemBox name="按钮">
+      <SettingItem name="背景色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.bgColor"></n-color-picker>
+      </SettingItem>
+      <SettingItem name="边框色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.borderColor"></n-color-picker>
+      </SettingItem>
+      <SettingItem name="边框大小">
+        <n-input-number v-model:value="optionData.border" size="small" :step="0.5" :min="0"></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+</script>

+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const FullScreenConfig: ConfigType = {
+  key: 'FullScreen',
+  chartKey: 'VFullScreen',
+  conKey: 'VCFullScreen',
+  title: '全屏按钮',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'fullScreen.png'
+}

+<template>
+  <svg @click="toggleFullscreen" v-if="!isFullscreen" viewBox="0 0 1024 1024">
+    <path
+      d="M665.6 1017.6c-19.2 0-38.4-19.2-38.4-38.4s19.2-38.4 38.4-38.4h268.8l6.4-268.8c0-19.2 19.2-38.4 38.4-38.4s38.4 19.2 38.4 38.4v294.4c0 32-25.6 51.2-51.2 51.2h-300.8zM51.2 396.8c-19.2 0-38.4-19.2-38.4-38.4V64C12.8 32 38.4 12.8 64 12.8h294.4c19.2 0 38.4 19.2 38.4 38.4s-19.2 38.4-38.4 38.4H89.6v268.8c0 19.2-19.2 38.4-38.4 38.4zM64 1017.6c-32 0-51.2-25.6-51.2-51.2v-294.4c0-19.2 19.2-38.4 38.4-38.4s38.4 19.2 38.4 38.4v217.6l198.4-198.4c6.4-6.4 19.2-12.8 25.6-12.8s19.2 6.4 25.6 12.8c6.4 6.4 12.8 19.2 12.8 25.6 0 12.8-6.4 19.2-12.8 25.6l-198.4 198.4h217.6c19.2 0 38.4 19.2 38.4 38.4s-19.2 38.4-38.4 38.4H64z m915.2-620.8c-19.2 0-38.4-19.2-38.4-38.4V140.8l-198.4 198.4c-6.4 6.4-19.2 12.8-25.6 12.8-12.8 0-19.2-6.4-25.6-12.8-12.8-12.8-12.8-38.4 0-51.2l198.4-198.4h-217.6c-19.2 0-38.4-19.2-38.4-38.4s19.2-38.4 38.4-38.4h294.4c32 0 51.2 25.6 51.2 51.2v294.4c0 19.2-19.2 38.4-38.4 38.4z"
+      class="fullScreen-border"
+    ></path>
+  </svg>
+  <svg @click="toggleFullscreen" v-else viewBox="0 0 1024 1024">
+    <path
+      d="M379.336 697.237L153.362 921.55c-14.11 14.007-36.905 13.922-50.912-0.188-14.007-14.11-13.922-36.905 0.188-50.912l227.6-225.927H138.645c-18.99 0-34.385-15.446-34.385-34.5 0-19.053 15.395-34.5 34.385-34.5H413.72c18.99 0 34.384 15.447 34.384 34.5v276c0 9.15-3.622 17.926-10.07 24.396a34.326 34.326 0 0 1-24.314 10.104 34.326 34.326 0 0 1-24.314-10.104 34.559 34.559 0 0 1-10.071-24.396V697.237z m263.395-366.88l227.813-227.813c14.059-14.059 36.853-14.059 50.912 0 14.059 14.059 14.059 36.853 0 50.912l-225.18 225.18h187.147c18.99 0 34.385 15.445 34.385 34.5 0 19.053-15.395 34.5-34.385 34.5H608.346c-18.99 0-34.384-15.447-34.384-34.5v-276c0-9.15 3.622-17.926 10.07-24.396a34.326 34.326 0 0 1 24.314-10.105c9.12 0 17.865 3.635 24.314 10.105a34.559 34.559 0 0 1 10.07 24.395v193.223zM99.385 410a34.326 34.326 0 0 1-24.314-10.105A34.559 34.559 0 0 1 65 375.5v-276C65 80.446 80.395 65 99.385 65h275.077c18.99 0 34.384 15.446 34.384 34.5 0 19.054-15.394 34.5-34.384 34.5H133.769v241.5c0 9.15-3.622 17.925-10.07 24.395A34.326 34.326 0 0 1 99.384 410z m825.23 552H649.538c-18.99 0-34.384-15.446-34.384-34.5 0-19.054 15.394-34.5 34.384-34.5h240.693V651.5c0-19.054 15.394-34.5 34.384-34.5 18.99 0 34.385 15.446 34.385 34.5v276c0 19.054-15.395 34.5-34.385 34.5z"
+      class="fullScreen-border"
+    ></path>
+  </svg>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs, ref, onMounted, onUnmounted } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { option } from './config'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType & typeof option>,
+    required: true
+  }
+})
+
+let { border, bgColor, borderColor } = toRefs(props.chartConfig.option)
+const isFullscreen = ref(false)
+const checkFullscreen = () => {
+  isFullscreen.value = !!(
+    document.fullscreenElement ||
+    (document as any).webkitFullscreenElement ||
+    (document as any).mozFullScreenElement ||
+    (document as any).msFullscreenElement
+  )
+}
+checkFullscreen()
+
+const requestFullscreen = (element: Element) => {
+  if (element.requestFullscreen) {
+    element.requestFullscreen()
+  } else if ((document as any).mozRequestFullScreen) {
+    /* Firefox */
+    (document as any).mozRequestFullScreen()
+  } else if ((document as any).webkitRequestFullscreen) {
+    /* Chrome, Safari and Opera */
+    (document as any).webkitRequestFullscreen()
+  } else if ((document as any).msRequestFullscreen) {
+    /* IE/Edge */
+    (document as any).msRequestFullscreen()
+  }
+}
+
+const exitFullscreen = () => {
+  if (document.fullscreenElement && document.exitFullscreen) {
+    document.exitFullscreen()
+  } else if ((document as any).mozFullScreenElement && (document as any).mozCancelFullScreen) {
+    /* Firefox */
+    (document as any).mozCancelFullScreen()
+  } else if ((document as any).webkitFullscreenElement && (document as any).webkitExitFullscreen) {
+    /* Chrome, Safari and Opera */
+    (document as any).webkitExitFullscreen()
+  } else if ((document as any).msFullscreenElement && (document as any).msExitFullscreen) {
+    /* IE/Edge */
+    (document as any).msExitFullscreen()
+  }
+}
+
+const toggleFullscreen = () => {
+  if (!isFullscreen.value) {
+    requestFullscreen(document.documentElement)
+  } else {
+    exitFullscreen()
+  }
+  isFullscreen.value = !isFullscreen.value
+  // 由于全屏状态的改变不会立即生效，所以需要延迟一段时间再去获取全屏状态
+  setTimeout(() => {
+    checkFullscreen()
+  }, 1000)
+}
+
+// 监听全屏状态的改变，保证多个全屏组件的状态一致
+onMounted(() => {
+  document.addEventListener('fullscreenchange', checkFullscreen)
+  document.addEventListener('webkitfullscreenchange', checkFullscreen)
+  document.addEventListener('mozfullscreenchange', checkFullscreen)
+  document.addEventListener('MSFullscreenChange', checkFullscreen)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('fullscreenchange', checkFullscreen)
+  document.removeEventListener('webkitfullscreenchange', checkFullscreen)
+  document.removeEventListener('mozfullscreenchange', checkFullscreen)
+  document.removeEventListener('MSFullscreenChange', checkFullscreen)
+})
+</script>
+
+<style lang="scss" scoped>
+svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+}
+.fullScreen-border {
+  stroke: v-bind('borderColor');
+  stroke-width: v-bind('border+"px"');
+  fill: v-bind('bgColor');
+}
+</style>

 import { NumberConfig } from './Number/index'
 import { TimeCommonConfig } from './TimeCommon/index'
 import { ClockConfig } from './Clock/index'
+import { FullScreenConfig } from './FullScreen/index'
 import { CountDownConfig } from './CountDown/index'
 import { FlipperNumberConfig } from './FlipperNumber'
 import { PipelineHConfig } from './PipelineH/index'
 import { PipelineVConfig } from './PipelineV/index'
 
-export default [NumberConfig, FlipperNumberConfig, TimeCommonConfig, CountDownConfig, ClockConfig, PipelineHConfig, PipelineVConfig]
+export default [
+  NumberConfig,
+  FlipperNumberConfig,
+  TimeCommonConfig,
+  CountDownConfig,
+  ClockConfig,
+  FullScreenConfig,
+  PipelineHConfig,
+  PipelineVConfig
+]

-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
 import {
   ArcCurve,

@@ -27,21 +27,12 @@ export class Basic {
 
     this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 100000)
     this.camera.position.set(0, 30, -250)
-   /**
-   * 这里升级版本有冲突,升级版本可以使用这里的代码，官方还未修复
-   * 修复官方Threejs生成缩略图无效问题，少加一个Threejs配置
-   * 修改后的代码在注释之间，并标注好源代码和修改后代码，方便回溯
-   * 源代码 属于新增代码，源代码无
-   * 修改后代码 preserveDrawingBuffer: true //缩略图生效需开启
-   * 
-   */
     this.renderer = new THREE.WebGLRenderer({
       // canvas: this.dom,
       alpha: true, // 透明
       antialias: true, // 抗锯齿
-      preserveDrawingBuffer: true//缩略图生效需开启
+      preserveDrawingBuffer: true
     })
-    //ft
     this.renderer.setPixelRatio(window.devicePixelRatio) // 设置屏幕像素比
     this.renderer.setSize(window.innerWidth, window.innerHeight) // 设置渲染器宽高
     this.dom.appendChild(this.renderer.domElement) // 添加到dom中

+import cloneDeep from 'lodash/cloneDeep'
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { chartInitConfig } from '@/settings/designSetting'
+import { COMPONENT_INTERACT_EVENT_KET } from '@/enums/eventEnum'
+import { interactActions, ComponentInteractEventEnum } from './interact'
+import {InputsInputConfig} from "./index";
+
+export const option = {
+    // 时间组件展示类型，必须和 interactActions 中定义的数据一致
+    [COMPONENT_INTERACT_EVENT_KET]: ComponentInteractEventEnum.DATA,
+    // 默认值
+    inputValue: "0",
+    // 暴露配置内容给用户
+    dataset: ""
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+    public key = InputsInputConfig.key
+    public attr = { ...chartInitConfig, w: 260, h: 32, zIndex: -1 }
+    public chartConfig = cloneDeep(InputsInputConfig)
+    public interactActions = interactActions
+    public option = cloneDeep(option)
+}
\ No newline at end of file

+<template>
+  <collapse-item name="输入框配置" :expanded="true">
+    <setting-item-box name="默认值" :alone="true">
+      <n-input  v-model:value="optionData.dataset"  placeholder="若未输入，则默认值为0"/>
+    </setting-item-box>
+  </collapse-item>
+</template>
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { CollapseItem, SettingItemBox } from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+</script>
\ No newline at end of file

+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const InputsInputConfig: ConfigType = {
+    key: 'InputsInput',
+    chartKey: 'VInputsInput',
+    conKey: 'VCInputsInput',
+    title: '输入框',
+    category: ChatCategoryEnum.INPUTS,
+    categoryName: ChatCategoryEnumName.INPUTS,
+    package: PackagesCategoryEnum.INFORMATIONS,
+    chartFrame: ChartFrameEnum.STATIC,
+    image: 'inputs_select.png'
+}
\ No newline at end of file

+<template>
+  <div>
+    <n-input :style="`width:${w}px;`" type="text"
+             v-model:value="option.value.dataset"
+             placeholder="请输入"
+             @change="onChange">
+
+    </n-input>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { PropType, toRefs, shallowReactive, watch } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useChartInteract } from '@/hooks'
+import { InteractEventOn } from '@/enums/eventEnum'
+import { ComponentInteractParamsEnum } from './interact'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const option = shallowReactive({
+  value: {
+    inputValue: props.chartConfig.option.inputValue,
+    dataset: props.chartConfig.option.dataset
+  }
+})
+
+const onChange = (v: string) => {
+  if(v == undefined) return;
+  // 存储到联动数据
+  useChartInteract(
+      props.chartConfig,
+      useChartEditStore,
+      { [ComponentInteractParamsEnum.DATA]: v },
+      InteractEventOn.CHANGE
+  )
+}
+
+// 手动更新
+watch(
+    () => props.chartConfig.option,
+    (newData: any) => {
+      option.value = newData
+      onChange(newData.inputValue)
+    },
+    {
+      immediate: true,
+      deep: true
+    }
+)
+
+</script>
+
+
+
+
+

+import { InteractEventOn, InteractActionsType } from '@/enums/eventEnum'
+
+// 时间组件类型
+export enum ComponentInteractEventEnum {
+    DATA = 'data'
+}
+
+// 联动参数
+export enum ComponentInteractParamsEnum {
+    DATA = 'data'
+}
+
+// 定义组件触发回调事件
+export const interactActions: InteractActionsType[] = [
+    {
+        interactType: InteractEventOn.CHANGE,
+        interactName: '选择完成',
+        componentEmitEvents: {
+            [ComponentInteractEventEnum.DATA]: [
+                {
+                    value: ComponentInteractParamsEnum.DATA,
+                    label: '选择项'
+                }
+            ]
+        }
+    }
+]

+import cloneDeep from 'lodash/cloneDeep'
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { chartInitConfig } from '@/settings/designSetting'
+import { COMPONENT_INTERACT_EVENT_KET } from '@/enums/eventEnum'
+import { interactActions, ComponentInteractEventEnum } from './interact'
+import {InputsPaginationConfig} from "./index";
+
+export const option = {
+    // 时间组件展示类型，必须和 interactActions 中定义的数据一致
+    [COMPONENT_INTERACT_EVENT_KET]: ComponentInteractEventEnum.DATA,
+    // 默认值
+    pageValue:1,
+    sizeValue:[2,4,8,10,20],
+    pageSize:4,
+    // 暴露配置内容给用户
+    dataset: 10
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+    public key = InputsPaginationConfig.key
+    public attr = { ...chartInitConfig, w: 395, h: 32, zIndex: -1 }
+    public chartConfig = cloneDeep(InputsPaginationConfig)
+    public interactActions = interactActions
+    public option = cloneDeep(option)
+}
\ No newline at end of file

+<template>
+    <collapse-item name="分页配置" :expanded="true">
+      <setting-item-box :alone="false" name="分页设置">
+        <setting-item  name="默认页码" :alone="true">
+          <n-input-number v-model:value="optionData.pageValue" size="small" placeholder="字体大小"></n-input-number>
+        </setting-item>
+        <setting-item  name="分页" :alone="true">
+          <n-select v-model:value="optionData.pageSize" size="small"
+                    :options="page" />
+        </setting-item>
+        <setting-item  name="页数" :alone="true">
+          <n-input-number v-model:value="optionData.dataset" size="small" placeholder="字体大小"></n-input-number>
+        </setting-item>
+      </setting-item-box>
+    </collapse-item>
+</template>
+<script setup lang="ts">
+import { PropType } from 'vue'
+import {CollapseItem, SettingItem, SettingItemBox} from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+
+const page = [
+  {label:'2',value:2},
+  {label:'4',value:4},
+  {label:'8',value:8},
+  {label:'10',value:10},
+  {label:'20',value:20}
+]
+defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+</script>
\ No newline at end of file

+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const InputsPaginationConfig: ConfigType = {
+    key: 'InputsPagination',
+    chartKey: 'VInputsPagination',
+    conKey: 'VCInputsPagination',
+    title: '分页',
+    category: ChatCategoryEnum.INPUTS,
+    categoryName: ChatCategoryEnumName.INPUTS,
+    package: PackagesCategoryEnum.INFORMATIONS,
+    chartFrame: ChartFrameEnum.STATIC,
+    image: 'inputs_pagination.png'
+}
\ No newline at end of file

+<template>
+  <div>
+    <n-pagination
+        @on-update:page="onChange" :style="`width:${w}px;`"
+        v-model:page="option.value.pageValue"
+        :page-count="option.value.dataset"
+        :page-slot="7"
+        show-size-picker
+        :page-sizes="option.value.sizeValue"
+        v-model:page-size="option.value.pageSize"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { PropType, toRefs, shallowReactive, watch } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useChartInteract } from '@/hooks'
+import { InteractEventOn } from '@/enums/eventEnum'
+import { ComponentInteractParamsEnum } from './interact'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const option = shallowReactive({
+  value: {
+    pageValue: props.chartConfig.option.pageValue,
+    dataset:props.chartConfig.option.dataset,
+    sizeValue:props.chartConfig.option.sizeValue,
+    pageSize:props.chartConfig.option.pageSize
+  }
+})
+
+const onChange = (v: number,v2:number) => {
+  if(v == undefined) return;
+  // 存储到联动数据
+  useChartInteract(
+      props.chartConfig,
+      useChartEditStore,
+      {
+        [ComponentInteractParamsEnum.DATA]: v ,
+        [ComponentInteractParamsEnum.DATA2]:v2
+      },
+      InteractEventOn.CHANGE
+  )
+}
+
+// 手动更新
+watch(
+    () => props.chartConfig.option,
+    (newData: any) => {
+      option.value = newData
+      onChange(newData.pageValue,newData.pageSize)
+    },
+    {
+      immediate: true,
+      deep: true
+    }
+)
+</script>
\ No newline at end of file

+import { InteractEventOn, InteractActionsType } from '@/enums/eventEnum'
+
+// 时间组件类型
+export enum ComponentInteractEventEnum {
+    DATA = 'data'
+}
+
+// 联动参数
+export enum ComponentInteractParamsEnum {
+    DATA = 'data',
+    DATA2 = 'data2'
+}
+
+// 定义组件触发回调事件
+export const interactActions: InteractActionsType[] = [
+    {
+        interactType: InteractEventOn.CHANGE,
+        interactName: '选择完成',
+        componentEmitEvents: {
+            [ComponentInteractEventEnum.DATA]: [
+                {
+                    value: ComponentInteractParamsEnum.DATA,
+                    label: '页数'
+                },
+                {
+                    value: ComponentInteractParamsEnum.DATA2,
+                    label: '每页条数'
+                }
+            ]
+        }
+    }
+]
\ No newline at end of file

 import { InputsDateConfig } from './InputsDate/index'
 import { InputsSelectConfig } from './InputsSelect/index'
 import { InputsTabConfig } from './InputsTab/index'
+import { InputsPaginationConfig } from "./InputsPagination/index";
+import { InputsInputConfig} from "./InputsInput/index";
 
-export default [InputsDateConfig, InputsSelectConfig, InputsTabConfig]
+export default [InputsDateConfig, InputsSelectConfig, InputsTabConfig,InputsPaginationConfig,InputsInputConfig]

-import { PublicConfigClass } from '@/packages/public'
-import { CreateComponentType } from '@/packages/index.d'
-import { CarouselConfig } from './index'
-import cloneDeep from 'lodash/cloneDeep'
-import logo from '@/assets/logo.png'
- 
-// 示例图片资源
-const modules: Record<string, { default: string }>  = import.meta.glob("./images/*", {eager: true});
-const dataset = [logo]
-for (const item in modules) {
-  dataset.push(modules[item].default)
-}
-
-export const option = {
-  // 图片资源列表
-  dataset: dataset,
-  // 自动播放
-  autoplay: true,
-  // 自动播放的间隔（ms）
-  interval: 5000,
-  // 每页显示的图片数量
-  slidesPerview: 1,
-  // 轮播方向
-  direction: "horizontal",
-  // 拖曳切换
-  draggable: true,
-  // 居中显示
-  centeredSlides: false,
-  // 过渡效果
-  effect: "slide",
-  // 是否显示指示点
-  showDots: true,
-  // 指示器样式
-  dotType: "dot",
-  // 指示器位置
-  dotPlacement: "bottom",
-  // 显示箭头
-  showArrow: false,
-  // 图片样式
-  fit: "contain",
-}
-
-export default class Config extends PublicConfigClass implements CreateComponentType {
-  public key = CarouselConfig.key
-  public chartConfig = cloneDeep(CarouselConfig)
-  public option = cloneDeep(option)
-}

-<template>
-  <collapse-item name="属性" :expanded="true">
-    <setting-item-box name="路径" :alone="true">
-      <setting-item v-for="item, index in optionData.dataset" :key="index">
-        <n-input-group>
-          <n-input v-model:value="optionData.dataset[index]" size="small" placeholder="请输入图片地址"></n-input>
-          <n-button ghost @click="optionData.dataset.splice(index, 1)">
-            -
-          </n-button>
-        </n-input-group>
-      </setting-item>
-      <setting-item>
-        <n-button size="small" @click="optionData.dataset.push('')">
-          +
-        </n-button>
-      </setting-item>
-    </setting-item-box>
-    <setting-item-box name="播放器">
-      <setting-item>
-        <n-space>
-          <n-switch v-model:value="optionData.autoplay" size="small" />
-          <n-text>自动播放</n-text>
-        </n-space>
-      </setting-item>
-      <!-- 开启自动播放时，设置间隔时间 -->
-      <setting-item name="间隔时间">
-        <n-input-number v-model:value="optionData.interval" size="small" placeholder=""></n-input-number>
-      </setting-item>
-      <setting-item name="轮播方向">
-        <n-select v-model:value="optionData.direction" :options="directions" placeholder="选择方向" />
-      </setting-item>
-      <setting-item name="过渡效果">
-        <n-select v-model:value="optionData.effect" :options="effects" placeholder="效果" />
-      </setting-item>
-      <setting-item name="每页数量">
-        <n-input-number v-model:value="optionData.slidesPerview" size="small" placeholder=""></n-input-number>
-      </setting-item>
-      <setting-item>
-        <n-space>
-          <n-switch v-model:value="optionData.centeredSlides" size="small" />
-          <n-text>居中显示</n-text>
-        </n-space>
-      </setting-item>
-      <setting-item name="图片样式">
-        <n-select v-model:value="optionData.fit" :options="fitList" placeholder="样式" />
-      </setting-item>
-    </setting-item-box>
-
-    <setting-item-box name="指示器">
-      <setting-item name="样式">
-        <n-select v-model:value="optionData.dotType" :options="dotTypes" placeholder="选择样式" />
-      </setting-item>
-      <setting-item name="位置">
-        <n-select v-model:value="optionData.dotPlacement" :options="dotPlacements" placeholder="选择位置" />
-      </setting-item>
-      <setting-item>
-        <n-space>
-          <n-switch v-model:value="optionData.showDots" size="small" />
-          <n-text>显示</n-text>
-        </n-space>
-      </setting-item>
-      <setting-item>
-        <n-space>
-          <n-switch v-model:value="optionData.showArrow" size="small" />
-          <n-text>箭头</n-text>
-        </n-space>
-      </setting-item>
-      <setting-item>
-        <n-space>
-          <n-switch v-model:value="optionData.draggable" size="small" />
-          <n-text>拖曳切换</n-text>
-        </n-space>
-      </setting-item>
-    </setting-item-box>
-
-  </collapse-item>
-</template>
-
-<script setup lang="ts">
-import { PropType } from 'vue'
-import { option } from './config'
-import {
-  CollapseItem,
-  SettingItemBox,
-  SettingItem
-} from '@/components/Pages/ChartItemSetting'
-
-const props = defineProps({
-  optionData: {
-    type: Object as PropType<typeof option>,
-    required: true
-  }
-})
-
-// 字典
-const dotTypes = [
-  {
-    label: "点",
-    value: "dot"
-  },
-  {
-    label: "线",
-    value: "line"
-  }
-]
-const directions = [
-  {
-    label: "水平方向",
-    value: "horizontal"
-  },
-  {
-    label: "垂直方向",
-    value: "vertical"
-  }
-]
-const effects = [
-  {
-    label: "slide",
-    value: "slide"
-  },
-  {
-    label: "fade",
-    value: "fade"
-  },
-  {
-    label: "card",
-    value: "card"
-  },
-  {
-    label: "custom",
-    value: "custom"
-  }
-]
-const dotPlacements = [
-  {
-    label: "上边",
-    value: "top"
-  },
-  {
-    label: "下边",
-    value: "bottom"
-  },
-  {
-    label: "左边",
-    value: "left"
-  },
-  {
-    label: "右边",
-    value: "right"
-  }
-]
-
-// 适应类型
-const fitList = [
-  {
-    value: 'fill',
-    label: 'fill'
-  },
-  {
-    value: 'contain',
-    label: 'contain'
-  },
-  {
-    value: 'cover',
-    label: 'cover'
-  },
-  {
-    value: 'scale-down',
-    label: 'scale-down'
-  },
-  {
-    value: 'none',
-    label: 'none'
-  },
-]
-</script>

-import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
-import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
-
-export const CarouselConfig: ConfigType = {
-  key: 'Carousel',
-  chartKey: 'VCarousel',
-  conKey: 'VCCarousel',
-  title: '轮播图',
-  category: ChatCategoryEnum.MORE,
-  categoryName: ChatCategoryEnumName.MORE,
-  package: PackagesCategoryEnum.INFORMATIONS,
-  chartFrame: ChartFrameEnum.NAIVE_UI,
-  image: 'photo.png'
-}

-<template>
-  <div>
-    <n-carousel :autoplay="autoplay" :interval="interval" :centered-slides="centeredSlides" :direction="direction"
-      :dot-placement="dotPlacement" :dot-type="dotType" :draggable="draggable" :effect="effect"
-      :slides-per-view="slidesPerview" :show-arrow="showArrow" :show-dots="showDots">
-      <n-image v-for="url in option.dataset" :object-fit="fit" preview-disabled :src="url"
-        :fallback-src="requireErrorImg()" :width="w" :height="h"></n-image>
-    </n-carousel>
-  </div>
-</template>
-<script setup lang="ts">
-import { PropType, toRefs, shallowReactive, watch } from 'vue'
-import { CreateComponentType } from '@/packages/index.d'
-import { requireErrorImg } from '@/utils'
-import { useChartDataFetch } from '@/hooks'
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { option as configOption } from './config'
-
-const props = defineProps({
-  chartConfig: {
-    type: Object as PropType<CreateComponentType>,
-    required: true
-  }
-})
-
-const option = shallowReactive({
-  dataset: configOption.dataset
-})
-
-const { w, h } = toRefs(props.chartConfig.attr)
-const { autoplay, interval, slidesPerview, direction, draggable, centeredSlides, effect, dotType, dotPlacement, showArrow, showDots, fit } = toRefs(props.chartConfig.option)
-
-watch(
-  () => props.chartConfig.option.dataset,
-  (newData: any) => {
-    option.dataset = newData
-  },
-  {
-    immediate: true,
-    deep: false
-  }
-)
-
-useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
-  option.dataset = newData
-})
-</script>

@@ -33,6 +33,8 @@ const option = shallowReactive({
   dataset: ''
 })
 
+
+
 const getStyle = (radius: number) => {
   return {
     borderRadius: `${radius}px`,
@@ -40,12 +42,44 @@ const getStyle = (radius: number) => {
   }
 }
 
+async function getBase64(imgUrl: string): Promise<string> {
+   return new Promise(resolve => {
+    let xhr = new XMLHttpRequest();
+     xhr.open('get', imgUrl, true);
+     xhr.responseType = 'blob';
+     xhr.onload = function() {
+         if (this.status == 200) {
+              //得到一个blob对象
+              let blob = this.response;
+              // 重点2
+              let oFileReader = new FileReader();
+              oFileReader.onloadend = function(e) {
+                  // 结果
+                  const base64 = e.target?.result as string
+                  resolve(base64)
+              }; 
+              oFileReader.readAsDataURL(blob);
+         }
+     };
+     xhr.send();
+   })
+} 
+
 // 编辑更新
 watch(
   () => props.chartConfig.option.dataset,
-  (newData: any) => {
+ async (newData: any) => { 
+    // const base64 = await getBase64(newData)
+    // option.dataset = base64
+    const reg = /^https?/ig
+    if(reg.test(newData)){
+      const base64 = await getBase64(newData)
+      option.dataset = base64
+      return
+    }
     option.dataset = newData
-  },
+    
+  }, 
   {
     immediate: true
   }

@@ -3,6 +3,5 @@ import { ImageCarouselConfig } from './ImageCarousel/index'
 import { IframeConfig } from './Iframe/index'
 import { VideoConfig } from './Video/index'
 import { WordCloudConfig } from './WordCloud/index'
-import { CarouselConfig } from './Carousel/index'
 
 export default [ImageConfig, ImageCarouselConfig, VideoConfig, IframeConfig, WordCloudConfig]

@@ -2,7 +2,7 @@
   <collapse-item name="信息" :expanded="true">
     <setting-item-box name="文字" :alone="true">
       <setting-item>
-        <n-input v-model:value="optionData.dataset" size="small"></n-input>
+        <n-input v-model:value="optionData.dataset" type="textarea" size="small"></n-input>
       </setting-item>
     </setting-item-box>
   </collapse-item>

 <template>
   <div class="go-text-box">
     <div class="content">
-      <span style="cursor: pointer; white-space: pre-wrap" v-if="link" @click="click"></span>
+      <span style="cursor: pointer; white-space: pre-wrap" v-if="link" @click="click">{{ option.dataset }}</span>
       <span style="white-space: pre-wrap" v-else>{{ option.dataset }}</span>
     </div>
   </div>

@@ -2,7 +2,7 @@
   <collapse-item name="信息" :expanded="true">
     <setting-item-box name="文字" :alone="true">
       <setting-item>
-        <n-input v-model:value="optionData.dataset" size="small"></n-input>
+        <n-input v-model:value="optionData.dataset" type="textarea" size="small"></n-input>
       </setting-item>
     </setting-item-box>
   </collapse-item>

+import cloneDeep from 'lodash/cloneDeep'
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { chartInitConfig } from '@/settings/designSetting'
+import { TablesBasicConfig } from './index'
+import dataJson from './data.json'
+
+const { dimensions, source } = dataJson
+export const option = {
+  dataset: { dimensions, source },
+  pagination: {
+    page: 1,
+    pageSize: 5
+  },
+  align: 'center',
+  style: {
+    border: 'on',
+    singleColumn: 'off',
+    singleLine: 'off',
+    bottomBordered: 'on',
+    striped: 'on',
+    fontSize: 16,
+    borderWidth: 0,
+    borderColor: 'black',
+    borderStyle: 'solid'
+  },
+  inputShow: 'none'
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = TablesBasicConfig.key
+  public attr = { ...chartInitConfig, w: 600, h: 300, zIndex: -1 }
+  public chartConfig = cloneDeep(TablesBasicConfig)
+  public option = cloneDeep(option)
+}

+<template>
+  <collapse-item name="表格设置" :expanded="true">
+    <n-tag type="primary">若配置无响应，请在预览页面查看效果</n-tag>
+    <setting-item-box :alone="true" name="对齐方式">
+      <setting-item :alone="true">
+        <n-select
+          v-model:value="optionData.align"
+          size="small"
+          :options="[
+            { label: '靠左', value: 'left' },
+            { label: '居中', value: 'center' },
+            { label: '靠右', value: 'right' }
+          ]"
+        />
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box :alone="false" name="分页设置">
+      <setting-item name="默认页码" :alone="true">
+        <n-input-number v-model:value="optionData.pagination.page" size="small" placeholder="字体大小"></n-input-number>
+      </setting-item>
+      <setting-item name="分页" :alone="true">
+        <n-select v-model:value="optionData.pagination.pageSize" size="small" :options="page" />
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box :alone="false" name="表格数据">
+      <SettingItem name="表头名称" class="form_name">
+        <div style="width: 260px">
+          <n-input v-model:value="header" size="small" placeholder="表头数据(英文','分割)"></n-input>
+        </div>
+      </SettingItem>
+    </setting-item-box>
+    <setting-item-box :alone="false" name="表格样式">
+      <SettingItem name="显示边框" :alone="true">
+        <n-select v-model:value="(optionData as any).style.border" size="small" :options="borderFlag" />
+      </SettingItem>
+      <SettingItem name="底部边框" :alone="true">
+        <n-select
+          v-model:value="(optionData as any).style.bottomBordered"
+          size="small"
+          :options="bottom_borderedFlag"
+        />
+      </SettingItem>
+      <SettingItem name="列分割线" :alone="true">
+        <n-select v-model:value="(optionData as any).style.singleLine" size="small" :options="columnFlag" />
+      </SettingItem>
+      <SettingItem name="行分割线" :alone="true">
+        <n-select v-model:value="(optionData as any).style.singleColumn" size="small" :options="lineFlag" />
+      </SettingItem>
+      <SettingItem name="斑马条纹" :alone="true">
+        <n-select v-model:value="(optionData as any).style.striped" size="small" :options="stripedFlag" />
+      </SettingItem>
+      <setting-item name="字体大小" :alone="true">
+        <n-input-number
+          v-model:value="optionData.style.fontSize"
+          :min="12"
+          size="small"
+          placeholder="字体大小"
+        ></n-input-number>
+      </setting-item>
+      <setting-item name="边框宽度" :alone="true">
+        <n-input-number
+          v-model:value="optionData.style.borderWidth"
+          :min="0"
+          size="small"
+          placeholder="字体大小"
+        ></n-input-number>
+      </setting-item>
+      <setting-item name="边框颜色" :alone="true">
+        <n-color-picker size="small" :modes="['rgb']" v-model:value="optionData.style.borderColor"></n-color-picker>
+      </setting-item>
+      <setting-item name="边框样式" :alone="true">
+        <n-select v-model:value="optionData.style.borderStyle" size="small" :options="borderStyleFlag" />
+      </setting-item>
+      <SettingItem name="表格搜索（前端静态搜索）" :alone="true">
+        <n-select v-model:value="optionData.inputShow" size="small" :options="inputSelect" />
+      </SettingItem>
+    </setting-item-box>
+  </collapse-item>
+</template>
+
+<script setup lang="ts">
+import { PropType, watch, ref } from 'vue'
+import { option } from './config'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+
+const page = [
+  { label: '2', value: 2 },
+  { label: '5', value: 5 },
+  { label: '10', value: 10 },
+  { label: '15', value: 15 },
+  { label: '30', value: 30 }
+]
+const borderFlag = [
+  { label: '显示', value: 'on' },
+  { label: '不显示', value: 'off' }
+]
+const columnFlag = [
+  { label: '显示', value: 'off' },
+  { label: '不显示', value: 'on' }
+]
+const lineFlag = [
+  { label: '显示', value: 'off' },
+  { label: '不显示', value: 'on' }
+]
+const bottom_borderedFlag = [
+  { label: '显示', value: 'on' },
+  { label: '不显示', value: 'off' }
+]
+const stripedFlag = [
+  { label: '显示', value: 'on' },
+  { label: '不显示', value: 'off' }
+]
+const borderStyleFlag = [
+  { label: '实线边框', value: 'solid' },
+  { label: '虚线边框', value: 'dashed' },
+  { label: '点状边框', value: 'dotted' },
+  { label: '双线边框', value: 'double' }
+]
+const inputSelect = [
+  { label: '停用', value: 'none' },
+  { label: '启用', value: 'flex' }
+]
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+const header = ref()
+const median = ref<string[]>([])
+props.optionData.dataset.dimensions.forEach(item => {
+  median.value.push(item.title)
+})
+
+//转string
+watch(
+  () => props.optionData,
+  () => {
+    median.value = []
+    props.optionData.dataset.dimensions.forEach(item => {
+      median.value.push(item.title)
+    })
+    header.value = median.value.toString()
+  },
+  {
+    deep: false,
+    immediate: true
+  }
+)
+
+//更新columns
+watch([header], ([headerNew], [headerOld]) => {
+  if (headerNew !== headerOld) {
+    headerNew.split(',').forEach((item: string, index: number) => {
+      if (index + 1 <= props.optionData.dataset.dimensions.length) {
+        props.optionData.dataset.dimensions[index].title = headerNew.split(',')[index]
+      }
+    })
+  }
+})
+</script>

+{
+  "dimensions": [
+    {
+      "title": "产品名称",
+      "key": "productName"
+    },
+    {
+      "title": "产品销量（万）",
+      "key": "totalSum"
+    },
+    {
+      "title": "销售额（万）",
+      "key": "totalAmount"
+    }
+  ],
+  "source": [
+    {
+      "key": 0,
+      "productName": "产品A1",
+      "totalSum": 10,
+      "totalAmount": 10
+    },
+    {
+      "key": 1,
+      "productName": "产品B1",
+      "totalSum": 10,
+      "totalAmount": 10
+    },
+    {
+      "key": 2,
+      "productName": "产品C1",
+      "totalSum": 10,
+      "totalAmount": 10
+    },
+    {
+      "key": 3,
+      "productName": "产品D1",
+      "totalSum": 10,
+      "totalAmount": 10
+    },
+    {
+      "key": 4,
+      "productName": "产品A2",
+      "totalSum": 10,
+      "totalAmount": 10
+    },
+    {
+      "key": 5,
+      "productName": "产品D2",
+      "totalSum": 10,
+      "totalAmount": 10
+    },
+    {
+      "key": 6,
+      "productName": "产品A3",
+      "totalSum": 10,
+      "totalAmount": 10
+    }
+  ]
+}

+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const TablesBasicConfig: ConfigType = {
+  key: 'TablesBasic',
+  chartKey: 'VTablesBasic',
+  conKey: 'VCTablesBasic',
+  title: '基础分页表格',
+  category: ChatCategoryEnum.TABLE,
+  categoryName: ChatCategoryEnumName.TABLE,
+  package: PackagesCategoryEnum.TABLES,
+  chartFrame: ChartFrameEnum.COMMON,
+  image: 'tables_basic.png'
+}

+<template>
+  <div class="go-tables-basic">
+    <n-input
+      v-model:value="inputData"
+      placeholder="请输入信息"
+      :style="`display: ${inputShow}`"
+      style="margin-bottom: 5px; float: right; width: 240px"
+    >
+      <template #prefix>
+        <n-icon :component="SearchIcon" />
+      </template>
+    </n-input>
+    <n-data-table
+      :style="`
+      width: ${w}px;
+      height: ${h}px;
+      font-size: ${option.style.fontSize}px;
+      border-width: ${option.style.border === 'on' ? option.style.borderWidth : 0}px;
+      border-color: ${option.style.borderColor};
+      border-style: ${option.style.borderStyle}`"
+      :bordered="option.style.border === 'on'"
+      :single-column="option.style.singleColumn === 'on'"
+      :single-line="option.style.singleLine === 'on'"
+      :bottom-bordered="option.style.bottomBordered === 'on'"
+      :striped="option.style.striped === 'on'"
+      :max-height="h"
+      size="small"
+      :columns="option.dataset.dimensions"
+      :data="filterData"
+      :pagination="pagination"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, PropType, toRefs, watch, reactive, ref } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { icon } from '@/plugins'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { SearchIcon } = icon.ionicons5
+
+//查询字段
+const inputData = ref('')
+//前台过滤
+const filterData = computed(() => {
+  return option?.dataset?.source?.filter((item: any) => {
+    return Object.values(item).some(val => {
+      return String(val).toLowerCase().includes(inputData.value.toLowerCase())
+    })
+  })
+})
+
+const { align, pagination, inputShow } = toRefs(props.chartConfig.option)
+
+pagination.value.onChange = (page: number) => {
+  pagination.value.page = page
+}
+
+const { w, h } = toRefs(props.chartConfig.attr)
+
+const option = reactive({
+  dataset: props.chartConfig.option.dataset,
+  style: props.chartConfig.option.style
+})
+
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData: any) => {
+    option.dataset = newData
+    option?.dataset?.dimensions?.forEach((header: any) => {
+      header.align = align.value
+    })
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+</script>
+
+<style lang="scss" scoped>
+@include go('tables-basic') {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  align-items: flex-end;
+}
+</style>

 import { TableListConfig } from './TableList'
 import { TableScrollBoardConfig } from './TableScrollBoard'
+import { TablesBasicConfig } from "./TablesBasic/index";
 
-export default [TableListConfig, TableScrollBoardConfig]
+export default [TableListConfig, TableScrollBoardConfig,TablesBasicConfig]

+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
+import { OverrideLineForDeviceHistoryQueryConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
+import dataJson from './data.json'
+import { chartInitConfig } from '@/settings/designSetting'
+
+export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
+export const seriesItem = {
+  type: 'line',
+  label: {
+    show: true,
+    position: 'top',
+    color: '#fff',
+    fontSize: 12
+  },
+  symbolSize: 5, //设定实心点的大小
+  itemStyle: {
+    color: null,
+    borderRadius: 0
+  },
+  lineStyle: {
+    type: 'solid',
+    width: 3,
+    color: null
+  }
+}
+// 其它配置项比如新增（动画）
+const otherConfig = {
+  // 轮播动画
+  isCarousel: false
+}
+export const option = {
+  queryCondition: {
+    timeRange: [new Date().getTime() - 86400000, new Date().getTime()], //默认最近一天
+    limit: 7,
+    agg: 'NONE',
+    interval: null
+  },
+  ...otherConfig,
+  tooltip: {
+    show: true,
+    trigger: 'axis',
+    axisPointer: {
+      type: 'line'
+    }
+  },
+  xAxis: {
+    show: true,
+    type: 'category'
+  },
+  yAxis: {
+    show: true,
+    type: 'value'
+  },
+  dataset: { ...dataJson },
+  series: [seriesItem, seriesItem]
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = OverrideLineForDeviceHistoryQueryConfig.key
+  public chartConfig = cloneDeep(OverrideLineForDeviceHistoryQueryConfig)
+  public attr = { ...chartInitConfig, w: 735, h: 435, zIndex: -1 }
+  // 图表配置项
+  public option = echartOptionProfixHandle(option, includes)
+}

+<template>
+  <!-- Echarts 全局设置 -->
+  <global-setting :optionData="optionData"></global-setting>
+  <CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`折线图-${index + 1}`" :expanded="true">
+    <SettingItemBox name="线条">
+      <SettingItem name="宽度">
+        <n-input-number
+          v-model:value="item.lineStyle.width"
+          :min="1"
+          :max="100"
+          size="small"
+          placeholder="自动计算"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="类型">
+        <n-select v-model:value="item.lineStyle.type" size="small" :options="lineConf.lineStyle.type"></n-select>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="动画" :alone="true">
+      <SettingItem>
+        <n-space>
+          <n-switch v-model:value="optionData.isCarousel" size="small"></n-switch>
+          <n-text>开启<n-text :depth="3">（将自动隐藏图例）</n-text></n-text>
+        </n-space>
+      </SettingItem>
+      <SettingItem>
+        <n-text :depth="3">无鼠标点击图例场景时，可强行打开图例</n-text>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="实心点">
+      <SettingItem name="大小">
+        <n-input-number
+          v-model:value="item.symbolSize"
+          :min="1"
+          :max="100"
+          size="small"
+          placeholder="自动计算"
+        ></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+    <setting-item-box name="标签">
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="item.label.show" size="small" />
+          <n-text>展示标签</n-text>
+        </n-space>
+      </setting-item>
+      <setting-item name="大小">
+        <n-input-number v-model:value="item.label.fontSize" size="small" :min="1"></n-input-number>
+      </setting-item>
+      <setting-item name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="item.label.color"></n-color-picker>
+      </setting-item>
+      <setting-item name="位置">
+        <n-select
+          v-model:value="item.label.position"
+          :options="[
+            { label: 'top', value: 'top' },
+            { label: 'left', value: 'left' },
+            { label: 'right', value: 'right' },
+            { label: 'bottom', value: 'bottom' }
+          ]"
+        />
+      </setting-item>
+    </setting-item-box>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType, computed } from 'vue'
+import { lineConf } from '@/packages/chartConfiguration/echarts/index'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
+import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<GlobalThemeJsonType>,
+    required: true
+  }
+})
+
+const seriesList = computed(() => {
+  return props.optionData.series
+})
+</script>

+{
+  "dimensions": ["product", "data1", "data2"],
+  "source": [
+    {
+      "product": "Mon",
+      "data1": 120,
+      "data2": 130
+    },
+    {
+      "product": "Tue",
+      "data1": 200,
+      "data2": 130
+    },
+    {
+      "product": "Wed",
+      "data1": 150,
+      "data2": 312
+    },
+    {
+      "product": "Thu",
+      "data1": 80,
+      "data2": 268
+    },
+    {
+      "product": "Fri",
+      "data1": 70,
+      "data2": 155
+    },
+    {
+      "product": "Sat",
+      "data1": 110,
+      "data2": 117
+    },
+    {
+      "product": "Sun",
+      "data1": 130,
+      "data2": 160
+    }
+  ]
+}

+import dayjs, { Dayjs } from 'dayjs';
+
+enum TimeUnit {
+  SECOND = 'second',
+  MINUTE = 'MINUTE',
+  HOUR = 'HOUR',
+  DAY = 'DAY',
+}
+
+const unitMapping = {
+  [TimeUnit.SECOND]: '秒',
+  [TimeUnit.MINUTE]: '分',
+  [TimeUnit.HOUR]: '小时',
+  [TimeUnit.DAY]: '天',
+};
+
+const unitConversion = {
+  [TimeUnit.SECOND]: 1 * 1000,
+  [TimeUnit.MINUTE]: 1 * 60 * 1000,
+  [TimeUnit.HOUR]: 1 * 60 * 60 * 1000,
+  [TimeUnit.DAY]: 1 * 60 * 60 * 24 * 1000,
+};
+
+export const intervalOption = [
+  {
+    id: 1,
+    unit: TimeUnit.SECOND,
+    linkage: [{ id: 1, unit: TimeUnit.SECOND }],
+  },
+  {
+    id: 5,
+    unit: TimeUnit.SECOND,
+    linkage: [{ id: 1, unit: TimeUnit.SECOND }],
+  },
+  {
+    id: 10,
+    unit: TimeUnit.SECOND,
+    linkage: [{ id: 1, unit: TimeUnit.SECOND }],
+  },
+  {
+    id: 15,
+    unit: TimeUnit.SECOND,
+    linkage: [{ id: 1, unit: TimeUnit.SECOND }],
+  },
+  {
+    id: 30,
+    unit: TimeUnit.SECOND,
+    linkage: [{ id: 1, unit: TimeUnit.SECOND }],
+  },
+  {
+    id: 1,
+    unit: TimeUnit.MINUTE,
+    linkage: [
+      { id: 1, unit: TimeUnit.SECOND },
+      { id: 5, unit: TimeUnit.SECOND },
+    ],
+  },
+  {
+    id: 2,
+    unit: TimeUnit.MINUTE,
+    linkage: [
+      { id: 1, unit: TimeUnit.SECOND },
+      { id: 5, unit: TimeUnit.SECOND },
+      { id: 10, unit: TimeUnit.SECOND },
+      { id: 15, unit: TimeUnit.SECOND },
+    ],
+  },
+  {
+    id: 5,
+    unit: TimeUnit.MINUTE,
+    linkage: [
+      { id: 1, unit: TimeUnit.SECOND },
+      { id: 5, unit: TimeUnit.SECOND },
+      { id: 10, unit: TimeUnit.SECOND },
+      { id: 15, unit: TimeUnit.SECOND },
+      { id: 30, unit: TimeUnit.SECOND },
+    ],
+  },
+  {
+    id: 10,
+    unit: TimeUnit.MINUTE,
+    linkage: [
+      { id: 5, unit: TimeUnit.SECOND },
+      { id: 10, unit: TimeUnit.SECOND },
+      { id: 15, unit: TimeUnit.SECOND },
+      { id: 30, unit: TimeUnit.SECOND },
+      { id: 1, unit: TimeUnit.MINUTE },
+    ],
+  },
+  {
+    id: 15,
+    unit: TimeUnit.MINUTE,
+    linkage: [
+      { id: 5, unit: TimeUnit.SECOND },
+      { id: 10, unit: TimeUnit.SECOND },
+      { id: 15, unit: TimeUnit.SECOND },
+      { id: 30, unit: TimeUnit.SECOND },
+      { id: 1, unit: TimeUnit.MINUTE },
+      { id: 2, unit: TimeUnit.MINUTE },
+    ],
+  },
+  {
+    id: 30,
+    unit: TimeUnit.MINUTE,
+    linkage: [
+      { id: 5, unit: TimeUnit.SECOND },
+      { id: 10, unit: TimeUnit.SECOND },
+      { id: 15, unit: TimeUnit.SECOND },
+      { id: 30, unit: TimeUnit.SECOND },
+      { id: 1, unit: TimeUnit.MINUTE },
+      { id: 2, unit: TimeUnit.MINUTE },
+    ],
+  },
+  {
+    id: 1,
+    unit: TimeUnit.HOUR,
+    linkage: [
+      { id: 10, unit: TimeUnit.SECOND },
+      { id: 15, unit: TimeUnit.SECOND },
+      { id: 30, unit: TimeUnit.SECOND },
+      { id: 1, unit: TimeUnit.MINUTE },
+      { id: 2, unit: TimeUnit.MINUTE },
+      { id: 5, unit: TimeUnit.MINUTE },
+    ],
+  },
+  {
+    id: 2,
+    unit: TimeUnit.HOUR,
+    linkage: [
+      { id: 15, unit: TimeUnit.SECOND },
+      { id: 30, unit: TimeUnit.SECOND },
+      { id: 1, unit: TimeUnit.MINUTE },
+      { id: 2, unit: TimeUnit.MINUTE },
+      { id: 5, unit: TimeUnit.MINUTE },
+      { id: 10, unit: TimeUnit.MINUTE },
+      { id: 15, unit: TimeUnit.MINUTE },
+    ],
+  },
+  {
+    id: 5,
+    unit: TimeUnit.HOUR,
+    linkage: [
+      { id: 1, unit: TimeUnit.MINUTE },
+      { id: 2, unit: TimeUnit.MINUTE },
+      { id: 5, unit: TimeUnit.MINUTE },
+      { id: 10, unit: TimeUnit.MINUTE },
+      { id: 15, unit: TimeUnit.MINUTE },
+      { id: 30, unit: TimeUnit.MINUTE },
+    ],
+  },
+  {
+    id: 10,
+    unit: TimeUnit.HOUR,
+    linkage: [
+      { id: 2, unit: TimeUnit.MINUTE },
+      { id: 5, unit: TimeUnit.MINUTE },
+      { id: 10, unit: TimeUnit.MINUTE },
+      { id: 15, unit: TimeUnit.MINUTE },
+      { id: 30, unit: TimeUnit.MINUTE },
+      { id: 1, unit: TimeUnit.HOUR },
+    ],
+  },
+  {
+    id: 12,
+    unit: TimeUnit.HOUR,
+    linkage: [
+      { id: 2, unit: TimeUnit.MINUTE },
+      { id: 5, unit: TimeUnit.MINUTE },
+      { id: 10, unit: TimeUnit.MINUTE },
+      { id: 15, unit: TimeUnit.MINUTE },
+      { id: 30, unit: TimeUnit.MINUTE },
+      { id: 1, unit: TimeUnit.HOUR },
+    ],
+  },
+  {
+    id: 1,
+    unit: TimeUnit.DAY,
+    linkage: [
+      { id: 5, unit: TimeUnit.MINUTE },
+      { id: 10, unit: TimeUnit.MINUTE },
+      { id: 15, unit: TimeUnit.MINUTE },
+      { id: 30, unit: TimeUnit.MINUTE },
+      { id: 1, unit: TimeUnit.HOUR },
+      { id: 2, unit: TimeUnit.HOUR },
+    ],
+  },
+  {
+    id: 7,
+    unit: TimeUnit.DAY,
+    linkage: [
+      { id: 30, unit: TimeUnit.MINUTE },
+      { id: 1, unit: TimeUnit.HOUR },
+      { id: 2, unit: TimeUnit.HOUR },
+      { id: 5, unit: TimeUnit.HOUR },
+      { id: 10, unit: TimeUnit.HOUR },
+      { id: 12, unit: TimeUnit.HOUR },
+      { id: 1, unit: TimeUnit.DAY },
+    ],
+  },
+  {
+    id: 30,
+    unit: TimeUnit.DAY,
+    linkage: [
+      { id: 2, unit: TimeUnit.HOUR },
+      { id: 5, unit: TimeUnit.HOUR },
+      { id: 10, unit: TimeUnit.HOUR },
+      { id: 12, unit: TimeUnit.HOUR },
+      { id: 1, unit: TimeUnit.DAY },
+    ],
+  },
+].map((item) => {
+  return {
+    value: item.id * unitConversion[item.unit],
+    label: item.id + unitMapping[item.unit],
+    linkage: item.linkage.map((item) => {
+      return {
+        value: item.id * unitConversion[item.unit],
+        label: item.id + unitMapping[item.unit],
+      };
+    }),
+  };
+});
+
+const rangeIntervalOption = [
+  {
+    id: 90,
+    unit: TimeUnit.DAY,
+    linkage: [
+      { id: 5, unit: TimeUnit.HOUR },
+      { id: 10, unit: TimeUnit.HOUR },
+      { id: 12, unit: TimeUnit.HOUR },
+      { id: 1, unit: TimeUnit.DAY },
+      { id: 7, unit: TimeUnit.DAY },
+    ],
+  },
+  {
+    id: 180,
+    unit: TimeUnit.DAY,
+    linkage: [
+      { id: 10, unit: TimeUnit.HOUR },
+      { id: 12, unit: TimeUnit.HOUR },
+      { id: 1, unit: TimeUnit.DAY },
+      { id: 7, unit: TimeUnit.DAY },
+    ],
+  },
+  {
+    id: 360,
+    unit: TimeUnit.DAY,
+    linkage: [
+      { id: 1, unit: TimeUnit.DAY },
+      { id: 7, unit: TimeUnit.DAY },
+      { id: 30, unit: TimeUnit.DAY },
+    ],
+  },
+].map((item) => {
+  return {
+    value: item.id * unitConversion[item.unit],
+    label: item.id + unitMapping[item.unit],
+    linkage: item.linkage.map((item) => {
+      return {
+        value: item.id * unitConversion[item.unit],
+        label: item.id + unitMapping[item.unit],
+      };
+    }),
+  };
+});
+
+/**
+ * @description
+ * @param {number} value
+ * @returns
+ */
+export function getPacketIntervalByValue(value: number) {
+  return intervalOption.find((item) => item.value === value)?.linkage || [];
+}
+
+export function getPacketIntervalByRange(
+  [start, end] = [null, null] as [Nullable<Dayjs>, Nullable<Dayjs>]
+) {
+  start = typeof start === 'number' ? dayjs(start) : start
+  end = typeof end === 'number' ? dayjs(end) : end
+  
+  if (start && end) {
+    const value = end.diff(start, 'ms');
+    let options: { value: number; label: string }[] = [];
+    for (const item of [...intervalOption, ...rangeIntervalOption]) {
+      if (item.value <= value) continue;
+      if (item.value >= value) {
+        options = item.linkage;
+        break;
+      }
+    }
+    return options;
+  }
+  return [];
+}

+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('OverrideLineForDeviceHistoryQuery', true)
+
+export const OverrideLineForDeviceHistoryQueryConfig: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: '单设备-属性-历史数据查询',
+  category: ChatCategoryEnum.LINE,
+  categoryName: ChatCategoryEnumName.LINE,
+  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.ECHARTS,
+  image: 'line.png'
+}

+<template>
+  <div>
+    <n-space vertical>
+      <div class="form">
+        <n-date-picker size="small" :to="true" clearable v-model:value="queryCondition.timeRange" type="datetimerange"
+          :shortcuts="rangeShortcuts" format="yyyy-MM-dd" @change="queryCondition.interval = null" />
+        <n-select v-model:value="queryCondition.agg" size="small" :options="aggOptions" clearable
+          @change="handleAggChange" />
+        <n-input-number :min="7" :max="50000" size="small" v-if="queryCondition.agg === 'NONE'"
+          v-model:value="queryCondition.limit" clearable />
+        <n-select v-if="queryCondition.agg !== 'NONE'" size="small" v-model:value="queryCondition.interval"
+          :options="getPacketIntervalByRange(queryCondition.timeRange)" />
+      </div>
+    </n-space>
+    <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :manual-update="isPreview()"
+      :update-options="{
+        replaceMerge: replaceMergeArr
+      }" autoresize @mouseover="handleHighlight" @mouseout="handleDownplay">
+    </v-chart>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, computed, watch, ref, nextTick, onMounted, toRefs } from 'vue'
+import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { LineChart } from 'echarts/charts'
+import config, { includes, seriesItem } from './config'
+import { mergeTheme } from '@/packages/public/chart'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useChartDataFetch } from '@/hooks'
+import { isPreview } from '@/utils'
+import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
+import isObject from 'lodash/isObject'
+import cloneDeep from 'lodash/cloneDeep'
+import dataJson from './data.json'
+import { useFullScreen } from '../../utls/fullScreen'
+import { useAssembleDataHooks } from '@/hooks/external/useAssembleData.hook'
+import { SocketReceiveMessageType } from '@/store/external/modules/socketStore.d'
+import { useChartInteract } from '@/hooks/external/useChartSelectDeviceInteract.hook'
+import { getPacketIntervalByRange } from './helper'
+
+const props = defineProps({
+  themeSetting: {
+    type: Object,
+    required: true
+  },
+  themeColor: {
+    type: Object,
+    required: true
+  },
+  chartConfig: {
+    type: Object as PropType<config>,
+    required: true
+  }
+})
+
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
+const { queryCondition } = toRefs(props.chartConfig.option)
+
+use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
+
+const chartEditStore = useChartEditStore()
+
+const replaceMergeArr = ref<string[]>()
+
+const aggOptions = [
+  { label: '最小值', value: 'MIN' },
+  { label: '最大值', value: 'MAX' },
+  { label: '平均值', value: 'AVG' },
+  { label: '求和', value: 'SUM' },
+  { label: '计数', value: 'COUNT' },
+  { label: '空', value: 'NONE' }
+]
+
+const rangeShortcuts = {
+  昨天: () => {
+    const cur = new Date().getTime()
+    return [cur - 86400000, cur] as const
+  },
+  最近7天: () => {
+    const cur = new Date().getTime()
+    return [cur - 604800000, cur] as const
+  },
+  最近30天: () => {
+    const cur = new Date().getTime()
+    return [cur - 2592000000, cur] as const
+  }
+}
+
+const option = computed(() => {
+  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+})
+
+// dataset 无法变更条数的补丁
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData: { dimensions: any }, oldData) => {
+    try {
+      if (!isObject(newData) || !('dimensions' in newData)) return
+      if (Array.isArray(newData?.dimensions)) {
+        const seriesArr = []
+        // 对oldData进行判断，防止传入错误数据之后对旧维度判断产生干扰
+        // 此处计算的是dimensions的Y轴维度，若是dimensions.length为0或1，则默认为1，排除X轴维度干扰
+        const oldDimensions =
+          Array.isArray(oldData?.dimensions) && oldData.dimensions.length >= 1 ? oldData.dimensions.length : 1
+        const newDimensions = newData.dimensions.length >= 1 ? newData.dimensions.length : 1
+        const dimensionsGap = newDimensions - oldDimensions
+        if (dimensionsGap < 0) {
+          props.chartConfig.option.series.splice(newDimensions - 1)
+        } else if (dimensionsGap > 0) {
+          if (!oldData || !oldData?.dimensions || !Array.isArray(oldData?.dimensions) || !oldData?.dimensions.length) {
+            props.chartConfig.option.series = []
+          }
+          for (let i = 0; i < dimensionsGap; i++) {
+            seriesArr.push(cloneDeep(seriesItem))
+          }
+          props.chartConfig.option.series.push(...seriesArr)
+        }
+        replaceMergeArr.value = ['series']
+        nextTick(() => {
+          replaceMergeArr.value = []
+        })
+      }
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  {
+    deep: false
+  }
+)
+
+let seriesDataNum = -1
+let seriesDataMaxLength = 0
+let intervalInstance: any = null
+const duration = 1500
+
+// 会重新选择需要选中和展示的数据
+const handleSeriesData = () => {
+  if (seriesDataNum > -1) {
+    vChartRef.value?.dispatchAction({
+      type: 'downplay',
+      dataIndex: seriesDataNum
+    })
+  }
+  seriesDataNum = seriesDataNum >= seriesDataMaxLength - 1 ? 0 : seriesDataNum + 1
+  vChartRef.value?.dispatchAction({
+    type: 'showTip',
+    seriesIndex: 0,
+    dataIndex: seriesDataNum
+  })
+}
+
+// 新增轮播
+const addPieInterval = (newData?: typeof dataJson, skipPre = false) => {
+  if (!skipPre && !Array.isArray(newData?.source)) return
+  if (!skipPre) seriesDataMaxLength = newData?.source.length || 0
+  clearInterval(intervalInstance)
+  intervalInstance = setInterval(() => {
+    handleSeriesData()
+  }, duration)
+}
+
+// 取消轮播
+const clearPieInterval = () => {
+  vChartRef.value?.dispatchAction({
+    type: 'hideTip',
+    seriesIndex: 0,
+    dataIndex: seriesDataNum
+  })
+  vChartRef.value?.dispatchAction({
+    type: 'downplay',
+    dataIndex: seriesDataNum
+  })
+  clearInterval(intervalInstance)
+  intervalInstance = null
+}
+
+// 处理鼠标聚焦高亮内容
+const handleHighlight = () => {
+  clearPieInterval()
+}
+
+// 处理鼠标取消悬浮
+const handleDownplay = () => {
+  if (props.chartConfig.option.isCarousel && !intervalInstance) {
+    // 恢复轮播
+    addPieInterval(undefined, true)
+  }
+}
+
+watch(
+  () => props.chartConfig.option.isCarousel,
+  newData => {
+    if (newData) {
+      addPieInterval(undefined, true)
+      props.chartConfig.option.legend.show = false
+    } else {
+      props.chartConfig.option.legend.show = true
+      clearPieInterval()
+    }
+  }
+)
+
+//fix 修复v-chart图表绑定联动组件视图不更新问题
+const updateVChart = async (newData: SocketReceiveMessageType) => {
+  //区分是普通请求还是ws请求
+  if (!isObject(newData) || !('dimensions' in newData)) {
+    const { data } = newData
+    const { keys, record } = useAssembleDataHooks(data)
+    vChartRef.value?.setOption({
+      dataset: {
+        dimensions: ['ts', ...keys],
+        source: [record]
+      }
+    })
+  } else {
+    //异步更新，同步更新会造成联动组件控制，图表不及时更新
+    await nextTick().then(() => {
+      vChartRef.value?.setOption(
+        {
+          ...option.value,
+          dataset: newData
+        },
+        {
+          notMerge: true
+        }
+      )
+    })
+  }
+}
+
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any, targetComponent: any) => {
+  //联动支持分组
+  /**
+   * 修复多个分组，然后下拉框联动，会影响另一个组件
+   */
+  chartEditStore.getComponentList.forEach(targetItem => {
+    if (targetItem.isGroup) {
+      targetItem.groupList?.forEach(groupItem => {
+        if (groupItem.id === props.chartConfig.id) {
+          groupItem.option.dataset = newData
+        }
+      })
+    } else {
+      if (targetItem.id === props.chartConfig.id) {
+        targetItem.option.dataset = newData
+      }
+    }
+  })
+  //
+  updateVChart(newData)
+})
+
+const handleAggChange = (value: string) => {
+  if (value === 'NONE') queryCondition.value.interval = null
+}
+
+onMounted(() => {
+  seriesDataMaxLength = dataJson.source.length
+  if (props.chartConfig.option.isCarousel) {
+    addPieInterval(undefined, true)
+  }
+})
+
+watch(
+  () => queryCondition.value,
+  newValue => {
+    const obj = {
+      startTs: newValue.timeRange.at(-2),
+      endTs: newValue.timeRange.at(-1),
+      limit: newValue.limit,
+      agg: newValue.agg,
+      interval: newValue.interval
+    }
+    if (newValue.agg !== 'NONE') {
+      Reflect.deleteProperty(obj, 'limit')
+    }
+    onChange(obj)
+  },
+  {
+    deep: true
+  }
+)
+
+// 监听事件改变
+const onChange = (v: object) => {
+  // 存储到联动数据
+  useChartInteract(props.chartConfig, useChartEditStore, { data: v })
+}
+
+</script>
+
+<style lang="scss" scoped>
+.form {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+  gap: 8px;
+}
+</style>

@@ -16,13 +16,13 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, computed, watch, ref, onMounted, unref, toRaw, toRefs } from 'vue'
+import { PropType, computed, watch, ref, onMounted, unref, toRaw, toRefs,nextTick } from 'vue'
 import VChart from 'vue-echarts'
 import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { LineChart } from 'echarts/charts'
-import config, { includes } from './config'
+import config, { includes,seriesItem } from './config'
 import { mergeTheme } from '@/packages/public/chart'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useChartDataFetch } from '@/hooks'
@@ -32,6 +32,8 @@ import dataJson from './data.json'
 import { useFullScreen } from '../../utls/fullScreen'
 import { SocketReceiveMessageType } from '@/store/external/modules/socketStore.d'
 import { useAssembleDataHooks } from '@/hooks/external/useAssembleData.hook'
+import isObject from 'lodash/isObject'
+import cloneDeep from 'lodash/cloneDeep'
 
 const props = defineProps({
   themeSetting: {
@@ -161,6 +163,45 @@ watch(
   }
 )
 
+// dataset 无法变更条数的补丁
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData: { dimensions: any }, oldData) => {
+    try {
+      if (!isObject(newData) || !('dimensions' in newData)) return
+      if (Array.isArray(newData?.dimensions)) {
+        const seriesArr = []
+        // 对oldData进行判断，防止传入错误数据之后对旧维度判断产生干扰
+        // 此处计算的是dimensions的Y轴维度，若是dimensions.length为0或1，则默认为1，排除X轴维度干扰
+        const oldDimensions =
+          Array.isArray(oldData?.dimensions) && oldData.dimensions.length >= 1 ? oldData.dimensions.length : 1
+        const newDimensions = newData.dimensions.length >= 1 ? newData.dimensions.length : 1
+        const dimensionsGap = newDimensions - oldDimensions
+        if (dimensionsGap < 0) {
+          props.chartConfig.option.series.splice(newDimensions - 1)
+        } else if (dimensionsGap > 0) {
+          if (!oldData || !oldData?.dimensions || !Array.isArray(oldData?.dimensions) || !oldData?.dimensions.length) {
+            props.chartConfig.option.series = []
+          }
+          for (let i = 0; i < dimensionsGap; i++) {
+            seriesArr.push(cloneDeep(seriesItem))
+          }
+          props.chartConfig.option.series.push(...seriesArr)
+        }
+        replaceMergeArr.value = ['series']
+        nextTick(() => {
+          replaceMergeArr.value = []
+        })
+      }
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  {
+    deep: false
+  }
+)
+
 //fix 修复v-chart图表绑定联动组件视图不更新问题
 const updateVChart = (newData: SocketReceiveMessageType) => {
   if (!newData) return

+<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,
+  levelStr: areaEnum.COUNTRY
+})
+
+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 (selectValues.levelStr = areaEnum.COUNTRY)
+  selectOptions.cityOptions = await getAreaLists(areaEnum.CITY, value as any)
+  selectValues.levelStr = areaEnum.PROVINCE
+}
+
+const onHandleSelectCity = async (value: number) => {
+  selectValues.countyValue = null
+  selectOptions.countryOptions = await getAreaLists(areaEnum.COUNTY, value)
+  selectValues.levelStr = areaEnum.CITY
+}
+
+const onHandleSubmit = () => {
+  emits('submit', selectValues)
+}
+const resetValue = () => {
+  selectValues.provinceValue = 'china'
+  selectValues.cityValue = null
+  selectValues.countyValue = null
+  selectValues.levelStr = areaEnum.COUNTRY
+  selectOptions.cityOptions = []
+  selectOptions.countryOptions = []
+}
+defineExpose({
+  resetValue
+})
+</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', //县
+  COUNTRY = 'COUNTRY', //国家
+  TOWN = 'TOWN' //镇
+}
+
+export const includes = []
+
+export const option = {
+  iconColor: 'black',
+  showIcon: false,
+  iconDistanceRight: 20,
+  iconDistanceTop: 20,
+  drillingIn: false,
+  dataset: dataMaps,
+  mapRegion: {
+    adcode: 'china',
+    showHainanIsLands: true,
+    saveSelect: {
+      levelStr: areaEnum.COUNTRY
+    }
+  },
+  tooltip: {
+    show: true
+  },
+  geo3D: {
+    show: false, // 隐藏该层，为true时会导致出现两个地图
+    map: 'centerMap',
+    roam: true,
+    regionHeight: 0,
+    emphasis: {
+      label: {
+        show: true,
+        textStyle: {
+          color: '#000',
+          fontSize: 14
+        }
+      },
+      itemStyle: {
+        color: '#ff0'
+      }
+    }
+  },
+  series: [
+    {
+      type: 'map3D',
+      map: 'centerMap',
+      name: 'centerMap',
+      regionHeight: 3,
+      label: {
+        show: true,
+        textStyle: {
+          color: '#fff',
+          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 @change="handleChangeDrillingIn" 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
+      ref="SelectCityRef"
+      :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.textStyle.color"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="大小">
+        <n-input-number
+          v-model:value="seriesList[0].label.textStyle.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 SelectCityRef = ref<typeof SelectCity>()
+
+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
+}
+
+const handleChangeDrillingIn = () => {
+  SelectCityRef.value?.resetValue()
+}
+</script>

+[
+  {
+    "name": "四川省",
+    "value": [104.10068024609373, 30.580525329665175, 20000],
+    "adcode": 510000,
+    "height": 5,
+    "itemStyle": {
+      "color": "pink",
+      "opacity": 1,
+      "borderWidth": 0.4,
+      "borderColor": "#5F9EA0"
+    }
+  },
+  {
+    "name": "湖南省",
+    "value": [111.73068512890623, 27.86754509366569, 20000],
+    "adcode": 430000,
+    "height": 4,
+    "itemStyle": {
+      "color": "blue",
+      "opacity": 1,
+      "borderWidth": 0.4,
+      "borderColor": "#5F9EA0"
+    }
+  },
+  {
+    "name": "吉林省",
+    "value": [126.45236481640623, 43.7943407914815, 20000],
+    "adcode": 220000,
+    "height": 5,
+    "itemStyle": {
+      "color": "yellow",
+      "opacity": 1,
+      "borderWidth": 0.4,
+      "borderColor": "#5F9EA0"
+    }
+  },
+  {
+    "name": "山东省",
+    "value": [118.67404450390623, 36.16387465872037, 20000],
+    "adcode": 370000,
+    "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 -->
+  <n-space vertical>
+    <n-spin :show="show">
+      <div :style="`width:${w}px;height:${h}px;`" ref="map3DRef"></div>
+    </n-spin>
+  </n-space>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, nextTick, PropType, toRefs, watch, reactive } from 'vue'
+import * as echarts from 'echarts'
+import { registerMap } from 'echarts/core'
+import 'echarts-gl'
+import config, { areaEnum } from './config'
+import { getGeoJsonMap } from '@/api/external/common'
+import dataMaps from './data.json'
+
+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 { w, h } = toRefs(props.chartConfig.attr)
+
+const map3DRef = ref()
+
+const show = ref(true)
+
+const chartInstance = 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 = async () => {
+  if (props.chartConfig.option.drillingIn) {
+    //如果是从右边配置里设置的，比如点击四川省，然后点击返回
+    const savePopParent = saveHistoryParent.value.pop()
+    let saveAdcode: any = savePopParent?.adcode
+    saveLevelStr.level = savePopParent?.level as string
+    if (!savePopParent) {
+      saveAdcode = getParentAdcode(props.chartConfig.option.mapRegion.adcode)
+      saveLevelStr.level = (regionMapParentArea as any)[props.chartConfig.option.mapRegion.saveSelect.levelStr]
+    }
+    if (saveAdcode === 0) {
+      saveAdcode = 'china'
+      saveLevelStr.level = 'COUNTRY'
+    }
+    await getGeojson(saveAdcode)
+    const adcode = saveAdcode === 100000 ? 'china' : saveAdcode
+    props.chartConfig.option.geo3D.map = adcode
+    props.chartConfig.option.series.forEach((item: any) => {
+      if (item.type === 'map3D') item.map = adcode
+      item.data = props.chartConfig.option.dataset
+    })
+    handleSetOption(chartInstance.value, props.chartConfig.option)
+    handleDataPoint(adcode)
+  }
+}
+
+const regionMapParentArea = {
+  [areaEnum.PROVINCE]: areaEnum.COUNTRY, //省份的上一级 中国
+  [areaEnum.CITY]: areaEnum.PROVINCE, //城市的上一级 省份
+  [areaEnum.COUNTY]: areaEnum.CITY, //县或者区的上一级 城市
+  [areaEnum.TOWN]: areaEnum.COUNTY //镇的上一级 县或者区
+}
+
+//地图点击
+const handleMap3DClick = async (params: any) => {
+  if (props.chartConfig.option.drillingIn) {
+    const { name } = params
+    saveGeojson.value?.features.forEach((item: any) => {
+      if (item.properties.name === name) {
+        const level = item.properties.level.toUpperCase()
+        const adcode = item.properties.adcode
+        if (level === 'DISTRICT') return
+        if(String(adcode).startsWith('15') && level===areaEnum.CITY) return
+        props.chartConfig.option.mapRegion.adcode = adcode
+        saveLevelStr.level = level
+        handleDataPoint(adcode)
+        saveHistoryParent.value.push({
+          adcode: item.properties.parent.adcode,
+          level: (regionMapParentArea as any)[level]
+        })
+      }
+    })
+  }
+}
+
+const saveGeojson: any = ref({}) // 保存geojson
+
+const chinaDefaultRegionId = ref(100000) //如果是china则adcode为100000
+
+const saveLevelStr = reactive({
+   // 地区级别
+   level: ''
+})
+
+//父级地区编码和级别接口
+interface HistoryParentType {
+  adcode: number
+  level: string
+}
+
+const saveHistoryParent = ref<HistoryParentType[]>([])
+
+//动态注册地图
+const getGeojson = (regionId: any) => {
+  try {
+    return new Promise<boolean>(resolve => {
+      const { levelStr } = props.chartConfig.option.mapRegion.saveSelect //右侧配置项获取的行政级别
+      getGeoJsonMap(
+        regionId === 'china' ? chinaDefaultRegionId.value : regionId,
+        !saveLevelStr.level ? levelStr : saveLevelStr.level
+      ).then(res => {
+        const { geoJson, name, code, level } = res.data
+        const geoJsonFile = JSON.parse(geoJson)
+        if (!geoJsonFile) return
+        saveGeojson.value = geoJsonFile
+        const nameChina = name === '中国' ? 'china' : name
+        registerMap(level === areaEnum.COUNTRY ? nameChina : code, { geoJSON: geoJsonFile as any, specialAreas: {} })
+        show.value = false
+        resolve(true)
+      })
+    })
+  } catch (error) {
+    show.value = false
+    console.error('注册地图出错', error)
+    //注册出错则注册空的，不然在选择正确的adcode，则视图无法更新
+    registerMap(props.chartConfig.option.mapRegion.adcode, { geoJSON: {} as any, specialAreas: {} })
+  }
+}
+
+
+//传adcode 获取上级
+const getParentAdcode = (adcode: number) => {
+  let adcodeNum = 100000
+  saveGeojson.value?.features.forEach((item: any) => {
+    if (item.properties.adcode === adcode) {
+      adcodeNum = item.properties.parent.adcode
+    }
+  })
+  return adcodeNum
+}
+
+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) => {
+    handleMap3DClick(e)
+  })
+}
+
+// 手动触发渲染
+const handleSetOption = (instance: any, option: any) => {
+  if (!instance) return
+  try {
+    instance.clear()
+    instance.setOption(option)
+  } catch (error) {
+    console.error('触发渲染出错', error)
+  }
+}
+
+onMounted(() => {
+  initMap()
+})
+
+//处理数据标点
+const handleDataPoint = (newData: any) => {
+  if (newData === 'china') {
+    props.chartConfig.option.dataset = dataMaps
+  } else {
+    props.chartConfig.option.dataset = dataMaps.filter((item: any) => item.adcode === newData)
+  }
+}
+
+//监听地图展示区域发生变化
+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)
+      handleDataPoint(newData)
+    } 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>

+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { OverrideMapAmapConfig } from './index'
+import { chartInitConfig } from '@/settings/designSetting'
+import cloneDeep from 'lodash/cloneDeep'
+import dataJson from './data.json'
+
+export type dataExtraInfoType = typeof dataJson.markers[number]['extraInfo'] //data.json下的extraInfo类型
+
+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',
+  LIGHT = 'light',
+  WHITES_MOKE = 'whitesmoke',
+  FRESH = 'fresh',
+  GREY = 'grey',
+  GRAFFITI = 'graffiti',
+  MACARON = 'macaron',
+  BLUE = 'blue',
+  DARKBLUE = 'darkblue',
+  WINE = 'wine',
+  WEIXIN = 'tileLayer'
+}
+
+export enum LangEnum {
+  ZH_CN = 'zh_cn',
+  EN = 'en',
+  ZH_EN = 'zh_en'
+}
+
+export enum ViewModeEnum {
+  PLANE = '2D',
+  STEREOSCOPIC = '3D'
+}
+
+export enum FeaturesEnum {
+  BG = 'bg',
+  POINT = 'point',
+  ROAD = 'road',
+  BUILDING = 'building'
+}
+
+export enum MarkerEnum {
+  // 圆圈
+  CIRCLE_MARKER = 'CircleMarker',
+  // 定位标点
+  MARKER = 'Marker',
+  // 暂无
+  NONE = 'none'
+}
+
+export const option = {
+  dataset: dataJson,
+  mapOptions: {
+    pitch: 60,
+    skyColor: '#53A9DE',
+    amapKey: 'd5f3e16589dbecae64d05fe90e2ba4f2',
+    amapStyleKey: ThemeEnum.DARK,
+    amapStyleKeyCustom: '',
+    amapLon: 104.108689,
+    amapLat: 30.66176,
+    amapZindex: 11,
+    marker: {
+      fillColor: '#E98984FF',
+      fillOpacity: 0.5,
+      strokeColor: 'white',
+      strokeWeight: 2,
+      strokeOpacity: 0.5,
+      zIndex: 10,
+      bubble: true,
+      cursor: 'pointer',
+      clickable: true
+    },
+    mapMarkerType: MarkerEnum.MARKER,
+    viewMode: ViewModeEnum.PLANE,
+    lang: LangEnum.ZH_CN,
+    features: [FeaturesEnum.BG, FeaturesEnum.POINT, FeaturesEnum.ROAD, FeaturesEnum.BUILDING]
+  }
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = OverrideMapAmapConfig.key
+  public attr = { ...chartInitConfig, w: 1000, h: 800, zIndex: -1 }
+  public chartConfig = cloneDeep(OverrideMapAmapConfig)
+  public option = cloneDeep(option)
+}

+<template>
+  <collapse-item name="基础" :expanded="true">
+    <setting-item-box name="语言类型" :alone="true">
+      <setting-item>
+        <n-select size="small" v-model:value="optionData.mapOptions.lang" :options="langOptions" />
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="Key" :alone="true">
+      <setting-item name="请务必使用自己的高德应用 key">
+        <n-input v-model:value="optionData.mapOptions.amapKey" size="small"></n-input>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="自定义地图样式ID" :alone="true">
+      <setting-item>
+        <n-input size="small" v-model:value="optionData.mapOptions.amapStyleKeyCustom" />
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+  <collapse-item name="地图" :expanded="true">
+    <setting-item-box name="主题">
+      <setting-item>
+        <n-select size="small" v-model:value="optionData.mapOptions.amapStyleKey" :options="themeOptions" />
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="内容" :alone="true">
+      <n-checkbox-group v-model:value="optionData.mapOptions.features">
+        <n-space item-style="display: flex;">
+          <n-checkbox :value="item.value" :label="item.label" v-for="(item, index) in featuresOptions" :key="index" />
+        </n-space>
+      </n-checkbox-group>
+    </setting-item-box>
+    <setting-item-box name="位置">
+      <setting-item name="经度">
+        <n-input-number v-model:value="optionData.mapOptions.amapLon" :show-button="false" size="small">
+          <template #suffix>°</template>
+        </n-input-number>
+      </setting-item>
+      <setting-item name="纬度">
+        <n-input-number v-model:value="optionData.mapOptions.amapLat" :show-button="false" size="small">
+          <template #suffix>°</template>
+        </n-input-number>
+      </setting-item>
+      <setting-item name="初始缩放">
+        <n-input-number v-model:value="optionData.mapOptions.amapZindex" :min="0" size="small"></n-input-number>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="模式" :alone="true">
+      <setting-item>
+        <n-radio-group v-model:value="optionData.mapOptions.viewMode" name="radiogroup">
+          <n-space>
+            <n-radio v-for="song in viewModeOptions" :key="song.value" :value="song.value">
+              {{ song.label }}
+            </n-radio>
+          </n-space>
+        </n-radio-group>
+      </setting-item>
+    </setting-item-box>
+    <template v-if="optionData.mapOptions.viewMode === '3D'">
+      <setting-item-box>
+        <setting-item name="天空色">
+          <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.mapOptions.skyColor"></n-color-picker>
+        </setting-item>
+        <setting-item name="俯仰角">
+          <n-input-number v-model:value="optionData.mapOptions.pitch" :min="0" :max="83" size="small"></n-input-number>
+        </setting-item>
+      </setting-item-box>
+    </template>
+  </collapse-item>
+  <collapse-item name="标记" :expanded="true">
+    <setting-item-box name="样式">
+      <setting-item name="类型">
+        <n-select size="small" v-model:value="optionData.mapOptions.mapMarkerType" :options="MarkerOptions" />
+      </setting-item>
+      <setting-item name="颜色">
+        <n-color-picker v-model:value="optionData.mapOptions.marker.fillColor" size="small"></n-color-picker>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { option, MarkerEnum, ThemeEnum, LangEnum, ViewModeEnum, FeaturesEnum } from './config'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+
+defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+const themeOptions = [
+  {
+    value: ThemeEnum.NORMAL,
+    label: '标准'
+  },
+  {
+    value: ThemeEnum.DARK,
+    label: '幻影黑'
+  },
+  {
+    value: ThemeEnum.LIGHT,
+    label: '月光银'
+  },
+  {
+    value: ThemeEnum.WHITES_MOKE,
+    label: '远山黛'
+  },
+  {
+    value: ThemeEnum.FRESH,
+    label: '草色青'
+  },
+  {
+    value: ThemeEnum.GREY,
+    label: '雅士灰'
+  },
+  {
+    value: ThemeEnum.GRAFFITI,
+    label: '涂鸦'
+  },
+  {
+    value: ThemeEnum.MACARON,
+    label: '马卡龙'
+  },
+  {
+    value: ThemeEnum.BLUE,
+    label: '靛青蓝'
+  },
+  {
+    value: ThemeEnum.DARKBLUE,
+    label: '极夜蓝'
+  },
+  {
+    value: ThemeEnum.WINE,
+    label: '酱籽'
+  },
+  {
+    value: ThemeEnum.WEIXIN,
+    label: '卫星'
+  }
+]
+
+const langOptions = [
+  {
+    value: LangEnum.ZH_CN,
+    label: '中文简体'
+  },
+  {
+    value: LangEnum.EN,
+    label: '英文'
+  },
+  {
+    value: LangEnum.ZH_EN,
+    label: '中英文对照'
+  }
+]
+
+const viewModeOptions = [
+  {
+    value: ViewModeEnum.PLANE,
+    label: '2D'
+  },
+  {
+    value: ViewModeEnum.STEREOSCOPIC,
+    label: '3D'
+  }
+]
+
+const featuresOptions = [
+  {
+    value: FeaturesEnum.BG,
+    label: '显示地图背景'
+  },
+  {
+    value: FeaturesEnum.POINT,
+    label: '显示标识'
+  },
+  {
+    value: FeaturesEnum.ROAD,
+    label: '显示道路'
+  },
+  {
+    value: FeaturesEnum.BUILDING,
+    label: '显示建筑'
+  }
+]
+
+const MarkerOptions = [
+  {
+    value: MarkerEnum.CIRCLE_MARKER,
+    label: '圆形标点'
+  },
+  {
+    value: MarkerEnum.MARKER,
+    label: '定位标点'
+  },
+  {
+    value: MarkerEnum.NONE,
+    label: '隐藏标点'
+  }
+]
+</script>

+{
+  "markers": [
+    {
+      "name": "模拟11111111111",
+      "value": 20,
+      "position": [103.856504, 30.687278],
+      "extraInfo": {
+        "tbDeviceId": "@xxxxxxxxxxx",
+        "name": "模拟11111111111",
+        "alias": "模拟11111111111",
+        "organizationDTO": {
+          "name": "模拟11111111111"
+        },
+        "deviceState": "INACTIVE",
+        "deviceProfile": {
+          "transportType": "MQTT"
+        },
+        "deviceInfo": {
+          "address": "四川省",
+          "longitude": 103.856504,
+          "latitude": 30.687278
+        }
+      }
+    },
+    {
+      "name": "模拟22222222222",
+      "value": 30,
+      "position": [104.095368, 30.716787],
+      "extraInfo": {
+        "tbDeviceId": "@xxxxxxxxxxxxxxx",
+        "name": "模拟22222222222",
+        "alias": "模拟22222222222",
+        "organizationDTO": {
+          "name": "模拟22222222222"
+        },
+        "deviceState": "INACTIVE",
+        "deviceProfile": {
+          "transportType": "TCP"
+        },
+        "deviceInfo": {
+          "address": "四川省",
+          "longitude": 104.095368,
+          "latitude": 30.716787
+        }
+      }
+    }
+  ]
+}

+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('OverrideMapAmap', true)
+
+export const OverrideMapAmapConfig: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: '高德地图',
+  category: ChatCategoryEnum.MAP,
+  categoryName: ChatCategoryEnumName.MAP,
+  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.COMMON,
+  image: 'map_amap.png'
+}

+<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>
+</template>
+
+<script setup lang="ts">
+import { ref, PropType, toRefs, watch } 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 { isArray } from '@/utils'
+import djh from './images/djh.png'
+import online from './images/online.png'
+import lx1 from './images/lx1.png'
+import { getDeviceActiveTime, getDeviceList } from '@/api/external/common/index'
+import dayjs from 'dayjs'
+import SearchBox from './components/SearchBox.vue'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const modelShow = ref(false)
+
+const showSearchBox = ref(false)
+
+let {
+  amapKey,
+  amapStyleKey,
+  amapLon,
+  amapLat,
+  amapZindex,
+  mapMarkerType,
+  lang,
+  amapStyleKeyCustom,
+  features,
+  viewMode,
+  pitch,
+  skyColor,
+  marker
+} = toRefs(props.chartConfig.option.mapOptions)
+
+//官方没有高德地图api的ts，所以类型全用的any
+let mapIns: any = null
+let markers: any = []
+let AMapIns: any = null
+const vChartRef = ref<HTMLElement>()
+
+const initMap = (newData: any) => {
+  // 初始化
+  AMapLoader.load({
+    key: amapKey.value, //api服务key--另外需要在public中使用安全密钥！！！
+    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+    plugins: ['AMap.PlaceSearch', 'AMap.AutoComplete'] // 需要使用的的插件列表
+  })
+    .then(AMap => {
+      AMapIns = AMap
+      mapIns = new AMap.Map(vChartRef.value, {
+        resizeEnable: true,
+        zoom: amapZindex.value, // 地图显示的缩放级别
+        center: [amapLon.value, amapLat.value],
+        lang: lang.value,
+        features: features.value,
+        pitch: pitch.value, // 地图俯仰角度，有效范围 0 度- 83 度
+        skyColor: skyColor.value,
+        viewMode: viewMode.value, // 地图模式
+        willReadFrequently: true
+      })
+      dataHandle(props.chartConfig.option.dataset) //处理地图标点
+      let satellite = new AMap.TileLayer.Satellite()
+      let roadNet = new AMap.TileLayer.RoadNet()
+      if (newData.amapStyleKey === ThemeEnum.WEIXIN) {
+        mapIns.add([satellite, roadNet])
+      } else {
+        mapIns.remove([satellite, roadNet])
+        mapIns.setMapStyle(
+          `amap://styles/${amapStyleKeyCustom.value !== '' ? amapStyleKeyCustom.value : amapStyleKey.value}`
+        )
+      }
+      //点击地图任意地方关闭infoWindow窗体
+      mapIns.on('click', () => {
+        mapIns.clearInfoWindow()
+      })
+    })
+    .catch(e => {
+      console.error(e)
+    })
+}
+
+//创建信息弹窗
+const createInfoWindow = async (extraInfo: dataExtraInfoType) => {
+  try {
+    const { name, alias, organizationDTO, deviceState, deviceProfile, deviceInfo, tbDeviceId } = extraInfo
+    if (tbDeviceId.startsWith('@')) return //假的模拟数据则终止
+    const res = await getDeviceActiveTime(tbDeviceId) //查询设备最后离线时间
+    let { lastUpdateTs } = res[0]
+    const lastUpdateFormatTs = dayjs(lastUpdateTs).format('YYYY-MM-DD HH:mm:ss')
+    return `
+        <div style="width:15vw;height:18vh;background-color:white;">
+         <div style="margin:0px 10px">
+          <div style="display:flex;justify-content:space-between; margin:20px 0px;">
+            <div style="font-size:16px;font-weight:bold">${alias || name}</div>
+            ${
+              deviceState === 'INACTIVE'
+                ? `<div style="display:flex;align-items:center;"><img style="width:15px;height:15px" src="${djh}" class="mr-1">待激活</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>
+          <div>所属组织：${organizationDTO.name}</div>
+          <div style="margin-top:6px;">接入协议：${deviceProfile.transportType}</div>
+          <div style="margin-top:6px;">
+            设备位置：${!deviceInfo.address ? '该设备暂无地理位置' : deviceInfo.address}
+          </div>
+          <div style="margin-top:6px;">
+            ${
+              deviceState === 'ONLINE' ? '在线' : deviceState === 'INACTIVE' ? '创建' : '离线'
+            }时间：${lastUpdateFormatTs}
+            </div>
+            </div>
+          </div>
+          `
+  } catch (e) {
+    console.error(e)
+  }
+}
+
+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({
+    extraInfo: markerItem.extraInfo
+  })
+  markerInstance.setLabel({
+    content: markerItem.extraInfo.alias || markerItem.extraInfo.name
+  })
+  markerInstance.on('click', async (e: any) => {
+    const { extraInfo } = e.target.getExtData()
+    let infoWindow = new AMapIns.InfoWindow({
+      content: await createInfoWindow(extraInfo),
+      offset: new AMapIns.Pixel(0, -50)
+    })
+    infoWindow.open(mapIns, e.target.getPosition())
+  })
+}
+
+const dataHandle = (newData: dataJsonType) => {
+  if (!mapIns && !AMapIns) {
+    initMap(props.chartConfig.option)
+    return
+  }
+  if (isArray(newData.markers)) {
+    // 先清除旧标记
+    mapIns.remove(markers)
+    markers = []
+    // 记录新标记
+    if (mapMarkerType.value === MarkerEnum.MARKER) {
+      newData.markers.forEach((markerItem: dataJsonMarkersType) => {
+        const markerInstance = new AMapIns.Marker({
+          position: [markerItem.position[0], markerItem.position[1]],
+          offset: new AMapIns.Pixel(-13, -30)
+        })
+        // markers.push(markerInstance) 原作者这种方式添加，属于JS API 1.4.8版本的
+        // markerInstance.setMap(mapIns)
+        mapIns.add(markerInstance)
+        mapClick(markerInstance, markerItem)
+      })
+    } else if (mapMarkerType.value === MarkerEnum.CIRCLE_MARKER) {
+      newData.markers.forEach((markerItem: dataJsonMarkersType) => {
+        const markerInstance = new AMapIns.CircleMarker({
+          center: [
+            !markerItem.position[0] ? 0 : markerItem.position[0],
+            !markerItem.position[1] ? 0 : markerItem.position[1]
+          ],
+          radius: markerItem.value, //圆圈半径大小
+          ...marker.value
+        })
+        // markers.push(markerInstance) //原作者这种方式添加，属于JS API 1.4.8版本的
+        // markerInstance.setMap(mapIns)
+        mapIns.add(markerInstance)
+        mapClick(markerInstance, markerItem) // circle点击无效
+      })
+    }
+  }
+}
+
+const stopWatch = watch(
+  () => props.chartConfig.option.mapOptions,
+  option => {
+    initMap(option)
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+
+watch(
+  () => props.chartConfig.option.dataset,
+  newData => {
+    try {
+      dataHandle(newData)
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  {
+    deep: false
+  }
+)
+
+// 预览
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  stopWatch()
+  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>

@@ -4,9 +4,12 @@ import { getAreaList } from '@/api/external/common/index'
 import { areaEnum } from '../config'
 
 const props = defineProps({
-  drillingIn:{
-    type:Boolean,
-    default:false
+  drillingIn: {
+    type: Boolean,
+    default: false
+  },
+  optionData: {
+    type: Object
   }
 })
 
@@ -21,7 +24,8 @@ const selectOptions = reactive({
 const selectValues = reactive({
   provinceValue: 'china',
   cityValue: null,
-  countyValue: null
+  countyValue: null,
+  levelStr: areaEnum.COUNTRY
 })
 
 const getAreaLists = async (level = areaEnum.PROVINCE, parentId = 1) => {
@@ -39,23 +43,39 @@ onMounted(async () => {
     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
+  if (value === 'china') return (selectValues.levelStr = areaEnum.COUNTRY)
   selectOptions.cityOptions = await getAreaLists(areaEnum.CITY, value as any)
+  selectValues.levelStr = areaEnum.PROVINCE
 }
 
 const onHandleSelectCity = async (value: number) => {
   selectValues.countyValue = null
   selectOptions.countryOptions = await getAreaLists(areaEnum.COUNTY, value)
+  selectValues.levelStr = areaEnum.CITY
 }
 
 const onHandleSubmit = () => {
   emits('submit', selectValues)
 }
+
+const resetValue = () => {
+  selectValues.provinceValue = 'china'
+  selectValues.cityValue = null
+  selectValues.countyValue = null
+  selectValues.levelStr = areaEnum.COUNTRY
+  selectOptions.cityOptions = []
+  selectOptions.countryOptions = []
+}
+defineExpose({
+  resetValue
+})
 </script>
 
 <template>

@@ -7,22 +7,27 @@ import dataJson from './data.json'
 
 //省市区枚举
 export const enum areaEnum {
-  PROVINCE = 'PROVINCE',
-  CITY = 'CITY',
-  COUNTY = 'COUNTY'
+  PROVINCE = 'PROVINCE',//省份
+  CITY = 'CITY',//城市
+  COUNTY = 'COUNTY',//县
+  COUNTRY = 'COUNTRY',//国家
+  TOWN = 'TOWN'//镇
 }
 export const includes = []
 
 export const option = {
-  iconColor:'black',
-  showIcon:false,
-  iconDistanceRight:20,
-  iconDistanceTop:20,
+  iconColor: 'black',
+  showIcon: false,
+  iconDistanceRight: 20,
+  iconDistanceTop: 20,
   drillingIn: false,
   dataset: dataJson,
   mapRegion: {
     adcode: 'china',
-    showHainanIsLands: true
+    showHainanIsLands: true,
+    saveSelect: {
+      levelStr: areaEnum.COUNTRY
+    }
   },
   tooltip: {
     show: true,
@@ -156,7 +161,7 @@ export const option = {
         shadowOffsetY: 2,
         shadowBlur: 10
       }
-    },
+    }
   ]
 }
 export const MapDefaultConfig = { ...option }

@@ -4,7 +4,7 @@
   <CollapseItem name="地图" :expanded="true">
     <SettingItemBox name="开启下钻">
       <SettingItem name="">
-        <n-switch v-model:value="optionData.drillingIn" size="small"></n-switch>
+        <n-switch @change="handleChangeDrillingIn" v-model:value="optionData.drillingIn" size="small"></n-switch>
       </SettingItem>
     </SettingItemBox>
     <SettingItemBox name="返回图标">
@@ -14,11 +14,7 @@
     </SettingItemBox>
     <SettingItemBox name="图标颜色">
       <SettingItem name="">
-        <n-color-picker
-          size="small"
-          :modes="['hex']"
-          v-model:value="optionData.iconColor"
-        ></n-color-picker>
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.iconColor"></n-color-picker>
       </SettingItem>
     </SettingItemBox>
     <SettingItemBox name="图标距离">
@@ -39,7 +35,12 @@
         ></n-input-number>
       </SettingItem>
     </SettingItemBox>
-    <SelectCity :drillingIn="optionData.drillingIn" @submit="onHandleSelectValues" />
+    <SelectCity
+      ref="SelectCityRef"
+      :optionData="optionData"
+      :drillingIn="optionData.drillingIn"
+      @submit="onHandleSelectValues"
+    />
     <SettingItemBox name="区域颜色">
       <SettingItem name="0%处颜色">
         <n-color-picker
@@ -281,6 +282,8 @@ const props = defineProps({
   }
 })
 
+const SelectCityRef = ref<typeof SelectCity>()
+
 const initMapRegionOptions = () => {
   mapChinaJson.features.forEach((element: any) => {
     if (element.properties.name) {
@@ -300,6 +303,7 @@ const mapRegion = computed(() => {
 
 const onHandleSelectValues = (values: any) => {
   const { cityValue, countyValue, provinceValue } = values
+  props.optionData.mapRegion.saveSelect = values
   props.optionData.mapRegion.adcode = countyValue
     ? countyValue
     : cityValue
@@ -308,4 +312,8 @@ const onHandleSelectValues = (values: any) => {
     ? 'china'
     : provinceValue
 }
+
+const handleChangeDrillingIn = () => {
+  SelectCityRef.value?.resetValue()
+}
 </script>

@@ -2,22 +2,27 @@
   "point": [
     {
       "name": "北京",
+      "adcode": 110000,
       "value": [116.405285, 39.904989, 200]
     },
     {
       "name": "郑州",
+      "adcode": 410000,
       "value": [113.665412, 34.757975, 888]
     },
     {
       "name": "青海",
+      "adcode": 630000,
       "value": [101.778916, 36.623178, 666]
     },
     {
       "name": "宁夏回族自治区",
+      "adcode": 640000,
       "value": [106.278179, 38.46637, 66]
     },
     {
       "name": "哈尔滨市",
+      "adcode": 230000,
       "value": [126.642464, 45.756967, 101]
     }
   ],