Merge branch 'main_dev' into 'main'

Revert "Merge branch 'perf/view-interface' into 'main_dev'"

See merge request yunteng/thingskit-view!272

@@ -12,3 +12,4 @@ VITE_GLOB_CONTENT_SECURITY_POLICY = false
 
 
 # 公共路径
 # 公共路径
 VITE_GLOB_PUBLIC_PATH = /large-designer/
 VITE_GLOB_PUBLIC_PATH = /large-designer/
+

@@ -4,6 +4,31 @@ import { Plugin } from "vite";
 import { GLOB_CONFIG_FILE_NAME } from "./const";
 import { GLOB_CONFIG_FILE_NAME } from "./const";
 import { getGlobalConfigName } from "./getGlobConfigName";
 import { getGlobalConfigName } from "./getGlobConfigName";
 
 
+
+const stringToJSONParse = (string: string) => {
+  try {
+    return JSON.parse(string);
+  } catch (error) {
+    return string;
+  }
+};
+
+export function parseEnv(env: Record<string, string>) {
+  const res: Record<string, string> = {};
+
+  Object.keys(env).forEach((key) => {
+    try {
+      const value = env[key];
+      res[key] = stringToJSONParse(value);
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.log(`env variable ${key} can't serialization!`);
+    }
+  });
+
+  return res;
+}
+
 export function GenerateBuildConfig(viteEnv: Record<string, any>) {
 export function GenerateBuildConfig(viteEnv: Record<string, any>) {
   return {
   return {
     name: 'vite-plugin-generate-global-config',
     name: 'vite-plugin-generate-global-config',
@@ -15,7 +40,7 @@ export function GenerateBuildConfig(viteEnv: Record<string, any>) {
         try {
         try {
           const windowConf = `window.${configName}`;
           const windowConf = `window.${configName}`;
           // Ensure that the variable will not be modified 
           // Ensure that the variable will not be modified 
-          const configStr = `${windowConf}=${JSON.stringify(config)};
+          const configStr = `${windowConf}=${JSON.stringify(parseEnv(config))};
             Object.freeze(${windowConf});
             Object.freeze(${windowConf});
             Object.defineProperty(window, "${configName}", {
             Object.defineProperty(window, "${configName}", {
               configurable: false,
               configurable: false,

@@ -159,4 +159,7 @@ export const getAlarmList = (params?: object) =>
   defHttp.get({
   defHttp.get({
     url: Api.ALARM_LIST,
     url: Api.ALARM_LIST,
     params
     params
+  },
+  {
+    withShareToken: true
   })
   })

-import type { AxiosResponse } from 'axios';
-import type { RequestOptions, Result } from '/#/external/axios';
-import type { AxiosTransform, CreateAxiosOptions } from '@/utils/external/http/axios/axiosTransform';
-import { useGlobSetting } from '@/hooks/external/setting';
-import { RequestEnum, ContentTypeEnum } from '@/enums/external/httpEnum';
-import { isString } from '@/utils/external/is';
-import { getJwtToken, getShareJwtToken } from '@/utils/external/auth';
-import { setObjToUrlParams, deepMerge } from '@/utils/external';
-import { formatRequestDate, joinTimestamp } from '@/utils/external/http/axios/helper';
-import { VAxios } from '@/utils/external/http/axios/Axios';
-import { checkStatus } from './checkStatus';
+import type { AxiosResponse } from 'axios'
+import type { RequestOptions, Result } from '/#/external/axios'
+import type { AxiosTransform, CreateAxiosOptions } from '@/utils/external/http/axios/axiosTransform'
+import { useGlobSetting } from '@/hooks/external/setting'
+import { RequestEnum, ContentTypeEnum } from '@/enums/external/httpEnum'
+import { isString } from '@/utils/external/is'
+import { getJwtToken, getShareJwtToken } from '@/utils/external/auth'
+import { setObjToUrlParams, deepMerge } from '@/utils/external'
+import { formatRequestDate, joinTimestamp } from '@/utils/external/http/axios/helper'
+import { VAxios } from '@/utils/external/http/axios/Axios'
+import { checkStatus } from './checkStatus'
 
 
-const globSetting = useGlobSetting();
-const urlPrefix = globSetting.urlPrefix;
+const globSetting = useGlobSetting()
+const urlPrefix = globSetting.urlPrefix
 
 
 /**
 /**
  * @description: 数据处理，方便区分多种处理方式
  * @description: 数据处理，方便区分多种处理方式
@@ -21,62 +21,59 @@ const transform: AxiosTransform = {
    * @description: 处理请求数据。如果数据不是预期格式，可直接抛出错误
    * @description: 处理请求数据。如果数据不是预期格式，可直接抛出错误
    */
    */
   transformRequestHook: (res: AxiosResponse<Result>, options: RequestOptions) => {
   transformRequestHook: (res: AxiosResponse<Result>, options: RequestOptions) => {
-    const { isReturnNativeResponse } = options;
+    const { isReturnNativeResponse } = options
     // 是否返回原生响应头 比如：需要获取响应头时使用该属性
     // 是否返回原生响应头 比如：需要获取响应头时使用该属性
     if (isReturnNativeResponse) {
     if (isReturnNativeResponse) {
-      return res;
+      return res
     }
     }
-    return res.data;
+    return res.data
   },
   },
 
 
   // 请求之前处理config
   // 请求之前处理config
   beforeRequestHook: (config, options) => {
   beforeRequestHook: (config, options) => {
-    const { apiUrl, joinPrefix, joinParamsToUrl, formatDate, joinTime = true } = options;
+    const { apiUrl, joinPrefix, joinParamsToUrl, formatDate, joinTime = true } = options
 
 
     if (joinPrefix) {
     if (joinPrefix) {
-      config.url = `${urlPrefix}${config.url}`;
+      config.url = `${urlPrefix}${config.url}`
     }
     }
 
 
     if (apiUrl && isString(apiUrl)) {
     if (apiUrl && isString(apiUrl)) {
-      config.url = `${apiUrl}${config.url}`;
+      config.url = `${apiUrl}${config.url}`
     }
     }
 
 
-    const params = config.params || {};
-    const data = config.data || false;
-    formatDate && data && !isString(data) && formatRequestDate(data);
+    const params = config.params || {}
+    const data = config.data || false
+    formatDate && data && !isString(data) && formatRequestDate(data)
     if (config.method?.toUpperCase() === RequestEnum.GET) {
     if (config.method?.toUpperCase() === RequestEnum.GET) {
       if (!isString(params)) {
       if (!isString(params)) {
         // 给 get 请求加上时间戳参数，避免从缓存中拿数据。
         // 给 get 请求加上时间戳参数，避免从缓存中拿数据。
-        config.params = Object.assign(params || {}, joinTimestamp(joinTime, false));
+        config.params = Object.assign(params || {}, joinTimestamp(joinTime, false))
       } else {
       } else {
         // 兼容restful风格
         // 兼容restful风格
-        config.url = config.url + params + `${joinTimestamp(joinTime, true)}`;
-        config.params = undefined;
+        config.url = config.url + params + `${joinTimestamp(joinTime, true)}`
+        config.params = undefined
       }
       }
     } else {
     } else {
       if (!isString(params)) {
       if (!isString(params)) {
-        formatDate && formatRequestDate(params);
+        formatDate && formatRequestDate(params)
         if (Reflect.has(config, 'data') && config.data && Object.keys(config.data).length > 0) {
         if (Reflect.has(config, 'data') && config.data && Object.keys(config.data).length > 0) {
-          config.data = data;
-          config.params = params;
+          config.data = data
+          config.params = params
         } else {
         } else {
           // 非GET请求如果没有提供data，则将params视为data
           // 非GET请求如果没有提供data，则将params视为data
-          config.data = params;
-          config.params = undefined;
+          config.data = params
+          config.params = undefined
         }
         }
         if (joinParamsToUrl) {
         if (joinParamsToUrl) {
-          config.url = setObjToUrlParams(
-            config.url as string,
-            Object.assign({}, config.params, config.data)
-          );
+          config.url = setObjToUrlParams(config.url as string, Object.assign({}, config.params, config.data))
         }
         }
       } else {
       } else {
         // 兼容restful风格
         // 兼容restful风格
-        config.url = config.url + params;
-        config.params = undefined;
+        config.url = config.url + params
+        config.params = undefined
       }
       }
     }
     }
-    return config;
+    return config
   },
   },
 
 
   /**
   /**
@@ -84,21 +81,32 @@ const transform: AxiosTransform = {
    */
    */
   requestInterceptors: (config, options) => {
   requestInterceptors: (config, options) => {
     // 请求之前处理config
     // 请求之前处理config
-    const { requestOptions } = config;
-    const { withShareToken } = requestOptions || {};
-    const { requestOptions: { withToken } = {} } = options;
+    const { requestOptions } = config
+    const { withShareToken } = requestOptions || {}
+    const { requestOptions: { withToken } = {} } = options
+    const { withThirdTokenPrefix, withThirdTokenKey, withThirdTokenString } = config.requestOptions as Recordable
     if (withToken !== false) {
     if (withToken !== false) {
-      const shareToken = getShareJwtToken();
+      const shareToken = getShareJwtToken()
       if (withShareToken && shareToken) {
       if (withShareToken && shareToken) {
         config.headers!['X-Authorization'] = options.authenticationScheme
         config.headers!['X-Authorization'] = options.authenticationScheme
           ? `${options.authenticationScheme} ${shareToken}`
           ? `${options.authenticationScheme} ${shareToken}`
-          : shareToken;
+          : shareToken
       } else {
       } else {
-        const token = getJwtToken();
-        if (token) {
-          config.headers!['X-Authorization'] = options.authenticationScheme
-            ? `${options.authenticationScheme} ${token}`
-            : token;
+        const token = getJwtToken()
+        if (!withThirdTokenString) {
+          // 则是此平台
+          if (token) {
+            config.headers!['X-Authorization'] = options.authenticationScheme
+              ? `${options.authenticationScheme} ${token}`
+              : token
+          }
+        } else {
+          // 第三方接口
+          const authenticationScheme = !withThirdTokenPrefix ? 'Bearer': withThirdTokenPrefix
+          const tokenKey = withThirdTokenKey ? withThirdTokenKey : 'X-Authorization'
+          config.headers![tokenKey!] = withThirdTokenPrefix
+            ? `${authenticationScheme} ${withThirdTokenString}`
+            : `${withThirdTokenString}`
         }
         }
       }
       }
     }
     }
@@ -109,25 +117,22 @@ const transform: AxiosTransform = {
    * @description: 响应拦截器处理
    * @description: 响应拦截器处理
    */
    */
   responseInterceptors: (res: AxiosResponse<any>) => {
   responseInterceptors: (res: AxiosResponse<any>) => {
-    return res;
+    return res
   },
   },
 
 
   /**
   /**
    * @description: 响应错误处理
    * @description: 响应错误处理
    */
    */
   responseInterceptorsCatch: (error: any) => {
   responseInterceptorsCatch: (error: any) => {
+    const { response, config } = error || {}
+    const errorMessageMode = config?.requestOptions?.errorMessageMode || 'none'
+    const errorMsgIsObj = typeof response?.data === 'object'
+    const msg: string = errorMsgIsObj ? response?.data?.message || response?.data?.msg : response?.data
 
 
-    const { response, config } = error || {};
-    const errorMessageMode = config?.requestOptions?.errorMessageMode || 'none';
-    const errorMsgIsObj = typeof response?.data === 'object';
-    const msg: string = errorMsgIsObj
-      ? response?.data?.message || response?.data?.msg
-      : response?.data;
-
-    const flag = checkStatus(error?.response?.status, msg, errorMessageMode);
-    return Promise.reject(response?.data);
-  },
-};
+    const flag = checkStatus(error?.response?.status, msg, errorMessageMode)
+    return Promise.reject(response?.data)
+  }
+}
 
 
 function createAxios(opt?: Partial<CreateAxiosOptions>) {
 function createAxios(opt?: Partial<CreateAxiosOptions>) {
   return new VAxios(
   return new VAxios(
@@ -169,11 +174,11 @@ function createAxios(opt?: Partial<CreateAxiosOptions>) {
           ignoreCancelToken: true,
           ignoreCancelToken: true,
           // 是否携带token
           // 是否携带token
           withToken: true
           withToken: true
-        },
+        }
       },
       },
       opt || {}
       opt || {}
     )
     )
-  );
+  )
 }
 }
-export const customHttp = createAxios();
 
 
+export const customHttp = createAxios()

-import { RequestBodyEnum, RequestHttpEnum, RequestParams } from "@/enums/httpEnum"
-import { ExtraRequestConfigType } from "@/store/external/modules/extraComponentInfo.d"
-import { RequestConfigType } from "@/store/modules/chartEditStore/chartEditStore.d"
-import { isShareMode } from "@/views/share/hook"
-import { customHttp } from "./http"
-import { SelectTimeAggregationFieldEnum } from "@/views/chart/ContentConfigurations/components/ChartData/external/components/SelectTImeAggregation"
+import { RequestBodyEnum, RequestHttpEnum, RequestParams, RequestParamsObjType } from '@/enums/httpEnum'
+import { ExtraRequestConfigType } from '@/store/external/modules/extraComponentInfo.d'
+import { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { isShareMode } from '@/views/share/hook'
+import { customHttp } from './http'
+import { SelectTimeAggregationFieldEnum } from '@/views/chart/ContentConfigurations/components/ChartData/external/components/SelectTImeAggregation'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 
 
 export enum ParamsType {
 export enum ParamsType {
   REQUIRED,
   REQUIRED,
@@ -20,7 +21,7 @@ const regDynamicParams = /(?={).+?(?<=})/g
 
 
 /**
 /**
  * @description 判断是否是动态参数
  * @description 判断是否是动态参数
- * @param url 
+ * @param url
  */
  */
 export const isDynamicUrl = (url: string) => {
 export const isDynamicUrl = (url: string) => {
   regDynamicParams.lastIndex = 0
   regDynamicParams.lastIndex = 0
@@ -29,7 +30,7 @@ export const isDynamicUrl = (url: string) => {
 
 
 /**
 /**
  * @description 解析动态参数
  * @description 解析动态参数
- * @param url 
+ * @param url
  */
  */
 export const decomposeDynamicParams = (url: string) => {
 export const decomposeDynamicParams = (url: string) => {
   regDynamicParams.lastIndex = 0
   regDynamicParams.lastIndex = 0
@@ -46,8 +47,8 @@ export const decomposeDynamicParams = (url: string) => {
 
 
 /**
 /**
  * @description 正则替换url中的动态参数
  * @description 正则替换url中的动态参数
- * @param requestUrl 
- * @param Params 
+ * @param requestUrl
+ * @param Params
  */
  */
 const getDynamicRequestUrl = (requestUrl = '', Params: Recordable) => {
 const getDynamicRequestUrl = (requestUrl = '', Params: Recordable) => {
   requestUrl = decodeURI(requestUrl || '')
   requestUrl = decodeURI(requestUrl || '')
@@ -101,9 +102,9 @@ const handleParams = (Params: Recordable) => {
      * 源代码 Params.keys = (Params.keys || [] as any).join(',')
      * 源代码 Params.keys = (Params.keys || [] as any).join(',')
      */
      */
     if (!Array.isArray(Params.keys)) {
     if (!Array.isArray(Params.keys)) {
-      Params.keys = ([Params.keys] || [] as any).join(',')
+      Params.keys = ([Params.keys] || ([] as any)).join(',')
     } else {
     } else {
-      Params.keys = (Params.keys || [] as any).join(',')
+      Params.keys = (Params.keys || ([] as any)).join(',')
     }
     }
     //ft
     //ft
   }
   }
@@ -115,27 +116,43 @@ const handleParams = (Params: Recordable) => {
     Reflect.deleteProperty(Params, SelectTimeAggregationFieldEnum.TIME_PERIOD)
     Reflect.deleteProperty(Params, SelectTimeAggregationFieldEnum.TIME_PERIOD)
   }
   }
 
 
-  return Object.keys(Params).filter(Boolean).reduce((prev, next) => ({ ...prev, [next]: Params[next] }), {})
+  return Object.keys(Params)
+    .filter(Boolean)
+    .reduce((prev, next) => ({ ...prev, [next]: Params[next] }), {})
 }
 }
 
 
 //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 {
-      _result.push(key + '=' + value);
+      _result.push(key + '=' + value)
     }
     }
   }
   }
-  return _result.join('&');
+  return _result.join('&')
 }
 }
 
 
 export const customRequest = async (request: RequestConfigType) => {
 export const customRequest = async (request: RequestConfigType) => {
-  const { requestHttpType, requestParams, requestParamsBodyType, requestOriginUrl } = request as ExtraRequestConfigType
+  const {
+    requestHttpType,
+    requestParams,
+    requestParamsBodyType,
+    requestOriginUrl,
+    requestVerificationToken,
+    pondRequestOriginUrl,
+    pondRequestGlobalTokenKey,
+    pondRequestGlobalTokenSuffix,
+    pondRequestGlobalIsToken
+  } = request as ExtraRequestConfigType
+  const chartEditStore = useChartEditStore()
+  
+  const {requestOriginUrl: globalRequestOriginUrl} = chartEditStore.getRequestGlobalConfig
+
   let { requestUrl } = request as ExtraRequestConfigType
   let { requestUrl } = request as ExtraRequestConfigType
   const { Header, Body } = requestParams
   const { Header, Body } = requestParams
   let { Params } = requestParams
   let { Params } = requestParams
@@ -155,18 +172,48 @@ 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>({
-    url: requestHttpType === RequestHttpEnum.GET.toUpperCase() ? requestUrl : `${requestUrl}?${objConvertQuery(Params)}`,
-    baseURL: getOriginUrl(requestOriginUrl!),
-    method: requestHttpType,
-    params: requestHttpType === RequestHttpEnum.GET.toUpperCase() ? Params : null,
-    data: body,
-    headers: extraValue(Header)
-  }, {
-    joinPrefix: false,
-    apiUrl: '',
-    withShareToken: isShareMode()
-  })
+  return customHttp.request<any>(
+    {
+      url:
+        requestHttpType === RequestHttpEnum.GET.toUpperCase() ? requestUrl : `${requestUrl}?${objConvertQuery(Params)}`,
+      baseURL: pondRequestGlobalIsToken ? requestVerificationToken ? pondRequestOriginUrl : globalRequestOriginUrl ? globalRequestOriginUrl : getOriginUrl(requestOriginUrl!): pondRequestOriginUrl,
+      method: requestHttpType,
+      params: requestHttpType === RequestHttpEnum.GET.toUpperCase() ? Params : null,
+      data: body,
+      headers: extraValue(Header)
+    },
+    {
+      joinPrefix: false,
+      apiUrl: '',
+      withToken:true,
+      withShareToken: !requestVerificationToken ? isShareMode(): false,
+      withThirdTokenString: requestVerificationToken,
+      withThirdTokenKey: pondRequestGlobalTokenKey,
+      withThirdTokenPrefix: pondRequestGlobalTokenSuffix
+    }
+  )
   //ft
   //ft
 }
 }
+
+export interface thirdInterfaceRequest {
+  requestOriginUrl: string
+  body: RequestParamsObjType
+}
+
+//特殊处理第三方接口,一般获取token是POST请求,暂定POST
+export const customThirdInterfaceRequest = async (request: thirdInterfaceRequest) => {
+  const { body, requestOriginUrl } = request
+
+  return customHttp.request<any>(
+    {
+      url: requestOriginUrl,
+      method: RequestHttpEnum.POST,
+      data: body
+    },
+    {
+      joinPrefix: false,
+      apiUrl: '',
+      withToken: false
+    }
+  )
+}

@@ -164,12 +164,17 @@
     <template #header>
     <template #header>
       <n-switch v-model:value="yAxis.show" size="small"></n-switch>
       <n-switch v-model:value="yAxis.show" size="small"></n-switch>
     </template>
     </template>
+    <setting-item-box name="范围">
+      <setting-item name="开启" >
+        <n-switch v-model:value="yAxis.showRange" size="small"></n-switch>
+      </setting-item>
+    </setting-item-box>
     <setting-item-box name="范围" v-if="yAxis.showRange">
     <setting-item-box name="范围" v-if="yAxis.showRange">
       <setting-item name="最小值" >
       <setting-item name="最小值" >
-        <n-input-number  v-model:value="yAxis.min" size="small" min="0"></n-input-number>
+        <n-input-number v-model:value="yAxis.minData" size="small" min="0"></n-input-number>
       </setting-item>
       </setting-item>
       <setting-item name="最大值">
       <setting-item name="最大值">
-        <n-input-number  v-model:value="yAxis.max" size="small" min="0"></n-input-number>
+        <n-input-number v-model:value="yAxis.maxData" size="small" min="0"></n-input-number>
       </setting-item>
       </setting-item>
     </setting-item-box>
     </setting-item-box>
     <setting-item-box name="单位">
     <setting-item-box name="单位">
@@ -418,13 +423,6 @@ const xAxis = computed(() => {
 })
 })
 
 
 const yAxis = computed(() => {
 const yAxis = computed(() => {
-  if((props.optionData?.yAxis as Recordable)){
-    if(!(props.optionData?.yAxis as Recordable).showRange) {
-      //针对横向柱状图和热力图
-      Reflect.deleteProperty((props.optionData.yAxis as Recordable),'min');
-      Reflect.deleteProperty((props.optionData.yAxis as Recordable),'max');
-    }
-  }
   return props.optionData.yAxis
   return props.optionData.yAxis
 })
 })
 
 

 <template>
 <template>
-  <div ref="el" class="go-editor-area" :style="{ width, height }"></div>
-  <EditorWorker></EditorWorker>
+  <div :style="cacheConfigStyle">
+    <div ref="el" class="go-editor-area" :style="{ width, height }"></div>
+    <EditorWorker></EditorWorker>
+    <div style="margin-left:10px;">  
+      <n-gradient-text type="danger">
+       {{ errorText }}
+      </n-gradient-text>
+</div>
+  </div>
 </template>
 </template>
 
 
 <script lang="ts" setup>
 <script lang="ts" setup>
-import { onMounted, watch, PropType } from 'vue'
+import { onMounted, watch, PropType, ref, computed } from 'vue'
 import { useMonacoEditor } from './index.hook'
 import { useMonacoEditor } from './index.hook'
 import { EditorWorker } from './index'
 import { EditorWorker } from './index'
 
 
@@ -32,7 +39,11 @@ const props = defineProps({
   editorOptions: {
   editorOptions: {
     type: Object as PropType<object>,
     type: Object as PropType<object>,
     default: () => ({})
     default: () => ({})
-  }
+  },
+  config: {
+    type: Boolean as PropType<boolean>,
+    default: false
+  },
 })
 })
 
 
 const emits = defineEmits(['blur', 'update:modelValue'])
 const emits = defineEmits(['blur', 'update:modelValue'])
@@ -56,9 +67,30 @@ onMounted(() => {
   updateMonacoVal()
   updateMonacoVal()
 })
 })
 
 
+const errorText = ref('')
+
+const cacheConfigStyle = computed(() => {
+  const configStyle = {
+    display:'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center'
+  }
+  return props.config ? configStyle : ''
+})
+
 watch(
 watch(
   () => props.modelValue,
   () => props.modelValue,
   (val: string) => {
   (val: string) => {
+    if(props.language === 'json') {
+      try {
+        const res = JSON.parse(val)
+        if(res) {
+          errorText.value = ''
+        }
+      } catch (_) {
+        errorText.value = 'JSON格式有误，请仔细检查！'
+      }
+    }
     val !== getEditor()?.getValue() && updateMonacoVal(val)
     val !== getEditor()?.getValue() && updateMonacoVal(val)
   }
   }
 )
 )

 <script setup lang="ts">
 <script setup lang="ts">
-import Player, { Events, IError } from 'xgplayer';
-import { FlvPlugin } from 'xgplayer-flv';
-import Mp4Plugin from 'xgplayer-mp4';
-import { HlsPlugin } from 'xgplayer-hls';
-import { onMounted, shallowRef, computed, unref, toRaw, onUnmounted, ref, watch } from 'vue';
-import PresetPlayer from 'xgplayer';
-import { IPlayerOptions } from 'xgplayer/es/player';
-import 'xgplayer/dist/index.min.css';
-import { StreamType, XGPlayerProps } from './types';
-import { isShareMode } from "@/views/share/hook";
-import { getJwtToken, getShareJwtToken } from "@/utils/external/auth";
-
-const props = withDefaults(defineProps<{
-  streamType?: StreamType;
-  autoPlay?: boolean;
-  url?: string;
-  withToken?: boolean;
-  config?: Omit<IPlayerOptions, 'url'>;
-}>(), {
-  streamType: 'auto',
-  autoPlay: true,
-  config: () => ({}),
-});
+import Player, { Events, IError } from 'xgplayer'
+import { FlvPlugin } from 'xgplayer-flv'
+import Mp4Plugin from 'xgplayer-mp4'
+import { HlsPlugin } from 'xgplayer-hls'
+import { onMounted, shallowRef, computed, unref, toRaw, onUnmounted, ref, watch } from 'vue'
+import PresetPlayer from 'xgplayer'
+import { IPlayerOptions } from 'xgplayer/es/player'
+import 'xgplayer/dist/index.min.css'
+import { StreamType, UserActionEventType, XGPlayerProps } from './types'
+import { isShareMode } from '@/views/share/hook'
+import { getJwtToken, getShareJwtToken } from '@/utils/external/auth'
+
+const props = withDefaults(
+  defineProps<{
+    streamType?: StreamType
+    autoPlay?: boolean
+    url?: string
+    withToken?: boolean
+    config?: Omit<IPlayerOptions, 'url'>
+  }>(),
+  {
+    streamType: 'auto',
+    autoPlay: true,
+    config: () => ({})
+  }
+)
 
 
 const emits = defineEmits<{
 const emits = defineEmits<{
-  (eventName: 'ready', player: PresetPlayer): void;
-  (eventName: 'onUnmounted', player: PresetPlayer): void;
-}>();
+  (eventName: 'ready', player: PresetPlayer): void
+  (eventName: 'userAction', event: UserActionEventType, player: PresetPlayer): void
+  (eventName: 'onUnmounted', player: PresetPlayer): void
+}>()
 
 
 function parsePlayUrl(url: string) {
 function parsePlayUrl(url: string) {
   try {
   try {
-    return new URL(url).pathname;
+    return new URL(url).pathname
   } catch {
   } catch {
-    return url;
+    return url
   }
   }
 }
 }
 
 
 function getStreamTypeByUrl(url = ''): StreamType | undefined {
 function getStreamTypeByUrl(url = ''): StreamType | undefined {
   url = parsePlayUrl(url) || ''
   url = parsePlayUrl(url) || ''
-  if (url.endsWith('.m3u8')) return 'hls';
-  else if (url.endsWith('.mp4')) return 'mp4';
+  if (url.endsWith('.m3u8')) return 'hls'
+  else if (url.endsWith('.mp4')) return 'mp4'
   else if (url.endsWith('.flv')) {
   else if (url.endsWith('.flv')) {
-    return 'flv';
-  } else return;
+    return 'flv'
+  } else return
 }
 }
 
 
 const getPluginByStreamType = (): IPlayerOptions => {
 const getPluginByStreamType = (): IPlayerOptions => {
-  let { url, withToken } = props;
-  let { streamType } = props;
-  streamType = streamType === 'auto' ? getStreamTypeByUrl(url)! : streamType;
+  let { url, withToken } = props
+  let { streamType } = props
+  streamType = streamType === 'auto' ? getStreamTypeByUrl(url)! : streamType
 
 
   const liveConfig = {
   const liveConfig = {
     targetLatency: 10,
     targetLatency: 10,
@@ -56,38 +60,38 @@ const getPluginByStreamType = (): IPlayerOptions => {
     disconnectTime: 0,
     disconnectTime: 0,
     fetchOptions: withToken
     fetchOptions: withToken
       ? {
       ? {
-        headers: {
-          'X-Authorization': `Bearer ${isShareMode() ? getShareJwtToken() : getJwtToken()}`,
-        },
-      }
-      : {},
-  };
+          headers: {
+            'X-Authorization': `Bearer ${isShareMode() ? getShareJwtToken() : getJwtToken()}`
+          }
+        }
+      : {}
+  }
   const config: IPlayerOptions = {
   const config: IPlayerOptions = {
     flv: liveConfig,
     flv: liveConfig,
-    hls: liveConfig,
-  };
+    hls: liveConfig
+  }
   switch (streamType) {
   switch (streamType) {
     case 'hls':
     case 'hls':
-      config.plugins = [HlsPlugin];
-      break;
+      config.plugins = [HlsPlugin]
+      break
     case 'mp4':
     case 'mp4':
-      config.plugins = [Mp4Plugin];
-      break;
+      config.plugins = [Mp4Plugin]
+      break
     case 'flv':
     case 'flv':
-      config.plugins = [FlvPlugin];
-      break;
+      config.plugins = [FlvPlugin]
+      break
   }
   }
-  return config;
-};
+  return config
+}
 
 
-const videoElRef = shallowRef<Nullable<HTMLDivElement>>();
+const videoElRef = shallowRef<Nullable<HTMLDivElement>>()
 
 
-const playerRef = shallowRef<Nullable<PresetPlayer>>();
+const playerRef = shallowRef<Nullable<PresetPlayer>>()
 
 
-const propsRef = ref<XGPlayerProps>({});
+const propsRef = ref<XGPlayerProps>({})
 
 
 const getPlayerConfig = computed<IPlayerOptions>(() => {
 const getPlayerConfig = computed<IPlayerOptions>(() => {
-  const { url, autoPlay, config } = props;
+  const { url, autoPlay, config } = props
 
 
   const basicConfig: IPlayerOptions = {
   const basicConfig: IPlayerOptions = {
     ...config,
     ...config,
@@ -97,79 +101,83 @@ const getPlayerConfig = computed<IPlayerOptions>(() => {
     isLive: true,
     isLive: true,
     autoplay: autoPlay,
     autoplay: autoPlay,
     autoplayMuted: autoPlay,
     autoplayMuted: autoPlay,
-    ...getPluginByStreamType(),
-  };
-  return basicConfig;
-});
+    ...getPluginByStreamType()
+  }
+  return basicConfig
+})
 
 
 function onDecodeError() {
 function onDecodeError() {
-  console.warn('player happend decode error');
-  playerRef.value?.switchURL(props.url!);
+  console.warn('player happend decode error')
+  playerRef.value?.switchURL(props.url!)
 }
 }
 
 
 function initializePlayer() {
 function initializePlayer() {
   if (unref(playerRef)) {
   if (unref(playerRef)) {
-    playerRef.value?.destroy?.();
-    playerRef.value = null;
+    playerRef.value?.destroy?.()
+    playerRef.value = null
   }
   }
 
 
-  const config = toRaw(unref(getPlayerConfig));
+  const config = toRaw(unref(getPlayerConfig))
 
 
-  if (!unref(videoElRef)) return;
+  if (!unref(videoElRef)) return
 
 
-  const player = (playerRef.value = new Player(Object.assign(config, { el: unref(videoElRef) })));
+  const player = (playerRef.value = new Player(Object.assign(config, { el: unref(videoElRef) })))
 
 
   player.on(Events.READY, () => {
   player.on(Events.READY, () => {
-    emits('ready', player);
-  });
+    emits('ready', player)
+  })
+
+  player.on(Events.USER_ACTION, (event: UserActionEventType) => {
+    emits('userAction', event, player)
+  })
 
 
   player.setEventsMiddleware({
   player.setEventsMiddleware({
     error: (event, callback) => {
     error: (event, callback) => {
       const code = (
       const code = (
         event as unknown as {
         event as unknown as {
-          error: MediaError;
+          error: MediaError
         }
         }
-      ).error.code;
+      ).error.code
       if (code === MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED) {
       if (code === MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED) {
         if (!props.url) {
         if (!props.url) {
-          return;
+          return
         }
         }
-        callback();
-        return;
+        callback()
+        return
       }
       }
 
 
       if (code === MediaError.MEDIA_ERR_DECODE) {
       if (code === MediaError.MEDIA_ERR_DECODE) {
         // 视频流可以播放 中途解码失败重载
         // 视频流可以播放 中途解码失败重载
         if (playerRef.value?.isPlaying) {
         if (playerRef.value?.isPlaying) {
-          onDecodeError();
+          onDecodeError()
         }
         }
-        return;
+        return
       }
       }
 
 
-      callback();
-    },
-  });
+      callback()
+    }
+  })
 }
 }
 
 
 onMounted(() => {
 onMounted(() => {
-  initializePlayer();
-});
+  initializePlayer()
+})
 
 
 onUnmounted(() => {
 onUnmounted(() => {
-  emits('onUnmounted', unref(playerRef)!);
-  playerRef.value?.destroy?.();
-});
+  emits('onUnmounted', unref(playerRef)!)
+  playerRef.value?.destroy?.()
+})
 
 
 watch(
 watch(
   () => props.url,
   () => props.url,
   () => {
   () => {
-    initializePlayer();
+    initializePlayer()
   }
   }
-);
+)
 
 
 defineExpose({
 defineExpose({
-  getPlayerInstance: () => unref(playerRef),
-});
+  getPlayerInstance: () => unref(playerRef)
+})
 </script>
 </script>
 
 
 <template>
 <template>

-import { IPlayerOptions } from 'xgplayer/es/player';
+import { IPlayerOptions } from 'xgplayer/es/player'
 
 
-export type StreamType = 'flv' | 'mp4' | 'hls' | 'auto';
+export type StreamType = 'flv' | 'mp4' | 'hls' | 'auto'
 export interface XGPlayerProps {
 export interface XGPlayerProps {
-  streamType?: StreamType;
-  autoPlay?: boolean;
-  url?: string;
-  withToken?: boolean;
-  config?: Omit<IPlayerOptions, 'url'>;
+  streamType?: StreamType
+  autoPlay?: boolean
+  url?: string
+  withToken?: boolean
+  config?: Omit<IPlayerOptions, 'url'>
+}
+
+export interface UserActionEventType {
+  action: string // 用户行为
+  pluginName: string // 从哪个插件触发
+  props: [
+    {
+      // 发生变化的属性列表
+      props: string // 发生变化的属性
+      from: any // 变化前的值
+      to: any // 变化后的值
+    }
+  ]
+  event: Event // 事件
+  currentTime: number // 当前播放时间
+  duration: number // 当前播放器时长
+  ended: boolean // 是否播放结束
+  paused: boolean // 是否暂停
+  from?: boolean
+  to?: boolean
 }
 }

+export enum DataTypeEnum {
+  DATA_RANGE = 'dataRange',
+  DATA_INPUT = 'dataInput'
+}
+
+export enum DataTypeNameEnum {
+  DATA_RANGE = '日期区间',
+  DATA_INPUT = '文本输入'
+}

+export enum TokenEnum {
+  DEFAULT_TOKEN = 'Token',
+  TOKEN_STRING = 'TokenString',
+  NO_VERIFICATION = 'NoVerification'
+}
+
+export enum TokenNameEnum {
+  DEFAULT_TOKEN = 'Token',
+  TOKEN_STRING = '令牌',
+  NO_VERIFICATION = '无验证'
+}

@@ -25,7 +25,8 @@ export enum RequestContentTypeEnum {
   // 普通请求
   // 普通请求
   DEFAULT = 0,
   DEFAULT = 0,
   // SQL请求
   // SQL请求
-  SQL = 1
+  SQL = 1,
+  WEB_SOCKET
 }
 }
 
 
 /**
 /**

@@ -10,7 +10,7 @@ export const useGlobSetting = (): Readonly<GlobConfig> => {
     VITE_GLOB_UPLOAD_URL,
     VITE_GLOB_UPLOAD_URL,
     VITE_GLOB_WEB_SOCKET,
     VITE_GLOB_WEB_SOCKET,
     VITE_GLOB_CONTENT_SECURITY_POLICY,
     VITE_GLOB_CONTENT_SECURITY_POLICY,
-    VITE_GLOB_PUBLIC_PATH
+    VITE_GLOB_PUBLIC_PATH,
   } = getAppEnvConfig();
   } = getAppEnvConfig();
 
 
   if (!/[a-zA-Z_]*/.test(VITE_GLOB_APP_SHORT_NAME)) {
   if (!/[a-zA-Z_]*/.test(VITE_GLOB_APP_SHORT_NAME)) {
@@ -28,7 +28,7 @@ export const useGlobSetting = (): Readonly<GlobConfig> => {
     uploadUrl: VITE_GLOB_UPLOAD_URL,
     uploadUrl: VITE_GLOB_UPLOAD_URL,
     socketUrl: VITE_GLOB_WEB_SOCKET,
     socketUrl: VITE_GLOB_WEB_SOCKET,
     securityPolicy: VITE_GLOB_CONTENT_SECURITY_POLICY,
     securityPolicy: VITE_GLOB_CONTENT_SECURITY_POLICY,
-    publicPath: VITE_GLOB_PUBLIC_PATH
+    publicPath: VITE_GLOB_PUBLIC_PATH,
   };
   };
 
 
   return glob as Readonly<GlobConfig>;
   return glob as Readonly<GlobConfig>;

 import {ref, toRefs, toRaw, watch} from 'vue'
 import {ref, toRefs, toRaw, watch} from 'vue'
 import type VChart from 'vue-echarts'
 import type VChart from 'vue-echarts'
-import {useChartDataPondFetch} from '@/hooks/'
 import {CreateComponentType, ChartFrameEnum, CreateComponentGroupType} from '@/packages/index.d'
 import {CreateComponentType, ChartFrameEnum, CreateComponentGroupType} from '@/packages/index.d'
 import {useChartEditStore} from '@/store/modules/chartEditStore/chartEditStore'
 import {useChartEditStore} from '@/store/modules/chartEditStore/chartEditStore'
 import {isPreview, intervalUnitHandle} from '@/utils'
 import {isPreview, intervalUnitHandle} from '@/utils'
 import {setOption} from '@/packages/public/chart'
 import {setOption} from '@/packages/public/chart'
 import {useChartDataSocket} from './useChartDataSocket'
 import {useChartDataSocket} from './useChartDataSocket'
-import {customRequest} from '@/api/external/customRequest'
+import {customRequest, customThirdInterfaceRequest, thirdInterfaceRequest} from '@/api/external/customRequest'
 import {useFilterFn} from './useFilterFn'
 import {useFilterFn} from './useFilterFn'
 import {RequestContentTypeEnum} from '@/enums/external/httpEnum'
 import {RequestContentTypeEnum} from '@/enums/external/httpEnum'
 import dayjs from 'dayjs'
 import dayjs from 'dayjs'
+import { RequestDataPondItemType } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { JSONParse, convertToCascadingData, findItemByLabel } from '@/utils/external/utils'
+import { CascaderOption } from 'naive-ui'
+import { useUserStore } from '@/store/external/modules/user'
 
 
 
 
 // 获取类型
 // 获取类型
@@ -40,7 +43,8 @@ export const useChartDataFetch = (
             }
             }
         }
         }
     }
     }
