Merge branch 'main_dev'

# Conflicts:
#	src/api/external/customRequest/index.ts
#	src/api/external/dynamicRequest/index.ts
#	src/api/external/dynamicRequest/model/index.ts
#	src/api/external/sys/share.ts
#	src/hooks/external/useChartDataSocket.ts
#	src/hooks/external/useFetchTargetData.ts
#	src/packages/components/external/Composes/HeadCombinations/LeftCenterRightHead/index.vue
#	src/packages/components/external/Composes/HeadCombinations/LeftCenterRightHeadAnimat/index.vue
#	src/packages/components/external/Composes/Mores/Camera/cameraItem.vue
#	src/packages/components/external/Composes/Mores/Camera/config.ts
#	src/packages/components/external/Composes/Mores/Camera/index.vue
#	src/packages/components/external/Composes/Mores/Title1/config.ts
#	src/packages/components/external/Composes/Mores/Title1/config.vue
#	src/packages/components/external/Composes/Mores/Title1/index.vue
#	src/packages/components/external/Composes/Mores/Title2/config.ts
#	src/packages/components/external/Composes/Mores/Title2/config.vue
#	src/packages/components/external/Composes/Mores/Title2/index.vue
#	src/packages/components/external/Composes/Mores/Title3/config.ts
#	src/packages/components/external/Composes/Mores/Title3/config.vue
#	src/packages/components/external/Composes/Mores/Title3/index.vue
#	src/store/external/modules/socketStore.ts
#	src/views/chart/ContentConfigurations/components/ChartData/external/components/ChartDynamicRequest/index.vue
#	src/views/chart/ContentConfigurations/components/ChartData/external/components/DynamicForm/index.vue
#	src/views/chart/ContentConfigurations/components/ChartData/external/components/DynamicForm/useDynamicPublicForm.ts
#	src/views/chart/ContentConfigurations/components/ChartData/external/components/PublicInterfaceForm/index.vue
#	src/views/chart/ContentConfigurations/components/ChartData/external/components/RequestModal/index.vue
#	src/views/chart/ContentHeader/headerLeftBtn/external/index.vue
#	src/views/chart/hooks/external/useRemote.hook.ts
#	src/views/share/index.vue

+import type { ErrorMessageMode } from '/#/external/axios'; 
+
+export function checkStatus(
+  status: number,
+  msg: string,
+  errorMessageMode: ErrorMessageMode = 'message'
+) {  
+  let errMessage = msg;
+  switch (status) {
+    case 400:
+      errMessage = `${msg}`;
+      break;
+    // 401: Not logged in
+    // Jump to the login page if not logged in, and carry the path of the current page
+    // Return to the current page after successful login. This step needs to be operated on the login page.
+    case 401:
+      errMessage = '没有权限'; 
+      break;
+    case 403:
+      errMessage = '未授权';
+      break;
+    // 404请求不存在
+    case 404:
+      errMessage = '未找到该资源!';
+      break;
+    case 405:
+      errMessage = '网络请求错误,请求方法未允许!';
+      break;
+    case 408:
+      errMessage = '网络请求超时!';
+      break;
+    case 500:
+      errMessage = '服务器错误,请联系管理员!';
+      break;
+    case 501:
+      errMessage = '网络未实现!';
+      break;
+    case 502:
+      errMessage = '网络错误!';
+      break;
+    case 503:
+      errMessage = '服务不可用,服务器暂时过载或维护!';
+      break;
+    case 504:
+      errMessage = '网络超时!';
+      break;
+    case 505:
+      errMessage = 'http版本不支持该请求!';
+      break;
+    default:
+  }
+  
+  if (errMessage) { 
+    if (errorMessageMode === 'message') {
+      const { error } = window['$message']
+      error(errMessage);
+    }
+  }
+  return !!errMessage
+}

+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;
+
+/**
+ * @description: 数据处理，方便区分多种处理方式
+ */
+const transform: AxiosTransform = {
+  /**
+   * @description: 处理请求数据。如果数据不是预期格式，可直接抛出错误
+   */
+  transformRequestHook: (res: AxiosResponse<Result>, options: RequestOptions) => {
+    const { isReturnNativeResponse } = options;
+    // 是否返回原生响应头 比如：需要获取响应头时使用该属性
+    if (isReturnNativeResponse) {
+      return res;
+    }
+    return res.data;
+  },
+
+  // 请求之前处理config
+  beforeRequestHook: (config, options) => {
+    const { apiUrl, joinPrefix, joinParamsToUrl, formatDate, joinTime = true } = options;
+
+    if (joinPrefix) {
+      config.url = `${urlPrefix}${config.url}`;
+    }
+
+    if (apiUrl && isString(apiUrl)) {
+      config.url = `${apiUrl}${config.url}`;
+    }
+
+    const params = config.params || {};
+    const data = config.data || false;
+    formatDate && data && !isString(data) && formatRequestDate(data);
+    if (config.method?.toUpperCase() === RequestEnum.GET) {
+      if (!isString(params)) {
+        // 给 get 请求加上时间戳参数，避免从缓存中拿数据。
+        config.params = Object.assign(params || {}, joinTimestamp(joinTime, false));
+      } else {
+        // 兼容restful风格
+        config.url = config.url + params + `${joinTimestamp(joinTime, true)}`;
+        config.params = undefined;
+      }
+    } else {
+      if (!isString(params)) {
+        formatDate && formatRequestDate(params);
+        if (Reflect.has(config, 'data') && config.data && Object.keys(config.data).length > 0) {
+          config.data = data;
+          config.params = params;
+        } else {
+          // 非GET请求如果没有提供data，则将params视为data
+          config.data = params;
+          config.params = undefined;
+        }
+        if (joinParamsToUrl) {
+          config.url = setObjToUrlParams(
+            config.url as string,
+            Object.assign({}, config.params, config.data)
+          );
+        }
+      } else {
+        // 兼容restful风格
+        config.url = config.url + params;
+        config.params = undefined;
+      }
+    }
+    return config;
+  },
+
+  /**
+   * @description: 请求拦截器处理
+   */
+  requestInterceptors: (config, options) => {
+    // 请求之前处理config
+    const { requestOptions } = config;
+    const { withShareToken } = requestOptions || {};
+    const { requestOptions: { withToken } = {} } = options;
+    if (withToken !== false) {
+      const shareToken = getShareJwtToken();
+      if (withShareToken && shareToken) {
+        config.headers!['X-Authorization'] = options.authenticationScheme
+          ? `${options.authenticationScheme} ${shareToken}`
+          : shareToken;
+      } else {
+        const token = getJwtToken();
+        if (token) {
+          config.headers!['X-Authorization'] = options.authenticationScheme
+            ? `${options.authenticationScheme} ${token}`
+            : token;
+        }
+      }
+    }
+    return config
+  },
+
+  /**
+   * @description: 响应拦截器处理
+   */
+  responseInterceptors: (res: AxiosResponse<any>) => {
+    return res;
+  },
+
+  /**
+   * @description: 响应错误处理
+   */
+  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 flag = checkStatus(error?.response?.status, msg, errorMessageMode);
+    return Promise.reject(response?.data);
+  },
+};
+
+function createAxios(opt?: Partial<CreateAxiosOptions>) {
+  return new VAxios(
+    deepMerge(
+      {
+        // See https://developer.mozilla.org/en-US/docs/Web/HTTP/Authentication#authentication_schemes
+        // authentication schemes，e.g: Bearer
+        // authenticationScheme: 'Bearer',
+        authenticationScheme: 'Bearer',
+        timeout: 10 * 1000,
+        // 基础接口地址
+        // baseURL: globSetting.apiUrl,
+        // 接口可能会有通用的地址部分，可以统一抽取出来
+        urlPrefix: urlPrefix,
+        headers: { 'Content-Type': ContentTypeEnum.JSON },
+        // 如果是form-data格式
+        // headers: { 'Content-Type': ContentTypeEnum.FORM_URLENCODED },
+        // 数据处理方式
+        transform,
+        // 配置项，下面的选项都可以在独立的接口请求中覆盖
+        requestOptions: {
+          // 默认将prefix 添加到url
+          joinPrefix: true,
+          // 是否返回原生响应头 比如：需要获取响应头时使用该属性
+          isReturnNativeResponse: false,
+          // 需要对返回数据进行处理
+          isTransformResponse: true,
+          // post请求的时候添加参数到url
+          joinParamsToUrl: false,
+          // 格式化提交参数时间
+          formatDate: true,
+          // 消息提示类型
+          errorMessageMode: 'message',
+          // 接口地址
+          apiUrl: globSetting.apiUrl,
+          //  是否加入时间戳
+          joinTime: true,
+          // 忽略重复请求
+          ignoreCancelToken: true,
+          // 是否携带token
+          withToken: true
+        },
+      },
+      opt || {}
+    )
+  );
+}
+export const customHttp = createAxios();
+

 import { RequestBodyEnum, RequestParams } from "@/enums/httpEnum"
 import { RequestBodyEnum, RequestParams } from "@/enums/httpEnum"
-import { ExternalRequestType, ExtraRequestConfigType } from "@/store/external/modules/extraComponentInfo.d"
-import { RequestConfigType, RequestGlobalConfigType } from "@/store/modules/chartEditStore/chartEditStore.d"
-import { defHttp } from "@/utils/external/http/axios"
+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"
 
 
 export enum ParamsType {
 export enum ParamsType {
   REQUIRED,
   REQUIRED,
@@ -86,10 +88,25 @@ const transformBodyValue = (body: RequestParams['Body'], requestParamsBodyType:
 
 
 const extraValue = (object: Recordable) => {
 const extraValue = (object: Recordable) => {
   return Object.keys(object).reduce((prev, next) => {
   return Object.keys(object).reduce((prev, next) => {
-    return {...prev, ...(object[next] ? {[next]: object[next]} : {} )}
+    return { ...prev, ...(object[next] ? { [next]: object[next] } : {}) }
   }, {})
   }, {})
 }
 }
 
 
+const handleParams = (Params: Recordable) => {
+  if (Params.keys && Params?.keys?.length) {
+    Params.keys = (Params.keys || [] as any).join(',')
+  }
+
+  const timePeriod = Params[SelectTimeAggregationFieldEnum.TIME_PERIOD]
+  if (timePeriod) {
+    Params.startTs = Date.now() - timePeriod
+    Params.endTs = Date.now()
+    Reflect.deleteProperty(Params, SelectTimeAggregationFieldEnum.TIME_PERIOD)
+  }
+
+  return Object.keys(Params).filter(Boolean).reduce((prev, next) => ({ ...prev, [next]: Params[next] }), {})
+}
+
 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 } = request as ExtraRequestConfigType
   let { requestUrl } = request as ExtraRequestConfigType
   let { requestUrl } = request as ExtraRequestConfigType
@@ -104,7 +121,8 @@ export const customRequest = async (request: RequestConfigType) => {
 
 
   const body = transformBodyValue(Body, requestParamsBodyType)
   const body = transformBodyValue(Body, requestParamsBodyType)
 
 
-  return defHttp.request<any>({
+  Params = handleParams(Params)
+  return customHttp.request<any>({
     url: requestUrl,
     url: requestUrl,
     baseURL: getOriginUrl(requestOriginUrl!),
     baseURL: getOriginUrl(requestOriginUrl!),
     method: requestHttpType,
     method: requestHttpType,
@@ -113,6 +131,7 @@ export const customRequest = async (request: RequestConfigType) => {
     headers: extraValue(Header)
     headers: extraValue(Header)
   }, {
   }, {
     joinPrefix: false,
     joinPrefix: false,
-    apiUrl: ''
+    apiUrl: '',
+    withShareToken: isShareMode()
   })
   })
 }
 }

@@ -2,13 +2,20 @@ import { defHttp } from '@/utils/external/http/axios';
 import { DeviceAttributesRecord, GetDeviceListParams, PublicInterfaceRecord, PublicInterfaceStateEnum } from './model';
 import { DeviceAttributesRecord, GetDeviceListParams, PublicInterfaceRecord, PublicInterfaceStateEnum } from './model';
 import { PaginationResult } from '/#/external/axios';
 import { PaginationResult } from '/#/external/axios';
 
 
-enum Api {
-  PUBLIC_API = '/data_view_interface',
-  ORG_LISt = '/organization/me/list',
-  DEVICE_PROFILE_LIST = '/device_profile/me/list',
-  DEVICE_LIST = '/device/list',
-  DEVICE_ATTR_LIST = '/device/attributes',
-  GET_PUBLIC_INTERFACE_ALL = '/data_view_interface/find_all_interface',
+ /**
+   * ft 更换接口
+   * 修改后的代码在注释之间，并标注好源代码和修改后代码，方便回溯
+   * 源代码  GET_PUBLIC_INTERFACE_ALL = '/data_view_interface/find_all_interface',
+   * 修改后代码 GET_PUBLIC_INTERFACE_ALL = '/data_view_interface/find/can_use_interfaces',
+   */
+  enum Api {
+    PUBLIC_API = '/data_view_interface',
+    ORG_LISt = '/organization/me/list',
+    DEVICE_PROFILE_LIST = '/device_profile/me/list',
+    DEVICE_LIST = '/device/list',
+    DEVICE_ATTR_LIST = '/device/attributes',
+    GET_PUBLIC_INTERFACE_ALL = '/data_view_interface/find/can_use_interfaces',
+    //ft
   GET_PUBLIC_INTERFACE_DETAIL = '/data_view_interface/get_interface_details'
   GET_PUBLIC_INTERFACE_DETAIL = '/data_view_interface/get_interface_details'
 }
 }
 
 
@@ -52,9 +59,15 @@ export const getDeviceInterfaceDetail = async (interfaces: string[]) => {
     params: interfaces
     params: interfaces
   })
   })
 }
 }
-
-export const getAllPublicInterface = async (params?: { state: PublicInterfaceStateEnum }) => {
+ /**
+   * ft 更换接口
+   * 修改后的代码在注释之间，并标注好源代码和修改后代码，方便回溯
+   * 源代码  url: `${Api.GET_PUBLIC_INTERFACE_ALL}${params?.state ? `/${params.state}` : ''}`
+   * 修改后代码     url: `${Api.GET_PUBLIC_INTERFACE_ALL}`
+   */
+export const getAllPublicInterface = async () => {
   return defHttp.get<PublicInterfaceRecord[]>({
   return defHttp.get<PublicInterfaceRecord[]>({
-    url: `${Api.GET_PUBLIC_INTERFACE_ALL}${params?.state ? `/${params.state}` : ''}`
+    url: `${Api.GET_PUBLIC_INTERFACE_ALL}`
   })
   })
 }
 }
+//ft

