Merge branch 'main_dev'

# Conflicts:
#	src/api/external/common/index.ts
#	src/assets/images/chart/photos/carousel1.jpeg
#	src/assets/images/chart/photos/carousel2.jpeg
#	src/packages/components/Informations/Mores/Image/index.vue
#	src/packages/components/external/Charts/Lines/OverrideLineForDeviceHistoryQuery/index.vue
#	src/packages/components/external/Charts/Maps/AddThreeDimensionalMap/config.ts
#	src/packages/components/external/Charts/Maps/AddThreeDimensionalMap/index.vue
#	src/packages/components/external/Charts/Maps/OverrideMapAmap/components/SearchBox.vue
#	src/packages/components/external/Charts/Maps/OverrideMapAmap/config.ts
#	src/packages/components/external/Charts/Maps/OverrideMapAmap/config.vue
#	src/packages/components/external/Charts/Maps/OverrideMapAmap/data.json
#	src/packages/components/external/Charts/Maps/OverrideMapAmap/images/djh.png
#	src/packages/components/external/Charts/Maps/OverrideMapAmap/images/lx1.png
#	src/packages/components/external/Charts/Maps/OverrideMapAmap/images/online.png
#	src/packages/components/external/Charts/Maps/OverrideMapAmap/index.ts
#	src/packages/components/external/Charts/Maps/OverrideMapAmap/index.vue
#	src/packages/components/external/Charts/Maps/OverrideMapBase/config.ts
#	src/packages/components/external/Charts/Maps/OverrideMapBase/index.vue
#	src/packages/components/external/Informations/Mores/SingleCamera/components/VideoPlay.vue
#	src/packages/components/external/Informations/Mores/SingleCamera/config.vue
#	src/packages/components/external/Tables/Tables/OverrideTableScrollBoard/index.vue
#	src/packages/index.ts
#	src/views/chart/ContentEdit/components/EditTools/external/index.ts

 # Proxy
-VITE_GLOB_PROXY = [["/api", "http://222.180.200.114:48080/api"]]
-# VITE_GLOB_PROXY = [["/api", "http://192.168.10.118:8080/api"]]
+VITE_GLOB_PROXY = [["/api", "http://locahost:8080/api"]]
 
 # Api prefix
 VITE_GLOB_API_URL = /api
 
-# 
+#
 VITE_GLOB_API_URL_PREFIX = /yt
 
 # 内容安全协议

 # Proxy
-VITE_GLOB_PROXY = [["/api", "http://222.180.200.114:48080/api"]]
+VITE_GLOB_PROXY = /api
 
 # Api prefix
 VITE_GLOB_API_URL = /api

@@ -32,6 +32,6 @@ module.exports = {
     'vue/no-unused-vars': 'off',
     'vue/multi-word-component-names': 'off',
     'vue/valid-template-root': 'off',
-    'vue/no-mutating-props': 'off',
+    'vue/no-mutating-props': 'off'
   }
 }

@@ -4,3 +4,4 @@ dist
 dist-ssr
 *.local
 .vscode
+.idea

@@ -12,6 +12,7 @@
     "preview": "vite preview",
     "preview:alone": "vite preview --mode alone.prod",
     "new": "plop --plopfile ./plop/plopfile.js",
+    "newCom": "plop --plopfile ./plop/external/plopfile.js",
     "postinstall": "husky install",
     "lint": "eslint --ext .js,.jsx,.ts,.tsx,.vue src",
     "lint:fix": "eslint --ext .js,.jsx,.ts,.tsx,.vue src --fix"

+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
+import { {{name}}Config } 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']
+
+export const seriesItem = {
+}
+
+export const option = {
+  dataset: { ...dataJson },
+  series: [seriesItem, seriesItem]
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = {{name}}Config.key
+  public chartConfig = cloneDeep({{name}}Config)
+  // 图表配置项
+  public option = echartOptionProfixHandle(option, includes)
+}

+<template>
+  <!-- Echarts 全局设置 -->
+  <global-setting :optionData="optionData"></global-setting>
+  <CollapseItem name="xxx" :expanded="true">
+    <SettingItemBox name="xx">
+      <SettingItem name="xx">
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType, computed } from 'vue'
+import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
+
+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 { 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('{{name}}', true)
+
+export const {{name}}Config: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: 'xxx',
+  category: ChatCategoryEnum.BAR,
+  categoryName: ChatCategoryEnumName.BAR,
+  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.ECHARTS,
+  image: 'bar_x.png'
+}

+<template>
+  <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>
+</template>
+
+<script setup lang="ts">
+import { ref, nextTick, computed, watch, PropType, onMounted } 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 } from 'echarts/charts'
+import config, { includes, seriesItem } 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'
+import isObject from 'lodash/isObject'
+import dataJson from './data.json'
+import cloneDeep from 'lodash/cloneDeep'
+import { useAssembleDataHooks } from '@/hooks/external/useAssembleData.hook'
+import { SocketReceiveMessageType } from '@/store/external/modules/socketStore.d'
+
+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, GridComponent, TooltipComponent, LegendComponent])
+
+const chartEditStore = useChartEditStore()
+
+const replaceMergeArr = ref<string[]>()
+
+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
+  }
+)
+
+//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 => {
+ //联动支持分组
+    /**
+     * 修复多个分组，然后下拉框联动，会影响另一个组件
+     */
+  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)
+})
+</script>

+module.exports = {
+  description:
+    'create a component（在packages/components/external,一般是需要重写的组件,这里写的示例生成在src/packages/components/external/Charts/Bars目录下）',
+  prompts: [
+    {
+      type: 'input',
+      name: 'name',
+      message: 'Please enter component name，such as "OverrideComponentName":',
+      validate(value) {
+        if (!value || value.trim === '') {
+          return 'component name is required'
+        }
+        return true
+      }
+    }
+  ],
+  actions: data => {
+    const dataName = data.name
+
+    const actions = [
+      {
+        type: 'add',
+        path: `${process.cwd()}/src/packages/components/external/Charts/Bars${dataName}/config.ts`,
+        templateFile: './component-template/config.ts.hbs',
+        data: {
+          name: data.name
+        }
+      },
+      {
+        type: 'add',
+        path: `${process.cwd()}/src/packages/components/external/Charts/Bars${dataName}/config.vue`,
+        templateFile: './component-template/config.vue.hbs',
+        data: {
+          name: data.name
+        }
+      },
+      {
+        type: 'add',
+        path: `${process.cwd()}/src/packages/components/external/Charts/Bars${dataName}/data.json`,
+        templateFile: './component-template/data.json.hbs',
+        data: {
+          name: data.name
+        }
+      },
+      {
+        type: 'add',
+        path: `${process.cwd()}/src/packages/components/external/Charts/Bars${dataName}/index.ts`,
+        templateFile: './component-template/index.ts.hbs',
+        data: {
+          name: data.name
+        }
+      },
+      {
+        type: 'add',
+        path: `${process.cwd()}/src/packages/components/external/Charts/Bars${dataName}/index.vue`,
+        templateFile: './component-template/index.vue.hbs',
+        data: {
+          name: data.name
+        }
+      }
+    ]
+
+    return actions
+  }
+}

+const componentsGenerator = require('./component-template/prompt')
+
+module.exports = plop => {
+  plop.setGenerator('component', componentsGenerator)
+}

@@ -16,7 +16,9 @@ enum Api {
   VIDEOURL = '/video/url/',
   GEOJSONURL = '/map/geo_json/',
   DEVICE_URL = '/device',
-  GET_ATTRBUTELIST = '/device/attributes/'
+  GET_ATTRBUTELIST = '/device/attributes/',
+  GET_DEVICE_LATEST = '/plugins/telemetry/DEVICE/',
+  DEVICE_ATTR = '/device/attributes',
 }
 
 export const getDictItemByCode = (value: string) => {
@@ -111,7 +113,7 @@ export const getVideoUrl = (id: string) =>
   })
 
 //获取行政区域
-export const getGeoJsonMap = (code: number, level: string) =>
+export const getGeoJsonMap = (code: number | string, level: string) =>
   defHttp.get({
     url: `${Api.GEOJSONURL}${code}/${level}`
   })
@@ -127,3 +129,20 @@ export const getAttribute = (deviceProfileId: string) =>
   defHttp.get({
     url: `${Api.GET_ATTRBUTELIST}${deviceProfileId}`
   })
+
+// 获取设备最新数据
+export const getDeviceLatest = (tbDeviceId: string) =>
+defHttp.get({
+  url: `${Api.GET_DEVICE_LATEST}${tbDeviceId}/values/timeseries`
+}, {
+  joinPrefix: false
+})
+
+//获取产品属性
+export const getProfileAttrs = (params: { deviceProfileId: string; dataType?: string }) => {
+  const { deviceProfileId, dataType } = params;
+  return defHttp.get({
+    url: `${Api.DEVICE_ATTR}/${deviceProfileId}`,
+    params: { dataType },
+  });
+};
\ No newline at end of file

-import { RequestBodyEnum, RequestParams } from "@/enums/httpEnum"
+import { RequestBodyEnum, RequestHttpEnum, RequestParams } from "@/enums/httpEnum"
 import { ExtraRequestConfigType } from "@/store/external/modules/extraComponentInfo.d"
 import { RequestConfigType } from "@/store/modules/chartEditStore/chartEditStore.d"
 import { isShareMode } from "@/views/share/hook"
@@ -115,6 +115,22 @@ const handleParams = (Params: Recordable) => {
   return Object.keys(Params).filter(Boolean).reduce((prev, next) => ({ ...prev, [next]: Params[next] }), {})
 }
 
