Merge branch 'main_dev' into 'main'

Main dev

See merge request yunteng/thingskit-view!218

 import { defHttp } from '@/utils/external/http/axios'
 import { defHttp } from '@/utils/external/http/axios'
 import { ConfigurationItemType, DictItem, OrganizationListItem, UploadResponse } from './model'
 import { ConfigurationItemType, DictItem, OrganizationListItem, UploadResponse } from './model'
 import { PaginationResult } from '/#/external/axios'
 import { PaginationResult } from '/#/external/axios'
+import { isShareMode } from '@/views/share/hook'
 
 
 enum Api {
 enum Api {
   GET_DICT = '/dict_item',
   GET_DICT = '/dict_item',
@@ -114,10 +115,12 @@ export const getVideoUrl = (id: string) =>
   })
   })
 
 
 //获取行政区域
 //获取行政区域
-export const getGeoJsonMap = (code: number | string, level: string) =>
-  defHttp.get({
+export const getGeoJsonMap = (code: number | string, level: string) => {
+  return defHttp.get({
     url: `${Api.GEOJSONURL}${code}/${level}`
     url: `${Api.GEOJSONURL}${code}/${level}`
-  })
+  }, { withShareToken: isShareMode() })
+}
+
 
 
 // 获取设备详情
 // 获取设备详情
 export const getDeviceDetail = (id: string) =>
 export const getDeviceDetail = (id: string) =>
@@ -133,11 +136,11 @@ export const getAttribute = (deviceProfileId: string) =>
 
 
 // 获取设备最新数据
 // 获取设备最新数据
 export const getDeviceLatest = (tbDeviceId: string) =>
 export const getDeviceLatest = (tbDeviceId: string) =>