@@ -9,6 +9,7 @@ export interface ParamsItemType {
   key: string
   key: string
   required: boolean
   required: boolean
   value: string
   value: string
+  mores: boolean
 }
 }
 
 
 export interface PublicInterfaceRequestParams {
 export interface PublicInterfaceRequestParams {

 import { ViewTypeEnum } from "@/enums/external/viewEnum"
 import { ViewTypeEnum } from "@/enums/external/viewEnum"
 import { defHttp } from "@/utils/external/http/axios"
 import { defHttp } from "@/utils/external/http/axios"
+import { isShareMode } from "@/views/share/hook"
 
 
 enum Api {
 enum Api {
   TOKEN = '/auth/login/public',
   TOKEN = '/auth/login/public',
@@ -17,7 +18,7 @@ export const getPublicToken = (publicId: string) => {
   return defHttp.post<Record<'token' | 'refreshToken', string>>({
   return defHttp.post<Record<'token' | 'refreshToken', string>>({
     url: Api.TOKEN,
     url: Api.TOKEN,
     data: { publicId }
     data: { publicId }
-  }, { joinPrefix: false })
+  }, { joinPrefix: false, withShareToken: isShareMode() })
 }
 }
 
 
 /**
 /**
@@ -27,7 +28,7 @@ export const getPublicToken = (publicId: string) => {
 export const checkSharePageNeedAccessToken = (id: string) => {
 export const checkSharePageNeedAccessToken = (id: string) => {
   return defHttp.get<{ data: boolean }>({
   return defHttp.get<{ data: boolean }>({
     url: `${Api.CHECK}/${ViewTypeEnum.LARGE_SCREEN}/${id}`
     url: `${Api.CHECK}/${ViewTypeEnum.LARGE_SCREEN}/${id}`
-  })
+  }, { withShareToken: isShareMode() })
 }
 }
 
 
 /**
 /**
@@ -39,5 +40,5 @@ export const getShareContentData = (options: Record<'id' | 'accessCredentials',
   return defHttp.get<{ data: any }>({
   return defHttp.get<{ data: any }>({
     url: `${Api.SHARE_CONTENT}/${ViewTypeEnum.LARGE_SCREEN}/share_data/${options.id}`,
     url: `${Api.SHARE_CONTENT}/${ViewTypeEnum.LARGE_SCREEN}/share_data/${options.id}`,
     params: accessCredentials ? { accessCredentials } : {}
     params: accessCredentials ? { accessCredentials } : {}
-  })
+  }, { withShareToken: isShareMode() })
 }
 }

@@ -5,6 +5,10 @@ export const JWT_TOKEN_KEY = 'JWT_TOKEN';
 
 
 export const REFRESH_TOKEN_KEY = 'REFRESH_TOKEN';
 export const REFRESH_TOKEN_KEY = 'REFRESH_TOKEN';
 
 
+export const SHARE_JWT_TOKEN_KEY = 'SHARE_JWT_TOKEN';
+
+export const SHARE_REFRESH_TOKEN_KEY = 'SHARE_REFRESH_TOKEN';
+
 export const LOCALE_KEY = 'LOCALE__';
 export const LOCALE_KEY = 'LOCALE__';
 
 
 // user info key
 // user info key

@@ -3,10 +3,11 @@ import { CreateComponentType } from "@/packages/index.d";
 import { useSocketStore } from "@/store/external/modules/socketStore";
 import { useSocketStore } from "@/store/external/modules/socketStore";
 import { SocketReceiveMessageType } from "@/store/external/modules/socketStore.d";
 import { SocketReceiveMessageType } from "@/store/external/modules/socketStore.d";
 import { useChartEditStore } from "@/store/modules/chartEditStore/chartEditStore";
 import { useChartEditStore } from "@/store/modules/chartEditStore/chartEditStore";
-import { getJwtToken } from "@/utils/external/auth";
+import { getJwtToken, getShareJwtToken } from "@/utils/external/auth";
 import { useWebSocket, WebSocketResult } from "@vueuse/core";
 import { useWebSocket, WebSocketResult } from "@vueuse/core";
 import { onMounted, unref } from "vue";
 import { onMounted, unref } from "vue";
 import { ExtraRequestConfigType } from "@/store/external/modules/extraComponentInfo.d";
 import { ExtraRequestConfigType } from "@/store/external/modules/extraComponentInfo.d";
+import { isShareMode } from "@/views/share/hook";
 
 
 
 
 interface SocketConnectionPoolType {
 interface SocketConnectionPoolType {
@@ -39,7 +40,7 @@ const getSocketInstance = (request: ExtraRequestConfigType) => {
   if (~index) {
   if (~index) {
     return socketConnectionPool[index].ws
     return socketConnectionPool[index].ws
   }
   }
-  const token = getJwtToken()
+  const token = isShareMode() ? getShareJwtToken() :  getJwtToken()
   const socketUrl = `${getOriginUrl(requestOriginUrl || '')}${requestUrl}?token=${token}`
   const socketUrl = `${getOriginUrl(requestOriginUrl || '')}${requestUrl}?token=${token}`
 
 
   const instance = useWebSocket(socketUrl, {
   const instance = useWebSocket(socketUrl, {

@@ -26,7 +26,7 @@ export const useFetchTargetData = () => {
     } catch (error) {
     } catch (error) {
       loading.value = false
       loading.value = false
       console.error(error);
       console.error(error);
-      window['$message'].warning('数据异常，请检查参数！')
+      // window['$message'].warning('数据异常，请检查参数！')
     }
     }
   }
   }
   return { fetchTargetData, loading }
   return { fetchTargetData, loading }

@@ -6,7 +6,7 @@ import cloneDeep from 'lodash/cloneDeep'
 
 
 export const option = {
 export const option = {
   // 网站路径
   // 网站路径
-  dataset: "https://www.mtruning.club/",
+  dataset: "https://www.thingskit.com/",
   // 圆角
   // 圆角
   borderRadius: 10
   borderRadius: 10
 }
 }

@@ -2,6 +2,7 @@ import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { CreateComponentType } from '@/packages/index.d'
 import { LeftCenterRightHeadConfig } from './index'
 import { LeftCenterRightHeadConfig } from './index'
 import cloneDeep from 'lodash/cloneDeep'
 import cloneDeep from 'lodash/cloneDeep'
+import { chartInitConfig } from '@/settings/designSetting'
 
 
 export const option = {
 export const option = {
   dataset: '物联网平台数据统计',
   dataset: '物联网平台数据统计',
@@ -20,6 +21,7 @@ export const option = {
 
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = LeftCenterRightHeadConfig.key
   public key = LeftCenterRightHeadConfig.key
+  public attr = { ...chartInitConfig, zIndex: 1, w: 1920, h: 100 }
   public chartConfig = cloneDeep(LeftCenterRightHeadConfig)
   public chartConfig = cloneDeep(LeftCenterRightHeadConfig)
   public option = cloneDeep(option)
   public option = cloneDeep(option)
 }
 }

@@ -59,6 +59,11 @@
         <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.textColor"></n-color-picker>
         <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.textColor"></n-color-picker>
       </setting-item>
       </setting-item>
     </setting-item-box>
     </setting-item-box>
+    <setting-item-box name="颜色">
+      <SettingItem>
+        <n-button size="small" @click="optionData.textColor = '#00f6ff'"> 恢复默认 </n-button>
+      </SettingItem>
+    </setting-item-box>
     <setting-item-box name="位置x轴">
     <setting-item-box name="位置x轴">
       <setting-item name="字体位置x轴">
       <setting-item name="字体位置x轴">
         <n-input-number v-model:value="optionData.x" size="small" placeholder="字体位置"></n-input-number>
         <n-input-number v-model:value="optionData.x" size="small" placeholder="字体位置"></n-input-number>
@@ -96,6 +101,11 @@
         <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.textRightSizeColor"></n-color-picker>
         <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.textRightSizeColor"></n-color-picker>
       </setting-item>
       </setting-item>
     </setting-item-box>
     </setting-item-box>
+    <setting-item-box name="颜色">
+      <SettingItem>
+        <n-button size="small" @click="optionData.textRightSizeColor = '#ffffff'"> 恢复默认 </n-button>
+      </SettingItem>
+    </setting-item-box>
   </collapse-item>
   </collapse-item>
 </template>
 </template>
 
 

@@ -65,11 +65,8 @@ let nowData = ref('08:00:00')
 let newData = ref('2021-2-3 08:00:00')
 let newData = ref('2021-2-3 08:00:00')
 
 
 let timer: any = null
 let timer: any = null
-const { w, h } = toRefs(props.chartConfig.attr)
 
 
-//修改默认宽高
-props.chartConfig.attr.w = 1920
-props.chartConfig.attr.h = 100
+const { w, h } = toRefs(props.chartConfig.attr)
 
 
 watch(
 watch(
   () => props.chartConfig.option,
   () => props.chartConfig.option,

@@ -2,6 +2,7 @@ import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { CreateComponentType } from '@/packages/index.d'
 import { LeftCenterRightHeadAnimatConfig } from './index'
 import { LeftCenterRightHeadAnimatConfig } from './index'
 import cloneDeep from 'lodash/cloneDeep'
 import cloneDeep from 'lodash/cloneDeep'
+import { chartInitConfig } from '@/settings/designSetting'
 
 
 export const option = {
 export const option = {
   dataset: '我是标题',
   dataset: '我是标题',
@@ -26,6 +27,7 @@ export const option = {
 
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = LeftCenterRightHeadAnimatConfig.key
   public key = LeftCenterRightHeadAnimatConfig.key
+  public attr = { ...chartInitConfig, zIndex: 1, w: 1920, h: 130 }
   public chartConfig = cloneDeep(LeftCenterRightHeadAnimatConfig)
   public chartConfig = cloneDeep(LeftCenterRightHeadAnimatConfig)
   public option = cloneDeep(option)
   public option = cloneDeep(option)
 }
 }

@@ -5,7 +5,7 @@
         <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.animat.colors[index]"></n-color-picker>
         <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.animat.colors[index]"></n-color-picker>
       </SettingItem>
       </SettingItem>
       <SettingItem>
       <SettingItem>
-        <n-button size="small" @click="optionData.animat.colors[index] = optionData.animat.colors[index]">
+        <n-button size="small" @click="optionData.animat.colors[index] = option.animat.colors[index]">
           恢复默认
           恢复默认
         </n-button>
         </n-button>
       </SettingItem>
       </SettingItem>
@@ -47,6 +47,12 @@
       <setting-item name="结束值">
       <setting-item name="结束值">
         <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.animat.gradient.to"></n-color-picker>
         <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.animat.gradient.to"></n-color-picker>
       </setting-item>
       </setting-item>
+      <SettingItem>
+        <n-button size="small" @click="optionData.animat.gradient.from = '#0000FFFF'"> 恢复默认1 </n-button>
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.animat.gradient.to = '#00FF00FF'"> 恢复默认2 </n-button>
+      </SettingItem>
       <setting-item name="偏移角度">
       <setting-item name="偏移角度">
         <n-input-number
         <n-input-number
           v-model:value="optionData.animat.gradient.deg"
           v-model:value="optionData.animat.gradient.deg"

@@ -64,10 +64,6 @@ const props = defineProps({
   }
   }
 })
 })
 
 
-//修改默认宽高
-props.chartConfig.attr.w=1920
-props.chartConfig.attr.h=130
-
 const { w, h } = toRefs(props.chartConfig.attr)
 const { w, h } = toRefs(props.chartConfig.attr)
 
 
 const { animat, dataset } = toRefs(props.chartConfig.option)
 const { animat, dataset } = toRefs(props.chartConfig.option)

 <template>
 <template>
   <div class="go-content-box" :style="{ width: w + 'px', height: h + 'px' }">
   <div class="go-content-box" :style="{ width: w + 'px', height: h + 'px' }">
-    <video :id="`my-player${index}`" ref="videoRef" class="video-js my-video vjs-theme-city vjs-big-play-centered">
+    <video 
+    crossOrigin="anonymous"
+     :id="`my-player${index}`" ref="videoRef" class="video-js my-video vjs-theme-city vjs-big-play-centered">
       <source :src="sourceSrc" />
       <source :src="sourceSrc" />
     </video>
     </video>
   </div>
   </div>
@@ -15,6 +17,12 @@ const props = defineProps({
   sourceSrc: {
   sourceSrc: {
     type: String
     type: String
   },
   },
+  name: {
+    type: String
+  },
+  avatar: {
+    type: String
+  },
   w: {
   w: {
     type: Number,
     type: Number,
     default: 300
     default: 300
@@ -41,7 +49,8 @@ const options: VideoJsPlayerOptions = {
   preload: 'auto', // 预加载
   preload: 'auto', // 预加载
   autoplay: true, // 是否自动播放
   autoplay: true, // 是否自动播放
   fluid: false, // 自适应宽高
   fluid: false, // 自适应宽高
-  src: props.sourceSrc, // 要嵌入的视频源的源 URL
+  poster: props?.avatar || '',
+  src: props?.sourceSrc || '', // 要嵌入的视频源的源 URL
   muted: true,
   muted: true,
   userActions: {
   userActions: {
     hotkeys: true
     hotkeys: true

@@ -6,29 +6,8 @@ import cloneDeep from 'lodash/cloneDeep'
 export const option = {
 export const option = {
   dataset: [
   dataset: [
     {
     {
-      url: 'https://vcsplay.scjtonline.cn:8094/live/HD_664c01b9-4b67-11eb-bf78-3cd2e55e0a36.m3u8?auth_key=1681457689-0-0-a797d264f2889a388c52ff188fedf7dc'
+      url: ''
     },
     },
-    {
-      url: 'https://vcsplay.scjtonline.cn:8196/live/HD_c53fd3cb-4a6d-11eb-8edc-3cd2e55e088c.m3u8?auth_key=1681457668-0-0-7ef56e21fddd9ffb9740cbe499a1824c'
-    },
-    {
-      url: 'https://vcsplay.scjtonline.cn:8199/live/HD_53713154-1371-489a-a929-015cca5569fc.m3u8?auth_key=1681441451-0-0-4f1ebdcf28a71b7631c0028c099923c9'
-    },
-    {
-      url: 'https://vcsplay.scjtonline.cn:8195/live/HD_c54034ca-4a6d-11eb-8edc-3cd2e55e088c.m3u8?auth_key=1681457640-0-0-3a53b856ac19c09273986e8281f3d727'
-    },
-    {
-      url: 'https://vcsplay.scjtonline.cn:8094/live/HD_664c01b9-4b67-11eb-bf78-3cd2e55e0a36.m3u8?auth_key=1681457689-0-0-a797d264f2889a388c52ff188fedf7dc'
-    },
-    {
-      url: 'https://vcsplay.scjtonline.cn:8196/live/HD_c53fd3cb-4a6d-11eb-8edc-3cd2e55e088c.m3u8?auth_key=1681457668-0-0-7ef56e21fddd9ffb9740cbe499a1824c'
-    },
-    {
-      url: 'https://vcsplay.scjtonline.cn:8199/live/HD_53713154-1371-489a-a929-015cca5569fc.m3u8?auth_key=1681441451-0-0-4f1ebdcf28a71b7631c0028c099923c9'
-    },
-    {
-      url: 'https://vcsplay.scjtonline.cn:8195/live/HD_c54034ca-4a6d-11eb-8edc-3cd2e55e088c.m3u8?auth_key=1681457640-0-0-3a53b856ac19c09273986e8281f3d727'
-    }
   ] as any,
   ] as any,
   // 自动播放的间隔（ms）
   // 自动播放的间隔（ms）
   interval: 5000,
   interval: 5000,

@@ -2,7 +2,17 @@
   <div class="banner-box" ref="root">
   <div class="banner-box" ref="root">
     <div class="wrapper">
     <div class="wrapper">
       <div v-for="(item, index) in option.dataset" :key="index + item" :class="item.className" :style="item.sty">
       <div v-for="(item, index) in option.dataset" :key="index + item" :class="item.className" :style="item.sty">
-        <CameraItem ref="cameraRef" :key="item + index" :sourceSrc="item.url" :w="w" :h="h" :index="index" />
+        <CameraItem
+          ref="cameraRef"
+          :name="item.name"
+          :avatar="item.avatar"
+          :key="item + index"
+          :sourceSrc="item.url"
+          :w="w"
+          :h="h"
+          :index="index"
+        />
+        <span class="video-title">{{ item.name }}</span>
       </div>
       </div>
     </div>
     </div>
     <a href="javascript:;" class="left" @click="changeSlide('left')"></a>
     <a href="javascript:;" class="left" @click="changeSlide('left')"></a>
@@ -37,53 +47,54 @@ let interval = ref(4000)
 
 
 const computedFunc = (initial: number, source: any) => {
 const computedFunc = (initial: number, source: any) => {
   if (initial < 0) initial = 0
   if (initial < 0) initial = 0
-  let len = source.length,
-    temp1 = initial - 2 < 0 ? initial - 2 + len : initial - 2,
-    temp2 = initial - 1 < 0 ? initial - 1 + len : initial - 1,
-    temp3 = initial,
-    temp4 = initial + 1 >= len ? initial + 1 - len : initial + 1,
-    temp5 = initial + 2 >= len ? initial + 2 - len : initial + 2
-  return source.map((item: any, index: number) => {
-    let transform = `translate(-50%, -50%) scale(0.7)`,
-      zIndex = 0,
-      className = 'slide'
-    switch (index) {
-      case temp3:
-        transform = `translate(-50%, -50%) scale(1)`
-        className = ['slide', 'activate'] as any
-        zIndex = 3
-        break
-      case temp1:
-        transform = `translate(-80%, -50%) scale(0.7)`
-        zIndex = 1
-        break
-      case temp5:
-        transform = `translate(100%, -50%) scale(0.7)`
-        zIndex = 1
-        break
-      case temp2:
-        transform = `translate(-100%, -50%) scale(0.85)`
-        zIndex = 2
-        break
-      case temp4:
-        transform = `translate(58%, -50%) scale(0.85)`
-        zIndex = 2
-        break
-    }
-    item.sty = {
-      transform,
-      zIndex
-    }
-    item.className = className
-    return item
-  })
+  if (Array.isArray(source)) {
+    let len = source.length,
+      temp1 = initial - 2 < 0 ? initial - 2 + len : initial - 2,
+      temp2 = initial - 1 < 0 ? initial - 1 + len : initial - 1,
+      temp3 = initial,
+      temp4 = initial + 1 >= len ? initial + 1 - len : initial + 1,
+      temp5 = initial + 2 >= len ? initial + 2 - len : initial + 2
+    return source?.map((item: any, index: number) => {
+      let transform = `translate(-50%, -50%) scale(0.7)`,
+        zIndex = 0,
+        className = 'slide'
+      switch (index) {
+        case temp3:
+          transform = `translate(-50%, -50%) scale(1)`
+          className = ['slide', 'activate'] as any
+          zIndex = 3
+          break
+        case temp1:
+          transform = `translate(-80%, -50%) scale(0.7)`
+          zIndex = 1
+          break
+        case temp5:
+          transform = `translate(100%, -50%) scale(0.7)`
+          zIndex = 1
+          break
+        case temp2:
+          transform = `translate(-100%, -50%) scale(0.85)`
+          zIndex = 2
+          break
+        case temp4:
+          transform = `translate(58%, -50%) scale(0.85)`
+          zIndex = 2
+          break
+      }
+      item.sty = {
+        transform,
+        zIndex
+      }
+      item.className = className
+      return item
+    })
+  }
 }
 }
 
 
 watch(
 watch(
   () => props.chartConfig.option.dataset,
   () => props.chartConfig.option.dataset,
   newData => {
   newData => {
     option.dataset = newData
     option.dataset = newData
-    console.log(option.dataset)
   },
   },
   {
   {
     immediate: true,
     immediate: true,
@@ -143,12 +154,6 @@ function changeSlide(dir: string) {
 
 
 <style lang="scss" scoped>
 <style lang="scss" scoped>
 .banner-box {
 .banner-box {
-  width: 100%;
-  height: 100%;
-  // position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
   .wrapper {
   .wrapper {
     width: 100%;
     width: 100%;
     height: 100%;
     height: 100%;
@@ -162,6 +167,15 @@ function changeSlide(dir: string) {
       transform: translate(-50%, -50%);
       transform: translate(-50%, -50%);
       transition: 0.5s;
       transition: 0.5s;
       box-shadow: 0 0 4px black;
       box-shadow: 0 0 4px black;
+      .video-title {
+        width: v-bind('w+"px"');
+        font-size: 30px;
+        color: white;
+        position: absolute;
+        bottom: 6%;
+        left: 10%;
+        z-index: 999;
+      }
     }
     }
   }
   }
   .arrow {
   .arrow {

@@ -2,22 +2,25 @@ import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { CreateComponentType } from '@/packages/index.d'
 import { Title1Config } from './index'
 import { Title1Config } from './index'
 import cloneDeep from 'lodash/cloneDeep'
 import cloneDeep from 'lodash/cloneDeep'
+import { chartInitConfig } from '@/settings/designSetting'
 
 
 export const option = {
 export const option = {
   dataset: '我是标题',
   dataset: '我是标题',
   attribute: {
   attribute: {
-    linearColors: ['#0559A3', '#0654A3', '#2AFFFF', '#2AFFFF','#2affff',' #2affff','#16d9d9'],
+    linearColors: ['#0559A3', '#0654A3', '#2AFFFF', '#2AFFFF', '#2affff', ' #2affff', '#16d9d9'],
     fontSize: 20,
     fontSize: 20,
     fontPos: {
     fontPos: {
       x: 0,
       x: 0,
       y: 20
       y: 20
     },
     },
-    fontColor: '#2AFFFF'
+    fontColor: '#2AFFFF',
+    lineColor: '#2AFFFF'
   }
   }
 }
 }
 
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = Title1Config.key
   public key = Title1Config.key
+  public attr = { ...chartInitConfig, zIndex: 1, w: 550, h: 60 }
   public chartConfig = cloneDeep(Title1Config)
   public chartConfig = cloneDeep(Title1Config)
   public option = cloneDeep(option)
   public option = cloneDeep(option)
 }
 }

@@ -7,15 +7,18 @@
       <SettingItem name="大小">
       <SettingItem name="大小">
         <n-input-number v-model:value="optionData.attribute.fontSize" />
         <n-input-number v-model:value="optionData.attribute.fontSize" />
       </SettingItem>
       </SettingItem>
-      <SettingItem name="颜色">
-        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.fontColor"></n-color-picker>
-      </SettingItem>
       <SettingItem name="x轴位置">
       <SettingItem name="x轴位置">
         <n-input-number v-model:value="optionData.attribute.fontPos.x" />
         <n-input-number v-model:value="optionData.attribute.fontPos.x" />
       </SettingItem>
       </SettingItem>
       <SettingItem name="y轴位置">
       <SettingItem name="y轴位置">
         <n-input-number v-model:value="optionData.attribute.fontPos.y" />
         <n-input-number v-model:value="optionData.attribute.fontPos.y" />
       </SettingItem>
       </SettingItem>
+      <SettingItem name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.fontColor"></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.attribute.fontColor = '#2AFFFF'"> 恢复默认 </n-button>
+      </SettingItem>
     </SettingItemBox>
     </SettingItemBox>
     <SettingItemBox
     <SettingItemBox
       :name="`装饰颜色-${index + 1}`"
       :name="`装饰颜色-${index + 1}`"
@@ -30,14 +33,19 @@
         ></n-color-picker>
         ></n-color-picker>
       </SettingItem>
       </SettingItem>
       <SettingItem>
       <SettingItem>
-        <n-button
-          size="small"
-          @click="optionData.attribute.linearColors[index] = option.attribute.linearColors[index]"
-        >
+        <n-button size="small" @click="optionData.attribute.linearColors[index] = option.attribute.linearColors[index]">
           恢复默认
           恢复默认
         </n-button>
         </n-button>
       </SettingItem>
       </SettingItem>
     </SettingItemBox>
     </SettingItemBox>
+    <SettingItemBox :name="`装饰颜色8`">
+      <SettingItem name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.lineColor"></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.attribute.lineColor = '#2AFFFF'"> 恢复默认 </n-button>
+      </SettingItem>
+    </SettingItemBox>
   </CollapseItem>
   </CollapseItem>
 </template>
 </template>
 
 
@@ -46,7 +54,6 @@ import { PropType } from 'vue'
 import { option } from './config'
 import { option } from './config'
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 
 
-
 defineProps({
 defineProps({
   optionData: {
   optionData: {
     type: Object as PropType<typeof option>,
     type: Object as PropType<typeof option>,

@@ -26,11 +26,7 @@
           opacity="1"
           opacity="1"
           :d="`M0,${h} L${w},${h} L${w},0 L0,0 L0,${h} Z`"
           :d="`M0,${h} L${w},${h} L${w},0 L0,0 L0,${h} Z`"
         />
         />
-        <g
-          opacity="1"
-          :transform="`translate(34 ${(h/2)-26/2
-          })  rotate(0 46 13)`"
-        >
+        <g opacity="1" :transform="`translate(34 ${h / 2 - 26 / 2})  rotate(0 46 13)`">
           <text>
           <text>
             <tspan
             <tspan
               :x="attribute.fontPos.x"
               :x="attribute.fontPos.x"
@@ -49,15 +45,12 @@
         <path
         <path
           id="矩形 21"
           id="矩形 21"
           fill-rule="evenodd"
           fill-rule="evenodd"
-          style="fill: #2affff"
+          :style="{ fill: attribute.lineColor }"
           transform="translate(0 0)  rotate(0 0.5 15)"
           transform="translate(0 0)  rotate(0 0.5 15)"
           opacity="1"
           opacity="1"
-          :d="`M0,${h}L1,${h }L1,0L0,0L0,${h}Z`"
+          :d="`M0,${h}L1,${h}L1,0L0,0L0,${h}Z`"
         />
         />
-        <g
-          opacity="1"
-          :transform="`translate(14 ${(h/2)-8/2})  rotate(0 6.5 7)`"
-        >
+        <g opacity="1" :transform="`translate(14 ${h / 2 - 8 / 2})  rotate(0 6.5 7)`">
           <path
           <path
             id="矩形 22"
             id="矩形 22"
             fill-rule="evenodd"
             fill-rule="evenodd"
@@ -83,7 +76,7 @@
             :d="`M6,0L0,7L5,7L11,0L6,0Z `"
             :d="`M6,0L0,7L5,7L11,0L6,0Z `"
           />
           />
         </g>
         </g>
-        <g opacity="1" :transform="`translate(396 ${(h/2)-2/2})  rotate(0 46.5 13.5)`">
+        <g opacity="1" :transform="`translate(396 ${h / 2 - 2 / 2})  rotate(0 46.5 13.5)`">
           <path
           <path
             id="并集"
             id="并集"
             fill-rule="evenodd"
             fill-rule="evenodd"
@@ -108,11 +101,6 @@ const props = defineProps({
   }
   }
 })
 })
 
 
-//修改默认宽高
-props.chartConfig.attr.w=550
-props.chartConfig.attr.h=60
-
-
 const { dataset, attribute } = toRefs(props.chartConfig.option)
 const { dataset, attribute } = toRefs(props.chartConfig.option)
 
 
 const { w, h } = toRefs(props.chartConfig.attr)
 const { w, h } = toRefs(props.chartConfig.attr)

@@ -2,6 +2,7 @@ import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { CreateComponentType } from '@/packages/index.d'
 import { Title2Config } from './index'
 import { Title2Config } from './index'
 import cloneDeep from 'lodash/cloneDeep'
 import cloneDeep from 'lodash/cloneDeep'
+import { chartInitConfig } from '@/settings/designSetting'
 
 
 export const option = {
 export const option = {
   dataset: '我是标题',
   dataset: '我是标题',
@@ -18,6 +19,7 @@ export const option = {
 
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = Title2Config.key
   public key = Title2Config.key
+  public attr = { ...chartInitConfig, zIndex: 1, w: 550, h: 60 }
   public chartConfig = cloneDeep(Title2Config)
   public chartConfig = cloneDeep(Title2Config)
   public option = cloneDeep(option)
   public option = cloneDeep(option)
 }
 }

@@ -7,15 +7,18 @@
       <SettingItem name="大小">
       <SettingItem name="大小">
         <n-input-number v-model:value="optionData.attribute.fontSize" />
         <n-input-number v-model:value="optionData.attribute.fontSize" />
       </SettingItem>
       </SettingItem>
-      <SettingItem name="颜色">
-        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.fontColor"></n-color-picker>
-      </SettingItem>
       <SettingItem name="x轴位置">
       <SettingItem name="x轴位置">
         <n-input-number v-model:value="optionData.attribute.fontPos.x" />
         <n-input-number v-model:value="optionData.attribute.fontPos.x" />
       </SettingItem>
       </SettingItem>
       <SettingItem name="y轴位置">
       <SettingItem name="y轴位置">
         <n-input-number v-model:value="optionData.attribute.fontPos.y" />
         <n-input-number v-model:value="optionData.attribute.fontPos.y" />
       </SettingItem>
       </SettingItem>
+      <SettingItem name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.fontColor"></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.attribute.fontColor = '#2AFFFF'"> 恢复默认 </n-button>
+      </SettingItem>
     </SettingItemBox>
     </SettingItemBox>
     <SettingItemBox
     <SettingItemBox
       :name="`装饰颜色-${index + 1}`"
       :name="`装饰颜色-${index + 1}`"
@@ -30,10 +33,7 @@
         ></n-color-picker>
         ></n-color-picker>
       </SettingItem>
       </SettingItem>
       <SettingItem>
       <SettingItem>
-        <n-button
-          size="small"
-          @click="optionData.attribute.linearColors[index] = option.attribute.linearColors[index]"
-        >
+        <n-button size="small" @click="optionData.attribute.linearColors[index] = option.attribute.linearColors[index]">
           恢复默认
           恢复默认
         </n-button>
         </n-button>
       </SettingItem>
       </SettingItem>
@@ -46,7 +46,6 @@ import { PropType } from 'vue'
 import { option } from './config'
 import { option } from './config'
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 
 
-
 defineProps({
 defineProps({
   optionData: {
   optionData: {
     type: Object as PropType<typeof option>,
     type: Object as PropType<typeof option>,

@@ -76,9 +76,7 @@ const props = defineProps({
 })
 })
 
 
 const { dataset, attribute } = toRefs(props.chartConfig.option)
 const { dataset, attribute } = toRefs(props.chartConfig.option)
-//修改默认宽高
-props.chartConfig.attr.w=550
-props.chartConfig.attr.h=60
+
 const { w, h } = toRefs(props.chartConfig.attr)
 const { w, h } = toRefs(props.chartConfig.attr)
 </script>
 </script>
 
 

@@ -2,6 +2,7 @@ import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { CreateComponentType } from '@/packages/index.d'
 import { Title3Config } from './index'
 import { Title3Config } from './index'
 import cloneDeep from 'lodash/cloneDeep'
 import cloneDeep from 'lodash/cloneDeep'
+import { chartInitConfig } from '@/settings/designSetting'
 
 
 export const option = {
 export const option = {
   dataset: '我是标题',
   dataset: '我是标题',
@@ -31,6 +32,7 @@ export const option = {
 
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = Title3Config.key
   public key = Title3Config.key
+  public attr = { ...chartInitConfig, zIndex: 1, w: 550, h: 60 }
   public chartConfig = cloneDeep(Title3Config)
   public chartConfig = cloneDeep(Title3Config)
   public option = cloneDeep(option)
   public option = cloneDeep(option)
 }
 }

@@ -7,15 +7,18 @@
       <SettingItem name="大小">
       <SettingItem name="大小">
         <n-input-number v-model:value="optionData.attribute.fontSize" />
         <n-input-number v-model:value="optionData.attribute.fontSize" />
       </SettingItem>
       </SettingItem>
-      <SettingItem name="颜色">
-        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.fontColor"></n-color-picker>
-      </SettingItem>
       <SettingItem name="x轴位置">
       <SettingItem name="x轴位置">
         <n-input-number v-model:value="optionData.attribute.fontPos.x" />
         <n-input-number v-model:value="optionData.attribute.fontPos.x" />
       </SettingItem>
       </SettingItem>
       <SettingItem name="y轴位置">
       <SettingItem name="y轴位置">
         <n-input-number v-model:value="optionData.attribute.fontPos.y" />
         <n-input-number v-model:value="optionData.attribute.fontPos.y" />
       </SettingItem>
       </SettingItem>
+      <SettingItem name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.fontColor"></n-color-picker>
+      </SettingItem>
+      <SettingItem name="颜色">
+        <n-button size="small" @click="optionData.attribute.fontColor = '#2AFFFF'"> 恢复默认 </n-button>
+      </SettingItem>
     </SettingItemBox>
     </SettingItemBox>
     <SettingItemBox
     <SettingItemBox
       :name="`装饰颜色-${index + 1}`"
       :name="`装饰颜色-${index + 1}`"
@@ -30,10 +33,7 @@
         ></n-color-picker>
         ></n-color-picker>
       </SettingItem>
       </SettingItem>
       <SettingItem>
       <SettingItem>
-        <n-button
-          size="small"
-          @click="optionData.attribute.linearColors[index] = option.attribute.linearColors[index]"
-        >
+        <n-button size="small" @click="optionData.attribute.linearColors[index] = option.attribute.linearColors[index]">
           恢复默认
           恢复默认
         </n-button>
         </n-button>
       </SettingItem>
       </SettingItem>
@@ -46,7 +46,6 @@ import { PropType } from 'vue'
 import { option } from './config'
 import { option } from './config'
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 
 
-
 defineProps({
 defineProps({
   optionData: {
   optionData: {
     type: Object as PropType<typeof option>,
     type: Object as PropType<typeof option>,

@@ -117,9 +117,6 @@ const { dataset, attribute } = toRefs(props.chartConfig.option)
 
 
 const { w, h } = toRefs(props.chartConfig.attr)
 const { w, h } = toRefs(props.chartConfig.attr)
 
 
-//修改默认宽高
-props.chartConfig.attr.w=550
-props.chartConfig.attr.h=60
 </script>
 </script>
 
 
 <style lang="scss" scoped>
 <style lang="scss" scoped>

@@ -18,9 +18,17 @@ import {
 import { chartInitConfig } from '@/settings/designSetting'
 import { chartInitConfig } from '@/settings/designSetting'
 import cloneDeep from 'lodash/cloneDeep'
 import cloneDeep from 'lodash/cloneDeep'
 
 
+/**
+   * 这里更新版本有冲突 
+   * ft 修改在公共接口下拉框里默认选择公共接口
+   * 修改后的代码在注释之间，并标注好源代码和修改后代码，方便回溯
+   * 源代码 requestDataType: RequestDataTypeEnum.AJAX,
+   * 修改后的代码 requestDataType: RequestDataTypeEnum.Pond,
+   * 修改后代码在//ft之间
+   */
 // 请求基础属性
 // 请求基础属性
 export const requestConfig: RequestConfigType = {
 export const requestConfig: RequestConfigType = {
-  requestDataType: RequestDataTypeEnum.STATIC,
+  requestDataType: RequestDataTypeEnum.Pond,
   requestHttpType: RequestHttpEnum.GET,
   requestHttpType: RequestHttpEnum.GET,
   requestUrl: '',
   requestUrl: '',
   requestInterval: undefined,
   requestInterval: undefined,
@@ -41,6 +49,7 @@ export const requestConfig: RequestConfigType = {
     Params: {}
     Params: {}
   }
   }
 }
 }
+//ft之间
 
 
 // 单实例类
 // 单实例类
 export class PublicConfigClass implements PublicConfigType {
 export class PublicConfigClass implements PublicConfigType {

@@ -33,7 +33,7 @@ export const useSocketStore = defineStore({
         const { keys } = Params
         const { keys } = Params
         return {
         return {
           componentId: id,
           componentId: id,
-          keys: keys.split(KEYS_SEPARATOR)
+          keys: keys as unknown as string[]
         }
         }
       })
       })
     },
     },