+//post请求动态追加query参数
+const objConvertQuery= (data:Recordable)=> {
+  const _result = [];
+  for (const key in data) {
+    const value = data[key];
+    if (value.constructor == Array) {
+      value.forEach(function(_value) {
+        _result.push(key + "=" + _value);
+      });
+    } else {
+      _result.push(key + '=' + value);
+    }
+  }
+  return _result.join('&');
+}
+
 export const customRequest = async (request: RequestConfigType) => {
   const { requestHttpType, requestParams, requestParamsBodyType, requestOriginUrl } = request as ExtraRequestConfigType
   let { requestUrl } = request as ExtraRequestConfigType
@@ -130,18 +146,18 @@ export const customRequest = async (request: RequestConfigType) => {
   const body = transformBodyValue(Body, requestParamsBodyType)
 
   /**
-   * ft 修改post请求针对这种接口(/api/yt/device,设备列表分页)，是post请求，body体一定要携带内容，空内容也可以
+   * ft 修改post请求针对这种接口(/api/yt/device,设备列表分页)，是post请求,page和pageSize是query参数，body可以不传内容
    * 修改后的代码在注释之间，并标注好源代码和修改后代码，方便回溯
-   * 源代码 data: body,
-   * 修改后代码   data: !body? {"":null} :body,
+   * 源代码 url: requestUrl
+   * 修改后代码 requestHttpType === RequestHttpEnum.GET.toUpperCase() ? requestUrl: `${requestUrl}?${objConvertQuery(Params)}
    */
   Params = handleParams(Params)
   return customHttp.request<any>({
-    url: requestUrl,
+    url: requestHttpType === RequestHttpEnum.GET.toUpperCase() ? requestUrl: `${requestUrl}?${objConvertQuery(Params)}`,
     baseURL: getOriginUrl(requestOriginUrl!),
     method: requestHttpType,
-    params: Params,
-    data: !body? {"":null} :body,
+    params: requestHttpType === RequestHttpEnum.GET.toUpperCase() ? Params: null,
+    data: body,
     headers: extraValue(Header)
   }, {
     joinPrefix: false,

+import TKUpload from './index.vue';
+
+export { TKUpload };

+<template>
+  <n-upload
+    v-model:file-list="fileList"
+    :show-file-list="true"
+    :customRequest="customRequest"
+    :onBeforeUpload="beforeUploadHandle"
+    :onRemove="remove"
+  >
+    <n-upload-dragger>
+      <img v-if="uploadImageUrl" class="upload-show" :src="uploadImageUrl" alt="上传的图片" />
+      <div class="upload-img" v-show="!uploadImageUrl">
+        <img src="@/assets/images/canvas/noImage.png" />
+        <n-text class="upload-desc" depth="3">
+          上传文件需小于 {{ uploadSizeFormat.size }}M ，格式为 {{ uploadSizeFormat.format }} 的文件
+        </n-text>
+      </div>
+    </n-upload-dragger>
+  </n-upload>
+</template>
+
+<script lang="ts" setup name="TKUpload">
+import { ref, PropType, nextTick } from 'vue'
+import type { UploadCustomRequestOptions, UploadFileInfo } from 'naive-ui'
+import { fetchRouteParamsLocation } from '@/utils'
+import { uploadFile } from '@/api/external/contentSave/content'
+import { FileTypeEnum } from '@/enums/external/fileTypeEnum'
+
+interface uploadSizeFormatIF {
+  size: number
+  format: string
+}
+
+const props = defineProps({
+  uploadImageUrl: {
+    type: String as PropType<string>,
+    default: ''
+  },
+  uploadSizeFormat: {
+    type: Object as PropType<uploadSizeFormatIF>,
+    default: () => ({
+      size: 5,
+      format: 'png/jpg/jpeg/gif'
+    })
+  }
+})
+
+const emit = defineEmits(['sendFile', 'removeFile'])
+
+const fileList = ref<UploadFileInfo[]>()
+
+// 自定义上传操作
+const customRequest = (options: UploadCustomRequestOptions) => {
+  const { file } = options
+  nextTick(async () => {
+    if (file.file) {
+      const newNameFile = new File([file.file], `${fetchRouteParamsLocation()}_index_upload.png`, {
+        type: file.file.type
+      })
+      let uploadParams = new FormData()
+      uploadParams.append('file', newNameFile)
+      const uploadRes = await uploadFile(uploadParams)
+      if (!uploadRes) return
+      emit('sendFile', uploadRes?.fileStaticUri)
+      window['$message'].success('上传文件成功！')
+    } else {
+      window['$message'].error('上传文件失败，请稍后重试！')
+    }
+  })
+}
+
+// 文件上传前置处理
+const beforeUploadHandle = (file: UploadFileInfo) => {
+  fileList.value = []
+  const type = file.file?.type
+  const size = file.file?.size as number
+  const typeSuffix = type?.split('/')?.at(-1)?.toUpperCase() as keyof typeof FileTypeEnum
+  if (size > 1024 * 1024 * props.uploadSizeFormat.size) {
+    window['$message'].warning(`文件超出 ${props.uploadSizeFormat.size}M限制，请重新上传！`)
+    return false
+  }
+  if (!FileTypeEnum[typeSuffix]) {
+    window['$message'].warning('文件格式不符合，请重新上传！')
+    return false
+  }
+  return true
+}
+
+//单个点击删除
+const remove = () => {
+  fileList.value = []
+  emit('removeFile', true)
+}
+</script>
+
+<style lang="scss" scoped>
+$uploadHeight: 193px;
+@include deep() {
+  .n-card__content {
+    padding: 0;
+    overflow: hidden;
+  }
+  .n-upload-dragger {
+    padding: 5px;
+  }
+}
+.upload-show {
+  width: -webkit-fill-available;
+  height: $uploadHeight;
+  border-radius: 5px;
+}
+.upload-img {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  img {
+    height: 150px;
+  }
+  .upload-desc {
+    padding: 10px 0;
+  }
+}
+</style>

+// 文件上传时的格式映射
+export enum FileTypeEnum {
+  // 文档
+  TXT = 'text/plain',
+  JSON = 'application/json',
+  // 图片
+  PNG = 'image/png',
+  JPEG = 'image/jpeg',
+  JPG = 'image/jpg',
+  GIF = 'image/gif',
+}

@@ -56,7 +56,10 @@ const initMap = (newData: any) => {
         pitch: pitch.value, // 地图俯仰角度，有效范围 0 度- 83 度
         skyColor: skyColor.value,
         viewMode: viewMode.value, // 地图模式
-        willReadFrequently: true
+        willReadFrequently: true,
+        WebGLParams: {
+          preserveDrawingBuffer: true,
+        }
       })
       dataHandle(props.chartConfig.option.dataset)
       let satellite = new AMap.TileLayer.Satellite()
@@ -68,7 +71,7 @@ const initMap = (newData: any) => {
         mapIns.setMapStyle(`amap://styles/${amapStyleKeyCustom.value !== '' ? amapStyleKeyCustom.value : amapStyleKey.value}`)
       }
     })
-    .catch(e => {})
+    .catch(e => { })
 }
 
 const dataHandle = (newData: any) => {

@@ -11,7 +11,10 @@ export const option = {
   dataset: dataJson,
   mapRegion: {
     adcode: 'china',
-    showHainanIsLands: true
+    showHainanIsLands: true,
+    enter: false,
+    backSize: 20,
+    backColor: '#ffffff'
   },
   tooltip: {
     show: true,
@@ -103,19 +106,19 @@ export const option = {
         borderColor: 'rgba(147, 235, 248, 0.8)',
         textStyle: {
           color: '#FFFFFF',
-          fontSize: 12,
+          fontSize: 12
         }
       },
       label: {
         show: false,
         color: '#FFFFFF',
-        fontSize: 12,
+        fontSize: 12
       },
       emphasis: {
         disabled: false,
         label: {
           color: '#FFFFFF',
-          fontSize: 12,
+          fontSize: 12
         },
         itemStyle: {
           areaColor: '#389BB7',
@@ -148,6 +151,26 @@ export const option = {
         shadowOffsetY: 2,
         shadowBlur: 10
       }
+    },
+    {
+      type: 'lines',
+      zlevel: 2,
+      effect: {
+        show: true,
+        period: 4, //箭头指向速度，值越小速度越快
+        trailLength: 0.4, //特效尾迹长度[0,1]值越大，尾迹越长重
+        symbol: 'arrow', //箭头图标
+        symbolSize: 7 //图标大小
+      },
+      lineStyle: {
+        normal: {
+          color: '#4fb6d2',
+          width: 1, //线条宽度
+          opacity: 0.1, //尾迹线条透明度
+          curveness: 0.3 //尾迹线条曲直度
+        }
+      },
+      data: []
     }
   ]
 }

@@ -69,11 +69,7 @@
         </n-space>
       </SettingItem>
       <SettingItem name="字体颜色">
-        <n-color-picker
-          size="small"
-          :modes="['hex']"
-          v-model:value="seriesList[1].label.color"
-        ></n-color-picker>
+        <n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[1].label.color"></n-color-picker>
       </SettingItem>
       <SettingItem name="字体大小">
         <n-input-number
@@ -129,7 +125,7 @@
         ></n-color-picker>
       </SettingItem>
     </SettingItemBox>
-    
+
     <SettingItemBox name="悬浮弹窗">
       <SettingItem name="显示">
         <n-space>
@@ -180,6 +176,22 @@
       <SettingItem>
         <n-checkbox v-model:checked="mapRegion.showHainanIsLands" size="small">显示南海群岛</n-checkbox>
       </SettingItem>
+      <SettingItem v-if="seriesList[2]">
+        <n-checkbox v-model:checked="mapRegion.enter" size="small">点击进入下级</n-checkbox>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="返回图标" v-if="mapRegion.enter">
+      <SettingItem name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="mapRegion.backColor"></n-color-picker>
+      </SettingItem>
+      <SettingItem name="大小">
+        <n-input-number
+          v-model:value="mapRegion.backSize"
+          :min="1"
+          size="small"
+          placeholder="请输入字体大小"
+        ></n-input-number>
+      </SettingItem>
     </SettingItemBox>
   </CollapseItem>
   <CollapseItem name="标记" :expanded="true">
@@ -191,7 +203,7 @@
         <n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[0].itemStyle.color"></n-color-picker>
       </SettingItem>
     </SettingItemBox>
-      
+
     <SettingItemBox name="文本">
       <SettingItem name="显示">
         <n-space>
@@ -223,6 +235,47 @@
       </SettingItem>
     </SettingItemBox>
   </CollapseItem>
+
+  <CollapseItem v-if="seriesList[2]" name="飞线" :expanded="true">
+    <SettingItemBox name="箭头">
+      <SettingItem name="速度">
+        <n-tooltip trigger="hover">
+          <template #trigger>
+            <n-input-number v-model:value="seriesList[2].effect.period" size="small" :min="0"></n-input-number>
+          </template>
+          值越小速度越快
+        </n-tooltip>
+      </SettingItem>
+      <SettingItem name="尾迹">
+        <n-tooltip trigger="hover">
+          <template #trigger>
+            <n-input-number
+              v-model:value="seriesList[2].effect.trailLength"
+              size="small"
+              :min="0"
+              :max="1"
+            ></n-input-number>
+          </template>
+          特效尾迹长度[0,1]值越大，尾迹越长重
+        </n-tooltip>
+      </SettingItem>
+      <SettingItem name="大小">
+        <n-input-number v-model:value="seriesList[2].effect.symbolSize" size="small" :min="0"></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="配置">
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="seriesList[2].lineStyle.normal.color"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="宽度">
+        <n-input-number v-model:value="seriesList[2].lineStyle.normal.width" size="small" :min="1"></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
 </template>
 
 <script setup lang="ts">

@@ -21,6 +21,32 @@
       "value": [126.642464, 45.756967, 101]
     }
   ],
+  "line": [
+    {
+      "coords": [
+        [113.665412, 34.757975],
+        [116.405285, 39.904989]
+      ]
+    },
+    {
+      "coords": [
+        [101.778916, 36.623178],
+        [116.405285, 39.904989]
+      ]
+    },
+    {
+      "coords": [
+        [106.278179, 38.46637],
+        [116.405285, 39.904989]
+      ]
+    },
+    {
+      "coords": [
+        [126.642464, 45.756967],
+        [116.405285, 39.904989]
+      ]
+    }
+  ],
   "map": [
     {
       "name": "北京市",

 <template>
-  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
-  </v-chart>
+  <div>
+    <div class="back-icon" v-if="(enter && levelHistory.length !== 0) || (enter && !isPreview())" @click="backLevel">
+      <n-icon :color="backColor" :size="backSize * 1.1">
+        <ArrowBackIcon />
+      </n-icon>
+      <span
+        :style="{
+          'font-weight': 200,
+          color: backColor,
+          'font-size': `${backSize}px`
+        }"
+      >
+        返回上级
+      </span>
+    </div>
+    <v-chart
+      ref="vChartRef"
+      :init-options="initOptions"
+      :theme="themeColor"
+      :option="option.value"
+      :manual-update="isPreview()"
+      autoresize
+      @click="chartPEvents"
+    >
+    </v-chart>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { PropType, reactive, watch, ref, nextTick } from 'vue'
+import { PropType, reactive, watch, ref, nextTick, toRefs } from 'vue'
 import config, { includes } from './config'
 import VChart from 'vue-echarts'
+import { icon } from '@/plugins'
 import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use, registerMap } from 'echarts/core'
 import { EffectScatterChart, MapChart } from 'echarts/charts'
@@ -16,6 +41,7 @@ import { mergeTheme, setOption } from '@/packages/public/chart'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { isPreview } from '@/utils'
 import mapJsonWithoutHainanIsLands from './mapWithoutHainanIsLands.json'