-defHttp.get({
-  url: `${Api.GET_DEVICE_LATEST}${tbDeviceId}/values/timeseries`
-}, {
-  joinPrefix: false
-})
+  defHttp.get({
+    url: `${Api.GET_DEVICE_LATEST}${tbDeviceId}/values/timeseries`
+  }, {
+    joinPrefix: false
+  })
 
 
 //获取产品属性
 //获取产品属性
 export const getProfileAttrs = (params: { deviceProfileId: string; dataType?: string }) => {
 export const getProfileAttrs = (params: { deviceProfileId: string; dataType?: string }) => {

@@ -94,13 +94,15 @@ const extraValue = (object: Recordable) => {
 
 
 const handleParams = (Params: Recordable) => {
 const handleParams = (Params: Recordable) => {
   if (Params.keys && Params?.keys?.length) {
   if (Params.keys && Params?.keys?.length) {
+    // 过滤无效参数
+    Reflect.deleteProperty(Params, 'attrName')
     /** ft 修改select联动下拉框选择了属性（单个）报错问题
     /** ft 修改select联动下拉框选择了属性（单个）报错问题
      * 源代码 Params.keys = (Params.keys || [] as any).join(',')
      * 源代码 Params.keys = (Params.keys || [] as any).join(',')
      */
      */
-    if(!Array.isArray(Params.keys)){
-        Params.keys = ([Params.keys] || [] as any).join(',')
-      }else{
-        Params.keys = (Params.keys || [] as any).join(',')
+    if (!Array.isArray(Params.keys)) {
+      Params.keys = ([Params.keys] || [] as any).join(',')
+    } else {
+      Params.keys = (Params.keys || [] as any).join(',')
     }
     }
     //ft
     //ft
   }
   }
@@ -116,12 +118,12 @@ const handleParams = (Params: Recordable) => {
 }
 }
 
 
 //post请求动态追加query参数
 //post请求动态追加query参数
-const objConvertQuery= (data:Recordable)=> {
+const objConvertQuery = (data: Recordable) => {
   const _result = [];
   const _result = [];
   for (const key in data) {
   for (const key in data) {
     const value = data[key];
     const value = data[key];
     if (value.constructor == Array) {
     if (value.constructor == Array) {
-      value.forEach(function(_value) {
+      value.forEach(function (_value) {
         _result.push(key + "=" + _value);
         _result.push(key + "=" + _value);
       });
       });
     } else {
     } else {
@@ -152,11 +154,12 @@ export const customRequest = async (request: RequestConfigType) => {
    * 修改后代码 requestHttpType === RequestHttpEnum.GET.toUpperCase() ? requestUrl: `${requestUrl}?${objConvertQuery(Params)}
    * 修改后代码 requestHttpType === RequestHttpEnum.GET.toUpperCase() ? requestUrl: `${requestUrl}?${objConvertQuery(Params)}
    */
    */
   Params = handleParams(Params)
   Params = handleParams(Params)
+  
   return customHttp.request<any>({
   return customHttp.request<any>({
-    url: requestHttpType === RequestHttpEnum.GET.toUpperCase() ? requestUrl: `${requestUrl}?${objConvertQuery(Params)}`,
+    url: requestHttpType === RequestHttpEnum.GET.toUpperCase() ? requestUrl : `${requestUrl}?${objConvertQuery(Params)}`,
     baseURL: getOriginUrl(requestOriginUrl!),
     baseURL: getOriginUrl(requestOriginUrl!),
     method: requestHttpType,
     method: requestHttpType,
-    params: requestHttpType === RequestHttpEnum.GET.toUpperCase() ? Params: null,
+    params: requestHttpType === RequestHttpEnum.GET.toUpperCase() ? Params : null,
     data: body,
     data: body,
     headers: extraValue(Header)
     headers: extraValue(Header)
   }, {
   }, {

@@ -2,7 +2,8 @@ import { defHttp } from "@/utils/external/http/axios";
 import { useGlobSetting } from '@/hooks/external/setting';
 import { useGlobSetting } from '@/hooks/external/setting';
 enum Api {
 enum Api {
   OPEN_FLV = '/rtsp/openFlv',
   OPEN_FLV = '/rtsp/openFlv',
-  CLOSE_FLV = '/rtsp/closeFlv'
+  CLOSE_FLV = '/rtsp/closeFlv',
+  GET_VIDEO_CONTROL_START = '/video/control/start',
 }
 }
 
 
 export const getOpenFlvPlayUrl = (url: string, browserId: string) => {
 export const getOpenFlvPlayUrl = (url: string, browserId: string) => {
@@ -19,3 +20,17 @@ export const closeFlvPlay = (url: string, browserId: string) => {
     }
     }
   });
   });
 };
 };
+
+//gbt28181,获取flv地址
+export const getVideoControlStart = ({
+  deviceId,
+  channelId,
+}: Record<'deviceId' | 'channelId', string>) => {
+  return defHttp.get<Recordable>(
+    {
+      url: `${Api.GET_VIDEO_CONTROL_START}/${deviceId}/${channelId}`,
+      timeout: 30 * 1000,
+    },
+    {}
+  );
+};

+<template>
+  <div class="smallcircle2"></div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="scss" scoped>
+.smallcircle2 {
+  display: block;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  opacity: 0.4;
+  background: radial-gradient(circle at center, red 0, blue, #2277b2 100%);
+}
+</style>

+export interface PopupConfigInterface {
+  borderWidth: number
+  borderHeight: number
+  borderColor: string
+  boxShadowColor: string
+  linearLeftColor: string
+  linearRightColor: string
+  arrowColor: string
+  lineColor: string
+  fontColor: string
+  fontSize: number
+  fontWeight: number
+  fontContent: string
+  labelColor: string
+  valueColor: string
+  placement: string
+}
+export interface PopupConfigData {
+  label: string
+  value: string
+}

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

+<template>
+  <n-popover
+    :disabled="disabled"
+    :placement="popupConfig.placement"
+    trigger="click"
+    raw
+    @update:show="handleUpdateShow"
+  >
+    <template #trigger>
+      <slot />
+    </template>
+    <div
+      style="transform-origin: inherit"
+      :style="`width:${popupConfig.borderWidth}px;
+         height: ${popupConfig.borderHeight}px; 
+         box-shadow: 0 0 10px 10px ${popupConfig.boxShadowColor};
+         background:linear-gradient(to right, ${popupConfig.linearLeftColor} , ${popupConfig.linearRightColor});
+         `"
+    >
+      <div class="popup-body">
+        <div class="popup-arrow-right" :style="`border-color:${popupConfig.arrowColor}`"></div>
+        <div class="popup-header-content">
+          <p
+            class="header-title"
+            :style="`color:${popupConfig.fontColor};font-size:${popupConfig.fontSize}px;font-weight:${popupConfig.fontWeight}`"
+          >
+            {{ popupConfig.fontContent }}
+          </p>
+          <div class="header-content-graphical">
+            <div class="graphical-circle-left"><Circle /></div>
+            <div class="graphical-line">
+              <div class="line-left" :style="`background-color:${popupConfig.lineColor}`"></div>
+              <div class="line-center" :style="`background-color:${popupConfig.lineColor}`"></div>
+              <div class="line-right" :style="`background-color:${popupConfig.lineColor}`"></div>
+            </div>
+            <div class="graphical-circle-right"><Circle /></div>
+          </div>
+        </div>
+      </div>
+      <div class="content-body">
+        <div class="body" v-for="(item, index) in popupConfigData" :key="index">
+          <span :style="`color:${popupConfig.labelColor};`">{{ item.label }}</span>
+          <span :style="`color:${popupConfig.valueColor};`">{{ item.value }}</span>
+        </div>
+      </div>
+    </div>
+  </n-popover>
+</template>
+
+<script lang="ts" setup name="TKDialog">
+import { PropType } from 'vue'
+import { PopupConfigInterface, PopupConfigData } from './index.d'
+import Circle from './components/Circle.vue'
+
+defineProps({
+  popupConfig: {
+    type: Object as PropType<PopupConfigInterface>,
+    required: true
+  },
+  popupConfigData: {
+    type: Array as PropType<PopupConfigData[]>
+  },
+  w: Number,
+  h: Number,
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emits = defineEmits(['updateShow'])
+
+const handleUpdateShow = (show: boolean) => {
+  console.log(show)
+  emits('updateShow', show)
+}
+</script>
+
+<style lang="scss" scoped>
+@mixin base-text-ellipsis() {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  -o-text-overflow: ellipsis;
+}
+.popup-body {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  .popup-arrow-right {
+    position: absolute;
+    top: 15px;
+    left: 10px;
+    border-right: 1px solid;
+    border-bottom: 1px solid;
+    width: 7px;
+    height: 7px;
+    transform: rotate(-45deg);
+    -o-transform: rotate(-45deg);
+    -webkit-transform: rotate(-45deg);
+    -moz-transform: rotate(-45deg);
+    -ms-transform: rotate(-45deg);
+  }
+  .popup-header-content {
+    margin: 23px;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    .header-title {
+      @include base-text-ellipsis;
+    }
+    .header-content-graphical {
+      display: flex;
+      align-items: center;
+      .graphical-circle-left {
+        position: relative;
+        left: -2px;
+      }
+      .graphical-line {
+        display: flex;
+        position: relative;
+        .line-left {
+          width: 115px;
+          height: 2px;
+          position: relative;
+        }
+        .line-center {
+          width: 35px;
+          height: 2px;
+          transform: rotateZ(145deg);
+          position: absolute;
+          top: -10px;
+          left: 112px;
+        }
+        .line-right {
+          width: 50px;
+          height: 2px;
+          position: absolute;
+          top: -20px;
+          left: 143px;
+        }
+      }
+      .graphical-circle-right {
+        position: absolute;
+        top: 29px;
+        left: 231px;
+      }
+    }
+  }
+}
+.content-body {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: v-bind('w+"px"');
+  margin: 0 15px;
+  height: v-bind('h+"px"');
+}
+</style>

+
+
+// 动画时间函数枚举
+export enum AnimationTimingFunctionNameEnum {
+  // 动画从头到尾的速度是相同的
+  LINEAR = '匀速',
+  // 默认值：动画以低速开始，然后加快，在结束前变慢。
+  EASE = '缓速',
+  // 动画以低速开始。
+  EASEIN = '低速开始',
+  // 动画以低速结束。
+  EASEOUT = '低速结束',
+  // 动画以低速开始和结束。
+  EASEINOUT = '低速开始和结束'
+}
+
+export enum AnimationTimingFunctionEnum {
+  // 动画从头到尾的速度是相同的
+  LINEAR = 'linear',
+  // 默认值：动画以低速开始，然后加快，在结束前变慢。
+  EASE = 'ease',
+  // 动画以低速开始。
+  EASEIN = 'ease-in',
+  // 动画以低速结束。
+  EASEOUT = 'ease-out',
+  // 动画以低速开始和结束。
+  EASEINOUT = 'ease-in-out'
+}
+
+// 动画执行状态枚举
+export enum AnimationPlayStateNameEnum {
+  // 暂停
+  PAUSED = '暂停',
+  // 运行
+  RUNNING = '运行'
+}
+
+export enum AnimationPlayStateEnum {
+  // 暂停
+  PAUSED = 'paused',
+  // 运行
+  RUNNING = 'running'
+}
+
+// 动画执行次数枚举
+export enum AnimationIterationCountNameEnum {
+  // 暂停
+  ITERATIONCOUNT = '无限次',
+}
+
+export enum AnimationIterationCountEnum {
+  // 暂停
+  ITERATIONCOUNT = 'infinite',
+}

+// 三维地图类型枚举
+export enum ThreeMapEnum {
+  MAP3D = 'map3D',
+  SCATTER3D = 'scatter3D',
+  BAR3D = 'bar3D'
+}

-import { toRefs } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { PageChartEditStoreType } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { PageChartEditStoreType } from '@/store/modules/chartEditStore/chartEditStore.d'

@@ -41,6 +41,10 @@ const getSocketInstance = (request: ExtraRequestConfigType) => {
   const socketUrl = `${getOriginUrl(requestOriginUrl || '')}${requestUrl}?token=${token}`
   const socketUrl = `${getOriginUrl(requestOriginUrl || '')}${requestUrl}?token=${token}`
 
 
   const instance = useWebSocket(socketUrl, {
   const instance = useWebSocket(socketUrl, {
+    autoReconnect: {
+      retries: 20,
+      delay: 1000 * 30
+    },
     onMessage() {
     onMessage() {
       const { data: originData } = instance
       const { data: originData } = instance
       const value = parse(unref(originData)) as SocketReceiveMessageType
       const value = parse(unref(originData)) as SocketReceiveMessageType
@@ -121,7 +125,7 @@ export const useChartDataSocket = () => {
   return {
   return {
     initial,
     initial,
     sendMessage,
     sendMessage,
-    disconnectWs
+    disconnectWs,
   }
   }
 }
 }
 
 

+/**
+ * 此hook的作用是针对echarts图表类型，legend图例，映射成物模型中文
+ */
+
+export const useEchartsMapLegend = (chartConfig: Recordable, seriesArr: Recordable[]) => {
+  const { request } = chartConfig
+  const {
+    requestParams: {
+      Params: { attrName }
+    }
+  } = request || {}
+  seriesArr?.forEach((item: Recordable, index: number) => {
+    item.name = attrName?.[index]
+  })
+}

@@ -27,6 +27,7 @@ import { isPreview } from '@/utils'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 import isObject from 'lodash/isObject'
 import isObject from 'lodash/isObject'
 import cloneDeep from 'lodash/cloneDeep'
 import cloneDeep from 'lodash/cloneDeep'
+import { useEchartsMapLegend } from '@/hooks/external/useEchartLegendMapChinese.hook'
 
 
 const props = defineProps({
 const props = defineProps({
   themeSetting: {
   themeSetting: {
@@ -64,6 +65,7 @@ watch(
         for (let i = 0; i < newData.dimensions.length - 1; i++) {
         for (let i = 0; i < newData.dimensions.length - 1; i++) {
           seriesArr.push(cloneDeep(seriesItem))
           seriesArr.push(cloneDeep(seriesItem))
         }
         }
+        useEchartsMapLegend(props.chartConfig, seriesArr)
         replaceMergeArr.value = ['series']
         replaceMergeArr.value = ['series']
         props.chartConfig.option.series = seriesArr
         props.chartConfig.option.series = seriesArr
         nextTick(() => {
         nextTick(() => {

@@ -5,6 +5,9 @@
     :theme="themeColor"
     :theme="themeColor"
     :option="option"
     :option="option"
     :manual-update="isPreview()"
     :manual-update="isPreview()"
+    :update-options="{
+      replaceMerge: replaceMergeArr
+    }"
     autoresize
     autoresize
   ></v-chart>
   ></v-chart>
 </template>
 </template>
@@ -23,6 +26,11 @@ import { useChartDataFetch } from '@/hooks'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { isPreview } from '@/utils'
 import { isPreview } from '@/utils'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
+import { SocketReceiveMessageType } from '@/store/external/modules/socketStore.d'
+import isObject from 'lodash/isObject'
+import { useAssembleDataHooks } from '@/hooks/external/useAssembleData.hook'
+import { useEchartsMapLegend } from '@/hooks/external/useEchartLegendMapChinese.hook'
+import cloneDeep from 'lodash/cloneDeep'
 
 
 const props = defineProps({
 const props = defineProps({
   themeSetting: {
   themeSetting: {
@@ -43,25 +51,34 @@ const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSe
 
 
 use([DatasetComponent, CanvasRenderer, BarChart, LineChart, GridComponent, TooltipComponent, LegendComponent])
 use([DatasetComponent, CanvasRenderer, BarChart, LineChart, GridComponent, TooltipComponent, LegendComponent])
 
 
+const chartEditStore = useChartEditStore()
+
 const replaceMergeArr = ref<string[]>()
 const replaceMergeArr = ref<string[]>()
 
 
 const option = computed(() => {
 const option = computed(() => {
   return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
   return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
 })
 })
 
 
+// dataset 无法变更条数的补丁
 watch(
 watch(
   () => props.chartConfig.option.dataset,
   () => props.chartConfig.option.dataset,
-  (newData, oldData) => {
-    if (newData.dimensions.length !== oldData.dimensions.length) {
-      const seriesArr = []
-      for (let i = 0; i < newData.dimensions.length - 1; i++) {
-        seriesArr.push(barSeriesItem, lineSeriesItem)
+  (newData: { dimensions: any }, oldData) => {
+    try {
+      if (!isObject(newData) || !('dimensions' in newData)) return
+      if (Array.isArray(newData?.dimensions)) {
+        const seriesArr = []
+        for (let i = 0; i < newData.dimensions.length - 1; i++) {
+          seriesArr.push(cloneDeep(barSeriesItem),cloneDeep(lineSeriesItem))
+        }
+        useEchartsMapLegend(props.chartConfig, seriesArr)
+        replaceMergeArr.value = ['series']
+        props.chartConfig.option.series = seriesArr
+        nextTick(() => {
+          replaceMergeArr.value = []
+        })
       }
       }
-      replaceMergeArr.value = ['series']
-      props.chartConfig.option.series = seriesArr
-      nextTick(() => {
-        replaceMergeArr.value = []
-      })
+    } catch (error) {
+      console.log(error)
     }
     }
   },
   },
   {
   {
@@ -69,5 +86,53 @@ watch(
   }
   }
 )
 )
 
 
-const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
+//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>
 </script>

@@ -17,6 +17,7 @@ import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 import { useChartDataFetch } from '@/hooks'
 import { useChartDataFetch } from '@/hooks'
 import { isPreview, colorGradientCustomMerge} from '@/utils'
 import { isPreview, colorGradientCustomMerge} from '@/utils'
+import { useEchartsMapLegend } from '@/hooks/external/useEchartLegendMapChinese.hook'
 
 
 const props = defineProps({
 const props = defineProps({
   themeSetting: {
   themeSetting: {
@@ -79,6 +80,9 @@ watch(
   () => props.chartConfig.option.dataset,
   () => props.chartConfig.option.dataset,
   () => {
   () => {
     option.value = props.chartConfig.option
     option.value = props.chartConfig.option
+    useEchartsMapLegend(props.chartConfig, props.chartConfig.option.series)
+  },{
+    deep: false
   }
   }
 )
 )
 
 

@@ -17,6 +17,7 @@ import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 import { useChartDataFetch } from '@/hooks'
 import { useChartDataFetch } from '@/hooks'
 import { isPreview, colorGradientCustomMerge } from '@/utils'
 import { isPreview, colorGradientCustomMerge } from '@/utils'
+import { useEchartsMapLegend } from '@/hooks/external/useEchartLegendMapChinese.hook'
 
 
 const props = defineProps({
 const props = defineProps({
   themeSetting: {
   themeSetting: {
@@ -73,6 +74,7 @@ watch(
   () => props.chartConfig.option.dataset,
   () => props.chartConfig.option.dataset,
   () => {
   () => {
     option.value = props.chartConfig.option
     option.value = props.chartConfig.option
+    useEchartsMapLegend(props.chartConfig, props.chartConfig.option.series)
   },
   },
   {
   {
     deep: false
     deep: false

 <template>
 <template>
   <n-space class="go-decorates-flipper-number" :size="flipperGap" align="center" justify="center">
   <n-space class="go-decorates-flipper-number" :size="flipperGap" align="center" justify="center">
-    <flipper
-      :count="item"
-      :width="flipperWidth"
-      :height="flipperHeight"
-      :front-color="flipperTextColor"
-      :back-color="flipperBgColor"
-      :radius="flipperRadius"
-      :flip-type="flipperType"
-      :duration="flipperSpeed"
-      :border-width="flipperBorderWidth"
-      v-for="(item, index) in flipperData"
-      :key="index"
-      class="go-d-block"
-    />
+    <flipper :count="item" :width="flipperWidth" :height="flipperHeight" :front-color="flipperTextColor"
+      :back-color="flipperBgColor" :radius="flipperRadius" :flip-type="flipperType" :duration="flipperSpeed"
+      :border-width="flipperBorderWidth" v-for="(item, index) in flipperData" :key="index" class="go-d-block" />
   </n-space>
   </n-space>
 </template>
 </template>
 
 
 <script setup lang="ts">
 <script setup lang="ts">
-import { PropType, toRefs, watch, ref } from 'vue'
+import { PropType, toRefs, watch, ref, computed, unref } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useChartDataFetch } from '@/hooks'
 import { useChartDataFetch } from '@/hooks'
 import { Flipper } from '@/components/Pages/Flipper'
 import { Flipper } from '@/components/Pages/Flipper'
 import { OptionType } from './config'
 import { OptionType } from './config'
+import { RequestContentTypeEnum } from '@/enums/external/httpEnum'
+import { useTargetData } from '@/views/chart/ContentConfigurations/components/hooks/useTargetData.hook'
 
 
 const props = defineProps({
 const props = defineProps({
   chartConfig: {
   chartConfig: {
@@ -34,6 +25,37 @@ const props = defineProps({
 
 
 const { w, h } = toRefs(props.chartConfig.attr)
 const { w, h } = toRefs(props.chartConfig.attr)
 
 
+const { targetData, chartEditStore } = useTargetData()
+
+const isWebsocket = computed(() => {
+  const result = query(chartEditStore.getComponentList)
+  if (result === false) return false
+
+  if (result.id === targetData.value.id)
+    return targetData.value.request.requestContentType as RequestContentTypeEnum === RequestContentTypeEnum.WEB_SOCKET
+  else {
+    return result.request.requestContentType as RequestContentTypeEnum === RequestContentTypeEnum.WEB_SOCKET
+  }
+})
+
+function query(list: CreateComponentType[]) {
+  if (!list || !list?.length) return false
+
+  for (const item of list) {
+    if (item.id === targetData.value.id) {
+      return item
+    }
+    if (item.groupList && item.groupList?.length) {
+      const flag = query(list)
+      if (flag) {
+        return item
+      }
+    }
+  }
+
+  return false
+}
+
 const {
 const {
   flipperLength,
   flipperLength,
   flipperBgColor,
   flipperBgColor,
@@ -75,6 +97,7 @@ watch(
 )
 )
 
 
 useChartDataFetch(props.chartConfig, useChartEditStore, (newVal: string | number) => {
 useChartDataFetch(props.chartConfig, useChartEditStore, (newVal: string | number) => {
+  if (unref(isWebsocket)) return
   updateDatasetHandler(newVal)
   updateDatasetHandler(newVal)
 })
 })
 </script>
 </script>

@@ -10,5 +10,5 @@ export const InputsInputConfig: ConfigType = {
     categoryName: ChatCategoryEnumName.INPUTS,
     categoryName: ChatCategoryEnumName.INPUTS,
     package: PackagesCategoryEnum.INFORMATIONS,
     package: PackagesCategoryEnum.INFORMATIONS,
     chartFrame: ChartFrameEnum.STATIC,
     chartFrame: ChartFrameEnum.STATIC,
-    image: 'inputs_select.png'
+    image: 'inputs_input.png'
 }
 }

@@ -8,15 +8,19 @@ export const option = {
   header: ['列1', '列2', '列3'],
   header: ['列1', '列2', '列3'],
   dataset: dataJson,
   dataset: dataJson,
   index: true,
   index: true,
-  columnWidth: [30, 100, 100],
-  align: ['center', 'right', 'right', 'right'],
+  columnWidth: [100, 300, 300, 300],
+  align: ['center', 'center', 'center', 'center'],
   rowNum: 5,
   rowNum: 5,
   waitTime: 2,
   waitTime: 2,
   headerHeight: 35,
   headerHeight: 35,
   carousel: 'single',
   carousel: 'single',
   headerBGC: '#00BAFF',
   headerBGC: '#00BAFF',
   oddRowBGC: '#003B51',
   oddRowBGC: '#003B51',
-  evenRowBGC: '#0A2732'
+  evenRowBGC: '#0A2732',
+  ceilSpanColor: '#FFFFFF',
+  ceilSpanFontSize: 16,
+  headerSpanColor: '#FFFFFF',
+  headerSpanFontSize: 16
 }
 }
 
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
 export default class Config extends PublicConfigClass implements CreateComponentType {

@@ -45,12 +45,37 @@
           v-model:value="optionData.carousel"
           v-model:value="optionData.carousel"
           :options="[
           :options="[
             { label: '单条轮播', value: 'single' },
             { label: '单条轮播', value: 'single' },
-            { label: '整页轮播', value: 'page' },
+            { label: '整页轮播', value: 'page' }
           ]"
           ]"
         />
         />
       </SettingItem>
       </SettingItem>
     </SettingItemBox>
     </SettingItemBox>
-
+    <SettingItemBox name="表头字体">
+      <SettingItem name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.headerSpanColor"></n-color-picker>
+      </SettingItem>
+      <SettingItem name="大小">
+        <n-input-number
+          v-model:value="optionData.headerSpanFontSize"
+          :min="1"
+          size="small"
+          placeholder="请输入"
+        ></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="内容字体">
+      <SettingItem name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.ceilSpanColor"></n-color-picker>
+      </SettingItem>
+      <SettingItem name="大小">
+        <n-input-number
+          v-model:value="optionData.ceilSpanFontSize"
+          :min="1"
+          size="small"
+          placeholder="请输入"
+        ></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
     <SettingItemBox name="样式">
     <SettingItemBox name="样式">
       <SettingItem name="表头背景色">
       <SettingItem name="表头背景色">
         <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.headerBGC"></n-color-picker>
         <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.headerBGC"></n-color-picker>

@@ -6,13 +6,15 @@
       :style="`background-color: ${status.mergedConfig.headerBGC};`"
       :style="`background-color: ${status.mergedConfig.headerBGC};`"
     >
     >
       <div
       <div
-        class="header-item"
+        class="header-item singe-line"
         v-for="(headerItem, i) in status.header"
         v-for="(headerItem, i) in status.header"
         :key="`${headerItem}${i}`"
         :key="`${headerItem}${i}`"
         :style="`
         :style="`
         height: ${status.mergedConfig.headerHeight}px;
         height: ${status.mergedConfig.headerHeight}px;
         line-height: ${status.mergedConfig.headerHeight}px;
         line-height: ${status.mergedConfig.headerHeight}px;
         width: ${status.widths[i]}px;
         width: ${status.widths[i]}px;
+        color:${headerSpanColor};
+        font-size:${headerSpanFontSize}px;
       `"
       `"
         :align="status.aligns[i]"
         :align="status.aligns[i]"
         v-html="headerItem"
         v-html="headerItem"
@@ -24,30 +26,32 @@
       class="rows"
       class="rows"
       :style="`height: ${h - (status.header.length ? status.mergedConfig.headerHeight : 0)}px;`"
       :style="`height: ${h - (status.header.length ? status.mergedConfig.headerHeight : 0)}px;`"
     >
     >
-     <div v-if="status.rows.length">
-      <div
-        class="row-item"
-        v-for="(row, ri) in status.rows"
-        :key="`${row.toString()}${row.scroll}`"
-        :style="`
+      <div v-if="status.rows.length">
+        <div
+          class="row-item"
+          v-for="(row, ri) in status.rows"
+          :key="`${row.toString()}${row.scroll}`"
+          :style="`
         height: ${status.heights[ri]}px;
         height: ${status.heights[ri]}px;
         line-height: ${status.heights[ri]}px;
         line-height: ${status.heights[ri]}px;
         background-color: ${status.mergedConfig[row.rowIndex % 2 === 0 ? 'evenRowBGC' : 'oddRowBGC']};
         background-color: ${status.mergedConfig[row.rowIndex % 2 === 0 ? 'evenRowBGC' : 'oddRowBGC']};
       `"
       `"
-      >
-        <div
-          class="ceil"
-          v-for="(ceil, ci) in row.ceils"
-          :key="`${ceil}${ri}${ci}`"
-          :style="`width: ${status.widths[ci]}px;`"
-          :align="status.aligns[ci]"
-          v-html="ceil"
-        />
+        >
+          <div
+            class="ceil singe-line"
+            v-for="(ceil, ci) in row.ceils"
+            :key="`${ceil}${ri}${ci}`"
+            :style="`
+          width: ${status.widths[ci]}px;
+          color:${ceilSpanColor};
+          font-size:${ceilSpanFontSize}px;
+          `"
+            :align="status.aligns[ci]"
+            v-html="ceil"
+          />
+        </div>
       </div>
       </div>
-     </div>
-     <div v-else class="nullData">
-      暂无数据
-     </div>
+      <div v-else class="nullData">暂无数据</div>
     </div>
     </div>
   </div>
   </div>
 </template>
 </template>
@@ -70,7 +74,7 @@ const props = defineProps({
 // 这里能拿到图表宽高等
 // 这里能拿到图表宽高等
 const { w, h } = toRefs(props.chartConfig.attr)
 const { w, h } = toRefs(props.chartConfig.attr)
 // 这里能拿到上面 config.ts 里的 option 数据
 // 这里能拿到上面 config.ts 里的 option 数据
-// const { rowNum, headerHeight, index, backgroundColor } = toRefs(props.chartConfig.option)
+const { ceilSpanColor, ceilSpanFontSize, headerSpanColor, headerSpanFontSize } = toRefs(props.chartConfig.option)
 
 
 const status = reactive({
 const status = reactive({
   defaultConfig: {
   defaultConfig: {
@@ -355,6 +359,12 @@ onUnmounted(() => {
 </script>
 </script>
 
 
 <style lang="scss" scoped>
 <style lang="scss" scoped>
+.singe-line {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  word-break: break-all;
+  white-space: nowrap;
+}
 .dv-scroll-board {
 .dv-scroll-board {
   position: relative;
   position: relative;
   width: 100%;
   width: 100%;
@@ -389,11 +399,11 @@ onUnmounted(() => {
       overflow: hidden;
       overflow: hidden;
     }
     }
   }
   }
-  .nullData{
+  .nullData {
     display: flex;
     display: flex;
     justify-content: center;
     justify-content: center;
     align-items: center;
     align-items: center;
-    color:white;
+    color: white;
     height: 100%;
     height: 100%;
     width: 100%;
     width: 100%;
     background: #356b80;
     background: #356b80;

@@ -35,6 +35,7 @@ import cloneDeep from 'lodash/cloneDeep'
 import { useAssembleDataHooks } from '@/hooks/external/useAssembleData.hook'
 import { useAssembleDataHooks } from '@/hooks/external/useAssembleData.hook'
 import { SocketReceiveMessageType } from '@/store/external/modules/socketStore.d'
 import { SocketReceiveMessageType } from '@/store/external/modules/socketStore.d'
 import { CreateComponentGroupType, CreateComponentType } from '@/packages/index.d'
 import { CreateComponentGroupType, CreateComponentType } from '@/packages/index.d'
+import { useEchartsMapLegend } from '@/hooks/external/useEchartLegendMapChinese.hook'
 
 
 const props = defineProps({
 const props = defineProps({
   themeSetting: {
   themeSetting: {
@@ -112,6 +113,7 @@ watch(
         }
         }
         replaceMergeArr.value = ['series']
         replaceMergeArr.value = ['series']
         nextTick(() => {
         nextTick(() => {
+          useEchartsMapLegend(props.chartConfig, props.chartConfig.option.series)
           replaceMergeArr.value = []
           replaceMergeArr.value = []
         })
         })
       }
       }
@@ -244,6 +246,7 @@ const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, ne
     }
     }
   })
   })
   //
   //
+  addPieInterval(newData)
   updateVChart(newData)
   updateVChart(newData)
 })
 })
 
 

@@ -35,6 +35,7 @@ import { useFullScreen } from '../../utls/fullScreen'
 import { useAssembleDataHooks } from '@/hooks/external/useAssembleData.hook'
 import { useAssembleDataHooks } from '@/hooks/external/useAssembleData.hook'
 import { SocketReceiveMessageType } from '@/store/external/modules/socketStore.d'
 import { SocketReceiveMessageType } from '@/store/external/modules/socketStore.d'
 import {CreateComponentGroupType, CreateComponentType} from '@/packages/index.d'
 import {CreateComponentGroupType, CreateComponentType} from '@/packages/index.d'
+import { useEchartsMapLegend } from '@/hooks/external/useEchartLegendMapChinese.hook'
 
 
 const props = defineProps({
 const props = defineProps({
   themeSetting: {
   themeSetting: {
@@ -112,6 +113,7 @@ watch(
         }
         }
         replaceMergeArr.value = ['series']
         replaceMergeArr.value = ['series']
         nextTick(() => {
         nextTick(() => {
+          useEchartsMapLegend(props.chartConfig, props.chartConfig.option.series)
           replaceMergeArr.value = []
           replaceMergeArr.value = []
         })
         })
       }
       }
@@ -243,10 +245,10 @@ const {vChartRef} = useChartDataFetch(props.chartConfig, useChartEditStore, (new
     }
     }
   })
   })
   //
   //
+  addPieInterval(newData)
   updateVChart(newData)
   updateVChart(newData)
 })
 })
 
 
-
 onMounted(() => {
 onMounted(() => {
   seriesDataMaxLength = dataJson.source.length
   seriesDataMaxLength = dataJson.source.length
   if (props.chartConfig.option.isCarousel) {
   if (props.chartConfig.option.isCarousel) {

@@ -41,6 +41,7 @@ import { useAssembleDataHooks } from '@/hooks/external/useAssembleData.hook'
 import { SocketReceiveMessageType } from '@/store/external/modules/socketStore.d'
 import { SocketReceiveMessageType } from '@/store/external/modules/socketStore.d'
 import { useChartInteract } from '@/hooks/external/useChartSelectDeviceInteract.hook'
 import { useChartInteract } from '@/hooks/external/useChartSelectDeviceInteract.hook'
 import { getPacketIntervalByRange } from './helper'
 import { getPacketIntervalByRange } from './helper'
+import { useEchartsMapLegend } from '@/hooks/external/useEchartLegendMapChinese.hook'
 
 
 const props = defineProps({
 const props = defineProps({
   themeSetting: {
   themeSetting: {
@@ -122,6 +123,7 @@ watch(
         }
         }
         replaceMergeArr.value = ['series']
         replaceMergeArr.value = ['series']
         nextTick(() => {
         nextTick(() => {
+          useEchartsMapLegend(props.chartConfig, props.chartConfig.option.series)
           replaceMergeArr.value = []
           replaceMergeArr.value = []
         })
         })
       }
       }
@@ -254,6 +256,7 @@ const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (n
     }
     }
   })
   })
   //
   //
+  addPieInterval(newData)
   updateVChart(newData)
   updateVChart(newData)
 })
 })
 
 

@@ -35,6 +35,7 @@ import cloneDeep from 'lodash/cloneDeep'
 import { useAssembleDataHooks } from '@/hooks/external/useAssembleData.hook'
 import { useAssembleDataHooks } from '@/hooks/external/useAssembleData.hook'
 import { SocketReceiveMessageType } from '@/store/external/modules/socketStore.d'
 import { SocketReceiveMessageType } from '@/store/external/modules/socketStore.d'
 import {CreateComponentGroupType, CreateComponentType} from '@/packages/index.d'
 import {CreateComponentGroupType, CreateComponentType} from '@/packages/index.d'
+import { useEchartsMapLegend } from '@/hooks/external/useEchartLegendMapChinese.hook'
 
 
 const props = defineProps({
 const props = defineProps({
   themeSetting: {
   themeSetting: {
@@ -214,6 +215,7 @@ watch(
         }
         }
         replaceMergeArr.value = ['series']
         replaceMergeArr.value = ['series']
         nextTick(() => {
         nextTick(() => {
+          useEchartsMapLegend(props.chartConfig, props.chartConfig.option.series)
           replaceMergeArr.value = []
           replaceMergeArr.value = []
         })
         })
       }
       }
@@ -273,6 +275,7 @@ const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, ne
     }
     }
   })
   })
   //
   //
+  addPieInterval(newData)
   updateVChart(newData)
   updateVChart(newData)
 })
 })
 
 

@@ -8,7 +8,7 @@ export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
 export const seriesItem = {
 export const seriesItem = {
   type: 'line',
   type: 'line',
   label: {
   label: {
-    show: true,
+    show: false,
     position: 'top',
     position: 'top',
     color: '#fff',
     color: '#fff',
     fontSize: 12
     fontSize: 12

 <template>
 <template>
-  <v-chart
-    ref="vChartRef"
-    :init-options="initOptions"
-    :theme="themeColor"
-    :option="option"
-    :manual-update="isPreview()"
+  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :manual-update="isPreview()"
     :update-options="{
     :update-options="{
       replaceMerge: replaceMergeArr
       replaceMerge: replaceMergeArr
-    }"
-    autoresize
-    @mouseover="handleHighlight"
-    @mouseout="handleDownplay"
-  >
+    }" autoresize @mouseover="handleHighlight" @mouseout="handleDownplay">
   </v-chart>
   </v-chart>
 </template>
 </template>
 
 
@@ -186,6 +177,12 @@ watch(
           for (let i = 0; i < dimensionsGap; i++) {
           for (let i = 0; i < dimensionsGap; i++) {
             seriesArr.push(cloneDeep(seriesItem))
             seriesArr.push(cloneDeep(seriesItem))
           }
           }
+
+          const { request } = props.chartConfig
+          const { requestParams: { Params: { attrName } } } = request || {}
+          seriesArr.forEach((item: any, index: number) => {
+            item.name = attrName?.[index]
+          })
           props.chartConfig.option.series.push(...seriesArr)
           props.chartConfig.option.series.push(...seriesArr)
         }
         }
         replaceMergeArr.value = ['series']
         replaceMergeArr.value = ['series']
@@ -205,23 +202,29 @@ watch(
 //fix 修复v-chart图表绑定联动组件视图不更新问题
 //fix 修复v-chart图表绑定联动组件视图不更新问题
 const updateVChart = (newData: SocketReceiveMessageType) => {
 const updateVChart = (newData: SocketReceiveMessageType) => {
   if (!newData) return
   if (!newData) return
-  const { option } = props.chartConfig
+  const { option, request } = props.chartConfig
+  const { requestParams: { Params: { attrName } } } = request || {}
   const { dataset: overrideDataset } = option
   const { dataset: overrideDataset } = option
   const { dimensions } = overrideDataset
   const { dimensions } = overrideDataset
   if (!Array.isArray(dimensions)) return
   if (!Array.isArray(dimensions)) return
   const { data } = newData
   const { data } = newData
-  const { keys, record } = useAssembleDataHooks(data,dimensions)
+  const { record } = useAssembleDataHooks(data, dimensions, (attrName as any))
   if (unref(realTimeList).length >= chartMaxDataPoint.value) {
   if (unref(realTimeList).length >= chartMaxDataPoint.value) {
     unref(realTimeList).splice(0, 1)
     unref(realTimeList).splice(0, 1)
   }
   }
   realTimeList.value.push(record)
   realTimeList.value.push(record)
   const dataset = {
   const dataset = {
-    dimensions: ['ts', ...keys],
+    dimensions: ['ts', ...attrName],
     source: toRaw(unref(realTimeList))
     source: toRaw(unref(realTimeList))
   }
   }
+  option.series.forEach((item: any, index: number) => {
+    item.name = attrName?.[index]
+  })
+
   vChartRef.value?.setOption({
   vChartRef.value?.setOption({
-    ...option.value,
-    dataset
+    ...option,
+    dataset,
+    legend: { data: attrName || [] }
   })
   })
 }
 }
 const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, newData => {
 const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, newData => {

@@ -3,9 +3,10 @@
  * @param data {'wendu':[[xxxxxx,xxxx]]}
  * @param data {'wendu':[[xxxxxx,xxxx]]}
  * @returns keys:[xx,xx,xx] record:{'x':'xx'}
  * @returns keys:[xx,xx,xx] record:{'x':'xx'}
  */
  */
+import { isNullOrUnDef } from '@/utils/external/is'
 import dayjs from 'dayjs'
 import dayjs from 'dayjs'
 
 
-export const useAssembleDataHooks = (data: Record<string, string | [number, string]>, dimensions: string[]) => {
+export const useAssembleDataHooks = (data: Record<string, string | [number, string]>, dimensions: string[],attrName?:string[]) => {
   const formatValueToNumber = (value: string | number, defaultValue = 0) =>
   const formatValueToNumber = (value: string | number, defaultValue = 0) =>
     isNaN(value as number) ? defaultValue : Number(value)
     isNaN(value as number) ? defaultValue : Number(value)
   const tempObj: Recordable = {}
   const tempObj: Recordable = {}
@@ -17,11 +18,12 @@ export const useAssembleDataHooks = (data: Record<string, string | [number, stri
       })
       })
     })
     })
   const keys = Object.keys(tempObj)
   const keys = Object.keys(tempObj)
-  const record = keys.reduce((prev, next) => {
+  const record = keys.reduce((prev, next,index) => {
     const [latest] = data[next] || []
     const [latest] = data[next] || []
+    if (isNullOrUnDef(latest)) return prev
     const [ts, value] = latest as unknown as string[]
     const [ts, value] = latest as unknown as string[]
     //把值转为number类型 wendu:"23" 转为 wendu:23
     //把值转为number类型 wendu:"23" 转为 wendu:23
-    return { ...prev, ts: dayjs(ts).format('YYYY-MM-DD HH:mm:ss'), [next]: formatValueToNumber(value) }
+    return { ...prev, ts: dayjs(ts).format('YYYY-MM-DD HH:mm:ss'),[ attrName![index]]: formatValueToNumber(value) }
   }, {})
   }, {})
 
 
   return {
   return {

@@ -136,6 +136,7 @@ const stopWatch = watch(
 // 预览
 // 预览
 useChartDataFetch(props.chartConfig, useChartEditStore, newData => {
 useChartDataFetch(props.chartConfig, useChartEditStore, newData => {
   const { data } = newData
   const { data } = newData
+  // 不是结构体
   if (Reflect.get(data, 'longitude') && Reflect.get(data, 'latitude')) {
   if (Reflect.get(data, 'longitude') && Reflect.get(data, 'latitude')) {
     //必须有经纬度
     //必须有经纬度
     for (let _ in data) {
     for (let _ in data) {
@@ -143,6 +144,13 @@ useChartDataFetch(props.chartConfig, useChartEditStore, newData => {
       viewControlPaths.value.push([Number(data['longitude'][0][1]), Number(data['latitude'][0][1])])
       viewControlPaths.value.push([Number(data['longitude'][0][1]), Number(data['latitude'][0][1])])
     }
     }
     renderLocaLayerLine(viewControlPaths.value)
     renderLocaLayerLine(viewControlPaths.value)
+  } else {
+    // 序列化获取里面的经纬度
+    const values = Object.values(data) as string[][]
+    const serializeValue = JSON.parse(values[0][0][1])
+    const { longitude, latitude } = serializeValue
+    viewControlPaths.value.push([Number(longitude), Number(latitude)])
+    renderLocaLayerLine(viewControlPaths.value)
   }
   }
   stopWatch()
   stopWatch()
 })
 })

 <script lang="ts" setup name="SelectCity">
 <script lang="ts" setup name="SelectCity">
-import { onMounted, reactive } from 'vue'
+import { onMounted, reactive, nextTick, ref } from 'vue'
 import { getAreaList } from '@/api/external/common/index'
 import { getAreaList } from '@/api/external/common/index'
-import { areaEnum } from '../config'
+import { areaEnum, ifSpecialCity } from '../config'
 
 
 const props = defineProps({
 const props = defineProps({
   drillingIn: {
   drillingIn: {
@@ -25,45 +25,67 @@ const selectValues = reactive({
   provinceValue: 'china',
   provinceValue: 'china',
   cityValue: null,
   cityValue: null,
   countyValue: null,
   countyValue: null,
-  levelStr: areaEnum.COUNTRY
+  levelStr: areaEnum.COUNTRY,
+  areaName: ''
 })
 })
 
 
 const getAreaLists = async (level = areaEnum.PROVINCE, parentId = 1) => {
 const getAreaLists = async (level = areaEnum.PROVINCE, parentId = 1) => {
   const resp = await getAreaList({
   const resp = await getAreaList({
     level,
     level,
-    parentId
+    parentId:(parentId as any)==='china'?1:parentId
   })
   })
   if (!resp) return []
   if (!resp) return []
-  return resp.map((item: any) => ({ label: item.name, value: item.code }))
+  return resp.map((item: Recordable) => ({ label: item.name, value: item.code,parentId:item.parentId }))
 }
 }
 
 
 onMounted(async () => {
 onMounted(async () => {
   selectOptions.provinceOptions = await getAreaLists()
   selectOptions.provinceOptions = await getAreaLists()
-  ;(selectOptions.provinceOptions as never as any).unshift({
+  ;(selectOptions.provinceOptions as never as Recordable[]).unshift({
     label: '中国',
     label: '中国',
     value: 'china'
     value: 'china'
   })
   })
-  onHandleSelectProvince(props.optionData?.mapRegion.saveSelect['provinceValue'])
+  onHandleSelectProvince(props.optionData?.mapRegion.saveSelect['provinceValue'], {})
   for (let i in selectValues) Reflect.set(selectValues, i, props.optionData?.mapRegion.saveSelect[i])
   for (let i in selectValues) Reflect.set(selectValues, i, props.optionData?.mapRegion.saveSelect[i])
 })
 })
 
 
-const onHandleSelectProvince = async (value: number | string) => {
-  selectValues.cityValue = null
+
+
+const disabledCity = ref<boolean>(false)//直辖市禁用下面省份选择
+const onHandleSelectProvince = async (value: number | string, options: Recordable) => {
+   selectValues.cityValue = null
   selectValues.countyValue = null
   selectValues.countyValue = null
-  if (value === 'china') return (selectValues.levelStr = areaEnum.COUNTRY)
-  selectOptions.cityOptions = await getAreaLists(areaEnum.CITY, value as any)
+  if (value === 'china') {
+    disabledCity.value = false
+    selectValues.provinceValue = 'china'
+    selectOptions.cityOptions = []
+    selectValues.areaName = ''
+    selectValues.levelStr= areaEnum.COUNTRY
+    return 
+  }
+  const cityOptions = await getAreaLists(areaEnum.CITY, value as number)
+  selectOptions.cityOptions = cityOptions
   selectValues.levelStr = areaEnum.PROVINCE
   selectValues.levelStr = areaEnum.PROVINCE
+  selectValues.areaName = options.label
+  if(ifSpecialCity(value)){//直辖市的话就不能跟省份的逻辑一样了
+    selectOptions.cityOptions = cityOptions.map((item:any)=>({...item,value:item.parentId}))
+    disabledCity.value = true
+    return
+  }
+  disabledCity.value = false
 }
 }
 
 
-const onHandleSelectCity = async (value: number) => {
+const onHandleSelectCity = async (value: number, options: Recordable) => {
   selectValues.countyValue = null
   selectValues.countyValue = null
   selectOptions.countryOptions = await getAreaLists(areaEnum.COUNTY, value)
   selectOptions.countryOptions = await getAreaLists(areaEnum.COUNTY, value)
   selectValues.levelStr = areaEnum.CITY
   selectValues.levelStr = areaEnum.CITY
+  selectValues.areaName = options.label
 }
 }
 
 
-const onHandleSubmit = () => {
+const onHandleSubmit = async () => {
+  await nextTick()
   emits('submit', selectValues)
   emits('submit', selectValues)
 }
 }
+
 const resetValue = () => {
 const resetValue = () => {
   selectValues.provinceValue = 'china'
   selectValues.provinceValue = 'china'
   selectValues.cityValue = null
   selectValues.cityValue = null
@@ -72,6 +94,7 @@ const resetValue = () => {
   selectOptions.cityOptions = []
   selectOptions.cityOptions = []
   selectOptions.countryOptions = []
   selectOptions.countryOptions = []
 }
 }
+
 defineExpose({
 defineExpose({
   resetValue
   resetValue
 })
 })
@@ -87,6 +110,7 @@ defineExpose({
     />
     />
     <n-select
     <n-select
       v-if="!props.drillingIn"
       v-if="!props.drillingIn"
+      :disabled="disabledCity"
       @change="onHandleSelectCity"
       @change="onHandleSelectCity"
       placeholder="请选择城市"
       placeholder="请选择城市"
       v-model:value="selectValues.cityValue"
       v-model:value="selectValues.cityValue"

@@ -4,6 +4,7 @@ import { chartInitConfig } from '@/settings/designSetting'
 import { CreateComponentType } from '@/packages/index.d'
 import { CreateComponentType } from '@/packages/index.d'
 import cloneDeep from 'lodash/cloneDeep'
 import cloneDeep from 'lodash/cloneDeep'
 import dataMaps from './data.json'
 import dataMaps from './data.json'
+import { getAreaList } from '@/api/external/common'
 
 
 //省市区枚举
 //省市区枚举
 export const enum areaEnum {
 export const enum areaEnum {
@@ -16,19 +17,20 @@ export const enum areaEnum {
 }
 }
 
 
 export interface regionInfo {
 export interface regionInfo {
-  provinceValue:string
-  cityValue: string|null
-  countyValue: string|null
-  levelStr:areaEnum
+  provinceValue: string
+  cityValue: string | null
+  countyValue: string | null
+  levelStr: areaEnum
+  areaName: string
 }
 }
 
 
 type itemOption = {
 type itemOption = {
-  label:string
-  value:string
+  label: string
+  value: string
 }
 }
-export interface regionOption{
-  provinceOptions: itemOption[],
-  cityOptions: itemOption[],
+export interface regionOption {
+  provinceOptions: itemOption[]
+  cityOptions: itemOption[]
   countryOptions: itemOption[]
   countryOptions: itemOption[]
 }
 }
 
 
@@ -36,18 +38,22 @@ export interface regionOption{
 export interface historyParentType {
 export interface historyParentType {
   adcode: number
   adcode: number
   level: string
   level: string
+  areaName: string
 }
 }
 
 
-export interface backMapLevel{
-  (levelStr:string): boolean
-  (level:string): boolean
-  (): void
+export interface backMapLevel {
+  (str: string): boolean
   (): void
   (): void
 }
 }
 
 
+export interface levelFunc {
+  (str: string): boolean
+}
+
 //数据源接口
 //数据源接口
 export interface dataPointI {
 export interface dataPointI {
   name: string
   name: string
+  city_name: string
   value: number[]
   value: number[]
   adcode: number
   adcode: number
   height: number
   height: number
@@ -59,83 +65,128 @@ export interface dataPointI {
   }
   }
 }
 }
 
 
+//地区上级对应配置
+export const regionMapParentArea = {
+  PROVINCE: areaEnum.COUNTRY, //省份的上一级 中国
+  CITY: areaEnum.PROVINCE, //城市的上一级 省份
+  COUNTY: areaEnum.CITY, //县或者区的上一级 城市
+  TOWN: areaEnum.COUNTY //镇的上一级 县或者区
+}
+
+
+
 export const includes = []
 export const includes = []
 
 
+// 特殊处理安徽省的下钻
+export const specialTreatmentAnhui = [
+  '合肥市',
+  '马鞍山市',
+  '淮北市',
+  '宿州市',
+  '阜阳市',
+  '蚌埠市',
+  '淮南市',
+  '滁州市',
+  '六安市',
+  '巢湖市',
+  '芜湖市',
+  '亳州市',
+  '安庆市',
+  '池州市',
+  '铜陵市',
+  '宣城市',
+  '黄山市'
+]
+
 export const option = {
 export const option = {
   iconColor: 'black',
   iconColor: 'black',
   showIcon: false,
   showIcon: false,
   iconDistanceRight: 20,
   iconDistanceRight: 20,
   iconDistanceTop: 20,
   iconDistanceTop: 20,
-  drillingIn: false,
+  drillingIn: true,
   dataset: dataMaps,
   dataset: dataMaps,
+  isShowExecute:false,
   saveClickRegion: {
   saveClickRegion: {
     level: ''
     level: ''
   },
   },
   mapRegion: {
   mapRegion: {
     adcode: 'china',
     adcode: 'china',
     showHainanIsLands: true,
     showHainanIsLands: true,
+    areaName: '',
     saveSelect: {
     saveSelect: {
       levelStr: areaEnum.COUNTRY,
       levelStr: areaEnum.COUNTRY,
-      cityValue:null, 
-      countyValue:null,
-      provinceValue:'china'
+      cityValue: null,
+      countyValue: null,
+      provinceValue: 'china',
+      areaName: ''
     }
     }
   },
   },
   tooltip: {
   tooltip: {
     show: true
     show: true
   },
   },
+  //三维地图有两种，一种是geo3D，另一种是map3D,但是如果使用geo3D，地图点击获取不到点击区域name
   geo3D: {
   geo3D: {
     show: false, // 隐藏该层，为true时会导致出现两个地图
     show: false, // 隐藏该层，为true时会导致出现两个地图
-    map: 'centerMap',
+    map: '',
     roam: true,
     roam: true,
-    regionHeight: 0,
-    emphasis: {
-      label: {
-        show: true,
-        formatter: function (params: Recordable) {
-          return params.data.name ? params.data.name : ' '
-        },
-        textStyle: {
-          color: '#000',
-          fontSize: 14
-        }
-      },
-      itemStyle: {
-        color: '#ff0'
-      }
+    viewControl:{
+      distance:100
     }
     }
   },
   },
   series: [
   series: [
     {
     {
       type: 'map3D',
       type: 'map3D',
-      map: 'centerMap',
-      name: 'centerMap',
-      regionHeight: 3,
+      map: '',
+      name: '',
+      regionHeight: 0,
       label: {
       label: {
         show: true,
         show: true,
         formatter: function (params: Recordable) {
         formatter: function (params: Recordable) {
           return params.data.name ? params.data.name : ' '
           return params.data.name ? params.data.name : ' '
         },
         },
         textStyle: {
         textStyle: {
-          color: '#fff',
+          color: '#ffffffff',
           fontSize: 14
           fontSize: 14
         }
         }
       },
       },
       itemStyle: {
       itemStyle: {
-        color: 'green',
+        color: '#3c7effff', //背景颜色
+        opacity: 1,
         borderWidth: 0.8,
         borderWidth: 0.8,
-        borderColor: 'blue'
+        borderColor: '#51d6a9FF'
       },
       },
-      data: []
+      emphasis: {
+        // 鼠标hover 高亮时图形和标签的样式 (当鼠标放上去时 label和itemStyle 的样式)
+        label: {
+          // label高亮时的配置
+          show: true,
+          textStyle: {
+            color: '#57c3c2ff',
+            fontSize: 14
+          }
+        },
+        itemStyle: {
+          color: '#1ba784ff'
+        }
+      },
+      data: [],
+      viewControl: {
+        projection: 'perspective'
+      }
     },
     },
     {
     {
-      name: 'scatter3D',
-      type: 'scatter3D',
+      name: 'bar3D',
+      type: 'bar3D',
       coordinateSystem: 'geo3D',
       coordinateSystem: 'geo3D',
-      symbol: 'circle',
-      symbolSize: 20,
-      animation: true,
-      data: dataMaps
+      // 倒角尺寸
+      bevelSize: 0,
+      minHeight: 5,
+      shading: 'lambert',
+      barSize: 1,
+      itemStyle: {
+        color: '#4482B1FF'
+      },
+      data: []
     }
     }
   ]
   ]
 }
 }
@@ -149,3 +200,544 @@ export default class Config extends PublicConfigClass implements CreateComponent
   public chartConfig = cloneDeep(AddThreeDimensionalMapConfig)
   public chartConfig = cloneDeep(AddThreeDimensionalMapConfig)
   public option = echartOptionProfixHandle(option, includes)
   public option = echartOptionProfixHandle(option, includes)
 }
 }
+
+export const ifSpecialCity = (value:string|number) => {
+  if(value==110000 || value ==120000 || value ==500000 || value==310000 || value==810000 || value==820000){//直辖市的话就不能跟省份的逻辑一样了
+    return true
+  }
+  return false
+}
+
+
+
+//循环获取直辖市下面得区县数据
+
+export const getAreaLists = async (level = areaEnum.PROVINCE as any, parentId = 1) => {
+  const resp = await getAreaList({
+    level,
+    parentId:(parentId as any)=='china'?1:parentId
+  })
+  if (!resp) return []
+  return resp.map((item: Recordable) => ({ label: item.name, value: item.name, adcode: item.code }))
+}
+
+export const allFetch = (arr:any,items:string) => {
+  return Promise.all(
+    arr.map(async(item:any)=>{
+      try{
+        const values = await getAreaLists(areaEnum.COUNTY, item[items] as any)
+        return {...values}
+      }catch(err){
+        console.log(err,'err')
+        return 
+      }
+    })
+  )
+}
+
+
+// 缩放配置文件
+export const setScale = (adcode: string | number) => {
+  switch (adcode) {
+    case 'china':
+      return { distance: 100 }
+    case '110000':
+      return { distance: 150 }
+    case '120000':
+      return { distance: 190 }
+    case '130000':
+      return { distance: 165 }
+    case '130200':
+      return { distance: 135 }
+    case '130300':
+      return { distance: 135 }
+    case '130400':
+      return { distance: 130 }
+    case '130500':
+      return { distance: 130 }
+    case '130700':
+      return { distance: 160 }
+    case '131000':
+      return { distance: 200 }
+    case '131100':
+      return { distance: 135 }
+    case '140000':
+      return { distance: 216 }
+    case '140200':
+      return { distance: 140 }
+    case '140300':
+      return { distance: 150 }
+    case '140400':
+      return { distance: 150 }
+    case '140600':
+      return { distance: 135 }
+    case '140700':
+      return { distance: 135 }
+    case '140800':
+      return { distance: 145 }
+    case '141000':
+      return { distance: 140 }
+    case '141100':
+      return { distance: 165 }
+    case '150000':
+      return { distance: 130 }
+    case '150100':
+      return { distance: 150 }
+    case '150300':
+      return { distance: 240 }
+    case '150400':
+      return { distance: 130 }
+    case '150500':
+      return { distance: 130 }
+    case '150600':
+      return { distance: 130 }
+    case '210000':
+      return { distance: 130 }
+    case '210100':
+      return { distance: 165 }
+    case '210200':
+      return { distance: 135 }
+    case '210300':
+      return { distance: 155 }
+    case '210600':
+      return { distance: 145 }
+    case '210800':
+      return { distance: 150 }
+    case '211200':
+      return { distance: 150 }
+    case '211300':
+      return { distance: 150 }
+    case '220100':
+      return { distance: 130 }
+    case '220200':
+      return { distance: 145 }
+    case '220400':
+      return { distance: 145 }
+    case '220500':
+      return { distance: 225 }
+    case '220600':
+      return { distance: 155 }
+    case '230600':
+      return { distance: 195 }
+    case '230700':
+      return { distance: 155 }
+    case '231000':
+      return { distance: 160 }
+    case '310000':
+      return { distance: 135 }
+    case '320000':
+      return { distance: 145 }
+    case '320100':
+      return { distance: 240 }
+    case '320200':
+      return { distance: 155 }
+    case '320400':
+      return { distance: 145 }
+    case '320500':
+      return { distance: 145 }
+    case '320600':
+      return { distance: 145 }
+    case '320800':
+      return { distance: 160 }
+    case '320900':
+      return { distance: 180 }
+    case '321000':
+      return { distance: 200 }
+    case '321100':
+      return { distance: 135 }
+    case '321200':
+      return { distance: 200 }
+    case '321300':
+      return { distance: 160 }
+    case '330000':
+      return { distance: 135 }
+    case '330100':
+      return { distance: 135 }
+    case '330200':
+      return { distance: 135 }
+    case '330300':
+      return { distance: 140 }
+    case '330400':
+      return { distance: 140 }
+    case '330500':
+      return { distance: 135 }
+    case '330600':
+      return { distance: 145 }
+    case '330800':
+      return { distance: 150 }
+    case '331100':
+      return { distance: 135 }
+    case '340000':
+      return { distance: 170 }
+    case '340100':
+      return { distance: 175 }
+    case '340300':
+      return { distance: 130 }
+    case '340400':
+      return { distance: 190 }
+    case '340600':
+      return { distance: 220 }
+    case '340800':
+      return { distance: 160 }
+    case '341200':
+      return { distance: 135 }
+    case '341300':
+      return { distance: 130 }
+    case '341500':
+      return { distance: 145 }
+    case '341600':
+      return { distance: 160 }
+    case '341700':
+      return { distance: 155 }
+    case '350000':
+     return { distance: 150}
+    case '350200':
+     return { distance: 140}
+    case '350500':
+     return { distance: 135}
+    case '350600':
+     return { distance: 190}
+    case '350900':
+     return { distance: 140}
+    case '360000':
+      return { distance: 190}
+    case '360100':
+      return { distance: 145}
+    case '360200':
+      return { distance: 225}
+    case '360300':
+      return { distance: 215}
+    case '360500':
+      return { distance: 135}
+    case '360600':
+      return { distance: 175}
+    case '360700':
+      return { distance: 175}
+    case '360800':
+      return { distance: 145}
+    case '360900':
+      return { distance: 135}
+    case '361000':
+      return { distance: 170}
+    case '361100':
+      return { distance: 140}
+    case '370000':
+      return { distance: 135 }
+    case '370100':
+      return { distance: 165 }
+    case '370200':
+      return { distance: 165 }
+    case '370300':
+      return { distance: 210 }
+    case '370400':
+      return { distance: 150 }
+    case '370500':
+      return { distance: 150 }
+    case '370800':
+      return { distance: 135 }
+    case '371100':
+      return { distance: 140 }
+    case '371300':
+      return { distance: 150 }
+    case '371400':
+      return { distance: 130 }
+    case '371500':
+      return { distance: 150 }
+    case '371600':
+      return { distance: 200 }
+    case '371700':
+      return { distance: 180 }
+    case '410100':
+      return { distance: 135 }
+    case '410200':
+      return { distance: 140 }
+    case '410300':
+      return { distance: 140 }
+    case '410400':
+      return { distance: 155 }
+    case '410500':
+      return { distance: 145 }
+    case '410800':
+      return { distance: 140 }
+    case '410900':
+      return { distance: 145 }
+    case '411000':
+      return { distance: 140 }
+    case '411100':
+      return { distance: 155 }
+    case '411200':
+      return { distance: 140 }
+    case '411300':
+      return { distance: 140 }
+    case '411400':
+      return { distance: 135 }
+    case '411700':
+      return { distance: 130 }
+    case '420000':
+      return { distance: 145 }
+    case '420100':
+      return { distance: 160 }
+    case '420300':
+      return { distance: 130 }
+    case '420500':
+      return { distance: 155 }
+    case '420700':
+      return { distance: 170 }
+    case '420900':
+      return { distance: 180 }
+    case '421100':
+      return { distance: 180 }
+    case '421200':
+      return { distance: 150 }
+    case '421300':
+      return { distance: 165 }
+    case '422800':
+      return { distance: 150 }
+    case '430000':
+      return { distance: 155 }
+    case '430200':
+      return { distance: 250 }
+    case '430600':
+      return { distance: 155 }
+    case '430700':
+      return { distance: 155 }
+    case '430900':
+      return { distance: 145 }
+    case '431000':
+      return { distance: 150 }
+    case '431100':
+      return { distance: 235 }
+    case '431200':
+      return { distance: 195 }
+    case '431300':
+      return { distance: 135 }
+    case '433100':
+      return { distance: 220 }
+    case '440000':
+      return { distance: 165 }
+    case '440100':
+      return { distance: 185 }
+    case '440300':
+      return { distance: 135 }
+    case '440400':
+      return { distance: 135 }
+    case '440500':
+      return { distance: 140 }
+    case '440600':
+      return { distance: 180 }
+    case '440700':
+      return { distance: 150 }
+    case '440800':
+      return { distance: 190 }
+    case '440900':
+      return { distance: 160 }
+    case '441200':
+      return { distance: 165 }
+    case '441400':
+      return { distance: 160 }
+    case '441600':
+      return { distance: 185 }
+    case '441700':
+      return { distance: 180 }
+    case '445100':
+      return { distance: 170 }
+    case '445200':
+      return { distance: 160 }
+    case '445300':
+      return { distance: 130 }
+    case '450100':
+      return { distance: 135 }
+    case '450200':
+      return { distance: 195 }
+    case '450300':
+      return { distance: 175 }
+    case '450400':
+      return { distance: 195 }
+    case '450600':
+      return { distance: 155 }
+    case '450800':
+      return { distance: 165 }
+    case '450900':
+      return { distance: 165 }
+    case '451000':
+      return { distance: 135 }
+    case '451100':
+      return { distance: 145 }
+    case '451400':
+      return { distance: 165 }
+    case '460100':
+      return { distance: 155 }
+    case '500000':
+      return { distance: 140 }
+    case '510000':
+      return { distance: 115 }
+    case '510100':
+      return { distance: 135 }
+    case '510300':
+      return { distance: 145 }
+    case '510400':
+      return { distance: 165 }
+    case '510500':
+      return { distance: 195 }
+    case '510600':
+      return { distance: 155 }
+    case '510700':
+      return { distance: 170 }
+    case '510800':
+      return { distance: 115 }
+    case '510900':
+      return { distance: 160 }
+    case '511000':
+      return { distance: 145 }
+    case '511100':
+      return { distance: 165 }
+    case '511300':
+      return { distance: 135 }
+    case '511400':
+      return { distance: 140 }
+    case '511500':
+      return { distance: 140 }
+    case '511700':
+      return { distance: 155 }
+    case '511800':
+      return { distance: 215 }
+    case '511900':
+      return { distance: 160 }
+    case '512000':
+      return { distance: 135 }
+    case '513200':
+      return { distance: 105 }
+    case '513300':
+      return { distance: 175 }
+    case '520000':
+      return { distance: 135 }
+    case '520100':
+      return { distance: 145 }
+    case '520200':
+      return { distance: 165 }
+    case '520300':
+      return { distance: 148 }
+    case '520400':
+      return { distance: 145 }
+    case '522300':
+      return { distance: 145 }
+    case '522600':
+      return { distance: 139 }
+    case '522700':
+      return { distance: 175 }
+    case '530000':
+      return { distance: 145 }
+    case '530100':
+      return { distance: 205 }
+    case '530300':
+      return { distance: 228 }
+    case '530500':
+      return { distance: 135 }
+    case '530600':
+      return { distance: 155 }
+    case '530700':
+      return { distance: 150 }
+    case '530800':
+      return { distance: 165 }
+    case '530900':
+      return { distance: 165 }
+    case '532300':
+      return { distance:205 }
+    case '532500':
+      return { distance: 165 }
+    case '532800':
+      return { distance: 160 }
+    case '532900':
+      return { distance: 140 }
+    case '533100':
+      return { distance: 175 }
+    case '533300':
+      return { distance: 275 }
+    case '533400':
+      return { distance: 200 }
+    case '540000':
+      return { distance: 140 }
+    case '540100':
+      return { distance: 145 }
+    case '542500':
+      return { distance: 155 }
+    case '610000':
+      return { distance: 210 }
+    case '610100':
+      return { distance: 145 }
+    case '610200':
+      return { distance: 140 }
+    case '610300':
+      return { distance: 145 }
+    case '610400':
+      return { distance: 135 }
+    case '610500':
+      return { distance: 155 }
+    case '610600':
+      return { distance: 135 }
+    case '610700':
+      return { distance: 140 }
+    case '610800':
+      return { distance: 155 }
+    case '610900':
+      return { distance: 160}
+    case '611000':
+      return { distance: 150}
+    case '620000':
+      return { distance: 135 }
+    case '620300':
+      return { distance: 140 }
+    case '620400':
+      return { distance: 165 }
+    case '620500':
+      return { distance: 135 }
+    case '620600':
+      return { distance: 175 }
+    case '620700':
+      return { distance: 135 }
+    case '620900':
+      return { distance: 135 }
+    case '621000':
+      return { distance: 155 }
+    case '621100':
+      return { distance: 145 }
+    case '622900':
+      return { distance: 165 }
+    case '623000':
+      return { distance: 145 }
+    case '630100':
+      return { distance: 185 }
+    case '632200':
+      return { distance: 130 }
+    case '632300':
+      return { distance: 180 }
+    case '632500':
+      return { distance: 135 }
+    case '632600':
+      return { distance: 135 }
+    case '632800':
+      return { distance: 150 }
+    case '640000':
+      return { distance: 195 }
+    case '640100':
+      return { distance: 175 }
+    case '640500':
+      return { distance: 135 }
+    case '650000':
+      return { distance: 135 }
+    case '650100':
+      return { distance: 155 }
+    case '652900':
+      return { distance: 135 }
+    case '653100':
+      return { distance: 138 }
+    case '710000':
+      return { distance: 135 }
+    case '810000':
+      return { distance: 145 }
+    case '820000':
+      return { distance: 240 }
+    default:
+      return { distance: 125}
+  }
+}

@@ -19,127 +19,159 @@
     </SettingItemBox>
     </SettingItemBox>
     <SettingItemBox name="图标距离">
     <SettingItemBox name="图标距离">
       <SettingItem name="距右">
       <SettingItem name="距右">
-        <n-input-number
-          v-model:value="optionData.iconDistanceRight"
-          :min="1"
-          size="small"
-          placeholder="请输入"
-        ></n-input-number>
+        <n-input-number v-model:value="optionData.iconDistanceRight" :min="1" size="small"
+          placeholder="请输入"></n-input-number>
       </SettingItem>
       </SettingItem>
       <SettingItem name="距上">
       <SettingItem name="距上">
-        <n-input-number
-          v-model:value="optionData.iconDistanceTop"
-          :min="1"
-          size="small"
-          placeholder="请输入"
-        ></n-input-number>
+        <n-input-number v-model:value="optionData.iconDistanceTop" :min="1" size="small"
+          placeholder="请输入"></n-input-number>
       </SettingItem>
       </SettingItem>
     </SettingItemBox>
     </SettingItemBox>
-    <SelectCity
-      ref="SelectCityRef"
-      :optionData="optionData"
-      :drillingIn="optionData.drillingIn"
-      @submit="onHandleSelectValues"
-    />
-    <SettingItemBox name="颜色">
+    <SelectCity ref="SelectCityRef" :optionData="optionData" :drillingIn="optionData.drillingIn"
+      @submit="onHandleSelectValues" />
+    <div style="height: 30px"></div>
+    <n-tag type="primary">若配置无响应，请在预览页面查看效果</n-tag>
+    <SettingItemBox name="地图配置">
       <SettingItem name="区域颜色">
       <SettingItem name="区域颜色">
         <n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[0].itemStyle.color"></n-color-picker>
         <n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[0].itemStyle.color"></n-color-picker>
       </SettingItem>
       </SettingItem>
       <SettingItem name="边框颜色">
       <SettingItem name="边框颜色">
-        <n-color-picker
-          size="small"
-          :modes="['hex']"
-          v-model:value="seriesList[0].itemStyle.borderColor"
-        ></n-color-picker>
+        <n-color-picker size="small" :modes="['hex']"
+          v-model:value="seriesList[0].itemStyle.borderColor"></n-color-picker>
       </SettingItem>
       </SettingItem>
       <SettingItem name="边框大小">
       <SettingItem name="边框大小">
-        <n-input-number
-          v-model:value="seriesList[0].itemStyle.borderWidth"
-          :min="0"
-          size="small"
-          placeholder="请输入"
-        ></n-input-number>
+        <n-input-number v-model:value="seriesList[0].itemStyle.borderWidth" :min="0" size="small"
+          placeholder="请输入"></n-input-number>
+      </SettingItem>
+      <SettingItem name="透明度">
+        <n-input-number v-model:value="seriesList[0].itemStyle.opacity" :min="0" size="small"
+          placeholder="请输入"></n-input-number>
       </SettingItem>
       </SettingItem>
       <SettingItem name="厚度">
       <SettingItem name="厚度">
-        <n-input-number
-          v-model:value="seriesList[0].regionHeight"
-          :min="0"
-          size="small"
-          placeholder="请输入"
-        ></n-input-number>
+        <n-input-number v-model:value="seriesList[0].regionHeight" :min="0" size="small"
+          placeholder="请输入"></n-input-number>
       </SettingItem>
       </SettingItem>
     </SettingItemBox>
     </SettingItemBox>
-    <SettingItemBox name="标题">
+    <SettingItemBox name="标题配置">
       <SettingItem name="是否显示">
       <SettingItem name="是否显示">
         <n-switch v-model:value="seriesList[0].label.show" size="small"></n-switch>
         <n-switch v-model:value="seriesList[0].label.show" size="small"></n-switch>
       </SettingItem>
       </SettingItem>
       <SettingItem name="颜色">
       <SettingItem name="颜色">
-        <n-color-picker
-          size="small"
-          :modes="['hex']"
-          v-model:value="seriesList[0].label.textStyle.color"
-        ></n-color-picker>
+        <n-color-picker size="small" :modes="['hex']"
+          v-model:value="seriesList[0].label.textStyle.color"></n-color-picker>
       </SettingItem>
       </SettingItem>
       <SettingItem name="大小">
       <SettingItem name="大小">
-        <n-input-number
-          v-model:value="seriesList[0].label.textStyle.fontSize"
-          :min="0"
-          size="small"
-          placeholder="请输入"
-        ></n-input-number>
+        <n-input-number v-model:value="seriesList[0].label.textStyle.fontSize" :min="0" size="small"
+          placeholder="请输入"></n-input-number>
       </SettingItem>
       </SettingItem>
     </SettingItemBox>
     </SettingItemBox>
-    <SettingItemBox name="高亮">
+    <SettingItemBox name="高亮配置">
       <SettingItem name="标题显示">
       <SettingItem name="标题显示">
-        <n-switch v-model:value="optionData.geo3D.emphasis.label.show" size="small"></n-switch>
+        <n-switch v-model:value="seriesList[0].emphasis.label.show" size="small"></n-switch>
       </SettingItem>
       </SettingItem>
       <SettingItem name="颜色">
       <SettingItem name="颜色">
-        <n-color-picker
-          size="small"
-          :modes="['hex']"
-          v-model:value="optionData.geo3D.emphasis.label.textStyle.color"
-        ></n-color-picker>
+        <n-color-picker size="small" :modes="['hex']"
+          v-model:value="seriesList[0].emphasis.label.textStyle.color"></n-color-picker>
       </SettingItem>
       </SettingItem>
       <SettingItem name="大小">
       <SettingItem name="大小">
-        <n-input-number
-          v-model:value="optionData.geo3D.emphasis.label.textStyle.fontSize"
-          :min="0"
-          size="small"
-          placeholder="请输入"
-        ></n-input-number>
+        <n-input-number v-model:value="seriesList[0].emphasis.label.textStyle.fontSize" :min="0" size="small"
+          placeholder="请输入"></n-input-number>
       </SettingItem>
       </SettingItem>
       <SettingItem name="区块颜色">
       <SettingItem name="区块颜色">
-        <n-color-picker
-          size="small"
-          :modes="['hex']"
-          v-model:value="optionData.geo3D.emphasis.itemStyle.color"
-        ></n-color-picker>
+        <n-color-picker size="small" :modes="['hex']"
+          v-model:value="seriesList[0].emphasis.itemStyle.color"></n-color-picker>
       </SettingItem>
       </SettingItem>
     </SettingItemBox>
     </SettingItemBox>
-    <SettingItemBox name="标记">
+    <SettingItemBox name="柱状配置">
+      <SettingItem name="最小高度">
+        <n-input-number v-model:value="seriesList[1].minHeight" :min="0" :step="1" size="small"
+          placeholder="请输入"></n-input-number>
+      </SettingItem>
       <SettingItem name="大小">
       <SettingItem name="大小">
-        <n-input-number
-          v-model:value="seriesList[1].symbolSize"
-          :min="0"
-          :step="10"
-          size="small"
-          placeholder="请输入"
-        ></n-input-number>
+        <n-input-number v-model:value="seriesList[1].barSize" :min="0" :step="1" size="small"
+          placeholder="请输入"></n-input-number>
       </SettingItem>
       </SettingItem>
-      <SettingItem name="形状">
-        <n-select :options="symbolOption" v-model:value="seriesList[1].symbol"></n-select>
+      <SettingItem name="倒角尺寸">
+        <n-input-number v-model:value="seriesList[1].bevelSize" :min="0" :max="1" :step="0.1" size="small"
+          placeholder="请输入"></n-input-number>
       </SettingItem>
       </SettingItem>
     </SettingItemBox>
     </SettingItemBox>
   </CollapseItem>
   </CollapseItem>
+  <CollapseItem name="地区配置" :expanded="true">
+    <SettingItemBox name="地区配置" :alone="true">
+      <template v-for="(item, map3DIndex) in optionData.dataset.map3D" :key="map3DIndex">
+        <setting-item name="省份名称" v-if="mapRegionCache.adcode == 'china'">
+          <n-select
+            @change="(v: number, o: Recordable, w: Recordable, s1: number) => onHandleSelectProvince(v, o, item, map3DIndex)"
+            placeholder="请选择省份" v-model:value="item.name" :options="item.provinceOptions" />
+        </setting-item>
+        <setting-item name="市/区/县名称">
+          <n-select placeholder="请选择市/区/县" v-model:value="item.city_name" :options="item.cityOptions" />
+        </setting-item>
+        <setting-item name="区块厚度">
+          <n-input-number v-model:value="item.height"> </n-input-number>
+        </setting-item>
+        <setting-item name="区块颜色">
+          <n-color-picker size="small" :modes="['hex']" v-model:value="item.itemStyle.color"></n-color-picker>
+        </setting-item>
+        <setting-item name="区块透明度">
+          <n-input-number v-model:value="item.itemStyle.opacity"> </n-input-number>
+        </setting-item>
+        <setting-item></setting-item>
+        <setting-item>
+          <n-button size="small" @click="optionData.dataset.map3D.splice(map3DIndex, 1)"> - </n-button>
+        </setting-item>
+      </template>
+      <div class="h-space"></div>
+      <n-button size="small" @click="handleAddRegion"> + </n-button>
+      <div class="h-space"></div>
+      <n-button type="primary" @click="handleAreaSubmit">确定</n-button>
+    </SettingItemBox>
+  </CollapseItem>
+  <CollapseItem name="柱状配置" :expanded="true">
+    <SettingItemBox name="柱状配置" :alone="true">
+      <template v-for="(item, barIndex) in optionData.dataset.bar3D" :key="barIndex">
+        <setting-item name="经度">
+          <n-input-number v-model:value="item.value[0]"> </n-input-number>
+        </setting-item>
+        <setting-item name="纬度">
+          <n-input-number v-model:value="item.value[1]"> </n-input-number>
+        </setting-item>
+        <setting-item name="离地高度">
+          <n-input-number v-model:value="item.height"> </n-input-number>
+        </setting-item>
+        <setting-item name="柱状颜色">
+          <n-color-picker size="small" :modes="['hex']" v-model:value="item.itemStyle.color"></n-color-picker>
+        </setting-item>
+        <setting-item name="柱状透明度">
+          <n-input-number v-model:value="item.itemStyle.opacity"> </n-input-number>
+        </setting-item>
+        <setting-item>
+          <n-button size="small" @click="optionData.dataset.bar3D.splice(barIndex, 1)"> - </n-button>
+        </setting-item>
+      </template>
+      <div class="h-space"></div>
+      <n-button style="float: right" size="small"
+        @click="optionData.dataset.bar3D.push(cloneDeep(STATIC_SCATTER_CONFIG))">
+        +
+      </n-button>
+      <div class="h-space"></div>
+      <n-button type="primary" @click="handleAreaSubmit">确定</n-button>
+    </SettingItemBox>
+  </CollapseItem>
 </template>
 </template>
 
 
 <script setup lang="ts">
 <script setup lang="ts">
-import { PropType, computed, ref } from 'vue'
+import { PropType, computed, ref, onMounted } from 'vue'
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
 import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
 import { GlobalSetting } from '@/components/Pages/ChartItemSetting'
 import { GlobalSetting } from '@/components/Pages/ChartItemSetting'
 import SelectCity from './components/SelectCity.vue'
 import SelectCity from './components/SelectCity.vue'
-import { regionInfo } from './config'
+import { allFetch, getAreaLists, ifSpecialCity, regionInfo } from './config'
+import { cloneDeep } from 'lodash'
+
+import { areaEnum } from '../../../Decorates/Mores/Weather/config'
+import { unref } from 'vue'
 
 
 const props = defineProps({
 const props = defineProps({
   optionData: {
   optionData: {
@@ -152,56 +184,133 @@ const seriesList = computed(() => {
   return props.optionData.series
   return props.optionData.series
 })
 })
 
 
-const symbolOption = ref([
-  {
-    label: 'circle',
-    value: 'circle'
-  },
-  {
-    label: 'rect',
-    value: 'rect'
-  },
-  {
-    label: 'roundRect',
-    value: 'roundRect'
-  },
-  {
-    label: 'triangle',
-    value: 'triangle'
-  },
-  {
-    label: 'diamond',
-    value: 'diamond'
-  },
-  {
-    label: 'pin',
-    value: 'pin'
-  },
-  {
-    label: 'arrow',
-    value: 'arrow'
-  },
-  {
-    label: 'none',
-    value: 'none'
+const datasetMap3DList = computed(() => {
+  return props.optionData.dataset['map3D']
+})
+
+const STATIC_SCATTER_CONFIG = {
+  name: null,
+  adcode: 510000,
+  city_name: null,
+  value: [0, 0, 0],
+  height: 2,
+  itemStyle: {
+    color: '#4482B1FF',
+    opacity: 1
   }
   }
-])
+}
 
 
 const SelectCityRef = ref<InstanceType<typeof SelectCity>>()
 const SelectCityRef = ref<InstanceType<typeof SelectCity>>()
 
 
-const onHandleSelectValues = (values: regionInfo) => {
-  const { cityValue, countyValue, provinceValue } = values
-  props.optionData.mapRegion.saveSelect = values
-  props.optionData.mapRegion.adcode = countyValue
+
+
+onMounted(async () => {
+  const {saveSelect} = unref(mapRegionCache) || {}
+  const {levelStr} = saveSelect || {}
+  datasetMap3DList.value.forEach(async (item: Recordable) => {
+    item.provinceOptions = await getAreaLists()
+    const adcode = !item.adcode ? mapRegionCache.value.adcode : item.adcode
+    const cityOptions = await getAreaLists(levelStr===areaEnum.CITY?areaEnum.COUNTY:areaEnum.CITY, adcode )
+    item.adcode = adcode
+    if(ifSpecialCity(adcode)){//直辖市获取区县配置的数据不一样
+      const values = await allFetch(cityOptions,'adcode') || []
+      item.cityOptions = values.flatMap((obj:any) => Object.values(obj))
+      return
+    }
+    item.cityOptions = cityOptions
+  })
+})
+
+const onHandleSelectProvince = async (value: number, option: Recordable, item: Recordable, mapIndex: number) => {
+  const findIndex = datasetMap3DList.value.findIndex((findItem: Recordable) => findItem.name === item.name)
+  datasetMap3DList.value[findIndex].city_name = null
+  datasetMap3DList.value[findIndex].adcode = option.adcode
+  datasetMap3DList.value[findIndex].cityOptions = await getAreaLists(areaEnum.CITY, option.adcode)
+}
+
+const handleAddRegion =async () => {
+  props.optionData.dataset.map3D.push(cloneDeep(STATIC_SCATTER_CONFIG))
+  if (mapRegionCache.value.adcode !== 'china') {
+    const { adcode, areaName,saveSelect } = unref(mapRegionCache) || {}
+  const {levelStr} = saveSelect || {}
+    const cityOptions = await getAreaLists(levelStr===areaEnum.CITY?areaEnum.COUNTY:areaEnum.CITY, adcode)
+    // 循环 push 城市数据
+    datasetMap3DList.value.forEach((item: any) => {
+      item.name = areaName
+      item.value = null
+      item.cityOptions = cityOptions && cityOptions.length ? cityOptions : [{ adcode, label: areaName, value: areaName }]
+    })
+    return
+  }
+  datasetMap3DList.value.forEach(async (item: Recordable) => {
+    item.provinceOptions = await getAreaLists()
+  })
+}
+
+const handleAreaSubmit = () => {
+  props.optionData.isShowExecute = !props.optionData?.isShowExecute
+}
+
+const mapRegionCache = computed(() => {
+  return props.optionData.mapRegion
+})
+
+const onHandleSelectValues = async (values: regionInfo) => {
+  const { cityValue, countyValue, provinceValue, areaName } = values
+  mapRegionCache.value.areaName = areaName
+  mapRegionCache.value.saveSelect = values
+  mapRegionCache.value.adcode = countyValue
     ? countyValue
     ? countyValue
     : cityValue
     : cityValue
-    ? cityValue
-    : provinceValue === 'china'
-    ? 'china'
-    : provinceValue
+      ? cityValue
+      : provinceValue === 'china'
+        ? 'china'
+        : provinceValue
+  props.optionData.mapRegion = mapRegionCache.value
+  // if (mapRegionCache.value.adcode !== 'china') {
+    //清空区块配置和柱状配置
+    props.optionData.dataset.map3D = [cloneDeep(STATIC_SCATTER_CONFIG)]
+    props.optionData.dataset.bar3D = [cloneDeep(STATIC_SCATTER_CONFIG)]
+    setDatasetArea()
+  // }
 }
 }
 
 
+
+const mdutcgValues = ref<any>([])//直辖市的区县数据
+
+const setDatasetArea = async () => {
+  const { adcode, areaName,saveSelect } = unref(mapRegionCache) || {}
+  const {levelStr} = saveSelect || {}
+  const cityOptions = await getAreaLists(levelStr===areaEnum.CITY?areaEnum.COUNTY:areaEnum.CITY, adcode)
+  let provinceOptions:any = []
+  if(adcode==='china'){
+    provinceOptions = await getAreaLists()
+  }
+  mdutcgValues.value = cityOptions
+  if(adcode==110000 || adcode==120000 || adcode==500000 || adcode==310000 || adcode==810000 || adcode==820000){//直辖市
+    const values = await allFetch(cityOptions,'adcode') || []
+    mdutcgValues.value = values.flatMap((obj:any) => Object.values(obj))//讲获取到的多维转换成单一纬度
+  }
+  // 循环 push 城市数据
+  datasetMap3DList.value.forEach((item: any) => {
+    item.name = areaName
+    item.city_name = null
+    item.adcode = null,
+    item.value = null
+    item.provinceOptions=provinceOptions
+    item.cityOptions = unref(mdutcgValues) && unref(mdutcgValues).length ? unref(mdutcgValues) : [{ adcode, label: areaName, value: areaName }]
+  })
+}
 const handleChangeDrillingIn = () => {
 const handleChangeDrillingIn = () => {
   SelectCityRef.value?.resetValue()
   SelectCityRef.value?.resetValue()
+  props.optionData.mapRegion.adcode = 'china'
+  props.optionData.mapRegion.areaName = ''
+  props.optionData.mapRegion.saveSelect.areaName = ''
 }
 }
 </script>
 </script>
+
+<style scoped>
+.h-space {
+  height: 10px;
+}
+</style>

-[
-  {
-    "name": "四川省",
-    "value": [104.10068024609373, 30.580525329665175, 20000],
-    "adcode": 510000,
-    "height": 5,
-    "itemStyle": {
-      "color": "pink",
-      "opacity": 1,
-      "borderWidth": 0.4,
-      "borderColor": "#5F9EA0"
+{
+  "map3D": [
+    {
+      "name": "四川省",
+      "adcode": 510000,
+      "city_name": "成都市",
+      "height": 2,
+      "itemStyle": {
+        "color": "#4482B1FF",
+        "opacity": 1,
+        "borderWidth": 0.4,
+        "borderColor": "#5F9EA0"
+      }
     }
     }
-  },
-  {
-    "name": "湖南省",
-    "value": [111.73068512890623, 27.86754509366569, 20000],
-    "adcode": 430000,
-    "height": 4,
-    "itemStyle": {
-      "color": "blue",
-      "opacity": 1,
-      "borderWidth": 0.4,
-      "borderColor": "#5F9EA0"
+  ],
+  "bar3D": [
+    {
+      "value": [
+        117.283042,
+        31.86119,
+        20000
+      ],
+      "height": 2,
+      "itemStyle": {
+        "color": "#4482B1FF",
+        "opacity": 1,
+        "borderWidth": 0.4,
+        "borderColor": "#5F9EA0"
+      }
     }
     }
-  },
-  {
-    "name": "吉林省",
-    "value": [126.45236481640623, 43.7943407914815, 20000],
-    "adcode": 220000,
-    "height": 5,
-    "itemStyle": {
-      "color": "yellow",
-      "opacity": 1,
-      "borderWidth": 0.4,
-      "borderColor": "#5F9EA0"
-    }
-  },
-  {
-    "name": "山东省",
-    "value": [118.67404450390623, 36.16387465872037, 20000],
-    "adcode": 370000,
-    "height": 6,
-    "itemStyle": {
-      "color": "orange",
-      "opacity": 1,
-      "borderWidth": 0.4,
-      "borderColor": "#5F9EA0"
-    }
-  }
-]
+  ]
+}

@@ -9,12 +9,23 @@
 
 
 <script setup lang="ts">
 <script setup lang="ts">
 import { onMounted, ref, nextTick, PropType, toRefs, watch, reactive } from 'vue'
 import { onMounted, ref, nextTick, PropType, toRefs, watch, reactive } from 'vue'
-import * as echarts from 'echarts'
-import { registerMap } from 'echarts/core'
 import 'echarts-gl'
 import 'echarts-gl'
-import config, { areaEnum, dataPointI, optionType, historyParentType, backMapLevel } from './config'
+import { registerMap, init } from 'echarts/core'
+import type { EChartsType } from 'echarts/core'
+import config, {
+  areaEnum,
+  dataPointI,
+  optionType,
+  historyParentType,
+  backMapLevel,
+  levelFunc,
+  regionMapParentArea,
+  specialTreatmentAnhui,
+  setScale
+} from './config'
 import { getGeoJsonMap } from '@/api/external/common'
 import { getGeoJsonMap } from '@/api/external/common'
-import dataMaps from './data.json'
+import { ThreeMapEnum } from '@/enums/external/mapEnum'
+import cloneDeep from 'lodash/cloneDeep'
 
 
 const props = defineProps({
 const props = defineProps({
   chartConfig: {
   chartConfig: {
@@ -23,15 +34,18 @@ const props = defineProps({
   }
   }
 })
 })
 
 
-const backIcon = 'path://M853.333333 245.333333H245.333333l93.866667-93.866666c12.8-12.8 12.8-34.133333 0-46.933334-12.8-12.8-34.133333-12.8-46.933333 0l-145.066667 145.066667c-12.8 12.8-12.8 34.133333 0 46.933333l145.066667 145.066667c6.4 6.4 14.933333 10.666667 23.466666 10.666667s17.066667-4.266667 23.466667-10.666667c12.8-12.8 12.8-34.133333 0-46.933333L256 311.466667h597.333333c6.4 0 10.666667 4.266667 10.666667 10.666666v426.666667c0 6.4-4.266667 10.666667-10.666667 10.666667H170.666667c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32h682.666666c40.533333 0 74.666667-34.133333 74.666667-74.666667V320c0-40.533333-34.133333-74.666667-74.666667-74.666667z'
+const backIcon =
+  'path://M853.333333 245.333333H245.333333l93.866667-93.866666c12.8-12.8 12.8-34.133333 0-46.933334-12.8-12.8-34.133333-12.8-46.933333 0l-145.066667 145.066667c-12.8 12.8-12.8 34.133333 0 46.933333l145.066667 145.066667c6.4 6.4 14.933333 10.666667 23.466666 10.666667s17.066667-4.266667 23.466667-10.666667c12.8-12.8 12.8-34.133333 0-46.933333L256 311.466667h597.333333c6.4 0 10.666667 4.266667 10.666667 10.666666v426.666667c0 6.4-4.266667 10.666667-10.666667 10.666667H170.666667c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32h682.666666c40.533333 0 74.666667-34.133333 74.666667-74.666667V320c0-40.533333-34.133333-74.666667-74.666667-74.666667z'
 
 
 const { w, h } = toRefs(props.chartConfig.attr)
 const { w, h } = toRefs(props.chartConfig.attr)
 
 
-const map3DRef = ref()
+const { mapRegion, dataset, drillingIn, saveClickRegion, geo3D, series } = toRefs(props.chartConfig.option)
+
+const map3DRef = ref<Nullable<HTMLElement>>()
 
 
 const show = ref(true)
 const show = ref(true)
 
 
-const chartInstance = ref()
+const chartInstance = ref<Nullable<EChartsType>>()
 
 
 const toolBoxOption = ref({
 const toolBoxOption = ref({
   show: true,
   show: true,
@@ -50,38 +64,39 @@ const toolBoxOption = ref({
   }
   }
 })
 })
 
 
-const excludeCountryLevels = ['PROVINCE','CITY'] //如果从右侧配置选择全中国
+const excludeCountryLevels = ['PROVINCE', 'CITY'] //如果从右侧配置选择全中国
 
 
 const includeCityLevels = ['CITY'] //如果从右侧配置选择省份
 const includeCityLevels = ['CITY'] //如果从右侧配置选择省份
 
 
 //元组 优化if elseif else分支 隐藏返回图标
 //元组 优化if elseif else分支 隐藏返回图标
-const backIconMappingLevels: any[][] =[
+const backIconMappingLevels: levelFunc[][] = [
   [
   [
-    (levelStr:string)=>levelStr===areaEnum.COUNTRY,
-    (level:string)=>excludeCountryLevels.includes(level),
-    ()=>toolBoxOption.value.feature.myFullButton.show=true,
-    ()=>toolBoxOption.value.feature.myFullButton.show=false
+    (levelStr: string) => levelStr === areaEnum.COUNTRY,
+    (level: string) => excludeCountryLevels.includes(level),
+    () => (toolBoxOption.value.feature.myFullButton.show = true),
+    () => (toolBoxOption.value.feature.myFullButton.show = false)
   ],
   ],
   [
   [
-    (levelStr:string)=>levelStr===areaEnum.PROVINCE,
-    (level:string)=>includeCityLevels.includes(level),
-    ()=>toolBoxOption.value.feature.myFullButton.show=true,
-    ()=>toolBoxOption.value.feature.myFullButton.show=false
-  ],
+    (levelStr: string) => levelStr === areaEnum.PROVINCE,
+    (level: string) => includeCityLevels.includes(level),
+    () => (toolBoxOption.value.feature.myFullButton.show = true),
+    () => (toolBoxOption.value.feature.myFullButton.show = false)
+  ]
 ]
 ]
 
 
-
 watch(
 watch(
   () => props.chartConfig.option,
   () => props.chartConfig.option,
-  (newData:optionType) => {
+  (newData: optionType) => {
     const { iconColor, iconDistanceRight, iconDistanceTop, mapRegion } = newData
     const { iconColor, iconDistanceRight, iconDistanceTop, mapRegion } = newData
-    const { saveSelect }=mapRegion
-    const { levelStr }=saveSelect
-    const findBackLevel = backIconMappingLevels.find((backLevelItem: backMapLevel[])=>backLevelItem[0](levelStr)) as backMapLevel[]
-    if(findBackLevel){
-      if(findBackLevel[0]){
+    const { saveSelect } = mapRegion
+    const { levelStr } = saveSelect
+    const findBackLevel = backIconMappingLevels.find((backLevelItem: levelFunc[]) =>
+      backLevelItem[0](levelStr)
+    ) as backMapLevel[]
+    if (findBackLevel) {
+      if (findBackLevel[0]) {
         const findLevel = findBackLevel[1](saveLevelStr.level)
         const findLevel = findBackLevel[1](saveLevelStr.level)
-        if(findLevel)findBackLevel[2]()
+        if (findLevel) findBackLevel[2]()
         else findBackLevel[3]()
         else findBackLevel[3]()
       }
       }
     }
     }
@@ -103,14 +118,14 @@ props.chartConfig.option = {
 //地图点击返回
 //地图点击返回
 const handleBack = async () => {
 const handleBack = async () => {
   stopWatch()
   stopWatch()
-  if (props.chartConfig.option.drillingIn) {
+  if (drillingIn.value) {
     //如果是从右边配置里设置的，比如点击四川省，然后点击返回
     //如果是从右边配置里设置的，比如点击四川省，然后点击返回
     const savePopParent = saveHistoryParent.value.pop()
     const savePopParent = saveHistoryParent.value.pop()
     let saveAdcode = savePopParent?.adcode as string | number
     let saveAdcode = savePopParent?.adcode as string | number
     saveLevelStr.level = savePopParent?.level as string
     saveLevelStr.level = savePopParent?.level as string
     if (!savePopParent) {
     if (!savePopParent) {
-      saveAdcode = getParentAdcode(props.chartConfig.option.mapRegion.adcode)
-      saveLevelStr.level = (regionMapParentArea as Recordable)[props.chartConfig.option.mapRegion.saveSelect.levelStr]
+      saveAdcode = getParentAdcode(mapRegion.value.adcode).adcodeNum
+      saveLevelStr.level = (regionMapParentArea as Recordable)[mapRegion.value.saveSelect.levelStr]
     }
     }
     if (saveAdcode === 0) {
     if (saveAdcode === 0) {
       saveAdcode = 'china'
       saveAdcode = 'china'
@@ -118,50 +133,48 @@ const handleBack = async () => {
     }
     }
     const exist = await getGeojson(saveAdcode)
     const exist = await getGeojson(saveAdcode)
     const adcode = saveAdcode === 100000 ? 'china' : saveAdcode
     const adcode = saveAdcode === 100000 ? 'china' : saveAdcode
-    props.chartConfig.option.saveClickRegion.level = saveLevelStr.level
+    saveClickRegion.value.level = saveLevelStr.level
     if (exist) {
     if (exist) {
-      //fix解决点击下钻返回后页面为空问题
-      props.chartConfig.option.mapRegion.adcode = adcode
+      mapRegion.value.areaName = getParentAdcode(mapRegion.value.adcode).areaName
+      //fix 解决点击下钻返回后页面为空问题
+      mapRegion.value.adcode = adcode
     }
     }
   }
   }
 }
 }
 
 
-//地区上级对应配置
-const regionMapParentArea = {
-  PROVINCE: areaEnum.COUNTRY, //省份的上一级 中国
-  CITY: areaEnum.PROVINCE, //城市的上一级 省份
-  COUNTY: areaEnum.CITY, //县或者区的上一级 城市
-  TOWN: areaEnum.COUNTY //镇的上一级 县或者区
-}
-
 //地图点击
 //地图点击
 const handleMap3DClick = async (params: Recordable) => {
 const handleMap3DClick = async (params: Recordable) => {
-  if (props.chartConfig.option.drillingIn) {
+  if (drillingIn.value) {
     const { name } = params
     const { name } = params
-    saveGeojson.value?.features.forEach((item: Recordable) => {
+    const geoJson = JSON.parse(saveGeojson.value?.geoJson)
+    geoJson?.features.forEach((item: Recordable) => {
       if (item.properties.name === name) {
       if (item.properties.name === name) {
         const level = item.properties.level.toUpperCase()
         const level = item.properties.level.toUpperCase()
         const adcode = item.properties.adcode
         const adcode = item.properties.adcode
+        const areaName = item.properties.name
         if (level === 'DISTRICT') return //下钻暂且不支持地区
         if (level === 'DISTRICT') return //下钻暂且不支持地区
         if (String(adcode).startsWith('15') && level === areaEnum.CITY) return //特殊处理地区码15开头的
         if (String(adcode).startsWith('15') && level === areaEnum.CITY) return //特殊处理地区码15开头的
-        props.chartConfig.option.mapRegion.adcode = adcode
-        props.chartConfig.option.saveClickRegion.level = level
+        mapRegion.value.adcode = adcode
+        mapRegion.value.areaName = areaName
+        saveClickRegion.value.level = level
         saveLevelStr.level = level
         saveLevelStr.level = level
-        handleDataPoint(adcode)
         saveHistoryParent.value.push({
         saveHistoryParent.value.push({
-          adcode: item.properties.parent.adcode,
-          level: (regionMapParentArea as Recordable)[level]
+          adcode: specialTreatmentAnhui.includes(item.properties.name)
+            ? JSON.parse(item.properties.parent)?.adcode
+            : item.properties.parent.adcode,
+          level: (regionMapParentArea as Recordable)[level],
+          areaName: saveGeojson.value.name
         })
         })
       }
       }
     })
     })
   }
   }
 }
 }
 
 
-const saveGeojson: Recordable = ref({}) // 保存geojson
+const saveGeojson: Recordable = ref({}) // 保存一份服务端返回的geojson
 
 
 const chinaDefaultRegionId = ref(100000) //如果是china则adcode为100000
 const chinaDefaultRegionId = ref(100000) //如果是china则adcode为100000
 
 
-const saveLevelStr = reactive<{level:historyParentType["level"]}>({
+const saveLevelStr = reactive<{ level: historyParentType['level'] }>({
   // 地区级别
   // 地区级别
   level: ''
   level: ''
 })
 })
@@ -172,155 +185,194 @@ const saveHistoryParent = ref<historyParentType[]>([])
 const getGeojson = (regionId: number | string) => {
 const getGeojson = (regionId: number | string) => {
   try {
   try {
     return new Promise<boolean>(resolve => {
     return new Promise<boolean>(resolve => {
-      const { levelStr } = props.chartConfig.option.mapRegion.saveSelect //右侧配置项获取的行政级别
+      const { levelStr } = mapRegion.value.saveSelect //右侧配置项获取的行政级别
       getGeoJsonMap(
       getGeoJsonMap(
         regionId === 'china' ? chinaDefaultRegionId.value : regionId,
         regionId === 'china' ? chinaDefaultRegionId.value : regionId,
         !saveLevelStr.level ? levelStr : saveLevelStr.level //没有则获取右侧配置的行政级别
         !saveLevelStr.level ? levelStr : saveLevelStr.level //没有则获取右侧配置的行政级别
       ).then(res => {
       ).then(res => {
-        const { geoJson, name, code, level } = res.data
+        saveGeojson.value = res.data //保存一份服务端返回的数据
+        const { geoJson, name, level, code } = res.data
         const geoJsonFile = JSON.parse(geoJson)
         const geoJsonFile = JSON.parse(geoJson)
         if (!geoJsonFile) return
         if (!geoJsonFile) return
-        saveGeojson.value = geoJsonFile//保存一份服务端返回的geojson
-        const nameChina = name === '中国' ? 'china' : name
-        registerMap(level === areaEnum.COUNTRY ? nameChina : code, { geoJSON: geoJsonFile, specialAreas: {} })
-        show.value = false
+        const nameChina = name === '中国' ? 'china' : name //为中国的话，registerMap第一个必须是china，否则显示不出来
+        /**
+         * 主要注意的点，registerMap中的第一个参数需要和series中的map匹配，否则渲染不出地图，
+         * 比如map: '北京市' echarts.registerMap('北京市', beijingGeoJSON);
+         */
+        registerMap(level === areaEnum.COUNTRY ? nameChina : !mapRegion.value.areaName ? code : name, {
+          geoJSON: geoJsonFile,
+          specialAreas: {}
+        }) //注册geoJSON
         resolve(true)
         resolve(true)
+        show.value = false
+        changeOption.value = true
       })
       })
     })
     })
   } catch (error) {
   } catch (error) {
     show.value = false
     show.value = false
-    console.error('注册地图出错', error)
+    console.error('注册三维地图出错，出错原因->', error)
     //注册出错则注册空的，不然在选择正确的adcode，则视图无法更新
     //注册出错则注册空的，不然在选择正确的adcode，则视图无法更新
-    registerMap(props.chartConfig.option.mapRegion.adcode, { geoJSON: {} as any, specialAreas: {} })
+    registerMap(mapRegion.value.adcode, { geoJSON: {} as any, specialAreas: {} })
   }
   }
 }
 }
 
 
 //异步时先注册空的 保证初始化不报错
 //异步时先注册空的 保证初始化不报错
-registerMap(props.chartConfig.option.mapRegion.adcode, { geoJSON: {} as any, specialAreas: {} })
+registerMap(mapRegion.value.adcode, { geoJSON: {} as any, specialAreas: {} })
 
 
 //传adcode 获取上级
 //传adcode 获取上级
 const getParentAdcode = (adcode: number) => {
 const getParentAdcode = (adcode: number) => {
   let adcodeNum = 100000
   let adcodeNum = 100000
-  saveGeojson.value?.features.forEach((item: Recordable) => {
+  let areaName = ''
+  const geoJson = JSON.parse(saveGeojson.value?.geoJson)
+  geoJson.features.forEach((item: Recordable) => {
     if (item.properties.adcode === adcode) {
     if (item.properties.adcode === adcode) {
       adcodeNum = item.properties.parent.adcode
       adcodeNum = item.properties.parent.adcode
+      areaName = saveGeojson.value.name
     }
     }
   })
   })
-  return adcodeNum
+  return { adcodeNum, areaName }
 }
 }
 
 
-watch(
-  () => w.value,
-  (value: number) => {
-    chartInstance.value.resize({
-      width: value + 'px',
-      height: h.value + 'px'
-    })
-  }
-)
-
-const initMap = async () => {
-  chartInstance.value = echarts.init(map3DRef.value)
+// 初始化三维地图
+const initMap3D = async () => {
+  chartInstance.value = init(map3DRef.value as HTMLElement) as any as Nullable<EChartsType>
   await nextTick()
   await nextTick()
-  await getGeojson(props.chartConfig.option.mapRegion.adcode)
+  await getGeojson(mapRegion.value.adcode)
   await nextTick().then(() => {
   await nextTick().then(() => {
-    handleSetOption(chartInstance.value, props.chartConfig.option)
+    handleRegisterMapNameAndData(mapRegion.value.adcode, dataset.value, 'china')
   })
   })
-  chartInstance.value.on('click', (e: Recordable) => {
+  chartInstance.value?.on('click', (e: Recordable) => {
+    if (!e) return
     handleMap3DClick(e)
     handleMap3DClick(e)
   })
   })
 }
 }
 
 
-// 手动触发渲染
-const handleSetOption = (instance: any, option: Recordable) => {
+onMounted(() => initMap3D())
+
+// 动态注册 series中的map必须和registerMap的第一个参数匹配，否则渲染不出
+const handleRegisterMapNameAndData = (adcode: string | number, data: Recordable, areaName: string) => {
+  geo3D.value.map = !areaName ? adcode : areaName // coordinateSystem使用了geo3D,不能删除这一行
+  series.value.forEach((item: Recordable) => {
+    if (item.type === ThreeMapEnum.MAP3D) {
+      item.map = !areaName ? adcode : areaName
+      item.data = data[ThreeMapEnum.MAP3D]
+    }
+    if (item.type === ThreeMapEnum.BAR3D) {
+      item.data = data[ThreeMapEnum.BAR3D]
+    }
+  })
+}
+
+// 动态触发渲染
+const handleSetOption = (instance: EChartsType, option: Recordable) => {
   if (!instance) return
   if (!instance) return
   try {
   try {
-    instance.clear()
-    instance.setOption(option)
+    instance && instance.clear()
+    instance && instance.setOption(option)
   } catch (error) {
   } catch (error) {
-    console.error('触发渲染出错', error)
+    console.error('动态触发渲染出错，出错原因->', error)
   }
   }
 }
 }
 
 
-onMounted(() => {
-  initMap()
-})
+watch(
+  () => [w.value, h.value],
+  async (newValue: number[]) => {
+    await nextTick()
+    chartInstance.value?.resize({
+      width: newValue.at(-2) + 'px',
+      height: newValue.at(-1) + 'px'
+    } as Recordable)
+  }
+)
 
 
 //处理数据标点
 //处理数据标点
-const handleDataPoint = (newData: string | number) => {
+const handleDataPoint = (newData: string | number, areaName: string) => {
   if (newData === 'china') {
   if (newData === 'china') {
-    props.chartConfig.option.dataset = dataMaps
-    props.chartConfig.option.series.forEach((item: Recordable) => {
-      if (item.type === 'scatter3D') {
-        item.data = dataMaps
-      }
-    })
+    // 全国则展示所有的标点
+    handleRegisterMapNameAndData(newData, dataset.value, 'china')
   } else {
   } else {
-    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)
+    // 展示对应区域的标点
+    series.value.forEach((item: Recordable) => {
+      if (item.type === ThreeMapEnum.MAP3D) {
+        item.map = !areaName ? newData : areaName
+        item.data = dataset.value[ThreeMapEnum.MAP3D].filter((dataItem: dataPointI) => {
+          if (String(dataItem.adcode) === String(!areaName ? newData : areaName)) {
+            return dataItem
+          } else if (dataItem.name === String(!areaName ? newData : areaName)) {
+            return dataItem
+          }
+        })
+        const cloneDeepData = cloneDeep(item.data)
+        cloneDeepData.forEach((item: dataPointI) => {
+          item.name = item.city_name
+        })
+        item.data = cloneDeepData.filter((item: Recordable) => item.name !== null) || []
+      }
+      if (item.type === ThreeMapEnum.BAR3D) {
+        item.data = dataset.value[ThreeMapEnum.BAR3D]
       }
       }
     })
     })
   }
   }
 }
 }
+const changeOption = ref(false)
 
 
-//监听地图展示区域发生变化
+// 监听地图展示区域发生变化
 watch(
 watch(
   () => `${props.chartConfig.option.mapRegion.adcode}`,
   () => `${props.chartConfig.option.mapRegion.adcode}`,
-  async (newData: string | number) => {
+  async (newData: number | string) => {
     try {
     try {
       await getGeojson(newData)
       await getGeojson(newData)
-      props.chartConfig.option.geo3D.map = newData
-      props.chartConfig.option.series.forEach((item: Recordable) => {
+      const { distance} = setScale(String(newData))
+      const option = props.chartConfig.option
+      // 修复缩放
+      const { series,geo3D } = option || {}
+      
+      series?.forEach((item: Recordable) => {
         if (item.type === 'map3D') {
         if (item.type === 'map3D') {
-          item.map = newData
-          item.data = props.chartConfig.option.dataset
+          item.viewControl = {
+            ...item?.viewControl,
+            distance,
+          }
         }
         }
       })
       })
-      handleSetOption(chartInstance.value, props.chartConfig.option)
-      handleDataPoint(newData)
+      handleRegisterMapNameAndData(newData, dataset.value, mapRegion.value.areaName)
+      handleDataPoint(newData, mapRegion.value.areaName)
+      changeOption.value = true
+      handleSetOption(chartInstance.value!, { ...option, series ,geo3D:{...geo3D,viewControl:{distance:distance}}})
     } catch (error) {
     } catch (error) {
-      console.log('展示区域发生变化出错', error)
+      console.error('展示区域发生变化出错，出错原因->', error)
     }
     }
   },
   },
   {
   {
-    immediate: true
+    immediate: true,
+    deep: true
   }
   }
 )
 )
 
 
-// 监听地图右侧配置项变化
+// 实时监听地图右侧配置项变化
 const stopWatch = watch(
 const stopWatch = watch(
   props.chartConfig.option,
   props.chartConfig.option,
   async newData => {
   async newData => {
     try {
     try {
-      handleSetOption(chartInstance.value, newData)
-    } catch (error) {
-      console.log(error)
-    }
-  },
-  {
-    deep: true
-  }
-)
-
-// 监听地图dataset配置项变化
-watch(
-  () => props.chartConfig.option.dataset,
-  newData => {
-    try {
-      props.chartConfig.option.series.forEach((item: Recordable) => {
-        if (item.type === 'map3D') {
-          item.data = newData
-        }
-      })
-      handleSetOption(chartInstance.value, props.chartConfig.option)
+      if (changeOption.value) {
+        // handleSetOption(chartInstance.value!, newData)
+      }
     } catch (error) {
     } catch (error) {
-      console.log(error)
+      console.error('监听地图右侧配置项变化，出错原因->', error)
     }
     }
   },
   },
   {
   {
     deep: true
     deep: true
   }
   }
 )
 )
+watch(()=>props.chartConfig.option.isShowExecute,async()=>{
+  const {adcode,areaName} = props.chartConfig.option.mapRegion || {}
+  handleRegisterMapNameAndData(adcode,dataset.value,mapRegion.value.areaName)
+  handleDataPoint(adcode,areaName)
+
+  const { distance } = setScale(String(adcode))
+  const option = props.chartConfig.option
+  const { series,geo3D } = option || {}
+  handleSetOption(chartInstance.value!, { ...option, series ,geo3D:{...geo3D,viewControl:{distance:distance}}})
+})
 </script>
 </script>

@@ -27,7 +27,6 @@ import { getDeviceActiveTime } from '@/api/external/common/index'
 import dayjs from 'dayjs'
 import dayjs from 'dayjs'
 import DeviceLatestTable from './components/DeviceLatestTable.vue'
 import DeviceLatestTable from './components/DeviceLatestTable.vue'
 import { getDeviceLatest, getProfileAttrs } from '@/api/external/common'
 import { getDeviceLatest, getProfileAttrs } from '@/api/external/common'
-import { NButton } from 'naive-ui'
 
 
 const props = defineProps({
 const props = defineProps({
   chartConfig: {
   chartConfig: {

@@ -15,7 +15,7 @@
         <n-input-number :min="0" v-model:value="optionData.value.min" size="small"></n-input-number>
         <n-input-number :min="0" v-model:value="optionData.value.min" size="small"></n-input-number>
       </SettingItem>
       </SettingItem>
       <setting-item name="最大值">
       <setting-item name="最大值">
-        <n-input-number v-model:value="optionData.value.max" size="small"></n-input-number>
+        <n-input-number v-model:value="optionData.value.max" size="small" :min="100"></n-input-number>
       </setting-item>
       </setting-item>
     </SettingItemBox>
     </SettingItemBox>
     <SettingItemBox name="轨道">
     <SettingItemBox name="轨道">

@@ -3,7 +3,7 @@
     :type="type"
     :type="type"
     :height="h"
     :height="h"
     :processing="processing"
     :processing="processing"
-    :percentage="dataset"
+    :percentage="percentage"
     :indicator-placement="indicatorPlacement"
     :indicator-placement="indicatorPlacement"
     :color="color"
     :color="color"
     :rail-color="railColor"
     :rail-color="railColor"
@@ -21,11 +21,12 @@
 </template>
 </template>
 
 
 <script setup lang="ts">
 <script setup lang="ts">
-import { PropType, toRefs, watch } from 'vue'
+import { PropType, computed, ref, toRefs, watch } from 'vue'
 import { useChartDataFetch } from '@/hooks'
 import { useChartDataFetch } from '@/hooks'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import config from './config'
 import config from './config'
 import { toNumber } from '@/utils'
 import { toNumber } from '@/utils'
+import { unref } from 'vue'
 
 
 const props = defineProps({
 const props = defineProps({
   chartConfig: {
   chartConfig: {
@@ -46,25 +47,38 @@ const {
   indicatorPlacement,
   indicatorPlacement,
   indicatorTextSize,
   indicatorTextSize,
   offsetDegree,
   offsetDegree,
-  dataset
+  dataset,
 } = toRefs(props.chartConfig.option)
 } = toRefs(props.chartConfig.option)
 
 
+const max = computed(()=>{//获取最新的最大值
+  const {value:{max}} = props.chartConfig.option
+  return max
+})
+const percentage = ref<number>(unref(dataset) * (100/max.value))//计算当设置的最大值大于100的时候
 // 手动更新
 // 手动更新
 watch(
 watch(
-  () => props.chartConfig.option.dataset,
-  (newData: any) => {
+  () => {props.chartConfig.option.dataset,props.chartConfig.option.value.max},
+  () => {
     try {
     try {
-      dataset.value = toNumber(newData, 2)
+      if(max.value!==100){
+        const newValue = unref(dataset) * (100/max.value)//计算进度条的位置
+        percentage.value = toNumber(newValue,2)
+      dataset.value = toNumber((unref(dataset)), 2)
+        return
+      }
+      percentage.value = toNumber(unref(dataset), 2)
+      dataset.value = toNumber((unref(dataset)), 2)
     } catch (error) {
     } catch (error) {
       console.log(error)
       console.log(error)
     }
     }
   },
   },
   {
   {
-    deep: false
+    deep: true
   }
   }
 )
 )
 // 预览更新
 // 预览更新
 useChartDataFetch(props.chartConfig, useChartEditStore, (newData: number) => {
 useChartDataFetch(props.chartConfig, useChartEditStore, (newData: number) => {
+  percentage.value = toNumber(newData*(100/max.value), 2)
   dataset.value = toNumber(newData, 2)
   dataset.value = toNumber(newData, 2)
 })
 })
 </script>
 </script>

@@ -8,7 +8,6 @@ export const option = {
   dataset: '',
   dataset: '',
   attribute: {
   attribute: {
     bgColor1:'#00e0db',
     bgColor1:'#00e0db',
-    bgColor2:'#66ffff',
   }
   }
 }
 }
 
 

@@ -8,14 +8,6 @@
         <n-button size="small" @click="optionData.attribute.bgColor1 = '#00e0db'"> 恢复默认 </n-button>
         <n-button size="small" @click="optionData.attribute.bgColor1 = '#00e0db'"> 恢复默认 </n-button>
       </SettingItem>
       </SettingItem>
     </SettingItemBox>
     </SettingItemBox>
-    <SettingItemBox :name="`装饰2`">
-      <SettingItem name="颜色">
-        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor2"></n-color-picker>
-      </SettingItem>
-      <SettingItem>
-        <n-button size="small" @click="optionData.attribute.bgColor2 = '#66ffff'"> 恢复默认 </n-button>
-      </SettingItem>
-    </SettingItemBox>
   </CollapseItem>
   </CollapseItem>
 </template>
 </template>
 
 

@@ -32,7 +32,6 @@
           <path
           <path
             id="矩形"
             id="矩形"
             fill-rule="evenodd"
             fill-rule="evenodd"
-            :style="{fill: attribute.bgColor2}"
             opacity="0"
             opacity="0"
             d="M0 87.26L87.26 87.26L87.26 0L0 0L0 87.26Z"
             d="M0 87.26L87.26 87.26L87.26 0L0 0L0 87.26Z"
           />
           />

+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
+import { Decorates13Config } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
+
+export const option = {
+  dataset: 66,
+  unitStr: '人',
+  grid: {
+    top: 200,
+    bottom: 300
+  },
+  xAxis: {
+    data: [],
+    axisTick: {
+      show: false
+    },
+    axisLine: {
+      show: false
+    }
+  },
+  yAxis: {
+    splitLine: {
+      show: false
+    },
+    axisTick: {
+      show: false
+    },
+    axisLine: {
+      show: false
+    },
+    axisLabel: {
+      show: false
+    }
+  },
+  series: [
+    {
+      name: '',
+      type: 'pictorialBar',
+      symbolSize: [100, 45],
+      symbolOffset: [-10, -20],
+      z: 12,
+      data: [
+        {
+          name: '',
+          value: 66,
+          symbolPosition: 'end',
+          itemStyle: {
+            normal: {
+              color: 'rgba(2, 163, 243,0.5)' //圆柱顶部颜色
+            }
+          }
+        }
+      ]
+    },
+    {
+      name: '',
+      type: 'pictorialBar',
+      symbolSize: [100, 45],
+      symbolOffset: [-10, 24],
+      z: 12,
+      data: [
+        {
+          name: '',
+          value: 66,
+          itemStyle: {
+            normal: {
+              color: 'rgba(2, 163, 243, 1)' //圆柱底部颜色
+            }
+          }
+        }
+      ]
+    },
+    {
+      type: 'bar',
+      barWidth: 100,
+      data: [
+        {
+          name: '',
+          value: 66,
+          label: {
+            normal: {
+              show: true,
+              formatter: '{c}' + '人',
+              position: 'top',
+              textStyle: {
+                color: 'rgba(2, 163, 243, 1)', //柱子对应数值颜色
+                fontSize: 40,
+                fontWeight: 600
+              }
+            }
+          },
+          itemStyle: {
+            normal: {
+              color: {
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                type: 'linear',
+                global: false,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: 'rgba(18, 246, 255, 0)'
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(2, 163, 243, 1)' //底部渐变颜色
+                  }
+                ]
+              }
+            }
+          }
+        }
+      ]
+    },
+    //往上是内部柱状图
+    //往下是外部柱状图
+    {
+      name: '',
+      type: 'pictorialBar',
+      symbolSize: [340, 45],
+      symbolOffset: [-10, -20],
+      z: 12,
+      data: [
+        {
+          name: '',
+          value: '100',
+          symbolPosition: 'end',
+          itemStyle: {
+            normal: {
+              color: 'rgba(0, 255, 136, 0)' //圆柱顶部颜色
+            }
+          }
+        }
+      ]
+    },
+    {
+      name: '',
+      type: 'pictorialBar',
+      symbolSize: [150, 75],
+      symbolOffset: [-10, 41],
+      z: 12,
+      data: [
+        {
+          name: '',
+          value: '100',
+          itemStyle: {
+            normal: {
+              color: 'rgba(2, 163, 243, .1)' //圆柱底部颜色
+            }
+          }
+        }
+      ]
+    },
+    {
+      name: '',
+      type: 'pictorialBar',
+      symbolSize: [150, 75],
+      symbolOffset: [-10, 55],
+      z: 11,
+      data: [
+        {
+          name: '',
+          value: '100',
+          itemStyle: {
+            normal: {
+              color: 'transparent',
+              borderColor: 'rgba(2, 163, 243, 1)', //底部内圆圈颜色
+              borderWidth: 30
+            }
+          }
+        }
+      ]
+    },
+    {
+      name: '',
+      type: 'pictorialBar',
+      symbolSize: [200, 100],
+      symbolOffset: [-10, 62],
+      z: 10,
+      data: [
+        {
+          name: '关井数',
+          value: '100',
+          itemStyle: {
+            normal: {
+              color: 'transparent',
+              borderColor: 'rgba(2, 163, 243, 1)', //底部外圆圈颜色
+              borderType: 'dashed',
+              borderWidth: 2
+            }
+          }
+        }
+      ]
+    },
+    {
+      type: 'bar',
+      silent: true,
+      barWidth: 140,
+      barGap: '-120%',
+      data: [
+        {
+          name: '',
+          value: '100',
+          label: {
+            normal: {
+              show: false
+            }
+          },
+          itemStyle: {
+            normal: {
+              color: {
+                x: 1,
+                y: 1,
+                x2: 1,
+                y2: 0,
+                type: 'linear',
+                global: false,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: 'rgba(0, 255, 136, 0)'
+                  },
+                  {
+                    offset: 0.3,
+                    color: 'rgba(0, 255, 136, .1)'
+                  },
+                  {
+                    offset: 0.5,
+                    color: 'rgba(0, 255, 136, .1)'
+                  },
+                  {
+                    offset: 0.8,
+                    color: 'rgba(0, 255, 136, .1)'
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(0, 255, 136, 0)' //底部渐变颜色
+                  }
+                ]
+              }
+            }
+          }
+        }
+      ]
+    }
+  ]
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = Decorates13Config.key
+  public chartConfig = cloneDeep(Decorates13Config)
+  // 图表配置项
+  public option = echartOptionProfixHandle(option, includes)
+}

+<template>
+  <!-- Echarts 全局设置 -->
+  <global-setting :optionData="optionData"></global-setting>
+  <CollapseItem name="配置" :expanded="true">
+    <setting-item-box name="数据点配置">
+      <setting-item name="数据">
+        <n-input-number v-model:value="optionData.dataset"></n-input-number>
+      </setting-item>
+      <setting-item name="单位">
+        <n-input v-model:value="optionData.unitStr"></n-input>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="grid配置">
+      <setting-item name="顶部">
+        <n-input-number v-model:value="optionData.grid.top"></n-input-number>
+      </setting-item>
+      <setting-item name="底部">
+        <n-input-number v-model:value="optionData.grid.bottom"></n-input-number>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="内部圆柱">
+      <setting-item name="顶部颜色">
+        <n-color-picker size="small" v-model:value="seriesList[0].data[0].itemStyle.normal.color"></n-color-picker>
+      </setting-item>
+      <setting-item name="底部颜色">
+        <n-color-picker size="small" v-model:value="seriesList[1].data[0].itemStyle.normal.color"></n-color-picker>
+      </setting-item>
+      <setting-item name="数字颜色">
+        <n-color-picker
+          size="small"
+          v-model:value="seriesList[2].data[0].label.normal.textStyle.color"
+        ></n-color-picker>
+      </setting-item>
+      <setting-item name="底部渐变色1">
+        <n-color-picker
+          size="small"
+          v-model:value="seriesList[2].data[0].itemStyle.normal.color.colorStops[0].color"
+        ></n-color-picker>
+      </setting-item>
+      <setting-item name="底部渐变色1">
+        <n-color-picker
+          size="small"
+          v-model:value="seriesList[2].data[0].itemStyle.normal.color.colorStops[1].color"
+        ></n-color-picker>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="外部圆柱">
+      <setting-item name="顶部颜色">
+        <n-color-picker size="small" v-model:value="seriesList[3].data[0].itemStyle.normal.color"></n-color-picker>
+      </setting-item>
+      <setting-item name="底部颜色">
+        <n-color-picker size="small" v-model:value="seriesList[4].data[0].itemStyle.normal.color"></n-color-picker>
+      </setting-item>
+      <setting-item name="底部内圆圈颜色">
+        <n-color-picker
+          size="small"
+          v-model:value="seriesList[5].data[0].itemStyle.normal.borderColor"
+        ></n-color-picker>
+      </setting-item>
+      <setting-item name="底部外圆圈颜色">
+        <n-color-picker
+          size="small"
+          v-model:value="seriesList[6].data[0].itemStyle.normal.borderColor"
+        ></n-color-picker>
+      </setting-item>
+      <setting-item name="底部渐变色1">
+        <n-color-picker
+          size="small"
+          v-model:value="seriesList[7].data[0].itemStyle.normal.color.colorStops[0].color"
+        ></n-color-picker>
+      </setting-item>
+      <setting-item name="底部渐变色2">
+        <n-color-picker
+          size="small"
+          v-model:value="seriesList[7].data[0].itemStyle.normal.color.colorStops[1].color"
+        ></n-color-picker>
+      </setting-item>
+      <setting-item name="底部渐变色3">
+        <n-color-picker
+          size="small"
+          v-model:value="seriesList[7].data[0].itemStyle.normal.color.colorStops[2].color"
+        ></n-color-picker>
+      </setting-item>
+      <setting-item name="底部渐变色4">
+        <n-color-picker
+          size="small"
+          v-model:value="seriesList[7].data[0].itemStyle.normal.color.colorStops[3].color"
+        ></n-color-picker>
+      </setting-item>
+      <setting-item name="底部渐变色5">
+        <n-color-picker
+          size="small"
+          v-model:value="seriesList[7].data[0].itemStyle.normal.color.colorStops[4].color"
+        ></n-color-picker>
+      </setting-item>
+    </setting-item-box>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType, computed } from 'vue'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
+import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<GlobalThemeJsonType> & PropType<any>,
+    required: true
+  }
+})
+
+const seriesList = computed(() => {
+  return props.optionData.series
+})
+</script>

+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { useWidgetKey } from '@/packages/external/useWidgetKey'
+
+const { key, chartKey, conKey } = useWidgetKey('Decorates13',true)
+
+export const Decorates13Config: ConfigType = {
+    key,
+    chartKey,
+    conKey,
+    title: '装饰13',
+    category: ChatCategoryEnum.DECORATE,
+    categoryName: ChatCategoryEnumName.DECORATE,
+    package: PackagesCategoryEnum.DECORATES,
+    chartFrame: ChartFrameEnum.COMMON,
+    image: 'decorates_13.png',
+}

+<template>
+  <v-chart :theme="themeColor" :init-options="initOptions" :option="option.value" autoresize> </v-chart>
+</template>
+
+<script setup lang="ts">
+import { PropType, watch, reactive } from 'vue'
+import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { LineChart } from 'echarts/charts'
+import config, { includes } from './config'
+import { mergeTheme } from '@/packages/public/chart'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useChartDataFetch } from '@/hooks'
+import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
+
+const props = defineProps({
+  themeSetting: {
+    type: Object,
+    required: true
+  },
+  themeColor: {
+    type: Object,
+    required: true
+  },
+  chartConfig: {
+    type: Object as PropType<config>,
+    required: true
+  }
+})
+
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
+use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
+
+const option = reactive({
+  value: {}
+})
+
+const dataHandle = (newData: number) => {
+  let config = props.chartConfig.option
+  config.series[2].data[0].value = newData
+  config.series[2].data[0].label.normal.formatter = '{c}' + config.unitStr
+  option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+  option.value = { ...props.chartConfig.option, ...config }
+}
+
+// 配置时
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData: number) => {
+    try {
+      dataHandle(newData)
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  {
+    immediate: true,
+  }
+)
+// 预览时
+useChartDataFetch(props.chartConfig, useChartEditStore, (resData: number) => {
+  // @ts-ignore
+  option.value.series[2].data[0].value = resData
+})
+</script>

+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
+import { Decorates14Config } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
+
+const ydata = ['A2'] //y轴
+
+export const option = {
+  dataset: 60,
+  backgroundColor: 'rgba(0,0,0,1)',
+  grid: {
+    left: '10%',
+    top: 10,
+    bottom: 10
+  },
+  tooltip: {
+    show: false
+  },
+  xAxis: {
+    max: 100,
+    splitLine: {
+      show: false
+    },
+    axisLine: {
+      show: false
+    },
+    axisLabel: {
+      show: false
+    },
+    axisTick: {
+      show: false
+    }
+  },
+  yAxis: [
+    {
+      type: 'category',
+      inverse: false,
+      data: ydata,
+      axisLine: {
+        show: false
+      },
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        show: false
+      }
+    }
+  ],
+  series: [
+    {
+      //内
+      type: 'bar',
+      barWidth: 60,
+      legendHoverLink: false,
+      silent: true,
+      itemStyle: {
+        color: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 1,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: 'rgba(156,224,99,1)' // 0% 处的颜色
+            },
+            {
+              offset: 1,
+              color: 'rgba(12,245,243,1)' // 100% 处的颜色
+            }
+          ],
+          globalCoord: false // 缺省为 false
+        } //底色
+      },
+      label: {
+        normal: {
+          show: true,
+          textStyle: {
+            color: '#fff',
+            fontSize: 20
+          },
+          position: 'right',
+          formatter: function (params: Recordable) {
+            return '{white|' + params.value + '}'
+          },
+          verticalAlign: 'bottom',
+          rich: {
+            white: {
+              // backgroundColor: {
+              //   image:
+              //     'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAAZCAYAAAB6v90+AAAA2klEQVRYhe2YMUoDQRhG32zAwsKkyRGCHmE9hE3uuSkNSqogaOEBcgzXDVg+i2xhEdKYn2GWefDX33vlDCjoCu3QHrXQ68eGFUpC74EPYME0+ALahHbAOrfNldkktAfucptcmWNCzW0RQZNbIIoaVho1rDRqWGnUsNKoYaUx6bDv3BIBHBtgl9sigNeEPgDvTOsF/dgAB6AFNsCQVel/DJwaWuDA+JkTcTfo9sLnS4fOwvYDw0Bv0f2ZqJcxPG47OAx0jn7+iXobg0N306kunCXwDPwAT0AfPfgLAvYRIEVmrDQAAAAASUVORK5CYII='
+              // },
+              padding: [5, 0, 5, 5],
+              align: 'center',
+              fontSize: 16,
+              color: 'black'
+            }
+          }
+        }
+      },
+      data: [60],
+      z: 100
+    },
+    {
+      //外
+      type: 'bar',
+      barWidth: 61,
+      barGap: '-100%',
+      label: {
+        normal: {
+          show: false
+        }
+      },
+      legendHoverLink: false,
+      silent: true,
+      data: [100],
+      itemStyle: {
+        color: 'rgba(45, 46, 48,0.5)',
+        borderWidth: 1,
+        borderColor: '#fff'
+      },
+      z: 98
+    },
+    {
+      //分隔
+      type: 'pictorialBar',
+      animationDuration: 0,
+      itemStyle: {
+        color: 'rgba(0,0,0,0.7)'
+      },
+      symbolRepeat: 'fixed',
+      symbolMargin: '8',
+      symbol: 'rect',
+      symbolClip: true,
+      symbolSize: [4, 60],
+      symbolPosition: 'start',
+      symbolOffset: [0, 0],
+      data: [60],
+      z: 101
+    }
+  ]
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = Decorates14Config.key
+  public chartConfig = cloneDeep(Decorates14Config)
+  // 图表配置项
+  public option = echartOptionProfixHandle(option, includes)
+}

+<template>
+  <!-- Echarts 全局设置 -->
+  <global-setting :optionData="optionData"></global-setting>
+  <CollapseItem name="配置" :expanded="true">
+    <setting-item-box name="数据点配置">
+      <setting-item name="数据">
+        <n-input-number v-model:value="optionData.dataset"></n-input-number>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="grid配置">
+      <setting-item name="顶部">
+        <n-input-number v-model:value="optionData.grid.top"></n-input-number>
+      </setting-item>
+      <setting-item name="底部">
+        <n-input-number v-model:value="optionData.grid.bottom"></n-input-number>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="内外bar和中间分隔高度">
+      <setting-item name="内">
+        <n-input-number v-model:value="seriesList[0].barWidth"></n-input-number>
+      </setting-item>
+      <setting-item name="外">
+        <n-input-number v-model:value="seriesList[1].barWidth"></n-input-number>
+      </setting-item>
+      <setting-item name="分隔">
+        <n-input-number v-model:value="seriesList[2].symbolSize[1]"></n-input-number>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="数值">
+      <setting-item name="颜色">
+        <n-color-picker v-model:value="seriesList[0].label.normal.rich.white.color"></n-color-picker>
+      </setting-item>
+      <setting-item name="大小">
+        <n-input-number v-model:value="seriesList[0].label.normal.rich.white.fontSize"></n-input-number>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="内部bar">
+      <setting-item name="渐变色1">
+        <n-color-picker size="small" v-model:value="seriesList[0].itemStyle.color.colorStops[0].color"></n-color-picker>
+      </setting-item>
+      <setting-item name="渐变色2">
+        <n-color-picker size="small" v-model:value="seriesList[0].itemStyle.color.colorStops[1].color"></n-color-picker>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="外部bar">
+      <setting-item name="颜色">
+        <n-color-picker size="small" v-model:value="seriesList[1].itemStyle.color"></n-color-picker>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="分隔">
+      <setting-item name="颜色">
+        <n-color-picker size="small" v-model:value="seriesList[2].itemStyle.color"></n-color-picker>
+      </setting-item>
+    </setting-item-box>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType, computed } from 'vue'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
+import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<GlobalThemeJsonType> & PropType<any>,
+    required: true
+  }
+})
+
+const seriesList = computed(() => {
+  return props.optionData.series
+})
+</script>

+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { useWidgetKey } from '@/packages/external/useWidgetKey'
+
+const { key, chartKey, conKey } = useWidgetKey('Decorates14',true)
+
+export const Decorates14Config: ConfigType = {
+    key,
+    chartKey,
+    conKey,
+    title: '装饰14',
+    category: ChatCategoryEnum.DECORATE,
+    categoryName: ChatCategoryEnumName.DECORATE,
+    package: PackagesCategoryEnum.DECORATES,
+    chartFrame: ChartFrameEnum.COMMON,
+    image: 'decorates14.png',
+}

+<template>
+  <v-chart :theme="themeColor" :init-options="initOptions" :option="option.value" autoresize> </v-chart>
+</template>
+
+<script setup lang="ts">
+import { PropType, watch, reactive, 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 { LineChart } from 'echarts/charts'
+import config, { includes } from './config'
+import { mergeTheme } from '@/packages/public/chart'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useChartDataFetch } from '@/hooks'
+import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
+
+const props = defineProps({
+  themeSetting: {
+    type: Object,
+    required: true
+  },
+  themeColor: {
+    type: Object,
+    required: true
+  },
+  chartConfig: {
+    type: Object as PropType<config>,
+    required: true
+  }
+})
+
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
+use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
+
+const option = reactive<{ value: Recordable }>({
+  value: {}
+})
+
+onMounted(() => {
+  option.value = { ...props.chartConfig.option }
+})
+
+const dataHandle = (newData: number) => {
+  let config = props.chartConfig.option
+  config.series[0].data = [newData]
+  config.series[2].data = [newData]
+  option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+  option.value = { ...props.chartConfig.option, ...config }
+}
+
+// 配置时
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData: number) => {
+    try {
+      dataHandle(newData)
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  {
+    immediate: true
+  }
+)
+// 预览时
+useChartDataFetch(props.chartConfig, useChartEditStore, (resData: number) => {
+  option.value.series[0].data = [resData]
+  option.value.series[2].data = [resData]
+})
+</script>

+import { PublicConfigClass } from '@/packages/public'
+import { Decorates15Config } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
+import { chartInitConfig } from '@/settings/designSetting'
+export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
+
+export const option = {
+  styleConfig: {
+    scale: 1
+  }
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = Decorates15Config.key
+  public attr = { ...chartInitConfig, w: 300, h: 300, zIndex: -1 }
+  public chartConfig = cloneDeep(Decorates15Config)
+  public option = cloneDeep(option)
+}

+<template>
+  <!-- Echarts 全局设置 -->
+  <global-setting :optionData="optionData"></global-setting>
+  <CollapseItem name="配置" :expanded="true">
+    <setting-item-box name="样式配置">
+      <setting-item name="缩放">
+        <n-input-number :min="0" v-model:value="optionData.styleConfig.scale"></n-input-number>
+      </setting-item>
+    </setting-item-box>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { option } from './config'
+import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+
+defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+</script>

+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { useWidgetKey } from '@/packages/external/useWidgetKey'
+
+const { key, chartKey, conKey } = useWidgetKey('Decorates15',true)
+
+export const Decorates15Config: ConfigType = {
+    key,
+    chartKey,
+    conKey,
+    title: '装饰15',
+    category: ChatCategoryEnum.DECORATE,
+    categoryName: ChatCategoryEnumName.DECORATE,
+    package: PackagesCategoryEnum.DECORATES,
+    chartFrame: ChartFrameEnum.COMMON,
+    image: 'decorates15.png',
+}

+<template>
+  <div style="position: fixed" :style="{ width: `${w}px`, height: `${h}px` }">
+    <div :style="{ transform: `scale(${styleConfig.scale})` }" class="arc_reactor">
+      <div class="case_container">
+        <div class="e7">
+          <div class="semi_arc_3 e5_1">
+            <div class="semi_arc_3 e5_2">
+              <div class="semi_arc_3 e5_3">
+                <div class="semi_arc_3 e5_4"></div>
+              </div>
+            </div>
+          </div>
+          <div class="core2"></div>
+        </div>
+        <ul class="marks">
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs, watch } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { option } from './config'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType & typeof option>,
+    required: true
+  }
+})
+const { w, h } = toRefs(props.chartConfig.attr)
+
+const { styleConfig } = toRefs(props.chartConfig.option)
+
+watch(
+  () => styleConfig.value,
+  (newValue: Recordable) => {
+    styleConfig.value.scale = newValue.scale
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+</script>
+
+<style scoped>
+body {
+  color: #02feff;
+  overflow: hidden;
+}
+
+.core2 {
+  background: #cedce0;
+  width: 100px;
+  height: 100px;
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  border-radius: 50%;
+  border: 10px rgba(2, 255, 255, 0.15) solid;
+  animation: flicker2 0.2s infinite;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 40px;
+}
+
+.big_core {
+  background: #cedce0;
+  width: 200px;
+  height: 200px;
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  border-radius: 50%;
+  border: 10px rgba(2, 255, 255, 0.15) solid;
+  animation: big_flicker 0.2s infinite;
+}
+
+.c_ease {
+  animation: colour_ease 3s infinite ease-in-out;
+}
+
+.counterspin5 {
+  animation: rotate_anti 5s linear infinite;
+}
+
+.counterspin4 {
+  animation: rotate_anti 4s linear infinite;
+}
+
+.semi_arc {
+  width: 100px;
+  height: 100px;
+  border: 6px solid #02feff;
+  background: rgba(2, 254, 255, 0.2);
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  border-radius: 50%;
+  transform: rotateZ(0deg);
+  transition: box-shadow 3s ease;
+  text-align: center;
+  line-height: 100px;
+}
+
+.semi_arc:hover {
+  box-shadow: 0px 0px 30px rgba(2, 254, 255, 0.8);
+  transition: 0.3s;
+}
+
+.semi_arc_2 {
+  content: '';
+  position: absolute;
+  width: 94%;
+  height: 94%;
+  left: 3%;
+  top: 3%;
+  border: 5px solid #02feff;
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  border-radius: 50%;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  animation: rotate 4s linear infinite;
+  text-align: center;
+  line-height: 129px;
+}
+
+.semi_arc_2:after {
+  content: '';
+  position: absolute;
+  width: 94%;
+  height: 94%;
+  left: 3%;
+  top: 3%;
+  border: 4px solid #02feff;
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  border-radius: 50%;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  animation: rotate_anti 2s linear infinite;
+}
+
+.semi_arc_3 {
+  content: '';
+  position: absolute;
+  width: 94%;
+  height: 94%;
+  left: 3%;
+  top: 3%;
+  border: 5px solid #02feff;
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  border-radius: 50%;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  animation: rotate 4s linear infinite;
+  text-align: center;
+  line-height: 129px;
+}
+
+.arc {
+  width: 100px;
+  height: 100px;
+  border: 6px solid #02feff;
+  background: rgba(2, 254, 255, 0.2);
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  border-radius: 50%;
+  -moz-transform: rotateY(-30deg) translateZ(-200px);
+  -ms-transform: rotateY(-30deg) translateZ(-200px);
+  -webkit-transform: rotateY(-30deg) translateZ(-200px);
+  transform: rotateY(-30deg) translateZ(-200px);
+  transform: rotateZ(0deg);
+  transition: box-shadow 3s ease;
+  text-align: center;
+  line-height: 100px;
+}
+
+.arc:hover {
+  box-shadow: 0px 0px 30px rgba(2, 254, 255, 0.8);
+  transition: 0.3s;
+}
+
+.arc:after {
+  content: '';
+  position: absolute;
+  width: 94%;
+  height: 94%;
+  left: 3%;
+  top: 3%;
+  border: 4px solid #02feff;
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  border-radius: 50%;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  animation: rotate 4s linear infinite;
+}
+
+.e1:after {
+  border-color: rgba(2, 255, 255, 0.6);
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+}
+
+.e2:after {
+  border-color: rgba(2, 255, 255, 0.6);
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-bottom: 5px solid transparent;
+}
+
+.e3 {
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  animation: rotate 5s linear infinite;
+}
+
+.e3:after {
+  border-color: rgba(2, 255, 255, 0.6);
+  border-top: 5px solid transparent;
+  border-bottom: 5px solid transparent;
+}
+
+.e4 {
+  width: 150px;
+  height: 150px;
+}
+
+.e4_1 {
+  border-color: rgba(2, 255, 255, 0.3);
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+}
+
+.e4_1:after {
+  border-color: rgba(2, 255, 255, 0.6);
+  border-top: 4px solid transparent;
+  border-bottom: 4px solid transparent;
+}
+
+.e5 {
+  width: 200px;
+  height: 200px;
+}
+
+.e5_1 {
+  color: rgba(2, 255, 255, 0.15);
+  border: 2px solid;
+  border-left: 2px solid transparent;
+  animation: rotate 5s linear infinite;
+}
+
+.e5_2 {
+  color: rgba(2, 255, 255, 0.7);
+  border: 4px solid;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  animation: rotate_anti 4s linear infinite;
+}
+
+.e5_3 {
+  color: rgba(2, 255, 255, 0.5);
+  border: 2px solid;
+  border-left: 2px solid transparent;
+  border-right: 2px solid transparent;
+  animation: rotate 3s linear infinite;
+}
+
+.e5_4 {
+  color: rgba(2, 255, 255, 0.15);
+  border: 4px solid;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-bottom: 4px solid transparent;
+  animation: rotate_anti 2s linear infinite;
+}
+
+.e6 {
+  border-color: transparent;
+  background: rgba(255, 255, 255, 0);
+  width: 200px;
+  height: 200px;
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotateZ(0deg);
+  }
+  100% {
+    transform: rotateZ(360deg);
+  }
+}
+@keyframes rotate_anti {
+  0% {
+    transform: rotateZ(360deg);
+  }
+  100% {
+    transform: rotateZ(0deg);
+  }
+}
+@keyframes colour_ease {
+  0% {
+    border-color: #02feff;
+  }
+  50% {
+    border-color: rgba(2, 254, 255, 0.5);
+  }
+  100% {
+    border-color: #02feff;
+  }
+}
+@keyframes flicker {
+  0% {
+    box-shadow: 0px 0px 16px 8px rgba(150, 255, 255, 0.5), inset 0px 1px 4px 2px rgba(21, 211, 233, 0.3);
+  }
+  40% {
+    box-shadow: 0px 0px 16px 8px rgba(150, 255, 255, 0.5), inset 0px 1px 4px 2px rgba(21, 211, 233, 0.3);
+  }
+  50% {
+    box-shadow: 0px 0px 16px 6px rgba(150, 255, 255, 0.5), inset 0px 1px 100px 2px rgba(21, 211, 233, 0.3);
+  }
+  60% {
+    box-shadow: 0px 0px 16px 8px rgba(150, 255, 255, 0.5), inset 0px 1px 4px 2px rgba(21, 211, 233, 0.3);
+  }
+  100% {
+    box-shadow: 0px 0px 16px 8px rgba(150, 255, 255, 0.5), inset 0px 1px 4px 2px rgba(21, 211, 233, 0.3);
+  }
+}
+@keyframes flicker2 {
+  0% {
+    box-shadow: 0px 0px 60px 25px rgba(150, 255, 255, 0.5), inset 0px 1px 4px 2px rgba(21, 211, 233, 0.3);
+  }
+  40% {
+    box-shadow: 0px 0px 60px 25px rgba(150, 255, 255, 0.5), inset 0px 1px 4px 2px rgba(21, 211, 233, 0.3);
+  }
+  50% {
+    box-shadow: 0px 0px 50px 17px rgba(150, 255, 255, 0.5), inset 0px 1px 100px 2px rgba(21, 211, 233, 0.3);
+  }
+  60% {
+    box-shadow: 0px 0px 60px 25px rgba(150, 255, 255, 0.5), inset 0px 1px 4px 2px rgba(21, 211, 233, 0.3);
+  }
+  100% {
+    box-shadow: 0px 0px 60px 25px rgba(150, 255, 255, 0.5), inset 0px 1px 4px 2px rgba(21, 211, 233, 0.3);
+  }
+}
+@keyframes big_flicker {
+  0% {
+    box-shadow: 0px 0px 40px 20px rgba(150, 255, 255, 0.5), inset 0px 1px 30px 15px rgba(21, 211, 233, 0.3);
+  }
+  40% {
+    box-shadow: 0px 0px 40px 20px rgba(150, 255, 255, 0.5), inset 0px 1px 30px 15px rgba(21, 211, 233, 0.3);
+  }
+  50% {
+    box-shadow: 0px 0px 35px 17px rgba(150, 255, 255, 0.5), inset 0px 1px 50px 40px rgba(21, 211, 233, 0.3);
+  }
+  60% {
+    box-shadow: 0px 0px 40px 20px rgba(150, 255, 255, 0.5), inset 0px 1px 30px 15px rgba(21, 211, 233, 0.3);
+  }
+  100% {
+    box-shadow: 0px 0px 40px 20px rgba(150, 255, 255, 0.5), inset 0px 1px 30px 15px rgba(21, 211, 233, 0.3);
+  }
+}
+html,
+body {
+  height: 100%;
+}
+
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.arc_reactor {
+  position: relative;
+  top: 50%;
+  margin-top: -125px;
+  margin-left: auto;
+  margin-right: auto;
+  width: 250px;
+  height: 250px;
+  border-radius: 50%;
+  box-shadow: 0px 0px 50px 15px rgba(2, 255, 255, 0.3), inset 0px 0px 50px 15px rgba(2, 255, 255, 0.3);
+}
+
+.core2 {
+  background: #cedce0;
+  width: 110px;
+  height: 110px;
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  border-radius: 50%;
+  border: 5px solid rgba(2, 255, 255, 0.15);
+  animation: flicker2 0.2s infinite;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 40px;
+}
+
+.e7 {
+  width: 95.25%;
+  height: 95.25%;
+  left: 2.5475%;
+  right: 2.5475%;
+  border: 6px solid transparent;
+  background: transparent;
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  border-radius: 50%;
+  transform: rotateZ(0deg);
+  transition: box-shadow 3s ease;
+  text-align: center;
+  line-height: 100px;
+}
+
+.case_container {
+  width: 210px;
+  height: 210px;
+  border-radius: 50%;
+  position: absolute;
+  margin-left: 20px;
+  margin-top: 20px;
+}
+
+.marks li {
+  display: block;
+  width: 3px;
+  height: 11px;
+  background: rgba(2, 254, 255, 0.8);
+  position: absolute;
+  margin-left: 105px;
+  margin-top: -110px;
+  animation: colour_ease2 3s infinite ease-in-out;
+}
+
+@keyframes colour_ease2 {
+  0% {
+    background: #02feff;
+  }
+  50% {
+    background: rgba(2, 254, 255, 0.3);
+  }
+  100% {
+    background: #02feff;
+  }
+}
+.marks li:first-child {
+  transform: rotate(6deg) translateY(125px);
+}
+
+.marks li:nth-child(2) {
+  transform: rotate(12deg) translateY(125px);
+}
+
+.marks li:nth-child(3) {
+  transform: rotate(18deg) translateY(125px);
+}
+
+.marks li:nth-child(4) {
+  transform: rotate(24deg) translateY(125px);
+}
+
+.marks li:nth-child(5) {
+  transform: rotate(30deg) translateY(125px);
+}
+
+.marks li:nth-child(6) {
+  transform: rotate(36deg) translateY(125px);
+}
+
+.marks li:nth-child(7) {
+  transform: rotate(42deg) translateY(125px);
+}
+
+.marks li:nth-child(8) {
+  transform: rotate(48deg) translateY(125px);
+}
+
+.marks li:nth-child(9) {
+  transform: rotate(54deg) translateY(125px);
+}
+
+.marks li:nth-child(10) {
+  transform: rotate(60deg) translateY(125px);
+}
+
+.marks li:nth-child(11) {
+  transform: rotate(66deg) translateY(125px);
+}
+
+.marks li:nth-child(12) {
+  transform: rotate(72deg) translateY(125px);
+}
+
+.marks li:nth-child(13) {
+  transform: rotate(78deg) translateY(125px);
+}
+
+.marks li:nth-child(14) {
+  transform: rotate(84deg) translateY(125px);
+}
+
+.marks li:nth-child(15) {
+  transform: rotate(90deg) translateY(125px);
+}
+
+.marks li:nth-child(16) {
+  transform: rotate(96deg) translateY(125px);
+}
+
+.marks li:nth-child(17) {
+  transform: rotate(102deg) translateY(125px);
+}
+
+.marks li:nth-child(18) {
+  transform: rotate(108deg) translateY(125px);
+}
+
+.marks li:nth-child(19) {
+  transform: rotate(114deg) translateY(125px);
+}
+
+.marks li:nth-child(20) {
+  transform: rotate(120deg) translateY(125px);
+}
+
+.marks li:nth-child(21) {
+  transform: rotate(126deg) translateY(125px);
+}
+
+.marks li:nth-child(22) {
+  transform: rotate(132deg) translateY(125px);
+}
+
+.marks li:nth-child(23) {
+  transform: rotate(138deg) translateY(125px);
+}
+
+.marks li:nth-child(24) {
+  transform: rotate(144deg) translateY(125px);
+}
+
+.marks li:nth-child(25) {
+  transform: rotate(150deg) translateY(125px);
+}
+
+.marks li:nth-child(26) {
+  transform: rotate(156deg) translateY(125px);
+}
+
+.marks li:nth-child(27) {
+  transform: rotate(162deg) translateY(125px);
+}
+
+.marks li:nth-child(28) {
+  transform: rotate(168deg) translateY(125px);
+}
+
+.marks li:nth-child(29) {
+  transform: rotate(174deg) translateY(125px);
+}
+
+.marks li:nth-child(30) {
+  transform: rotate(180deg) translateY(125px);
+}
+
+.marks li:nth-child(31) {
+  transform: rotate(186deg) translateY(125px);
+}
+
+.marks li:nth-child(32) {
+  transform: rotate(192deg) translateY(125px);
+}
+
+.marks li:nth-child(33) {
+  transform: rotate(198deg) translateY(125px);
+}
+
+.marks li:nth-child(34) {
+  transform: rotate(204deg) translateY(125px);
+}
+
+.marks li:nth-child(35) {
+  transform: rotate(210deg) translateY(125px);
+}
+
+.marks li:nth-child(36) {
+  transform: rotate(216deg) translateY(125px);
+}
+
+.marks li:nth-child(37) {
+  transform: rotate(222deg) translateY(125px);
+}
+
+.marks li:nth-child(38) {
+  transform: rotate(228deg) translateY(125px);
+}
+
+.marks li:nth-child(39) {
+  transform: rotate(234deg) translateY(125px);
+}
+
+.marks li:nth-child(40) {
+  transform: rotate(240deg) translateY(125px);
+}
+
+.marks li:nth-child(41) {
+  transform: rotate(246deg) translateY(125px);
+}
+
+.marks li:nth-child(42) {
+  transform: rotate(252deg) translateY(125px);
+}
+
+.marks li:nth-child(43) {
+  transform: rotate(258deg) translateY(125px);
+}
+
+.marks li:nth-child(44) {
+  transform: rotate(264deg) translateY(125px);
+}
+
+.marks li:nth-child(45) {
+  transform: rotate(270deg) translateY(125px);
+}
+
+.marks li:nth-child(46) {
+  transform: rotate(276deg) translateY(125px);
+}
+
+.marks li:nth-child(47) {
+  transform: rotate(282deg) translateY(125px);
+}
+
+.marks li:nth-child(48) {
+  transform: rotate(288deg) translateY(125px);
+}
+
+.marks li:nth-child(49) {
+  transform: rotate(294deg) translateY(125px);
+}
+
+.marks li:nth-child(50) {
+  transform: rotate(300deg) translateY(125px);
+}
+
+.marks li:nth-child(51) {
+  transform: rotate(306deg) translateY(125px);
+}
+
+.marks li:nth-child(52) {
+  transform: rotate(312deg) translateY(125px);
+}
+
+.marks li:nth-child(53) {
+  transform: rotate(318deg) translateY(125px);
+}
+
+.marks li:nth-child(54) {
+  transform: rotate(324deg) translateY(125px);
+}
+
+.marks li:nth-child(55) {
+  transform: rotate(330deg) translateY(125px);
+}
+
+.marks li:nth-child(56) {
+  transform: rotate(336deg) translateY(125px);
+}
+
+.marks li:nth-child(57) {
+  transform: rotate(342deg) translateY(125px);
+}
+
+.marks li:nth-child(58) {
+  transform: rotate(348deg) translateY(125px);
+}
+
+.marks li:nth-child(59) {
+  transform: rotate(354deg) translateY(125px);
+}
+
+.marks li:nth-child(60) {
+  transform: rotate(360deg) translateY(125px);
+}
+</style>

+import { PublicConfigClass } from '@/packages/public'
+import { Decorates16Config } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
+import { chartInitConfig } from '@/settings/designSetting'
+export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
+
+export const option = {
+  dataset: 20,
+  unit: '台',
+  mainCicleColor: '#03A6E0CC',
+  subCicleColor: '#03A6E07F',
+  textColor:'green'
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = Decorates16Config.key
+  public attr = { ...chartInitConfig, w: 150, h: 120, zIndex: -1 }
+  public chartConfig = cloneDeep(Decorates16Config)
+  public option = cloneDeep(option)
+}

+<template>
+  <!-- Echarts 全局设置 -->
+  <global-setting :optionData="optionData"></global-setting>
+  <CollapseItem name="配置" :expanded="true">
+    <setting-item-box name="数据">
+      <setting-item name="数据源">
+        <n-input-number :min="0" v-model:value="optionData.dataset"></n-input-number>
+      </setting-item>
+      <setting-item name="单位">
+        <n-input v-model:value="optionData.unit"></n-input>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="颜色">
+      <setting-item name="颜色1">
+        <n-color-picker v-model:value="optionData.mainCicleColor"></n-color-picker>
+      </setting-item>
+      <setting-item name="颜色2">
+        <n-color-picker v-model:value="optionData.subCicleColor"></n-color-picker>
+      </setting-item>
+      <setting-item name="文字颜色">
+        <n-color-picker v-model:value="optionData.textColor"></n-color-picker>
+      </setting-item>
+    </setting-item-box>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { option } from './config'
+import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+
+defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+</script>

+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { useWidgetKey } from '@/packages/external/useWidgetKey'
+
+const { key, chartKey, conKey } = useWidgetKey('Decorates16',true)
+
+export const Decorates16Config: ConfigType = {
+    key,
+    chartKey,
+    conKey,
+    title: '装饰16',
+    category: ChatCategoryEnum.DECORATE,
+    categoryName: ChatCategoryEnumName.DECORATE,
+    package: PackagesCategoryEnum.DECORATES,
+    chartFrame: ChartFrameEnum.COMMON,
+    image: 'decorates16.png',
+}

+<template>
+  <div class="go-content-box">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+      :width="w"
+      :height="h"
+      viewBox="0 0 180 180"
+    >
+      <g opacity="0.6" transform="translate(11 14)  scale(1.6)">
+        <defs>
+          <polygon :id="polygonId" points="15, 46.5, 21, 47.5, 21, 52.5, 15, 53.5" />
+        </defs>
+        <circle
+          cx="50"
+          cy="50"
+          r="45"
+          fill="transparent"
+          :stroke="mainCicleColor || defaultColor[0]"
+          stroke-width="10"
+          stroke-dasharray="80, 100, 30, 100"
+        >
+          <animateTransform
+            attributeName="transform"
+            type="rotate"
+            values="0 50 50;360 50 50"
+            :dur="`${dur}s`"
+            repeatCount="indefinite"
+          />
+        </circle>
+        <circle
+          cx="50"
+          cy="50"
+          r="45"
+          fill="transparent"
+          :stroke="subCicleColor || defaultColor[1]"
+          stroke-width="6"
+          stroke-dasharray="50, 66, 100, 66"
+        >
+          <animateTransform
+            attributeName="transform"
+            type="rotate"
+            values="0 50 50;-360 50 50"
+            :dur="`${dur}s`"
+            repeatCount="indefinite"
+          />
+        </circle>
+        <circle
+          cx="50"
+          cy="50"
+          r="38"
+          fill="transparent"
+          :stroke="subCicleColor || defaultColor[1]"
+          stroke-width="1"
+          stroke-dasharray="5, 1"
+        />
+        <use
+          v-for="(foo, i) in new Array(20).fill(0)"
+          :key="i"
+          :xlink:href="`#${polygonId}`"
+          :stroke="mainCicleColor || defaultColor[0]"
+          :fill="Math.random() > 0.4 ? 'transparent' : mainCicleColor"
+        >
+          <animateTransform
+            attributeName="transform"
+            type="rotate"
+            values="0 50 50;360 50 50"
+            :dur="`${dur}s`"
+            :begin="`${(i * dur) / 20}s`"
+            repeatCount="indefinite"
+          />
+        </use>
+        <circle
+          cx="50"
+          cy="50"
+          r="26"
+          fill="transparent"
+          :stroke="subCicleColor || defaultColor[1]"
+          stroke-width="1"
+          stroke-dasharray="5, 1"
+        />
+        <text x="50" y="55" text-anchor="middle" :style="{ fill: textColor, opacity: 1 }" font-size="14">
+          {{ dataset + unit }}
+        </text>
+      </g>
+    </svg>
+  </div>
+</template>
+<script setup lang="ts">
+import { PropType, toRefs, ref } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { option } from './config'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType & typeof option>,
+    required: true
+  }
+})
+const { w, h } = toRefs(props.chartConfig.attr)
+
+const { mainCicleColor, subCicleColor, dataset, unit, textColor } = toRefs(props.chartConfig.option)
+
+const id = Number(Math.random().toString().substring(2, 10) + Date.now()).toString(36)
+
+const dur = ref(3)
+
+const polygonId = ref(`decoration-9-polygon-${id}`)
+
+const defaultColor = ref(['rgba(3, 166, 224, 0.8)', 'rgba(3, 166, 224, 0.5)'])
+</script>
+
+<style lang="scss" scoped>
+.go-content-box {
+  width: v-bind('w+"px"');
+  height: v-bind('h+"px"');
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>