-
+    
+    // 单个组件请求
     const requestIntervalFn = () => {
     const requestIntervalFn = () => {
         const chartEditStore = useChartEditStore()
         const chartEditStore = useChartEditStore()
         if ((targetComponent.request.requestContentType as RequestContentTypeEnum) === RequestContentTypeEnum.WEB_SOCKET) return
         if ((targetComponent.request.requestContentType as RequestContentTypeEnum) === RequestContentTypeEnum.WEB_SOCKET) return
@@ -52,6 +56,12 @@ export const useChartDataFetch = (
             requestInterval: globalRequestInterval
             requestInterval: globalRequestInterval
         } = toRefs(chartEditStore.getRequestGlobalConfig)
         } = toRefs(chartEditStore.getRequestGlobalConfig)
 
 
+        // 公共配置
+        const {
+            pondRequestGlobalInterval,
+            pondRequestGlobalIntervalUnit
+        } = toRefs(targetComponent.request)
+
         // 目标组件
         // 目标组件
         const {
         const {
             requestUrl,
             requestUrl,
@@ -92,11 +102,55 @@ export const useChartDataFetch = (
                         (toRaw(targetComponent.request).requestParams.Params.startTs as unknown as number) = startTs as unknown as number
                         (toRaw(targetComponent.request).requestParams.Params.startTs as unknown as number) = startTs as unknown as number
                         (toRaw(targetComponent.request).requestParams.Params.endTs as unknown as number) = endTs as unknown as number
                         (toRaw(targetComponent.request).requestParams.Params.endTs as unknown as number) = endTs as unknown as number
                     } 
                     } 
+                    //处理过期
+                    const userStore = useUserStore();
+                    const findCurrentPond = () => {
+                        return chartEditStore.getRequestGlobalConfig.requestDataPond.find((pondItem: RequestDataPondItemType) => 
+                            pondItem.dataPondId === targetComponent?.request?.requestDataPondId && userStore.getThirdTokenIsExp)
+                        }
+                    const handleExecuteRequest = async () => {
+                        try {
+                        if(findCurrentPond()?.dataPondRequestConfig?.pondRequestOriginUrl){
+                            const originUrlString = findCurrentPond()?.dataPondRequestConfig?.pondRequestOriginUrl
+                            const requestUrlString = findCurrentPond()?.dataPondRequestConfig?.pondRequestUrl
+                            const body = findCurrentPond()?.dataPondRequestConfig?.pondRequestParams!['Body']['json']
+                            const request = {
+                                requestOriginUrl: `${originUrlString}${requestUrlString}`,
+                                body
+                            }
+                            const res = await customThirdInterfaceRequest(request as unknown as thirdInterfaceRequest)
+                            const resOptions = convertToCascadingData(res) as unknown as CascaderOption[]
+                            const findLabel = findItemByLabel(resOptions, targetComponent.request.thirdSelectCascaderLabel as string)
+                            if(findLabel) {
+                                targetComponent.request.requestVerificationToken = findLabel?.value
+                            }
+                        }
+                        } catch (e) {
+                          console.error(e)
+                        }
+                    }
+                    // 定时时间
+                    const time = targetInterval && targetInterval.value ? targetInterval.value : pondRequestGlobalInterval?.value?pondRequestGlobalInterval?.value: globalRequestInterval.value
+                    // 单位
+                    const unit = targetInterval && targetInterval.value ? targetUnit.value :pondRequestGlobalIntervalUnit?.value?pondRequestGlobalIntervalUnit?.value: globalUnit.value
+                    setInterval(handleExecuteRequest, intervalUnitHandle(time, (unit as unknown as any)))
+                    //
                     const res = await customRequest(toRaw(targetComponent.request))
                     const res = await customRequest(toRaw(targetComponent.request))
                     if (res) {
                     if (res) {
                         try {
                         try {
                             const filter = targetComponent.filter
                             const filter = targetComponent.filter
                             const {value} = useFilterFn(filter, res)
                             const {value} = useFilterFn(filter, res)
+                            //分组更新下面子组件
+                            if(targetComponent.isGroup) {
+                                const parseHistoryInput = JSONParse(targetComponent.saveHistoryInput!)
+                                parseHistoryInput?.forEach((historyItem:Recordable) => {
+                                    const findCurrentItem =  targetComponent.groupList?.find((groupItem:CreateComponentType | CreateComponentGroupType) => groupItem.id === historyItem.id)
+                                    if(findCurrentItem) {
+                                        findCurrentItem.option.dataset = value[historyItem.inputValue]
+                                    }
+                                })
+                            }
+                            //
                             echartsUpdateHandle(value)
                             echartsUpdateHandle(value)
                             // 更新回调函数
                             // 更新回调函数
                             if (updateCallback) {
                             if (updateCallback) {
@@ -119,13 +173,14 @@ export const useChartDataFetch = (
                         deep: true
                         deep: true
                     }
                     }
                 )
                 )
-
                 // 定时时间
                 // 定时时间
-                const time = targetInterval && targetInterval.value ? targetInterval.value : globalRequestInterval.value
+                const time = targetInterval && targetInterval.value ? targetInterval.value : pondRequestGlobalInterval?.value?pondRequestGlobalInterval?.value: globalRequestInterval.value
                 // 单位
                 // 单位
-                const unit = targetInterval && targetInterval.value ? targetUnit.value : globalUnit.value
+                const unit = targetInterval && targetInterval.value ? targetUnit.value :pondRequestGlobalIntervalUnit?.value?pondRequestGlobalIntervalUnit?.value: globalUnit.value
                 // 开启轮询
                 // 开启轮询
-                if (time) fetchInterval = setInterval(fetchFn, intervalUnitHandle(time, unit))
+                if (time) fetchInterval = setInterval(fetchFn, intervalUnitHandle(time, (unit as unknown as any)))
+
+                
             }
             }
             // eslint-disable-next-line no-empty
             // eslint-disable-next-line no-empty
         } catch (error) {
         } catch (error) {
@@ -140,11 +195,12 @@ export const useChartDataFetch = (
         /**
         /**
          * 支持分组也可以接受ws
          * 支持分组也可以接受ws
          * 如果是分组并且绑定了ws
          * 如果是分组并且绑定了ws
+         * 也支持http轮询
          */
          */
         chartEditStore.getComponentList?.forEach((item: CreateComponentType | CreateComponentGroupType) => {
         chartEditStore.getComponentList?.forEach((item: CreateComponentType | CreateComponentGroupType) => {
             if (item.isGroup) {
             if (item.isGroup) {
                 if (item.request.requestUrl?.includes('ws')) {
                 if (item.request.requestUrl?.includes('ws')) {
-                    initial(item, useChartEditStore, updateCallback)
+                    initial(item, useChartEditStore, updateCallback) // ws
                 }
                 }
             }
             }
         })
         })

@@ -2,8 +2,9 @@
  * 重写select下拉框联动
  * 重写select下拉框联动
  */
  */
 import { toRefs } from 'vue'
 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 { JSONParse } from '@/utils/external/utils'
 
 
 // 获取类型
 // 获取类型
 type ChartEditStoreType = typeof useChartEditStore
 type ChartEditStoreType = typeof useChartEditStore
@@ -32,9 +33,19 @@ export const useChartInteract = (
     chartEditStore.getComponentList.forEach(targetItem => {
     chartEditStore.getComponentList.forEach(targetItem => {
       if (targetItem.isGroup) {
       if (targetItem.isGroup) {
         targetItem.groupList?.forEach(groupItem => {
         targetItem.groupList?.forEach(groupItem => {
+          let jsonBody: any = null
           if (groupItem.id === item.interactComponentId) {
           if (groupItem.id === item.interactComponentId) {
-            const { Params, Header } = toRefs(groupItem.request.requestParams)
+            const { Params, Header, Body } = toRefs(groupItem.request.requestParams)
             Object.keys(item.interactFn).forEach(key => {
             Object.keys(item.interactFn).forEach(key => {
+              if (Body.value['json']) {
+                jsonBody = JSONParse(Body.value['json'])
+                const splitDaterange = param['daterange'].split('-')
+                jsonBody[item.interactFn[key][0]] = decodeURIComponent(splitDaterange[0])
+                jsonBody[item.interactFn[key][1]] = decodeURIComponent(splitDaterange[1])
+              }
+              if (jsonBody) {
+                Body.value['json'] = JSON.stringify(jsonBody)
+              }
               if (Params.value[key]) {
               if (Params.value[key]) {
                 Params.value[key] = param[item.interactFn[key]]
                 Params.value[key] = param[item.interactFn[key]]
               }
               }
@@ -45,9 +56,19 @@ export const useChartInteract = (
           }
           }
         })
         })
       } else {
       } else {
+        let jsonBody: any = null
         if (targetItem.id === item.interactComponentId) {
         if (targetItem.id === item.interactComponentId) {
-          const { Params, Header } = toRefs(targetItem.request.requestParams)
+          const { Params, Header, Body } = toRefs(targetItem.request.requestParams)
           Object.keys(item.interactFn).forEach(key => {
           Object.keys(item.interactFn).forEach(key => {
+            if (Body.value['json']) {
+              jsonBody = JSONParse(Body.value['json'])
+              const splitDaterange = param['daterange'].split('-')
+              jsonBody[item.interactFn[key][0]] = decodeURIComponent(splitDaterange[0])
+              jsonBody[item.interactFn[key][1]] = decodeURIComponent(splitDaterange[1])
+            }
+            if (jsonBody) {
+              Body.value['json'] = JSON.stringify(jsonBody)
+            }
             if (Params.value[key]) {
             if (Params.value[key]) {
               Params.value[key] = param[item.interactFn[key]]
               Params.value[key] = param[item.interactFn[key]]
             }
             }

@@ -4,6 +4,7 @@
 import { toRefs } from 'vue'
 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 { JSONParse } from '@/utils'
 
 
 // 获取类型
 // 获取类型
 type ChartEditStoreType = typeof useChartEditStore
 type ChartEditStoreType = typeof useChartEditStore
@@ -33,21 +34,38 @@ export const useChartInteract = (
       if (targetItem.isGroup) {
       if (targetItem.isGroup) {
         targetItem.groupList?.forEach(groupItem => {
         targetItem.groupList?.forEach(groupItem => {
           if (groupItem.id === item.interactComponentId) {
           if (groupItem.id === item.interactComponentId) {
-            const { Params, Header } = toRefs(groupItem.request.requestParams)
-            Object.keys(item.interactFn).forEach(key => {
-                Params.value[key] = decodeURIComponent(param[item.interactFn[key]])
-                if(Reflect.has(Params.value, 'attrName')) {
-                  Params.value['attrName'] = attrNames as unknown as string // 修改联动选择，lengend未实时更新
-                }
-                if (key in  Header.value) {
-                  Header.value[key] = param[item.interactFn[key]]
+            const { Params, Header, Body } = toRefs(groupItem.request.requestParams)
+            //特殊处理 只针对两个下拉选择器，一个是产品下拉，一个是设备下拉，选择了产品，设备列表选择值清空
+            if (targetItem.chartConfig.title.includes('设备列表下拉选择器')) {
+              if (window.location.href.includes('preview')) {
+                if (window.sessionStorage.getItem('deviceProfileSelectStatus') === 'selected') {
+                  targetItem.option.selectValue = "'"
                 }
                 }
+              }
+            }
+            //
+            let jsonBody: any = null
+            Object.keys(item.interactFn).forEach(key => {
+              Params.value[key] = decodeURIComponent(param[item.interactFn[key]])
+              if (Body.value['json']) {
+                jsonBody = JSONParse(Body.value['json'])
+                jsonBody[item.interactFn[key]] = decodeURIComponent(param['data'])
+              }
+              if (jsonBody) {
+                Body.value['json'] = JSON.stringify(jsonBody)
+              }
+              if (Reflect.has(Params.value, 'attrName')) {
+                Params.value['attrName'] = attrNames as unknown as string // 修改联动选择，lengend未实时更新
+              }
+              if (key in Header.value) {
+                Header.value[key] = param[item.interactFn[key]]
+              }
             })
             })
           }
           }
         })
         })
       } else {
       } else {
         if (targetItem.id === item.interactComponentId) {
         if (targetItem.id === item.interactComponentId) {
-          const { Params, Header } = toRefs(targetItem.request.requestParams)
+          const { Params, Header, Body } = toRefs(targetItem.request.requestParams)
           //特殊处理 只针对两个下拉选择器，一个是产品下拉，一个是设备下拉，选择了产品，设备列表选择值清空
           //特殊处理 只针对两个下拉选择器，一个是产品下拉，一个是设备下拉，选择了产品，设备列表选择值清空
           if (targetItem.chartConfig.title.includes('设备列表下拉选择器')) {
           if (targetItem.chartConfig.title.includes('设备列表下拉选择器')) {
             if (window.location.href.includes('preview')) {
             if (window.location.href.includes('preview')) {
@@ -57,14 +75,22 @@ export const useChartInteract = (
             }
             }
           }
           }
           //
           //
+          let jsonBody: any = null
           Object.keys(item.interactFn).forEach(key => {
           Object.keys(item.interactFn).forEach(key => {
-              Params.value[key] = decodeURIComponent(param[item.interactFn[key]])
-              if(Reflect.has(Params.value, 'attrName')) {
-                Params.value['attrName'] = attrNames as unknown as string // 修改联动选择，lengend未实时更新
-              }
-              if (key in  Header.value) {
-                Header.value[key] = param[item.interactFn[key]]
-              }
+            Params.value[key] = decodeURIComponent(param[item.interactFn[key]])
+            if (Body.value['json']) {
+              jsonBody = JSONParse(Body.value['json'])
+              jsonBody[item.interactFn[key]] = decodeURIComponent(param['data'])
+            }
+            if (jsonBody) {
+              Body.value['json'] = JSON.stringify(jsonBody)
+            }
+            if (Reflect.has(Params.value, 'attrName')) {
+              Params.value['attrName'] = attrNames as unknown as string // 修改联动选择，lengend未实时更新
+            }
+            if (key in Header.value) {
+              Header.value[key] = param[item.interactFn[key]]
+            }
           })
           })
         }
         }
       }
       }

@@ -12,17 +12,18 @@ export const useFetchTargetData = () => {
   const fetchTargetData = async () => {
   const fetchTargetData = async () => {
     const { targetData } = useTargetData()
     const { targetData } = useTargetData()
     if (unref(targetData).request.requestDataType === RequestDataTypeEnum.STATIC) return
     if (unref(targetData).request.requestDataType === RequestDataTypeEnum.STATIC) return
+    if (!unref(targetData).request.requestUrl) return
     loading.value = true
     loading.value = true
     try {
     try {
-      const isSocketType = (targetData.value.request.requestContentType as RequestContentTypeEnum) === RequestContentTypeEnum.WEB_SOCKET
-      const res = isSocketType
-        ? await sendMessage(unref(targetData) as CreateComponentType)
-        : await customRequest(toRaw(targetData.value.request))
- 
-      if (res) {
-        return res
-      }
-      window['$message'].warning('没有拿到返回值，请检查接口！')
+        const isSocketType = (targetData.value.request.requestContentType as RequestContentTypeEnum) === RequestContentTypeEnum.WEB_SOCKET
+        const res = isSocketType
+          ? await sendMessage(unref(targetData) as CreateComponentType)
+          : await customRequest(toRaw(targetData.value.request))
+   
+        if (res) {
+          return res
+        }
+        window['$message'].warning('没有拿到返回值，请检查接口！')
     } catch (error) {
     } catch (error) {
       loading.value = false
       loading.value = false
       console.error(error);
       console.error(error);

+/**
+ * 此hook用于获取物模型
+ * @param entityId 设备id
+ * @returns
+ */
+
+import { getAttribute, getDeviceDetail } from '@/api/external/common'
+
+export function useTsl() {
+  const handleDeviceProfileAttributes = async (entityId: string) => {
+    const deviceDetailRes = await getDeviceDetail(entityId)
+    const { deviceProfileId } = deviceDetailRes
+    if (!deviceProfileId) return
+    const attributeRes = await getAttribute(deviceProfileId)
+    const dataFormat = handleDataFormat(deviceDetailRes, attributeRes)
+    return dataFormat
+  }
+
+  const handleDataFormat = (deviceDetail: Recordable, attributes: Recordable[]) => {
+    const { name, tbDeviceId } = deviceDetail
+    const attribute = attributes.map((item: Recordable) => ({
+      identifier: item.identifier,
+      name: item.name,
+      detail: item.detail
+    }))
+    return {
+      name,
+      tbDeviceId,
+      attribute
+    }
+  }
+
+  return {
+    handleDeviceProfileAttributes
+  }
+}

@@ -6,8 +6,7 @@ let initialFlag = false;
 export function useWebSecurityPolicy() {
 export function useWebSecurityPolicy() {
   if (window && window.document && window.document.documentElement) {
   if (window && window.document && window.document.documentElement) {
     const { securityPolicy } = useGlobSetting();
     const { securityPolicy } = useGlobSetting();
-    const flag = isBoolean(securityPolicy) ? securityPolicy : securityPolicy === 'true'  
-    if (flag && !initialFlag) {
+    if (securityPolicy && !initialFlag) {
       const meta = document.createElement('meta');
       const meta = document.createElement('meta');
       meta.setAttribute('http-equiv', 'Content-Security-Policy');
       meta.setAttribute('http-equiv', 'Content-Security-Policy');
       meta.setAttribute('content', 'upgrade-insecure-requests');
       meta.setAttribute('content', 'upgrade-insecure-requests');

@@ -129,7 +129,7 @@ const props = defineProps({
 
 
 const header = ref()
 const header = ref()
 const median = ref<string[]>([])
 const median = ref<string[]>([])
-props.optionData.dataset.dimensions.forEach(item => {
+props.optionData.dataset?.dimensions?.forEach(item => {
   median.value.push(item.title)
   median.value.push(item.title)
 })
 })
 
 
@@ -138,7 +138,7 @@ watch(
   () => props.optionData,
   () => props.optionData,
   () => {
   () => {
     median.value = []
     median.value = []
-    props.optionData.dataset.dimensions.forEach(item => {
+    props.optionData.dataset.dimensions?.forEach(item => {
       median.value.push(item.title)
       median.value.push(item.title)
     })
     })
     header.value = median.value.toString()
     header.value = median.value.toString()
@@ -153,8 +153,10 @@ watch(
 watch([header], ([headerNew], [headerOld]) => {
 watch([header], ([headerNew], [headerOld]) => {
   if (headerNew !== headerOld) {
   if (headerNew !== headerOld) {
     headerNew.split(',').forEach((item: string, index: number) => {
     headerNew.split(',').forEach((item: string, index: number) => {
-      if (index + 1 <= props.optionData.dataset.dimensions.length) {
-        props.optionData.dataset.dimensions[index].title = headerNew.split(',')[index]
+      if(props.optionData.dataset?.dimensions) {
+        if (index + 1 <= props.optionData.dataset.dimensions.length) {
+          props.optionData.dataset.dimensions[index].title = headerNew.split(',')[index]
+        }
       }
       }
     })
     })
   }
   }

@@ -62,6 +62,8 @@ const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSe
 
 
 const { queryCondition } = toRefs(props.chartConfig.option)
 const { queryCondition } = toRefs(props.chartConfig.option)
 
 
+const { limit, startTs, endTs, interval, agg } = toRefs(props.chartConfig.request.requestParams.Params)
+
 use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
 use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
 
 
 const chartEditStore = useChartEditStore()
 const chartEditStore = useChartEditStore()
@@ -286,6 +288,23 @@ const handleAggChange = (value: string) => {
 }
 }
 
 
 onMounted(() => {
 onMounted(() => {
+  if (Reflect.get(props.chartConfig.request.requestParams.Params, 'startTs')) {
+    queryCondition.value.timeRange[0] = startTs.value
+    getPacketIntervalByRange(queryCondition.value.timeRange)
+  }
+  if (Reflect.get(props.chartConfig.request.requestParams.Params, 'endTs')) {
+    queryCondition.value.timeRange[1] = endTs.value
+    getPacketIntervalByRange(queryCondition.value.timeRange)
+  }
+  if (Reflect.get(props.chartConfig.request.requestParams.Params, 'agg')) {
+    queryCondition.value.agg = agg.value
+  }
+  if (Reflect.get(props.chartConfig.request.requestParams.Params, 'interval')) {
+    queryCondition.value.interval = interval.value
+  }
+  if (Reflect.get(props.chartConfig.request.requestParams.Params, 'limit')) {
+    queryCondition.value.limit = limit.value
+  }
   seriesDataMaxLength = dataJson.source.length
   seriesDataMaxLength = dataJson.source.length
   if (props.chartConfig.option.isCarousel) {
   if (props.chartConfig.option.isCarousel) {
     addPieInterval(undefined, true)
     addPieInterval(undefined, true)

@@ -6,6 +6,7 @@ import { chartInitConfig } from '@/settings/designSetting'
 
 
 export const option = {
 export const option = {
   dataset: 80,
   dataset: 80,
+  valueRange: [0, 100],
   unitStr: '个',
   unitStr: '个',
   openAnim: true,
   openAnim: true,
   duration: 3,
   duration: 3,

@@ -12,6 +12,12 @@
         <n-input-number :min="0.1" step="0.5" v-model:value="optionData.duration"></n-input-number>
         <n-input-number :min="0.1" step="0.5" v-model:value="optionData.duration"></n-input-number>
       </SettingItem>
       </SettingItem>
     </SettingItemBox>
     </SettingItemBox>
+    <setting-item-box name="范围">
+      <setting-item name="范围">
+        <n-input-number :min="0" :max="99" v-model:value="optionData.valueRange[0]" />
+        <n-input-number :min="1" :max="100" v-model:value="optionData.valueRange[1]" />
+      </setting-item>
+    </setting-item-box>
     <setting-item-box name="数据源">
     <setting-item-box name="数据源">
       <setting-item name="数据">
       <setting-item name="数据">
         <n-input-number :min="0" :max="100" v-model:value="optionData.dataset" />
         <n-input-number :min="0" :max="100" v-model:value="optionData.dataset" />

@@ -260,7 +260,7 @@
               d="M202.38 399.21C205.97 399.21 208.88 402.12 208.88 405.71C208.88 409.3 205.97 412.21 202.38 412.21C198.79 412.21 195.88 409.3 195.88 405.71C195.88 402.12 198.79 399.21 202.38 399.21L202.38 399.21Z"
               d="M202.38 399.21C205.97 399.21 208.88 402.12 208.88 405.71C208.88 409.3 205.97 412.21 202.38 412.21C198.79 412.21 195.88 409.3 195.88 405.71C195.88 402.12 198.79 399.21 202.38 399.21L202.38 399.21Z"
             />
             />
             <animateMotion
             <animateMotion
-            path="M0,0 L0 -5 L0 -13 L0 -15 L0 -17 L0 -19 L0 -22 L0 -26 L0 -36
+              path="M0,0 L0 -5 L0 -13 L0 -15 L0 -17 L0 -19 L0 -22 L0 -26 L0 -36
             L0 -46 L0 -50  L0 -59 L0 -60 L0 -69 L0 -71 L0 -79 L0 -89 L0 -91 L0 -122 L0 -132 L0 -142 L0 -162 L0 -172 L0 -182 L0 -192
             L0 -46 L0 -50  L0 -59 L0 -60 L0 -69 L0 -71 L0 -79 L0 -89 L0 -91 L0 -122 L0 -132 L0 -142 L0 -162 L0 -172 L0 -182 L0 -192
             "
             "
               begin="1.5s"
               begin="1.5s"
@@ -278,7 +278,7 @@
               d="M231.69 443.18C235.28 443.18 238.19 446.09 238.19 449.68C238.19 453.27 235.28 456.18 231.69 456.18C228.1 456.18 225.19 453.27 225.19 449.68C225.19 446.09 228.1 443.18 231.69 443.18L231.69 443.18Z"
               d="M231.69 443.18C235.28 443.18 238.19 446.09 238.19 449.68C238.19 453.27 235.28 456.18 231.69 456.18C228.1 456.18 225.19 453.27 225.19 449.68C225.19 446.09 228.1 443.18 231.69 443.18L231.69 443.18Z"
             />
             />
             <animateMotion
             <animateMotion
-            path="M0,0 L0 -5 L0 -13 L0 -15 L0 -17 L0 -19 L0 -22 L0 -26 L0 -36
+              path="M0,0 L0 -5 L0 -13 L0 -15 L0 -17 L0 -19 L0 -22 L0 -26 L0 -36
             L0 -46 L0 -50  L0 -59 L0 -60 L0 -69 L0 -71 L0 -79 L0 -89 L0 -91 L0 -122 L0 -132 L0 -142 L0 -162 L0 -172 L0 -182 L0 -192
             L0 -46 L0 -50  L0 -59 L0 -60 L0 -69 L0 -71 L0 -79 L0 -89 L0 -91 L0 -122 L0 -132 L0 -142 L0 -162 L0 -172 L0 -182 L0 -192
             "
             "
               begin="1.5s"
               begin="1.5s"
@@ -296,7 +296,7 @@
               d="M231.69 443.18C235.28 443.18 238.19 446.09 238.19 449.68C238.19 453.27 235.28 456.18 231.69 456.18C228.1 456.18 225.19 453.27 225.19 449.68C225.19 446.09 228.1 443.18 231.69 443.18L231.69 443.18Z"
               d="M231.69 443.18C235.28 443.18 238.19 446.09 238.19 449.68C238.19 453.27 235.28 456.18 231.69 456.18C228.1 456.18 225.19 453.27 225.19 449.68C225.19 446.09 228.1 443.18 231.69 443.18L231.69 443.18Z"
             />
             />
             <animateMotion
             <animateMotion
-            path="M0,0 L0 -5 L0 -13 L0 -15 L0 -17 L0 -19 L0 -22 L0 -26 L0 -36
+              path="M0,0 L0 -5 L0 -13 L0 -15 L0 -17 L0 -19 L0 -22 L0 -26 L0 -36
             L0 -46 L0 -50  L0 -59 L0 -60 L0 -69 L0 -71 L0 -79 L0 -89 L0 -91 L0 -122 L0 -132 L0 -142 L0 -162 L0 -172 L0 -182 L0 -192
             L0 -46 L0 -50  L0 -59 L0 -60 L0 -69 L0 -71 L0 -79 L0 -89 L0 -91 L0 -122 L0 -132 L0 -142 L0 -162 L0 -172 L0 -182 L0 -192
             "
             "
               begin="1.5s"
               begin="1.5s"
@@ -656,7 +656,7 @@
   </div>
   </div>
 </template>
 </template>
 <script setup lang="ts">
 <script setup lang="ts">
-import { PropType, toRefs } from 'vue'
+import { PropType, toRefs, watch } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 import { CreateComponentType } from '@/packages/index.d'
 import { option } from './config'
 import { option } from './config'
 import { useChartDataFetch } from '@/hooks'
 import { useChartDataFetch } from '@/hooks'
@@ -671,13 +671,29 @@ const props = defineProps({
 
 
 const { w, h } = toRefs(props.chartConfig.attr)
 const { w, h } = toRefs(props.chartConfig.attr)
 
 
-const { dataset, unitStr, colorConfig, openAnim, duration, fontConfig } = toRefs(
+const { dataset, unitStr, colorConfig, openAnim, duration, fontConfig, valueRange } = toRefs(
   props.chartConfig.option as typeof option
   props.chartConfig.option as typeof option
 )
 )
 
 
+watch(()=>dataset.value,(newData)=>{
+  if((Number(newData)) >= valueRange.value[1]){
+    newData = valueRange.value[1]
+  }
+  if((Number(newData)) <= valueRange.value[0]){
+    newData = valueRange.value[0]
+  }
+  dataset.value = newData as number
+})
+
 // 预览更新
 // 预览更新
-useChartDataFetch(props.chartConfig, useChartEditStore, (newData: number) => {
-    dataset.value = newData
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: number | string) => {
+  if((Number(newData)) >= valueRange.value[1]){
+    newData = valueRange.value[1]
+  }
+  if((Number(newData)) <= valueRange.value[0]){
+    newData = valueRange.value[0]
+  }
+  dataset.value = newData as number
 })
 })
 </script>
 </script>
 
 

+import { PublicConfigClass } from '@/packages/public'
+import { Decorates27Config } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
+import { chartInitConfig } from '@/settings/designSetting'
+
+export const option = {
+  dataset: '模块标题',
+  fontConfig: {
+    x1: '132',
+    y1: '129.8828125',
+    x2: '103',
+    y2: '64.96000000000001',
+    datasetTspanFill: '#00F0A2',
+    titleTspanFill: '#FFFFFF',
+    datasetTspanFontSize: 30,
+  }
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = Decorates27Config.key
+  public attr = { ...chartInitConfig, w: 305, h: 110, zIndex: -1 }
+  public chartConfig = cloneDeep(Decorates27Config)
+  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 v-model:value="optionData.dataset" />
+      </setting-item>
+    </setting-item-box>
+    <SettingItemBox :name="`数据源字体配置`">
+      <SettingItem name="x">
+        <n-input-number :min="0" v-model:value="optionData.fontConfig.x1"></n-input-number>
+      </SettingItem>
+      <SettingItem name="y">
+        <n-input-number :min="0" v-model:value="optionData.fontConfig.y1"></n-input-number>
+      </SettingItem>
+      <SettingItem name="大小">
+        <n-input-number :min="0" v-model:value="optionData.fontConfig.datasetTspanFontSize"></n-input-number>
+      </SettingItem>
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.fontConfig.datasetTspanFill"
+        ></n-color-picker>
+      </SettingItem>
+    </SettingItemBox>
+  </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('Decorates27', true)
+
+export const Decorates27Config: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: '模块标题27',
+  category: ChatCategoryEnum.DECORATE,
+  categoryName: ChatCategoryEnumName.DECORATE,
+  package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.COMMON,
+  image: 'decorates27.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 420 147"
+      fill="none"
+    >
+      <g opacity="0.3">
+        <g filter="url(#filter_f159ebae-322a-4973-83f9-9355681bcf9d)">
+          <rect
+            x="9"
+            y="10"
+            width="402"
+            height="134"
+            stroke="rgba(11, 97, 184, 1)"
+            stroke-width="2"
+            fill="#011231"
+            fill-opacity="0.6"
+          ></rect>
+        </g>
+      </g>
+      <rect x="9" y="1" width="402" height="134" fill="#022C5B"></rect>
+      <g filter="url(#filter_d39fec7c-b2c4-483b-a0f9-e184380ce12e)">
+        <rect x="9" y="1" width="402" height="134" stroke="rgba(11, 97, 184, 1)" stroke-width="2"></rect>
+      </g>
+      <rect x="1" y="0" width="2" height="136" fill="#00ABFF"></rect>
+      <rect x="417" y="0" width="2" height="136" fill="#00ABFF"></rect>
+      <rect x="416" y="0" width="4" height="30" fill="#00F6FF"></rect>
+      <rect x="416" y="106" width="4" height="30" fill="#00F6FF"></rect>
+      <rect x="0" y="0" width="4" height="30" fill="#00F6FF"></rect>
+      <rect x="0" y="106" width="4" height="30" fill="#00F6FF"></rect>
+      <rect x="15" y="6" width="8" height="4" fill="#00F6FF"></rect>
+      <rect x="395" y="6" width="8" height="4" fill="#00F6FF"></rect>
+      <g opacity="0.6">
+        <rect x="382" y="6" width="8" height="4" fill="#00F6FF"></rect>
+      </g>
+      <g opacity="0.2">
+        <rect x="369" y="6" width="8" height="4" fill="#00F6FF"></rect>
+      </g>
+      <g opacity="0.6">
+        <rect x="28" y="6" width="8" height="4" fill="#00F6FF"></rect>
+      </g>
+      <g opacity="0.2">
+        <rect x="41" y="6" width="8" height="4" fill="#00F6FF"></rect>
+      </g>
+      <g opacity="0.5">
+        <path stroke="rgba(11, 97, 184, 1)" stroke-width="2" d="M134 1.5L149.5 16.5L269 16.5L284 1.5"></path>
+      </g>
+      <g opacity="0.5">
+        <path stroke="rgba(11, 97, 184, 1)" stroke-width="2" d="M134 135L149.5 120L269 120L284 135"></path>
+      </g>
+      <g opacity="1" transform="translate(11 -50)">
+        <text>
+          <tspan
+            :x="fontConfig.x1"
+            :y="fontConfig.y1"
+            :font-size="fontConfig.datasetTspanFontSize"
+            line-height="0"
+            :fill="fontConfig.datasetTspanFill"
+            opacity="1"
+            font-family="Roboto-Regular"
+            font-weight="Regular"
+            letter-spacing="0"
+          >
+            {{ dataset }}
+          </tspan>
+        </text>
+      </g>
+      <path
+        d="M85.5 33C102.9 33 117 47.1 117 64.5C117 81.9 89.87 103 85.5 103C81.13 103 54 81.9 54 64.5C54 47.1 68.1 33 85.5 33ZM85.495 54.875C90.815 54.875 95.125 59.185 95.125 64.495C95.125 69.815 90.815 74.125 85.495 74.125C80.185 74.125 75.875 69.815 75.875 64.495C75.875 59.185 80.185 54.875 85.495 54.875Z"
+        fill-rule="evenodd"
+        fill="url(#linear_fill_24aadc2d-dd75-4fb1-b98a-92d6c45d95db)"
+      ></path>
+      <path
+        fill-rule="evenodd"
+        fill="url(#linear_fill_5b832155-7920-462b-94fb-fb2e3ed3f1d4_0)"
+        d="M85.5 38C102.9 38 117 52.1 117 69.5C117 86.9 89.87 108 85.5 108C81.13 108 54 86.9 54 69.5C54 52.1 68.1 38 85.5 38ZM85.495 59.875C90.815 59.875 95.125 64.185 95.125 69.495C95.125 74.815 90.815 79.125 85.495 79.125C80.185 79.125 75.875 74.815 75.875 69.495C75.875 64.185 80.185 59.875 85.495 59.875Z"
+      ></path>
+      <path
+        fill-rule="evenodd"
+        fill="rgba(4, 220, 237, 0.26)"
+        d="M117 69.5C117 52.1 102.9 38 85.5 38C68.1 38 54 52.1 54 69.5C54 86.9 81.13 108 85.5 108C89.87 108 117 86.9 117 69.5ZM55 69.5C55 52.6553 68.6553 39 85.5 39C102.345 39 116 52.6553 116 69.5Q116 80.5209 102.176 94.5737Q97.0168 99.8181 91.6852 103.617Q86.9368 107 85.5 107Q84.0632 107 79.3148 103.617Q73.9832 99.8181 68.8241 94.5737Q55 80.5209 55 69.5ZM96.125 69.495C96.125 63.6297 91.3603 58.875 85.495 58.875C79.6297 58.875 74.875 63.6297 74.875 69.495C74.875 75.3658 79.6242 80.125 85.495 80.125C91.3658 80.125 96.125 75.3658 96.125 69.495ZM95.125 69.495C95.125 64.185 90.815 59.875 85.495 59.875C80.185 59.875 75.875 64.185 75.875 69.495C75.875 74.815 80.185 79.125 85.495 79.125C90.815 79.125 95.125 74.815 95.125 69.495Z"
+      ></path>
+      <defs>
+        <filter
+          id="filter_f159ebae-322a-4973-83f9-9355681bcf9d"
+          x="6"
+          y="7"
+          width="408"
+          height="140"
+          filterUnits="userSpaceOnUse"
+          color-interpolation-filters="sRGB"
+        >
+          <feFlood flood-opacity="0" result="feFloodId_f159ebae-322a-4973-83f9-9355681bcf9d" />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="feFloodId_f159ebae-322a-4973-83f9-9355681bcf9d"
+            result="shape"
+          />
+          <feGaussianBlur result="gaussian_blur_f159ebae-322a-4973-83f9-9355681bcf9d" stdDeviation="1" />
+        </filter>
+        <filter
+          id="filter_d39fec7c-b2c4-483b-a0f9-e184380ce12e"
+          x="8"
+          y="0"
+          width="404"
+          height="136"
+          filterUnits="userSpaceOnUse"
+          color-interpolation-filters="sRGB"
+        >
+          <feFlood flood-opacity="0" result="feFloodId_d39fec7c-b2c4-483b-a0f9-e184380ce12e" />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="feFloodId_d39fec7c-b2c4-483b-a0f9-e184380ce12e"
+            result="shape_d39fec7c-b2c4-483b-a0f9-e184380ce12e"
+          />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha_d39fec7c-b2c4-483b-a0f9-e184380ce12e"
+          />
+          <feOffset dx="0" dy="0" />
+          <feGaussianBlur stdDeviation="10" />
+          <feComposite in2="hardAlpha_d39fec7c-b2c4-483b-a0f9-e184380ce12e" operator="arithmetic" k2="-1" k3="1" />
+          <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.6509803921568628 0 0 0 0 1 0 0 0 0.8 0" />
+          <feBlend
+            mode="normal"
+            in2="shape_d39fec7c-b2c4-483b-a0f9-e184380ce12e"
+            result="innerShadow_0_d39fec7c-b2c4-483b-a0f9-e184380ce12e"
+          />
+        </filter>
+        <linearGradient
+          id="linear_fill_24aadc2d-dd75-4fb1-b98a-92d6c45d95db"
+          x1="85.5"
+          y1="103"
+          x2="85.5"
+          y2="33"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stop-color="#18698C" />
+          <stop offset="1" stop-color="#11A6A6" />
+        </linearGradient>
+        <linearGradient
+          id="linear_fill_5b832155-7920-462b-94fb-fb2e3ed3f1d4_0"
+          x1="85.5"
+          y1="108"
+          x2="85.5"
+          y2="38"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stop-color="#0E668C" />
+          <stop offset="1" stop-color="#00F2EE" />
+        </linearGradient>
+      </defs>
+    </svg>
+  </div>
+</template>
+<script setup lang="ts">
+import { PropType, toRefs } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { option } from './config'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useChartDataFetch } from '@/hooks'
+import { isObject } from '@/utils/external/is'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType & typeof option>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+
+const { dataset, fontConfig } = toRefs(props.chartConfig.option as typeof option)
+
+// 预览更新
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
+  if (isObject(newData)) return
+  dataset.value = newData as string
+})
+</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>

+import { PublicConfigClass } from '@/packages/public'
+import { Decorates28Config } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
+import { chartInitConfig } from '@/settings/designSetting'
+
+export const option = {
+  dataset: '模块标题',
+  fontConfig: {
+    x1: '132',
+    y1: '129.8828125',
+    x2: '103',
+    y2: '64.96000000000001',
+    datasetTspanFill: '#00F0A2',
+    titleTspanFill: '#FFFFFF',
+    datasetTspanFontSize: 30,
+  }
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = Decorates28Config.key
+  public attr = { ...chartInitConfig, w: 305, h: 110, zIndex: -1 }
+  public chartConfig = cloneDeep(Decorates28Config)
+  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 v-model:value="optionData.dataset" />
+      </setting-item>
+    </setting-item-box>
+    <SettingItemBox :name="`数据源字体配置`">
+      <SettingItem name="x">
+        <n-input-number :min="0" v-model:value="optionData.fontConfig.x1"></n-input-number>
+      </SettingItem>
+      <SettingItem name="y">
+        <n-input-number :min="0" v-model:value="optionData.fontConfig.y1"></n-input-number>
+      </SettingItem>
+      <SettingItem name="大小">
+        <n-input-number :min="0" v-model:value="optionData.fontConfig.datasetTspanFontSize"></n-input-number>
+      </SettingItem>
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.fontConfig.datasetTspanFill"
+        ></n-color-picker>
+      </SettingItem>
+    </SettingItemBox>
+  </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('Decorates28', true)
+
+export const Decorates28Config: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: '模块标题28',
+  category: ChatCategoryEnum.DECORATE,
+  categoryName: ChatCategoryEnumName.DECORATE,
+  package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.COMMON,
+  image: 'decorates28.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 428.1663818359375 121.5"
+      fill="none"
+    >
+      <g>
+        <g filter="url(#filter_98d03be6-b8cb-4e27-b332-bc2820d07903)">
+          <path
+            d="M409.722 14.36C409.342 13.82 408.732 13.5 408.072 13.5L44.8918 13.5C44.1218 13.5 43.4118 13.94 43.0818 14.64L12.9417 78.35C12.6517 78.95 12.6917 79.66 13.0317 80.23L35.8918 118.53C36.2518 119.13 36.9118 119.5 37.6118 119.5L385.422 119.5C386.182 119.5 386.882 119.06 387.212 118.38L425.962 39.67C426.282 39.02 426.222 38.25 425.812 37.65L409.722 14.36Z"
+            fill="#011231"
+            fill-opacity="0.6"
+          ></path>
+        </g>
+        <g filter="url(#filter_c8b60da4-9052-4ab3-a895-6acbad140e0b)">
+          <path
+            d="M409.722 14.36C409.342 13.82 408.732 13.5 408.072 13.5L44.8918 13.5C44.1218 13.5 43.4118 13.94 43.0818 14.64L12.9417 78.35C12.6517 78.95 12.6917 79.66 13.0317 80.23L35.8918 118.53C36.2518 119.13 36.9118 119.5 37.6118 119.5L385.422 119.5C386.182 119.5 386.882 119.06 387.212 118.38L425.962 39.67C426.282 39.02 426.222 38.25 425.812 37.65L409.722 14.36Z"
+            stroke="rgba(11, 97, 184, 1)"
+            stroke-width="2"
+          ></path>
+        </g>
+      </g>
+      <path
+        d="M417.481 27.54C417.791 26.89 417.731 26.13 417.331 25.54L401.581 2.38C401.211 1.83 400.591 1.5 399.921 1.5L44.2517 1.5C43.4717 1.5 42.7717 1.95 42.4417 2.66L12.9218 66.05C12.6418 66.65 12.6818 67.34 13.0118 67.91L35.4017 106.01C35.7617 106.62 36.4117 107 37.1217 107L377.731 107C378.501 107 379.201 106.56 379.531 105.87L417.481 27.54Z"
+        fill="#011231"
+        fill-opacity="0.6"
+      ></path>
+      <g filter="url(#filter_19131d1d-3e49-4887-91be-ebc5057ba529)">
+        <path
+          d="M417.481 27.54C417.791 26.89 417.731 26.13 417.331 25.54L401.581 2.38C401.211 1.83 400.591 1.5 399.921 1.5L44.2517 1.5C43.4717 1.5 42.7717 1.95 42.4417 2.66L12.9218 66.05C12.6418 66.65 12.6818 67.34 13.0118 67.91L35.4017 106.01C35.7617 106.62 36.4117 107 37.1217 107L377.731 107C378.501 107 379.201 106.56 379.531 105.87L417.481 27.54Z"
+          stroke="rgba(11, 97, 184, 1)"
+          stroke-width="2"
+        ></path>
+      </g>
+      <g opacity="0.6">
+        <path
+          d="M58.098 7.86505C57.338 7.86505 56.648 8.28505 56.308 8.96505L28.3379 64.7651C28.0279 65.3851 28.0579 66.1351 28.4279 66.7251L49.608 100.205C49.978 100.785 50.608 101.135 51.298 101.135L375.488 101.135C376.238 101.135 376.918 100.725 377.268 100.065L413.248 31.0751C413.608 30.4051 413.548 29.5851 413.098 28.9651L398.248 8.68505C397.868 8.16505 397.268 7.86505 396.628 7.86505L58.098 7.86505Z"
+          fill="#081837"
+          fill-opacity="0.6"
+        ></path>
+        <g filter="url(#filter_ecbd7b82-4d30-47dd-822d-74022aba9497)">
+          <path
+            d="M58.098 7.86505C57.338 7.86505 56.648 8.28505 56.308 8.96505L28.3379 64.7651C28.0279 65.3851 28.0579 66.1351 28.4279 66.7251L49.608 100.205C49.978 100.785 50.608 101.135 51.298 101.135L375.488 101.135C376.238 101.135 376.918 100.725 377.268 100.065L413.248 31.0751C413.608 30.4051 413.548 29.5851 413.098 28.9651L398.248 8.68505C397.868 8.16505 397.268 7.86505 396.628 7.86505L58.098 7.86505Z"
+            fill="#081837"
+            fill-opacity="0.6"
+          ></path>
+        </g>
+      </g>
+      <path
+        d="M50.4818 7.5L44.4818 20L51.9818 20L54.9818 12.5L65.9818 12.5L62.4818 7.5L50.4818 7.5Z"
+        fill="#0BD9FC"
+      ></path>
+      <path
+        d="M371.482 101L377.482 88.5L369.982 88.5L366.982 96L355.982 96L359.482 101L371.482 101Z"
+        fill="#0BD9FC"
+      ></path>
+      <g opacity="0.8">
+        <path d="M348.982 96L343.482 96L348.982 101L354.482 101L348.982 96Z" fill="#0BD9FC"></path>
+      </g>
+      <g opacity="0.6">
+        <path d="M336.982 96L331.482 96L336.982 101L342.482 101L336.982 96Z" fill="#0BD9FC"></path>
+      </g>
+      <g opacity="0.3">
+        <path d="M325.982 96L320.482 96L325.982 101L331.482 101L325.982 96Z" fill="#0BD9FC"></path>
+      </g>
+      <g opacity="0.8">
+        <path d="M72.9818 12.5L78.4818 12.5L72.9818 7.5L67.4818 7.5L72.9818 12.5Z" fill="#0BD9FC"></path>
+      </g>
+      <g opacity="0.6">
+        <path d="M84.9818 12.5L90.4818 12.5L84.9818 7.5L79.4818 7.5L84.9818 12.5Z" fill="#0BD9FC"></path>
+      </g>
+      <g opacity="0.3">
+        <path d="M95.9818 12.5L101.482 12.5L95.9818 7.5L90.4818 7.5L95.9818 12.5Z" fill="#0BD9FC"></path>
+      </g>
+      <g opacity="0.6">
+        <path
+          d="M22.1417 106C22.5117 106 22.8417 105.8 23.0217 105.47C23.1917 105.15 23.1717 104.76 22.9717 104.45L10.9917 86.05C10.7917 85.74 10.4417 85.56 10.0717 85.59C9.70171 85.62 9.38171 85.85 9.23171 86.19L1.1017 104.6C0.961703 104.91 1.0017 105.27 1.1817 105.55C1.3717 105.83 1.6817 106 2.02171 106L22.1417 106Z"
+          stroke="rgba(0, 185, 255, 1)"
+          stroke-width="2"
+          fill="#0E3F80"
+        ></path>
+      </g>
+      <g opacity="1" transform="translate(22 -65)">
+        <text>
+          <tspan
+            :x="fontConfig.x1"
+            :y="fontConfig.y1"
+            :font-size="fontConfig.datasetTspanFontSize"
+            line-height="0"
+            :fill="fontConfig.datasetTspanFill"
+            opacity="1"
+            font-family="Roboto-Regular"
+            font-weight="Regular"
+            letter-spacing="0"
+          >
+            {{ dataset }}
+          </tspan>
+        </text>
+      </g>
+      <path
+        d="M82.8819 108.069L37.6304 108.069C35.7021 108.069 34.4931 106.6 34.4426 106.537L34.395 106.478L34.3569 106.413C33.4674 104.889 12.5669 69.0836 12.0755 68.1901C11.4897 67.1249 11.7768 66.1139 12.0729 65.6206L25.08 37.9282L26.8903 38.7785L13.8059 66.6353L13.784 66.6593C13.7442 66.7397 13.6747 66.9476 13.828 67.2263C14.2959 68.0771 34.8648 103.316 36.034 105.319C36.1941 105.487 36.8063 106.069 37.6304 106.069L82.8819 106.069L82.8819 108.069Z"
+        fill="url(#linear_fill_a36ae718-b1ea-4e08-8516-037b53322938)"
+      ></path>
+      <path
+        d="M397.024 71.9896L395.227 71.1121C395.43 70.6963 415.542 29.5053 416.397 27.6251C416.809 26.7185 416.707 26.1818 416.589 26.0099L416.545 25.9688L416.483 25.8788C415.903 25.0347 402.256 5.18647 401.226 3.53913C400.579 2.50379 399.663 2.49152 399.518 2.4972L399.465 2.50367L399.439 2.50007L361.457 2.50007L361.457 0.500061L399.403 0.500061C400.241 0.446289 401.874 0.802368 402.922 2.47906C403.903 4.04908 417.289 23.5203 418.094 24.6921C418.413 25.0638 419.203 26.2852 418.217 28.4527C417.351 30.3579 397.854 70.2907 397.024 71.9896Z"
+        fill="url(#linear_fill_e679ec05-c54c-45fa-afbc-1f4cc272d7de)"
+      ></path>
+      <rect
+        x="136.48175048828125"
+        y="0.5"
+        width="174"
+        height="2"
+        stroke="rgba(0, 0, 0, 0)"
+        stroke-width="1"
+        fill="url(#linear_fill_67dd1fd1-a96a-4a67-a858-60eb1cc7970d)"
+      ></rect>
+      <rect
+        x="96.48175048828125"
+        y="106.5"
+        width="174"
+        height="2"
+        stroke="rgba(0, 0, 0, 0)"
+        stroke-width="1"
+        fill="url(#linear_fill_2d07459b-3ef9-4b88-a694-f39f3a4fb8db)"
+      ></rect>
+      <path
+        d="M84.9818 34.142C84.9827 32.629 86.2087 31.403 87.7217 31.402L110.112 31.402C111.432 31.402 112.67 32.337 113.032 33.605L115.145 40.999L137.985 40.999C139.957 40.999 141.574 42.566 141.635 44.538L141.636 44.652L141.636 73.445C141.636 75.462 139.998 77.098 137.985 77.098L88.6338 77.098C86.6168 77.098 84.9818 75.462 84.9818 73.445L84.9818 34.142ZM109.646 35.058L88.6367 35.058L88.6367 40.999L111.343 40.999L109.646 35.058Z"
+        fill-rule="evenodd"
+        fill="#00A8FF"
+      ></path>
+      <path
+        d="M84.9818 34.142C84.9827 32.629 86.2087 31.403 87.7217 31.402L110.112 31.402C111.432 31.402 112.67 32.337 113.032 33.605L115.145 40.999L137.985 40.999C139.957 40.999 141.574 42.566 141.635 44.538L141.636 44.652L141.636 73.445C141.636 75.462 139.998 77.098 137.985 77.098L88.6338 77.098C86.6168 77.098 84.9818 75.462 84.9818 73.445L84.9818 34.142ZM109.646 35.058L88.6367 35.058L88.6367 40.999L111.343 40.999L109.646 35.058Z"
+        fill="url(#linear_fill_5a73a61e-dfec-44ae-ab41-e59e92779ecb)"
+      ></path>
+      <defs>
+        <filter
+          id="filter_98d03be6-b8cb-4e27-b332-bc2820d07903"
+          x="10.74798583984375"
+          y="11.5"
+          width="417.41839599609375"
+          height="110"
+          filterUnits="userSpaceOnUse"
+          color-interpolation-filters="sRGB"
+        >
+          <feFlood flood-opacity="0" result="feFloodId_98d03be6-b8cb-4e27-b332-bc2820d07903" />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="feFloodId_98d03be6-b8cb-4e27-b332-bc2820d07903"
+            result="shape"
+          />
+          <feGaussianBlur result="gaussian_blur_98d03be6-b8cb-4e27-b332-bc2820d07903" stdDeviation="1" />
+        </filter>
+        <filter
+          id="filter_c8b60da4-9052-4ab3-a895-6acbad140e0b"
+          x="11.722366333007812"
+          y="12.5"
+          width="415.47483825683594"
+          height="108"
+          filterUnits="userSpaceOnUse"
+          color-interpolation-filters="sRGB"
+        >
+          <feFlood flood-opacity="0" result="feFloodId_c8b60da4-9052-4ab3-a895-6acbad140e0b" />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="feFloodId_c8b60da4-9052-4ab3-a895-6acbad140e0b"
+            result="shape_c8b60da4-9052-4ab3-a895-6acbad140e0b"
+          />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha_c8b60da4-9052-4ab3-a895-6acbad140e0b"
+          />
+          <feOffset dx="0" dy="0" />
+          <feGaussianBlur stdDeviation="10" />
+          <feComposite in2="hardAlpha_c8b60da4-9052-4ab3-a895-6acbad140e0b" operator="arithmetic" k2="-1" k3="1" />
+          <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.6509803921568628 0 0 0 0 1 0 0 0 0.8 0" />
+          <feBlend
+            mode="normal"
+            in2="shape_c8b60da4-9052-4ab3-a895-6acbad140e0b"
+            result="innerShadow_0_c8b60da4-9052-4ab3-a895-6acbad140e0b"
+          />
+        </filter>
+        <filter
+          id="filter_19131d1d-3e49-4887-91be-ebc5057ba529"
+          x="11.714736938476562"
+          y="0.5"
+          width="406.99278259277344"
+          height="107.5"
+          filterUnits="userSpaceOnUse"
+          color-interpolation-filters="sRGB"
+        >
+          <feFlood flood-opacity="0" result="feFloodId_19131d1d-3e49-4887-91be-ebc5057ba529" />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="feFloodId_19131d1d-3e49-4887-91be-ebc5057ba529"
+            result="shape_19131d1d-3e49-4887-91be-ebc5057ba529"
+          />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha_19131d1d-3e49-4887-91be-ebc5057ba529"
+          />
+          <feOffset dx="0" dy="0" />
+          <feGaussianBlur stdDeviation="10" />
+          <feComposite in2="hardAlpha_19131d1d-3e49-4887-91be-ebc5057ba529" operator="arithmetic" k2="-1" k3="1" />
+          <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.6509803921568628 0 0 0 0 1 0 0 0 0.8 0" />
+          <feBlend
+            mode="normal"
+            in2="shape_19131d1d-3e49-4887-91be-ebc5057ba529"
+            result="innerShadow_0_19131d1d-3e49-4887-91be-ebc5057ba529"
+          />
+        </filter>
+        <filter
+          id="filter_ecbd7b82-4d30-47dd-822d-74022aba9497"
+          x="28.125961303710938"
+          y="7.86505126953125"
+          width="385.35585021972656"
+          height="93.26998901367188"
+          filterUnits="userSpaceOnUse"
+          color-interpolation-filters="sRGB"
+        >
+          <feFlood flood-opacity="0" result="feFloodId_ecbd7b82-4d30-47dd-822d-74022aba9497" />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="feFloodId_ecbd7b82-4d30-47dd-822d-74022aba9497"
+            result="shape_ecbd7b82-4d30-47dd-822d-74022aba9497"
+          />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha_ecbd7b82-4d30-47dd-822d-74022aba9497"
+          />
+          <feOffset dx="0" dy="0" />
+          <feGaussianBlur stdDeviation="10" />
+          <feComposite in2="hardAlpha_ecbd7b82-4d30-47dd-822d-74022aba9497" operator="arithmetic" k2="-1" k3="1" />
+          <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.6509803921568628 0 0 0 0 1 0 0 0 0.8 0" />
+          <feBlend
+            mode="normal"
+            in2="shape_ecbd7b82-4d30-47dd-822d-74022aba9497"
+            result="innerShadow_0_ecbd7b82-4d30-47dd-822d-74022aba9497"
+          />
+        </filter>
+        <linearGradient
+          id="linear_fill_a36ae718-b1ea-4e08-8516-037b53322938"
+          x1="20.389801025390625"
+          y1="80.09097290039062"
+          x2="47.30860900878906"
+          y2="63.687042236328125"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stop-color="#00F6FF" />
+          <stop offset="1" stop-color="#0055D5" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient
+          id="linear_fill_e679ec05-c54c-45fa-afbc-1f4cc272d7de"
+          x1="410.9110107421875"
+          y1="15.723907470703125"
+          x2="380.83074951171875"
+          y2="39.813629150390625"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stop-color="#00F6FF" />
+          <stop offset="1" stop-color="#0055D5" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient
+          id="linear_fill_67dd1fd1-a96a-4a67-a858-60eb1cc7970d"
+          x1="311.72615027427673"
+          y1="2.5"
+          x2="141.3970258012414"
+          y2="4.917073726654053"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stop-color="#05EEFF" stop-opacity="0" />
+          <stop offset="0.519694983959198" stop-color="#00D2FF" />
+          <stop offset="1" stop-color="#04679A" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient
+          id="linear_fill_2d07459b-3ef9-4b88-a694-f39f3a4fb8db"
+          x1="271.72615027427673"
+          y1="108.5"
+          x2="101.3970258012414"
+          y2="110.91707372665405"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stop-color="#05EEFF" stop-opacity="0" />
+          <stop offset="0.519694983959198" stop-color="#00D2FF" />
+          <stop offset="1" stop-color="#04679A" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient
+          id="linear_fill_5a73a61e-dfec-44ae-ab41-e59e92779ecb"
+          x1="84.98175048828125"
+          y1="77.0980224609375"
+          x2="84.98175048828125"
+          y2="31.402008056640625"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stop-color="#2787FF" />
+          <stop offset="1" stop-color="#46FBFD" />
+        </linearGradient>
+      </defs>
+    </svg>
+  </div>
+</template>
+<script setup lang="ts">
+import { PropType, toRefs } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { option } from './config'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useChartDataFetch } from '@/hooks'
+import { isObject } from '@/utils/external/is'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType & typeof option>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+
+const { dataset, fontConfig } = toRefs(props.chartConfig.option as typeof option)
+
+// 预览更新
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
+  if (isObject(newData)) return
+  dataset.value = newData as string
+})
+</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>

+import { PublicConfigClass } from '@/packages/public'
+import { Decorates29Config } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
+import { chartInitConfig } from '@/settings/designSetting'
+
+export const option = {
+  dataset: '模块标题',
+  fontConfig: {
+    x1: '132',
+    y1: '129.8828125',
+    x2: '103',
+    y2: '64.96000000000001',
+    datasetTspanFill: '#00F0A2',
+    titleTspanFill: '#FFFFFF',
+    datasetTspanFontSize: 30,
+  }
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = Decorates29Config.key
+  public attr = { ...chartInitConfig, w: 305, h: 110, zIndex: -1 }
+  public chartConfig = cloneDeep(Decorates29Config)
+  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 v-model:value="optionData.dataset" />
+      </setting-item>
+    </setting-item-box>
+    <SettingItemBox :name="`数据源字体配置`">
+      <SettingItem name="x">
+        <n-input-number :min="0" v-model:value="optionData.fontConfig.x1"></n-input-number>
+      </SettingItem>
+      <SettingItem name="y">
+        <n-input-number :min="0" v-model:value="optionData.fontConfig.y1"></n-input-number>
+      </SettingItem>
+      <SettingItem name="大小">
+        <n-input-number :min="0" v-model:value="optionData.fontConfig.datasetTspanFontSize"></n-input-number>
+      </SettingItem>
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.fontConfig.datasetTspanFill"
+        ></n-color-picker>
+      </SettingItem>
+    </SettingItemBox>
+  </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('Decorates29', true)
+
+export const Decorates29Config: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: '模块标题29',
+  category: ChatCategoryEnum.DECORATE,
+  categoryName: ChatCategoryEnumName.DECORATE,
+  package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.COMMON,
+  image: 'decorates29.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 625 188"
+      fill="none"
+    >
+      <path
+        d="M625 23L103 23L103 23.04C138.72 23.54 168.05 50.35 172.45 84.98C168.59 88.55 162.6 93.75 162.64 94C162.64 94.29 168.77 98.65 173.03 101.79C169.13 137 139.12 164.46 103 164.96L103 165L625 165L625 23Z"
+        fill="url(#linear_fill_8429581d-818b-40fa-b8e2-65e2f7ce17f2)"
+      ></path>
+      <path
+        d="M173 85.5C169.44 87.88 161.71 94 163 94C161.71 94 169.03 99.42 173 101.5C170.24 126.95 157.91 141 154.61 141L595 141L595 47L153 47C155.18 47 171.69 62.91 173 85.5Z"
+        fill="url(#linear_fill_552846d5-6f9c-4dc7-9f6f-1867df41fd74)"
+      ></path>
+      <rect x="109" y="163" width="516" height="2" fill="url(#linear_fill_5bbe4e01-073b-4a63-b060-4cb8ef016116)"></rect>
+      <rect x="109" y="23" width="516" height="2" fill="url(#linear_fill_009e1028-4c17-4ca5-9439-a3ea85c86a5e)"></rect>
+      <g>
+        <path
+          fill="#063475"
+          fill-opacity="0.6"
+          d="M103 0C51.09 0 9 42.09 9 94C9 145.91 51.09 188 103 188C154.91 188 197 145.91 197 94C197 42.09 154.91 0 103 0Z"
+        ></path>
+        <path
+          fill-rule="evenodd"
+          fill="rgba(3, 169, 255, 0.43)"
+          d="M9 94C9 42.09 51.09 0 103 0C154.91 0 197 42.09 197 94C197 145.91 154.91 188 103 188C51.09 188 9 145.91 9 94ZM11 94C11 43.1898 52.1898 2 103 2C153.81 2 195 43.1898 195 94C195 144.81 153.81 186 103 186C52.1898 186 11 144.81 11 94Z"
+        ></path>
+      </g>
+      <path
+        d="M173.42 84.98C169.02 50.02 139.15 23 103 23C66.85 23 36.98 50.02 32.58 84.98C36.4 88.59 42.43 93.75 42.39 94C42.39 94.29 36.26 98.65 32 101.79C35.9 137.33 66.42 165 103 165C139.58 165 170.1 137.33 174 101.79C169.74 98.65 163.61 94.29 163.61 94C163.57 93.75 169.6 88.59 173.42 84.98Z"
+        fill="#0B305F"
+        fill-opacity="0.6"
+      ></path>
+      <g filter="url(#filter_4913fbad-67bd-4cb2-8b05-e187c1858401)">
+        <path
+          fill-rule="evenodd"
+          fill="rgba(27, 140, 199, 1)"
+          d="M103 23C139.15 23 169.02 50.02 173.42 84.98C171.698 86.6074 169.527 88.5497 167.665 90.2153C165.397 92.2444 163.588 93.8627 163.61 94C163.61 94.29 169.74 98.65 174 101.79C170.1 137.33 139.58 165 103 165C66.42 165 35.9 137.33 32 101.79C36.26 98.65 42.39 94.29 42.39 94C42.412 93.8627 40.603 92.2444 38.3349 90.2152C36.4731 88.5497 34.302 86.6074 32.58 84.98C36.98 50.02 66.85 23 103 23ZM34.6979 84.2221Q36.4313 85.8287 39.6684 88.7247Q44.0053 92.6046 44.3437 94L44.39 94Q44.39 94.0655 44.3685 94.1431Q44.3776 94.2363 44.3649 94.316L44.306 94.3066Q43.5918 95.8122 36.8034 100.756Q35.1678 101.947 34.1219 102.713Q37.2751 127.952 56.579 145.232Q76.4268 163 103 163Q129.573 163 149.421 145.232Q168.725 127.952 171.878 102.713Q170.832 101.947 169.196 100.756Q162.408 95.8121 161.694 94.3065L161.635 94.3159Q161.622 94.2363 161.631 94.1431Q161.61 94.0655 161.61 94L161.656 94Q161.995 92.6047 166.332 88.7247Q169.569 85.8287 171.302 84.2221Q167.828 59.2722 148.789 42.3759Q129.209 25 103 25Q76.7914 25 57.2113 42.3759Q38.1718 59.2721 34.6979 84.2221Z"
+        ></path>
+      </g>
+      <g opacity="0.2">
+        <g filter="url(#filter_72875209-e966-4c55-8b84-785fbe6126cc)">
+          <path
+            fill="#0B305F"
+            fill-opacity="0.6"
+            d="M163.5 86.25C159.72 56.22 134.06 33 103 33C71.94 33 46.28 56.22 42.5 86.25C45.78 89.35 50.96 93.78 50.93 94C50.93 94.25 45.66 98 42 100.7C45.35 131.23 71.57 155 103 155C134.43 155 160.65 131.23 164 100.7C160.34 98 155.07 94.25 155.07 94C155.04 93.78 160.22 89.35 163.5 86.25Z"
+          ></path>
+          <path
+            fill-rule="evenodd"
+            fill="rgba(26, 148, 214, 1)"
+            d="M103 33C134.06 33 159.72 56.22 163.5 86.25C162.021 87.648 160.155 89.3165 158.555 90.7473C156.608 92.4894 155.054 93.8792 155.07 94C155.07 94.25 160.34 98 164 100.7C160.65 131.23 134.43 155 103 155C71.57 155 45.35 131.23 42 100.7C45.66 98 50.93 94.25 50.93 94C50.9465 93.8792 49.3924 92.4894 47.4446 90.7473C45.8447 89.3165 43.9792 87.648 42.5 86.25C46.28 56.22 71.94 33 103 33ZM43.5575 85.8711Q45.0601 87.2732 48.1112 90.0019Q51.6678 93.1827 51.9057 94L51.93 94Q51.93 94.0283 51.9196 94.0629Q51.9253 94.1026 51.9208 94.1351L51.8923 94.1312Q51.4459 95.045 45.7197 99.2179Q44.0219 100.455 43.0592 101.162Q45.6913 123.386 62.6369 138.554Q79.8937 154 103 154Q126.106 154 143.363 138.554Q160.309 123.386 162.941 101.162Q161.977 100.455 160.28 99.218Q154.554 95.045 154.108 94.1312L154.079 94.1351Q154.075 94.1026 154.08 94.0629Q154.07 94.0283 154.07 94L154.094 94Q154.332 93.1827 157.889 90.0019Q160.94 87.2733 162.442 85.8711Q159.513 63.9305 142.816 49.1117Q125.79 34 103 34Q80.2103 34 63.1838 49.1117Q46.4873 63.9304 43.5575 85.8711Z"
+          ></path>
+        </g>
+      </g>
+      <g opacity="0.2">
+        <rect
+          x="10.606597900390625"
+          y="89"
+          width="15"
+          height="15"
+          transform="rotate(45 10.606597900390625 89)"
+          fill="#03A9FF"
+        ></rect>
+      </g>
+      <g opacity="0.2">
+        <rect
+          x="195.6099853515625"
+          y="89.0033950805664"
+          width="15"
+          height="15"
+          transform="rotate(45 195.6099853515625 89.0033950805664)"
+          fill="#03A9FF"
+        ></rect>
+      </g>
+      <g opacity="0.2">
+        <rect
+          x="10.606597900390625"
+          y="79"
+          width="15"
+          height="15"
+          transform="rotate(45 10.606597900390625 79)"
+          fill="#03A9FF"
+        ></rect>
+      </g>
+      <g opacity="0.2">
+        <rect
+          x="195.6099853515625"
+          y="79.0033950805664"
+          width="15"
+          height="15"
+          transform="rotate(45 195.6099853515625 79.0033950805664)"
+          fill="#03A9FF"
+        ></rect>
+      </g>
+      <path
+        fill-rule="evenodd"
+        fill="rgba(3, 169, 255, 1)"
+        d="M10.6066 105.213L-3.8147e-06 94.6066L10.6066 84L21.2132 94.6066L10.6066 105.213ZM15.5563 94.6066L10.6066 89.6569L5.65685 94.6066L10.6066 99.5564L15.5563 94.6066Z"
+      ></path>
+      <path
+        fill-rule="evenodd"
+        fill="rgba(3, 169, 255, 1)"
+        d="M195.61 105.217L185.003 94.61L195.61 84.0034L206.217 94.61L195.61 105.217ZM200.56 94.61L195.61 89.6602L190.66 94.61L195.61 99.5597L200.56 94.61Z"
+      ></path>
+      <g opacity="1" transform="translate(88 -26)">
+        <text>
+          <tspan
+            :x="fontConfig.x1"
+            :y="fontConfig.y1"
+            :font-size="fontConfig.datasetTspanFontSize"
+            line-height="0"
+            :fill="fontConfig.datasetTspanFill"
+            opacity="1"
+            font-family="Roboto-Regular"
+            font-weight="Regular"
+            letter-spacing="0"
+          >
+            {{ dataset }}
+          </tspan>
+        </text>
+      </g>
+      <g filter="url(#filter_375ad2c7-128f-4997-9ac6-7bbb64a0f289)">
+        <path
+          d="M84.9911 72.02L84.9911 63L99.9911 63L99.9911 72.16C96.1911 72.55 92.4711 73.65 89.1011 75.42L84.9911 72.02ZM116.898 75.42C113.498 73.65 109.808 72.55 105.978 72.16L105.978 63L120.978 63L120.978 72.02L116.898 75.42ZM103 126.004C89.74 126.034 79 115.284 79 102.004C79 88.7635 89.74 78.0135 103 78.0135C116.26 78.0135 127 88.7635 127 102.004C127 115.284 116.26 126.004 103 126.004ZM99.0269 96.5394L102.997 88.5194L106.967 96.5394L115.837 97.8194L109.417 104.069L110.937 112.899L102.997 108.719L95.0569 112.899L96.5869 104.069L90.1669 97.8194L99.0269 96.5394Z"
+          fill-rule="evenodd"
+          fill="url(#linear_fill_375ad2c7-128f-4997-9ac6-7bbb64a0f289)"
+        ></path>
+      </g>
+      <path
+        fill-rule="evenodd"
+        fill="url(#linear_fill_5d114998-6e33-4cae-9064-4cf557eef946_0)"
+        d="M84.9911 69.02L84.9911 60L99.9911 60L99.9911 69.16C96.1911 69.55 92.4711 70.65 89.1011 72.42L84.9911 69.02ZM116.898 72.42C113.498 70.65 109.808 69.55 105.978 69.16L105.978 60L120.978 60L120.978 69.02L116.898 72.42ZM103 123.004C89.74 123.034 79 112.284 79 99.0035C79 85.7635 89.74 75.0135 103 75.0135C116.26 75.0135 127 85.7635 127 99.0035C127 112.284 116.26 123.004 103 123.004ZM109.417 101.069L110.937 109.899L102.997 105.719L95.0569 109.899L96.5869 101.069L90.1669 94.8194L99.0269 93.5394L102.997 85.5194L106.967 93.5394L115.837 94.8194L109.417 101.069Z"
+      ></path>
+      <path
+        fill-rule="evenodd"
+        fill="rgba(159, 223, 255, 1)"
+        d="M84.9911 69.02L84.9911 60L99.9911 60L99.9911 69.16C96.1911 69.55 92.4711 70.65 89.1011 72.42L84.9911 69.02ZM89.2315 71.2301Q93.8202 68.9448 98.9911 68.2698L98.9911 61L85.9911 61L85.9911 68.5494L89.2315 71.2301ZM116.898 72.42C113.498 70.65 109.808 69.55 105.978 69.16L105.978 60L120.978 60L120.978 69.02L116.898 72.42ZM119.978 68.5516L119.978 61L106.978 61L106.978 68.2693Q112.128 68.9391 116.763 71.2304L119.978 68.5516ZM79 99.0035C79 112.284 89.74 123.034 103 123.004C116.26 123.004 127 112.284 127 99.0035C127 85.7635 116.26 75.0135 103 75.0135C89.74 75.0135 79 85.7635 79 99.0035ZM126 99.0035C126 111.706 115.703 122.004 103 122.004L102.998 122.004C90.2749 122.032 80 111.726 80 99.0035C80 86.301 90.2975 76.0135 103 76.0135C115.697 76.0135 126 86.3065 126 99.0035ZM109.417 101.069L110.723 108.657L110.937 109.899L109.821 109.312L102.997 105.719L96.1737 109.311L95.0569 109.899L95.2724 108.656L96.5869 101.069L91.0706 95.6992L90.1669 94.8194L91.4152 94.6391L99.0269 93.5394L102.439 86.6465L102.997 85.5194L103.555 86.6465L106.967 93.5394L114.588 94.6392L115.837 94.8194L114.933 95.6993L109.417 101.069ZM107.63 92.6247L102.997 83.2653L98.3638 92.6248L88.0148 94.1199L95.5116 101.418L93.7247 111.731L102.997 106.85L112.267 111.73L110.492 101.419L117.989 94.1196L107.63 92.6247Z"
+      ></path>
+      <defs>
+        <linearGradient
+          id="linear_fill_8429581d-818b-40fa-b8e2-65e2f7ce17f2"
+          x1="103"
+          y1="94"
+          x2="625"
+          y2="94"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stop-color="#0C3162" />
+          <stop offset="1" stop-color="#010E24" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient
+          id="linear_fill_552846d5-6f9c-4dc7-9f6f-1867df41fd74"
+          x1="153"
+          y1="94"
+          x2="595"
+          y2="94"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stop-color="#0C3162" />
+          <stop offset="1" stop-color="#0B2F6E" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient
+          id="linear_fill_5bbe4e01-073b-4a63-b060-4cb8ef016116"
+          x1="109"
+          y1="164"
+          x2="625"
+          y2="164"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stop-color="#1B8CC7" />
+          <stop offset="1" stop-color="#1B8CC7" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient
+          id="linear_fill_009e1028-4c17-4ca5-9439-a3ea85c86a5e"
+          x1="109"
+          y1="24"
+          x2="625"
+          y2="24"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stop-color="#1B8CC7" />
+          <stop offset="1" stop-color="#1B8CC7" stop-opacity="0" />
+        </linearGradient>
+        <filter
+          id="filter_4913fbad-67bd-4cb2-8b05-e187c1858401"
+          x="32"
+          y="23"
+          width="142"
+          height="142"
+          filterUnits="userSpaceOnUse"
+          color-interpolation-filters="sRGB"
+        >
+          <feFlood flood-opacity="0" result="feFloodId_4913fbad-67bd-4cb2-8b05-e187c1858401" />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="feFloodId_4913fbad-67bd-4cb2-8b05-e187c1858401"
+            result="shape_4913fbad-67bd-4cb2-8b05-e187c1858401"
+          />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha_4913fbad-67bd-4cb2-8b05-e187c1858401"
+          />
+          <feOffset dx="0" dy="0" />
+          <feGaussianBlur stdDeviation="5" />
+          <feComposite in2="hardAlpha_4913fbad-67bd-4cb2-8b05-e187c1858401" operator="arithmetic" k2="-1" k3="1" />
+          <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.7843137254901961 0 0 0 0 1 0 0 0 0.6 0" />
+          <feBlend
+            mode="normal"
+            in2="shape_4913fbad-67bd-4cb2-8b05-e187c1858401"
+            result="innerShadow_0_4913fbad-67bd-4cb2-8b05-e187c1858401"
+          />
+        </filter>
+        <filter
+          id="filter_72875209-e966-4c55-8b84-785fbe6126cc"
+          x="40"
+          y="31"
+          width="126"
+          height="126"
+          filterUnits="userSpaceOnUse"
+          color-interpolation-filters="sRGB"
+        >
+          <feFlood flood-opacity="0" result="feFloodId_72875209-e966-4c55-8b84-785fbe6126cc" />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="feFloodId_72875209-e966-4c55-8b84-785fbe6126cc"
+            result="shape"
+          />
+          <feGaussianBlur result="gaussian_blur_72875209-e966-4c55-8b84-785fbe6126cc" stdDeviation="1" />
+        </filter>
+        <linearGradient
+          id="linear_fill_375ad2c7-128f-4997-9ac6-7bbb64a0f289"
+          x1="103"
+          y1="126"
+          x2="103"
+          y2="63"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stop-color="#1B7BB3" />
+          <stop offset="1" stop-color="#2BACBA" />
+        </linearGradient>
+        <filter
+          id="filter_375ad2c7-128f-4997-9ac6-7bbb64a0f289"
+          x="69"
+          y="53"
+          width="68"
+          height="83.03350067138672"
+          filterUnits="userSpaceOnUse"
+          color-interpolation-filters="sRGB"
+        >
+          <feFlood flood-opacity="0" result="feFloodId_375ad2c7-128f-4997-9ac6-7bbb64a0f289" />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha_375ad2c7-128f-4997-9ac6-7bbb64a0f289"
+          />
+          <feOffset dx="0" dy="0" />
+          <feGaussianBlur stdDeviation="5" />
+          <feComposite in2="hardAlpha_375ad2c7-128f-4997-9ac6-7bbb64a0f289" operator="out" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 0.27058823529411763 0 0 0 0 0.7803921568627451 0 0 0 0 1 0 0 0 0.5 0"
+          />
+          <feBlend
+            mode="normal"
+            in2="feFloodId_375ad2c7-128f-4997-9ac6-7bbb64a0f289"
+            result="dropShadow_1_375ad2c7-128f-4997-9ac6-7bbb64a0f289"
+          />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="dropShadow_1_375ad2c7-128f-4997-9ac6-7bbb64a0f289"
+            result="shape_375ad2c7-128f-4997-9ac6-7bbb64a0f289"
+          />
+        </filter>
+        <linearGradient
+          id="linear_fill_5d114998-6e33-4cae-9064-4cf557eef946_0"
+          x1="103"
+          y1="123"
+          x2="103"
+          y2="60"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stop-color="#3AB4F9" />
+          <stop offset="1" stop-color="#6DD0DA" />
+        </linearGradient>
+      </defs>
+    </svg>
+  </div>
+</template>
+<script setup lang="ts">
+import { PropType, toRefs } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { option } from './config'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useChartDataFetch } from '@/hooks'
+import { isObject } from '@/utils/external/is'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType & typeof option>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+
+const { dataset, fontConfig } = toRefs(props.chartConfig.option as typeof option)
+
+// 预览更新
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
+  if (isObject(newData)) return
+  dataset.value = newData as string
+})
+</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>

+import { PublicConfigClass } from '@/packages/public'
+import { Decorates30Config } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
+import { chartInitConfig } from '@/settings/designSetting'
+
+export const option = {
+  dataset: '32',
+  unitStr: '个',
+  titleStr: '设备总数',
+  fontConfig: {
+    x1: '320', //数据源
+    y1: '80',
+    x2: '366', //单位
+    y2: '79',
+    x3: '11', //标题
+    y3: '79',
+    datasetTspanFill: '#00F0A2',
+    titleTspanFill: '#FFFFFF',
+    unitTspanFill: '#FFFFFF',
+    datasetTspanFontSize: 30,
+    titleTspanFontSize: 30,
+    unitTspanFontSize: 30
+  }
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = Decorates30Config.key
+  public attr = { ...chartInitConfig, w: 305, h: 110, zIndex: -1 }
+  public chartConfig = cloneDeep(Decorates30Config)
+  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 v-model:value="optionData.dataset" />
+      </setting-item>
+      <setting-item name="单位">
+        <n-input v-model:value="optionData.unitStr" />
+      </setting-item>
+      <setting-item name="标题">
+        <n-input v-model:value="optionData.titleStr" />
+      </setting-item>
+    </setting-item-box>
+    <SettingItemBox :name="`单位字体配置`">
+      <SettingItem name="x">
+        <n-input-number :min="0" v-model:value="optionData.fontConfig.x2"></n-input-number>
+      </SettingItem>
+      <SettingItem name="y">
+        <n-input-number :min="0" v-model:value="optionData.fontConfig.y2"></n-input-number>
+      </SettingItem>
+      <SettingItem name="大小">
+        <n-input-number :min="0" v-model:value="optionData.fontConfig.unitTspanFontSize"></n-input-number>
+      </SettingItem>
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.fontConfig.unitTspanFill"
+        ></n-color-picker>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox :name="`数据源字体配置`">
+      <SettingItem name="x">
+        <n-input-number :min="0" v-model:value="optionData.fontConfig.x1"></n-input-number>
+      </SettingItem>
+      <SettingItem name="y">
+        <n-input-number :min="0" v-model:value="optionData.fontConfig.y1"></n-input-number>
+      </SettingItem>
+      <SettingItem name="大小">
+        <n-input-number :min="0" v-model:value="optionData.fontConfig.datasetTspanFontSize"></n-input-number>
+      </SettingItem>
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.fontConfig.datasetTspanFill"
+        ></n-color-picker>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox :name="`标题字体配置`">
+      <SettingItem name="x">
+        <n-input-number :min="0" v-model:value="optionData.fontConfig.x3"></n-input-number>
+      </SettingItem>
+      <SettingItem name="y">
+        <n-input-number :min="0" v-model:value="optionData.fontConfig.y3"></n-input-number>
+      </SettingItem>
+      <SettingItem name="大小">
+        <n-input-number :min="0" v-model:value="optionData.fontConfig.titleTspanFontSize"></n-input-number>
+      </SettingItem>
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.fontConfig.titleTspanFill"
+        ></n-color-picker>
+      </SettingItem>
+    </SettingItemBox>
+  </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('Decorates30', true)
+
+export const Decorates30Config: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: '数据标题30',
+  category: ChatCategoryEnum.DECORATE,
+  categoryName: ChatCategoryEnumName.DECORATE,
+  package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.COMMON,
+  image: 'decorates30.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 442 141"
+      fill="none"
+    >
+      <g>
+        <g filter="url(#filter_95b2f60e-40ab-42fb-81a1-c50e11e63c01)">
+          <rect x="11" y="19" width="429" height="120" fill="#012651" fill-opacity="0.5"></rect>
+          <path
+            fill-rule="evenodd"
+            fill="rgba(1, 80, 152, 1)"
+            d="M440 139L11 139L11 19L440 19L440 139ZM438 21L13 21L13 137L438 137L438 21Z"
+          ></path>
+        </g>
+      </g>
+      <rect x="0" y="11" width="429" height="120" fill="#012651" fill-opacity="0.5"></rect>
+      <g filter="url(#filter_edebad1d-8cf8-4ddf-87ba-cceec465951b)">
+        <path
+          fill-rule="evenodd"
+          fill="rgba(1, 80, 152, 1)"
+          d="M429 131L0 131L0 11L429 11L429 131ZM427 13L2 13L2 129L427 129L427 13Z"
+        ></path>
+      </g>
+      <path d="M0 7.2L370 7.2L366.29 3.76L127.79 3.76L122.29 0L3.79 0.59L0 7.2Z" fill="#008AFF"></path>
+      <rect x="417" y="1.199951171875" width="11" height="6" fill="#00FDC7"></rect>
+      <rect x="12" y="20" width="6" height="6" fill="#00EEFD"></rect>
+      <g opacity="0.5">
+        <rect x="24" y="20" width="6" height="6" fill="#00EEFD"></rect>
+      </g>
+      <g opacity="0.2">
+        <rect x="36" y="20" width="6" height="6" fill="#00EEFD"></rect>
+      </g>
+      <rect x="399" y="1.199951171875" width="11" height="6" fill="#00FDC7" fill-opacity="0.6"></rect>
+      <rect x="381" y="1.199951171875" width="11" height="6" fill="#00FDC7" fill-opacity="0.2"></rect>
+      <path d="M403 131L429 131L429 102L403 131Z" fill="#00B5C6"></path>
+      <path
+        d="M3 129L31.5 129L87.5 13L59 13L3 129Z"
+        fill="url(#linear_fill_d377d882-63b6-4b2f-b075-f04757ddaaf2)"
+      ></path>
+      <path
+        d="M51.8571 129L80.3571 129L136.357 13L107.857 13L51.8571 129Z"
+        fill="url(#linear_fill_bffa1776-bd2b-433f-8c5d-b7a711801df9)"
+      ></path>
+      <path
+        d="M100.714 129L129.214 129L185.214 13L156.714 13L100.714 129Z"
+        fill="url(#linear_fill_c9bca278-5d80-4ff7-ba93-f353162e7011)"
+      ></path>
+      <path
+        d="M149.571 129L178.071 129L234.071 13L205.571 13L149.571 129Z"
+        fill="url(#linear_fill_8c82d359-5e14-4e92-a053-701212e20ddb)"
+      ></path>
+      <path
+        d="M198.429 129L226.929 129L282.929 13L254.429 13L198.429 129Z"
+        fill="url(#linear_fill_c1497f7e-7db6-469b-916e-03fb85481d4e)"
+      ></path>
+      <path
+        d="M247.286 129L275.786 129L331.786 13L303.286 13L247.286 129Z"
+        fill="url(#linear_fill_52ee754d-41b8-4575-9561-981422976caa)"
+      ></path>
+      <path
+        d="M296.143 129L324.643 129L380.643 13L352.143 13L296.143 129Z"
+        fill="url(#linear_fill_3febdb91-9c5c-4985-97d3-16ec34fa4b5c)"
+      ></path>
+      <path
+        d="M345 129L373.5 129L429.5 13L401 13L345 129Z"
+        fill="url(#linear_fill_bd8f0060-6382-48ce-9408-29c6216ec4cc)"
+      ></path>
+      <g>
+        <text>
+          <tspan
+            :x="fontConfig.x3"
+            :y="fontConfig.y3"
+            :font-size="fontConfig.titleTspanFontSize"
+            line-height="0"
+            :fill="fontConfig.titleTspanFill"
+            opacity="1"
+            font-family="Roboto-Regular"
+            font-weight="Regular"
+            letter-spacing="0"
+          >
+            {{ titleStr }}
+          </tspan>
+        </text>
+      </g>
+      <g opacity="0.8">
+        <text>
+          <tspan
+            :x="fontConfig.x2"
+            :y="fontConfig.y2"
+            :font-size="fontConfig.unitTspanFontSize"
+            line-height="0"
+            :fill="fontConfig.unitTspanFill"
+            opacity="1"
+            font-family="Roboto-Regular"
+            font-weight="Regular"
+            letter-spacing="0"
+          >
+            {{ unitStr }}
+          </tspan>
+        </text>
+      </g>
+      <g>
+        <text>
+          <tspan
+            :x="fontConfig.x1"
+            :y="fontConfig.y1"
+            :font-size="fontConfig.datasetTspanFontSize"
+            line-height="0"
+            :fill="fontConfig.datasetTspanFill"
+            opacity="1"
+            font-family="Roboto-Regular"
+            font-weight="Regular"
+            letter-spacing="0"
+          >
+            {{ dataset }}
+          </tspan>
+        </text>
+      </g>
+      <defs>
+        <filter
+          id="filter_95b2f60e-40ab-42fb-81a1-c50e11e63c01"
+          x="9"
+          y="17"
+          width="433"
+          height="124"
+          filterUnits="userSpaceOnUse"
+          color-interpolation-filters="sRGB"
+        >
+          <feFlood flood-opacity="0" result="feFloodId_95b2f60e-40ab-42fb-81a1-c50e11e63c01" />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="feFloodId_95b2f60e-40ab-42fb-81a1-c50e11e63c01"
+            result="shape"
+          />
+          <feGaussianBlur result="gaussian_blur_95b2f60e-40ab-42fb-81a1-c50e11e63c01" stdDeviation="1" />
+        </filter>
+        <filter
+          id="filter_edebad1d-8cf8-4ddf-87ba-cceec465951b"
+          x="0"
+          y="11"
+          width="429"
+          height="120"
+          filterUnits="userSpaceOnUse"
+          color-interpolation-filters="sRGB"
+        >
+          <feFlood flood-opacity="0" result="feFloodId_edebad1d-8cf8-4ddf-87ba-cceec465951b" />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="feFloodId_edebad1d-8cf8-4ddf-87ba-cceec465951b"
+            result="shape_edebad1d-8cf8-4ddf-87ba-cceec465951b"
+          />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha_edebad1d-8cf8-4ddf-87ba-cceec465951b"
+          />
+          <feOffset dx="0" dy="0" />
+          <feGaussianBlur stdDeviation="5" />
+          <feComposite in2="hardAlpha_edebad1d-8cf8-4ddf-87ba-cceec465951b" operator="arithmetic" k2="-1" k3="1" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0.9333333333333333 0 0 0 0 0.9921568627450981 0 0 0 0.5 0"
+          />
+          <feBlend
+            mode="normal"
+            in2="shape_edebad1d-8cf8-4ddf-87ba-cceec465951b"
+            result="innerShadow_0_edebad1d-8cf8-4ddf-87ba-cceec465951b"
+          />
+        </filter>
+        <linearGradient
+          id="linear_fill_d377d882-63b6-4b2f-b075-f04757ddaaf2"
+          x1="25.0595703125"
+          y1="129"
+          x2="74.54360961914062"
+          y2="32.833740234375"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stop-color="#2466BD" stop-opacity="0.2" />
+          <stop offset="1" stop-color="#2466BD" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient
+          id="linear_fill_bffa1776-bd2b-433f-8c5d-b7a711801df9"
+          x1="73.91671752929688"
+          y1="129"
+          x2="123.4007568359375"
+          y2="32.833740234375"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stop-color="#2466BD" stop-opacity="0.2" />
+          <stop offset="1" stop-color="#2466BD" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient
+          id="linear_fill_c9bca278-5d80-4ff7-ba93-f353162e7011"
+          x1="122.77386474609375"
+          y1="129"
+          x2="172.25790405273438"
+          y2="32.833740234375"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stop-color="#2466BD" stop-opacity="0.2" />
+          <stop offset="1" stop-color="#2466BD" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient
+          id="linear_fill_8c82d359-5e14-4e92-a053-701212e20ddb"
+          x1="171.6309814453125"
+          y1="129"
+          x2="221.11502075195312"
+          y2="32.833740234375"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stop-color="#2466BD" stop-opacity="0.2" />
+          <stop offset="1" stop-color="#2466BD" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient
+          id="linear_fill_c1497f7e-7db6-469b-916e-03fb85481d4e"
+          x1="220.4881591796875"
+          y1="129"
+          x2="269.9721984863281"
+          y2="32.833740234375"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stop-color="#2466BD" stop-opacity="0.2" />
+          <stop offset="1" stop-color="#2466BD" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient
+          id="linear_fill_52ee754d-41b8-4575-9561-981422976caa"
+          x1="269.34527587890625"
+          y1="129"
+          x2="318.8293151855469"
+          y2="32.833740234375"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stop-color="#2466BD" stop-opacity="0.2" />
+          <stop offset="1" stop-color="#2466BD" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient
+          id="linear_fill_3febdb91-9c5c-4985-97d3-16ec34fa4b5c"
+          x1="318.2024230957031"
+          y1="129"
+          x2="367.68646240234375"
+          y2="32.833740234375"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stop-color="#2466BD" stop-opacity="0.2" />
+          <stop offset="1" stop-color="#2466BD" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient
+          id="linear_fill_bd8f0060-6382-48ce-9408-29c6216ec4cc"
+          x1="367.0595703125"
+          y1="129"
+          x2="416.5435791015625"
+          y2="32.833740234375"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stop-color="#2466BD" stop-opacity="0.2" />
+          <stop offset="1" stop-color="#2466BD" stop-opacity="0" />
+        </linearGradient>
+      </defs>
+    </svg>
+  </div>
+</template>
+<script setup lang="ts">
+import { PropType, toRefs } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { option } from './config'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useChartDataFetch } from '@/hooks'
+import { isObject } from '@/utils/external/is'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType & typeof option>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+
+const { dataset, fontConfig, unitStr, titleStr } = toRefs(props.chartConfig.option as typeof option)
+
+// 预览更新
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
+  if (isObject(newData)) return
+  dataset.value = newData as string
+})
+</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>

@@ -71,7 +71,6 @@ const onChange = (v: number | number[] | null) => {
         dateEnd = dayjs(lastTs).set('hour', 23).set('minute', 59).set('second', 59).valueOf()
         dateEnd = dayjs(lastTs).set('hour', 23).set('minute', 59).set('second', 59).valueOf()
       }
       }
     }
     }
-    console.log(daterange)
     // 存储到联动数据
     // 存储到联动数据
     useChartInteract(
     useChartInteract(
       props.chartConfig,
       props.chartConfig,

@@ -2,11 +2,12 @@ import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { CreateComponentType } from '@/packages/index.d'
 import { SingleCameraConfig } from './index'
 import { SingleCameraConfig } from './index'
 import cloneDeep from 'lodash/cloneDeep'
 import cloneDeep from 'lodash/cloneDeep'
-import {StreamType} from "@/components/Video/src/types";
-import {useFingerprint} from "@/utils/external/useFingerprint";
-import {getOpenFlvPlayUrl, getVideoControlStart} from "@/api/external/flvPlay";
-import {getVideoUrl} from "@/api/external/common";
-import {CameraRecord} from "@/api/external/common/model";
+import { StreamType } from "@/components/Video/src/types";
+import { useFingerprint } from "@/utils/external/useFingerprint";
+import { getOpenFlvPlayUrl, getVideoControlStart } from "@/api/external/flvPlay";
+import { getVideoUrl } from "@/api/external/common";
+import { CameraRecord } from "@/api/external/common/model";
+import { useGlobSetting } from '@/hooks/external/setting';
 
 
 export enum sourceTypeEnum {
 export enum sourceTypeEnum {
   CUSTOM = 'custom',
   CUSTOM = 'custom',
@@ -89,7 +90,7 @@ export const isRtspProtocol = (url: string) => {
 };
 };
 
 
 export async function getPlayUrl(
 export async function getPlayUrl(
-    params: CameraRecord
+  params: CameraRecord
 ): Promise<{ url: string; type: StreamType } | undefined> {
 ): Promise<{ url: string; type: StreamType } | undefined> {
   const { accessMode } = params;
   const { accessMode } = params;
   if (accessMode === AccessMode.ManuallyEnter) {
   if (accessMode === AccessMode.ManuallyEnter) {
@@ -106,18 +107,20 @@ export async function getPlayUrl(
       }
       }
     }
     }
   } else if (accessMode === AccessMode.GBT28181) {
   } else if (accessMode === AccessMode.GBT28181) {
+    const { securityPolicy } = useGlobSetting()
+    console.log(useGlobSetting())
     const { deviceId, channelNo } = params?.params || {};
     const { deviceId, channelNo } = params?.params || {};
     const result = await getVideoControlStart({ channelId: channelNo!, deviceId: deviceId! });
     const result = await getVideoControlStart({ channelId: channelNo!, deviceId: deviceId! });
-    return { url: result.data.flv, type: 'flv' };
+    return { url: securityPolicy ? result.data.https_flv : result.data.flv, type: 'flv' };
   } else {
   } else {
     const { id, playProtocol } = params;
     const { id, playProtocol } = params;
     const result = await getVideoUrl(id);
     const result = await getVideoUrl(id);
     const type: StreamType =
     const type: StreamType =
-        playProtocol === FluoriteMideaProtocolEnum.FLV
-            ? 'flv'
-            : playProtocol === FluoriteMideaProtocolEnum.HLS
-                ? 'hls'
-                : 'auto';
+      playProtocol === FluoriteMideaProtocolEnum.FLV
+        ? 'flv'
+        : playProtocol === FluoriteMideaProtocolEnum.HLS
+          ? 'hls'
+          : 'auto';
     return { url: result.data.url, type };
     return { url: result.data.url, type };
   }
   }
 }
 }

 <template>
 <template>
   <div>
   <div>
     <n-spin size="medium" :show="showLoading" class="player-spin">
     <n-spin size="medium" :show="showLoading" class="player-spin">
-      <XGPlayer :url="sourceUrl" :stream-type="playType"
-                :config="{width: '100%', height: '100%', poster: option.poster}"
-                :auto-play="option.autoplay"/>
+      <XGPlayer
+        ref="XGPlayerRef"
+        @userAction="handleOnUserAction"
+        :url="sourceUrl"
+        :stream-type="playType"
+        :config="{ width: '100%', height: '100%', poster: poster }"
+        :auto-play="autoplay"
+      />
     </n-spin>
     </n-spin>
   </div>
   </div>
 </template>
 </template>
 <script setup lang="ts">
 <script setup lang="ts">
-import {PropType, toRefs, shallowReactive, watch, ref} from 'vue'
-import {CreateComponentType} from '@/packages/index.d'
-import {Dataset, getPlayUrl, option as configOption} from './config'
-import {XGPlayer} from '@/components/Video'
-import {StreamType} from "@/components/Video/src/types";
-import {CameraRecord} from "@/api/external/common/model";
-import { isNullOrUnDef } from '@/utils/external/is';
+import { PropType, toRefs, shallowReactive, watch, ref, nextTick } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { Dataset, getPlayUrl, option as configOption } from './config'
+import { XGPlayer } from '@/components/Video'
+import { StreamType, UserActionEventType } from '@/components/Video/src/types'
+import { CameraRecord } from '@/api/external/common/model'
+import { isNullOrUnDef } from '@/utils/external/is'
 
 
 const props = defineProps({
 const props = defineProps({
   chartConfig: {
   chartConfig: {
@@ -25,9 +30,11 @@ const props = defineProps({
 
 
 const showLoading = ref(false)
 const showLoading = ref(false)
 
 
-const {w, h} = toRefs(props.chartConfig.attr)
+const XGPlayerRef = ref<InstanceType<typeof XGPlayer>>()
 
 
-const {autoplay, dataset, poster, customVideoUrl} = toRefs(props.chartConfig.option as typeof configOption)
+const { w, h } = toRefs(props.chartConfig.attr)
+
+const { autoplay, dataset, poster, customVideoUrl } = toRefs(props.chartConfig.option as typeof configOption)
 
 
 const option = shallowReactive({
 const option = shallowReactive({
   dataset: configOption.dataset,
   dataset: configOption.dataset,
@@ -36,36 +43,55 @@ const option = shallowReactive({
 })
 })
 
 
 const sourceUrl = ref('')
 const sourceUrl = ref('')
-const playType = ref<StreamType>()
 
 
+const playType = ref<StreamType>()
 
 
 async function getPlaySource(params: Dataset) {
 async function getPlaySource(params: Dataset) {
-    const {id, channelId, deviceId, accessMode, customUrl, playProtocol} = params
-    if (isNullOrUnDef(accessMode)) return
-    const {type, url} = await getPlayUrl({
+  if (!autoplay.value) return
+  doPlaySource(params)
+}
+
+async function doPlaySource(params?: Dataset) {
+  const { id, channelId, deviceId, accessMode, customUrl, playProtocol } = params as unknown as Dataset
+  if (isNullOrUnDef(accessMode)) return
+  const { type, url } =
+    (await getPlayUrl({
       id: id,
       id: id,
       accessMode: accessMode,
       accessMode: accessMode,
       playProtocol: playProtocol,
       playProtocol: playProtocol,
       videoUrl: customUrl,
       videoUrl: customUrl,
       params: {
       params: {
         deviceId: deviceId,
         deviceId: deviceId,
-        channelNo: channelId,
-      },
-    } as unknown as CameraRecord) || {}
-    sourceUrl.value = url!
-    playType.value = type
+        channelNo: channelId
+      }
+    } as unknown as CameraRecord)) || {}
+  sourceUrl.value = url!
+  playType.value = type
+}
+
+function handleOnUserAction(event: UserActionEventType) {
+  const { from, to } = event
+  if (from && !to) {
+    doPlaySource(dataset?.value)
+    nextTick(() => {
+      XGPlayerRef.value?.getPlayerInstance()?.play()
+    })
+  } else if (!from && to) {
+    nextTick(() => {
+      XGPlayerRef.value?.getPlayerInstance()?.pause()
+    })
+  }
 }
 }
 
 
 watch(
 watch(
-    () => dataset?.value,
-    async (newData) => {
-      getPlaySource(newData)
-    },
-    {
-      immediate: true
-    }
+  () => dataset?.value,
+  async newData => {
+    getPlaySource(newData)
+  },
+  {
+    immediate: true
+  }
 )
 )
-
 </script>
 </script>
 
 
 <style lang="scss" scoped>
 <style lang="scss" scoped>

@@ -36,8 +36,8 @@ export const option = {
   fontWeight: 'normal',
   fontWeight: 'normal',
 
 
   // 边框
   // 边框
-  borderWidth: 0,
-  borderColor: '#ffffff',
+  borderWidth: 1,
+  borderColor: '#3c7eff',
   borderRadius: 5,
   borderRadius: 5,
 
 
   // 字间距
   // 字间距

+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { OverrideTextEnumCommonConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+import { chartInitConfig } from '@/settings/designSetting'
+
+export enum WritingModeEnum {
+  HORIZONTAL = '水平',
+  VERTICAL = '垂直'
+}
+
+export const WritingModeObject = {
+  [WritingModeEnum.HORIZONTAL]: 'horizontal-tb',
+  [WritingModeEnum.VERTICAL]: 'vertical-rl'
+}
+
+export enum FontWeightEnum {
+  NORMAL = '常规',
+  BOLD = '加粗'
+}
+
+export const FontWeightObject = {
+  [FontWeightEnum.NORMAL]: 'normal',
+  [FontWeightEnum.BOLD]: 'bold'
+}
+
+export const option = {
+  link: '',
+  linkHead: 'http://',
+  dataset: '我是文本',
+  fontSize: 20,
+  fontColor: '#ffffff',
+  paddingX: 10,
+  paddingY: 10,
+  textAlign: 'center', // 水平对齐方式
+  fontWeight: 'normal',
+
+  // 边框
+  borderWidth: 1,
+  borderColor: '#3c7eff',
+  borderRadius: 5,
+
+  // 字间距
+  letterSpacing: 5,
+  writingMode: 'horizontal-tb',
+  backgroundColor: '#00000000',
+
+  //跳转方式
+  linkMethod: 'default'
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = OverrideTextEnumCommonConfig.key
+  public attr = { ...chartInitConfig, w: 150, h: 40, zIndex: -1 }
+  public chartConfig = cloneDeep(OverrideTextEnumCommonConfig)
+  public option = cloneDeep(option)
+}

+<template>
+  <collapse-item name="信息" :expanded="true">
+    <setting-item-box name="文字" :alone="true">
+      <setting-item>
+        <n-input v-model:value="optionData.dataset" type="textarea" size="small"></n-input>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="链接" :alone="true">
+      <setting-item>
+        <n-input-group>
+          <n-select
+            v-model:value="optionData.linkHead"
+            size="small"
+            :style="{ width: '80%' }"
+            :options="linkHeadOptions"
+          />
+          <n-input v-model:value="optionData.link" size="small"></n-input>
+        </n-input-group>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="跳转方式" :alone="true">
+      <setting-item>
+        <n-input-group>
+          <n-select
+            v-model:value="optionData.linkMethod"
+            size="small"
+            :style="{ width: '80%' }"
+            :options="linkMethodOptions"
+          />
+          <n-button
+            :disabled="!optionData.linkMethod"
+            secondary
+            size="small"
+            @click="handleLinkClick(optionData.linkMethod)"
+            >跳转</n-button
+          >
+        </n-input-group>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+
+  <collapse-item name="样式" :expanded="true">
+    <setting-item-box name="文字">
+      <setting-item name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.fontColor"></n-color-picker>
+      </setting-item>
+      <setting-item name="字体大小">
+        <n-input-number v-model:value="optionData.fontSize" size="small" placeholder="字体大小"></n-input-number>
+      </setting-item>
+      <setting-item name="字体粗细">
+        <n-select v-model:value="optionData.fontWeight" size="small" :options="fontWeightOptions" />
+      </setting-item>
+      <setting-item name="X轴内边距">
+        <n-input-number v-model:value="optionData.paddingX" size="small" placeholder="输入内边距"></n-input-number>
+      </setting-item>
+      <setting-item name="Y轴内边距">
+        <n-input-number v-model:value="optionData.paddingY" size="small" placeholder="输入内边距"></n-input-number>
+      </setting-item>
+
+      <setting-item name="水平对齐">
+        <n-select v-model:value="optionData.textAlign" size="small" :options="textAlignOptions" />
+      </setting-item>
+      <setting-item name="文本方向">
+        <n-select v-model:value="optionData.writingMode" size="small" :options="verticalOptions" />
+      </setting-item>
+
+      <setting-item name="字间距">
+        <n-input-number v-model:value="optionData.letterSpacing" size="small" placeholder="输入字间距"></n-input-number>
+      </setting-item>
+    </setting-item-box>
+
+    <setting-item-box name="边框">
+      <setting-item name="宽度">
+        <n-input-number
+          v-model:value="optionData.borderWidth"
+          size="small"
+          :min="0"
+          placeholder="宽度"
+        ></n-input-number>
+      </setting-item>
+      <setting-item name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.borderColor"></n-color-picker>
+      </setting-item>
+      <setting-item name="圆角">
+        <n-input-number
+          v-model:value="optionData.borderRadius"
+          size="small"
+          :min="0"
+          placeholder="圆角"
+        ></n-input-number>
+      </setting-item>
+    </setting-item-box>
+
+    <setting-item-box name="背景" :alone="true">
+      <setting-item name="背景颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.backgroundColor"></n-color-picker>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { option, WritingModeEnum, WritingModeObject, FontWeightEnum, FontWeightObject } from './config'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+const textAlignOptions = [
+  { label: '左对齐', value: 'start' },
+  { label: '居中', value: 'center' },
+  { label: '右对齐', value: 'end' }
+]
+
+const linkMethodOptions = [
+  { label: '默认', value: 'default' },
+  { label: '新开窗口', value: 'open' }
+]
+
+const verticalOptions = [
+  {
+    label: WritingModeEnum.HORIZONTAL,
+    value: WritingModeObject[WritingModeEnum.HORIZONTAL]
+  },
+  {
+    label: WritingModeEnum.VERTICAL,
+    value: WritingModeObject[WritingModeEnum.VERTICAL]
+  }
+]
+const fontWeightOptions = [
+  {
+    label: FontWeightEnum.NORMAL,
+    value: FontWeightObject[FontWeightEnum.NORMAL]
+  },
+  {
+    label: FontWeightEnum.BOLD,
+    value: FontWeightObject[FontWeightEnum.BOLD]
+  }
+]
+const handleLinkClick = (target: string) => {
+  const hrefStr = props.optionData.linkHead + props.optionData.link
+  if (target === 'open') window.open(hrefStr)
+  else window.location.href = hrefStr
+}
+const linkHeadOptions = [
+  { label: 'http://', value: 'http://' },
+  { label: 'https://', value: 'https://' }
+]
+</script>

+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/Informations/index.d'
+import { useWidgetKey } from '@/packages/external/useWidgetKey'
+
+const { key, conKey, chartKey } = useWidgetKey('OverrideTextEnumCommon', true)
+
+export const OverrideTextEnumCommonConfig: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: '自定义文字(支持枚举)',
+  category: ChatCategoryEnum.TEXT,
+  categoryName: ChatCategoryEnumName.TEXT,
+  package: PackagesCategoryEnum.INFORMATIONS,
+  chartFrame: ChartFrameEnum.COMMON,        
+  image: 'text_static.png'
+}

+<template>
+  <div class="go-text-box">
+    <div class="content">
+      <span style="cursor: pointer; white-space: pre-wrap" v-if="link" @click="click">{{ option.dataset }}</span>
+      <span style="white-space: pre-wrap" v-else>{{ option.dataset }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs, shallowReactive } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartDataFetch } from '@/hooks'
+import { useTsl } from '@/hooks/external/useTsl'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { option as configOption } from './config'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType & typeof option>,
+    required: true
+  }
+})
+
+const { handleDeviceProfileAttributes } = useTsl()
+
+const {
+  linkHead,
+  link,
+  fontColor,
+  fontSize,
+  letterSpacing,
+  paddingY,
+  paddingX,
+  textAlign,
+  borderWidth,
+  borderColor,
+  borderRadius,
+  writingMode,
+  backgroundColor,
+  fontWeight,
+  linkMethod
+} = toRefs(props.chartConfig.option)
+
+const option = shallowReactive({
+  dataset: configOption.dataset
+})
+
+//动态请求物模型
+const fetchTsl = (entityId: string) => {
+  return handleDeviceProfileAttributes(entityId)
+}
+
+//解构设备和属性参数
+const deconstructionParams = (chartConfig: CreateComponentType) => {
+  const { request } = chartConfig
+  const { requestParams } = request
+  const { Params } = requestParams
+  const { entityId, keys } = Params
+  return { entityId, keys }
+}
+
+//找到枚举值name，属性暂时只选择一个
+const findEnumName = (attribute: Recordable[], keys: string[], newData: Recordable) => {
+  const findCurrentAttr = attribute.find(findAttrItem => findAttrItem.identifier === keys.at(0))?.detail?.dataType
+    ?.specsList
+  return findCurrentAttr.find(
+    (findCurrentItem: Recordable) => findCurrentItem.value === Number(newData.data[keys.at(0)!][0][1])
+  )?.name
+}
+
+// 预览更新
+useChartDataFetch(props.chartConfig, useChartEditStore, async (newData: string) => {
+  const { entityId, keys } = deconstructionParams(props.chartConfig) as Recordable
+  const { attribute } = (await fetchTsl(entityId)) as unknown as Recordable
+  if (Object.prototype.toString.call(newData) !== '[object Object]') {
+    option.dataset = newData
+  } else if ('subscriptionId' in (newData as unknown as Recordable)) {
+    // ws
+    option.dataset = findEnumName(attribute, keys, newData as unknown as Recordable) || '暂无数据'
+  }
+})
+
+//打开链接
+const click = () => {
+  const hrefStr = linkHead.value + link.value
+  if (linkMethod.value === 'open') window.open(hrefStr)
+  else window.location.href = hrefStr
+}
+</script>
+
+<style lang="scss" scoped>
+@include go('text-box') {
+  display: flex;
+  align-items: center;
+  justify-content: v-bind('textAlign');
+
+  .content {
+    color: v-bind('fontColor');
+    padding: v-bind('`${paddingY}px ${paddingX}px`');
+    font-size: v-bind('fontSize + "px"');
+    letter-spacing: v-bind('letterSpacing + "px"');
+    writing-mode: v-bind('writingMode');
+    font-weight: v-bind('fontWeight');
+    border-style: solid;
+    border-width: v-bind('borderWidth + "px"');
+    border-radius: v-bind('borderRadius + "px"');
+    border-color: v-bind('borderColor');
+
+    background-color: v-bind('backgroundColor');
+  }
+}
+</style>

@@ -351,8 +351,9 @@ useChartDataFetch(props.chartConfig, useChartEditStore, async (resData: any[], r
   const { requestParams } = res
   const { requestParams } = res
   if (!requestParams) return
   if (!requestParams) return
   const { Params } = requestParams
   const { Params } = requestParams
-  if (!Params) return
+  if (!Params) return 
   const { entityId } = Params
   const { entityId } = Params
+  if(!entityId) return window['$message'].warning('您选择的公共接口不适合此组件，请选择匹配此组件的公共接口')
   const thingsModel = await handleDeviceProfileAttributes(entityId)
   const thingsModel = await handleDeviceProfileAttributes(entityId)
   const { attribute } = thingsModel as any
   const { attribute } = thingsModel as any
   const resDataFormat = resData.reduce((acc, curr) => {
   const resDataFormat = resData.reduce((acc, curr) => {
@@ -373,6 +374,7 @@ onUnmounted(() => {
 })
 })
 
 
 const handleDeviceProfileAttributes = async (entityId: string) => {
 const handleDeviceProfileAttributes = async (entityId: string) => {
+  if(!entityId) return  window['$message'].warning('您选择的公共接口不适合此组件，请选择匹配此组件的公共接口')
   const deviceDetailRes = await getDeviceDetail(entityId)
   const deviceDetailRes = await getDeviceDetail(entityId)
   const { deviceProfileId } = deviceDetailRes
   const { deviceProfileId } = deviceDetailRes
   if (!deviceProfileId) return
   if (!deviceProfileId) return

@@ -9,6 +9,7 @@ import { OverrideInputsDateConfig } from '@/packages/components/external/Informa
 import { OverrideInputsTabConfig } from '@/packages/components/external/Informations/Inputs/OverrideInputsTab'
 import { OverrideInputsTabConfig } from '@/packages/components/external/Informations/Inputs/OverrideInputsTab'
 import { OverrideIframeConfig } from '@/packages/components/external/Informations/Mores/OverrideIframe'
 import { OverrideIframeConfig } from '@/packages/components/external/Informations/Mores/OverrideIframe'
 import { OverrideTextCommonConfig } from '@/packages/components/external/Informations/Texts/OverrideTextCommon'
 import { OverrideTextCommonConfig } from '@/packages/components/external/Informations/Texts/OverrideTextCommon'
+import { OverrideTextEnumCommonConfig } from '@/packages/components/external/Informations/Texts/OverrideTextEnumCommon'
 import { OverrideTextBarrageConfig } from '@/packages/components/external/Informations/Texts/OverrideTextBarrage'
 import { OverrideTextBarrageConfig } from '@/packages/components/external/Informations/Texts/OverrideTextBarrage'
 import { OverrideTextGradientConfig } from '@/packages/components/external/Informations/Texts/OverrideTextGradient'
 import { OverrideTextGradientConfig } from '@/packages/components/external/Informations/Texts/OverrideTextGradient'
 import { OverrideVideoConfig } from '@/packages/components/external/Informations/Mores/OverrideVideo'
 import { OverrideVideoConfig } from '@/packages/components/external/Informations/Mores/OverrideVideo'
@@ -68,6 +69,10 @@ import { Decorates23Config } from '@/packages/components/external/Decorates/Deco
 import { Decorates24Config } from '@/packages/components/external/Decorates/Decorates/Decorates24'
 import { Decorates24Config } from '@/packages/components/external/Decorates/Decorates/Decorates24'
 import { Decorates25Config } from '@/packages/components/external/Decorates/Decorates/Decorates25'
 import { Decorates25Config } from '@/packages/components/external/Decorates/Decorates/Decorates25'
 import { Decorates26Config } from '@/packages/components/external/Decorates/Decorates/Decorates26'
 import { Decorates26Config } from '@/packages/components/external/Decorates/Decorates/Decorates26'
+import { Decorates27Config } from '@/packages/components/external/Decorates/Decorates/Decorates27'
+import { Decorates28Config } from '@/packages/components/external/Decorates/Decorates/Decorates28'
+import { Decorates29Config } from '@/packages/components/external/Decorates/Decorates/Decorates29'
+import { Decorates30Config } from '@/packages/components/external/Decorates/Decorates/Decorates30'
 import { OverrideTableScrollBoardConfig } from '@/packages/components/external/Tables/Tables/OverrideTableScrollBoard'
 import { OverrideTableScrollBoardConfig } from '@/packages/components/external/Tables/Tables/OverrideTableScrollBoard'
 import { OverrideTablesBasicConfig } from '@/packages/components/external/Tables/Tables/OverrideTablesBasic'
 import { OverrideTablesBasicConfig } from '@/packages/components/external/Tables/Tables/OverrideTablesBasic'
 
 
@@ -114,6 +119,10 @@ export function useInjectLib(packagesList: EPackagesType) {
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Decorates24Config)//新增动画装饰装饰24
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Decorates24Config)//新增动画装饰装饰24
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Decorates25Config)//新增动画装饰装饰25
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Decorates25Config)//新增动画装饰装饰25
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Decorates26Config)//新增动画装饰装饰26
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Decorates26Config)//新增动画装饰装饰26
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Decorates27Config)//新增动画装饰装饰27
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Decorates28Config)//新增动画装饰装饰28
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Decorates29Config)//新增动画装饰装饰29
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, Decorates30Config)//新增动画装饰装饰30
   //
   //
 
 
   //信息
   //信息
@@ -128,6 +137,7 @@ export function useInjectLib(packagesList: EPackagesType) {
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideInputsDateConfig)//重写信息下的日期
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideInputsDateConfig)//重写信息下的日期
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideInputsTabConfig)//重写信息下的tab
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideInputsTabConfig)//重写信息下的tab
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideTextCommonConfig)//重写信息下的文字
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideTextCommonConfig)//重写信息下的文字
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideTextEnumCommonConfig)//重写信息下的文字（支持枚举）
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideTextBarrageConfig)//重写信息下的弹幕文字
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideTextBarrageConfig)//重写信息下的弹幕文字
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideTextGradientConfig)//重写信息下的渐变文字
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideTextGradientConfig)//重写信息下的渐变文字
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideVideoConfig)//重写信息下的视频
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideVideoConfig)//重写信息下的视频

@@ -9,6 +9,7 @@ const getAllConfigFile = async () => {
 
 
 const getChartConfigFile = async (path: string) => {
 const getChartConfigFile = async (path: string) => {
   const fileList = await getAllConfigFile()
   const fileList = await getAllConfigFile()
+  if (path.includes('group')) return // 分组则终止
   return fileList[path]() as any
   return fileList[path]() as any
 } 
 } 
 
 
@@ -41,6 +42,7 @@ export const createComponent = async (configType: ConfigType) => {
   //
   //
   const hasExternalPrefix = matchExternalPrefixReg.test(chartKey)
   const hasExternalPrefix = matchExternalPrefixReg.test(chartKey)
   const filePath = `../components${hasExternalPrefix ? '/external' : ''}/${packageName}/${category}/${key}/config.ts`
   const filePath = `../components${hasExternalPrefix ? '/external' : ''}/${packageName}/${category}/${key}/config.ts`
+  if (filePath.includes('group')) return // 分组则终止 
   const chart = await getChartConfigFile(filePath)
   const chart = await getChartConfigFile(filePath)
   return new chart.default()
   return new chart.default()
 }
 }

@@ -41,7 +41,30 @@ export const requestConfig: RequestConfigType = {
     },
     },
     Header: {},
     Header: {},
     Params: {}
     Params: {}
-  }
+  },
+  pondRequestOriginUrl: '',
+  pondRequestInterval: 0,
+  pondRequestIntervalUnit: '',
+  pondRequestGlobalTokenSuffix: '',
+  pondRequestGlobalTokenKey: '',
+  pondRequestHttpType: RequestHttpEnum.GET,
+  pondRequestContentType: RequestContentTypeEnum.DEFAULT,
+  pondRequestUrl:'',
+  pondRequestSQLContent: {
+    sql: ''
+  },
+  pondRequestParamsBodyType: RequestBodyEnum.NONE,
+  pondRequestParams: {
+    "Body": {
+        "form-data": {},
+        "x-www-form-urlencoded": {},
+          "json": "",
+        "xml": ""
+      },
+    "Header": {},
+    "Params": {}
+   },
+   pondRequestGlobalIsToken: true
 }
 }
 
 
 // 单实例类
 // 单实例类

@@ -48,9 +48,9 @@
     }
     }
   },
   },
   "yAxis": {
   "yAxis": {
-    "showRange":true,
-    "min": 0,
-    "max": 200,
+    "showRange": false,
+    "minData": 0,
+    "maxData": 350,
     "show": true,
     "show": true,
     "name": "",
     "name": "",
     "nameGap": 15,
     "nameGap": 15,

@@ -32,6 +32,7 @@ interface UserState {
   shareJwtToken?: string;
   shareJwtToken?: string;
   shareRefreshToken?: string;
   shareRefreshToken?: string;
   outTarget?: string;
   outTarget?: string;
+  thirdTokenIsExp?: boolean;
 }
 }
 
 
 const storage = createLocalStorage();
 const storage = createLocalStorage();
@@ -57,9 +58,14 @@ export const useUserStore = defineStore({
     sessionTimeout: false,
     sessionTimeout: false,
     // Last fetch time
     // Last fetch time
     lastUpdateTime: 0,
     lastUpdateTime: 0,
+    // 用于三方接口Token是否过期
+    thirdTokenIsExp: false 
   }),
   }),
 
 
   getters: {
   getters: {
+    getThirdTokenIsExp(): boolean {
+      return this.thirdTokenIsExp!;
+    },
     getPlatInfo(): any {
     getPlatInfo(): any {
       return this.platInfo;
       return this.platInfo;
     },
     },
@@ -87,6 +93,9 @@ export const useUserStore = defineStore({
     },
     },
   },
   },
   actions: {
   actions: {
+    setThirdTokenIsExp(expStatus:boolean) {
+      this.thirdTokenIsExp = expStatus
+    },
     setPlatInfo(platInfo: any) {
     setPlatInfo(platInfo: any) {
       this.platInfo = platInfo;
       this.platInfo = platInfo;
     },
     },

@@ -23,7 +23,7 @@ export enum EditCanvasTypeEnum {
   IS_CREATE = 'isCreate',
   IS_CREATE = 'isCreate',
   IS_DRAG = 'isDrag',
   IS_DRAG = 'isDrag',
   IS_SELECT = 'isSelect',
   IS_SELECT = 'isSelect',
-  IS_CODE_EDIT = "isCodeEdit"
+  IS_CODE_EDIT = 'isCodeEdit'
 }
 }
 
 
 // 编辑区域
 // 编辑区域
@@ -61,10 +61,9 @@ export enum EditCanvasConfigEnum {
   BACKGROUND_IMAGE = 'backgroundImage',
   BACKGROUND_IMAGE = 'backgroundImage',
   SELECT_COLOR = 'selectColor',
   SELECT_COLOR = 'selectColor',
   PREVIEW_SCALE_TYPE = 'previewScaleType',
   PREVIEW_SCALE_TYPE = 'previewScaleType',
-  ANIMATION_STYLE_CONFIG = 'animationsStyleConfig',
+  ANIMATION_STYLE_CONFIG = 'animationsStyleConfig'
 }
 }
 
 
-
 export interface EditCanvasConfigType {
 export interface EditCanvasConfigType {
   // 滤镜-启用
   // 滤镜-启用
   [FilterEnum.FILTERS_SHOW]: boolean
   [FilterEnum.FILTERS_SHOW]: boolean
@@ -176,8 +175,8 @@ type RequestPublicConfigType = {
 
 
 // 数据池项类型
 // 数据池项类型
 export type RequestDataPondItemType = {
 export type RequestDataPondItemType = {
-  dataPondId: string,
-  dataPondName: string,
+  dataPondId: string
+  dataPondName: string
   dataPondRequestConfig: RequestConfigType
   dataPondRequestConfig: RequestConfigType
 }
 }
 
 
@@ -189,6 +188,18 @@ export interface RequestGlobalConfigType extends RequestPublicConfigType {
   requestOriginUrl?: string
   requestOriginUrl?: string
   // 公共数据池
   // 公共数据池
   requestDataPond: RequestDataPondItemType[]
   requestDataPond: RequestDataPondItemType[]
+  // 验证方式
+  requestVerificationMethods?: TokenEnum
+  // 全局Token
+  requestVerificationToken?: string
+  // 请求头里的Token键
+  requestTokenKey?: string
+  // 请求头里的Token前缀
+  requestTokenSuffix?: string,
+  // 全局配置Token前缀
+  requestGlobalTokenSuffix?: string,
+  // 全局配置Token键
+  requestGlobalTokenKey?: string,
 }
 }
 
 
 // 单个图表请求配置
 // 单个图表请求配置
@@ -211,6 +222,36 @@ export interface RequestConfigType extends RequestPublicConfigType {
   requestSQLContent: {
   requestSQLContent: {
     sql: string
     sql: string
   }
   }
+
+   // 三方Token相关
+   requestVerificationToken?: string
+   // 请求头里的Token键
+   requestTokenKey?: string
+   // 请求头里的Token前缀
+   requestTokenSuffix?: string
+   pondRequestOriginUrl?: string
+   pondRequestGlobalInterval?: number
+   pondRequestGlobalIntervalUnit?: string
+   pondRequestGlobalTokenSuffix?: string
+   pondRequestGlobalTokenKey?: string
+   pondRequestGlobalCascaderOption?: Recordable
+   pondRequestGlobalCascaderKey?: string
+   pondRequestHttpType?: RequestHttpEnum
+   pondRequestInterval?: number
+   pondRequestIntervalUnit?: string
+   pondRequestContentType?: number
+   pondRequestParams?: RequestParams
+   pondRequestParamsBodyType?: RequestBodyEnum
+   pondRequestUrl?: string
+   pondRequestSQLContent?: {
+    sql: string
+  }
+  thirdTokenIsExp?: boolean
+  thirdSelectCascaderLabel?: string
+  publicInterfaceSelectId?: string
+  thirdRequestDataPondId?: string
+  pondRequestGlobalIsToken?: boolean
+  //
 }
 }
 
 
 // Store 类型
 // Store 类型

@@ -135,7 +135,9 @@ function createNewPageItem(id: string = getUUID(), title = '页面'): PageChartE
         },
         },
         Header: {},
         Header: {},
         Params: {}
         Params: {}
-      }
+      },
+      requestVerificationMethods: 'Token',
+      requestVerificationToken: '',
     },
     },
     // 图表数组（需存储给后端）
     // 图表数组（需存储给后端）
     componentList: []
     componentList: []

@@ -4,6 +4,30 @@ import type { GlobEnvConfig } from '/#/external/config';
 import { getGlobalConfigName } from '../../../../build/external/vite/plugins/globConfig/getGlobConfigName';
 import { getGlobalConfigName } from '../../../../build/external/vite/plugins/globConfig/getGlobConfigName';
 import { ProjectRuntimeEnvEnum } from '@/enums/external/envEnum';
 import { ProjectRuntimeEnvEnum } from '@/enums/external/envEnum';
 
 
+const stringToJSONParse = (string: string) => {
+  try {
+    return JSON.parse(string);
+  } catch (error) {
+    return string;
+  }
+};
+
+export function parseEnv(env: Record<string, string>) {
+  const res: Record<string, string> = {};
+
+  Object.keys(env).forEach((key) => {
+    try {
+      const value = env[key];
+      res[key] = stringToJSONParse(value);
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.log(`env variable ${key} can't serialization!`);
+    }
+  });
+
+  return res;
+}
+
 
 
 export function getCommonStoragePrefix() {
 export function getCommonStoragePrefix() {
   // const { VITE_GLOB_APP_SHORT_NAME } = getAppEnvConfig();
   // const { VITE_GLOB_APP_SHORT_NAME } = getAppEnvConfig();
@@ -23,7 +47,7 @@ export function getAppEnvConfig() {
 
 
   const ENV = (import.meta.env.DEV
   const ENV = (import.meta.env.DEV
     ? // Get the global configuration (the configuration will be extracted independently when packaging)
     ? // Get the global configuration (the configuration will be extracted independently when packaging)
-    (import.meta.env as unknown as GlobEnvConfig)
+    (parseEnv(import.meta.env) as unknown as GlobEnvConfig)
     : window[ENV_NAME as any]) as unknown as GlobEnvConfig;
     : window[ENV_NAME as any]) as unknown as GlobEnvConfig;
 
 
   const {
   const {
@@ -35,7 +59,7 @@ export function getAppEnvConfig() {
     VITE_GLOB_WEB_SOCKET,
     VITE_GLOB_WEB_SOCKET,
     VITE_GLOB_ALARM_NOTIFY_DURATION,
     VITE_GLOB_ALARM_NOTIFY_DURATION,
     VITE_GLOB_CONTENT_SECURITY_POLICY,
     VITE_GLOB_CONTENT_SECURITY_POLICY,
-    VITE_GLOB_PUBLIC_PATH
+    VITE_GLOB_PUBLIC_PATH,
   } = ENV;
   } = ENV;
 
 
   if (!/^[a-zA-Z\_]*$/.test(VITE_GLOB_APP_SHORT_NAME)) {
   if (!/^[a-zA-Z\_]*$/.test(VITE_GLOB_APP_SHORT_NAME)) {
@@ -53,7 +77,7 @@ export function getAppEnvConfig() {
     VITE_GLOB_WEB_SOCKET,
     VITE_GLOB_WEB_SOCKET,
     VITE_GLOB_ALARM_NOTIFY_DURATION,
     VITE_GLOB_ALARM_NOTIFY_DURATION,
     VITE_GLOB_CONTENT_SECURITY_POLICY,
     VITE_GLOB_CONTENT_SECURITY_POLICY,
-    VITE_GLOB_PUBLIC_PATH
+    VITE_GLOB_PUBLIC_PATH,
   };
   };
 }
 }
 
 

@@ -11,6 +11,7 @@ import { ContentTypeEnum, RequestEnum } from '@/enums/external/httpEnum';
 import omit from 'lodash/omit';
 import omit from 'lodash/omit';
 import cloneDeep from 'lodash/cloneDeep';
 import cloneDeep from 'lodash/cloneDeep';
 import { useUserStore } from '@/store/external/modules/user';
 import { useUserStore } from '@/store/external/modules/user';
+import { useTargetData } from '@/views/chart/ContentConfigurations/components/hooks/useTargetData.hook';
 
 
 export * from './axiosTransform';
 export * from './axiosTransform';
 
 
@@ -115,11 +116,25 @@ export class VAxios {
     this.axiosInstance.interceptors.request.use(async (config: AxiosRequestConfig) => {
     this.axiosInstance.interceptors.request.use(async (config: AxiosRequestConfig) => {
       // If cancel repeat request is turned on, then cancel repeat request is prohibited
       // If cancel repeat request is turned on, then cancel repeat request is prohibited
       const userStore = useUserStore();
       const userStore = useUserStore();
+      const { targetData } = useTargetData()
+
       // if (userStore && (userStore.jwtToken || userStore.shareJwtToken)) {
       // if (userStore && (userStore.jwtToken || userStore.shareJwtToken)) {
       if (userStore) {
       if (userStore) {
         try {
         try {
           const { requestOptions = {} } = config
           const { requestOptions = {} } = config
-          const { withShareToken, withToken } = requestOptions
+          const { withShareToken, withToken, withThirdTokenString } = requestOptions
+          if (withThirdTokenString) {
+          //三方平台逻辑
+          const res = jwt_decode(withThirdTokenString) as Recordable;
+          const currentTime = (new Date().getTime() + (config.timeout || 0)) / 1000;
+          if (currentTime >= res?.exp) {
+            targetData.value.request.thirdTokenIsExp = true
+            userStore.setThirdTokenIsExp(true)
+           }else{
+            userStore.setThirdTokenIsExp(false)
+           }
+          } else {
+          //此平台逻辑
           const token = withShareToken && withToken ? userStore.shareJwtToken : userStore.jwtToken
           const token = withShareToken && withToken ? userStore.shareJwtToken : userStore.jwtToken
           const doRefresh = withShareToken && withToken ? userStore.doShareRefresh : userStore.doRefresh
           const doRefresh = withShareToken && withToken ? userStore.doShareRefresh : userStore.doRefresh
           if (token) {
           if (token) {
@@ -129,7 +144,8 @@ export class VAxios {
               await this.refreshTokenBeforeReq(doRefresh);
               await this.refreshTokenBeforeReq(doRefresh);
             }
             }
           }
           }
-
+         //
+         }
         } catch (error) {
         } catch (error) {
           userStore.logout();
           userStore.logout();
         }
         }

@@ -38,3 +38,46 @@ export const parseWebUrl = (str = window.location.search) => {
   str.replace(reg, (_, k, v) => (params[k] = v))
   str.replace(reg, (_, k, v) => (params[k] = v))
   return params
   return params
 }
 }
+
+//嵌套对象转换为级联选择器数据格式
+interface cascadingData {
+  label: string
+  value: string | cascadingData[] | number
+  children: cascadingData[] | null
+}
+export const convertToCascadingData = (obj: Recordable): cascadingData[] => {
+  const result: cascadingData[] = []
+  for (const key in obj) {
+    // eslint-disable-next-line no-prototype-builtins
+    if (obj.hasOwnProperty(key)) {
+      let value: cascadingData[] | string | number
+      if (typeof obj[key] === 'object' && obj[key] !== null) {
+        value = convertToCascadingData(obj[key])
+      } else {
+        value = String(obj[key])
+      }
+      result.push({
+        label: key,
+        value,
+        children: Array.isArray(value) ? value : null
+      })
+    }
+  }
+  return result
+}
+
+// 递归查找
+export const findItemByLabel = (list:Recordable[], label:string) :Recordable | null => {
+  let res = list.find((item) => item.label == label) as Recordable | null;
+  if (res) {
+      return res;
+  } else {
+      for (let i = 0; i < list.length; i++) {
+          if (list[i].children instanceof Array && list[i].children.length > 0) {
+              res = findItemByLabel(list[i].children, label);
+              if (res) return res;
+          }
+      }
+      return null;
+  }
+};

@@ -158,7 +158,7 @@ const {
 } = toRefs((props.targetData as RequestDataPondItemType).dataPondRequestConfig)
 } = toRefs((props.targetData as RequestDataPondItemType).dataPondRequestConfig)
 
 
 const tabs = [RequestParamsTypeEnum.HEADER]
 const tabs = [RequestParamsTypeEnum.HEADER]
-const requestContentTypeObj = {
+const requestContentTypeObj: Recordable = {
   [RequestContentTypeEnum.DEFAULT]: '普通请求',
   [RequestContentTypeEnum.DEFAULT]: '普通请求',
   [RequestContentTypeEnum.SQL]: 'SQL 请求'
   [RequestContentTypeEnum.SQL]: 'SQL 请求'
 }
 }

@@ -101,7 +101,7 @@ watch(
 )
 )
 
 
 // 打开/编辑
 // 打开/编辑
-const openPond = (isEditFlag: boolean = false) => {
+const openPond = (isEditFlag = false) => {
   isEdit.value = !!isEditFlag
   isEdit.value = !!isEditFlag
   requestShow.value = true
   requestShow.value = true
 }
 }

@@ -41,6 +41,14 @@
         编辑配置
         编辑配置
       </n-button>
       </n-button>
     </setting-item-box>
     </setting-item-box>
+    <setting-item-box name="配置">
+      <setting-item name="Token前缀">
+          <n-input :disabled="editDisabled" v-model:value.trim="requestGlobalTokenSuffix" type="text" placeholder="例如：Bearer" />
+      </setting-item>
+      <setting-item name="Token键值">
+          <n-input :disabled="editDisabled" v-model:value.trim="requestGlobalTokenKey" type="text" placeholder="例如：Token" />
+      </setting-item>
+    </setting-item-box>
     <!-- table 内容体 -->
     <!-- table 内容体 -->
     <n-collapse-transition :show="showTable">
     <n-collapse-transition :show="showTable">
       <request-global-header-table :editDisabled="editDisabled"></request-global-header-table>
       <request-global-header-table :editDisabled="editDisabled"></request-global-header-table>
@@ -69,13 +77,13 @@ import { ref, toRefs, computed } from 'vue'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 import { SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 import { useTargetData } from '@/views/chart/ContentConfigurations/components/hooks/useTargetData.hook'
 import { useTargetData } from '@/views/chart/ContentConfigurations/components/hooks/useTargetData.hook'
-import { selectTypeOptions, selectTimeOptions } from '@/views/chart/ContentConfigurations/components/ChartData/index.d'
+import { selectTimeOptions } from '@/views/chart/ContentConfigurations/components/ChartData/index.d'
 import { RequestGlobalHeaderTable } from '../RequestGlobalHeaderTable'
 import { RequestGlobalHeaderTable } from '../RequestGlobalHeaderTable'
 import { icon } from '@/plugins'
 import { icon } from '@/plugins'
 
 
 const { PencilIcon, ChevronDownOutlineIcon, ChevronUpOutlineIcon } = icon.ionicons5
 const { PencilIcon, ChevronDownOutlineIcon, ChevronUpOutlineIcon } = icon.ionicons5
 const { chartEditStore } = useTargetData()
 const { chartEditStore } = useTargetData()
-const { requestOriginUrl, requestInterval, requestIntervalUnit } = toRefs(chartEditStore.getRequestGlobalConfig)
+const { requestOriginUrl, requestInterval, requestIntervalUnit, requestGlobalTokenSuffix, requestGlobalTokenKey } = toRefs(chartEditStore.getRequestGlobalConfig)
 const editDisabled = ref(true)
 const editDisabled = ref(true)
 
 
 const designStore = useDesignStore()
 const designStore = useDesignStore()

@@ -47,7 +47,7 @@ const emit = defineEmits(['update:modelShow', 'sendHandle'])
 const { chartConfig } = toRefs(props.targetData as CreateComponentType)
 const { chartConfig } = toRefs(props.targetData as CreateComponentType)
 const { requestContentType } = toRefs((props.targetData as CreateComponentType).request)
 const { requestContentType } = toRefs((props.targetData as CreateComponentType).request)
 const modelShowRef = ref(false)
 const modelShowRef = ref(false)
-const requestContentTypeObj = {
+const requestContentTypeObj: Recordable = {
   [RequestContentTypeEnum.DEFAULT]: '普通请求',
   [RequestContentTypeEnum.DEFAULT]: '普通请求',
   [RequestContentTypeEnum.SQL]: 'SQL 请求'
   [RequestContentTypeEnum.SQL]: 'SQL 请求'
 }
 }

@@ -58,16 +58,36 @@
             <NSpace :size="15" vertical>
             <NSpace :size="15" vertical>
               <div class="editor-data-show">
               <div class="editor-data-show">
                 <NSpace>
                 <NSpace>
+                  <NText depth="3">原始数据：</NText>
+                    <n-collapse :default-expanded-names="['1']">
+                      <n-collapse-item name="1">
+                        <NScrollbar style="max-height: 300px;">
+                          <NCode :code="toString(cacheConfig) || '暂无'" language="json" :word-wrap="true"></NCode>
+                        </NScrollbar>
+                      </n-collapse-item>
+                    </n-collapse>
+                </NSpace>
+              </div>
+              <div class="editor-data-show">
+                <NSpace>
                   <NText depth="3">接口返回数据(res)：</NText>
                   <NText depth="3">接口返回数据(res)：</NText>
-                  <NScrollbar style="max-height: 300px;">
-                    <NCode :code="toString(isSocketRequest ? targetData.wsOriginalMessage : sourceData) || '暂无'" language="json" :word-wrap="true"></NCode>
-                  </NScrollbar>
+                    <n-collapse>
+                      <n-collapse-item name="2">
+                        <NScrollbar style="max-height: 300px;">
+                          <NCode :code="toString(isSocketRequest ? targetData.wsOriginalMessage : sourceData) || '暂无'" language="json" :word-wrap="true"></NCode>
+                        </NScrollbar>
+                      </n-collapse-item>
+                    </n-collapse>
                 </NSpace>
                 </NSpace>
               </div>
               </div>
               <div class="editor-data-show">
               <div class="editor-data-show">
                 <NSpace>
                 <NSpace>
                   <NText depth="3">过滤器结果：</NText>
                   <NText depth="3">过滤器结果：</NText>
-                  <NCode :code="filterRes || '暂无'" language="json" :word-wrap="true"></NCode>
+                   <n-collapse>
+                      <n-collapse-item name="3">
+                        <NCode :code="filterRes || '暂无'" language="json" :word-wrap="true"></NCode>
+                      </n-collapse-item>
+                    </n-collapse>
                 </NSpace>
                 </NSpace>
               </div>
               </div>
             </NSpace>
             </NSpace>
@@ -97,7 +117,7 @@
 </template>
 </template>
 
 
 <script lang="ts" setup>
 <script lang="ts" setup>
-import { ref, computed, watch, unref } from 'vue'
+import { ref, computed, watch, unref, onMounted } from 'vue'
 import { MonacoEditor } from '@/components/Pages/MonacoEditor'
 import { MonacoEditor } from '@/components/Pages/MonacoEditor'
 import { icon } from '@/plugins'
 import { icon } from '@/plugins'
 import { goDialog, toString } from '@/utils'
 import { goDialog, toString } from '@/utils'
@@ -106,6 +126,7 @@ import { NButton, NCard, NCode, NDivider, NIcon, NModal, NScrollbar, NSpace, NTa
 import { useFilterFn } from '@/hooks/external/useFilterFn'
 import { useFilterFn } from '@/hooks/external/useFilterFn'
 import { useFetchTargetData } from '@/hooks/external/useFetchTargetData'
 import { useFetchTargetData } from '@/hooks/external/useFetchTargetData'
 import { RequestContentTypeEnum } from '@/enums/external/httpEnum'
 import { RequestContentTypeEnum } from '@/enums/external/httpEnum'
+import { createComponent } from '@/packages/external/override'
 
 
 const { DocumentTextIcon } = icon.ionicons5
 const { DocumentTextIcon } = icon.ionicons5
 const { FilterIcon, FilterEditIcon } = icon.carbon
 const { FilterIcon, FilterEditIcon } = icon.carbon
@@ -166,6 +187,20 @@ const closeFilter = () => {
   showModal.value = false
   showModal.value = false
 }
 }
 
 
+// 发送请求
+const sendHandle = async () => {
+  try {
+    const res = await fetchHandle()
+    if (res) {
+      const { value } = useFilterFn(targetData.value.filter, res)
+      targetData.value.option.dataset = value
+      return
+    }
+  } catch(e) {
+    console.error(e)
+  }
+}
+
 // 新增过滤器
 // 新增过滤器
 const saveFilter = () => {
 const saveFilter = () => {
   if (errorFlag.value) {
   if (errorFlag.value) {
@@ -174,6 +209,7 @@ const saveFilter = () => {
   }
   }
   targetData.value.filter = filter.value
   targetData.value.filter = filter.value
   closeFilter()
   closeFilter()
+  sendHandle()
 }
 }
 
 
 watch(
 watch(
@@ -185,6 +221,19 @@ watch(
     }
     }
   }
   }
 )
 )
+
+const cacheConfig = ref()
+
+const fetchComponentConfig = async () => {
+  const config = await createComponent(targetData.value.chartConfig)
+  return config
+}
+
+
+onMounted(async ()=> {
+  const config = await fetchComponentConfig()
+  cacheConfig.value = config?.option?.dataset
+})
 </script>
 </script>
 
 
 <style lang="scss" scoped>
 <style lang="scss" scoped>

+<template>
+  <n-table
+    :bordered="false"
+    :single-line="false"
+    size="small"
+    style="border-bottom-right-radius: 7px; border-bottom-left-radius: 7px"
+  >
+    <thead>
+      <tr>
+        <th>key</th>
+        <th>value</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="(item, index) in tableArray.content" :key="index">
+        <td>
+          {{ item.key || '暂无'}}
+        </td>
+        <td>
+          {{ item.value  || '暂无'}}
+        </td>
+      </tr>
+    </tbody>
+  </n-table>
+</template>
+
+<script setup lang="ts">
+import { PropType, reactive, ref, toRefs, watch } from 'vue'
+import { RequestParamsObjType } from '@/enums/httpEnum'
+import noData from '@/assets/images/canvas/noData.png'
+
+const props = defineProps({
+  target: Object as PropType<RequestParamsObjType>
+})
+
+// 默认表格
+const defaultItem = {
+  key: '',
+  value: ''
+}
+const tableArray = reactive<{
+  content: typeof defaultItem[]
+}>({ content: [] })
+
+// 监听选项
+watch(
+  () => props.target as RequestParamsObjType,
+  (target: RequestParamsObjType) => {
+    tableArray.content = []
+    for (const k in target) {
+      tableArray.content.push({
+        key: k,
+        value: target[k]
+      })
+    }
+    // 默认值
+    if (!tableArray.content.length) tableArray.content = [JSON.parse(JSON.stringify(defaultItem))]
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+</script>

+import ChartDataDisplay from './index.vue'
+
+export { ChartDataDisplay }

+<template>
+  <div class="go-chart-data-display">
+    <n-scrollbar style="max-height: 570px">
+      <div class="go-mr-3">
+        <div>
+          <setting-item-box name="主体信息">
+            <setting-item name="接口名称">
+              <n-input size="small" :placeholder="targetData?.dataPondName || '暂无'" :disabled="true"> </n-input>
+            </setting-item>
+            <setting-item name="接口类型">
+              <n-input size="small" :placeholder="pondRequestHttpType || '暂无'" :disabled="true"></n-input>
+            </setting-item>
+          </setting-item-box>
+
+          <setting-item-box>
+            <setting-item name="组件间隔">
+              <n-input size="small" :placeholder="`${requestInterval || '暂无'}`" :disabled="true">
+                <template #suffix>
+                  {{ targetData && SelectHttpTimeNameObj[requestIntervalUnit] }}
+                </template>
+              </n-input>
+            </setting-item>
+            <setting-item name="全局间隔（默认）">
+              <n-input size="small" :placeholder="`${globalData?.requestInterval || '暂无'}`" :disabled="true">
+                <template #suffix> {{ globalData && SelectHttpTimeNameObj[globalData.requestIntervalUnit] }} </template>
+              </n-input>
+            </setting-item>
+          </setting-item-box>
+
+          <setting-item-box name="源地址" :alone="true">
+            <n-input size="small" :placeholder="pondRequestOriginUrl || '暂无'" :disabled="true">
+              <template #prefix>
+                <n-icon :component="PulseIcon" />
+              </template>
+            </n-input>
+          </setting-item-box>
+
+          <setting-item-box name="接口地址" :alone="true">
+            <n-input
+              size="small"
+              :placeholder="pondRequestUrl || '暂无'"
+              :disabled="true"
+            >
+              <template #prefix>
+                <n-icon :component="FlashIcon" />
+              </template>
+            </n-input>
+          </setting-item-box>
+        </div>
+        <n-divider />
+        <setting-item-box name="类型">
+          <setting-item name="配置类型">
+            <n-input
+              size="small"
+              :placeholder="targetData && requestContentTypeObj[pondRequestContentType!]"
+              :disabled="true"
+            ></n-input>
+          </setting-item>
+          <setting-item name="body 类型" v-if="pondRequestContentType === RequestContentTypeEnum.DEFAULT">
+            <n-input size="small" :placeholder="targetData && requestParamsBodyType" :disabled="true"></n-input>
+          </setting-item>
+        </setting-item-box>
+        <div v-if="pondRequestContentType === RequestContentTypeEnum.DEFAULT">
+          <n-tabs type="line" animated v-model:value="tabValue">
+            <n-tab v-for="item in RequestParamsTypeEnum" :key="item" :name="item" :tab="item"> {{ item }} </n-tab>
+          </n-tabs>
+          <!-- 各个页面 -->
+          <div class="go-mt-3">
+            <div v-if="tabValue !== RequestParamsTypeEnum.BODY">
+              <display-table class="go-my-3" :target="pondRequestParams![tabValue]"> </display-table>
+            </div>
+
+            <!-- 选择了 body -->
+            <div v-else>
+              <!-- 为 none 时 -->
+              <n-card class="go-mt-3 go-pb-3" v-if="pondRequestParamsBodyType === RequestBodyEnum['NONE']">
+                <n-text depth="3">该接口没有 Body 体</n-text>
+              </n-card>
+
+              <!-- 具有对象属性时 -->
+              <template
+                v-else-if="
+                  pondRequestParamsBodyType === RequestBodyEnum['FORM_DATA'] ||
+                  pondRequestParamsBodyType === RequestBodyEnum['X_WWW_FORM_URLENCODED']
+                "
+              >
+                <display-table
+                  class="go-my-3"
+                  :target="pondRequestParams![RequestParamsTypeEnum.BODY][pondRequestParamsBodyType]"
+                ></display-table>
+              </template>
+
+              <!-- json  -->
+              <template v-else-if="pondRequestParamsBodyType === RequestBodyEnum['JSON']">
+                <n-card size="small" style="padding-bottom: 7px">
+                  <n-code
+                    :code="pondRequestParams![RequestParamsTypeEnum.BODY][pondRequestParamsBodyType] || '暂无内容'"
+                    language="json"
+                  ></n-code>
+                </n-card>
+              </template>
+
+              <!-- xml  -->
+              <template v-else-if="pondRequestParamsBodyType === RequestBodyEnum['XML']">
+                <n-code
+                  :code="pondRequestParams![RequestParamsTypeEnum.BODY][pondRequestParamsBodyType!] || ''"
+                  language="html"
+                ></n-code>
+              </template>
+            </div>
+          </div>
+        </div>
+        <!-- SQL 请求 -->
+        <div v-else>
+          <setting-item-box name="键名">
+            <n-text>sql</n-text>
+          </setting-item-box>
+          <setting-item-box name="键值">
+            <n-code :code="requestSQLContent.sql || ''" language="sql"></n-code>
+          </setting-item-box>
+        </div>
+      </div>
+    </n-scrollbar>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, ref, toRefs } from 'vue'
+import { icon } from '@/plugins'
+import { SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { RequestDataPondItemType, RequestGlobalConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
+import displayTable from './displayTable.vue'
+import {
+  RequestBodyEnum,
+  RequestParamsTypeEnum,
+  SelectHttpTimeNameObj,
+  RequestContentTypeEnum,
+} from '@/enums/httpEnum'
+
+const props = defineProps({
+  globalData: Object as PropType<RequestGlobalConfigType>,
+  targetData: Object as PropType<RequestDataPondItemType>
+})
+
+const { FlashIcon, PulseIcon } = icon.ionicons5
+
+const {
+  requestInterval,
+  requestSQLContent,
+  requestParamsBodyType,
+  requestIntervalUnit,
+  pondRequestOriginUrl,
+  pondRequestUrl,
+  pondRequestHttpType,
+  pondRequestContentType,
+  pondRequestParamsBodyType,
+  pondRequestParams,
+} = toRefs((props.targetData as RequestDataPondItemType).dataPondRequestConfig)
+
+const requestContentTypeObj = {
+  [RequestContentTypeEnum.DEFAULT]: '普通请求',
+  [RequestContentTypeEnum.SQL]: 'SQL 请求'
+} as Recordable
+
+const tabValue = ref<RequestParamsTypeEnum>(RequestParamsTypeEnum.PARAMS)
+
+</script>
+
+<style lang="scss" scoped>
+@include go('chart-data-display') {
+  flex: 1;
+}
+</style>

+import ChartDataPondControl from './index.vue'
+
+export { ChartDataPondControl }

+<template>
+  <n-modal class="go-chart-data-pond-control"  v-model:show="modelShow" :mask-closable="false">
+    <n-card :bordered="false" role="dialog" size="small" aria-modal="true" style="width: 900px; height: 650px">
+      <template #header></template>
+      <template #header-extra> </template>
+      <div class="pond-content">
+        <!-- 展示区域 -->
+        <chart-data-display
+          v-if="pondData && !loading"
+          :targetData="pondData"
+          :globalData="chartEditStore.getRequestGlobalConfig"
+        ></chart-data-display>
+        <!-- 无数据 -->
+        <div v-else class="no-data go-flex-center">
+          <img :src="noData" alt="暂无数据" />
+          <n-text :depth="3">暂未选择公共接口</n-text>
+        </div>
+        <!-- 左侧列表 -->
+        <chart-data-pond-list @createPond="createPond" @deletePond="deletePond"></chart-data-pond-list>
+      </div>
+      <!-- 底部 -->
+      <template #action>
+        <n-space justify="space-between">
+          <n-button type="info" secondary :disabled="!pondData" @click="openPond(true)">
+            编辑内容
+            <template #icon>
+              <n-icon>
+                <pencil-icon />
+              </n-icon>
+            </template>
+          </n-button>
+          <n-button type="primary" @click="closeHandle">保存 & 关闭</n-button>
+        </n-space>
+      </template>
+    </n-card>
+  </n-modal>
+  <!-- 请求配置model -->
+ <pond-data-request
+    v-model:modelShow="requestShow"
+    :targetDataRequest="editData"
+    :isEdit="isEdit"
+    @editSaveHandle="saveHandle"
+  ></pond-data-request>
+</template>
+
+<script setup lang="ts">
+import { ref, toRefs, computed, nextTick, watch, toRaw } from 'vue'
+import noData from '@/assets/images/canvas/noData.png'
+import { ChartDataPondList } from '../ChartDataPondList'
+import PondDataRequest from '../../../RequestModal/PondDataRequest.vue'
+import { ChartDataDisplay } from '../ChartDataDisplay'
+import { requestConfig } from '@/packages/public/publicConfig'
+import { useTargetData } from '@/views/chart/ContentConfigurations/components/hooks/useTargetData.hook'
+import { RequestDataPondItemType } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { RequestDataTypeEnum } from '@/enums/httpEnum'
+import { icon } from '@/plugins'
+import { getUUID, goDialog } from '@/utils'
+import { cloneDeep } from 'lodash'
+
+defineProps({
+  modelShow: Boolean
+})
+
+const emit = defineEmits(['update:modelShow', 'sendHandle'])
+
+const { PencilIcon } = icon.ionicons5
+
+const { chartEditStore, targetData } = useTargetData()
+
+const { requestDataPond } = toRefs(chartEditStore.getRequestGlobalConfig)
+
+const requestShow = ref(false)
+
+const loading = ref(false)
+
+const isEdit = ref(false)
+
+const editData = ref<RequestDataPondItemType>()
+
+// 所选数据池
+const pondData = computed(() => {
+  const selectId = targetData?.value?.request?.requestDataPondId
+  if (!selectId) return undefined
+  const data = requestDataPond.value.filter(item => {
+    return selectId === item.dataPondId
+  })
+  return data[0]
+})
+
+const cacheEditData = ref<RequestDataPondItemType>()
+
+watch(
+  () => pondData.value,
+  newValue => {
+    loading.value = true
+    editData.value = newValue
+    cacheEditData.value = editData.value
+    nextTick(() => {
+      loading.value = false
+    })
+  },
+  {
+    immediate: true
+  }
+)
+
+// 打开/编辑
+const openPond = (isEditFlag = false) => {
+  isEdit.value = !!isEditFlag
+  requestShow.value = true
+  if (isEditFlag) {
+    editData.value = cacheEditData.value
+    targetData.value.request.pondRequestGlobalIsToken =  editData.value?.dataPondRequestConfig.pondRequestGlobalIsToken
+  }
+}
+
+// 创建
+const createPond = () => {
+  const id = getUUID()
+  editData.value = {
+    dataPondId: id,
+    dataPondName: id,
+    dataPondRequestConfig: cloneDeep({ ...requestConfig, requestDataType: RequestDataTypeEnum.AJAX })
+  }
+  targetData.value.request.pondRequestGlobalIsToken = true
+  openPond()
+}
+
+// 完成创建/编辑
+const saveHandle = (newData: RequestDataPondItemType) => {
+  // 走创建
+  if (isEdit.value) {
+    editSaveHandle(newData)
+  } else {
+    createSaveHandle(newData)
+  }
+  isEdit.value = false
+  requestShow.value = false
+}
+
+// 编辑保存之后
+const editSaveHandle = (newData: RequestDataPondItemType) => {
+  try {
+    const targetIndex = requestDataPond.value.findIndex(item => item.dataPondId === newData.dataPondId)
+    if (targetIndex !== -1) {
+      requestDataPond.value.splice(targetIndex, 1, newData)
+      // 修改数据池后, 修改所有关联的组件
+      chartEditStore.getComponentList.forEach(item => {
+        if (
+          item.request.requestDataType === RequestDataTypeEnum.Pond &&
+          item.request.requestDataPondId === newData.dataPondId
+        ) {
+          item.request = {
+            ...toRaw(newData.dataPondRequestConfig),
+            requestDataPondId: newData.dataPondId
+          }
+        }
+      })
+      window.$message.success('保存成功！')
+    } else {
+      window.$message.error('编辑失败，请稍后重试！')
+    }
+  } catch (error) {
+    window.$message.error('编辑失败，请稍后重试！')
+  }
+}
+
+// 创建保存成功之后
+const createSaveHandle = (newData: RequestDataPondItemType) => {
+  try {
+    if (editData.value) {
+      requestDataPond.value.unshift(newData)
+      window.$message.success('创建成功!')
+    } else {
+      window.$message.error('创建失败，请稍后重试!')
+    }
+  } catch (error) {
+    window.$message.error('创建失败，请稍后重试!')
+  }
+}
+
+// 删除数据池
+const deletePond = (targetData: RequestDataPondItemType) => {
+  goDialog({
+    message: '删除数据后，需手动处理使用改接口的组件，是否继续？',
+    isMaskClosable: true,
+    transformOrigin: 'center',
+    onPositiveCallback: () => {
+      const targetIndex = requestDataPond.value.findIndex(item => item.dataPondId === targetData.dataPondId)
+      if (targetIndex !== -1) {
+        requestDataPond.value.splice(targetIndex, 1)
+        window.$message.success('删除成功!')
+      } else {
+        window.$message.error('删除失败，请稍后重试！')
+      }
+    }
+  })
+}
+
+// 关闭
+const closeHandle = () => {
+  // 将所选内容赋值给对象
+  if (pondData.value) {
+    // targetData.value.request = {
+    //   ...toRaw(pondData.value.dataPondRequestConfig),
+    //   requestDataPondId: pondData.value.dataPondId
+    // }
+  }
+  emit('update:modelShow', false)
+}
+</script>
+
+<style lang="scss" scoped>
+@include go('chart-data-pond-control') {
+  /* 中间 */
+  .pond-content {
+    display: flex;
+  }
+  .no-data {
+    flex-direction: column;
+    width: 100%;
+    img {
+      width: 200px;
+    }
+  }
+  &.n-card.n-modal,
+  .n-card {
+    @extend .go-background-filter;
+  }
+  .n-card-shallow {
+    background-color: rgba(0, 0, 0, 0) !important;
+  }
+  @include deep() {
+    & > .n-card__content {
+      padding-right: 0;
+    }
+    .n-card__content {
+      padding-bottom: 5px;
+    }
+  }
+}
+</style>

+import ChartDataPondList from './index.vue'
+
+export { ChartDataPondList }

+<template>
+  <div class="go-chart-data-pond-list">
+    <n-timeline class="pond-item-timeline" style="width: 20px">
+      <n-timeline-item type="info"> </n-timeline-item>
+      <n-timeline-item type="success"></n-timeline-item>
+    </n-timeline>
+    <div class="pond-item-box">
+      <!-- 新增 -->
+      <n-button class="create-btn go-py-4" ghost @click="createPond">
+        <span> 创建 </span>
+        <template #icon>
+          <n-icon>
+            <DuplicateOutlineIcon></DuplicateOutlineIcon>
+          </n-icon>
+        </template>
+      </n-button>
+      <n-divider style="margin: 10px 0"></n-divider>
+      <n-space v-if="!requestDataPond.length" justify="center">
+        <n-text class="not-layer-text" :depth="3">
+          暂无数据内容，
+          <n-a @click="createPond">立即创建</n-a>
+        </n-text>
+      </n-space>
+      <n-scrollbar style="max-height: 490px">
+        <div
+          v-for="item in requestDataPond"
+          :key="item.dataPondId"
+          :class="{ select: item.dataPondId === selectPondId }"
+          class="pond-item"
+          @click="clickHandle(item)"
+        >
+          <div class="item-content">
+            <div class="item-content-body">
+              <div>
+                <n-tag class="go-mr-1" :type="item.dataPondId === selectPondId ? 'warning' : ''" :bordered="false">
+                  名称
+                </n-tag>
+                <n-ellipsis style="max-width: 180px">
+                  {{ item.dataPondName || '暂无' }}
+                </n-ellipsis>
+              </div>
+              <div>
+                <n-tag class="go-mr-1" :type="item.dataPondId === selectPondId ? 'warning' : ''" :bordered="false">
+                  地址
+                </n-tag>
+                <n-ellipsis style="max-width: 180px">
+                  {{ item.dataPondRequestConfig.pondRequestUrl || '暂无' }}
+                </n-ellipsis>
+              </div>
+            </div>
+            <div class="item-content-icon go-transition-quick" @click="deletePond($event, item)">
+              <n-icon>
+                <trash-icon></trash-icon>
+              </n-icon>
+            </div>
+          </div>
+          <div :class="{ 'select-modal': item.dataPondId === selectPondId }"></div>
+        </div>
+      </n-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { toRefs, computed } from 'vue'
+import { useTargetData } from '@/views/chart/ContentConfigurations/components/hooks/useTargetData.hook'
+import { useDesignStore } from '@/store/modules/designStore/designStore'
+import { RequestDataPondItemType } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { icon } from '@/plugins'
+
+const emit = defineEmits(['createPond', 'deletePond'])
+
+const { DuplicateOutlineIcon, TrashIcon } = icon.ionicons5
+const designStore = useDesignStore()
+const { chartEditStore, targetData } = useTargetData()
+const { requestDataPond } = toRefs(chartEditStore.getRequestGlobalConfig)
+
+// 选中的全局数据
+const selectPondId = computed(() => {
+  return targetData.value.request.requestDataPondId
+})
+
+// 颜色
+const themeColor = computed(() => {
+  return designStore.getAppTheme
+})
+
+// 创建数据池
+const createPond = () => {
+  emit('createPond', true)
+}
+
+// 删除数据池
+const deletePond = (target: Event, targetData: RequestDataPondItemType) => {
+  target.stopPropagation()
+  target.preventDefault()
+  emit('deletePond', targetData)
+}
+
+// 选中
+const clickHandle = (item: RequestDataPondItemType) => {
+  targetData.value.request.requestDataPondId = item.dataPondId
+  targetData.value.request.pondRequestGlobalIsToken = item.dataPondRequestConfig.pondRequestGlobalIsToken
+}
+</script>
+
+<style scoped lang="scss">
+$height: 530px;
+$listWidth: 280px;
+$centerHeight: 60px;
+$centerMiniHeight: 28px;
+$textSize: 10px;
+
+@include go('chart-data-pond-list') {
+  padding-top: 10px;
+  padding-bottom: 5px;
+  margin-right: 5px;
+  display: flex;
+  .pond-item-timeline > .n-timeline-item {
+    &:first-child {
+      height: $height;
+    }
+  }
+  .pond-item-box {
+    width: $listWidth;
+    position: relative;
+    .create-btn {
+      width: calc(#{$listWidth - 15px});
+      margin-right: 15px;
+    }
+    .pond-item {
+      position: relative;
+      height: $centerHeight;
+      padding: 5px;
+      margin-bottom: 10px;
+      margin-right: 15px;
+      border-radius: 5px;
+      cursor: pointer;
+      border: 1px solid rgba(0, 0, 0, 0);
+      @include fetch-bg-color('background-color3');
+      @extend .go-transition-quick;
+      &.hover,
+      &:hover {
+        @include fetch-bg-color('background-color4');
+      }
+      &:hover {
+        @include deep() {
+          .icon-item {
+            opacity: 1;
+          }
+        }
+        .item-content-icon {
+          opacity: 1 !important;
+        }
+      }
+
+      &.select {
+        border: 1px solid v-bind('themeColor');
+        background-color: rgba(0, 0, 0, 0);
+        .item-content-icon {
+          display: none;
+        }
+      }
+
+      .select-modal,
+      .item-content {
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
+
+      .item-content {
+        z-index: 1;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 5px;
+        .item-content-body {
+          width: 230px;
+          display: flex;
+          flex-direction: column;
+          gap: 5px;
+        }
+        .item-content-icon {
+          opacity: 0;
+          height: $centerHeight;
+          line-height: $centerHeight;
+          padding-left: 5px;
+        }
+      }
+
+      .select-modal {
+        width: 100%;
+        height: 100%;
+        opacity: 0.3;
+        background-color: v-bind('themeColor');
+      }
+    }
+  }
+}
+</style>

+import ChartDataPond from './index.vue'
+
+export { ChartDataPond }

+<template>
+  <!-- 选中内容 -->
+  <div class="go-chart-data-pond">
+    <n-card class="n-card-shallow">
+      <setting-item-box name="请求名称" :alone="true">
+        <n-input size="small" :placeholder="pondData?.dataPondName || '暂无'" :disabled="true">
+          <template #prefix>
+            <n-icon :component="FishIcon" />
+          </template>
+        </n-input>
+      </setting-item-box>
+
+      <setting-item-box name="接口地址" :alone="true">
+        <n-input size="small" :placeholder="pondData?.dataPondRequestConfig.requestUrl || '暂无'" :disabled="true">
+          <template #prefix>
+            <n-icon :component="FlashIcon" />
+          </template>
+        </n-input>
+      </setting-item-box>
+
+      <div class="edit-text" @click="controlModelHandle">
+        <div class="go-absolute-center">
+          <n-button type="primary" secondary>编辑配置</n-button>
+        </div>
+      </div>
+    </n-card>
+  </div>
+
+  <setting-item-box :alone="true">
+    <template #name>
+      测试
+      <n-tooltip trigger="hover">
+        <template #trigger>
+          <n-icon size="21" :depth="3">
+            <help-outline-icon></help-outline-icon>
+          </n-icon>
+        </template>
+        默认赋值给 dataset 字段
+      </n-tooltip>
+    </template>
+    <n-button type="primary" ghost @click="sendHandle">
+      <template #icon>
+        <n-icon>
+          <flash-icon />
+        </n-icon>
+      </template>
+      发送请求
+    </n-button>
+  </setting-item-box>
+
+  <!-- 底部数据展示 -->
+  <chart-data-matching-and-show :show="showMatching && !loading" :ajax="true"></chart-data-matching-and-show>
+
+  <!-- 骨架图 -->
+  <go-skeleton :load="loading" :repeat="3"></go-skeleton>
+
+  <!-- 编辑 / 新增弹窗 -->
+  <chart-data-pond-control v-model:modelShow="controlModel" @sendHandle="sendHandle"></chart-data-pond-control>
+</template>
+
+<script setup lang="ts">
+import { ref, toRefs, toRaw, onBeforeUnmount, computed, watchEffect } from 'vue'
+import { icon } from '@/plugins'
+import { http, customizeHttp } from '@/api/http'
+import { SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { ChartDataPondControl } from './components/ChartDataPondControl'
+import { useDesignStore } from '@/store/modules/designStore/designStore'
+import { ChartDataMatchingAndShow } from '../ChartDataMatchingAndShow'
+import { newFunctionHandle } from '@/utils'
+import { useTargetData } from '../../../../hooks/useTargetData.hook'
+
+const designStore = useDesignStore()
+const { HelpOutlineIcon, FlashIcon, PulseIcon, FishIcon } = icon.ionicons5
+const { targetData, chartEditStore } = useTargetData()
+
+const {
+  requestDataPond,
+  requestInterval: GlobalRequestInterval,
+  requestIntervalUnit: GlobalRequestIntervalUnit
+} = toRefs(chartEditStore.getRequestGlobalConfig)
+
+const loading = ref(false)
+const controlModel = ref(false)
+const showMatching = ref(false)
+
+let firstFocus = 0
+let lastFilter: any = undefined
+
+// 所选数据池
+const pondData = computed(() => {
+  const selectId = targetData.value.request.requestDataPondId
+  if (!selectId) return undefined
+  const data = requestDataPond.value.filter((item: Recordable) => {
+    return selectId === item.dataPondId
+  })
+  return data[0]
+})
+
+// 颜色
+const themeColor = computed(() => {
+  return designStore.getAppTheme
+})
+
+// 请求配置 model
+const controlModelHandle = () => {
+  controlModel.value = true
+}
+
+// 发送请求
+const sendHandle = async () => {
+  if (!targetData.value?.request) {
+    window.$message.warning('请选择一个公共接口！')
+    return
+  }
+  loading.value = true
+  try {
+    const res = await customizeHttp(toRaw(targetData.value.request), toRaw(chartEditStore.getRequestGlobalConfig))
+    loading.value = false
+    if (res) {
+      if (!res?.data && !targetData.value.filter) {
+        window['$message'].warning('您的数据不符合默认格式，请配置过滤器！')
+        showMatching.value = true
+        return
+      }
+      targetData.value.option.dataset = newFunctionHandle(res?.data, res, targetData.value.filter)
+      showMatching.value = true
+      return
+    }
+    window['$message'].warning('没有拿到返回值，请检查接口！')
+  } catch (error) {
+    console.error(error);
+    loading.value = false
+    window['$message'].warning('数据异常，请检查参数！')
+  }
+}
+
+watchEffect(() => {
+  const filter = targetData.value?.filter
+  if (lastFilter !== filter && firstFocus) {
+    lastFilter = filter
+    sendHandle()
+  }
+  firstFocus++
+})
+
+onBeforeUnmount(() => {
+  lastFilter = null
+})
+</script>
+
+<style scoped lang="scss">
+@include go('chart-data-pond') {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .n-card-shallow {
+    &.n-card {
+      @extend .go-background-filter;
+      @include deep() {
+        .n-card__content {
+          padding: 10px;
+        }
+      }
+    }
+    .edit-text {
+      position: absolute;
+      top: 0px;
+      left: 0px;
+      width: 325px;
+      height: 136px;
+      cursor: pointer;
+      opacity: 0;
+      transition: all 0.3s;
+      @extend .go-background-filter;
+      backdrop-filter: blur(2px) !important;
+    }
+    &:hover {
+      border-color: v-bind('themeColor');
+      .edit-text {
+        opacity: 1;
+      }
+    }
+  }
+}
+</style>

 <script setup lang="ts">
 <script setup lang="ts">
-import { ref, computed, onBeforeUnmount, watchEffect, unref } from 'vue'
+import { ref, computed, onBeforeUnmount, watchEffect, unref, watch } from 'vue'
 import { icon } from '@/plugins'
 import { icon } from '@/plugins'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { SettingItemBox } from '@/components/Pages/ChartItemSetting'
 import { SettingItemBox } from '@/components/Pages/ChartItemSetting'
 import { ChartDataMatchingAndShow } from '../../../external/components/ChartDataMatchingAndShow'
 import { ChartDataMatchingAndShow } from '../../../external/components/ChartDataMatchingAndShow'
+import { ChartDataPondControl } from '../ChartDataPond/components/ChartDataPondControl'
 import { useTargetData } from '../../../../hooks/useTargetData.hook'
 import { useTargetData } from '../../../../hooks/useTargetData.hook'
 import { NButton, NSelect, NTooltip, NIcon, SelectOption } from 'naive-ui'
 import { NButton, NSelect, NTooltip, NIcon, SelectOption } from 'naive-ui'
 import { RequestInfoPanel } from '../RequestInfoPanel'
 import { RequestInfoPanel } from '../RequestInfoPanel'
@@ -11,24 +12,24 @@ import { RequestModal } from '../RequestModal'
 import { useFetchTargetData } from '@/hooks/external/useFetchTargetData'
 import { useFetchTargetData } from '@/hooks/external/useFetchTargetData'
 import { useFilterFn } from '@/hooks/external/useFilterFn'
 import { useFilterFn } from '@/hooks/external/useFilterFn'
 import { RequestDataTypeEnum } from '@/enums/external/httpEnum'
 import { RequestDataTypeEnum } from '@/enums/external/httpEnum'
+import { JSONParse } from '@/utils/external/utils'
+import { CreateComponentGroupType, CreateComponentType } from '@/packages/index.d'
+import { isArray } from '@/utils/external/is'
 
 
 const { HelpOutlineIcon, FlashIcon } = icon.ionicons5
 const { HelpOutlineIcon, FlashIcon } = icon.ionicons5
 const { targetData } = useTargetData()
 const { targetData } = useTargetData()
- 
-
 
 
 const requestModal = ref<InstanceType<typeof RequestModal>>()
 const requestModal = ref<InstanceType<typeof RequestModal>>()
 
 
 const designStore = useDesignStore()
 const designStore = useDesignStore()
 
 
-
 /**
 /**
-   * ft 修改在公共接口下拉框里默认选择公共接口
-   * 修改后的代码在注释之间，并标注好源代码和修改后代码，方便回溯
-   * 源代码 const selectedRequestType = ref(targetData.value.request.requestDataType || RequestDataTypeEnum.AJAX)
-   * 修改后的代码 const selectedRequestType = ref(targetData.value.request.requestDataType || RequestDataTypeEnum.Pond)
-   * 修改后代码在//ft之间
-   */
+ * ft 修改在公共接口下拉框里默认选择公共接口
+ * 修改后的代码在注释之间，并标注好源代码和修改后代码，方便回溯
+ * 源代码 const selectedRequestType = ref(targetData.value.request.requestDataType || RequestDataTypeEnum.AJAX)
+ * 修改后的代码 const selectedRequestType = ref(targetData.value.request.requestDataType || RequestDataTypeEnum.Pond)
+ * 修改后代码在//ft之间
+ */
 const selectedRequestType = ref(targetData.value.request.requestDataType || RequestDataTypeEnum.Pond)
 const selectedRequestType = ref(targetData.value.request.requestDataType || RequestDataTypeEnum.Pond)
 
 
 const getApiRequestType: SelectOption[] = [
 const getApiRequestType: SelectOption[] = [
@@ -43,7 +44,7 @@ const showMatching = ref(false)
 let firstFocus = 0
 let firstFocus = 0
 let lastFilter: any = undefined
 let lastFilter: any = undefined
 
 
-const { fetchTargetData, } = useFetchTargetData()
+const { fetchTargetData } = useFetchTargetData()
 
 
 // 发送请求
 // 发送请求
 const sendHandle = async () => {
 const sendHandle = async () => {
@@ -56,6 +57,19 @@ const sendHandle = async () => {
     const res = await fetchTargetData()
     const res = await fetchTargetData()
     if (res) {
     if (res) {
       const { value } = useFilterFn(targetData.value.filter, res)
       const { value } = useFilterFn(targetData.value.filter, res)
+        //分组更新下面子组件
+        if(targetData.value.isGroup) {
+          if (isArray(targetData.value.saveHistoryInput!)) {
+            const parseHistoryInput = JSONParse(targetData.value.saveHistoryInput!)
+            parseHistoryInput?.forEach((historyItem:Recordable) => {
+                const findCurrentItem =  targetData.value.groupList?.find((groupItem:CreateComponentType | CreateComponentGroupType) => groupItem.id === historyItem.id)
+                if(findCurrentItem) {
+                    findCurrentItem.option.dataset = value[historyItem.inputValue]
+                }
+            })
+         }
+      }
+      //
       targetData.value.option.dataset = value
       targetData.value.option.dataset = value
       showMatching.value = true
       showMatching.value = true
       return
       return
@@ -63,9 +77,9 @@ const sendHandle = async () => {
   } finally {
   } finally {
     loading.value = false
     loading.value = false
   }
   }
-
 }
 }
 
 
+
 // 颜色
 // 颜色
 const themeColor = computed(() => {
 const themeColor = computed(() => {
   return designStore.getAppTheme
   return designStore.getAppTheme
@@ -73,6 +87,9 @@ const themeColor = computed(() => {
 
 
 const handleClickPanel = () => {
 const handleClickPanel = () => {
   unref(requestModal as any)?.openModal?.(true, unref(selectedRequestType))
   unref(requestModal as any)?.openModal?.(true, unref(selectedRequestType))
+  if (selectedRequestType.value === RequestDataTypeEnum.AJAX) {
+    targetData.value.request.requestDataType = RequestDataTypeEnum.AJAX
+  }
 }
 }
 
 
 // TODO socket 请求时会触发
 // TODO socket 请求时会触发
@@ -81,11 +98,11 @@ watchEffect(() => {
   /**
   /**
    * FT 修改
    * FT 修改
    */
    */
-  if(!filter) return
+  if (!filter) return
   //ft
   //ft
   if (lastFilter !== filter && firstFocus) {
   if (lastFilter !== filter && firstFocus) {
     lastFilter = filter
     lastFilter = filter
-    sendHandle()
+    // sendHandle()
   }
   }
   firstFocus++
   firstFocus++
 })
 })
@@ -94,6 +111,13 @@ onBeforeUnmount(() => {
   lastFilter = null
   lastFilter = null
 })
 })
 
 
+const controlModel = ref(false)
+
+const handleOpenChartDataPondModal = () => controlModel.value = true
+
+watch(()=>targetData.value, (newValue) => {
+  selectedRequestType.value = newValue?.request?.requestDataType as unknown as any
+})
 
 
 </script>
 </script>
 
 
@@ -103,6 +127,10 @@ onBeforeUnmount(() => {
       <NSelect v-model:value="selectedRequestType" :options="getApiRequestType" />
       <NSelect v-model:value="selectedRequestType" :options="getApiRequestType" />
     </SettingItemBox>
     </SettingItemBox>
 
 
+    <SettingItemBox v-if="selectedRequestType === RequestDataTypeEnum.AJAX" name="全局配置" :alone="true">
+      <NButton @click="handleOpenChartDataPondModal" type="success">配置</NButton>
+    </SettingItemBox>
+
     <RequestInfoPanel @clickPanel="handleClickPanel" />
     <RequestInfoPanel @clickPanel="handleClickPanel" />
 
 
     <SettingItemBox :alone="true">
     <SettingItemBox :alone="true">
@@ -134,11 +162,11 @@ onBeforeUnmount(() => {
     <go-skeleton :load="loading" :repeat="3"></go-skeleton>
     <go-skeleton :load="loading" :repeat="3"></go-skeleton>
 
 
     <RequestModal ref="requestModal" />
     <RequestModal ref="requestModal" />
+
+    <chart-data-pond-control v-model:modelShow="controlModel" @sendHandle="sendHandle"></chart-data-pond-control>
   </div>
   </div>
 </template>
 </template>
 
 
-
-
 <style lang="scss" scoped>
 <style lang="scss" scoped>
 @include thingsKit('chart-configurations-data-ajax') {
 @include thingsKit('chart-configurations-data-ajax') {
   .n-card-shallow {
   .n-card-shallow {
@@ -174,4 +202,4 @@ onBeforeUnmount(() => {
     }
     }
   }
   }
 }
 }
-</style> 
+</style>

@@ -448,9 +448,17 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => {
       Reflect.deleteProperty(params, key)
       Reflect.deleteProperty(params, key)
     })
     })
     params[BuiltInVariable.SELECT_TIME_AGGREGATION] = {}
     params[BuiltInVariable.SELECT_TIME_AGGREGATION] = {}
+    params[BuiltInVariable.SELECT_TIME_AGGREGATION].agg = null 
+    params[BuiltInVariable.SELECT_TIME_AGGREGATION].limit = 7 
+    params[BuiltInVariable.SELECT_TIME_AGGREGATION].interval = null 
+    getSelectDeviceAttr.value.value = null
+    getSelectOrgTree.value.value = null
+    getSelectDeviceProfile.value.value = null
+    getSelectDevice.value.value = null
   }
   }
 
 
   const setDynamicFormValue = (params: Recordable) => {
   const setDynamicFormValue = (params: Recordable) => {
+    clearParams()
     setParams(params)
     setParams(params)
     getOrgOption()
     getOrgOption()
     getDeviceProfileOption()
     getDeviceProfileOption()

@@ -99,6 +99,7 @@ const handleSelectedInterfaceChange = async (_value: string, option: PublicInter
   const { filter } = option
   const { filter } = option
   const { targetData } = useTargetData()
   const { targetData } = useTargetData()
   targetData.value.filter = filter ?? 'return res'
   targetData.value.filter = filter ?? 'return res'
+  targetData.value.request.publicInterfaceSelectId = option.id as string
   //ft
   //ft
   setDynamicFormValue(option as unknown as ExtraRequestConfigType)
   setDynamicFormValue(option as unknown as ExtraRequestConfigType)
 }
 }
@@ -154,7 +155,7 @@ const getConfigurationData = () => {
 
 
 const setConfigurationData = async (request: ExtraRequestConfigType) => {
 const setConfigurationData = async (request: ExtraRequestConfigType) => {
   await getPublicInterfaceList()
   await getPublicInterfaceList()
-  const { requestDataPondId, requestParams, requestParamsBodyType, requestContentType, requestHttpType, requestIntervalUnit, requestInterval } = request
+  const { requestDataPondId, requestParams, requestParamsBodyType, requestContentType, requestHttpType, requestIntervalUnit, requestInterval, publicInterfaceSelectId } = request
   const { Header } = requestParams
   const { Header } = requestParams
   /**
   /**
    * ft 修改
    * ft 修改
@@ -162,7 +163,8 @@ const setConfigurationData = async (request: ExtraRequestConfigType) => {
    * 源代码 selectedPublicInterface.value = requestDataPondId
    * 源代码 selectedPublicInterface.value = requestDataPondId
    * 修改后代码 selectedPublicInterface.value = publicInterfaceList.value.find(it=>it.id === requestDataPondId)?.id||''
    * 修改后代码 selectedPublicInterface.value = publicInterfaceList.value.find(it=>it.id === requestDataPondId)?.id||''
    */
    */
-  selectedPublicInterface.value = publicInterfaceList.value.find(it => it.id === requestDataPondId)?.id || ''
+  console.log(publicInterfaceList.value)
+  selectedPublicInterface.value = publicInterfaceList.value.find(it => it.id === publicInterfaceSelectId)?.id || ''
   //ft
   //ft
   requestContentTypeRef.value = requestContentType
   requestContentTypeRef.value = requestContentType
   requestHttpTypeRef.value = requestHttpType
   requestHttpTypeRef.value = requestHttpType

 <script setup lang="ts">
 <script setup lang="ts">
-import { NInput, NInputNumber, NInputGroup, NButton, NSelect, SelectOption, NTabs, NTabPane, NSpace } from 'naive-ui'
+import { NInput, NInputNumber, NInputGroup, NSelect, SelectOption, NTabs, NTabPane } from 'naive-ui'
 import { SettingItem, SettingItemBox } from '@/components/Pages/ChartItemSetting';
 import { SettingItem, SettingItemBox } from '@/components/Pages/ChartItemSetting';
 import { selectTimeOptions, selectTypeOptions } from '../../../index.d';
 import { selectTimeOptions, selectTypeOptions } from '../../../index.d';
 import { RequestBodyEnum, RequestContentTypeEnum, RequestDataTypeEnum, RequestHttpEnum, RequestHttpIntervalEnum, RequestParams } from '@/enums/httpEnum';
 import { RequestBodyEnum, RequestContentTypeEnum, RequestDataTypeEnum, RequestHttpEnum, RequestHttpIntervalEnum, RequestParams } from '@/enums/httpEnum';
@@ -7,9 +7,6 @@ import { ref, unref } from 'vue';
 import DefaultRequestContent from './DefaultRequestContent.vue';
 import DefaultRequestContent from './DefaultRequestContent.vue';
 import SqlConfiguration from './SqlConfiguration.vue';
 import SqlConfiguration from './SqlConfiguration.vue';
 import { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d';
 import { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d';
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'; 
-
-const chartEditStore = useChartEditStore()
 
 
 const requestContentTypeRef = ref(RequestContentTypeEnum.DEFAULT)
 const requestContentTypeRef = ref(RequestContentTypeEnum.DEFAULT)
 
 
@@ -39,7 +36,7 @@ const getConfigurationData = (): RequestConfigType => {
       sql: unref(requestSQLContentRef)
       sql: unref(requestSQLContentRef)
     },
     },
     requestParams: unref(requestParamsRef),
     requestParams: unref(requestParamsRef),
-    requestUrl: `${chartEditStore.getRequestGlobalConfig.requestOriginUrl}${unref(requestUrlRef)}`
+    requestUrl: `${unref(requestUrlRef)}`
   }
   }
 }
 }
 
 
@@ -53,7 +50,7 @@ const setConfigurationData = (request: RequestConfigType) => {
   requestParamsBodyTypeRef.value = requestParamsBodyType
   requestParamsBodyTypeRef.value = requestParamsBodyType
   requestSQLContentRef.value = requestSQLContent.sql
   requestSQLContentRef.value = requestSQLContent.sql
   requestParamsRef.value = requestParams 
   requestParamsRef.value = requestParams 
-  requestUrlRef.value = !requestUrl ? ``: 'h' + requestUrl?.split('h')[1] 
+  requestUrlRef.value = requestUrl
 }
 }
 
 
 defineExpose({
 defineExpose({

 <script lang="ts" setup>
 <script lang="ts" setup>
-import { RequestBodyEnum, RequestParams, RequestParamsTypeEnum } from '@/enums/httpEnum';
-import { NTabPane, NTabs } from 'naive-ui';
-import { ref } from 'vue';
-import ParamsTable from './ParamsTable.vue';
-import RequestBody from './RequestBody.vue';
+import { RequestBodyEnum, RequestParams, RequestParamsTypeEnum } from '@/enums/httpEnum'
+import { NTabPane, NTabs } from 'naive-ui'
+import { ref } from 'vue'
+import ParamsTable from './ParamsTable.vue'
+import RequestBody from './RequestBody.vue'
 
 
 const props = defineProps<{
 const props = defineProps<{
   value: RequestParams
   value: RequestParams
@@ -21,7 +21,6 @@ const handleSyncRequestParamsBodyType = (value: RequestBodyEnum) => {
 const handleUpdate = (key: RequestParamsTypeEnum, value: Recordable) => {
 const handleUpdate = (key: RequestParamsTypeEnum, value: Recordable) => {
   emit('update:value', { ...props.value, [key]: value })
   emit('update:value', { ...props.value, [key]: value })
 }
 }
-
 </script>
 </script>
 
 
 <template>
 <template>
@@ -30,24 +29,29 @@ const handleUpdate = (key: RequestParamsTypeEnum, value: Recordable) => {
       <NTabPane v-for="item in RequestParamsTypeEnum" :name="item" :key="item"></NTabPane>
       <NTabPane v-for="item in RequestParamsTypeEnum" :name="item" :key="item"></NTabPane>
     </NTabs>
     </NTabs>
     <section v-if="tabValue === RequestParamsTypeEnum.PARAMS">
     <section v-if="tabValue === RequestParamsTypeEnum.PARAMS">
-      <ParamsTable :value="value[RequestParamsTypeEnum.PARAMS]"
-        @update:value="(value: Recordable) => handleUpdate(RequestParamsTypeEnum.PARAMS, value)" />
+      <ParamsTable
+        :value="value[RequestParamsTypeEnum.PARAMS]"
+        @update:value="(value: Recordable) => handleUpdate(RequestParamsTypeEnum.PARAMS, value)"
+      />
     </section>
     </section>
 
 
-    <RequestBody :value="value" @update:value="(value: Recordable) => handleUpdate(RequestParamsTypeEnum.BODY, value)"
-      @update:requestParamsBodyType="handleSyncRequestParamsBodyType" :requestParamsBodyType="requestParamsBodyType"
-      v-if="tabValue === RequestParamsTypeEnum.BODY" />
-
-    <ParamsTable v-if="tabValue === RequestParamsTypeEnum.HEADER" :value="value.Header"
-      @update:value="(value: Recordable) => handleUpdate(RequestParamsTypeEnum.HEADER, value)" />
+    <RequestBody
+      :value="value"
+      @update:value="(value: Recordable) => handleUpdate(RequestParamsTypeEnum.BODY, value)"
+      @update:requestParamsBodyType="handleSyncRequestParamsBodyType"
+      :requestParamsBodyType="requestParamsBodyType"
+      v-if="tabValue === RequestParamsTypeEnum.BODY"
+    />
+
+    <ParamsTable
+      v-if="tabValue === RequestParamsTypeEnum.HEADER"
+      :value="value.Header"
+      @update:value="(value: Recordable) => handleUpdate(RequestParamsTypeEnum.HEADER, value)"
+    />
   </section>
   </section>
 </template>
 </template>
 
 
 <style lang="scss" scoped>
 <style lang="scss" scoped>
-.container {
-  width: 600px;
-}
-
 .body-container {
 .body-container {
   margin-top: 20px;
   margin-top: 20px;
 }
 }

 <script lang="ts" setup>
 <script lang="ts" setup>
-import { SettingItem, SettingItemBox } from '@/components/Pages/ChartItemSetting';
-import { icon } from '@/plugins';
-import { NButton, NCard, NCollapseTransition, NIcon, NInput, NInputGroup, NInputNumber, NSelect, NSpace, NTag, NTooltip, SelectOption } from 'naive-ui';
-import { computed, ref, unref } from 'vue';
+import { SettingItem, SettingItemBox } from '@/components/Pages/ChartItemSetting'
+import { icon } from '@/plugins'
+import {
+  NButton,
+  NCard,
+  NCollapseTransition,
+  NIcon,
+  NInput,
+  NInputGroup,
+  NInputNumber,
+  NSelect,
+  NSpace,
+  NTag,
+  NTooltip,
+  SelectOption,
+  NDivider,
+  CascaderOption,
+  NCascader,
+} from 'naive-ui'
+import { computed, onMounted, reactive, ref, unref } from 'vue'
 import GlobalParamsConfiguration from './GlobalParamsConfiguration.vue'
 import GlobalParamsConfiguration from './GlobalParamsConfiguration.vue'
 import { ChevronDown, ChevronUp } from '@vicons/carbon'
 import { ChevronDown, ChevronUp } from '@vicons/carbon'
-import { useDesignStore } from '@/store/modules/designStore/designStore';
-import { selectTimeOptions } from '../../../index.d';
-import { useTargetData } from '../../../../hooks/useTargetData.hook';
-import { RequestHttpIntervalEnum } from '@/enums/httpEnum';
+import { useDesignStore } from '@/store/modules/designStore/designStore'
+import { selectTimeOptions } from '../../../index.d'
+import { useTargetData } from '../../../../hooks/useTargetData.hook'
+import { RequestDataTypeEnum, RequestHttpIntervalEnum } from '@/enums/httpEnum'
+import { RequestConfigType, RequestDataPondItemType } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { convertToCascadingData } from '@/utils/external/utils'
+import { customThirdInterfaceRequest, thirdInterfaceRequest } from '@/api/external/customRequest'
 
 
 const { PencilIcon } = icon.ionicons5
 const { PencilIcon } = icon.ionicons5
+
 const designStore = useDesignStore()
 const designStore = useDesignStore()
+
 const editDisabled = ref(false)
 const editDisabled = ref(false)
+
 const collapseHeaderTable = ref(false)
 const collapseHeaderTable = ref(false)
 
 
-const { chartEditStore } = useTargetData()
+const { targetData, chartEditStore } = useTargetData()
 
 
 const handleCollapse = () => {
 const handleCollapse = () => {
   collapseHeaderTable.value = !unref(collapseHeaderTable)
   collapseHeaderTable.value = !unref(collapseHeaderTable)
 }
 }
 
 
+const requestDataPondLength = computed(()=>chartEditStore.getRequestGlobalConfig.requestDataPond.length)
 
 
 // 颜色
 // 颜色
 const themeColor = computed(() => {
 const themeColor = computed(() => {
   return designStore.getAppTheme
   return designStore.getAppTheme
 })
 })
 
 
+const selectGlobalPondValue = ref('')
+
+const selectGlobalPondIsToken = ref(true)
+
+const cacheSelectOption = ref<Recordable>({
+  dataPondRequestConfig:{
+    pondRequestOriginUrl:'',
+    pondRequestUrl:'',
+    pondRequestHttpType:'',
+    pondRequestParams: {
+      "Body": {
+        "form-data": {},
+        "x-www-form-urlencoded": {},
+        "json": "",
+        "xml": ""
+      },
+      "Header": {},
+      "Params": {}
+    }, 
+    requestVerificationToken:'',
+  }
+})
 
 
+const selectGlobalPondOptions = computed(() => {
+  return chartEditStore.getRequestGlobalConfig.requestDataPond.map(dataPond=>({
+    value:dataPond.dataPondId,
+    label:dataPond.dataPondName,
+    ...dataPond
+  }))
+})
+
+const getTokenString = ref()
+
+const resOptions = ref<CascaderOption[]>([])
+
+const resValue = ref()
+
+const cascaderConfig = reactive({
+  hoverTrigger: true,
+  checkStrategyIsChild: true,
+  filterable: false,
+  showPath: true
+})
 
 
+const handleResCascader = (value: string | number, options: Recordable) => {
+  targetData.value.request.thirdSelectCascaderLabel = options.label
+  getTokenString.value = value as string | number
+  targetData.value.request.requestVerificationToken = value as string
+  targetData.value.request.requestDataType = RequestDataTypeEnum.AJAX
+}
+
+const findCurrentPond = () => {
+  return selectGlobalPondOptions.value.find((pondItem: RequestDataPondItemType & {label: string, value: string}) => pondItem.dataPondId === targetData.value?.request?.requestDataPondId)
+}
+
+const handleSelectGlobalPond = (_:string, options:RequestDataPondItemType & {label: string, value: string}) => {
+  selectGlobalPondIsToken.value = options.dataPondRequestConfig.pondRequestGlobalIsToken!
+  cacheSelectOption.value = options
+  targetData.value.request = options.dataPondRequestConfig
+  targetData.value.request.requestDataPondId = options.dataPondId
+  getTokenString.value =''
+  resOptions.value = []
+  resValue.value = null
+  handleExecuteRequest()
+}
+
+//执行请求获取三方Token
+const handleExecuteRequest = async () => {
+  try {
+    const originUrlString =  cacheSelectOption.value?.dataPondRequestConfig?.pondRequestOriginUrl
+    const requestUrlString = cacheSelectOption.value?.dataPondRequestConfig?.pondRequestUrl
+    const body = cacheSelectOption.value?.dataPondRequestConfig?.pondRequestParams['Body']['json']
+    if(originUrlString && requestUrlString){
+      const request = {
+        requestOriginUrl: `${originUrlString}${requestUrlString}`,
+        body
+      }
+      const res = await customThirdInterfaceRequest(request as unknown as thirdInterfaceRequest)
+      resOptions.value = convertToCascadingData(res) as unknown as CascaderOption[]
+      resValue.value = targetData.value?.request?.thirdSelectCascaderLabel
+    }
+  } catch (e) {
+    getTokenString.value = JSON.stringify(e) as string
+  }
+}
+
+onMounted(()=>{
+  getTokenString.value = targetData.value?.request?.requestVerificationToken
+  selectGlobalPondValue.value = findCurrentPond()?.dataPondId as string
+  selectGlobalPondIsToken.value = findCurrentPond()?.dataPondRequestConfig.pondRequestGlobalIsToken as boolean
+  cacheSelectOption.value = findCurrentPond() as RequestDataPondItemType
+  resValue.value = targetData.value?.request?.thirdSelectCascaderLabel
+  targetData.value.request.pondRequestOriginUrl = findCurrentPond()?.dataPondRequestConfig?.pondRequestOriginUrl
+  targetData.value.request.pondRequestGlobalTokenKey = findCurrentPond()?.dataPondRequestConfig?.pondRequestGlobalTokenKey
+  targetData.value.request.pondRequestGlobalTokenSuffix = findCurrentPond()?.dataPondRequestConfig?.pondRequestGlobalTokenSuffix
+  targetData.value.request.pondRequestInterval = findCurrentPond()?.dataPondRequestConfig?.pondRequestInterval
+  targetData.value.request.pondRequestIntervalUnit = findCurrentPond()?.dataPondRequestConfig?.pondRequestIntervalUnit
+  targetData.value.request.pondRequestGlobalInterval = findCurrentPond()?.dataPondRequestConfig?.pondRequestGlobalInterval
+  targetData.value.request.pondRequestGlobalIntervalUnit = findCurrentPond()?.dataPondRequestConfig?.pondRequestGlobalIntervalUnit
+  handleExecuteRequest()
+})
 </script>
 </script>
 
 
 <template>
 <template>
@@ -36,24 +158,44 @@ const themeColor = computed(() => {
     <template #header>
     <template #header>
       <NTag type="info">全局公共配置</NTag>
       <NTag type="info">全局公共配置</NTag>
     </template>
     </template>
-    <NSpace vertical>
-      <SettingItemBox name="服务" :itemRightStyle="{
-        gridTemplateColumns: '5fr 2fr 1fr'
-      }">
+    <NSpace v-if="requestDataPondLength<=0"  vertical>
+      <SettingItemBox
+        name="服务"
+        :itemRightStyle="{
+          gridTemplateColumns: '5fr 2fr 1fr'
+        }"
+      >
         <!-- 源地址 -->
         <!-- 源地址 -->
         <SettingItem name="前置 URL">
         <SettingItem name="前置 URL">
-          <NInput v-model:value="chartEditStore.getRequestGlobalConfig.requestOriginUrl" default-value="http://127.0.0.1" :disabled="editDisabled"
-            size="small" placeholder="例:http://127.0.0.1"></NInput>
+          <NInput
+            v-model:value="chartEditStore.getRequestGlobalConfig.requestOriginUrl"
+            default-value="http://127.0.0.1"
+            :disabled="editDisabled"
+            size="small"
+            placeholder="例:http://127.0.0.1"
+          ></NInput>
         </SettingItem>
         </SettingItem>
         <SettingItem name="更新间隔，为 0 只会初始化">
         <SettingItem name="更新间隔，为 0 只会初始化">
           <NInputGroup>
           <NInputGroup>
-            <NInputNumber v-model:value="chartEditStore.getRequestGlobalConfig.requestInterval" class="select-time-number"
-              size="small" min="0" :show-button="false" :disabled="editDisabled" placeholder="请输入数字">
+            <NInputNumber
+              v-model:value="chartEditStore.getRequestGlobalConfig.requestInterval"
+              class="select-time-number"
+              size="small"
+              min="0"
+              :show-button="false"
+              :disabled="editDisabled"
+              placeholder="请输入数字"
+            >
             </NInputNumber>
             </NInputNumber>
             <!-- 单位 -->
             <!-- 单位 -->
-            <NSelect v-model:value="chartEditStore.getRequestGlobalConfig.requestIntervalUnit" class="select-time-options"
-              size="small" :default-value="RequestHttpIntervalEnum.SECOND" :options="selectTimeOptions as SelectOption[]"
-              :disabled="editDisabled" />
+            <NSelect
+              v-model:value="chartEditStore.getRequestGlobalConfig.requestIntervalUnit"
+              class="select-time-options"
+              size="small"
+              :default-value="RequestHttpIntervalEnum.SECOND"
+              :options="selectTimeOptions as SelectOption[]"
+              :disabled="editDisabled"
+            />
           </NInputGroup>
           </NInputGroup>
         </SettingItem>
         </SettingItem>
         <NButton v-show="editDisabled" type="primary" ghost @click="editDisabled = false">
         <NButton v-show="editDisabled" type="primary" ghost @click="editDisabled = false">
@@ -80,10 +222,68 @@ const themeColor = computed(() => {
         </NTooltip>
         </NTooltip>
       </section>
       </section>
     </NSpace>
     </NSpace>
+    <div v-else>
+      <NSelect
+        v-model:value="selectGlobalPondValue"
+        placeholder="请选择全局公共配置"
+        class="select-time-options"
+        size="small"
+        clearable
+        :options="selectGlobalPondOptions"
+        @update:value="handleSelectGlobalPond"
+        />
+        <NDivider />
+        <SettingItemBox name="配置信息" v-if="selectGlobalPondValue" :itemRightStyle="{
+           gridTemplateColumns: '5fr 2fr 1fr'
+        }">
+           <SettingItem name="源地址">
+              <NInput
+                v-model:value="cacheSelectOption.dataPondRequestConfig.pondRequestOriginUrl"
+                disabled
+            ></NInput>
+           </SettingItem>
+           <SettingItem name="url地址">
+              <NInput
+                v-model:value="cacheSelectOption.dataPondRequestConfig.pondRequestUrl"
+                disabled
+            ></NInput>
+           </SettingItem>
+           <SettingItem name="请求方式">
+              <NInput
+                v-model:value="cacheSelectOption.dataPondRequestConfig.pondRequestHttpType"
+                disabled
+            ></NInput>
+           </SettingItem>
+        </SettingItemBox>
+        <NDivider />
+        <div style="margin:0 70px" v-if="selectGlobalPondValue && selectGlobalPondIsToken">
+          <n-space vertical>
+            <n-button type="primary" @click="handleExecuteRequest">执行请求</n-button>
+            <NCascader
+              v-model:value="resValue"
+              @update:value="handleResCascader"
+              :expand-trigger="cascaderConfig.hoverTrigger ? 'hover' : 'click'"
+              :check-strategy="cascaderConfig.checkStrategyIsChild ? 'child' : 'all'"
+              :show-path="cascaderConfig.showPath"
+              :filterable="cascaderConfig.filterable"
+              placeholder="请选择"
+              :options="resOptions"
+            />
+            <n-input
+              :autosize="{
+                minRows: 3,
+                maxRows: 9
+              }"
+              v-model:value="getTokenString"
+              type="textarea"
+              placeholder="Token："
+            />
+          </n-space>
+        </div>
+    </div>
   </NCard>
   </NCard>
 </template>
 </template>
 
 
-
 <style lang="scss" scoped>
 <style lang="scss" scoped>
 .arrow {
 .arrow {
   display: flex;
   display: flex;
@@ -93,7 +293,6 @@ const themeColor = computed(() => {
 
 
   &:hover {
   &:hover {
     color: v-bind('themeColor');
     color: v-bind('themeColor');
-
   }
   }
 }
 }
 </style>
 </style>

-<script setup lang="ts" >
-import { getUUID } from '@/utils';
-import { ButtonProps, DataTableColumns, InputProps, NButton, NDataTable, NIcon, NInput, NSpace, NTag, NTooltip, TagProps } from 'naive-ui';
-import { computed, h, ref, unref, watch } from 'vue';
+<script setup lang="ts">
+import { getUUID } from '@/utils'
+import {
+  ButtonProps,
+  DataTableColumns,
+  InputProps,
+  NButton,
+  NDataTable,
+  NIcon,
+  NInput,
+  NSpace,
+  NTooltip,
+  NSelect,
+  SelectProps,
+  NDatePicker,
+  DatePickerProps
+} from 'naive-ui'
+import { computed, h, ref, unref, watch } from 'vue'
 import { Subtract, Add } from '@vicons/carbon'
 import { Subtract, Add } from '@vicons/carbon'
-import { isObject } from '@/utils/external/is';
+import { isArray, isObject } from '@/utils/external/is'
+import { DataTypeEnum, DataTypeNameEnum } from '@/enums/external/dataTypeEnum'
+import { Recordable } from 'vite-plugin-mock'
 
 
 interface DataSource {
 interface DataSource {
   id: string
   id: string
   value?: string
   value?: string
   keyName?: string
   keyName?: string
+  indexName?: number
+  typeName?: string
+  dateRange?: number[] | null
   result?: boolean
   result?: boolean
 }
 }
 
 
@@ -17,99 +36,126 @@ const columns: DataTableColumns<DataSource> = [
     title: '序号',
     title: '序号',
     key: 'index',
     key: 'index',
     render: (_, index) => index + 1,
     render: (_, index) => index + 1,
-    width: 50,
+    width: 50
+  },
+  {
+    title: 'Type',
+    key: 'typeName',
+    render: (row, index) => {
+      return h(NSelect, {
+        value: row.typeName,
+        options: [
+          {
+            label: DataTypeNameEnum.DATA_RANGE,
+            value: DataTypeEnum.DATA_RANGE
+          },
+          {
+            label: DataTypeNameEnum.DATA_INPUT,
+            value: DataTypeEnum.DATA_INPUT
+          }
+        ],
+        onUpdateValue: (value: string) => {
+          unref(dataSource)[index].typeName = value
+          unref(dataSource)[index].indexName = index
+        },
+        size: 'small',
+        disabled: props.disabled
+      } as SelectProps)
+    },
+    width: 120
   },
   },
   {
   {
     title: 'Key',
     title: 'Key',
     key: 'keyName',
     key: 'keyName',
     render: (row, index) => {
     render: (row, index) => {
-      return h(
-        NInput,
-        {
-          value: row.keyName,
-          onBlur: () => handleInputBlur(row),
-          onUpdateValue: (value: string) => unref(dataSource)[index].keyName = value,
-          size: 'small',
-          disabled: props.disabled
-        } as InputProps
-      )
-    }
+      return h(NInput, {
+        value: row.keyName,
+        onBlur: () => handleInputBlur(),
+        onUpdateValue: (value: string) => (unref(dataSource)[index].keyName = value),
+        size: 'small',
+        disabled: props.disabled
+      } as InputProps)
+    },
+    width: 120
   },
   },
   {
   {
     title: 'Value',
     title: 'Value',
     key: 'value',
     key: 'value',
     render: (row, index) => {
     render: (row, index) => {
-      return h(
-        NInput,
-        {
-          value: row.value,
-          onBlur: () => handleInputBlur(row),
-          onUpdateValue: (value: string) => unref(dataSource)[index].value = value,
-          size: 'small',
-          disabled: props.disabled
-        } as InputProps
-      )
-    }
+      const findIndexName = unref(dataSource).find(item => item.indexName === index)
+      return findIndexName?.indexName === index && findIndexName.typeName === DataTypeEnum.DATA_INPUT
+        ? h(NInput, {
+            value: row.value,
+            onBlur: () => handleInputBlur(),
+            onUpdateValue: (value: string) => (unref(dataSource)[index].value = value),
+            size: 'small',
+            disabled: props.disabled
+          } as InputProps)
+        : ''
+    },
+    width: 120
   },
   },
   {
   {
-    title: '操作',
-    key: 'actions',
-    render: (row) => {
-      return h(
-        NSpace,
-        () => [
-          h(
-            NTooltip,
-            null,
-            {
-              trigger: () => h(
-                NButton,
-                {
-                  type: 'success',
-                  size: 'small',
-                  ghost: true,
-                  onClick: () => handleAddRow(row),
-                  disabled: props.disabled || !unref(canAddRow)
-                } as ButtonProps,
-                {
-                  default: () => h(NIcon, () => h(Add))
-                }
-              ),
-              default: () => '插入行'
-            }
-          ),
-          h(
-            NTooltip,
-            null,
-            {
-              trigger: () => h(
-                NButton,
-                {
-                  type: 'warning',
-                  size: 'small',
-                  ghost: true,
-                  onClick: () => handleSubtractRow(row),
-                  // disabled: props.disabled || !unref(canDeleteRow)
-                } as ButtonProps,
-                {
-                  default: () => h(NIcon, () => h(Subtract))
-                }
-              ),
-              default: () => '删除行'
-            }
-          )
-        ]
-      )
+    title: 'Date',
+    key: 'dateRange',
+    render: (row, index) => {
+      const findIndexName = unref(dataSource).find(item => item.indexName === index)
+      return findIndexName?.indexName === index && findIndexName.typeName === DataTypeEnum.DATA_RANGE
+        ? h(NDatePicker, {
+            value: row.value,
+            size: 'small',
+            type: 'datetimerange',
+            onBlur: () => handleInputBlur(),
+            onUpdateValue: (value: number[]) => {
+              unref(dataSource)[index].dateRange = value
+            },
+            disabled: props.disabled
+          } as DatePickerProps)
+        : ''
     },
     },
-    width: 100,
+    width: 200
   },
   },
   {
   {
-    title: '结果',
-    key: 'result',
-    render: (row) => {
-      return h(NTag, { type: row.result ? 'success' : 'error' } as TagProps, () => `${row.result ? '' : '未'}通过`)
+    title: '操作',
+    key: 'actions',
+    render: row => {
+      return h(NSpace, () => [
+        h(NTooltip, null, {
+          trigger: () =>
+            h(
+              NButton,
+              {
+                type: 'success',
+                size: 'small',
+                ghost: true,
+                onClick: () => handleAddRow(row),
+                disabled: props.disabled || !unref(canAddRow)
+              } as ButtonProps,
+              {
+                default: () => h(NIcon, () => h(Add))
+              }
+            ),
+          default: () => '插入行'
+        }),
+        h(NTooltip, null, {
+          trigger: () =>
+            h(
+              NButton,
+              {
+                type: 'warning',
+                size: 'small',
+                ghost: true,
+                onClick: () => handleSubtractRow(row)
+              } as ButtonProps,
+              {
+                default: () => h(NIcon, () => h(Subtract))
+              }
+            ),
+          default: () => '删除行'
+        })
+      ])
     },
     },
-    width: 80
+    width: 120
   }
   }
 ]
 ]
 
 
@@ -121,29 +167,33 @@ const props = withDefaults(
   }>(),
   }>(),
   {
   {
     disabled: false,
     disabled: false,
-    maxRow: 50,
+    maxRow: 50
   }
   }
 )
 )
 
 
-
 const emit = defineEmits(['update:value'])
 const emit = defineEmits(['update:value'])
 
 
-const createNewRow = () => {
-  return { id: getUUID(), result: true } as DataSource
+const createNewRow = (index?: number) => {
+  return { id: getUUID(), result: true, indexName: index, typeName: DataTypeEnum.DATA_INPUT } as DataSource
 }
 }
 
 
-const dataSource = ref<DataSource[]>([
-  createNewRow()
-])
+const dataSource = ref<DataSource[]>([createNewRow(0)])
+
+const blurFlag = ref(false)
 
 
 watch(
 watch(
   () => props.value,
   () => props.value,
-  (target) => {
+  (target: Recordable) => {
     if (target && isObject(target) && Object.keys(target).length) {
     if (target && isObject(target) && Object.keys(target).length) {
-      dataSource.value = Object.keys(props.value || {}).map(keyName => ({ ...createNewRow(), keyName, value: Reflect.get(props.value || {}, keyName) }))
-    } else {
-      dataSource.value = [createNewRow()]
-    } 
+      if (blurFlag.value) return
+      dataSource.value = Object.keys(props.value || {}).map((keyName, keyIndex) => ({
+        ...createNewRow(keyIndex),
+        keyName,
+        indexName: keyIndex,
+        typeName: isArray(props.value![keyName]) ? DataTypeEnum.DATA_RANGE : DataTypeEnum.DATA_INPUT,
+        value: Reflect.get(props.value || {}, keyName)
+      }))
+    }
   },
   },
   {
   {
     immediate: true,
     immediate: true,
@@ -151,22 +201,21 @@ watch(
   }
   }
 )
 )
 
 
-const canDeleteRow = computed(() => {
-  return unref(dataSource).length >= 2
-})
-
 const canAddRow = computed(() => {
 const canAddRow = computed(() => {
   return unref(dataSource).length < props.maxRow
   return unref(dataSource).length < props.maxRow
 })
 })
 
 
 const handleAddRow = (record: DataSource) => {
 const handleAddRow = (record: DataSource) => {
   const index = unref(dataSource).findIndex(item => item.id === record.id)
   const index = unref(dataSource).findIndex(item => item.id === record.id)
-  unref(dataSource).splice(index + 1, 0, createNewRow())
+  unref(dataSource).splice(index + 1, 0, createNewRow(index + 1))
 }
 }
 
 
 const handleSubtractRow = (record: DataSource) => {
 const handleSubtractRow = (record: DataSource) => {
   const index = unref(dataSource).findIndex(item => item.id === record.id)
   const index = unref(dataSource).findIndex(item => item.id === record.id)
   if (unref(dataSource).length === 1) {
   if (unref(dataSource).length === 1) {
+    unref(dataSource)[0].keyName = ''
+    unref(dataSource)[0].value = ''
+    unref(dataSource)[0].dateRange = []
     emit('update:value', {})
     emit('update:value', {})
   } else {
   } else {
     unref(dataSource).splice(index, 1)
     unref(dataSource).splice(index, 1)
@@ -174,23 +223,19 @@ const handleSubtractRow = (record: DataSource) => {
   }
   }
 }
 }
 
 
-
-const handleInputBlur = (record: DataSource) => {
-  const { keyName, value } = record
-  record.result = !!(keyName && value)
-  if (unref(dataSource).every(item => item.result)) {
-    emit('update:value', getHeaderConfiguration())
-  }
+const handleInputBlur = () => {
+  blurFlag.value = true
+  emit('update:value', getHeaderConfiguration())
 }
 }
 
 
 const getHeaderConfiguration = () => {
 const getHeaderConfiguration = () => {
   return unref(dataSource).reduce((prev, next) => {
   return unref(dataSource).reduce((prev, next) => {
-    const { result, value, keyName } = next
-    const header = result && value && keyName ? { [keyName]: value } : {}
+    const { value, keyName, dateRange } = next
+    const header = keyName ? { [keyName as unknown as string]: dateRange && isArray(dateRange) ? dateRange: value } : {}
+    for (let item in header) if (!Reflect.get(header, item)) Reflect.deleteProperty(header, item)
     return { ...prev, ...header }
     return { ...prev, ...header }
   }, {} as Recordable)
   }, {} as Recordable)
 }
 }
-
 </script>
 </script>
 
 
 <template>
 <template>

+<template>
+  <n-modal
+    class="go-chart-data-request"
+    v-model:show="modelShowRef"
+    :mask-closable="false"
+    :closeOnEsc="true"
+    :onEsc="onEsc"
+  >
+    <n-card :bordered="false" role="dialog" size="small" aria-modal="true" style="width: 1000px; height: 800px">
+      <template #header></template>
+      <template #header-extra> </template>
+      <n-scrollbar style="max-height: 718px">
+        <div class="go-pr-3">
+          <n-space vertical>
+             <PondPublicConfiguration ref="pondPublicConfigurationRef" />
+             <PondRequestConfiguration ref="pondRequestConfigurationRef" />
+          </n-space>
+        </div>
+      </n-scrollbar>
+      <!-- 底部 -->
+      <template #action>
+        <n-space justify="space-between">
+          <n-space v-if="targetDataRequest">
+            <n-tag :bordered="false" type="primary">名称：</n-tag>
+            <n-input
+              v-model:value="targetDataRequest.dataPondName"
+              ref="inputInstRef"
+              type="text"
+              size="small"
+              :autofocus="true"
+              :clearable="true"
+              :minlength="1"
+              :maxlength="16"
+              placeholder="请输入名称"
+            ></n-input>
+          </n-space>
+          <span v-else></span>
+          <n-space>
+            <n-button @click="closeHandle">取消</n-button>
+            <n-button type="primary" @click="closeAndSendHandle">保存</n-button>
+          </n-space>
+        </n-space>
+      </template>
+    </n-card>
+  </n-modal>
+</template>
+
+<script script lang="ts" setup>
+import { PropType, ref, watch, onMounted, nextTick } from 'vue'
+import { RequestConfigType, RequestDataPondItemType } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { goDialog } from '@/utils'
+import PondPublicConfiguration from './PondPublicConfiguration.vue'
+import PondRequestConfiguration from './PondRequestConfiguration.vue'
+import { useTargetData } from '../../../../hooks/useTargetData.hook'
+
+const props = defineProps({
+  modelShow: Boolean,
+  targetDataRequest: Object as PropType<RequestDataPondItemType>,
+})
+
+const { targetData } = useTargetData()
+
+const pondPublicConfigurationRef = ref<InstanceType<typeof PondPublicConfiguration>>()
+
+const pondRequestConfigurationRef = ref<InstanceType<typeof PondRequestConfiguration>>()
+
+const emit = defineEmits(['update:modelShow', 'editSaveHandle'])
+
+const inputInstRef = ref()
+
+const modelShowRef = ref(false)
+
+watch(
+  () => props.modelShow,
+  newValue => {
+    modelShowRef.value = newValue
+    if(newValue) {
+      nextTick(() => {
+        pondPublicConfigurationRef?.value?.setConfigurationData(props.targetDataRequest?.dataPondRequestConfig as unknown as RequestConfigType)
+        pondRequestConfigurationRef?.value?.setConfigurationData(props.targetDataRequest?.dataPondRequestConfig as unknown as RequestDataPondItemType)
+      })
+    }
+  }
+)
+
+const closeHandle = () => {
+  emit('update:modelShow', false)
+}
+
+const closeAndSendHandle = () => {
+  if (!props.targetDataRequest?.dataPondName) {
+    window.$message.warning('请在左下角输入名称！')
+    inputInstRef.value?.focus()
+    return
+  }
+  const pondPublicData = pondPublicConfigurationRef?.value?.getConfigurationData()
+  const pondRequestData = pondRequestConfigurationRef?.value?.getConfigurationData()
+  const mergeTargetDataRequestData = Object.assign(props.targetDataRequest.dataPondRequestConfig, pondPublicData, pondRequestData)
+  props.targetDataRequest.dataPondRequestConfig = mergeTargetDataRequestData
+  goDialog({
+    message: '保存内容将同步修改所有使用此接口的组件, 是否继续?',
+    isMaskClosable: true,
+    transformOrigin: 'center',
+    onPositiveCallback: () => {
+      emit('update:modelShow', false)
+      emit('editSaveHandle',  props.targetDataRequest)
+    }
+  })
+}
+
+const onEsc = () => {
+  closeHandle()
+}
+
+onMounted(()=>{
+  pondPublicConfigurationRef?.value?.setConfigurationData(targetData.value.request)
+  pondRequestConfigurationRef?.value?.setConfigurationData(targetData.value.request)
+})
+</script>
+
+<style lang="scss" scoped>
+@include go('chart-data-request') {
+  &.n-card.n-modal,
+  .n-card {
+    @extend .go-background-filter;
+  }
+  .n-card-shallow {
+    background-color: rgba(0, 0, 0, 0) !important;
+  }
+  @include deep() {
+    & > .n-card__content {
+      padding-right: 0;
+    }
+    .n-card__content {
+      padding-bottom: 5px;
+    }
+  }
+}
+</style>

+<script lang="ts" setup name="PondPublicConfiguration">
+import { SettingItem, SettingItemBox } from '@/components/Pages/ChartItemSetting'
+import { icon } from '@/plugins'
+import {
+  NButton,
+  NCard,
+  NCollapseTransition,
+  NIcon,
+  NInput,
+  NInputGroup,
+  NInputNumber,
+  NSelect,
+  NSpace,
+  NTag,
+  NTooltip,
+  SelectOption,
+} from 'naive-ui'
+import { computed, ref, unref } from 'vue'
+import GlobalParamsConfiguration from './GlobalParamsConfiguration.vue'
+import { ChevronDown, ChevronUp } from '@vicons/carbon'
+import { useDesignStore } from '@/store/modules/designStore/designStore'
+import { selectTimeOptions } from '../../../index.d'
+import { RequestHttpIntervalEnum } from '@/enums/httpEnum'
+import { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { useTargetData } from '../../../../hooks/useTargetData.hook'
+
+const { PencilIcon } = icon.ionicons5
+
+const designStore = useDesignStore()
+
+const { targetData } = useTargetData()
+
+const editDisabled = ref(false)
+
+const collapseHeaderTable = ref(false)
+
+const pondRequestOriginUrlRef= ref('')
+
+const pondRequestIntervalRef = ref()
+
+const pondRequestIntervalUnitRef = ref(RequestHttpIntervalEnum.SECOND)
+
+const pondRequestGlobalTokenSuffixRef = ref('')
+
+const pondRequestGlobalTokenKeyRef = ref('')
+
+const pondRequestGlobalIsTokenRef = ref(true)
+
+const handleCollapse = () => {
+  collapseHeaderTable.value = !unref(collapseHeaderTable)
+}
+
+// 颜色
+const themeColor = computed(() => {
+  return designStore.getAppTheme
+})
+
+const handleIsTokenSwitch = (value: boolean) => {
+  targetData.value.request.pondRequestGlobalIsToken = value
+}
+
+const getConfigurationData = (): Partial<RequestConfigType> => {
+  return {
+    pondRequestOriginUrl: unref(pondRequestOriginUrlRef),
+    pondRequestGlobalInterval: unref(pondRequestIntervalRef),
+    pondRequestGlobalIntervalUnit: unref(pondRequestIntervalUnitRef),
+    pondRequestGlobalTokenSuffix: unref(pondRequestGlobalTokenSuffixRef),
+    pondRequestGlobalTokenKey: unref(pondRequestGlobalTokenKeyRef),
+    pondRequestGlobalIsToken: unref(pondRequestGlobalIsTokenRef),
+  }
+}
+
+const setConfigurationData = (request: Partial<RequestConfigType>) => {
+  const { pondRequestOriginUrl, pondRequestGlobalInterval, pondRequestGlobalIntervalUnit, pondRequestGlobalTokenSuffix, pondRequestGlobalTokenKey, pondRequestGlobalIsToken } = request
+  pondRequestOriginUrlRef.value = pondRequestOriginUrl!
+  pondRequestIntervalRef.value = pondRequestGlobalInterval
+  pondRequestIntervalUnitRef.value = pondRequestGlobalIntervalUnit! as RequestHttpIntervalEnum
+  pondRequestGlobalTokenSuffixRef.value = pondRequestGlobalTokenSuffix!
+  pondRequestGlobalTokenKeyRef.value = pondRequestGlobalTokenKey!
+  pondRequestGlobalIsTokenRef.value = pondRequestGlobalIsToken!
+}
+
+defineExpose({
+  getConfigurationData,
+  setConfigurationData
+})
+</script>
+
+<template>
+  <NCard>
+    <template #header>
+      <NTag type="info">全局公共配置</NTag>
+    </template>
+    <NSpace vertical>
+      <SettingItemBox
+        name="服务"
+        :itemRightStyle="{
+          gridTemplateColumns: '5fr 2fr 1fr'
+        }"
+      >
+        <!-- 源地址 -->
+        <SettingItem name="前置 URL">
+          <NInput
+            v-model:value="pondRequestOriginUrlRef"
+            default-value="http://127.0.0.1"
+            :disabled="editDisabled"
+            size="small"
+            placeholder="例:http://127.0.0.1" 
+          ></NInput>
+        </SettingItem>
+        <SettingItem name="更新间隔，为 0 只会初始化">
+          <NInputGroup>
+            <NInputNumber
+              v-model:value="pondRequestIntervalRef"
+              class="select-time-number"
+              size="small"
+              min="0"
+              :show-button="false"
+              :disabled="editDisabled"
+              placeholder="请输入数字"
+            >
+            </NInputNumber>
+            <!-- 单位 -->
+            <NSelect
+              v-model:value="pondRequestIntervalUnitRef"
+              class="select-time-options"
+              size="small"
+              :default-value="RequestHttpIntervalEnum.SECOND"
+              :options="selectTimeOptions as SelectOption[]"
+              :disabled="editDisabled"
+            />
+          </NInputGroup>
+        </SettingItem>
+        <NButton v-show="editDisabled" type="primary" ghost @click="editDisabled = false">
+          <template #icon>
+            <NIcon>
+              <PencilIcon />
+            </NIcon>
+          </template>
+          编辑配置
+        </NButton>
+      </SettingItemBox>
+      <!-- 针对第三方接口 -->
+      <SettingItemBox name="Token配置">
+        <SettingItem>
+          <n-switch @update:value="handleIsTokenSwitch" v-model:value="pondRequestGlobalIsTokenRef"/>
+        </SettingItem>
+      </SettingItemBox>
+      <SettingItemBox v-if="pondRequestGlobalIsTokenRef" name="配置">
+        <SettingItem name="请求标头">
+          <n-input v-model:value.trim="pondRequestGlobalTokenKeyRef" type="text" placeholder="默认值: X-Authorization " />
+        </SettingItem>
+        <SettingItem name="Token值前缀">
+          <n-input clearable v-model:value.trim="pondRequestGlobalTokenSuffixRef" type="text" placeholder="默认值：Bearer" />
+        </SettingItem>
+      </SettingItemBox>
+      <NCollapseTransition :show="collapseHeaderTable">
+        <GlobalParamsConfiguration />
+        <!-- 针对第三方接口 -->
+      </NCollapseTransition>
+      <section class="arrow">
+        <NTooltip>
+          <template #trigger>
+            <NIcon @click="handleCollapse" size="30">
+              <ChevronDown v-show="!collapseHeaderTable" />
+              <ChevronUp v-show="collapseHeaderTable" />
+            </NIcon>
+          </template>
+          <span>{{ collapseHeaderTable ? '收起' : '展开' }}</span>
+        </NTooltip>
+      </section>
+    </NSpace>
+  </NCard>
+</template>
+
+<style lang="scss" scoped>
+.arrow {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+
+  &:hover {
+    color: v-bind('themeColor');
+  }
+}
+</style>

+<script setup lang="ts">
+import { NInput, NInputNumber, NInputGroup, NSelect, SelectOption, NTabs, NTabPane } from 'naive-ui'
+import { SettingItem, SettingItemBox } from '@/components/Pages/ChartItemSetting'
+import { selectTimeOptions, selectTypeOptions } from '../../../index.d'
+import {
+  RequestBodyEnum,
+  RequestContentTypeEnum,
+  RequestHttpEnum,
+  RequestHttpIntervalEnum,
+  RequestParams
+} from '@/enums/httpEnum'
+import { ref, unref } from 'vue'
+import DefaultRequestContent from './DefaultRequestContent.vue'
+import SqlConfiguration from './SqlConfiguration.vue'
+import { useTargetData } from '../../../../hooks/useTargetData.hook'
+
+const { targetData } = useTargetData()
+
+const pondRequestContentTypeRef = ref(RequestContentTypeEnum.DEFAULT)
+
+const pondRequestHttpTypeRef = ref(RequestHttpEnum.GET)
+
+const pondRequestIntervalRef = ref<number | undefined>(20)
+
+const pondRequestIntervalUnitRef = ref(RequestHttpIntervalEnum.SECOND)
+
+const pondRequestSQLContentRef = ref('select * from where')
+
+const pondRequestParamsRef = ref({
+  Header: {},
+  Params: {},
+  Body: { 'form-data': {}, json: '', 'x-www-form-urlencoded': {}, xml: '' }
+} as RequestParams)
+
+const pondRequestParamsBodyTypeRef = ref(RequestBodyEnum.NONE)
+
+const pondRequestUrlRef = ref<string>()
+
+const getConfigurationData = (): Recordable => {
+  return {
+    pondRequestInterval: unref(pondRequestIntervalRef),
+    pondRequestIntervalUnit: unref(pondRequestIntervalUnitRef),
+    pondRequestHttpType: unref(pondRequestHttpTypeRef),
+    pondRequestUrl: unref(pondRequestUrlRef),
+    pondRequestContentType: unref(pondRequestContentTypeRef),
+    pondRequestSQLContent: unref(pondRequestSQLContentRef),
+    pondRequestParamsBodyType: unref(pondRequestParamsBodyTypeRef),
+    pondRequestParams: unref(pondRequestParamsRef)
+  }
+}
+
+const setConfigurationData = (request: Recordable) => {
+  const {
+    pondRequestInterval,
+    pondRequestIntervalUnit,
+    pondRequestHttpType,
+    pondRequestUrl,
+    pondRequestContentType,
+    pondRequestSQLContent,
+    pondRequestParamsBodyType,
+    pondRequestParams
+  } = request
+  pondRequestIntervalRef.value = pondRequestInterval
+  pondRequestIntervalUnitRef.value = pondRequestIntervalUnit
+  pondRequestHttpTypeRef.value = pondRequestHttpType
+  pondRequestUrlRef.value = pondRequestUrl
+  pondRequestContentTypeRef.value = pondRequestContentType
+  pondRequestSQLContentRef.value = pondRequestSQLContent
+  pondRequestParamsBodyTypeRef.value = pondRequestParamsBodyType
+  pondRequestParamsRef.value = pondRequestParams
+}
+
+defineExpose({
+  getConfigurationData,
+  setConfigurationData
+})
+</script>
+
+<template>
+  <div v-if="targetData.request.pondRequestGlobalIsToken">
+  <NDivider />
+  <SettingItemBox
+    name="地址"
+    :itemRightStyle="{
+      gridTemplateColumns: '5fr 2fr 1fr'
+    }"
+  >
+    <SettingItem name="请求方式 & URL地址">
+      <NInputGroup>
+        <NSelect
+          v-model:value="pondRequestHttpTypeRef"
+          style="width: 150px"
+          size="small"
+          :options="(selectTypeOptions as SelectOption[])"
+        />
+        <NInput
+          v-model:value="pondRequestUrlRef"
+          class="select-time-number"
+          size="small"
+          min="0"
+          :show-button="false"
+          placeholder="请输入URL地址"
+        />
+      </NInputGroup>
+    </SettingItem>
+    <SettingItem name="更新间隔，为 0 只会初始化">
+      <NInputGroup>
+        <NInputNumber
+          v-model:value="pondRequestIntervalRef"
+          class="select-time-number"
+          size="small"
+          min="0"
+          :show-button="false"
+          placeholder="请输入数字"
+        />
+        <!-- 单位 -->
+        <NSelect
+          v-model:value="pondRequestIntervalUnitRef"
+          class="select-time-options"
+          size="small"
+          :options="(selectTimeOptions as SelectOption[])"
+        />
+      </NInputGroup>
+    </SettingItem>
+  </SettingItemBox>
+  <SettingItemBox name="选择方式">
+    <NTabs v-model:value="pondRequestContentTypeRef" type="segment" size="small">
+      <NTabPane :name="RequestContentTypeEnum.DEFAULT" tab="普通请求" />
+      <NTabPane :name="RequestContentTypeEnum.SQL" tab="SQL请求" />
+    </NTabs>
+  </SettingItemBox>
+  <SettingItemBox>
+    <DefaultRequestContent
+      v-if="pondRequestContentTypeRef === RequestContentTypeEnum.DEFAULT"
+      v-model:value="pondRequestParamsRef"
+      v-model:request-params-body-type="pondRequestParamsBodyTypeRef"
+    />
+    <SqlConfiguration
+      v-model:value="pondRequestSQLContentRef"
+      v-if="pondRequestContentTypeRef === RequestContentTypeEnum.SQL"
+    />
+  </SettingItemBox>
+</div>
+</template>

@@ -41,7 +41,7 @@ const handleSyncRequestParamsBodyType = (value: RequestBodyEnum) => {
         v-model:value="value.Body[RequestBodyEnum.X_WWW_FORM_URLENCODED]" />
         v-model:value="value.Body[RequestBodyEnum.X_WWW_FORM_URLENCODED]" />
 
 
       <MonacoEditor v-if="requestParamsBodyType === RequestBodyEnum.JSON"
       <MonacoEditor v-if="requestParamsBodyType === RequestBodyEnum.JSON"
-        v-model:modelValue="value.Body[RequestBodyEnum.JSON]" width="600px" height="200px" language="json" />
+        v-model:modelValue="value.Body[RequestBodyEnum.JSON]" width="600px" height="200px" language="json" :config="true" />
 
 
       <MonacoEditor v-if="requestParamsBodyType === RequestBodyEnum.XML"
       <MonacoEditor v-if="requestParamsBodyType === RequestBodyEnum.XML"
         v-model:modelValue="value.Body[RequestBodyEnum.XML]" width="600px" height="200px" language="xml" />
         v-model:modelValue="value.Body[RequestBodyEnum.XML]" width="600px" height="200px" language="xml" />

 <script lang="ts" setup>
 <script lang="ts" setup>
-import { RequestDataTypeEnum, RequestDataTypeNameEnum } from '@/enums/external/httpEnum';
-import { useDesign } from '@/hooks/external/useDesign';
-import { CreateComponentType } from '@/packages/index.d';
-import { CreateComponentGroupType } from '@/packages/index.d';
-import { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d';
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
-import { NButton, NDivider, NModal, NSpace, NTag } from 'naive-ui';
-import { ref, unref, computed, nextTick } from 'vue';
-import { PublicInterfaceForm } from '../PublicInterfaceForm';
-import ComponentConfiguration from './ComponentConfiguration.vue';
-import GlobalPublicConfiguration from './GlobalPublicConfiguration.vue';
-import { createRequestModalContext } from './useRequestModalContext';
-import { useTargetData } from '../../../../hooks/useTargetData.hook';
-import { useFetchTargetData } from '@/hooks/external/useFetchTargetData';
-import { useFilterFn } from '@/hooks/external/useFilterFn';
-
+import { RequestDataTypeEnum, RequestDataTypeNameEnum } from '@/enums/external/httpEnum'
+import { useDesign } from '@/hooks/external/useDesign'
+import { CreateComponentType } from '@/packages/index.d'
+import { CreateComponentGroupType } from '@/packages/index.d'
+import { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { NButton, NDivider, NModal, NSpace, NTag } from 'naive-ui'
+import { ref, unref, computed, nextTick } from 'vue'
+import { PublicInterfaceForm } from '../PublicInterfaceForm'
+import ComponentConfiguration from './ComponentConfiguration.vue'
+import GlobalPublicConfiguration from './GlobalPublicConfiguration.vue'
+import { createRequestModalContext } from './useRequestModalContext'
+import { useTargetData } from '../../../../hooks/useTargetData.hook'
+import { useFetchTargetData } from '@/hooks/external/useFetchTargetData'
+import { useFilterFn } from '@/hooks/external/useFilterFn'
+import { JSONParse } from '@/utils/external/utils'
+import { isArray } from '@/utils/external/is'
 
 
 const requestDataType = ref<RequestDataTypeEnum>(RequestDataTypeEnum.AJAX)
 const requestDataType = ref<RequestDataTypeEnum>(RequestDataTypeEnum.AJAX)
 
 
@@ -36,7 +37,6 @@ const openModal = async (flag = true, type: RequestDataTypeEnum) => {
   requestDataType.value = type
   requestDataType.value = type
   showModal.value = flag
   showModal.value = flag
   await nextTick()
   await nextTick()
-
   unref(componentConfigurationEl as any)?.setConfigurationData(unref(selectTarget)!.request || {})
   unref(componentConfigurationEl as any)?.setConfigurationData(unref(selectTarget)!.request || {})
   unref(publicInterfaceFormEl as any)?.setConfigurationData(unref(selectTarget)!.request || {})
   unref(publicInterfaceFormEl as any)?.setConfigurationData(unref(selectTarget)!.request || {})
 }
 }
@@ -81,15 +81,40 @@ const sendHandle = async () => {
   const res = await fetchTargetData()
   const res = await fetchTargetData()
   if (res) {
   if (res) {
     const { value } = useFilterFn(targetData.value.filter, res)
     const { value } = useFilterFn(targetData.value.filter, res)
+     //分组更新下面子组件
+     if(targetData.value.isGroup) {
+          if (isArray(targetData.value.saveHistoryInput!)) {
+            const parseHistoryInput = JSONParse(targetData.value.saveHistoryInput!)
+            parseHistoryInput?.forEach((historyItem:Recordable) => {
+                const findCurrentItem =  targetData.value.groupList?.find((groupItem:CreateComponentType | CreateComponentGroupType) => groupItem.id === historyItem.id)
+                if(findCurrentItem) {
+                    findCurrentItem.option.dataset = value[historyItem.inputValue]
+                }
+            })
+         }
+      }
+      //
     targetData.value.option.dataset = value
     targetData.value.option.dataset = value
     return
     return
   }
   }
-
 }
 }
 
 
 const handleSaveAction = async () => {
 const handleSaveAction = async () => {
   if (!(await validate())) return
   if (!(await validate())) return
-  const value = getResult()
+  let value = getResult()
+  value.pondRequestGlobalTokenKey = targetData.value.request.pondRequestGlobalTokenKey
+  value.pondRequestGlobalTokenSuffix = targetData.value.request.pondRequestGlobalTokenSuffix
+  value.pondRequestInterval = targetData.value.request.pondRequestInterval
+  value.pondRequestIntervalUnit=  targetData.value.request.pondRequestIntervalUnit
+  value.pondRequestOriginUrl=  targetData.value.request.pondRequestOriginUrl
+  value.requestVerificationToken =  targetData.value.request.requestVerificationToken
+  value.requestDataPondId =  targetData.value.request.requestDataPondId
+  value.thirdSelectCascaderLabel =  targetData.value.request.thirdSelectCascaderLabel
+  value.requestDataType = targetData.value.request.requestDataType
+  value.publicInterfaceSelectId = targetData.value.request.publicInterfaceSelectId
+  value.pondRequestGlobalIsToken = targetData.value.request.pondRequestGlobalIsToken
+  value.pondRequestGlobalIntervalUnit = targetData.value.request.pondRequestGlobalIntervalUnit
+  value.pondRequestGlobalInterval = targetData.value.request.pondRequestGlobalInterval
   if (unref(selectTarget)) {
   if (unref(selectTarget)) {
     chartEditStore.updateComponentList(chartEditStore.fetchTargetIndex(), {
     chartEditStore.updateComponentList(chartEditStore.fetchTargetIndex(), {
       ...unref(selectTarget)!,
       ...unref(selectTarget)!,
@@ -105,26 +130,29 @@ createRequestModalContext({
 })
 })
 
 
 defineExpose({
 defineExpose({
-  openModal,
+  openModal
 })
 })
-
 </script>
 </script>
 
 
 <template>
 <template>
-  <NModal :class="prefixCls" v-model:show="showModal" preset="card" style="width: 1000px;" title="请求配置">
+  <NModal :class="prefixCls" v-model:show="showModal" preset="card" style="width: 1000px" title="请求配置">
     <GlobalPublicConfiguration v-if="requestDataType === RequestDataTypeEnum.AJAX" />
     <GlobalPublicConfiguration v-if="requestDataType === RequestDataTypeEnum.AJAX" />
     <NDivider v-if="requestDataType === RequestDataTypeEnum.AJAX" />
     <NDivider v-if="requestDataType === RequestDataTypeEnum.AJAX" />
     <ComponentConfiguration v-if="requestDataType === RequestDataTypeEnum.AJAX" ref="componentConfigurationEl" />
     <ComponentConfiguration v-if="requestDataType === RequestDataTypeEnum.AJAX" ref="componentConfigurationEl" />
     <PublicInterfaceForm v-if="requestDataType === RequestDataTypeEnum.Pond" ref="publicInterfaceFormEl" />
     <PublicInterfaceForm v-if="requestDataType === RequestDataTypeEnum.Pond" ref="publicInterfaceFormEl" />
     <template #action>
     <template #action>
-      <NSpace  justify="space-between">
-        <div style="display: flex;flex-direction: column;">
-          <NTag type="info">当公共接口选择“实时轨迹或者获取设备经纬度历史数据”时，属性选择则选择经纬度即可（longitude，latitude）</NTag>
-          <div style="height:5px"></div>
-          <NTag type="info">如果是结构体属性的话，选择对应结构体属性即可，里面的经纬度，平台已经通过接口里面的过滤函数进行处理</NTag>
-          <div style="display: flex; align-items: center; margin-top:10px">
+      <NSpace justify="space-between">
+        <div style="display: flex; flex-direction: column">
+          <NTag type="info"
+            >当公共接口选择“实时轨迹或者获取设备经纬度历史数据”时，属性选择则选择经纬度即可（longitude，latitude）</NTag
+          >
+          <div style="height: 5px"></div>
+          <NTag type="info"
+            >如果是结构体属性的话，选择对应结构体属性即可，里面的经纬度，平台已经通过接口里面的过滤函数进行处理</NTag
+          >
+          <div style="display: flex; align-items: center; margin-top: 10px">
             <span>「 更多 」</span>
             <span>「 更多 」</span>
-            <span style="margin-right: 5px;">——</span>
+            <span style="margin-right: 5px">——</span>
             <NTag type="info">{{ getRequestTypeName }}</NTag>
             <NTag type="info">{{ getRequestTypeName }}</NTag>
           </div>
           </div>
         </div>
         </div>
@@ -134,10 +162,8 @@ defineExpose({
   </NModal>
   </NModal>
 </template>
 </template>
 
 
-
-<style lang="scss" >
+<style lang="scss">
 @include thingsKit('chart-data-request') {
 @include thingsKit('chart-data-request') {
-
   &.n-card.n-modal,
   &.n-card.n-modal,
   .n-card {
   .n-card {
     @extend .go-background-filter;
     @extend .go-background-filter;
@@ -148,7 +174,7 @@ defineExpose({
   }
   }
 
 
   @include deep() {
   @include deep() {
-    &>.n-card__content {
+    & > .n-card__content {
       padding-right: 0;
       padding-right: 0;
     }
     }
 
 

@@ -91,7 +91,7 @@
       </setting-item-box>
       </setting-item-box>
       <!-- THINGS_KIT 修改多画布切换相关代码 用于切换画布 -->
       <!-- THINGS_KIT 修改多画布切换相关代码 用于切换画布 -->
 
 
-      <setting-item-box  v-if="!interactActionsIsPageChange&&fnDimensionsAndSource(item.interactOn).length" name="查询结果" :alone="true">
+      <setting-item-box  v-if="!interactActionsIsPageChange && fnDimensionsAndSource(item.interactOn, null, null)!.length" name="查询结果" :alone="true">
         <n-table size="small" striped>
         <n-table size="small" striped>
           <thead>
           <thead>
             <tr>
             <tr>
@@ -99,9 +99,9 @@
             </tr>
             </tr>
           </thead>
           </thead>
           <tbody>
           <tbody>
-            <tr v-for="(cItem, index) in fnDimensionsAndSource(item.interactOn)" :key="index">
-              <td>{{ cItem.value }}</td>
-              <td>{{ cItem.label }}</td>
+            <tr v-for="(cItem, index) in fnDimensionsAndSource(item.interactOn, null, null)" :key="index">
+              <td>{{ cItem?.value }}</td>
+              <td>{{ cItem?.label }}</td>
             </tr>
             </tr>
           </tbody>
           </tbody>
         </n-table>
         </n-table>
@@ -123,8 +123,10 @@
           <n-select
           <n-select
             size="tiny"
             size="tiny"
             v-model:value="item.interactFn[ovlKey]"
             v-model:value="item.interactFn[ovlKey]"
-            :options="fnDimensionsAndSource(item.interactOn)"
+            :options="fnDimensionsAndSource(item.interactOn, item.interactComponentId!, requestParamsItem)"
             clearable
             clearable
+            multiple 
+            @update:value="(value: string, options: Recordable[])=>handleSelectInteract(value,options,item.interactOn,requestParamsItem)"
           ></n-select>
           ></n-select>
         </setting-item>
         </setting-item>
         <n-text
         <n-text
@@ -149,13 +151,13 @@ import { RequestParamsTypeEnum, RequestDataTypeEnum } from '@/enums/httpEnum'
 import { InteractEventOn, COMPONENT_INTERACT_EVENT_KET } from '@/enums/eventEnum'
 import { InteractEventOn, COMPONENT_INTERACT_EVENT_KET } from '@/enums/eventEnum'
 import { icon } from '@/plugins'
 import { icon } from '@/plugins'
 import noData from '@/assets/images/canvas/noData.png'
 import noData from '@/assets/images/canvas/noData.png'
-import { goDialog } from '@/utils'
+import { JSONParse, goDialog } from '@/utils'
 import { useTargetData } from '../../../hooks/useTargetData.hook'
 import { useTargetData } from '../../../hooks/useTargetData.hook'
 import {PageChartEditStoreType} from '@/store/modules/chartEditStore/chartEditStore.d'
 import {PageChartEditStoreType} from '@/store/modules/chartEditStore/chartEditStore.d'
 
 
 const { CloseIcon, AddIcon, HelpOutlineIcon } = icon.ionicons5
 const { CloseIcon, AddIcon, HelpOutlineIcon } = icon.ionicons5
 const { targetData, chartEditStore } = useTargetData()
 const { targetData, chartEditStore } = useTargetData()
-const requestParamsTypeList = [RequestParamsTypeEnum.PARAMS, RequestParamsTypeEnum.HEADER]
+const requestParamsTypeList = [RequestParamsTypeEnum.PARAMS, RequestParamsTypeEnum.BODY, RequestParamsTypeEnum.HEADER]
 
 
 
 
 // THINGS_KIT 修改多画布切换相关代码 用于切换画布
 // THINGS_KIT 修改多画布切换相关代码 用于切换画布
@@ -186,19 +188,40 @@ const fnGetRequest = (id: string | undefined, key: RequestParamsTypeEnum) => {
   const globalConfigPindApr = chartEditStore.getRequestGlobalConfig.requestDataPond.find(item => {
   const globalConfigPindApr = chartEditStore.getRequestGlobalConfig.requestDataPond.find(item => {
     return item.dataPondId === id
     return item.dataPondId === id
   })?.dataPondRequestConfig.requestParams
   })?.dataPondRequestConfig.requestParams
-
   if (globalConfigPindApr) return globalConfigPindApr[key]
   if (globalConfigPindApr) return globalConfigPindApr[key]
   return chartEditStore.getComponentList[chartEditStore.fetchTargetIndex(id)]?.request.requestParams[key]
   return chartEditStore.getComponentList[chartEditStore.fetchTargetIndex(id)]?.request.requestParams[key]
 }
 }
 
 
+const handleSelectInteract = (value: string, options: SelectOption[], interactOn: InteractEventOn | undefined, requestParamsItem: RequestParamsTypeEnum | null) => {
+  console.log(value)
+  console.log(options)
+  console.log(interactOn)
+  console.log(requestParamsItem)
+  console.log(targetData.value)
+}
+
 // 查询结果
 // 查询结果
-const fnDimensionsAndSource = (interactOn: InteractEventOn | undefined) => {
+const fnDimensionsAndSource = (interactOn: InteractEventOn | undefined, id?: string | null,  key?: RequestParamsTypeEnum | null) => {
   if (!interactOn || !targetData.value.interactActions) return []
   if (!interactOn || !targetData.value.interactActions) return []
   const tableData = targetData.value.interactActions.find(item => {
   const tableData = targetData.value.interactActions.find(item => {
     return item.interactType === interactOn
     return item.interactType === interactOn
   })
   })
-
-  return tableData?.componentEmitEvents[option.value[COMPONENT_INTERACT_EVENT_KET]] || []
+  // 新增支持Body
+  let bodyJsonList: SelectOption[]= []
+  if (id) {
+    const { request } = chartEditStore.getComponentList[chartEditStore.fetchTargetIndex(id)]
+    const { requestParams } = request
+    const { Body } = requestParams
+    const { json } = Body
+    if (!json) return
+    const jsonDict = JSONParse(json)
+    if (key === RequestParamsTypeEnum.BODY) {
+      bodyJsonList = Object.keys(jsonDict)?.map(bodyItem=>({label: bodyItem, value: bodyItem}))
+    }
+  }
+  //
+  const paramsTableData: SelectOption[] = tableData?.componentEmitEvents[option.value[COMPONENT_INTERACT_EVENT_KET]] || []
+  return [...paramsTableData, ...bodyJsonList] as unknown as SelectOption[]
 }
 }
 
 
 // 绑定组件列表
 // 绑定组件列表
@@ -263,7 +286,6 @@ const fnEventsOptions = (): Array<SelectOption | SelectGroupOption> => {
       }
       }
     })
     })
   })
   })
-console.log(tarArr)
   return tarArr
   return tarArr
 }
 }
 
 

@@ -16,7 +16,32 @@
 <script setup lang="ts">
 <script setup lang="ts">
 import { NameSetting, PositionSetting, SizeSetting, StylesSetting } from '@/components/Pages/ChartItemSetting'
 import { NameSetting, PositionSetting, SizeSetting, StylesSetting } from '@/components/Pages/ChartItemSetting'
 import { useTargetData } from '../hooks/useTargetData.hook'
 import { useTargetData } from '../hooks/useTargetData.hook'
+import { watch } from 'vue'
+import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
+
 const { targetData, chartEditStore } = useTargetData()
 const { targetData, chartEditStore } = useTargetData()
+
+watch(
+  () => targetData.value,
+  (newValue: CreateComponentType | CreateComponentGroupType) => {
+    if (!newValue) return
+    if (!('yAxis' in newValue.option)) return
+    try {
+      if (!newValue?.option?.yAxis?.showRange) {
+        Reflect.deleteProperty((targetData.value as unknown as Recordable).option.yAxis, 'min')
+        Reflect.deleteProperty((targetData.value as unknown as Recordable).option.yAxis, 'max')
+      } else {
+        Reflect.set((targetData.value as unknown as Recordable).option.yAxis, 'min', newValue?.option?.yAxis.minData)
+        Reflect.set((targetData.value as unknown as Recordable).option.yAxis, 'max', newValue?.option?.yAxis.maxData)
+      }
+    } catch (e) {
+      console.log('🚀 ~ e:', e)
+    }
+  },
+  {
+    deep: true
+  }
+)
 </script>
 </script>
 
 
 <style lang="scss" scoped>
 <style lang="scss" scoped>

@@ -44,6 +44,7 @@ import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.
 import { datasetType, saveHistoryInputValueListType, historyInputValue } from './index.d'
 import { datasetType, saveHistoryInputValueListType, historyInputValue } from './index.d'
 import { uniqBy } from 'lodash'
 import { uniqBy } from 'lodash'
 import { SelectOption } from 'naive-ui'
 import { SelectOption } from 'naive-ui'
+import { isArray } from '@/utils/external/is'
 
 
 const { targetData } = useTargetData()
 const { targetData } = useTargetData()
 
 
@@ -107,8 +108,8 @@ watch(
   (newValue: CreateComponentType | CreateComponentGroupType) => {
   (newValue: CreateComponentType | CreateComponentGroupType) => {
     try {
     try {
       const uniqHistoryInputValueList = uniqBy(saveHistoryInputValueList.value, 'id')
       const uniqHistoryInputValueList = uniqBy(saveHistoryInputValueList.value, 'id')
-      if (uniqHistoryInputValueList) {
-        newValue.saveHistoryInput = JSON.stringify(uniqHistoryInputValueList)
+      if (isArray(uniqHistoryInputValueList)) {
+        targetData.value.saveHistoryInput = JSON.stringify(uniqHistoryInputValueList)
         window.localStorage.setItem('CACHE_HISTORY_INPUT_VALUE', JSON.stringify(uniqHistoryInputValueList))
         window.localStorage.setItem('CACHE_HISTORY_INPUT_VALUE', JSON.stringify(uniqHistoryInputValueList))
       }
       }
       newValue?.groupList?.forEach((item: CreateComponentType) => {
       newValue?.groupList?.forEach((item: CreateComponentType) => {

@@ -37,11 +37,12 @@
 </template>
 </template>
 
 
 <script setup lang="ts">
 <script setup lang="ts">
-import { PropType } from 'vue'
+import { PropType, onMounted } from 'vue'
 import { CreateComponentGroupType } from '@/packages/index.d'
 import { CreateComponentGroupType } from '@/packages/index.d'
 import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils'
 import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils'
 import { getSizeStyle, getComponentAttrStyle, getStatusStyle, getPreviewConfigStyle } from '../../utils'
 import { getSizeStyle, getComponentAttrStyle, getStatusStyle, getPreviewConfigStyle } from '../../utils'
-import { useLifeHandler } from '@/hooks'
+import { useChartDataFetch, useLifeHandler } from '@/hooks'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 
 
 const props = defineProps({
 const props = defineProps({
   groupData: {
   groupData: {
@@ -61,6 +62,10 @@ const props = defineProps({
     required: true
     required: true
   }
   }
 })
 })
+
+onMounted(()=>{
+  useChartDataFetch(props.groupData, useChartEditStore)
+})
 </script>
 </script>
 
 
 <style lang="scss" scoped>
 <style lang="scss" scoped>

@@ -23,6 +23,9 @@ export interface RequestOptions {
   withToken?: boolean;
   withToken?: boolean;
   // Carry and share token 携带分享的访问令牌
   // Carry and share token 携带分享的访问令牌
   withShareToken?: boolean
   withShareToken?: boolean
+  withThirdTokenString?: string;
+  withThirdTokenKey?: string;
+  withThirdTokenPrefix?: string;
 }
 }
 
 
 export interface Result<T = any> {
 export interface Result<T = any> {

@@ -11,6 +11,10 @@ interface ImportMetaEnv {
   VITE_GLOB_CONTENT_SECURITY_POLICY: boolean
   VITE_GLOB_CONTENT_SECURITY_POLICY: boolean
 
 
   VITE_GLOB_APP_SHORT_NAME: string
   VITE_GLOB_APP_SHORT_NAME: string
+
+  // 流媒体播放协议
+  VITE_GLOB_STREAM_MEDIA_CONTENT_SECURITY_PROTOCOL: boolean
+
 }
 }