+import mapChinaJson from './mapGeojson/china.json'
 import { DatasetComponent, GridComponent, TooltipComponent, GeoComponent, VisualMapComponent } from 'echarts/components'
 
 const props = defineProps({
@@ -33,6 +59,10 @@ const props = defineProps({
   }
 })
 
+const { ArrowBackIcon } = icon.ionicons5
+let levelHistory: any = ref([])
+
+const { backColor, backSize, enter } = toRefs(props.chartConfig.option.mapRegion)
 const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
 
 use([
@@ -67,7 +97,7 @@ registerMap(`${props.chartConfig.option.mapRegion.adcode}`, { geoJSON: {} as any
 // 进行更换初始化地图 如果为china 单独处理
 const registerMapInitAsync = async () => {
   await nextTick()
-  const adCode = `${props.chartConfig.option.mapRegion.adcode}`;
+  const adCode = `${props.chartConfig.option.mapRegion.adcode}`
   if (adCode !== 'china') {
     await getGeojson(adCode)
   } else {
@@ -87,7 +117,16 @@ const vEchartsSetOption = () => {
 const dataSetHandle = async (dataset: any) => {
   props.chartConfig.option.series.forEach((item: any) => {
     if (item.type === 'effectScatter' && dataset.point) item.data = dataset.point
-    else if (item.type === 'map' && dataset.map) item.data = dataset.map
+     else if (item.type === 'lines' && dataset.line) {
+      item.data = dataset.line.map((it: any) => {
+        return {
+          ...it,
+          lineStyle: {
+            color: props.chartConfig.option.series[2].lineStyle.normal.color
+          }
+        }
+      })
+    } else if (item.type === 'map' && dataset.map) item.data = dataset.map
   })
   if (dataset.pieces) props.chartConfig.option.visualMap.pieces = dataset.pieces
 
@@ -101,6 +140,45 @@ const hainanLandsHandle = async (newData: boolean) => {
     registerMap('china', { geoJSON: mapJsonWithoutHainanIsLands as any, specialAreas: {} })
   }
 }
+
+// 点击区域
+const chartPEvents = (e: any) => {
+  if (e.seriesType !== 'map') return
+  if (!props.chartConfig.option.mapRegion.enter) {
+    return
+  }
+  mapChinaJson.features.forEach(item => {
+    var pattern = new RegExp(e.name)
+    if (pattern.test(item.properties.name)) {
+      let code = String(item.properties.adcode)
+      levelHistory.value.push(code)
+      checkOrMap(code)
+    }
+  })
+}
+
+// 返回上一级
+const backLevel = () => {
+  levelHistory.value = []
+  if (levelHistory.value.length > 1) {
+    levelHistory.value.pop()
+    const code = levelHistory[levelHistory.value.length - 1]
+    checkOrMap(code)
+  } else {
+    checkOrMap('china')
+  }
+}
+
+// 切换地图
+const checkOrMap = async (newData: string) => {
+  await getGeojson(newData)
+  props.chartConfig.option.geo.map = newData
+  props.chartConfig.option.series.forEach((item: any) => {
+    if (item.type === 'map') item.map = newData
+  })
+  vEchartsSetOption()
+}
+
 //监听 dataset 数据发生变化
 watch(
   () => props.chartConfig.option.dataset,
@@ -113,33 +191,42 @@ watch(
   }
 )
 
-//监听是否显示南海群岛
-watch(
-  () => props.chartConfig.option.mapRegion.showHainanIsLands,
-  async newData => {
-    try {
-      await hainanLandsHandle(newData)
-      vEchartsSetOption()
-    } catch (error) {
-      console.log(error)
+// 监听线的颜色
+if (props.chartConfig.option.series[2] && !isPreview()) {
+  watch(
+    () => props.chartConfig.option.series[2].lineStyle.normal.color,
+    () => {
+      dataSetHandle(props.chartConfig.option.dataset)
+    },
+    {
+      deep: false
     }
-  },
-  {
-    deep: false
-  }
-)
+  )
+}
 
+//监听是否显示南海群岛
+if (!isPreview()) {
+  watch(
+    () => props.chartConfig.option.mapRegion.showHainanIsLands,
+    async newData => {
+      try {
+        await hainanLandsHandle(newData)
+        vEchartsSetOption()
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    {
+      deep: false
+    }
+  )
+}
 //监听地图展示区域发生变化
 watch(
   () => `${props.chartConfig.option.mapRegion.adcode}`,
-  async newData => {
+  newData => {
     try {
-      await getGeojson(newData)
-      props.chartConfig.option.geo.map = newData
-      props.chartConfig.option.series.forEach((item: any) => {
-        if (item.type === 'map') item.map = newData
-      })
-      vEchartsSetOption()
+      checkOrMap(newData)
     } catch (error) {
       console.log(error)
     }
@@ -154,3 +241,16 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
   dataSetHandle(newData)
 })
 </script>
+
+<style scope lang="scss">
+.back-icon {
+  z-index: 50;
+  cursor: pointer;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  top: 0;
+  left: 0;
+  gap: 2px;
+}
+</style>

@@ -9,7 +9,8 @@ export const includes = []
 // 关系图布局
 export const GraphLayout = [
   { label: '无', value: 'none' },
-  { label: '环形', value: 'circular' }
+  { label: '环形', value: 'circular' },
+  { label: '力引导', value: 'force' }
 ]
 
 // 标签开关
@@ -24,7 +25,13 @@ export const LabelPosition = [
   { label: '右侧', value: 'right' },
   { label: '顶部', value: 'top' },
   { label: '底部', value: 'bottom' },
-  { label: '内部', value: 'inside' },
+  { label: '内部', value: 'inside' }
+]
+
+// 图-迭代动画
+export const LayoutAnimation = [
+  { label: '开启', value: 1 },
+  { label: '关闭', value: 0 }
 ]
 
 export const option = {
@@ -33,11 +40,11 @@ export const option = {
     legend:{
       show:true,
       textStyle:{
-        color:"#eee",
-        fontSize: 14 ,
+        color: '#eee',
+        fontSize: 14
       },
       data: dataJson.categories.map(function (a) {
-          return a.name;
+          return a.name
       })
     },
     series: [
@@ -47,7 +54,7 @@ export const option = {
         data: dataJson.nodes,
         links: dataJson.links,
         categories: dataJson.categories,
-        label: { // 标签
+        label: {
           show: 1,
           position: 'right',
           formatter: '{b}'
@@ -58,10 +65,17 @@ export const option = {
         lineStyle: {
           color: 'source', // 线条颜色
           curveness: 0.2 // 线条卷曲程度
+        },
+        force: {
+        repulsion: 100,
+        gravity: 0.1,
+        edgeLength: 30,
+        layoutAnimation: 1,
+        friction: 0.6
         }
       }
     ]
-  };
+}
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = GraphConfig.key

@@ -35,7 +35,58 @@
         ></n-color-picker>
         </SettingItem>
         <SettingItem name="文本">
-          <n-input-number v-model:value="optionData.legend.textStyle.fontSize" :min="0" :step="1" size="small" placeholder="文字大小">
+          <n-input-number
+            v-model:value="optionData.legend.textStyle.fontSize"
+            :min="0"
+            :step="1"
+            size="small"
+            placeholder="文字大小"
+          >
+          </n-input-number>
+        </SettingItem>
+      </SettingItemBox>
+      <SettingItemBox name="力引导" v-if="optionData.series[0].force && graphConfig.layout == 'force'">
+        <SettingItem name="斥力因子" v-if="optionData.series[0].force.repulsion">
+          <n-input-number
+            v-model:value="optionData.series[0].force.repulsion"
+            :min="0"
+            :step="1"
+            size="small"
+            placeholder="斥力因子大小"
+          >
+          </n-input-number>
+        </SettingItem>
+        <SettingItem name="引力因子" v-if="optionData.series[0].force.gravity">
+          <n-input-number
+            v-model:value="optionData.series[0].force.gravity"
+            :min="0"
+            :step="0.1"
+            size="small"
+            placeholder="引力因子"
+          >
+          </n-input-number>
+        </SettingItem>
+        <SettingItem name="节点距离">
+          <n-input-number
+            v-model:value="optionData.series[0].force.edgeLength"
+            :min="0"
+            :step="1"
+            size="small"
+            placeholder="节点距离"
+          >
+          </n-input-number>
+        </SettingItem>
+        <SettingItem name="迭代动画">
+          <n-select v-model:value="graphConfig.force.layoutAnimation" :options="LayoutAnimation" size="small" />
+        </SettingItem>
+        <SettingItem name="节点速度">
+          <n-input-number
+            v-model:value="optionData.series[0].force.friction"
+            :min="0"
+            :step="0.1"
+            size="small"
+            placeholder="节点速度"
+          >
           </n-input-number>
         </SettingItem>
       </SettingItemBox>
@@ -46,7 +97,7 @@
 <script setup lang="ts">
 import { PropType, computed } from 'vue'
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
-import { option, GraphLayout, LabelSwitch, LabelPosition } from './config'
+import { option, GraphLayout, LabelSwitch, LabelPosition, LayoutAnimation } from './config'
 import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
 
 const props = defineProps({
@@ -56,7 +107,7 @@ const props = defineProps({
   }
 })
 
-const graphConfig = computed<typeof option.series[0]>(() => {
+const graphConfig = computed<(typeof option.series)[0]>(() => {
   return props.optionData.series[0]
 })
 </script>

 <template>
-  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
+  <v-chart
+    ref="vChartRef"
+    :init-options="initOptions"
+    :theme="themeColor"
+    :option="option"
+    :manual-update="isPreview()"
+    autoresize
+  ></v-chart>
 </template>
 
 <script setup lang="ts">

@@ -8,4 +8,14 @@ import { DialConfig } from './Dial/index'
 import { SankeyConfig } from './Sankey/index'
 import { GraphConfig } from './Graph/index'
 
-export default [ProcessConfig, RadarConfig, FunnelConfig, HeatmapConfig, WaterPoloConfig, TreeMapConfig, GraphConfig, SankeyConfig, DialConfig]
+export default [
+  ProcessConfig,
+  RadarConfig,
+  FunnelConfig,
+  HeatmapConfig,
+  WaterPoloConfig,
+  TreeMapConfig,
+  GraphConfig,
+  SankeyConfig,
+  DialConfig
+]

@@ -33,8 +33,6 @@ const option = shallowReactive({
   dataset: ''
 })
 
-
-
 const getStyle = (radius: number) => {
   return {
     borderRadius: `${radius}px`,
@@ -78,7 +76,6 @@ watch(
       return
     }
     option.dataset = newData
-    
   }, 
   {
     immediate: true

 import { ChartFrameEnum, PackagesCategoryEnum } from '@/packages/index.d'
 import { ImageConfig } from '@/packages/components/Informations/Mores/Image/index'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../index.d'
+import carousel1 from '@/assets/images/chart/photos/carousel1.jpeg'
+import carousel2 from '@/assets/images/chart/photos/carousel2.jpeg'
 
 // 远程共享库（调接口获取图像列表）
 const imageList = [
-  { imageName: 'carousel1', imageUrl: 'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel1.jpeg' },
-  { imageName: 'carousel2', imageUrl: 'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel2.jpeg' }
+  { imageName: 'carousel1', imageUrl: 'carousel1.jpeg' },
+  { imageName: 'carousel2', imageUrl: 'carousel2.jpeg' }
 ]
 
 const photoConfigList = imageList.map(i => ({
@@ -15,7 +17,7 @@ const photoConfigList = imageList.map(i => ({
   package: PackagesCategoryEnum.PHOTOS,
   chartFrame: ChartFrameEnum.STATIC,
   image: i.imageUrl,
-  dataset: i.imageUrl,
+  dataset: i.imageName==='carousel1' ? carousel1 : carousel2,
   title: i.imageName,
   redirectComponent: `${ImageConfig.package}/${ImageConfig.category}/${ImageConfig.key}` // 跳转组件路径规则：packageName/categoryName/componentKey
 }))

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

@@ -14,6 +14,26 @@ export const enum areaEnum {
   TOWN = 'TOWN' //镇
 }
 
+//父级地区编码和级别接口
+export interface HistoryParentType {
+  adcode: string | number
+  level: string
+}
+
+//数据源接口
+export interface dataPointI {
+  name: string
+  value: number[]
+  adcode: number
+  height: number
+  itemStyle: {
+    color: string
+    opacity: number
+    borderWidth: number
+    borderColor: string
+  }
+}
+
 export const includes = []
 
 export const option = {
@@ -23,6 +43,9 @@ export const option = {
   iconDistanceTop: 20,
   drillingIn: false,
   dataset: dataMaps,
+  saveClickRegion: {
+    level: ''
+  },
   mapRegion: {
     adcode: 'china',
     showHainanIsLands: true,
@@ -41,6 +64,9 @@ export const option = {
     emphasis: {
       label: {
         show: true,
+        formatter: function (params: Recordable) {
+          return params.data.name ? params.data.name : ' '
+        },
         textStyle: {
           color: '#000',
           fontSize: 14
@@ -59,6 +85,9 @@ export const option = {
       regionHeight: 3,
       label: {
         show: true,
+        formatter: function (params: Recordable) {
+          return params.data.name ? params.data.name : ' '
+        },
         textStyle: {
           color: '#fff',
           fontSize: 14

@@ -12,7 +12,7 @@ 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 config, { areaEnum, dataPointI, HistoryParentType } from './config'
 import { getGeoJsonMap } from '@/api/external/common'
 import dataMaps from './data.json'
 
@@ -41,7 +41,7 @@ const toolBoxOption = ref({
   top: 20,
   feature: {
     myFullButton: {
-      show: true,
+      show: false,
       title: '返回',
       icon: iconStr.value,
       iconStyle: {
@@ -55,8 +55,34 @@ const toolBoxOption = ref({
 watch(
   () => props.chartConfig.option,
   newData => {
-    const { iconColor, drillingIn, iconDistanceRight, iconDistanceTop } = newData
-    toolBoxOption.value.feature.myFullButton.show = drillingIn
+    const { iconColor, drillingIn, iconDistanceRight, iconDistanceTop, mapRegion } = newData
+    if (drillingIn && !newData.saveClickRegion.level) {
+      toolBoxOption.value.feature.myFullButton.show = !drillingIn
+    } else if (
+      drillingIn &&
+      newData.saveClickRegion.level === areaEnum.PROVINCE &&
+      mapRegion.saveSelect.levelStr === areaEnum.COUNTRY
+    ) {
+      toolBoxOption.value.feature.myFullButton.show = drillingIn
+    } else if (
+      drillingIn &&
+      newData.saveClickRegion.level === areaEnum.COUNTRY &&
+      mapRegion.saveSelect.levelStr === areaEnum.COUNTRY
+    ) {
+      toolBoxOption.value.feature.myFullButton.show = !drillingIn
+    } else if (
+      drillingIn &&
+      newData.saveClickRegion.level === areaEnum.CITY &&
+      mapRegion.saveSelect.levelStr === areaEnum.PROVINCE
+    ) {
+      toolBoxOption.value.feature.myFullButton.show = drillingIn
+    } else if (
+      drillingIn &&
+      newData.saveClickRegion.level === areaEnum.PROVINCE &&
+      mapRegion.saveSelect.levelStr === areaEnum.PROVINCE
+    ) {
+      toolBoxOption.value.feature.myFullButton.show = !drillingIn
+    }
     toolBoxOption.value.feature.myFullButton.iconStyle.color = iconColor
     toolBoxOption.value.right = iconDistanceRight
     toolBoxOption.value.top = iconDistanceTop
@@ -73,28 +99,27 @@ props.chartConfig.option = {
 
 //地图点击返回
 const watchAdcode = async () => {
+  stopWatch()
   if (props.chartConfig.option.drillingIn) {
     //如果是从右边配置里设置的，比如点击四川省，然后点击返回
     const savePopParent = saveHistoryParent.value.pop()
-    let saveAdcode: any = savePopParent?.adcode
-    saveLevelStr.level = savePopParent?.level as string
+    let saveAdcode = savePopParent?.adcode as string | number
+    saveLevelStr.level = savePopParent?.level
     if (!savePopParent) {
       saveAdcode = getParentAdcode(props.chartConfig.option.mapRegion.adcode)
-      saveLevelStr.level = (regionMapParentArea as any)[props.chartConfig.option.mapRegion.saveSelect.levelStr]
+      saveLevelStr.level = (regionMapParentArea as Recordable)[props.chartConfig.option.mapRegion.saveSelect.levelStr]
     }
     if (saveAdcode === 0) {
       saveAdcode = 'china'
       saveLevelStr.level = 'COUNTRY'
     }
-    await getGeojson(saveAdcode)
+    const exist = 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)
+    props.chartConfig.option.saveClickRegion.level = saveLevelStr.level
+    if (exist) {
+      //fix解决点击下钻返回后页面为空问题
+      props.chartConfig.option.mapRegion.adcode = adcode
+    }
   }
 }
 
@@ -106,46 +131,41 @@ const regionMapParentArea = {
 }
 
 //地图点击
-const handleMap3DClick = async (params: any) => {
+const handleMap3DClick = async (params: Recordable) => {
   if (props.chartConfig.option.drillingIn) {
     const { name } = params
-    saveGeojson.value?.features.forEach((item: any) => {
+    saveGeojson.value?.features.forEach((item: Recordable) => {
       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
+        if (String(adcode).startsWith('15') && level === areaEnum.CITY) return
         props.chartConfig.option.mapRegion.adcode = adcode
+        props.chartConfig.option.saveClickRegion.level = level
         saveLevelStr.level = level
         handleDataPoint(adcode)
         saveHistoryParent.value.push({
           adcode: item.properties.parent.adcode,
-          level: (regionMapParentArea as any)[level]
+          level: (regionMapParentArea as Recordable)[level]
         })
       }
     })
   }
 }
 
-const saveGeojson: any = ref({}) // 保存geojson
+const saveGeojson: Recordable = ref({}) // 保存geojson
 
 const chinaDefaultRegionId = ref(100000) //如果是china则adcode为100000
 
-const saveLevelStr = reactive({
-   // 地区级别
-   level: ''
+// 保存地区级别
+const saveLevelStr = reactive<{ level: string | undefined }>({
+  level: ''
 })
 
-//父级地区编码和级别接口
-interface HistoryParentType {
-  adcode: number
-  level: string
-}
-
 const saveHistoryParent = ref<HistoryParentType[]>([])
 
 //动态注册地图
-const getGeojson = (regionId: any) => {
+const getGeojson = (regionId: number | string) => {
   try {
     return new Promise<boolean>(resolve => {
       const { levelStr } = props.chartConfig.option.mapRegion.saveSelect //右侧配置项获取的行政级别
@@ -171,11 +191,10 @@ const getGeojson = (regionId: any) => {
   }
 }
 
-
 //传adcode 获取上级
 const getParentAdcode = (adcode: number) => {
   let adcodeNum = 100000
-  saveGeojson.value?.features.forEach((item: any) => {
+  saveGeojson.value?.features.forEach((item: Recordable) => {
     if (item.properties.adcode === adcode) {
       adcodeNum = item.properties.parent.adcode
     }
@@ -200,13 +219,13 @@ const initMap = async () => {
   await nextTick().then(() => {
     handleSetOption(chartInstance.value, props.chartConfig.option)
   })
-  chartInstance.value.on('click', (e: any) => {
+  chartInstance.value.on('click', (e: Recordable) => {
     handleMap3DClick(e)
   })
 }
 
 // 手动触发渲染
-const handleSetOption = (instance: any, option: any) => {
+const handleSetOption = (instance: any, option: Recordable) => {
   if (!instance) return
   try {
     instance.clear()
@@ -221,22 +240,32 @@ onMounted(() => {
 })
 
 //处理数据标点
-const handleDataPoint = (newData: any) => {
+const handleDataPoint = (newData: string | number) => {
   if (newData === 'china') {
     props.chartConfig.option.dataset = dataMaps
+    props.chartConfig.option.series.forEach((item: Recordable) => {
+      if (item.type === 'scatter3D') {
+        item.data = dataMaps
+      }
+    })
   } else {
-    props.chartConfig.option.dataset = dataMaps.filter((item: any) => item.adcode === newData)
+    props.chartConfig.option.dataset = dataMaps.filter((item: dataPointI) => item.adcode === newData)
+    props.chartConfig.option.series.forEach((item: Recordable) => {
+      if (item.type === 'scatter3D') {
+        item.data = dataMaps.filter((item: dataPointI) => item.adcode === newData)
+      }
+    })
   }
 }
 
 //监听地图展示区域发生变化
 watch(
   () => `${props.chartConfig.option.mapRegion.adcode}`,
-  async (newData: any) => {
+  async (newData: string | number) => {
     try {
       await getGeojson(newData)
       props.chartConfig.option.geo3D.map = newData
-      props.chartConfig.option.series.forEach((item: any) => {
+      props.chartConfig.option.series.forEach((item: Recordable) => {
         if (item.type === 'map3D') {
           item.map = newData
           item.data = props.chartConfig.option.dataset
@@ -254,7 +283,7 @@ watch(
 )
 
 // 监听地图右侧配置项变化
-watch(
+const stopWatch = watch(
   props.chartConfig.option,
   async newData => {
     try {
@@ -273,7 +302,7 @@ watch(
   () => props.chartConfig.option.dataset,
   newData => {
     try {
-      props.chartConfig.option.series.forEach((item: any) => {
+      props.chartConfig.option.series.forEach((item: Recordable) => {
         if (item.type === 'map3D') {
           item.data = newData
         }

+<template>
+  <n-drawer display-directive="if" v-model:show="modelShow" :width="502" :placement="placement">
+    <n-drawer-content :title="drawerTitle" closable>
+      <n-space vertical>
+        <n-data-table size="small" :columns="dimensions" :data="source" :pagination="paginationReactive" />
+      </n-space>
+    </n-drawer-content>
+  </n-drawer>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive } from 'vue'
+import { NDataTable,NDrawer, NDrawerContent, NSpace } from 'naive-ui'
+import { dimensions } from '../config'
+import type { sourceInterface } from '../config'
+import dayjs from 'dayjs'
+import { Placement } from 'naive-ui/es/drawer/src/DrawerBodyWrapper'
+
+const placement = ref<Placement>('right')
+
+const modelShow =ref(false)
+
+const drawerTitle = ref('')
+
+const source =ref<sourceInterface[]>([])
+
+const paginationReactive = reactive({
+      page: 1,
+      pageSize: 10,
+      showSizePicker: true,
+      pageSizes: [10, 20],
+      onChange: (page: number) => {
+        paginationReactive.page = page
+      },
+      onUpdatePageSize: (pageSize: number) => {
+        paginationReactive.pageSize = pageSize
+        paginationReactive.page = 1
+      }
+    })
+
+const setValue = (value: Recordable, attrs: Recordable[]) => {
+  source.value = []
+  try {
+    if (!value) return
+    const deviceLatestList = Object.keys(value).map((item:string) => {
+      return {
+        key: item,
+        value: value[item][0]?.value,
+        lastUpdateTime: dayjs( value[item][0]?.ts)?.format('YYYY-MM-DD HH:mm:ss')
+      }
+    })
+    const list = deviceLatestList?.reduce((acc:sourceInterface[],curr: sourceInterface)=>{
+      const byKeyFindName = attrs?.find(item => item.identifier === curr.key)?.name
+      curr.key = byKeyFindName
+      acc.push({...curr})
+      return [...acc]
+    },[])
+    source.value = list.filter(item=>Boolean(item.key))
+  }catch(e){
+    console.log(e)
+  }
+}
+
+const setDrawerTitle = (title:string) => drawerTitle.value = title
+
+const openDrawer = () => modelShow.value = true
+
+defineExpose({
+  setValue,
+  openDrawer,
+  setDrawerTitle
+})
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -4,6 +4,7 @@ import { OverrideMapAmapConfig } from './index'
 import { chartInitConfig } from '@/settings/designSetting'
 import cloneDeep from 'lodash/cloneDeep'
 import dataJson from './data.json'
+import defaultImg from '../../../../../../assets/external/marker/1.png'
 
 export type dataExtraInfoType = typeof dataJson.markers[number]['extraInfo'] //data.json下的extraInfo类型
 
@@ -12,7 +13,7 @@ export type dataJsonType = typeof dataJson //data.json类型
 export type dataJsonMarkersType = typeof dataJson.markers[number] //data.json markers类型
 
 //标注数据格式
-export const fileterDevice = (items: any) => {
+export const filterDevice = (items: any) => {
   const values = items.reduce((acc: any, curr: any) => {
     acc.push({
       name: curr.alias,
@@ -25,6 +26,7 @@ export const fileterDevice = (items: any) => {
         organizationDTO: curr.organizationDTO,
         deviceState: curr.deviceState,
         deviceProfile: curr.deviceProfile,
+        deviceProfileId: curr.deviceProfileId,
         deviceInfo: curr.deviceInfo
       }
     })
@@ -35,6 +37,34 @@ export const fileterDevice = (items: any) => {
   }
 }
 
+export interface devicePartInfoInterface{
+  tbDeviceId:string
+  name:string
+  alias:string
+  deviceProfileId:string
+}
+
+export const dimensions= [
+  {
+    "title": "键",
+    "key": "key"
+  },
+  {
+    "title": "值",
+    "key": "value"
+  },
+  {
+    "title": "最后更新时间",
+    "key": "lastUpdateTime"
+  }
+]
+
+export  interface sourceInterface {
+  key: string
+  value: string
+  lastUpdateTime: string
+}
+
 export enum ThemeEnum {
   NORMAL = 'normal',
   DARK = 'dark',
@@ -88,6 +118,11 @@ export const option = {
     amapLon: 104.108689,
     amapLat: 30.66176,
     amapZindex: 11,
+    iconMarker: '1.png',
+    mpBorderConfig: {
+      value: 'Border01'
+    },
+    bgColor: 'rgba(255, 255, 255, 0.05)',
     marker: {
       fillColor: '#E98984FF',
       fillOpacity: 0.5,

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

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

@@ -8,7 +8,7 @@ export const OverrideMapAmapConfig: ConfigType = {
   key,
   chartKey,
   conKey,
-  title: '高德地图',
+  title: '设备分布',
   category: ChatCategoryEnum.MAP,
   categoryName: ChatCategoryEnumName.MAP,
   package: PackagesCategoryEnum.CHARTS,

 <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 class="chart-amap" ref="vChartRef">
+    <device-latest-table ref="deviceLatestTableRef"></device-latest-table>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, PropType, toRefs, watch } from 'vue'
+import { ref, PropType, toRefs, watch, render, h, onMounted, onUnmounted, reactive } from 'vue'
 import AMapLoader from '@amap/amap-jsapi-loader'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartDataFetch } from '@/hooks'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { MarkerEnum, ThemeEnum, dataExtraInfoType, dataJsonType, dataJsonMarkersType, fileterDevice } from './config'
+import { MarkerEnum, ThemeEnum, dataExtraInfoType, dataJsonType, dataJsonMarkersType, devicePartInfoInterface } from './config'
 import { isArray } from '@/utils'
-import djh from './images/djh.png'
+import inactive from './images/inactive.png'
 import online from './images/online.png'
-import lx1 from './images/lx1.png'
-import { getDeviceActiveTime, getDeviceList } from '@/api/external/common/index'
+import offline from './images/offline.png'
+import listView from './images/list.png'
+import { getDeviceActiveTime } from '@/api/external/common/index'
 import dayjs from 'dayjs'
-import SearchBox from './components/SearchBox.vue'
+import DeviceLatestTable from './components/DeviceLatestTable.vue'
+import { getDeviceLatest, getProfileAttrs } from '@/api/external/common'
+import { NButton } from 'naive-ui'
 
 const props = defineProps({
   chartConfig: {
@@ -27,11 +29,9 @@ const props = defineProps({
   }
 })
 
-const modelShow = ref(false)
+const deviceLatestTableRef = ref<Nullable<InstanceType<typeof DeviceLatestTable>>>(null);
 
-const showSearchBox = ref(false)
-
-let {
+const {
   amapKey,
   amapStyleKey,
   amapLon,
@@ -44,7 +44,10 @@ let {
   viewMode,
   pitch,
   skyColor,
-  marker
+  marker,
+  iconMarker,
+  mpBorderConfig,
+  bgColor
 } = toRefs(props.chartConfig.option.mapOptions)
 
 //官方没有高德地图api的ts，所以类型全用的any
@@ -71,7 +74,10 @@ const initMap = (newData: any) => {
         pitch: pitch.value, // 地图俯仰角度，有效范围 0 度- 83 度
         skyColor: skyColor.value,
         viewMode: viewMode.value, // 地图模式
-        willReadFrequently: true
+        willReadFrequently: true,
+        WebGLParams: {
+          preserveDrawingBuffer: true,
+        }
       })
       dataHandle(props.chartConfig.option.dataset) //处理地图标点
       let satellite = new AMap.TileLayer.Satellite()
@@ -84,7 +90,6 @@ const initMap = (newData: any) => {
           `amap://styles/${amapStyleKeyCustom.value !== '' ? amapStyleKeyCustom.value : amapStyleKey.value}`
         )
       }
-      //点击地图任意地方关闭infoWindow窗体
       mapIns.on('click', () => {
         mapIns.clearInfoWindow()
       })
@@ -94,81 +99,115 @@ const initMap = (newData: any) => {
     })
 }
 
+
+//携带设备的tbDeviceId和别名或者名称
+const devicePartInfo = reactive<devicePartInfoInterface>({
+  tbDeviceId: '',
+  name: '',
+  alias: '',
+  deviceProfileId: '',
+})
+
 //创建信息弹窗
 const createInfoWindow = async (extraInfo: dataExtraInfoType) => {
   try {
-    const { name, alias, organizationDTO, deviceState, deviceProfile, deviceInfo, tbDeviceId } = extraInfo
+    const { name, alias, organizationDTO, deviceState, deviceProfile, deviceInfo, tbDeviceId, deviceProfileId } = extraInfo
+    devicePartInfo.tbDeviceId = tbDeviceId
+    devicePartInfo.alias = alias
+    devicePartInfo.name = name
+    devicePartInfo.deviceProfileId = deviceProfileId
     if (tbDeviceId.startsWith('@')) return //假的模拟数据则终止
     const res = await getDeviceActiveTime(tbDeviceId) //查询设备最后离线时间
     let { lastUpdateTs } = res[0]
     const lastUpdateFormatTs = dayjs(lastUpdateTs).format('YYYY-MM-DD HH:mm:ss')
+    //以render方式渲染小组件里的边框组件
+    const BorderInstance = await import(`../../../../Decorates/Borders/${mpBorderConfig.value.value}/index.vue`)
+    const config = await import(`../../../../Decorates/Borders/${mpBorderConfig.value.value}/config.ts`)
+    const BorderConfigInstance = new config.default()
+    const id = Date.now().toString()
+    setTimeout(() => {
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      render(h(BorderInstance.default, { chartConfig: BorderConfigInstance }), document.getElementById(id)!)
+    }, 100)
+    //
+    const textOverflow = `width:16rem;text-overflow:ellipsis;overflow:hidden;word-break:break-all;white-space:nowrap;`
+    const textOverflowFontBold = `width:12rem;text-overflow:ellipsis;overflow:hidden;word-break:break-all;white-space:nowrap;font-size:15px;font-weight:bold;`
+    const deviceStateContainer = `display:flex;justify-content:space-between;align-items:center;`
+    const deviceStateImg = `width:1.2rem;height:1.2rem;`
+    const deviceStateText = `margin-left:0.6rem;font-weight:bold;`
     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>
-          `
+    <div id="${id}" style="width:30rem;">
+      <div style="display:flex;flex-direction:column;margin:3.5rem 5.5rem 2rem 6.5rem;position:relative;">
+        <div style="display:flex;justify-content:space-between;align-items:center;color:white;">
+          <span style="${textOverflowFontBold}">${alias || name}</span>
+          ${deviceState === 'INACTIVE'
+        ? `<div style="${deviceStateContainer}">
+                <img onclick="handleOpenDrawer()" title="最新数据" style="${deviceStateImg};cursor:pointer;" src="${listView}"/>
+                <img style="${deviceStateImg};margin-left:0.3rem" src="${inactive}"/>
+                <span style="${deviceStateText}">待激活</span>
+               </div>`
+        : deviceState === 'ONLINE'
+          ? `<div style="${deviceStateContainer}">
+                <img onclick="handleOpenDrawer()" title="最新数据"  style="${deviceStateImg};cursor:pointer;" src="${listView}"/>
+                <img style="${deviceStateImg};margin-left:0.3rem" src="${online}"/>
+                <span style="${deviceStateText}">在线</span>
+               </div>`
+          : `<div style="${deviceStateContainer}">
+                <img onclick="handleOpenDrawer()" title="最新数据"  style="${deviceStateImg};cursor:pointer;" src="${listView}"/>
+                <img style="${deviceStateImg};margin-left:0.3rem" src="${offline}"/>
+                <span style="${deviceStateText}">离线</span>
+               </div>`
+      }
+        </div>
+        <div style="display:flex;flex-direction:column;justify-content:space-between;color:white;margin-top:1rem;gap:0.95rem;">
+          <div style="${textOverflow}">所属组织：${organizationDTO.name}</div>
+          <div style="${textOverflow}">接入协议：${deviceProfile.transportType}</div>
+          <div style="${textOverflow}">设备位置：${!deviceInfo.address ? '该设备暂无地理位置' : deviceInfo.address}</div>
+          <div style="${textOverflow}">${deviceState === 'ONLINE' ? '在线' : deviceState === 'INACTIVE' ? '创建' : '离线'}时间：${lastUpdateFormatTs}</div>
+        </div>
+      </div>
+    </div>
+    `
   } catch (e) {
     console.error(e)
   }
 }
 
-const handleMouseenter = () => (showSearchBox.value = true)
-
-const handleMouseleave = () => (showSearchBox.value = false)
-
-const handleOpenSearchBox = () => (modelShow.value = true)
+const handleOpenDrawer = async () => {
+  deviceLatestTableRef.value?.openDrawer()
+  deviceLatestTableRef.value?.setDrawerTitle(devicePartInfo.alias || devicePartInfo.name)
+  if (!devicePartInfo.tbDeviceId) return
+  const resp = await getDeviceLatest(devicePartInfo.tbDeviceId)
+  const respGetAttrs = await getProfileAttrs({ deviceProfileId: devicePartInfo.deviceProfileId })
+  deviceLatestTableRef.value?.setValue(resp, respGetAttrs)
+}
 
-const handleCloseDrawer = () => (modelShow.value = false)
+onMounted(() => {
+  (window as any).handleOpenDrawer = handleOpenDrawer;
+});
 
-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()
-  }
-}
+onUnmounted(() => {
+  (window as any).handleOpenDrawer = null;
+});
 
-//地图点击
+//地图鼠标hover
 const mapClick = (markerInstance: any, markerItem: dataJsonMarkersType) => {
   markerInstance.setExtData({
     extraInfo: markerItem.extraInfo
   })
-  markerInstance.setLabel({
-    content: markerItem.extraInfo.alias || markerItem.extraInfo.name
-  })
+  // mouseover
   markerInstance.on('click', async (e: any) => {
     const { extraInfo } = e.target.getExtData()
+    if (extraInfo.tbDeviceId.startsWith('@')) return //假的模拟数据则终止弹窗
     let infoWindow = new AMapIns.InfoWindow({
       content: await createInfoWindow(extraInfo),
-      offset: new AMapIns.Pixel(0, -50)
+      offset: new AMapIns.Pixel(3, -30)
     })
     infoWindow.open(mapIns, e.target.getPosition())
   })
+  // markerInstance.on('click', () => {
+  //   mapIns.clearInfoWindow()
+  // })
 }
 
 const dataHandle = (newData: dataJsonType) => {
@@ -185,11 +224,13 @@ const dataHandle = (newData: dataJsonType) => {
       newData.markers.forEach((markerItem: dataJsonMarkersType) => {
         const markerInstance = new AMapIns.Marker({
           position: [markerItem.position[0], markerItem.position[1]],
-          offset: new AMapIns.Pixel(-13, -30)
+          offset: new AMapIns.Pixel(-13, 5),
+          icon: iconMarker.value
         })
-        // markers.push(markerInstance) 原作者这种方式添加，属于JS API 1.4.8版本的
-        // markerInstance.setMap(mapIns)
-        mapIns.add(markerInstance)
+        // 原作者这种方式添加，属于JS API 1.4.8版本的
+        markers.push(markerInstance)
+        markerInstance.setMap(mapIns)
+        // mapIns.add(markerInstance)
         mapClick(markerInstance, markerItem)
       })
     } else if (mapMarkerType.value === MarkerEnum.CIRCLE_MARKER) {
@@ -239,13 +280,47 @@ watch(
 // 预览
 useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
   stopWatch()
-  dataHandle(newData)
+  setTimeout(() => {
+    dataHandle(newData)
+  }, 1000)
 })
 </script>
 
+<style>
+/**去除高德地图原生弹窗 */
+.amap-info-outer,
+.amap-menu-outer {
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0) !important;
+}
+
+.amap-info-outer {
+  background-color: rgba(0, 0, 0, 0) !important;
+}
+
+.amap-info-close {
+  display: none !important;
+}
+
+.amap-info-content {
+  overflow: hidden !important;
+}
+
+/**去除高德地图原生弹窗*/
+.amap-info-content .go-border-box {
+  position: absolute;
+  transform: scale(0.68);
+  top: 0;
+  z-index: -100;
+}
+
+.amap-info-content .go-border-box svg {
+  background-color: v-bind(bgColor);
+}
+</style>
 <style lang="scss" scoped>
 .chart-amap {
   position: relative;
+
   .search-box {
     cursor: pointer;
     position: absolute;

@@ -7,11 +7,11 @@ import dataJson from './data.json'
 
 //省市区枚举
 export const enum areaEnum {
-  PROVINCE = 'PROVINCE',//省份
-  CITY = 'CITY',//城市
-  COUNTY = 'COUNTY',//县
-  COUNTRY = 'COUNTRY',//国家
-  TOWN = 'TOWN'//镇
+  PROVINCE = 'PROVINCE', //省份
+  CITY = 'CITY', //城市
+  COUNTY = 'COUNTY', //县
+  COUNTRY = 'COUNTRY', //国家
+  TOWN = 'TOWN' //镇
 }
 export const includes = []
 
@@ -22,6 +22,9 @@ export const option = {
   iconDistanceTop: 20,
   drillingIn: false,
   dataset: dataJson,
+  saveClickRegion: {
+    level: ''
+  },
   mapRegion: {
     adcode: 'china',
     showHainanIsLands: true,
@@ -161,6 +164,26 @@ export const option = {
         shadowOffsetY: 2,
         shadowBlur: 10
       }
+    },
+    {
+      type: 'lines',
+      zlevel: 2,
+      effect: {
+        show: true,
+        period: 4, //箭头指向速度，值越小速度越快
+        trailLength: 0.4, //特效尾迹长度[0,1]值越大，尾迹越长重
+        symbol: 'arrow', //箭头图标
+        symbolSize: 7 //图标大小
+      },
+      lineStyle: {
+        normal: {
+          color: '#4fb6d2',
+          width: 1, //线条宽度
+          opacity: 0.1, //尾迹线条透明度
+          curveness: 0.3 //尾迹线条曲直度
+        }
+      },
+      data: []
     }
   ]
 }

@@ -246,6 +246,46 @@
       </SettingItem>
     </SettingItemBox>
   </CollapseItem>
+  <CollapseItem v-if="seriesList[2]" name="飞线" :expanded="true">
+    <SettingItemBox name="箭头">
+      <SettingItem name="速度">
+        <n-tooltip trigger="hover">
+          <template #trigger>
+            <n-input-number v-model:value="seriesList[2].effect.period" size="small" :min="0"></n-input-number>
+          </template>
+          值越小速度越快
+        </n-tooltip>
+      </SettingItem>
+      <SettingItem name="尾迹">
+        <n-tooltip trigger="hover">
+          <template #trigger>
+            <n-input-number
+              v-model:value="seriesList[2].effect.trailLength"
+              size="small"
+              :min="0"
+              :max="1"
+            ></n-input-number>
+          </template>
+          特效尾迹长度[0,1]值越大，尾迹越长重
+        </n-tooltip>
+      </SettingItem>
+      <SettingItem name="大小">
+        <n-input-number v-model:value="seriesList[2].effect.symbolSize" size="small" :min="0"></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="配置">
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="seriesList[2].lineStyle.normal.color"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="宽度">
+        <n-input-number v-model:value="seriesList[2].lineStyle.normal.width" size="small" :min="1"></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
 </template>
 
 <script setup lang="ts">

@@ -26,6 +26,36 @@
       "value": [126.642464, 45.756967, 101]
     }
   ],
+  "line": [
+    {
+      "adcode": 410000,
+      "coords": [
+        [113.665412, 34.757975],
+        [116.405285, 39.904989]
+      ]
+    },
+    {
+      "adcode": 630000,
+      "coords": [
+        [101.778916, 36.623178],
+        [116.405285, 39.904989]
+      ]
+    },
+    {
+      "adcode": 640000,
+      "coords": [
+        [106.278179, 38.46637],
+        [116.405285, 39.904989]
+      ]
+    },
+    {
+      "adcode": 230000,
+      "coords": [
+        [126.642464, 45.756967],
+        [116.405285, 39.904989]
+      ]
+    }
+  ],
   "map": [
     {
       "name": "北京市",

@@ -74,7 +74,7 @@ const toolBoxOption = ref({
   top: 20,
   feature: {
     myFullButton: {
-      show: true,
+      show: false,
       title: '返回',
       icon: iconStr.value,
       iconStyle: {
@@ -88,22 +88,49 @@ const toolBoxOption = ref({
 watch(
   () => props.chartConfig.option,
   newData => {
-    const { iconColor, drillingIn, iconDistanceRight, iconDistanceTop } = newData
-    toolBoxOption.value.feature.myFullButton.show = drillingIn
+    const { iconColor, drillingIn, iconDistanceRight, iconDistanceTop, mapRegion } = newData
+    if (drillingIn && !newData.saveClickRegion.level) {
+      toolBoxOption.value.feature.myFullButton.show = !drillingIn
+    } else if (
+      drillingIn &&
+      newData.saveClickRegion.level === areaEnum.PROVINCE &&
+      mapRegion.saveSelect.levelStr === areaEnum.COUNTRY
+    ) {
+      toolBoxOption.value.feature.myFullButton.show = drillingIn
+    } else if (
+      drillingIn &&
+      newData.saveClickRegion.level === areaEnum.COUNTRY &&
+      mapRegion.saveSelect.levelStr === areaEnum.COUNTRY
+    ) {
+      toolBoxOption.value.feature.myFullButton.show = !drillingIn
+    } else if (
+      drillingIn &&
+      newData.saveClickRegion.level === areaEnum.CITY &&
+      mapRegion.saveSelect.levelStr === areaEnum.PROVINCE
+    ) {
+      toolBoxOption.value.feature.myFullButton.show = drillingIn
+    } else if (
+      drillingIn &&
+      newData.saveClickRegion.level === areaEnum.PROVINCE &&
+      mapRegion.saveSelect.levelStr === areaEnum.PROVINCE
+    ) {
+      toolBoxOption.value.feature.myFullButton.show = !drillingIn
+    }
     toolBoxOption.value.feature.myFullButton.iconStyle.color = iconColor
     toolBoxOption.value.right = iconDistanceRight
     toolBoxOption.value.top = iconDistanceTop
+    vEchartsSetOption()
   },
   {
-    deep: true
+    deep: true,
   }
 )
-
 props.chartConfig.option = {
   ...props.chartConfig.option,
   ...{ toolbox: toolBoxOption.value }
 }
 
+
 //地图点击返回 adcode=100000,名字必须是china
 const watchAdcode = async () => {
   if (props.chartConfig.option.drillingIn) {
@@ -121,6 +148,7 @@ const watchAdcode = async () => {
     }
     await getGeojson(saveAdcode)
     const adcode = saveAdcode === 100000 ? 'china' : saveAdcode
+    props.chartConfig.option.saveClickRegion.level = saveLevelStr.level
     props.chartConfig.option.geo.map = adcode
     props.chartConfig.option.series.forEach((item: any) => {
       if (item.type === 'map') item.map = adcode
@@ -202,9 +230,19 @@ const vEchartsSetOption = async () => {
 const dataSetHandle = async (dataset: any) => {
   props.chartConfig.option.series.forEach((item: any) => {
     if (item.type === 'effectScatter' && dataset.point) item.data = dataset.point
-    else if (item.type === 'map' && dataset.map) item.data = dataset.map
+    else if (item.type === 'lines' && dataset.line) {
+      item.data = dataset.line.map((it: any) => {
+        return {
+          ...it,
+          lineStyle: {
+            color: props.chartConfig.option.series[2].lineStyle.normal.color
+          }
+        }
+      })
+    } else if (item.type === 'map' && dataset.map) item.data = dataset.map
   })
   if (dataset.pieces) props.chartConfig.option.visualMap.pieces = dataset.pieces
+
   isPreview() && vEchartsSetOption()
 }
 
@@ -245,14 +283,16 @@ watch(
   }
 )
 
-//处理数据标点
+//处理数据标点包括飞线
 const handleDataPoint = (newData: any) => {
   if (newData === 'china') {
     dataSetHandle(dataJson)
   } else {
     const filterPoint = dataJson.point.filter((item: any) => item.adcode === newData)
+    // const filterLine = dataJson.line.filter((item: any) => item.adcode === newData)
     dataSetHandle({
-      point: filterPoint
+      point: filterPoint,
+      line: [] //由于点击单个地图模块，所以去除飞线
     })
   }
 }
@@ -274,7 +314,8 @@ watch(
     }
   },
   {
-    deep: false
+    deep: false,
+    immediate: true,
   }
 )
 
@@ -310,8 +351,9 @@ const handleVChartClick = async (params: any) => {
         const level = item.properties.level.toUpperCase()
         const adcode = item.properties.adcode
         if (level === 'DISTRICT') return
-        if(String(adcode).startsWith('15') && level===areaEnum.CITY) return
+        if (String(adcode).startsWith('15') && level === areaEnum.CITY) return
         props.chartConfig.option.mapRegion.adcode = adcode
+        props.chartConfig.option.saveClickRegion.level = level
         saveLevelStr.level = level
         handleDataPoint(adcode)
         saveHistoryParent.value.push({

@@ -5,7 +5,7 @@ import cloneDeep from 'lodash/cloneDeep'
 import { chartInitConfig } from '@/settings/designSetting'
 
 export const option = {
-  dataset: [new URL('/src/assets/external/three/test.obj', import.meta.url).href],//三维数据源
+  dataset: [new URL('/src/assets/external/three/test.obj', import.meta.url).href], //三维数据源
   backgroundColor: '', //场景背景色
   backgroundAlpha: 0, //场景透明度
   enableDamping: false, //是否启用阻尼
@@ -18,7 +18,9 @@ export const option = {
    */
   outputEncoding: 'liner',
   clearScene: false, //是否清空场景内容
-  lights: [//灯光为数组，type 为 环境光(AmbientLight) | 方向光(DirectionalLight) | 点光(PointLight) | 半球光(HemisphereLight)
+  lightInput: 1,
+  lights: [
+    //灯光为数组，type 为 环境光(AmbientLight) | 方向光(DirectionalLight) | 点光(PointLight) | 半球光(HemisphereLight)
     {
       type: 'AmbientLight',
       label: '环境光(只有颜色)',
@@ -54,38 +56,41 @@ export const option = {
     size: 1,
     show: false
   },
-  position: [//模型位置
+  position: [
+    //模型位置
     {
       x: 0,
       y: 0,
       z: 0
     }
   ],
-  rotation: [//模型旋转
+  rotation: [
+    //模型旋转
     {
       x: 0,
       y: 0,
       z: 0
     }
   ],
-  showFps:false,//是否显示fps
-  labels:[ //添加图片/文字标签，暂且支持文字
+  showFps: false, //是否显示fps
+  labels: [
+    //添加图片/文字标签，暂且支持文字
     {
-      image: "",
-      text: "",
+      image: '',
+      text: '',
       textStyle: {
-        fontFamily: "Arial",
+        fontFamily: 'Arial',
         fontSize: 18,
-        fontWeight: "normal",
+        fontWeight: 'normal',
         lineHeight: 1,
-        color: "#ffffff",
+        color: '#ffffff',
         borderWidth: 8,
         borderRadius: 4,
-        borderColor: "rgba(0,0,0,1)",
-        backgroundColor: "rgba(0, 0, 0, 1)"
+        borderColor: 'rgba(0,0,0,1)',
+        backgroundColor: 'rgba(0, 0, 0, 1)'
       },
-      position: {x:0, y:0, z:0},
-      scale:{x:1, y:1, z:0},
+      position: { x: 0, y: 0, z: 0 },
+      scale: { x: 1, y: 1, z: 0 },
       sid: null
     }
   ]

@@ -11,15 +11,15 @@
         <n-input-number :min="0" v-model:value="optionData.borderConfig.size" size="small" />
       </setting-item>
     </setting-item-box>
-    <setting-item-box  name="上传文件">
+    <setting-item-box name="上传文件">
       <setting-item>
         <FileUpload
-        :max="100"
-        :fileList="optionData.dataset"
-        :threeSupportFileFormat="threeSupportFileFormat"
-        :singleFileType="singleFileTypeNotMtl"
-        @fileStaticUri="handleFileStaticUri"
-      />
+          :max="100"
+          :fileList="optionData.dataset"
+          :threeSupportFileFormat="threeSupportFileFormat"
+          :singleFileType="singleFileTypeNotMtl"
+          @fileStaticUri="handleFileStaticUri"
+        />
       </setting-item>
     </setting-item-box>
     <setting-item-box :alone="true">
@@ -78,8 +78,13 @@
         </template>
       </setting-item>
     </setting-item-box>
+    <setting-item-box name="灯光选择">
+      <setting-item name="灯光选择((0,环境光),(1,方向光),(2,点光),(3,半球光))">
+        <n-input-number :min="0" :max="3" v-model:value="optionData.lightInput" size="small" />
+      </setting-item>
+    </setting-item-box>
     <setting-item-box name="灯光配置">
-      <setting-item v-for="(item, index) in optionData.lights" :name="item.label" :key="index">
+      <setting-item v-for="(item, index) in [optionData.lights[optionData.lightInput]]" :name="item.label" :key="index">
         <n-color-picker
           v-if="!includeHemisphereLight.includes(item.type)"
           size="small"
@@ -180,15 +185,9 @@
       <SettingItem v-if="optionData.enableDamping" name="阻尼值">
         <n-input-number v-model:value="optionData.dampingFactor" :min="0" :max="1" size="small"></n-input-number>
       </SettingItem>
-      <SettingItem name="启用动画">
-        <n-switch v-model:value="optionData.autoPlay" size="small" />
-      </SettingItem>
-      <SettingItem name="输出编码">
+      <SettingItem name="输出编码，可取值为 liner 或 sRGB。linear 是 LinearEncoding 线性编码, sRGB 即 sRGBEncoding rgb 模式编码（sRGBEncoding 能更好的还原材质颜色）">
         <n-select v-model:value="optionData.outputEncoding" size="small" :options="encodinghList"></n-select>
       </SettingItem>
-      <SettingItem name="是否清空场景">
-        <n-switch @change="handleChange" v-model:value="optionData.clearScene" size="small" />
-      </SettingItem>
     </setting-item-box>
   </collapse-item>
 </template>
@@ -253,10 +252,6 @@ const encodinghList = [
   { label: 'sRGB ', value: 'sRGB ' }
 ]
 
-const handleChange = (e: boolean) => {
-  if (e) props.optionData.dataset = ['']
-}
-
 const handleFileStaticUri = (value: UploadFileInfo[]) => {
   props.optionData.dataset = value.map(item => item?.url)?.filter(Boolean) as any
   if (Array.isArray(props.optionData.dataset) && props.optionData.dataset.length === 0) {

 <template>
-  <div class="go-content-box" :style="{ border: !borderConfig.show ? 'none' : ''}">
-    <div v-if="useDetectWebGLContext()">
+  <div class="go-content-box" :style="{ border: !borderConfig.show ? 'none' : '' }">
+    <div>
       <vue3dLoader
         ref="vue3dLoaderRef"
         :webGLRendererOptions="webGLRendererOptions"
@@ -20,7 +20,7 @@
         @load="onLoad"
         :position="position"
         :rotation="rotation"
-        :lights="lights"
+        :lights="[lights[lightInput]]"
         :showFps="showFps"
         :labels="labels"
       />
@@ -29,15 +29,13 @@
         <n-progress type="line" :color="themeColor" :percentage="process" :indicator-placement="'inside'" processing />
       </div>
     </div>
-    <div v-else>您的浏览器不支持WebGL!</div>
   </div>
 </template>
 <script setup lang="ts">
-import { PropType, toRefs, ref, nextTick, computed, watch } from 'vue'
+import { PropType, toRefs, ref, nextTick, computed } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 import { vue3dLoader } from 'vue-3d-loader'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
-import { useDetectWebGLContext } from '@/utils/external/useSupportWebGL'
 
 const designStore = useDesignStore()
 
@@ -54,7 +52,6 @@ const themeColor = computed(() => {
 
 const vue3dLoaderRef = ref(null)
 
-//threejs配置
 const webGLRendererOptions = {
   alpha: true, // 透明
   antialias: true, // 抗锯齿
@@ -96,13 +93,9 @@ const {
   rotation,
   lights,
   showFps,
-  labels
-} = toRefs(props.chartConfig.option) as any
-
-watch(dataset, (newData: string) => {
-  //dateset为空则清除场景
-  if(!newData) clearScene.value=true
-})
+  labels,
+  lightInput
+} = toRefs(props.chartConfig.option)  as any
 </script>
 
 <style lang="scss" scoped>

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

@@ -2,24 +2,11 @@
   <collapse-item name="属性" :expanded="true">
     <setting-item-box name="上传图片" :alone="true">
       <setting-item>
-        <n-card class="upload-box">
-          <n-upload
-            :show-file-list="false"
-            v-model:file-list="uploadFileListRef"
-            :customRequest="customRequest"
-            :onBeforeUpload="beforeUploadHandle"
-          >
-            <n-upload-dragger>
-              <img v-if="optionData.dataset" class="upload-show" :src="optionData.dataset" alt="背景" />
-              <div class="upload-img" v-show="!optionData.dataset">
-                <img src="@/assets/images/canvas/noImage.png" />
-                <n-text class="upload-desc" depth="3">
-                  图片需小于 {{ backgroundImageSize }}M ，格式为 png/jpg/gif 的文件
-                </n-text>
-              </div>
-            </n-upload-dragger>
-          </n-upload>
-        </n-card>
+        <TKUpload
+          :uploadImageUrl="props.optionData.dataset"
+          @sendFile="handleSendFile"
+          @removeFile="handleRemoveFile"
+        />
       </setting-item>
     </setting-item-box>
     <setting-item-box name="样式">
@@ -39,14 +26,10 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, ref, nextTick } from 'vue'
+import { PropType } from 'vue'
 import { option } from './config'
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
-import { FileTypeEnum } from '@/enums/fileTypeEnum'
-import { uploadFile } from '@/api/external/contentSave/content'
-import { UploadCustomRequestOptions } from 'naive-ui'
-import { backgroundImageSize } from '@/settings/designSetting'
-import { fetchRouteParamsLocation } from '@/utils'
+import { TKUpload } from '@/components/external/Common/TKUpload'
 
 const props = defineProps({
   optionData: {
@@ -55,48 +38,12 @@ const props = defineProps({
   }
 })
 
-const uploadFileListRef = ref()
-
-// 上传图片前置处理
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-//@ts-ignore
-const beforeUploadHandle = async ({ file }) => {
-  uploadFileListRef.value = []
-  const type = file.file.type
-  const size = file.file.size
-
-  if (size > 1024 * 1024 * backgroundImageSize) {
-    window['$message'].warning(`图片超出 ${backgroundImageSize}M 限制，请重新上传！`)
-    return false
-  }
-  if (type !== FileTypeEnum.PNG && type !== FileTypeEnum.JPEG && type !== FileTypeEnum.GIF) {
-    window['$message'].warning('文件格式不符合，请重新上传！')
-    return false
-  }
-  return true
+const handleSendFile = (file: string) => {
+  if (!file) return
+  props.optionData.dataset = file
 }
 
-// 自定义上传操作
-const customRequest = (options: UploadCustomRequestOptions) => {
-  const { file } = options
-  nextTick(async () => {
-    if (file.file) {
-      // 修改名称
-      const newNameFile = new File([file.file], `${fetchRouteParamsLocation()}_index_background.png`, {
-        type: file.file.type
-      })
-      let uploadParams = new FormData()
-      uploadParams.append('file', newNameFile)
-      const uploadRes = await uploadFile(uploadParams)
-      if (uploadRes) {
-        props.optionData.dataset = uploadRes?.fileStaticUri
-        window['$message'].success('添加图片成功！')
-      }
-    } else {
-      window['$message'].error('添加图片失败，请稍后重试！')
-    }
-  })
-}
+const handleRemoveFile = (status: boolean) => (status ? (props.optionData.dataset = '') : null)
 
 // 适应类型
 const fitList = [
@@ -122,35 +69,3 @@ const fitList = [
   }
 ]
 </script>
-<style lang="scss" scoped>
-$uploadHeight: 193px;
-.upload-box {
-  cursor: pointer;
-  margin-bottom: 20px;
-  @include deep() {
-    .n-card__content {
-      padding: 0;
-      overflow: hidden;
-    }
-    .n-upload-dragger {
-      padding: 5px;
-    }
-  }
-  .upload-show {
-    width: -webkit-fill-available;
-    height: $uploadHeight;
-    border-radius: 5px;
-  }
-  .upload-img {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    img {
-      height: 150px;
-    }
-    .upload-desc {
-      padding: 10px 0;
-    }
-  }
-}
-</style>

 <template>
-  <div class="videoPlay">
+  <div class="go-content-box" :style="{ width: w + 'px', height: h + 'px' }">
     <video
-      style="object-fit: cover"
-      :poster="poster"
       crossOrigin="anonymous"
+      :id="`my-player`"
       ref="videoRef"
-      class="video-js vjs-default-skin vjs-big-play-centered"
-      controls
-    >
-      <source :src="path" />
-    </video>
+      class="video-js my-video vjs-theme-city vjs-big-play-centered"
+    ></video>
   </div>
 </template>
-<script lang="ts" setup>
-import { nextTick, onBeforeUnmount, onMounted, ref, watch, toRefs } from 'vue'
-import videojs, { VideoJsPlayer } from 'video.js'
+<script setup lang="ts">
+import { onMounted, ref, onUnmounted, watch, unref } from 'vue'
+import videojs from 'video.js'
+import 'videojs-flvjs-es6'
 import type { VideoJsPlayerOptions } from 'video.js'
-import 'video.js/dist/video-js.css'
-import zh from 'video.js/dist/lang/zh-CN.json'
-
-const props = withDefaults(
-  defineProps<{
-    path: string
-    autoPlay?: boolean
-    h?: number
-    poster?: string
-  }>(),
-  { autoPlay: false }
-)
+import 'video.js/dist/video-js.min.css'
+import { getJwtToken, getShareJwtToken } from '@/utils/external/auth'
+import { isShareMode } from '@/views/share/hook'
+import { getOpenFlvPlayUrl, closeFlvPlay } from '@/api/external/flvPlay'
+import { useFingerprint } from '@/utils/external/useFingerprint'
+import { GetResult } from '@fingerprintjs/fingerprintjs'
 
-const videoRef = ref()
-
-let player: VideoJsPlayer
-
-const initPlay = async () => {
-  videojs.addLanguage('zh-CN', zh)
-  await nextTick()
-  const options: VideoJsPlayerOptions = {
-    muted: true,
-    controls: true,
-    autoplay: props.autoPlay,
-    src: props?.path,
-    poster: props?.poster,
-    language: 'zh-CN',
-    techOrder: ['html5'],
-    preload: 'none'
+const props = defineProps({
+  sourceSrc: {
+    type: String
+  },
+  autoplay: {
+    type: Boolean
+  },
+  name: {
+    type: String
+  },
+  avatar: {
+    type: String
+  },
+  w: {
+    type: Number,
+    default: 300
+  },
+  h: {
+    type: Number,
+    default: 300
   }
-  player = videojs(videoRef.value, options, () => {
-    videojs.log('Video is reading')
-    if (props.autoPlay) {
-      player.play()
+})
+
+enum VideoPlayerType {
+  m3u8 = 'application/x-mpegURL',
+  mp4 = 'video/mp4',
+  webm = 'video/webm',
+  flv = 'video/x-flv'
+}
+
+const isRtspProtocol = (url: string) => {
+  const reg = /^rtsp:\/\//g
+  return reg.test(url)
+}
+
+const getVideoTypeByUrl = (url = '') => {
+  try {
+    const { protocol, pathname } = new URL(url)
+    if (protocol.startsWith('rtsp:')) return VideoPlayerType.flv
+    const reg = /[^.]\w*$/
+    const mathValue = pathname.match(reg) || []
+    const ext = (mathValue[0] as keyof typeof VideoPlayerType) || 'webm'
+    const type = VideoPlayerType[ext]
+    return type ? type : VideoPlayerType.webm
+  } catch (error) {
+    console.error(error)
+    return VideoPlayerType.webm
+  }
+}
+
+// video标签
+const videoRef = ref<HTMLElement | null>(null)
+
+// video实例对象
+let videoPlayer: videojs.Player | null = null
+
+const fingerprintResult = ref<Nullable<GetResult>>(null)
+
+//options配置
+const options: VideoJsPlayerOptions & Recordable = {
+  language: 'zh-CN', // 设置语言
+  controls: true, // 是否显示控制条
+  preload: 'auto', // 预加载
+  autoplay: true, // 是否自动播放
+  fluid: false, // 自适应宽高
+  poster: props?.avatar || '',
+  // src: getSource() || '', // 要嵌入的视频源的源 URL
+  sources: [],
+  muted: true,
+  userActions: {
+    hotkeys: true
+  },
+  techOrder: ['html5', 'flvjs'],
+  flvjs: {
+    mediaDataSource: {
+      isLive: true,
+      cors: true,
+      withCredentials: false,
+      hasAudio: false
+    },
+    config: {
+      autoCleanupSourceBuffer: true
     }
-    player.on('ended', () => {
-      videojs.log('Play end')
-    })
-    player.on('error', () => {
-      player.errorDisplay.close()
-      videojs.log('Play parse error')
-    })
-  })
+  }
 }
 
-onMounted(() => {
-  initPlay()
-})
+const { getResult } = useFingerprint()
+async function getSource() {
+  fingerprintResult.value = await getResult()
+  let src = props.sourceSrc || ''
+  if (isRtspProtocol(props.sourceSrc!)) {
+    src = getOpenFlvPlayUrl(src, unref(fingerprintResult)?.visitorId || '')
+  }
+  return [
+    {
+      type: getVideoTypeByUrl(props.sourceSrc),
+      src
+    }
+  ]
+}
 
-//直接改变路径测试
-watch(
-  () => props.path,
-  () => {
-    if (props.path && props.autoPlay) {
-      try {
-        player?.pause()
-        player?.load()
-        player?.src(props.path)
-        player?.play()
-      } catch (e) {
-        console.log(e)
+// 初始化videojs
+const initVideo = async () => {
+  if (videoRef.value) {
+    // 创建 video 实例
+    options.sources = await getSource()
+    if (options.sources && options.sources.length) {
+      if (isRtspProtocol(props.sourceSrc || '')) {
+        options.flvjs = {
+          ...(options.flvjs || {}),
+          config: {
+            headers: {
+              'X-Authorization': `Bearer ${isShareMode() ? getShareJwtToken() : getJwtToken()}`
+            }
+          }
+        }
       }
+      videoPlayer = videojs(videoRef.value, options)
     }
+  }
+}
+
+watch(
+  () => props.sourceSrc,
+  async (newData: any) => {
+    const result = await getSource()
+    // props.sourceSrc = newData
+    videoPlayer?.src(result) as any
+    videoPlayer?.play()
   },
   {
     immediate: true
   }
 )
 
-onBeforeUnmount(() => {
-  player?.dispose()
+onMounted(() => {
+  initVideo()
+})
+
+onUnmounted(() => {
+  if (props.sourceSrc) {
+    closeFlvPlay(props.sourceSrc, unref(fingerprintResult)!.visitorId!)
+  }
+  handleVideoDispose()
+})
+
+//播放
+const handleVideoPlay = () => videoPlayer?.play()
+
+const handleVideoDispose = () => videoPlayer?.dispose() && videoPlayer?.pause()
+//暂停
+defineExpose({
+  handleVideoPlay,
+  handleVideoDispose
 })
 </script>
-<style>
-.vjs-poster {
-  background-size: cover !important;
-}
-</style>
+
 <style lang="scss" scoped>
-.videoPlay {
-  flex: 1;
-  height: v-bind('`${h}px`');
-  .video-js {
-    height: 100%;
-    width: 100%;
+.go-content-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .my-video {
+    width: 100% !important;
+    height: 100% !important;
+    position: relative;
   }
 }
 </style>

@@ -2,29 +2,12 @@
   <CollapseItem name="播放器配置" :expanded="true">
     <setting-item-box name="上传图片" :alone="true">
       <setting-item>
-        <n-card class="upload-box">
-          <n-upload
-            :show-file-list="false"
-            v-model:file-list="uploadFileListRef"
-            :customRequest="customRequest"
-            :onBeforeUpload="beforeUploadHandle"
-          >
-            <n-upload-dragger>
-              <img v-if="optionData.poster" class="upload-show" :src="optionData.poster" alt="背景" />
-              <div class="upload-img" v-show="!optionData.poster">
-                <img src="@/assets/images/canvas/noImage.png" />
-                <n-text class="upload-desc" depth="3">
-                  图片需小于 {{ backgroundImageSize }}M ，格式为 png/jpg/gif 的文件
-                </n-text>
-              </div>
-            </n-upload-dragger>
-          </n-upload>
-        </n-card>
+        <TKUpload :uploadImageUrl="optionData.poster" @sendFile="handleSendFile" @removeFile="handleRemoveFile" />
       </setting-item>
     </setting-item-box>
     <setting-item-box name="源类型" :alone="true">
       <setting-item>
-        <n-radio-group @change="handleChecked" v-model:value="optionData.sourceType" name="radiogroup">
+        <n-radio-group @update:value="handleChecked" v-model:value="optionData.sourceType" name="radiogroup">
           <n-space>
             <n-radio v-for="(item, index) in sourceTypes" :key="item.value" :value="item.value">
               {{ item.label }}
@@ -55,7 +38,12 @@
     </setting-item-box>
     <setting-item-box v-if="optionData.sourceType === sourceTypeEnum.PLATFORM" name="视频" :alone="true">
       <setting-item>
-        <n-select @update:value="handleSelect" v-model:value="optionData.dataset" :options="videoOptions" />
+        <n-select
+          @update:value="handleSelect"
+          v-model:value="optionData.dataset"
+          :options="videoOptions"
+          placeholder="请选择视频地址"
+        />
       </setting-item>
     </setting-item-box>
     <setting-item-box name="自动播放">
@@ -67,15 +55,21 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, ref, nextTick, onMounted } from 'vue'
+import { PropType, ref, onMounted } from 'vue'
 import { option, sourceTypeEnum } from './config'
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
-import { FileTypeEnum } from '@/enums/fileTypeEnum'
-import { uploadFile } from '@/api/external/contentSave/content'
-import { UploadCustomRequestOptions, NTreeSelect } from 'naive-ui'
-import { backgroundImageSize } from '@/settings/designSetting'
-import { fetchRouteParamsLocation } from '@/utils'
+import { NTreeSelect } from 'naive-ui'
 import { getOrganizationList, getVideoList, getVideoUrl } from '@/api/external/common/index'
+import { TKUpload } from '@/components/external/Common/TKUpload'
+
+interface videoListIF {
+  name: string
+  accessMode: number
+  id: string
+  videoUrl: string
+  label: string
+  value: string
+}
 
 const props = defineProps({
   optionData: {
@@ -84,8 +78,6 @@ const props = defineProps({
   }
 })
 
-const uploadFileListRef = ref()
-
 const sourceTypes = [
   {
     value: 'custom',
@@ -99,7 +91,7 @@ const sourceTypes = [
 
 const originationOption = ref([])
 
-const videoOptions = ref([])
+const videoOptions = ref<videoListIF[]>([])
 
 const getOriginationList = async () => {
   const res = await getOrganizationList()
@@ -113,7 +105,8 @@ const handleUpdateTreeValue = (value: string) => {
 
 const getVideoLists = async (organizationId: string) => {
   const res = await getVideoList({ organizationId })
-  videoOptions.value = res?.data?.map((item: any) => ({
+  if (!res) return
+  videoOptions.value = res?.data?.map((item: videoListIF) => ({
     label: item.name,
     value: item.accessMode === 1 ? item.id : item.videoUrl,
     id: item.id,
@@ -128,16 +121,16 @@ const getVideoUrlById = async (id: string) => {
   props.optionData.url = url
 }
 
-const handleChecked = ({ target }: any) => {
+const handleChecked = (value: string) => {
   props.optionData.dataset = ''
-  const { value } = target
   if (value === sourceTypeEnum.PLATFORM) {
     getOriginationList()
   }
 }
 
-const handleSelect = (value: string, e: any) => {
+const handleSelect = (_: string, e: videoListIF) => {
   const { accessMode, id } = e
+  //1表示，需要从服务端调取接口换取播放的地址，0则不需要
   if (accessMode === 1) {
     getVideoUrlById(id)
   } else {
@@ -154,76 +147,10 @@ onMounted(() => {
   }
 })
 
-// 上传图片前置处理
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-//@ts-ignore
-const beforeUploadHandle = async ({ file }) => {
-  uploadFileListRef.value = []
-  const type = file.file.type
-  const size = file.file.size
-
-  if (size > 1024 * 1024 * backgroundImageSize) {
-    window['$message'].warning(`图片超出 ${backgroundImageSize}M 限制，请重新上传！`)
-    return false
-  }
-  if (type !== FileTypeEnum.PNG && type !== FileTypeEnum.JPEG && type !== FileTypeEnum.GIF) {
-    window['$message'].warning('文件格式不符合，请重新上传！')
-    return false
-  }
-  return true
+const handleSendFile = (file: string) => {
+  if (!file) return
+  props.optionData.poster = file
 }
 
-// 自定义上传操作
-const customRequest = (options: UploadCustomRequestOptions) => {
-  const { file } = options
-  nextTick(async () => {
-    if (file.file) {
-      // 修改名称
-      const newNameFile = new File([file.file], `${fetchRouteParamsLocation()}_index_background.png`, {
-        type: file.file.type
-      })
-      let uploadParams = new FormData()
-      uploadParams.append('file', newNameFile)
-      const uploadRes = await uploadFile(uploadParams)
-      if (uploadRes) {
-        props.optionData.poster = uploadRes?.fileStaticUri
-        window['$message'].success('添加图片成功！')
-      }
-    } else {
-      window['$message'].error('添加图片失败，请稍后重试！')
-    }
-  })
-}
+const handleRemoveFile = (status: boolean) => (status ? (props.optionData.poster = '') : null)
 </script>
-<style lang="scss" scoped>
-$uploadHeight: 193px;
-.upload-box {
-  cursor: pointer;
-  margin-bottom: 20px;
-  @include deep() {
-    .n-card__content {
-      padding: 0;
-      overflow: hidden;
-    }
-    .n-upload-dragger {
-      padding: 5px;
-    }
-  }
-  .upload-show {
-    width: -webkit-fill-available;
-    height: $uploadHeight;
-    border-radius: 5px;
-  }
-  .upload-img {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    img {
-      height: 150px;
-    }
-    .upload-desc {
-      padding: 10px 0;
-    }
-  }
-}
-</style>

 <template>
   <div>
-    <VideoPlay :h="h" :path="option.dataset" :autoPlay="autoplay" :poster="option.poster" />
+    <VideoPlay :w="w" :h="h" :sourceSrc="option.dataset" :autoPlay="autoplay" :avatar="option.poster" />
   </div>
 </template>
 <script setup lang="ts">
@@ -16,7 +16,7 @@ const props = defineProps({
   }
 })
 
-const { h } = toRefs(props.chartConfig.attr)
+const { w, h } = toRefs(props.chartConfig.attr)
 
 const { autoplay, dataset, poster, url } = toRefs(props.chartConfig.option)
 

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

@@ -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>
     <setting-item-box name="链接" :alone="true">

 <template>
   <div class="go-text-box">
     <div class="content">
-      <span style="cursor: pointer" v-if="link" @click="click">{{ option.dataset }}</span>
-      <span v-else>{{ option.dataset }}</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>
 </template>

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

@@ -353,9 +353,9 @@ useChartDataFetch(props.chartConfig, useChartEditStore, async (resData: any[], r
     attribute.forEach((item: any) => {
       if (item.identifier === curr[0]) {
         curr[0] = item.name
+        acc.push(curr)
       }
     })
-    acc.push(curr)
     return [...acc]
   }, [])
   props.chartConfig.option.dataset = resDataFormat

@@ -27,6 +27,16 @@ export let packagesList: PackagesType = {
   [PackagesCategoryEnum.ICONS]: IconList
 }
 
+// 组件缓存, 可以大幅度提升组件加载速度
+const componentCacheMap = new Map<string, any>()
+const loadConfig = (packageName: string, categoryName: string, keyName: string) => {
+  const key = packageName + categoryName + keyName
+  if (!componentCacheMap.has(key)) {
+    componentCacheMap.set(key, import(`./components/${packageName}/${categoryName}/${keyName}/config.ts`))
+  }
+  return componentCacheMap.get(key)
+}
+
 /**
  * * 获取目标组件配置信息
  * @param targetData
@@ -36,10 +46,10 @@ export const createComponent = async (targetData: ConfigType) => {
   // redirectComponent 是给图片组件库和图标组件库使用的
   if (redirectComponent) {
     const [packageName, categoryName, keyName] = redirectComponent.split('/')
-    const redirectChart = await import(`./components/${packageName}/${categoryName}/${keyName}/config.ts`)
+    const redirectChart = await loadConfig(packageName, categoryName, keyName)
     return new redirectChart.default()
   }
-  const chart = await import(`./components/${targetData.package}/${category}/${key}/config.ts`)
+  const chart = await loadConfig(targetData.package, category, key)
   return new chart.default()
 }
 
@@ -98,5 +108,4 @@ export const fetchImages = async (targetData?: ConfigType) => {
   }
   return ''
 }
-
 useInjectLib(packagesList as any) // THINGS_KIT 修改注册组件

@@ -24,7 +24,6 @@ import cloneDeep from 'lodash/cloneDeep'
    * 修改后的代码在注释之间，并标注好源代码和修改后代码，方便回溯
    * 源代码 requestDataType: RequestDataTypeEnum.STATIC,
    * 修改后的代码 requestDataType: RequestDataTypeEnum.Pond,
-   * 修改后代码在//ft之间
    */
 // 请求基础属性
 export const requestConfig: RequestConfigType = {
@@ -49,7 +48,6 @@ export const requestConfig: RequestConfigType = {
     Params: {}
   }
 }
-//ft之间
 
 // 单实例类
 export class PublicConfigClass implements PublicConfigType {

@@ -162,17 +162,17 @@ export const useChartEditStore = defineStore({
     },
     getComponentList(): Array<CreateComponentType | CreateComponentGroupType> {
       return this.componentList
-    },
-    // 获取需要存储的数据项
+    }
+  },
+  actions: {
+    // * 获取需要存储的数据项
     getStorageInfo(): ChartEditStorage {
       return {
         [ChartEditStoreEnum.EDIT_CANVAS_CONFIG]: this.getEditCanvasConfig,
         [ChartEditStoreEnum.COMPONENT_LIST]: this.getComponentList,
         [ChartEditStoreEnum.REQUEST_GLOBAL_CONFIG]: this.getRequestGlobalConfig
       }
-    }
-  },
-  actions: {
+    },
     // * 设置 editCanvas 数据项
     setEditCanvas<T extends keyof EditCanvasType, K extends EditCanvasType[T]>(key: T, value: K) {
       this.editCanvas[key] = value

+/**
+ *
+ * @param url 图片路径
+ * @param ext 图片格式
+ * @param callback 结果回调
+ * 类型暂定any
+ */
+export  function getUrlBase64(url: any, ext: any, callback: any) {
+    let canvas = document.createElement("canvas") as any;   //创建canvas DOM元素
+    const ctx = canvas.getContext("2d") as any;
+    const img = new Image;
+    img.crossOrigin = 'Anonymous';
+    img.src = url;
+    img.onload = function () {
+        canvas.height = 35; //指定画板的高度,自定义
+        canvas.width = 35; //指定画板的宽度，自定义
+        ctx.drawImage(img, 0, 0, 35, 35); //参数可自定义
+        const dataURL = canvas.toDataURL("image/" + ext);
+        callback.call(this, dataURL); //回掉函数获取Base64编码
+        canvas = null;
+    };
+}
\ No newline at end of file

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

@@ -10,13 +10,7 @@ import { useInjectAside } from './external/useInjectAside'
 
 // 图标
 const { AirPlaneOutlineIcon, ImageIcon, BarChartIcon } = icon.ionicons5
-const {
-  TableSplitIcon,
-  RoadmapIcon,
-  SpellCheckIcon,
-  GraphicalDataFlowIcon,
-} = icon.carbon
-
+const { TableSplitIcon, RoadmapIcon, SpellCheckIcon, GraphicalDataFlowIcon } = icon.carbon
 
 // 图表
 export type MenuOptionsType = {

@@ -9,7 +9,7 @@ export const exportHandle = () => {
 
   // 导出数据
   downloadTextFile(
-    JSONStringify(chartEditStore.getStorageInfo || []),
+    JSONStringify(chartEditStore.getStorageInfo() || []),
     undefined,
     'json'
   )

@@ -19,14 +19,14 @@ export const syncData = () => {
     transformOrigin: 'center',
     onPositiveCallback: () => {
       window['$message'].success('正在同步编辑器...')
-      dispatchEvent(new CustomEvent(SavePageEnum.CHART, { detail: chartEditStore.getStorageInfo }))
+      dispatchEvent(new CustomEvent(SavePageEnum.CHART, { detail: chartEditStore.getStorageInfo() }))
     }
   })
 }
 
 // 同步数据到预览页
 export const syncDataToPreview = () => {
-  dispatchEvent(new CustomEvent(SavePageEnum.CHART_TO_PREVIEW, { detail: chartEditStore.getStorageInfo }))
+  dispatchEvent(new CustomEvent(SavePageEnum.CHART_TO_PREVIEW, { detail: chartEditStore.getStorageInfo() }))
 }
 
 // 侦听器更新

@@ -160,7 +160,7 @@ const editHandle = () => {
 
 // 把内存中的数据同步到SessionStorage 便于传递给新窗口初始化数据
 const updateToSession = (id: string) => {
-  const storageInfo = chartEditStore.getStorageInfo
+  const storageInfo = chartEditStore.getStorageInfo()
   const sessionStorageInfo = getLocalStorage(StorageEnum.GO_CHART_STORAGE_LIST) || []
 
   if (sessionStorageInfo?.length) {

@@ -9,7 +9,7 @@ export const exportHandle = () => {
 
   // 导出数据
   downloadTextFile(
-    JSONStringify(chartEditStore.getStorageInfo || []),
+    JSONStringify(chartEditStore.getStorageInfo() || []),
     undefined,
     'json'
   )

@@ -32,7 +32,7 @@ const previewHandle = () => {
   const { id } = routerParamsInfo.params
   // id 标识
   const previewId = typeof id === 'string' ? id : id[0]
-  const storageInfo = chartEditStore.getStorageInfo
+  const storageInfo = chartEditStore.getStorageInfo()
   const sessionStorageInfo = getLocalStorage(StorageEnum.GO_CHART_STORAGE_LIST) || []
 
   if (sessionStorageInfo?.length) {

@@ -32,7 +32,7 @@ const previewHandle = () => {
   const { id } = routerParamsInfo.params
   // id 标识
   const previewId = typeof id === 'string' ? id : id[0]
-  const storageInfo = chartEditStore.getStorageInfo
+  const storageInfo = chartEditStore.getStorageInfo()
   const sessionStorageInfo = getLocalStorage(StorageEnum.GO_CHART_STORAGE_LIST) || []
 
   if (sessionStorageInfo?.length) {

@@ -76,7 +76,7 @@ const handleBlur = async () => {
     dataViewId,
     dataViewContent: {
       id: dataViewContent.id,
-      content: JSON.stringify(chartEditStore.getStorageInfo)
+      content: JSON.stringify(chartEditStore.getStorageInfo())
     }
   } as unknown as BaseUpdateContentParams
   await contentUpdateApi(saveContent)

@@ -92,7 +92,7 @@ export const useSyncRemote = () => {
     const saveContent = {
       dataViewContent: {
         id: dataViewContent.id,
-        content: JSONStringify(chartEditStore.getStorageInfo || {})
+        content: JSONStringify(chartEditStore.getStorageInfo() || {})
       },
       dataViewName,
       dataViewId

 <template>
   <div
-    class="chart-item"
-    v-for="item in groupData.groupList"
-    :class="animationsClass(item.styles.animations)"
-    :key="item.id"
+    :class="animationsClass(groupData.styles.animations)"
     :style="{
-      ...getComponentAttrStyle(item.attr, groupIndex),
-      ...getFilterStyle(item.styles),
-      ...getTransformStyle(item.styles),
-      ...getStatusStyle(item.status),
-      ...getPreviewConfigStyle(item.preview),
-      ...getBlendModeStyle(item.styles) as any
+      ...getSizeStyle(groupData.attr),
+      ...getFilterStyle(groupData.styles),
     }"
   >
+    <div
+	class="chart-item"
+	v-for="item in groupData.groupList"
+		:class="animationsClass(item.styles.animations)"
+		:key="item.id"
+		:style="{
+		...getComponentAttrStyle(item.attr, groupIndex),
+		...getStatusStyle(item.status),
+		...getPreviewConfigStyle(item.preview),
+		...getBlendModeStyle(item.styles) as any
+	}"
+    >
     <component
       :is="item.chartConfig.chartKey"
       :id="item.id"
       :chartConfig="item"
       :themeSetting="themeSetting"
       :themeColor="themeColor"
-      :style="{ ...getSizeStyle(item.attr) }"
-      v-on="useLifeHandler(item)"
-    ></component>
+      :style="{
+          ...getSizeStyle(item.attr),
+          ...getFilterStyle(item.styles),
+          ...getTransformStyle(item.styles)
+        }"
+       v-on="useLifeHandler(item)"
+     ></component>
+  </div>
   </div>
 </template>
 

@@ -6,7 +6,6 @@
     :key="item.id"
     :style="{
       ...getComponentAttrStyle(item.attr, index),
-      ...getFilterStyle(item.styles),
       ...getTransformStyle(item.styles),
       ...getStatusStyle(item.status),
       ...getPreviewConfigStyle(item.preview),
@@ -31,7 +30,10 @@
       :chartConfig="item"
       :themeSetting="themeSetting"
       :themeColor="themeColor"
-      :style="{ ...getSizeStyle(item.attr) }"
+      :style="{
+	    ...getSizeStyle(item.attr),
+	    ...getFilterStyle(item.styles)
+      }"
       v-on="useLifeHandler(item)"
     ></component>
   </div>

@@ -33,7 +33,7 @@ import { getFilterStyle, setTitle } from '@/utils'
 
 // THINGS_KIT 重写预览逻辑,调用接口
 import {  dragCanvas } from './utils'
-import { getEditCanvasConfigStyle,keyRecordHandle } from './utils'
+import { getEditCanvasConfigStyle, keyRecordHandle } from './utils'
 import { getSessionStorageInfo } from './external/usePreview'
 
 import { useComInstall } from './hooks/useComInstall.hook'
@@ -52,6 +52,7 @@ setTitle(`预览-${chartEditStore.editCanvasConfig.projectName}`)
 
 const previewRefStyle = computed(() => {
   return {
+    overflow: 'hidden',
     ...getEditCanvasConfigStyle(chartEditStore.editCanvasConfig),
     ...getFilterStyle(chartEditStore.editCanvasConfig)
   }

@@ -15,7 +15,7 @@ let key = ref(Date.now())
 
 // 数据变更 -> 组件销毁重建
 ;[SavePageEnum.JSON, SavePageEnum.CHART_TO_PREVIEW].forEach((saveEvent: string) => {
-  if (!window.opener) return
+  if (!window.opener && !window.opener.addEventListener) return
   window.opener.addEventListener(saveEvent, async (e: any) => {
     const localStorageInfo: ChartEditStorageType = await getSessionStorageInfo() as unknown as ChartEditStorageType
     setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, [{ ...e.detail, id: localStorageInfo.id }])