@@ -149,8 +149,8 @@ export const useSocketStore = defineStore({
       const { requestContentType, requestParams } = request
       const { requestContentType, requestParams } = request
       if ((requestContentType as RequestContentTypeEnum) === RequestContentTypeEnum.WEB_SOCKET) {
       if ((requestContentType as RequestContentTypeEnum) === RequestContentTypeEnum.WEB_SOCKET) {
         const { Params } = requestParams
         const { Params } = requestParams
-        const { entityId = '', keys = '' } = Params
-        return this.updateConnectionPool(entityId, keys.split(KEYS_SEPARATOR), componentId)
+        const { entityId = '', keys = [] } = Params
+        return this.updateConnectionPool(entityId, keys as string[], componentId)
       }
       }
     },
     },
 
 
@@ -197,8 +197,8 @@ export const useSocketStore = defineStore({
     getComponentValueByKeys(targetComponent: CreateComponentType, value: SocketReceiveMessageType) {
     getComponentValueByKeys(targetComponent: CreateComponentType, value: SocketReceiveMessageType) {
       const { request: { requestParams } } = targetComponent
       const { request: { requestParams } } = targetComponent
       const { Params } = requestParams
       const { Params } = requestParams
-      const { keys = '' } = Params
-      const targetComponentBindKeys = keys.split(KEYS_SEPARATOR)
+      const { keys = [] } = Params
+      const targetComponentBindKeys = keys as unknown as string[]
 
 
       const _value = cloneDeep(value) || { data: {}, latestValues: {} }
       const _value = cloneDeep(value) || { data: {}, latestValues: {} }
       _value.data = targetComponentBindKeys.reduce((prev, next) => {
       _value.data = targetComponentBindKeys.reduce((prev, next) => {
@@ -238,7 +238,6 @@ export const useSocketStore = defineStore({
       const { subscriptionId, data } = value
       const { subscriptionId, data } = value
       const keys = Object.keys(data)
       const keys = Object.keys(data)
       const componentIds = this.getNeedUpdateComponentsIdBySubscribeId(subscriptionId, keys)
       const componentIds = this.getNeedUpdateComponentsIdBySubscribeId(subscriptionId, keys)
-      console.log(componentIds)
       componentIds?.forEach((targetComponentId) => {
       componentIds?.forEach((targetComponentId) => {
         this.updateComponentById(targetComponentId as string, value)
         this.updateComponentById(targetComponentId as string, value)
       })
       })

@@ -3,8 +3,8 @@ import type { ErrorMessageMode } from '/#/external/axios';
 import { defineStore } from 'pinia';
 import { defineStore } from 'pinia';
 import { pinia as store } from '@/store';
 import { pinia as store } from '@/store';
 import { RoleEnum } from '@/enums/external/roleEnum';
 import { RoleEnum } from '@/enums/external/roleEnum';
-import { JWT_TOKEN_KEY, REFRESH_TOKEN_KEY, ROLES_KEY, USER_INFO_KEY } from '@/enums/external/cacheEnum';
-import { getAuthCache, getJwtToken, getRefreshToken, setAuthCache } from '@/utils/external/auth';
+import { JWT_TOKEN_KEY, REFRESH_TOKEN_KEY, ROLES_KEY, SHARE_JWT_TOKEN_KEY, SHARE_REFRESH_TOKEN_KEY, USER_INFO_KEY } from '@/enums/external/cacheEnum';
+import { getAuthCache, getJwtToken, getRefreshToken, getUserInfo, setAuthCache } from '@/utils/external/auth';
 import {
 import {
   LoginParams,
   LoginParams,
   LoginResultModel,
   LoginResultModel,
@@ -29,6 +29,8 @@ interface UserState {
   lastUpdateTime: number;
   lastUpdateTime: number;
   jwtToken?: string;
   jwtToken?: string;
   refreshToken?: string;
   refreshToken?: string;
+  shareJwtToken?: string;
+  shareRefreshToken?: string;
   outTarget?: string;
   outTarget?: string;
 }
 }
 
 
@@ -41,12 +43,14 @@ export const useUserStore = defineStore({
     enterPriseInfo: storage.get('enterPriseInfo') || null,
     enterPriseInfo: storage.get('enterPriseInfo') || null,
 
 
     // user info
     // user info
-    userInfo: null,
+    userInfo: getUserInfo() || null,
     userUpdateInfo: null,
     userUpdateInfo: null,
     // token
     // token
     jwtToken: getJwtToken() as string || undefined,
     jwtToken: getJwtToken() as string || undefined,
     //refresh Token
     //refresh Token
     refreshToken: getRefreshToken() as string || undefined,
     refreshToken: getRefreshToken() as string || undefined,
+    shareJwtToken: undefined,
+    shareRefreshToken: undefined,
     // roleList
     // roleList
     roleList: [],
     roleList: [],
     // Whether the login expired
     // Whether the login expired
@@ -96,6 +100,12 @@ export const useUserStore = defineStore({
       setAuthCache(JWT_TOKEN_KEY, jwtToken);
       setAuthCache(JWT_TOKEN_KEY, jwtToken);
       setAuthCache(REFRESH_TOKEN_KEY, refreshToken);
       setAuthCache(REFRESH_TOKEN_KEY, refreshToken);
     },
     },
+    storeShareToken(jwtToken: string, refreshToken: string) {
+      this.shareJwtToken = jwtToken;
+      this.shareRefreshToken = refreshToken;
+      setAuthCache(SHARE_JWT_TOKEN_KEY, jwtToken);
+      setAuthCache(SHARE_REFRESH_TOKEN_KEY, refreshToken);
+    },
     setToken(info: string | undefined) {
     setToken(info: string | undefined) {
       this.jwtToken = info;
       this.jwtToken = info;
       setAuthCache(JWT_TOKEN_KEY, info);
       setAuthCache(JWT_TOKEN_KEY, info);
@@ -152,14 +162,6 @@ export const useUserStore = defineStore({
       }
       }
       return userInfo;
       return userInfo;
     },
     },
-    async smsCodelogin(
-      params: SmsLoginParams & {
-        goHome?: boolean;
-        mode?: ErrorMessageMode;
-      }
-    ) {
-
-    },
     async getMyUserInfoAction() {
     async getMyUserInfoAction() {
       const userInfo = await getMyInfo();
       const userInfo = await getMyInfo();
       this.setUserInfo(userInfo);
       this.setUserInfo(userInfo);
@@ -193,6 +195,20 @@ export const useUserStore = defineStore({
     },
     },
 
 
     /**
     /**
+     * @description 刷新分享页面的token
+     */
+    async doShareRefresh() {
+      try {
+        const req = { refreshToken: this.shareRefreshToken } as RefreshTokenParams
+        const { token, refreshToken } = await doRefreshToken(req)
+        this.storeShareToken(token, refreshToken)
+      } catch (error) {
+        window.location.reload()
+        throw error
+      }
+    },
+
+    /**
      * @description: Confirm before logging out
      * @description: Confirm before logging out
      */
      */
     confirmLoginOut() {
     confirmLoginOut() {

 import { Persistent, BasicKeys } from '@/utils/external/cache/persistent';
 import { Persistent, BasicKeys } from '@/utils/external/cache/persistent';
-import { CacheTypeEnum } from '@/enums/external/cacheEnum';
+import { CacheTypeEnum, SHARE_JWT_TOKEN_KEY, SHARE_REFRESH_TOKEN_KEY, USER_INFO_KEY } from '@/enums/external/cacheEnum';
 import projectSetting from '@/settings/external/projectSetting';
 import projectSetting from '@/settings/external/projectSetting';
 import { JWT_TOKEN_KEY, REFRESH_TOKEN_KEY } from '@/enums/external/cacheEnum';
 import { JWT_TOKEN_KEY, REFRESH_TOKEN_KEY } from '@/enums/external/cacheEnum';
+import { UserInfo } from '/#/external/store';
 
 
 const { permissionCacheType } = projectSetting;
 const { permissionCacheType } = projectSetting;
 const isLocal = permissionCacheType === CacheTypeEnum.LOCAL;
 const isLocal = permissionCacheType === CacheTypeEnum.LOCAL;
@@ -20,9 +21,21 @@ export function clearAuthCache(immediate = true) {
   const fn = isLocal ? Persistent.clearLocal : Persistent.clearSession;
   const fn = isLocal ? Persistent.clearLocal : Persistent.clearSession;
   return fn(immediate);
   return fn(immediate);
 }
 }
-export function getJwtToken() {
+export function getJwtToken(): string {
   return getAuthCache(JWT_TOKEN_KEY);
   return getAuthCache(JWT_TOKEN_KEY);
 }
 }
-export function getRefreshToken() {
+export function getRefreshToken(): string {
   return getAuthCache(REFRESH_TOKEN_KEY);
   return getAuthCache(REFRESH_TOKEN_KEY);
 }
 }
+
+export function getShareJwtToken(): string {
+  return getAuthCache(SHARE_JWT_TOKEN_KEY);
+}
+
+export function getShareRefreshToken(): string {
+  return getAuthCache(SHARE_REFRESH_TOKEN_KEY);
+}
+
+export function getUserInfo(): UserInfo {
+  return getAuthCache(USER_INFO_KEY)
+}

@@ -17,9 +17,11 @@ import {
   APP_SESSION_CACHE_KEY,
   APP_SESSION_CACHE_KEY,
   MULTIPLE_TABS_KEY,
   MULTIPLE_TABS_KEY,
   MENU_LIST,
   MENU_LIST,
+  SHARE_JWT_TOKEN_KEY,
+  SHARE_REFRESH_TOKEN_KEY,
 } from '@/enums/external/cacheEnum';
 } from '@/enums/external/cacheEnum';
 import { DEFAULT_CACHE_TIME } from '@/settings/external/encryptionSetting';
 import { DEFAULT_CACHE_TIME } from '@/settings/external/encryptionSetting';
-import { toRaw } from 'vue'; 
+import { toRaw } from 'vue';
 import omit from 'lodash/omit';
 import omit from 'lodash/omit';
 import pick from 'lodash/pick';
 import pick from 'lodash/pick';
 
 
@@ -34,6 +36,8 @@ interface BasicStore {
   [PROJ_CFG_KEY]: ProjectConfig;
   [PROJ_CFG_KEY]: ProjectConfig;
   [MULTIPLE_TABS_KEY]: RouteLocationNormalized[];
   [MULTIPLE_TABS_KEY]: RouteLocationNormalized[];
   [MENU_LIST]: any[];
   [MENU_LIST]: any[];
+  [SHARE_JWT_TOKEN_KEY]: string
+  [SHARE_REFRESH_TOKEN_KEY]: string
 }
 }
 
 
 type LocalStore = BasicStore;
 type LocalStore = BasicStore;

-import type { AxiosRequestConfig, AxiosInstance, AxiosResponse, AxiosError } from 'axios';
-import type { CreateAxiosOptions } from './axiosTransform';
+import type { AxiosInstance, AxiosResponse, AxiosError } from 'axios';
+import type { AxiosRequestConfig, CreateAxiosOptions } from './axiosTransform';
 import axios from 'axios';
 import axios from 'axios';
 import qs from 'qs';
 import qs from 'qs';
 import { AxiosCanceler } from './axiosCancel';
 import { AxiosCanceler } from './axiosCancel';
@@ -115,13 +115,21 @@ 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();
-      if (userStore && userStore.jwtToken) {
+      // if (userStore && (userStore.jwtToken || userStore.shareJwtToken)) {
+      if (userStore) {
         try {
         try {
-          const res = jwt_decode(userStore.jwtToken) as JwtModel;
-          const currentTime = (new Date().getTime() + (config.timeout || 0)) / 1000;
-          if (currentTime >= res.exp && this.isNeedTokenURL(config.url!)) {
-            await this.refreshTokenBeforeReq(userStore.doRefresh);
+          const { requestOptions = {} } = config
+          const { withShareToken, withToken } = requestOptions
+          const token = withShareToken && withToken ? userStore.shareJwtToken : userStore.jwtToken
+          const doRefresh = withShareToken && withToken ? userStore.doShareRefresh : userStore.doRefresh
+          if (token) {
+            const res = jwt_decode(token) as JwtModel;
+            const currentTime = (new Date().getTime() + (config.timeout || 0)) / 1000;
+            if (currentTime >= res.exp && this.isNeedTokenURL(config.url!)) {
+              await this.refreshTokenBeforeReq(doRefresh);
+            }
           }
           }
+
         } catch (error) {
         } catch (error) {
           userStore.logout();
           userStore.logout();
         }
         }

 /**
 /**
  * Data processing class, can be configured according to the project
  * Data processing class, can be configured according to the project
  */
  */
-import type { AxiosRequestConfig, AxiosResponse } from 'axios';
+import type { AxiosRequestConfig as OriginAxiosRequestConfig, AxiosResponse } from 'axios';
 import type { RequestOptions, Result } from '/#/external/axios';
 import type { RequestOptions, Result } from '/#/external/axios';
 
 
 export interface CreateAxiosOptions extends AxiosRequestConfig {
 export interface CreateAxiosOptions extends AxiosRequestConfig {
@@ -11,6 +11,8 @@ export interface CreateAxiosOptions extends AxiosRequestConfig {
   requestOptions?: RequestOptions;
   requestOptions?: RequestOptions;
 }
 }
 
 
+export type AxiosRequestConfig = OriginAxiosRequestConfig & {requestOptions?: RequestOptions}
+
 export abstract class AxiosTransform {
 export abstract class AxiosTransform {
   /**
   /**
    * @description: Process configuration before request
    * @description: Process configuration before request

@@ -9,7 +9,7 @@ import { checkStatus } from './checkStatus';
 import { useGlobSetting } from '@/hooks/external/setting';
 import { useGlobSetting } from '@/hooks/external/setting';
 import { RequestEnum, ContentTypeEnum } from '@/enums/external/httpEnum';
 import { RequestEnum, ContentTypeEnum } from '@/enums/external/httpEnum';
 import { isString } from '@/utils/external/is';
 import { isString } from '@/utils/external/is';
-import { getJwtToken } from '@/utils/external/auth';
+import { getJwtToken, getShareJwtToken } from '@/utils/external/auth';
 import { setObjToUrlParams, deepMerge } from '@/utils/external';
 import { setObjToUrlParams, deepMerge } from '@/utils/external';
 import { joinTimestamp, formatRequestDate } from './helper';
 import { joinTimestamp, formatRequestDate } from './helper';
 import { PageEnum } from '@/enums/external/pageEnum';
 import { PageEnum } from '@/enums/external/pageEnum';
@@ -89,14 +89,25 @@ const transform: AxiosTransform = {
    */
    */
   requestInterceptors: (config, options) => {
   requestInterceptors: (config, options) => {
     // 请求之前处理config
     // 请求之前处理config
-    const token = getJwtToken();
-    if (token && (config as Recordable)?.requestOptions?.withToken !== false) {
-      // jwt token
-      config.headers!['X-Authorization'] = options.authenticationScheme
-        ? `${options.authenticationScheme} ${token}`
-        : token as string;
+    const { requestOptions } = config;
+    const { withShareToken } = requestOptions || {};
+    const { requestOptions: { withToken } = {} } = options;
+    if (withToken !== false) {
+      const shareToken = getShareJwtToken();
+      if (withShareToken && shareToken) {
+        config.headers!['X-Authorization'] = options.authenticationScheme
+          ? `${options.authenticationScheme} ${shareToken}`
+          : shareToken;
+      } else {
+        const token = getJwtToken();
+        if (token) {
+          config.headers!['X-Authorization'] = options.authenticationScheme
+            ? `${options.authenticationScheme} ${token}`
+            : token;
+        }
+      }
     }
     }
-    return config;
+    return config
   },
   },
 
 
   /**
   /**

+import { excludeParseEventKeyList, excludeParseEventValueList } from "@/enums/eventEnum"
+
+const tryRunFunction = (v: string) => {
+  try {
+    return eval(`(function(){return ${v}})()`)
+  } catch (error) {
+    return v
+  }
+}
+
+export const JSONParse = (data: string) => {
+  return JSON.parse(data, (k, v) => {
+    // 过滤函数字符串
+    if (excludeParseEventKeyList.includes(k)) return v
+    // 过滤函数值表达式
+    if (typeof v === 'string') {
+      const someValue = excludeParseEventValueList.some(excludeValue => v.indexOf(excludeValue) > -1)
+      if (someValue) return v
+    }
+    // 还原函数值
+    if (typeof v === 'string' && v.indexOf && (v.indexOf('function') > -1 || v.indexOf('=>') > -1)) {
+      return tryRunFunction(v)
+    } else if (typeof v === 'string' && v.indexOf && v.indexOf('return ') > -1) {
+      const baseLeftIndex = v.indexOf('(')
+      if (baseLeftIndex > -1) {
+        const newFn = `function ${v.substring(baseLeftIndex)}`
+        return tryRunFunction(newFn)
+      }
+    }
+    return v
+  })
+}

@@ -12,6 +12,9 @@ import { RequestHttpIntervalEnum, RequestParamsObjType } from '@/enums/httpEnum'
 import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
 import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
 import { excludeParseEventKeyList, excludeParseEventValueList } from '@/enums/eventEnum'
 import { excludeParseEventKeyList, excludeParseEventValueList } from '@/enums/eventEnum'
 
 
+/// THINGS_KIT 替换JSONParse解析
+export { JSONParse } from './external/utils'
+
 /**
 /**
  * * 判断是否是开发环境
  * * 判断是否是开发环境
  * @return { Boolean }
  * @return { Boolean }
@@ -127,11 +130,11 @@ export const fileToUrl = (file: File): string => {
  * * file转base64
  * * file转base64
  */
  */
 export const fileTobase64 = (file: File, callback: Function) => {
 export const fileTobase64 = (file: File, callback: Function) => {
-  let reader = new FileReader()
+  const reader = new FileReader()
   reader.readAsDataURL(file)
   reader.readAsDataURL(file)
   reader.onload = function (e: ProgressEvent<FileReader>) {
   reader.onload = function (e: ProgressEvent<FileReader>) {
     if (e.target) {
     if (e.target) {
-      let base64 = e.target.result
+      const base64 = e.target.result
       callback(base64)
       callback(base64)
     }
     }
   }
   }
@@ -318,7 +321,8 @@ export const JSONStringify = <T>(data: T) => {
  * * JSON反序列化，支持函数和 undefined
  * * JSON反序列化，支持函数和 undefined
  * @param data
  * @param data
  */
  */
-export const JSONParse = (data: string) => {
+/// THINGS_KIT 重命名 JSONParse 为 JSONParseOriginal
+export const JSONParseOriginal = (data: string) => {
   return JSON.parse(data, (k, v) => {
   return JSON.parse(data, (k, v) => {
     // 过滤函数字符串
     // 过滤函数字符串
     if (excludeParseEventKeyList.includes(k)) return v
     if (excludeParseEventKeyList.includes(k)) return v
@@ -347,4 +351,4 @@ export const JSONParse = (data: string) => {
  */
  */
 export const setTitle = (title?: string) => {
 export const setTitle = (title?: string) => {
   title && (document.title = title)
   title && (document.title = title)
-}
+}

@@ -22,7 +22,14 @@ const requestModal = ref<InstanceType<typeof RequestModal>>()
 const designStore = useDesignStore()
 const designStore = useDesignStore()
 
 
 
 
-const selectedRequestType = ref(targetData.value.request.requestDataType || RequestDataTypeEnum.AJAX)
+/**
+   * 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 getApiRequestType: SelectOption[] = [
 const getApiRequestType: SelectOption[] = [
   { label: '自定义请求', value: RequestDataTypeEnum.AJAX },
   { label: '自定义请求', value: RequestDataTypeEnum.AJAX },
@@ -40,7 +47,10 @@ const { fetchTargetData, } = useFetchTargetData()
 
 
 // 发送请求
 // 发送请求
 const sendHandle = async () => {
 const sendHandle = async () => {
-  if (!targetData.value?.request) return
+  if (!targetData.value?.request || !targetData.value.request.requestUrl) {
+    window['$message'].warning('请先配置请求')
+    return
+  }
   loading.value = true
   loading.value = true
   try {
   try {
     const res = await fetchTargetData()
     const res = await fetchTargetData()

@@ -4,6 +4,7 @@ import { FormItemInst, NDatePicker, NForm, NFormItem, NInput, NSelect, NTreeSele
 import { computed, nextTick, ref, unref, watch } from 'vue';
 import { computed, nextTick, ref, unref, watch } from 'vue';
 import { ComponentType, useDynamicPublicForm } from './useDynamicPublicForm';
 import { ComponentType, useDynamicPublicForm } from './useDynamicPublicForm';
 import { Help } from '@vicons/ionicons5'
 import { Help } from '@vicons/ionicons5'
+import { SelectTimeAggregation } from '../SelectTImeAggregation';
 
 
 const props = defineProps<{
 const props = defineProps<{
   paramsItemList: ParamsItemType[]
   paramsItemList: ParamsItemType[]
@@ -13,7 +14,8 @@ const componentMap: { [key in ComponentType]?: any } = {
   [ComponentType.SELECT_TREE]: NTreeSelect,
   [ComponentType.SELECT_TREE]: NTreeSelect,
   [ComponentType.SELECT]: NSelect,
   [ComponentType.SELECT]: NSelect,
   [ComponentType.INPUT]: NInput,
   [ComponentType.INPUT]: NInput,
-  [ComponentType.DATE_PICKER]: NDatePicker
+  [ComponentType.DATE_PICKER]: NDatePicker,
+  [ComponentType.SELECT_TIME_AGGREGATION]: SelectTimeAggregation
 }
 }
 
 
 const getParamsItemList = computed(() => {
 const getParamsItemList = computed(() => {
@@ -39,12 +41,16 @@ const setConfigurationData = async (params: Recordable) => {
   setDynamicFormValue(params)
   setDynamicFormValue(params)
 }
 }
 
 
+const recreate = ref(false)
+
 watch(
 watch(
   () => props.paramsItemList,
   () => props.paramsItemList,
   (newValue) => {
   (newValue) => {
     if (newValue) {
     if (newValue) {
+      recreate.value = true
       clearParams()
       clearParams()
       createForm()
       createForm()
+      recreate.value = false
     }
     }
   }
   }
 )
 )
@@ -59,8 +65,8 @@ defineExpose({
 
 
 <template>
 <template>
   <NForm>
   <NForm>
-    <template v-for="item in getDynamicFormSchemas" :key="item.key">
-      <NFormItem ref="dynamicFormItemEl" :required="item.required" :rule="item.rules">
+    <template v-for="item in getDynamicFormSchemas" :key="item.uuid">
+      <NFormItem v-if="!recreate" ref="dynamicFormItemEl" :required="item.required" :rule="item.rules">
         <template #label>
         <template #label>
           <div class="label-container">
           <div class="label-container">
             <span>{{ item.name }}</span>
             <span>{{ item.name }}</span>

+enum TimeUnitEnum {
+  SECOND = 'SECOND',
+  MINUTE = 'MINUTE',
+  HOUR = 'HOUR',
+  DAY = 'DAY',
+}
+
+const unitMapping = {
+  [TimeUnitEnum.SECOND]: '秒',
+  [TimeUnitEnum.MINUTE]: '分',
+  [TimeUnitEnum.HOUR]: '小时',
+  [TimeUnitEnum.DAY]: '天',
+}
+
+const unitConversion = {
+  [TimeUnitEnum.SECOND]: 1 * 1000,
+  [TimeUnitEnum.MINUTE]: 1 * 60 * 1000,
+  [TimeUnitEnum.HOUR]: 1 * 60 * 60 * 1000,
+  [TimeUnitEnum.DAY]: 1 * 60 * 60 * 24 * 1000,
+}
+
+export  const defaultIntervalOptions = [
+  {
+    id: 1,
+    unit: TimeUnitEnum.SECOND,
+    linkage: [
+      { id: 1, unit: TimeUnitEnum.SECOND }
+    ]
+  },
+  {
+    id: 5,
+    unit: TimeUnitEnum.SECOND,
+    linkage: [
+      { id: 1, unit: TimeUnitEnum.SECOND }
+    ]
+  },
+  {
+    id: 10,
+    unit: TimeUnitEnum.SECOND,
+    linkage: [
+      { id: 1, unit: TimeUnitEnum.SECOND }
+    ]
+  },
+  {
+    id: 15,
+    unit: TimeUnitEnum.SECOND,
+    linkage: [
+      { id: 1, unit: TimeUnitEnum.SECOND }
+    ]
+  },
+  {
+    id: 30,
+    unit: TimeUnitEnum.SECOND,
+    linkage: [
+      { id: 1, unit: TimeUnitEnum.SECOND }
+    ]
+  },
+  {
+    id: 1,
+    unit: TimeUnitEnum.MINUTE,
+    linkage: [
+      { id: 1, unit: TimeUnitEnum.SECOND },
+      { id: 5, unit: TimeUnitEnum.SECOND },
+    ]
+  },
+  {
+    id: 2,
+    unit: TimeUnitEnum.MINUTE,
+    linkage: [
+      { id: 1, unit: TimeUnitEnum.SECOND },
+      { id: 5, unit: TimeUnitEnum.SECOND },
+      { id: 10, unit: TimeUnitEnum.SECOND },
+      { id: 15, unit: TimeUnitEnum.SECOND },
+    ]
+  },
+  {
+    id: 5,
+    unit: TimeUnitEnum.MINUTE,
+    linkage: [
+      { id: 1, unit: TimeUnitEnum.SECOND },
+      { id: 5, unit: TimeUnitEnum.SECOND },
+      { id: 10, unit: TimeUnitEnum.SECOND },
+      { id: 15, unit: TimeUnitEnum.SECOND },
+      { id: 30, unit: TimeUnitEnum.SECOND },
+    ]
+  },
+  {
+    id: 10,
+    unit: TimeUnitEnum.MINUTE,
+    linkage: [
+      { id: 5, unit: TimeUnitEnum.SECOND },
+      { id: 10, unit: TimeUnitEnum.SECOND },
+      { id: 15, unit: TimeUnitEnum.SECOND },
+      { id: 30, unit: TimeUnitEnum.SECOND },
+      { id: 1, unit: TimeUnitEnum.MINUTE },
+    ]
+  },
+  {
+    id: 15,
+    unit: TimeUnitEnum.MINUTE,
+    linkage: [
+      { id: 5, unit: TimeUnitEnum.SECOND },
+      { id: 10, unit: TimeUnitEnum.SECOND },
+      { id: 15, unit: TimeUnitEnum.SECOND },
+      { id: 30, unit: TimeUnitEnum.SECOND },
+      { id: 1, unit: TimeUnitEnum.MINUTE },
+      { id: 2, unit: TimeUnitEnum.MINUTE },
+    ]
+  },
+  {
+    id: 30,
+    unit: TimeUnitEnum.MINUTE,
+    linkage: [
+      { id: 5, unit: TimeUnitEnum.SECOND },
+      { id: 10, unit: TimeUnitEnum.SECOND },
+      { id: 15, unit: TimeUnitEnum.SECOND },
+      { id: 30, unit: TimeUnitEnum.SECOND },
+      { id: 1, unit: TimeUnitEnum.MINUTE },
+      { id: 2, unit: TimeUnitEnum.MINUTE },
+    ]
+  },
+  {
+    id: 1,
+    unit: TimeUnitEnum.HOUR,
+    linkage: [
+      { id: 10, unit: TimeUnitEnum.SECOND },
+      { id: 15, unit: TimeUnitEnum.SECOND },
+      { id: 30, unit: TimeUnitEnum.SECOND },
+      { id: 1, unit: TimeUnitEnum.MINUTE },
+      { id: 2, unit: TimeUnitEnum.MINUTE },
+      { id: 5, unit: TimeUnitEnum.MINUTE },
+    ]
+  },
+  {
+    id: 2,
+    unit: TimeUnitEnum.HOUR,
+    linkage: [
+      { id: 15, unit: TimeUnitEnum.SECOND },
+      { id: 30, unit: TimeUnitEnum.SECOND },
+      { id: 1, unit: TimeUnitEnum.MINUTE },
+      { id: 2, unit: TimeUnitEnum.MINUTE },
+      { id: 5, unit: TimeUnitEnum.MINUTE },
+      { id: 10, unit: TimeUnitEnum.MINUTE },
+      { id: 15, unit: TimeUnitEnum.MINUTE },
+    ]
+  },
+  {
+    id: 5,
+    unit: TimeUnitEnum.HOUR,
+    linkage: [
+      { id: 1, unit: TimeUnitEnum.MINUTE },
+      { id: 2, unit: TimeUnitEnum.MINUTE },
+      { id: 5, unit: TimeUnitEnum.MINUTE },
+      { id: 10, unit: TimeUnitEnum.MINUTE },
+      { id: 15, unit: TimeUnitEnum.MINUTE },
+      { id: 30, unit: TimeUnitEnum.MINUTE },
+    ]
+  },
+  {
+    id: 10,
+    unit: TimeUnitEnum.HOUR,
+    linkage: [
+      { id: 2, unit: TimeUnitEnum.MINUTE },
+      { id: 5, unit: TimeUnitEnum.MINUTE },
+      { id: 10, unit: TimeUnitEnum.MINUTE },
+      { id: 15, unit: TimeUnitEnum.MINUTE },
+      { id: 30, unit: TimeUnitEnum.MINUTE },
+      { id: 1, unit: TimeUnitEnum.HOUR },
+    ]
+  },
+  {
+    id: 12,
+    unit: TimeUnitEnum.HOUR,
+    linkage: [
+      { id: 2, unit: TimeUnitEnum.MINUTE },
+      { id: 5, unit: TimeUnitEnum.MINUTE },
+      { id: 10, unit: TimeUnitEnum.MINUTE },
+      { id: 15, unit: TimeUnitEnum.MINUTE },
+      { id: 30, unit: TimeUnitEnum.MINUTE },
+      { id: 1, unit: TimeUnitEnum.HOUR },
+    ]
+  },
+  {
+    id: 1,
+    unit: TimeUnitEnum.DAY,
+    linkage: [
+      { id: 5, unit: TimeUnitEnum.MINUTE },
+      { id: 10, unit: TimeUnitEnum.MINUTE },
+      { id: 15, unit: TimeUnitEnum.MINUTE },
+      { id: 30, unit: TimeUnitEnum.MINUTE },
+      { id: 1, unit: TimeUnitEnum.HOUR },
+      { id: 2, unit: TimeUnitEnum.HOUR },
+    ]
+  },
+  {
+    id: 7,
+    unit: TimeUnitEnum.DAY,
+    linkage: [
+      { id: 30, unit: TimeUnitEnum.MINUTE },
+      { id: 1, unit: TimeUnitEnum.HOUR },
+      { id: 2, unit: TimeUnitEnum.HOUR },
+      { id: 5, unit: TimeUnitEnum.HOUR },
+      { id: 10, unit: TimeUnitEnum.HOUR },
+      { id: 12, unit: TimeUnitEnum.HOUR },
+      { id: 1, unit: TimeUnitEnum.DAY },
+    ]
+  },
+  {
+    id: 30,
+    unit: TimeUnitEnum.DAY,
+    linkage: [
+      { id: 2, unit: TimeUnitEnum.HOUR },
+      { id: 5, unit: TimeUnitEnum.HOUR },
+      { id: 10, unit: TimeUnitEnum.HOUR },
+      { id: 12, unit: TimeUnitEnum.HOUR },
+      { id: 1, unit: TimeUnitEnum.DAY },
+    ]
+  },
+].map(item => {
+  return {
+    id: item.id * unitConversion[item.unit],
+    name: item.id + unitMapping[item.unit],
+    linkage: item.linkage.map(item => {
+      return {
+        id: item.id * unitConversion[item.unit],
+        name: item.id + unitMapping[item.unit],
+      }
+    })
+  }
+})
+ 
+export const aggergationOptions = [
+  { id: 'AVG', name: '平均值' },
+  { id: 'MIN', name: '最小值' },
+  { id: 'MAX', name: '最大值' },
+  { id: 'SUM', name: '求和' },
+  { id: 'COUNT', name: '计数' },
+  { id: 'NONE', name: '空' },
+]

@@ -6,6 +6,8 @@ import { RequestConfigType } from "@/store/modules/chartEditStore/chartEditStore
 import { DatePickerProps, FormItemRule, InputProps, SelectProps, TreeSelectProps } from "naive-ui"
 import { DatePickerProps, FormItemRule, InputProps, SelectProps, TreeSelectProps } from "naive-ui"
 import { computed, onMounted, reactive, Ref, ref, unref } from "vue"
 import { computed, onMounted, reactive, Ref, ref, unref } from "vue"
 import { DictEnum } from '@/enums/external/dictEnum'
 import { DictEnum } from '@/enums/external/dictEnum'
+import { SelectTimeAggregationFieldEnum, SelectTimeAggregationValueTypw } from "../SelectTImeAggregation"
+import { isArray } from "@/utils"
 
 
 const GROUP_SEPARATOR = ','
 const GROUP_SEPARATOR = ','
 
 
@@ -15,7 +17,8 @@ export enum BuiltInVariable {
   ORGANIZATION_ID = 'organizationId',
   ORGANIZATION_ID = 'organizationId',
   DEVICE_PROFILE_ID = 'deviceProfileId',
   DEVICE_PROFILE_ID = 'deviceProfileId',
   DATE_FIXED = 'fixed_date',
   DATE_FIXED = 'fixed_date',
-  DATE_RANGE = 'date_range'
+  DATE_RANGE = 'date_range',
+  SELECT_TIME_AGGREGATION = 'selectTimeAggregation'
 }
 }
 
 
 export enum ComponentType {
 export enum ComponentType {
@@ -23,10 +26,12 @@ export enum ComponentType {
   SELECT_TREE = 'selectTree',
   SELECT_TREE = 'selectTree',
   DATE_PICKER = 'datePicker',
   DATE_PICKER = 'datePicker',
   INPUT = 'input',
   INPUT = 'input',
+  SELECT_TIME_AGGREGATION = 'selectTimeAggregation'
 }
 }
 
 
 
 
 export interface DynamicFormSchema {
 export interface DynamicFormSchema {
+  uuid?: string
   key: string
   key: string
   name?: string
   name?: string
   component: ComponentType,
   component: ComponentType,
@@ -57,7 +62,9 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => {
 
 
   const builtInVariable = ref<BuiltInVariableRecord>()
   const builtInVariable = ref<BuiltInVariableRecord>()
 
 
-  const params = reactive<Recordable & { [key in BuiltInVariable]?: any }>({})
+  const params = reactive<Recordable & { [key in BuiltInVariable]?: any }>({
+    [BuiltInVariable.SELECT_TIME_AGGREGATION]: {}
+  })
 
 
   const optionsSet = reactive<Recordable>({})
   const optionsSet = reactive<Recordable>({})
 
 
@@ -107,7 +114,8 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => {
 
 
   const getDeviceOption = async () => {
   const getDeviceOption = async () => {
     if (!validIsExist(BuiltInVariable.DEVICE_PROFILE_ID) || !validIsExist(BuiltInVariable.ORGANIZATION_ID) || !params[BuiltInVariable.ORGANIZATION_ID]) return
     if (!validIsExist(BuiltInVariable.DEVICE_PROFILE_ID) || !validIsExist(BuiltInVariable.ORGANIZATION_ID) || !params[BuiltInVariable.ORGANIZATION_ID]) return
-    optionsSet[BuiltInVariable.ENTITY_ID] = await getDeviceList({ [BuiltInVariable.ORGANIZATION_ID]: params[BuiltInVariable.ORGANIZATION_ID], [BuiltInVariable.DEVICE_PROFILE_ID]: params[BuiltInVariable.DEVICE_PROFILE_ID] })
+    const result: Recordable[] = await getDeviceList({ [BuiltInVariable.ORGANIZATION_ID]: params[BuiltInVariable.ORGANIZATION_ID], [BuiltInVariable.DEVICE_PROFILE_ID]: params[BuiltInVariable.DEVICE_PROFILE_ID] })
+    optionsSet[BuiltInVariable.ENTITY_ID] = result.map(item => ({ ...item, alias: item.alias || item.name }))
   }
   }
 
 
   const getDeviceAttrOption = async () => {
   const getDeviceAttrOption = async () => {
@@ -119,6 +127,7 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => {
 
 
   const getValue = computed(() => {
   const getValue = computed(() => {
     const value = { ...unref(params) }
     const value = { ...unref(params) }
+
     if (Reflect.has(value, BuiltInVariable.DATE_FIXED)) {
     if (Reflect.has(value, BuiltInVariable.DATE_FIXED)) {
       const fieldMapping = unref(getParams).find(item => item.key === BuiltInVariable.DATE_FIXED)
       const fieldMapping = unref(getParams).find(item => item.key === BuiltInVariable.DATE_FIXED)
       Reflect.set(value, fieldMapping?.value || '', value[BuiltInVariable.DATE_FIXED])
       Reflect.set(value, fieldMapping?.value || '', value[BuiltInVariable.DATE_FIXED])
@@ -128,13 +137,24 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => {
     if (Reflect.has(value, BuiltInVariable.DATE_RANGE)) {
     if (Reflect.has(value, BuiltInVariable.DATE_RANGE)) {
       const fieldMapping = unref(getParams).find(item => item.key === BuiltInVariable.DATE_RANGE)
       const fieldMapping = unref(getParams).find(item => item.key === BuiltInVariable.DATE_RANGE)
       const [start, end] = ((fieldMapping || {}).value || '').split(GROUP_SEPARATOR)
       const [start, end] = ((fieldMapping || {}).value || '').split(GROUP_SEPARATOR)
-      const [startValue, endValue] = value[BuiltInVariable.DATE_RANGE] || []
+      const dateRangeValue = value[BuiltInVariable.DATE_RANGE]
+      const [startValue, endValue] = isArray(dateRangeValue) ? dateRangeValue : [null, null]
       value[start] = startValue
       value[start] = startValue
       value[end] = endValue
       value[end] = endValue
-
       Reflect.deleteProperty(value, BuiltInVariable.DATE_RANGE)
       Reflect.deleteProperty(value, BuiltInVariable.DATE_RANGE)
     }
     }
 
 
+    if (Reflect.has(value, BuiltInVariable.SELECT_TIME_AGGREGATION)) {
+      const fieldMapping = unref(getParams).find(item => item.key === BuiltInVariable.DATE_RANGE)
+      const [start, end] = ((fieldMapping || {}).value || '').split(GROUP_SEPARATOR)
+      const aggregation = Reflect.get(value, BuiltInVariable.SELECT_TIME_AGGREGATION) || {}
+      const result = { ...aggregation, [start]: aggregation.startTs, [end]: aggregation.endTs }
+      Reflect.deleteProperty(result, SelectTimeAggregationFieldEnum.START_TS)
+      Reflect.deleteProperty(result, SelectTimeAggregationFieldEnum.END_TS)
+      Object.assign(value, { ...result, [start]: aggregation.startTs, [end]: aggregation.endTs })
+      Reflect.deleteProperty(value, BuiltInVariable.SELECT_TIME_AGGREGATION)
+    }
+
     return value
     return value
   })
   })
 
 
@@ -168,18 +188,25 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => {
     }
     }
   })
   })
 
 
+  /**
+  * ft 更改设备别名
+  * 修改后的代码在注释之间，并标注好源代码和修改后代码，方便回溯
+  * 源代码   labelField: 'name'
+  * 修改后代码  labelField: 'alias' || 'name'
+  */
   const getSelectDevice = computed<SelectProps>(() => {
   const getSelectDevice = computed<SelectProps>(() => {
     return {
     return {
       ...basicPreset('name'),
       ...basicPreset('name'),
       value: params[BuiltInVariable.ENTITY_ID],
       value: params[BuiltInVariable.ENTITY_ID],
       options: unref(optionsSet[BuiltInVariable.ENTITY_ID]),
       options: unref(optionsSet[BuiltInVariable.ENTITY_ID]),
-      labelField: 'name',
+      labelField: 'alias',
       valueField: 'tbDeviceId',
       valueField: 'tbDeviceId',
       onUpdateValue(value) {
       onUpdateValue(value) {
         params[BuiltInVariable.ENTITY_ID] = value
         params[BuiltInVariable.ENTITY_ID] = value
       }
       }
     }
     }
   })
   })
+  //ft
 
 
   const getSelectDeviceAttr = computed<SelectProps>(() => {
   const getSelectDeviceAttr = computed<SelectProps>(() => {
     return {
     return {
@@ -188,6 +215,7 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => {
       options: unref(optionsSet[BuiltInVariable.KEYS]),
       options: unref(optionsSet[BuiltInVariable.KEYS]),
       labelField: 'name',
       labelField: 'name',
       valueField: 'identifier',
       valueField: 'identifier',
+      multiple: true,
       onUpdateValue(value) {
       onUpdateValue(value) {
         params[BuiltInVariable.KEYS] = value
         params[BuiltInVariable.KEYS] = value
       }
       }
@@ -230,6 +258,15 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => {
     } as InputProps
     } as InputProps
   }
   }
 
 
+  const getSelectTimeAggregation = computed(() => {
+    return {
+      value: params[BuiltInVariable.SELECT_TIME_AGGREGATION],
+      onChange(value: SelectTimeAggregationValueTypw) {
+        params[BuiltInVariable.SELECT_TIME_AGGREGATION] = value
+      }
+    }
+  })
+
   const builtInVariableConfiguration: { [key in BuiltInVariable]?: DynamicFormSchema } = {
   const builtInVariableConfiguration: { [key in BuiltInVariable]?: DynamicFormSchema } = {
     [BuiltInVariable.ORGANIZATION_ID]: {
     [BuiltInVariable.ORGANIZATION_ID]: {
       component: ComponentType.SELECT_TREE,
       component: ComponentType.SELECT_TREE,
@@ -260,9 +297,31 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => {
       component: ComponentType.DATE_PICKER,
       component: ComponentType.DATE_PICKER,
       key: BuiltInVariable.DATE_FIXED,
       key: BuiltInVariable.DATE_FIXED,
       props: getSelectDate
       props: getSelectDate
+    },
+  }
+
+  const moresComponentConfiguration: { [key in BuiltInVariable]?: DynamicFormSchema } = {
+    [BuiltInVariable.DATE_RANGE]: {
+      component: ComponentType.SELECT_TIME_AGGREGATION,
+      key: BuiltInVariable.SELECT_TIME_AGGREGATION,
+      props: getSelectTimeAggregation
     }
     }
   }
   }
 
 
+  const timePeriodRules = (required: boolean, key: string, message: string) => {
+    return [{
+      trigger: ['blur', 'change'],
+      validator() {
+        const record = params[BuiltInVariable.SELECT_TIME_AGGREGATION]
+        if (required && ![record[SelectTimeAggregationFieldEnum.AGG], record[SelectTimeAggregationFieldEnum.INTERVAL], record[SelectTimeAggregationFieldEnum.END_TS], record[SelectTimeAggregationFieldEnum.START_TS]].every(Boolean)) {
+          validFlag.value = false
+          return new Error(`${message}需要填写完整`)
+        }
+        validFlag.value = true
+      }
+    }] as FormItemRule
+  }
+
   const validFlag = ref(true)
   const validFlag = ref(true)
 
 
   const createRules = (required: boolean, key: string, message: string) => {
   const createRules = (required: boolean, key: string, message: string) => {
@@ -278,23 +337,31 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => {
     }] as FormItemRule
     }] as FormItemRule
   }
   }
 
 
-  const toFormSchemas = (builtInVariableKey: string, required: boolean, value: any) => {
+  const uuid = () => Number(Math.random().toString().substring(2)).toString(32)
+  const toFormSchemas = (builtInVariableKey: string, required: boolean, value: any, mores: boolean) => {
     const groupList = (builtInVariableKey || '').split(GROUP_SEPARATOR)
     const groupList = (builtInVariableKey || '').split(GROUP_SEPARATOR)
     return groupList.reduce((prev, next) => {
     return groupList.reduce((prev, next) => {
-      const result = builtInVariableConfiguration[next as BuiltInVariable]
-      const props = unref(result?.props)
+      let result = builtInVariableConfiguration[next as BuiltInVariable]
+      let props = unref(result?.props)
       const name = (unref(builtInVariable) || {})[next as BuiltInVariable]?.itemText
       const name = (unref(builtInVariable) || {})[next as BuiltInVariable]?.itemText
       let schema: DynamicFormSchema
       let schema: DynamicFormSchema
-      if (builtInVariableConfiguration[next as BuiltInVariable]) {
+      if (result) {
+        if (mores) {
+          result = moresComponentConfiguration[next as BuiltInVariable]
+          props = unref(result?.props)
+        }
+
         schema = {
         schema = {
           ...result,
           ...result,
+          // uuid: uuid(),
           props,
           props,
           name,
           name,
           required,
           required,
-          rules: createRules(required, next, name || next)
+          rules: mores ? timePeriodRules(required, next, name || next) : createRules(required, next, name || next)
         } as DynamicFormSchema
         } as DynamicFormSchema
       } else {
       } else {
         schema = {
         schema = {
+          // uuid: uuid(),
           key: value,
           key: value,
           name: value,
           name: value,
           component: ComponentType.INPUT,
           component: ComponentType.INPUT,
@@ -303,7 +370,6 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => {
           rules: createRules(required, value, value)
           rules: createRules(required, value, value)
         } as DynamicFormSchema
         } as DynamicFormSchema
       }
       }
-
       return [...prev, schema]
       return [...prev, schema]
 
 
     }, [] as DynamicFormSchema[])
     }, [] as DynamicFormSchema[])
@@ -311,10 +377,11 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => {
   }
   }
 
 
   const getDynamicFormSchemas = computed<DynamicFormSchema[]>(() => {
   const getDynamicFormSchemas = computed<DynamicFormSchema[]>(() => {
-    return unref(getParams).reduce((prev: DynamicFormSchema[], { key, value, required }) => {
-      const schemas = toFormSchemas(key, required, value)
+    const result = unref(getParams).reduce((prev: DynamicFormSchema[], { key, value, required, mores }) => {
+      const schemas = toFormSchemas(key, required, value, mores)
       return [...prev, ...schemas]
       return [...prev, ...schemas]
     }, [] as DynamicFormSchema[])
     }, [] as DynamicFormSchema[])
+    return result
   })
   })
 
 
   const createForm = async () => {
   const createForm = async () => {
@@ -324,16 +391,23 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => {
     getDeviceOption()
     getDeviceOption()
   }
   }
 
 
-  const setParams = (Params: Recordable = {}) => { 
-    for (const { key, value } of unref(getParams)) {
-      const splitKeys = value ? value.split(GROUP_SEPARATOR) : key.split(GROUP_SEPARATOR)
+  const setParams = (Params: Recordable = {}) => {
+    for (const { key, value, mores } of unref(getParams)) {
+      const splitKeys = value ? value.split(GROUP_SEPARATOR) : (key || '').split(GROUP_SEPARATOR)
       if (isDateComponent(key as BuiltInVariable)) {
       if (isDateComponent(key as BuiltInVariable)) {
         if (key as BuiltInVariable === BuiltInVariable.DATE_FIXED) {
         if (key as BuiltInVariable === BuiltInVariable.DATE_FIXED) {
           params[key] = Params[splitKeys[0]] || null
           params[key] = Params[splitKeys[0]] || null
           continue
           continue
         }
         }
-        const value = [Params[splitKeys[0]], Params[splitKeys[1]]]
-        params[key] = value.every(Boolean) ? value : null
+        if (mores) {
+          const { agg, interval, limit } = Params
+          const startTs = Params[splitKeys[0]]
+          const endTs = Params[splitKeys[1]]
+          params[BuiltInVariable.SELECT_TIME_AGGREGATION] = { agg, interval, startTs, endTs, limit }
+        } else {
+          const value = [Params[splitKeys[0]], Params[splitKeys[1]]]
+          params[key] = value.every(Boolean) ? value : null
+        }
         continue
         continue
       }
       }
       for (const temp of splitKeys) {
       for (const temp of splitKeys) {
@@ -345,11 +419,14 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => {
   const clearParams = () => {
   const clearParams = () => {
     Object.keys(params).forEach(key => {
     Object.keys(params).forEach(key => {
       Reflect.deleteProperty(params, key)
       Reflect.deleteProperty(params, key)
+      // params[key] = null
     })
     })
+    // params[BuiltInVariable.SELECT_TIME_AGGREGATION] = { startTs: null, endTs: null, limit: null, interval: null }
+    params[BuiltInVariable.SELECT_TIME_AGGREGATION] = {}
   }
   }
 
 
   const setDynamicFormValue = (params: Recordable) => {
   const setDynamicFormValue = (params: Recordable) => {
-    setParams(params) 
+    setParams(params)
     getOrgOption()
     getOrgOption()
     getDeviceProfileOption()
     getDeviceProfileOption()
     getDeviceOption()
     getDeviceOption()

@@ -2,10 +2,10 @@
 import { getAllPublicInterface } from '@/api/external/dynamicRequest'
 import { getAllPublicInterface } from '@/api/external/dynamicRequest'
 import { ParamsItemType, PublicInterfaceRecord, PublicInterfaceRequestParams, PublicInterfaceStateEnum } from '@/api/external/dynamicRequest/model';
 import { ParamsItemType, PublicInterfaceRecord, PublicInterfaceRequestParams, PublicInterfaceStateEnum } from '@/api/external/dynamicRequest/model';
 import { SettingItem, SettingItemBox } from '@/components/Pages/ChartItemSetting';
 import { SettingItem, SettingItemBox } from '@/components/Pages/ChartItemSetting';
-import { RequestContentTypeEnum, RequestContentTypeNameEnum } from '@/enums/external/httpEnum';
+import { RequestContentTypeEnum, RequestContentTypeNameEnum, RequestEnum } from '@/enums/external/httpEnum';
 import { RequestBodyEnum, RequestHttpEnum, RequestHttpIntervalEnum, RequestParams, RequestParamsTypeEnum } from '@/enums/httpEnum';
 import { RequestBodyEnum, RequestHttpEnum, RequestHttpIntervalEnum, RequestParams, RequestParamsTypeEnum } from '@/enums/httpEnum';
-import { NCard, NEmpty, NInputGroup, NInputNumber, NScrollbar, NSelect, NTabPane, NTabs, SelectOption } from 'naive-ui';
-import { ref, computed, unref, nextTick } from 'vue'
+import { NCard, NEllipsis, NEmpty, NInputGroup, NInputNumber, NScrollbar, NSelect, NSpace, NTabPane, NTabs, SelectOption } from 'naive-ui';
+import { ref, computed, unref, nextTick, h } from 'vue'
 import { selectTimeOptions, selectTypeOptions } from '../../../index.d';
 import { selectTimeOptions, selectTypeOptions } from '../../../index.d';
 import ParamsTable from '../RequestModal/ParamsTable.vue';
 import ParamsTable from '../RequestModal/ParamsTable.vue';
 import BodyContent from './BodyContent.vue'
 import BodyContent from './BodyContent.vue'
@@ -43,7 +43,14 @@ const getSelectedInterfaceParams = computed(() => {
 
 
 const getPublicInterfaceList = async () => {
 const getPublicInterfaceList = async () => {
   if (unref(publicInterfaceList).length) return
   if (unref(publicInterfaceList).length) return
-  const result = await getAllPublicInterface({ state: PublicInterfaceStateEnum.PUBLISH })
+   /**
+   * ft 更换接口
+   * 修改后的代码在注释之间，并标注好源代码和修改后代码，方便回溯
+   * 源代码  const result = await getAllPublicInterface({ state: PublicInterfaceStateEnum.PUBLISH })
+   * 修改后代码 const result = await getAllPublicInterface()
+   */
+  const result = await getAllPublicInterface()
+  //ft
   publicInterfaceList.value = result
   publicInterfaceList.value = result
 }
 }
 
 
@@ -141,6 +148,30 @@ const setConfigurationData = async (request: ExtraRequestConfigType) => {
   setDynamicFormValue(request)
   setDynamicFormValue(request)
 }
 }
 
 
+  /**
+   * ft 修改在公共接口下拉框里加上接口类型
+   * 修改后的代码在注释之间，并标注好源代码和修改后代码，方便回溯
+   * 源代码 属于新增代码，源代码无
+   * 修改后代码在//ft之间
+   */
+
+const getHttpType = (httpType:RequestEnum, contentType:number) => {
+  if(contentType===0){
+    if (httpType === RequestEnum[httpType]) return RequestEnum[httpType] 
+  }
+  else if (contentType===2) return 'WebSocket'
+}
+
+const renderOption = (option: SelectOption) => {
+  const httpType = getHttpType(option?.requestHttpType as RequestEnum, option?.requestContentType as number)
+  const interfaceTypeName = option?.interfaceType === 'SYSTEM' ? '系统默认' :option?.interfaceType === 'CUSTOM'? '自定义':''
+  return h(NSpace, { justify: 'space-between', style: 'padding: 0 15px; height: 28px; line-height: 28px;' }, () => [
+    h(NEllipsis, null, () => `${!httpType?'':httpType+'/'}${interfaceTypeName}`),
+    h(NEllipsis, null, () => option.interfaceName),
+  ])
+}
+//ft
+
 defineExpose({
 defineExpose({
   getConfigurationData,
   getConfigurationData,
   setConfigurationData,
   setConfigurationData,
@@ -154,10 +185,19 @@ defineExpose({
   <SettingItemBox name="公共接口" :alone="true" :item-right-style="{ gridTemplateColumns: '5fr 2fr 1fr' }">
   <SettingItemBox name="公共接口" :alone="true" :item-right-style="{ gridTemplateColumns: '5fr 2fr 1fr' }">
     <SettingItem name="请求方式 & URL地址">
     <SettingItem name="请求方式 & URL地址">
       <NInputGroup>
       <NInputGroup>
+    <!-- 
+      /**
+        * ft 修改在公共接口下拉框里加上接口类型
+        * 修改后的代码在注释之间，并标注好源代码和修改后代码，方便回溯
+        * 源代码 无
+        * 修改后代码 新增一句 :render-label="renderOption"
+        */
+      -->
         <NSelect v-model:value="selectedPublicInterface" label-field="interfaceName" value-field="id"
         <NSelect v-model:value="selectedPublicInterface" label-field="interfaceName" value-field="id"
           :options="publicInterfaceList" :filter="handleFilter" filterable :reset-menu-on-options-change="false"
           :options="publicInterfaceList" :filter="handleFilter" filterable :reset-menu-on-options-change="false"
-          @update-value="handleSelectedInterfaceChange" size="small">
+          @update-value="handleSelectedInterfaceChange" size="small" :render-label="renderOption">
         </NSelect>
         </NSelect>
+        <!-- ft -->
         <NSelect v-if="requestContentTypeRef !== RequestContentTypeEnum.WEB_SOCKET" v-model:value="requestHttpTypeRef"
         <NSelect v-if="requestContentTypeRef !== RequestContentTypeEnum.WEB_SOCKET" v-model:value="requestHttpTypeRef"
           style="width: 150px;" size="small" :options="(selectTypeOptions as SelectOption[])" :disabled="true" />
           style="width: 150px;" size="small" :options="(selectTypeOptions as SelectOption[])" :disabled="true" />
         <NSelect v-if="requestContentTypeRef === RequestContentTypeEnum.WEB_SOCKET" :disabled="true" style="width: 150px;"
         <NSelect v-if="requestContentTypeRef === RequestContentTypeEnum.WEB_SOCKET" :disabled="true" style="width: 150px;"
@@ -225,6 +265,7 @@ defineExpose({
       </NScrollbar>
       </NScrollbar>
     </NCard>
     </NCard>
   </SettingItemBox>
   </SettingItemBox>
+  <!-- ft -->
 </template>
 </template>
 
 
 <style scoped lang="scss">
 <style scoped lang="scss">

@@ -11,6 +11,9 @@ import { PublicInterfaceForm } from '../PublicInterfaceForm';
 import ComponentConfiguration from './ComponentConfiguration.vue';
 import ComponentConfiguration from './ComponentConfiguration.vue';
 import GlobalPublicConfiguration from './GlobalPublicConfiguration.vue';
 import GlobalPublicConfiguration from './GlobalPublicConfiguration.vue';
 import { createRequestModalContext } from './useRequestModalContext';
 import { createRequestModalContext } from './useRequestModalContext';
+import { useTargetData } from '../../../../hooks/useTargetData.hook';
+import { useFetchTargetData } from '@/hooks/external/useFetchTargetData';
+import { useFilterFn } from '@/hooks/external/useFilterFn';
 
 
 
 
 const requestDataType = ref<RequestDataTypeEnum>(RequestDataTypeEnum.AJAX)
 const requestDataType = ref<RequestDataTypeEnum>(RequestDataTypeEnum.AJAX)
@@ -67,9 +70,26 @@ const getResult = () => {
   return {} as unknown as RequestConfigType
   return {} as unknown as RequestConfigType
 }
 }
 
 
+const { targetData } = useTargetData()
+const { fetchTargetData } = useFetchTargetData()
+// 发送请求
+const sendHandle = async () => {
+  if (!targetData.value?.request || !targetData.value.request.requestUrl) {
+    window['$message'].warning('请先配置请求')
+    return
+  }
+  const res = await fetchTargetData()
+  if (res) {
+    const { value } = useFilterFn(targetData.value.filter, res)
+    targetData.value.option.dataset = value
+    return
+  }
+
+}
+
 const handleSaveAction = async () => {
 const handleSaveAction = async () => {
   if (!(await validate())) return
   if (!(await validate())) return
-  const value = getResult() 
+  const value = getResult()
   if (unref(selectTarget)) {
   if (unref(selectTarget)) {
     chartEditStore.updateComponentList(chartEditStore.fetchTargetIndex(), {
     chartEditStore.updateComponentList(chartEditStore.fetchTargetIndex(), {
       ...unref(selectTarget)!,
       ...unref(selectTarget)!,
@@ -77,6 +97,7 @@ const handleSaveAction = async () => {
     })
     })
   }
   }
   showModal.value = false
   showModal.value = false
+  sendHandle()
 }
 }
 
 
 createRequestModalContext({
 createRequestModalContext({

+export { default as SelectTimeAggregation } from './index.vue'
+
+export interface SelectTimeAggregationValueTypw {
+  timePeriod?: Nullable<number>
+  startTs?: Nullable<number>
+  endTs?: Nullable<number>
+  agg?: Nullable<string>
+  interval?: Nullable<number>
+}
+
+
+export enum SelectTimeAggregationFieldEnum {
+  TIME_PERIOD = 'timePeriod',
+  START_TS = 'startTs',
+  END_TS = 'endTs',
+  AGG = 'agg',
+  INTERVAL = 'interval'
+}
+

+<script lang="ts" setup>
+import { NFormItem, NGi, NGrid, NSelect, NDatePicker, NInputNumber } from 'naive-ui';
+import { defaultIntervalOptions, aggergationOptions } from '../DynamicForm/timeInterval'
+import { unref, computed, ref, watch } from 'vue';
+import { isObject } from '@/utils/external/is';
+
+interface Value {
+  agg?: Nullable<string>
+  interval?: Nullable<number>
+  startTs?: Nullable<number>
+  endTs?: Nullable<number>
+  limit?: Nullable<number>
+}
+
+const props = withDefaults(
+  defineProps<{
+    value?: Value
+  }>(),
+  {
+    value: () => ({})
+  }
+)
+
+const emit = defineEmits<{
+  (e: 'update:value', value: Value): void
+  (e: 'change', value: Value): void
+}>()
+
+
+const timePeriod = ref<Nullable<[number, number]>>(null)
+const agg = ref()
+const interval = ref()
+const limit = ref(7)
+
+const getRangeOptions = (number: number) => {
+  for (let i = 0; i < defaultIntervalOptions.length; i++) {
+    const option = defaultIntervalOptions[i]
+    if (option.id >= number || i === defaultIntervalOptions.length - 1) {
+      return option.linkage
+    }
+
+  }
+}
+
+const getShowLimit = computed(() => {
+  return unref(agg) === 'NONE'
+})
+
+const getIntervalTimeOptions = computed(() => {
+  const [startTs, endTs] = unref(timePeriod) || []
+  if (!startTs || !endTs) return []
+  const diff = Math.abs(startTs - endTs)
+  return getRangeOptions(diff)
+})
+
+const handleTimePerionChange = (value: number[]) => {
+  const [startTs, endTs] = value
+  emit('update:value', { ...props.value, startTs, endTs, interval: null })
+  emit('change', { ...props.value || {}, startTs, endTs, interval: null })
+}
+
+const handleAggChange = (value: string) => {
+  const _value = { ...props.value, agg: value, ...(value === 'NONE' ? { limit: 7 } : {}) }
+  Reflect.deleteProperty(_value, value === 'NONE' ? 'interval' : 'limit')
+  emit('update:value', _value)
+  emit('change', _value)
+}
+
+const handleIntervalChange = (value: number) => {
+  const _value = { ...props.value, interval: value }
+  emit('update:value', _value)
+  emit('change', _value)
+}
+
+const handleLimitChange = (value: Nullable<number>) => {
+  const _value = { ...props.value, limit: value }
+  emit('update:value', _value)
+  emit('change', _value)
+}
+
+watch(() => props.value, (target) => {
+  if (target && isObject(target)) {
+    const { agg: _agg, interval: _interval, startTs, endTs, limit: _limit } = target || {}
+    if (startTs && endTs) {
+      timePeriod.value = [startTs!, endTs!]
+    } else {
+      timePeriod.value = null
+    }
+    agg.value = _agg
+    limit.value = _limit!
+    interval.value = _interval
+  }
+})
+</script>
+
+<template>
+  <NGrid :cols="24">
+    <NGi :span="16">
+      <NFormItem :show-label="false">
+        <NDatePicker v-model:value="timePeriod" type="datetimerange" placeholder="请选择时间范围"
+          @update-value="handleTimePerionChange" clearable></NDatePicker>
+      </NFormItem>
+    </NGi>
+    <NGi :span="4">
+      <NFormItem :show-label="false">
+        <NSelect v-model:value="agg" @update:value="handleAggChange" :options="aggergationOptions" label-field="name"
+          value-field="id" placeholder="聚合方式" clearable></NSelect>
+      </NFormItem>
+    </NGi>
+    <NGi v-if="!getShowLimit" :span="4">
+      <NFormItem :show-label="false">
+        <NSelect v-model:value="interval" @update:value="handleIntervalChange" :options="getIntervalTimeOptions"
+          label-field="name" value-field="id" placeholder="间隔时间" clearable></NSelect>
+      </NFormItem>
+    </NGi>
+    <NGi v-if="getShowLimit" :span="4">
+      <NFormItem :show-label="false">
+        <NInputNumber v-model:value="limit" :default-value="7" @update:value="handleLimitChange"
+          :parse="(input: string) => parseInt(input)" :min="7" :max="50000" :step="1" placeholder="请输入最大条数" />
+      </NFormItem>
+    </NGi>
+  </NGrid>
+</template>

@@ -31,7 +31,7 @@
       </n-tooltip>
       </n-tooltip>
       <n-divider vertical />
       <n-divider vertical />
       <!-- 保存 -->
       <!-- 保存 -->
-      <n-tooltip placement="bottom" trigger="hover">
+      <n-tooltip v-if="!isCustomerUser" placement="bottom" trigger="hover">
         <template #trigger>
         <template #trigger>
           <div class="save-btn">
           <div class="save-btn">
             <n-button size="small" type="primary" ghost @click="dataSyncUpdate()">
             <n-button size="small" type="primary" ghost @click="dataSyncUpdate()">
@@ -64,6 +64,7 @@ import { HistoryStackEnum } from '@/store/modules/chartHistoryStore/chartHistory
 import { useSyncRemote } from '../../../hooks/external/useRemote.hook'
 import { useSyncRemote } from '../../../hooks/external/useRemote.hook'
 import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
 import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
 import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
 import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
+import { useRole } from '@/views/chart/hooks/external/business/useRole'
 
 
 const { LayersIcon, BarChartIcon, PrismIcon, HomeIcon, ArrowBackIcon, ArrowForwardIcon } = icon.ionicons5
 const { LayersIcon, BarChartIcon, PrismIcon, HomeIcon, ArrowBackIcon, ArrowForwardIcon } = icon.ionicons5
 const { setItem } = useChartLayoutStore()
 const { setItem } = useChartLayoutStore()
@@ -71,6 +72,7 @@ const { getLayers, getCharts, getDetails } = toRefs(useChartLayoutStore())
 const chartEditStore = useChartEditStore()
 const chartEditStore = useChartEditStore()
 const chartHistoryStore = useChartHistoryStore()
 const chartHistoryStore = useChartHistoryStore()
 const { dataSyncUpdate } = useSyncRemote()
 const { dataSyncUpdate } = useSyncRemote()
+const { isCustomerUser } = useRole()
 
 
 interface ItemType<T> {
 interface ItemType<T> {
   key: T
   key: T

+import { RoleEnum } from '@/enums/external/roleEnum';
+import { useUserStore } from '@/store/external/modules/user';
+import { computed, unref } from 'vue'; 
+
+export const useRole = () => {
+  const userStore = useUserStore();
+
+  const getRole = computed(() => {
+    return userStore.userInfo?.roles![0] as RoleEnum;
+  });
+
+  const isPlatformAdmin = computed(() => {
+    return unref(getRole) === RoleEnum.PLATFORM_ADMIN;
+  });
+
+  const isCustomerUser = computed(() => {
+    return unref(getRole) === RoleEnum.CUSTOMER_USER;
+  });
+
+  const isTenantAdmin = computed(() => {
+    return unref(getRole) === RoleEnum.TENANT_ADMIN;
+  });
+
+  const isSysadmin = computed(() => {
+    return unref(getRole) === RoleEnum.SYS_ADMIN;
+  });
+
+  return { getRole, isPlatformAdmin, isCustomerUser, isTenantAdmin, isSysadmin };
+};

 import { fetchRouteParamsLocation, JSONStringify, JSONParse } from '@/utils'
 import { fetchRouteParamsLocation, JSONStringify, JSONParse } from '@/utils'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { ProjectInfoEnum } from '@/store/external/modules/projectInfo.d'
 import { ProjectInfoEnum } from '@/store/external/modules/projectInfo.d'
-import { onUnmounted } from 'vue'
+import { onUnmounted, unref } from 'vue'
 import { saveInterval } from '@/settings/designSetting'
 import { saveInterval } from '@/settings/designSetting'
 import throttle from 'lodash/throttle'
 import throttle from 'lodash/throttle'
 import html2canvas from 'html2canvas'
 import html2canvas from 'html2canvas'
@@ -11,6 +11,7 @@ import { SyncEnum } from '@/enums/external/editPageEnum'
 import { useProjectInfoStore } from '@/store/external/modules/projectInfo'
 import { useProjectInfoStore } from '@/store/external/modules/projectInfo'
 import { useSync } from '../useSync.hook'
 import { useSync } from '../useSync.hook'
 import { BaseUpdateContentParams, DateViewConfigurationInfoType } from '@/api/external/contentSave/model/contentModel'
 import { BaseUpdateContentParams, DateViewConfigurationInfoType } from '@/api/external/contentSave/model/contentModel'
+import { useRole } from './business/useRole'
 
 
 /**
 /**
  * * base64转file
  * * base64转file
@@ -37,6 +38,7 @@ export const useSyncRemote = () => {
   const chartEditStore = useChartEditStore()
   const chartEditStore = useChartEditStore()
   const projectInfoStore = useProjectInfoStore()
   const projectInfoStore = useProjectInfoStore()
   const { updateComponent } = useSync()
   const { updateComponent } = useSync()
+  const { isCustomerUser } = useRole()
 
 
   /**
   /**
    * * 赋值全局数据
    * * 赋值全局数据
@@ -71,6 +73,10 @@ export const useSyncRemote = () => {
   // 数据保存
   // 数据保存
   const dataSyncUpdate = throttle(async (updateImg = true) => {
   const dataSyncUpdate = throttle(async (updateImg = true) => {
     if (!fetchRouteParamsLocation()) return
     if (!fetchRouteParamsLocation()) return
+
+    // 客户角色只有查看权限
+    if (unref(isCustomerUser)) return
+
     const { dataViewId, state, organizationId, dataViewName, dataViewContent } = projectInfoStore.getProjectInfo
     const { dataViewId, state, organizationId, dataViewName, dataViewContent } = projectInfoStore.getProjectInfo
 
 
     if (dataViewId === null || dataViewId === '') {
     if (dataViewId === null || dataViewId === '') {

+export const isShareMode = () => {
+  const sharePageReg = /^\/share\/[^/]+\/[^/]+\/[^/]+$/;
+  const { hash } = location;
+  return sharePageReg.test(hash.substring(1));
+};

 <template>
 <template>
   <section>
   <section>
     <preview v-if="!allowLoadPreviewPage" :key="key"></preview>
     <preview v-if="!allowLoadPreviewPage" :key="key"></preview>
+    <NEmpty v-if="isEmpty" style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);" />
     <NModal :show="showModal" :maskClosable="false" :closable="false" style="width: 300px;">
     <NModal :show="showModal" :maskClosable="false" :closable="false" style="width: 300px;">
       <NCard>
       <NCard>
         <NForm @keyup.enter="handleSubmit">
         <NForm @keyup.enter="handleSubmit">
           <NFormItem label="访问令牌">
           <NFormItem label="访问令牌">
-            <NInput v-model:value="accessCredentials" type="password" />
-          </NFormItem>
-          <NFormItem :showLabel="false">
-            <NButton :loading="loading" type="primary" style="width: 100%;" @click="handleSubmit">访问</NButton>
+            <NInputGroup>
+              <NInput v-model:value="accessCredentials" show-password-on="mousedown" type="password"
+                style="width: 70%;" />
+              <NButton :loading="loading" type="primary" style="width: 30%;" @click="handleSubmit">
+                <svg style="transform: rotate(180deg);" t="1682068997810" class="icon" viewBox="0 0 1024 1024"
+                  version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="79416" width="24" height="24">
+                  <path
+                    d="M512 928H128c-19.2 0-32-12.8-32-32V128c0-19.2 12.8-32 32-32h384c19.2 0 32 12.8 32 32s-12.8 32-32 32H160v704h352c19.2 0 32 12.8 32 32s-12.8 32-32 32z"
+                    fill="#fff" p-id="79417" />
+                  <path
+                    d="M534.4 736c-9.6 0-16-3.2-22.4-9.6l-192-192c-12.8-12.8-12.8-32 0-44.8l192-192c12.8-12.8 32-12.8 44.8 0 12.8 12.8 12.8 32 0 44.8L387.2 512l169.6 169.6c12.8 12.8 12.8 32 0 44.8-6.4 6.4-16 9.6-22.4 9.6z"
+                    fill="#fff" p-id="79418" />
+                  <path d="M896 544H342.4c-19.2 0-32-12.8-32-32s12.8-32 32-32H896c19.2 0 32 12.8 32 32s-12.8 32-32 32z"
+                    fill="#fff" p-id="79419" />
+                </svg>
+              </NButton>
+            </NInputGroup>
           </NFormItem>
           </NFormItem>
         </NForm>
         </NForm>
       </NCard>
       </NCard>
@@ -17,11 +31,11 @@
 </template>
 </template>
 
 
 <script setup lang="ts">
 <script setup lang="ts">
-import { NModal, NCard, NForm, NFormItem, NInput, NButton, } from 'naive-ui'
+import { NEmpty, NCard, NForm, NFormItem, NInput, NButton, NInputGroup } from 'naive-ui'
 import { getSessionStorageInfo } from '../preview/utils'
 import { getSessionStorageInfo } from '../preview/utils'
 import type { ChartEditStorageType } from '../preview/index.d'
 import type { ChartEditStorageType } from '../preview/index.d'
 import { SavePageEnum } from '@/enums/editPageEnum'
 import { SavePageEnum } from '@/enums/editPageEnum'
-import { JSONParse, setSessionStorage } from '@/utils'
+import { JSONParse, setSessionStorage, setTitle } from '@/utils'
 import { StorageEnum } from '@/enums/storageEnum'
 import { StorageEnum } from '@/enums/storageEnum'
 import { onMounted, ref, unref } from 'vue'
 import { onMounted, ref, unref } from 'vue'
 import Preview from '../preview/index.vue'
 import Preview from '../preview/index.vue'
@@ -42,7 +56,7 @@ const getToken = async () => {
   const { params } = ROUTE
   const { params } = ROUTE
   const { publicId } = params as Record<'id' | 'publicId', string>
   const { publicId } = params as Record<'id' | 'publicId', string>
   const { token, refreshToken } = await getPublicToken(publicId)
   const { token, refreshToken } = await getPublicToken(publicId)
-  userStore.storeToken(token, refreshToken)
+  userStore.storeShareToken(token, refreshToken)
 }
 }
 
 
 const checkNeedAccessToken = async () => {
 const checkNeedAccessToken = async () => {
@@ -63,6 +77,7 @@ const sharePageHandlerProcess = async () => {
   }
   }
 }
 }
 
 
+const isEmpty = ref(false)
 const getSharePageContentData = async () => {
 const getSharePageContentData = async () => {
   try {
   try {
     const { params } = ROUTE
     const { params } = ROUTE
@@ -70,15 +85,17 @@ const getSharePageContentData = async () => {
     loading.value = true
     loading.value = true
     const res = await getShareContentData({ id, accessCredentials: unref(accessCredentials) })
     const res = await getShareContentData({ id, accessCredentials: unref(accessCredentials) })
     const { dataViewContent, dataViewName, dataViewId } = res.data
     const { dataViewContent, dataViewName, dataViewId } = res.data
-    const content = JSONParse(dataViewContent.content) as ChartEditStorageType
+    if (!dataViewContent.content) isEmpty.value = true
+    const content = JSONParse(dataViewContent.content || '{}') as ChartEditStorageType
     if (content) {
     if (content) {
       const { editCanvasConfig, requestGlobalConfig, componentList } = content
       const { editCanvasConfig, requestGlobalConfig, componentList } = content
       chartEditStore.editCanvasConfig = editCanvasConfig
       chartEditStore.editCanvasConfig = editCanvasConfig
       chartEditStore.requestGlobalConfig = requestGlobalConfig
       chartEditStore.requestGlobalConfig = requestGlobalConfig
       chartEditStore.componentList = componentList
       chartEditStore.componentList = componentList
     }
     }
+    setTitle(dataViewName || '')
     showModal.value = false
     showModal.value = false
-    allowLoadPreviewPage.value = false
+    allowLoadPreviewPage.value = unref(isEmpty)
   } catch (error) {
   } catch (error) {
     console.log(error)
     console.log(error)
   } finally {
   } finally {

@@ -20,7 +20,8 @@
     ],
     ],
     "typeRoots": [
     "typeRoots": [
       "./node_modules/@types/",
       "./node_modules/@types/",
-      "./types"
+      "./types",
+      "./types/external"
     ],
     ],
     "paths": {
     "paths": {
       "@/*": [
       "@/*": [

@@ -21,6 +21,8 @@ export interface RequestOptions {
   ignoreCancelToken?: boolean;
   ignoreCancelToken?: boolean;
   // Whether to send token in header
   // Whether to send token in header
   withToken?: boolean;
   withToken?: boolean;
+  // Carry and share token 携带分享的访问令牌
+  withShareToken?: boolean
 }
 }
 
 
 export interface Result<T = any> {
 export interface Result<T = any> {