Merge branch 'main_dev' into 'main'

thingskit1.1.0 version merge

See merge request yunteng/thingskit-front!579

@@ -39,3 +39,6 @@ VITE_GLOB_ALARM_NOTIFY_POLLING_INTERVAL_TIME = 500000
 
 
 # Alarm Notify Auto Close Time Unit is Second
 # Alarm Notify Auto Close Time Unit is Second
 VITE_GLOB_ALARM_NOTIFY_DURATION = 5
 VITE_GLOB_ALARM_NOTIFY_DURATION = 5
+
+# Should Disabled Task Center Execute Interval Unit (Second)
+VITE_GLOB_DISABLED_TASK_CENTER_EXECUTE_INTERVAL_UNIT_SECOND = false

-# Whether to open mock
-VITE_GLOB_USE_MOCK = false
-
-# public path
-VITE_GLOB_PUBLIC_PATH = /
-
-# Delete console
-VITE_GLOB_DROP_CONSOLE = true
-
-# Whether to enable gzip or brotli compression
-# Optional: gzip | brotli | none
-# If you need multiple forms, you can use `,` to separate
-VITE_GLOB_BUILD_COMPRESS = 'gzip'
-
-# Whether to delete origin files when using compress, default false
-VITE_GLOB_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false
-
-# Basic interface address SPA
-VITE_GLOB_API_URL=http://122.9.141.195:8080/api
-
-# File upload address， optional
-# It can be forwarded by nginx or write the actual address directly
-VITE_GLOB_UPLOAD_URL=http://122.9.141.195:8080/api/yt/oss/upload
-
-# Interface prefix
-VITE_GLOB_API_URL_PREFIX=/yt
-
-# Whether to enable image compression
-VITE_GLOB_USE_IMAGEMIN= false
-
-# use pwa
-VITE_USE_PWA = false
-
-# Is it compatible with older browsers
-VITE_LEGACY = true
-
-# 实时数据的ws地址
-VITE_GLOB_WEB_SOCKET = ws://122.9.141.195:8080/api/ws/plugins/telemetry?token=
-
-#configuration
-VITE_GLOB_CONFIGURATION = /thingskit-scada
-
-# 大屏设计器
-VITE_GLOB_LARGE_DESIGNER = /large-designer
-
-# Content Security Policy
-VITE_GLOB_CONTENT_SECURITY_POLICY = false
-
-# Alarm Notify Polling Interval Time
-VITE_GLOB_ALARM_NOTIFY_POLLING_INTERVAL_TIME = 60000
-
-# Alarm Notify Auto Close Time Unit is Second
-VITE_GLOB_ALARM_NOTIFY_DURATION = 5
+# Whether to open mock
+VITE_GLOB_USE_MOCK = false
+
+# public path
+VITE_GLOB_PUBLIC_PATH = /
+
+# Delete console
+VITE_GLOB_DROP_CONSOLE = true
+
+# Whether to enable gzip or brotli compression
+# Optional: gzip | brotli | none
+# If you need multiple forms, you can use `,` to separate
+VITE_GLOB_BUILD_COMPRESS = 'gzip'
+
+# Whether to delete origin files when using compress, default false
+VITE_GLOB_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false
+
+# Basic interface address SPA
+VITE_GLOB_API_URL=http://localhost:8080/api
+
+# File upload address， optional
+# It can be forwarded by nginx or write the actual address directly
+VITE_GLOB_UPLOAD_URL=http://localhost:8080/api/yt/oss/upload
+
+# Interface prefix
+VITE_GLOB_API_URL_PREFIX=/yt
+
+# Whether to enable image compression
+VITE_GLOB_USE_IMAGEMIN= false
+
+# use pwa
+VITE_USE_PWA = false
+
+# Is it compatible with older browsers
+VITE_LEGACY = true
+
+# 实时数据的ws地址
+VITE_GLOB_WEB_SOCKET = ws://localhost:8080/api/ws/plugins/telemetry?token=
+
+#configuration
+VITE_GLOB_CONFIGURATION = /thingskit-scada
+
+# 大屏设计器
+VITE_GLOB_LARGE_DESIGNER = /large-designer
+
+# Content Security Policy
+VITE_GLOB_CONTENT_SECURITY_POLICY = false
+
+# Alarm Notify Polling Interval Time
+VITE_GLOB_ALARM_NOTIFY_POLLING_INTERVAL_TIME = 60000
+
+# Alarm Notify Auto Close Time Unit is Second
+VITE_GLOB_ALARM_NOTIFY_DURATION = 5
+
+# Should Disabled Task Center Execute Interval Unit (Second)
+VITE_GLOB_DISABLED_TASK_CENTER_EXECUTE_INTERVAL_UNIT_SECOND = false

@@ -16,6 +16,7 @@ import {
   UpdateDataComponentParams,
   UpdateDataComponentParams,
 } from './model';
 } from './model';
 import { defHttp } from '/@/utils/http/axios';
 import { defHttp } from '/@/utils/http/axios';
+import { isShareMode } from '/@/views/sys/share/hook';
 
 
 enum DataBoardUrl {
 enum DataBoardUrl {
   GET_DATA_BOARD = '/data_board',
   GET_DATA_BOARD = '/data_board',
@@ -224,7 +225,7 @@ export const sendCommandOneway = (params: SendCommandParams) => {
       url: `${SendCommand.ONEWAY}/${params.deviceId}`,
       url: `${SendCommand.ONEWAY}/${params.deviceId}`,
       params: params.value,
       params: params.value,
     },
     },
-    { joinPrefix: false }
+    { joinPrefix: false, withShareToken: isShareMode() }
   );
   );
 };
 };
 
 

@@ -86,6 +86,12 @@ export interface DataSource {
   deviceName: string;
   deviceName: string;
   deviceProfileId: string;
   deviceProfileId: string;
   tbDeviceId: string;
   tbDeviceId: string;
+  customCommand: {
+    transportType?: string;
+    commandType?: string;
+    command?: string;
+    service?: string;
+  };
 
 
   // front usage
   // front usage
   uuid?: string;
   uuid?: string;
@@ -93,6 +99,7 @@ export interface DataSource {
   height?: number;
   height?: number;
   radio?: RadioRecord;
   radio?: RadioRecord;
   deviceType?: DeviceTypeEnum;
   deviceType?: DeviceTypeEnum;
+  [key: string]: any;
 }
 }
 
 
 export interface DataComponentRecord {
 export interface DataComponentRecord {

@@ -50,6 +50,8 @@ export interface DeviceModel {
   deviceType: DeviceTypeEnum;
   deviceType: DeviceTypeEnum;
   organizationId: string;
   organizationId: string;
   customerId?: string;
   customerId?: string;
+  alias?: string;
+  tbDeviceId?: string;
 }
 }
 
 
 export interface DeviceProfileModel {
 export interface DeviceProfileModel {

@@ -10,6 +10,8 @@ export type SchedueParam = {
   data?: any;
   data?: any;
   code?: number;
   code?: number;
   jobId?: string;
   jobId?: string;
+  startTime?: number;
+  endTime?: number;
 };
 };
 
 
 export interface ReportModel {
 export interface ReportModel {

@@ -30,6 +30,38 @@ export const getMenuList = (args?: number) => {
   } catch (e) {}
   } catch (e) {}
 };
 };
 
 
+/**
+ * @description 获取自身的权限
+ * @param args
+ * @returns
+ */
+export const getMeMenuList = (args?: number) => {
+  try {
+    return defHttp.get<getMenuListResultModel>({
+      url: Api.GetMenuList,
+      params: {
+        needButton: args == 1 ? false : null,
+      },
+    });
+  } catch (e) {}
+};
+
+/**
+ * @description 获取超级管理员菜单
+ * @param args
+ * @returns
+ */
+export const getAdminMenuList = (args?: number) => {
+  try {
+    return defHttp.get<getMenuListResultModel>({
+      url: Api.SysAdminMenuList,
+      params: {
+        needButton: args == 1 ? false : null,
+      },
+    });
+  } catch (e) {}
+};
+
 export const delMenu = (menuIds: string[]) => {
 export const delMenu = (menuIds: string[]) => {
   const url = Api.BaseMenuUrl;
   const url = Api.BaseMenuUrl;
   return defHttp.delete({ url: url, data: menuIds });
   return defHttp.delete({ url: url, data: menuIds });

@@ -42,7 +42,7 @@ export interface MenuRecord {
   component: string;
   component: string;
   meta: Meta;
   meta: Meta;
   disabled?: boolean;
   disabled?: boolean;
-  isDictCompareDisabled?: boolean;
+  show?: boolean;
   icon?: string;
   icon?: string;
   title?: string;
   title?: string;
   key?: string;
   key?: string;

 import { defHttp } from '/@/utils/http/axios';
 import { defHttp } from '/@/utils/http/axios';
 import { ViewTypeEnum } from '/@/views/sys/share/config/config';
 import { ViewTypeEnum } from '/@/views/sys/share/config/config';
+import { isShareMode } from '/@/views/sys/share/hook';
 
 
 enum Api {
 enum Api {
   CHECK = '/share/check',
   CHECK = '/share/check',
@@ -8,9 +9,14 @@ enum Api {
 }
 }
 
 
 export const checkShareAccessToken = (type: ViewTypeEnum, id: string) => {
 export const checkShareAccessToken = (type: ViewTypeEnum, id: string) => {
-  return defHttp.get<Record<'data', boolean>>({
-    url: `${Api.CHECK}/${type}/${id}`,
-  });
+  return defHttp.get<Record<'data', boolean>>(
+    {
+      url: `${Api.CHECK}/${type}/${id}`,
+    },
+    {
+      withShareToken: isShareMode(),
+    }
+  );
 };
 };
 
 
 export const sharePageLogin = (publicId: string) => {
 export const sharePageLogin = (publicId: string) => {
@@ -21,14 +27,20 @@ export const sharePageLogin = (publicId: string) => {
     },
     },
     {
     {
       joinPrefix: false,
       joinPrefix: false,
+      withShareToken: isShareMode(),
     }
     }
   );
   );
 };
 };
 
 
 export const getShareContent = (record: Record<'accessCredentials' | 'id', string>) => {
 export const getShareContent = (record: Record<'accessCredentials' | 'id', string>) => {
   const { id, accessCredentials } = record;
   const { id, accessCredentials } = record;
-  return defHttp.get({
-    url: `${Api.SHARE_CONTENT}/${ViewTypeEnum.DATA_BOARD}/share_data/${id}`,
-    params: { accessCredentials },
-  });
+  return defHttp.get(
+    {
+      url: `${Api.SHARE_CONTENT}/${ViewTypeEnum.DATA_BOARD}/share_data/${id}`,
+      params: { accessCredentials },
+    },
+    {
+      withShareToken: isShareMode(),
+    }
+  );
 };
 };

@@ -81,11 +81,8 @@ export const genModbusCommand = (data: GenModbusCommandType) => {
 };
 };
 
 
 export const immediateExecute = (data: ImmediateExecuteTaskType) => {
 export const immediateExecute = (data: ImmediateExecuteTaskType) => {
-  return defHttp.post<Record<'data', boolean>>(
-    {
-      url: Api.IMMEDIATE_EXECUTE,
-      params: data,
-    },
-    { joinParamsToUrl: true }
-  );
+  return defHttp.post<Record<'data', boolean>>({
+    url: Api.IMMEDIATE_EXECUTE,
+    params: data,
+  });
 };
 };

@@ -47,6 +47,7 @@ export interface TaskRecordType extends CreateTaskRecordType {
   enabled: boolean;
   enabled: boolean;
   state: number;
   state: number;
   lastExecuteTime?: number;
   lastExecuteTime?: number;
+  lastExecuteStr?: string;
   tkDeviceTaskCenter?: {
   tkDeviceTaskCenter?: {
     allowState: number;
     allowState: number;
     taskCenterId: string;
     taskCenterId: string;

@@ -34,6 +34,9 @@ enum Api {
   getTenantProfile = '/tenant_profiles',
   getTenantProfile = '/tenant_profiles',
   deleteTenantProfile = '/tenantProfile',
   deleteTenantProfile = '/tenantProfile',
   setTenantProfile = '/tenantProfile',
   setTenantProfile = '/tenantProfile',
+  getTenantPageList = '/admin/all/tenants',
+  getTenantAllPageList = '/admin/',
+  deleteTenantProfileByCheckPass = '/tenant_profiles/allow/',
 }
 }
 
 
 export async function deleteTenantProfileApi(ids: string) {
 export async function deleteTenantProfileApi(ids: string) {
@@ -155,3 +158,20 @@ export function getTenantRoles(tenantCode: string) {
     url: Api.getTenantRoles,
     url: Api.getTenantRoles,
   });
   });
 }
 }
+
+export function getTenantPageList() {
+  return defHttp.get({
+    url: Api.getTenantPageList,
+  });
+}
+
+export function getTenantAllPageLists(tenantId) {
+  return defHttp.get({
+    url: `${Api.getTenantAllPageList}${tenantId}/all/tenant_admin`,
+  });
+}
+export function deleteTenantProfileByCheckPassApi(tenantProfileId) {
+  return defHttp.get({
+    url: `${Api.deleteTenantProfileByCheckPass}${tenantProfileId}/delete`,
+  });
+}

@@ -39,6 +39,7 @@ export interface TenantPageRequestParams extends BaseQueryParams {
 }
 }
 
 
 export interface TenantAdminPageRequestParams extends BaseQueryParams {
 export interface TenantAdminPageRequestParams extends BaseQueryParams {
+  [x: string]: any;
   realName?: string;
   realName?: string;
   tenantId?: string;
   tenantId?: string;
   items?: string[];
   items?: string[];

-<svg t="1671442803003" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4002" width="200" height="200"><path d="M0 0m178.086957 0l667.826086 0q178.086957 0 178.086957 178.086957l0 667.826086q0 178.086957-178.086957 178.086957l-667.826086 0q-178.086957 0-178.086957-178.086957l0-667.826086q0-178.086957 178.086957-178.086957Z" fill="#2E7BFC" p-id="4003"></path><path d="M758.717217 394.373565v268.866783l-238.191304 134.455652v-268.911304l124.14887-70.054957v94.497391l51.956869-29.985391V429.412174l62.107826-35.038609z m-493.434434 0l238.191304 134.433392v268.866782l-238.191304-134.433391V394.373565zM512 226.304l246.717217 139.241739L512 504.787478l-246.717217-139.241739L512 226.326261z" fill="#FFFFFF" p-id="4004"></path></svg>
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1682599359349" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="30418" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400"><path d="M482.7904 529.6384H256a10.24 10.24 0 0 0-10.24 10.24V768a10.24 10.24 0 0 0 10.24 10.24h226.7904a10.24 10.24 0 0 0 10.24-10.24v-228.1216a10.24 10.24 0 0 0-10.24-10.24z m-9.0624 218.7264a10.24 10.24 0 0 1-10.24 10.24h-187.8528a10.24 10.24 0 0 1-10.24-10.24v-188.5184a10.24 10.24 0 0 1 10.24-10.24h187.8528a10.24 10.24 0 0 1 10.24 10.24v188.5184zM768 529.6384h-226.7904a10.24 10.24 0 0 0-10.24 10.24V768a10.24 10.24 0 0 0 10.24 10.24H768a10.24 10.24 0 0 0 10.24-10.24v-228.1216a10.24 10.24 0 0 0-10.24-10.24z m-9.3952 218.7264a10.24 10.24 0 0 1-10.24 10.24h-187.8528a10.24 10.24 0 0 1-10.24-10.24v-188.5184a10.24 10.24 0 0 1 10.24-10.24h187.8528a10.24 10.24 0 0 1 10.24 10.24v188.5184zM482.7904 245.76H256a10.24 10.24 0 0 0-10.24 10.24v228.1216a10.24 10.24 0 0 0 10.24 10.24h226.7904a10.24 10.24 0 0 0 10.24-10.24V256a10.24 10.24 0 0 0-10.24-10.24z m-9.0624 218.3936a10.24 10.24 0 0 1-10.24 10.24h-187.8528a10.24 10.24 0 0 1-10.24-10.24v-188.5184a10.24 10.24 0 0 1 10.24-10.24h187.8528a10.24 10.24 0 0 1 10.24 10.24v188.5184z" fill="#608DF5" p-id="30419"></path><path d="M768 245.76h-226.7904a10.24 10.24 0 0 0-10.24 10.24v228.1216a10.24 10.24 0 0 0 10.24 10.24H768a10.24 10.24 0 0 0 10.24-10.24V256a10.24 10.24 0 0 0-10.24-10.24z m-9.3952 218.3936a10.24 10.24 0 0 1-10.24 10.24h-187.8528a10.24 10.24 0 0 1-10.24-10.24v-188.5184a10.24 10.24 0 0 1 10.24-10.24h187.8528a10.24 10.24 0 0 1 10.24 10.24v188.5184z" fill="#E9895D" p-id="30420"></path></svg>

@@ -3,24 +3,32 @@ import { Rule } from '/@/components/Form';
 export { default as JSONEditor } from './index.vue';
 export { default as JSONEditor } from './index.vue';
 
 
 export const parseStringToJSON = <T = Recordable>(value: string) => {
 export const parseStringToJSON = <T = Recordable>(value: string) => {
+  let valid = false;
   try {
   try {
     const json = JSON.parse(value) as T;
     const json = JSON.parse(value) as T;
-    return { json, valid: true };
+    typeof json === 'object' ? (valid = true) : (valid = false);
+    return { json, valid };
   } catch (error) {
   } catch (error) {
-    return { json: null, valid: false };
+    return { json: null, valid };
   }
   }
 };
 };
 
 
-export const JSONEditorValidator = (message = 'json格式校验失败'): Rule[] => {
+export const JSONEditorValidator = (
+  message = 'JSON格式校验失败',
+  noEmpty = false,
+  emptyMessage = 'JSON不能为空对象'
+): Rule[] => {
   return [
   return [
     {
     {
       validateTrigger: 'blur',
       validateTrigger: 'blur',
       validator(_rule: Rule, value: any, _callback: Fn) {
       validator(_rule: Rule, value: any, _callback: Fn) {
-        const { valid } = parseStringToJSON(value);
+        const { valid, json } = parseStringToJSON(value);
         if (valid) {
         if (valid) {
+          if (noEmpty && json && !Object.keys(json).length) return Promise.reject(emptyMessage);
           return Promise.resolve();
           return Promise.resolve();
+        } else {
+          return Promise.reject(message);
         }
         }
-        return Promise.reject(message);
       },
       },
     },
     },
   ];
   ];

 <script lang="ts" setup>
 <script lang="ts" setup>
-  import { ref } from 'vue';
+  import { ref, watch } from 'vue';
   import JSONEditor, { JSONEditorOptions } from 'jsoneditor';
   import JSONEditor, { JSONEditorOptions } from 'jsoneditor';
   import 'jsoneditor/dist/jsoneditor.min.css';
   import 'jsoneditor/dist/jsoneditor.min.css';
   import { unref } from 'vue';
   import { unref } from 'vue';
@@ -18,6 +18,7 @@
     defineProps<{
     defineProps<{
       value?: string;
       value?: string;
       options?: JSONEditorOptions;
       options?: JSONEditorOptions;
+      height?: number;
     }>(),
     }>(),
     {
     {
       options: () =>
       options: () =>
@@ -26,6 +27,7 @@
           mainMenuBar: false,
           mainMenuBar: false,
           statusBar: false,
           statusBar: false,
         } as JSONEditorOptions),
         } as JSONEditorOptions),
+      height: 150,
     }
     }
   );
   );
 
 
@@ -40,6 +42,8 @@
 
 
   const editoreRef = ref<JSONEditor>();
   const editoreRef = ref<JSONEditor>();
 
 
+  const isFocus = ref(false);
+
   const handleChange = (value: any) => {
   const handleChange = (value: any) => {
     emit(EventEnum.UPDATE_VALUE, value, unref(editoreRef));
     emit(EventEnum.UPDATE_VALUE, value, unref(editoreRef));
     emit(EventEnum.CHANGE, value, unref(editoreRef));
     emit(EventEnum.CHANGE, value, unref(editoreRef));
@@ -54,8 +58,14 @@
     return {
     return {
       ...options,
       ...options,
       onChangeText: handleChange,
       onChangeText: handleChange,
-      onBlur: (event: Event) => handleEmit(event, EventEnum.BLUR),
-      onFocus: (event: Event) => handleEmit(event, EventEnum.FOCUS),
+      onBlur: (event: Event) => {
+        isFocus.value = false;
+        handleEmit(event, EventEnum.BLUR);
+      },
+      onFocus: (event: Event) => {
+        isFocus.value = true;
+        handleEmit(event, EventEnum.FOCUS);
+      },
     } as JSONEditorOptions;
     } as JSONEditorOptions;
   });
   });
 
 
@@ -63,15 +73,16 @@
     editoreRef.value = new JSONEditor(unref(jsonEditorElRef), unref(getOptions));
     editoreRef.value = new JSONEditor(unref(jsonEditorElRef), unref(getOptions));
   };
   };
 
 
-  // watch(
-  //   () => props.value,
-  //   (target) => {
-  //     unref(editoreRef)?.setText(target || '');
-  //   },
-  //   {
-  //     immediate: true,
-  //   }
-  // );
+  watch(
+    () => props.value,
+    (target) => {
+      if (unref(isFocus)) return;
+      unref(editoreRef)?.setText(target || '');
+    },
+    {
+      immediate: true,
+    }
+  );
 
 
   const get = (): string => {
   const get = (): string => {
     return unref(editoreRef)?.getText() || '';
     return unref(editoreRef)?.getText() || '';
@@ -97,7 +108,7 @@
 </script>
 </script>
 
 
 <template>
 <template>
-  <div class="p-2 bg-gray-200">
+  <div class="p-2 bg-gray-200" :style="{ height: `${height}px` }">
     <div ref="jsonEditorElRef" class="jsoneditor"></div>
     <div ref="jsonEditorElRef" class="jsoneditor"></div>
   </div>
   </div>
 </template>
 </template>
@@ -108,6 +119,11 @@
 
 
     :deep(.jsoneditor) {
     :deep(.jsoneditor) {
       border: none !important;
       border: none !important;
+
+      .ace-jsoneditor,
+      textarea.jsoneditor-text {
+        min-height: auto;
+      }
     }
     }
   }
   }
 </style>
 </style>

@@ -67,8 +67,8 @@
     initVal();
     initVal();
   });
   });
 
 
-  function initVal() {
-    if (props?.type) getOptions(props?.type);
+  async function initVal() {
+    if (props?.type) await getOptions(props?.type);
     if (props?.value) for (let i in props.value) Reflect.set(valueObj, i, props.value[i]);
     if (props?.value) for (let i in props.value) Reflect.set(valueObj, i, props.value[i]);
   }
   }
 
 

@@ -279,7 +279,6 @@
     setSelectedOptions,
     setSelectedOptions,
     setSelectedTotal,
     setSelectedTotal,
     reloadPending,
     reloadPending,
-    reloadPending,
     reloadSelected,
     reloadSelected,
   };
   };
 
 
@@ -408,7 +407,7 @@
           :key="item.value"
           :key="item.value"
         >
         >
           <span>
           <span>
-            {{ item.label }}
+            {{ item.alias || item.name }}
           </span>
           </span>
         </Tag>
         </Tag>
         <Tag class="!px-2 !py-1 !bg-gray-50 !border-gray-100" v-if="getSurplusOptionsLength">
         <Tag class="!px-2 !py-1 !bg-gray-50 !border-gray-100" v-if="getSurplusOptionsLength">

@@ -13,6 +13,7 @@
   import { Divider, Button } from 'ant-design-vue';
   import { Divider, Button } from 'ant-design-vue';
   import { OpenModalMode, OpenModalParams, StructRecord } from './type';
   import { OpenModalMode, OpenModalParams, StructRecord } from './type';
   import { cloneDeep } from 'lodash-es';
   import { cloneDeep } from 'lodash-es';
+  import { isArray } from '/@/utils/is';
 
 
   const emit = defineEmits(['update:value']);
   const emit = defineEmits(['update:value']);
 
 
@@ -30,7 +31,8 @@
 
 
   const getValue = computed<StructRecord[]>(() => {
   const getValue = computed<StructRecord[]>(() => {
     const { value } = props;
     const { value } = props;
-    return value.map((item) => {
+
+    return (isArray(value) ? value : []).map((item) => {
       return {
       return {
         ...(item as StructRecord),
         ...(item as StructRecord),
         ...((item as StructRecord).id ? {} : { id: buildUUID() }),
         ...((item as StructRecord).id ? {} : { id: buildUUID() }),

@@ -60,7 +60,7 @@
   });
   });
 
 
   const validateRepeat = (value: StructRecord, valueList: StructRecord[]) => {
   const validateRepeat = (value: StructRecord, valueList: StructRecord[]) => {
-    return valueList.filter((item) => item.identifier === value.identifier).length >= 1;
+    return valueList.filter((item) => item.identifier === value.identifier).length > 1;
   };
   };
 
 
   const handleSubmit = async () => {
   const handleSubmit = async () => {

@@ -20,7 +20,7 @@ export const validateValueRange = (_rule, value: Record<'min' | 'max', number>,
   return Promise.resolve();
   return Promise.resolve();
 };
 };
 
 
-export const validateJSON = (_rule, value: ModelOfMatterParams[], _callback) => {
+export const validateJSON = (_rule, value = [] as ModelOfMatterParams[], _callback) => {
   if (value.length) {
   if (value.length) {
     return Promise.resolve();
     return Promise.resolve();
   }
   }
@@ -65,7 +65,7 @@ export const formSchemas = (hasStructForm: boolean): FormSchema[] => {
       },
       },
       defaultValue: 'INT',
       defaultValue: 'INT',
       componentProps: ({ formActionType }) => {
       componentProps: ({ formActionType }) => {
-        const { updateSchema } = formActionType;
+        const { updateSchema, setFieldsValue } = formActionType;
         return {
         return {
           placeholder: '请选择数据类型',
           placeholder: '请选择数据类型',
           api: async (params: Recordable) => {
           api: async (params: Recordable) => {
@@ -86,13 +86,15 @@ export const formSchemas = (hasStructForm: boolean): FormSchema[] => {
           valueField: 'itemValue',
           valueField: 'itemValue',
           getPopupContainer: () => document.body,
           getPopupContainer: () => document.body,
           onChange: (value: string) => {
           onChange: (value: string) => {
-            value === DataTypeEnum.IS_STRUCT &&
+            if (value == DataTypeEnum.IS_STRUCT) {
               updateSchema({
               updateSchema({
                 field: FormField.SPECS_LIST,
                 field: FormField.SPECS_LIST,
                 componentProps: {
                 componentProps: {
                   hasStructForm: true,
                   hasStructForm: true,
                 },
                 },
               });
               });
+              setFieldsValue({ [FormField.SPECS_LIST]: [] });
+            }
           },
           },
         };
         };
       },
       },

@@ -127,4 +127,6 @@ export type ComponentType =
   | 'ProductPicker'
   | 'ProductPicker'
   | 'PollCommandInput'
   | 'PollCommandInput'
   | 'RegisterAddressInput'
   | 'RegisterAddressInput'
-  | 'ControlGroup';
+  | 'ControlGroup'
+  | 'JSONEditor'
+  | 'OrgTreeSelect';

+<script lang="ts" setup>
+  import { ReloadOutlined } from '@ant-design/icons-vue';
+  import { Button, List, Space, Tooltip } from 'ant-design-vue';
+  import { reactive } from 'vue';
+  import { ref } from 'vue';
+  import { BasicForm, useForm } from '../../Form';
+  import { basicListProps } from './props';
+  import { ExtractPropTypes } from 'vue';
+  defineProps<ExtractPropTypes<typeof basicListProps>>();
+
+  const [registerForm] = useForm({
+    schemas: [
+      {
+        field: '123',
+        label: 'test',
+        component: 'Input',
+      },
+    ],
+    labelWidth: 100,
+    layout: 'inline',
+    baseColProps: { span: 8 },
+    showAdvancedButton: true,
+    compact: true,
+  });
+
+  const listElRef = ref<Nullable<ComponentElRef>>(null);
+
+  const pagination = reactive({ size: 'small' });
+
+  const loading = ref(false);
+
+  const dataSource = ref([]);
+
+  const getDataSource = () => {};
+</script>
+
+<template>
+  <section class="basic-list-container">
+    <section class="mb-4 bg-light-50 p-2 x dark:text-gray-300 dark:bg-dark-900">
+      <BasicForm @register="registerForm" />
+    </section>
+    <section class="bg-light-50 p-2 x dark:text-gray-300 dark:bg-dark-900">
+      <List
+        ref="listElRef"
+        :dataSource="dataSource"
+        :pagination="pagination"
+        :grid="{ gutter: 16, xs: 1, sm: 1, md: 1, lg: 2, xl: 2, xxl: 3, column: 3 }"
+        :loading="loading"
+      >
+        <template #header>
+          <section class="flex px-5 justify-between gap-4 min-h-12 items-center">
+            <div class="text-lg font-semibold">
+              <span>任务列表</span>
+            </div>
+            <Space>
+              <slot name="toolbar"></slot>
+              <Tooltip title="刷新">
+                <Button type="primary" @click="getDataSource">
+                  <ReloadOutlined :spin="loading" />
+                </Button>
+              </Tooltip>
+            </Space>
+          </section>
+        </template>
+        <template #renderItem="{ item }">
+          <List.Item :key="item.id">
+            <slot name="item" :item="item"></slot>
+          </List.Item>
+        </template>
+      </List>
+    </section>
+  </section>
+</template>
+
+<style lang="less" scoped>
+  .basic-list-container {
+    :deep(.ant-list-header) {
+      padding-top: 0;
+      padding-bottom: 8px;
+    }
+  }
+</style>

+import type { ComputedRef, Slots } from 'vue';
+import type { BasicTableProps, FetchParams } from '../types/table';
+import { unref, computed } from 'vue';
+import type { FormProps } from '/@/components/Form';
+import { isFunction } from '/@/utils/is';
+
+export function useTableForm(
+  propsRef: ComputedRef<BasicTableProps>,
+  slots: Slots,
+  fetch: (opt?: FetchParams | undefined) => Promise<void>,
+  getLoading: ComputedRef<boolean | undefined>
+) {
+  const getFormProps = computed((): Partial<FormProps> => {
+    const { formConfig } = unref(propsRef);
+    const { submitButtonOptions } = formConfig || {};
+    return {
+      showAdvancedButton: true,
+      ...formConfig,
+      submitButtonOptions: { loading: unref(getLoading), ...submitButtonOptions },
+      compact: true,
+    };
+  });
+
+  const getFormSlotKeys: ComputedRef<string[]> = computed(() => {
+    const keys = Object.keys(slots);
+    return keys
+      .map((item) => (item.startsWith('form-') ? item : null))
+      .filter((item) => !!item) as string[];
+  });
+
+  function replaceFormSlotKey(key: string) {
+    if (!key) return '';
+    return key?.replace?.(/form\-/, '') ?? '';
+  }
+
+  function handleSearchInfoChange(info: Recordable) {
+    const { handleSearchInfoFn } = unref(propsRef);
+    if (handleSearchInfoFn && isFunction(handleSearchInfoFn)) {
+      info = handleSearchInfoFn(info) || info;
+    }
+    fetch({ searchInfo: info, page: 1 });
+  }
+
+  return {
+    getFormProps,
+    replaceFormSlotKey,
+    getFormSlotKeys,
+    handleSearchInfoChange,
+  };
+}

+import { FormProps } from '../../Form';
+
+export const basicListProps = {
+  immediate: {
+    type: Boolean,
+    default: true,
+  },
+  searchInfo: {
+    type: Object as PropType<Recordable>,
+  },
+  formConfig: {
+    type: Object as PropType<Partial<FormProps>>,
+    default: null,
+  },
+  title: {
+    type: String,
+  },
+  titleHelpMessage: {
+    type: [String, Array] as PropType<string | string[]>,
+  },
+  autoCreateKey: {
+    type: Boolean,
+    default: true,
+  },
+  api: {
+    type: Function as PropType<Fn<any, Promise<any>>>,
+  },
+  beforeFetch: {
+    type: Function as PropType<Fn>,
+  },
+  afterFetch: {
+    type: Function as PropType<Fn>,
+  },
+  handleSearchInfoFn: {
+    type: Function as PropType<Fn>,
+  },
+};

+import { FormProps } from 'ant-design-vue/es/form/Form';
+
+export interface BasicListProps {
+  /**
+   * @description 立即执行
+   */
+  immediate?: boolean;
+
+  /**
+   * @description 额外的请求参数
+   */
+  searchInfo?: Recordable;
+
+  /**
+   * @description 搜索表单
+   */
+  formConfig?: Partial<FormProps>;
+
+  /**
+   * @description 列表名
+   */
+  title?: string;
+
+  /**
+   * @description 列表标题帮助信息
+   */
+  titleHelpMessage?: string | string[];
+
+  /**
+   * @description 自动创建key
+   */
+  autoCreateKey?: boolean;
+
+  /**
+   * @description 请求接口
+   * @param args
+   * @returns
+   */
+  api?: (...args: any) => Promise<any>;
+
+  /**
+   * @description 请求前对参数处理
+   */
+  beforeFetch?: Fn;
+
+  /**
+   * @description 请求后对结果处理
+   */
+  afterFetch?: Fn;
+
+  /**
+   * @description 请求前处理搜索参数
+   */
+  handleSearchInfoFn?: Fn;
+}

@@ -31,6 +31,6 @@
   <Icon
   <Icon
     v-bind="getBindProps"
     v-bind="getBindProps"
     class="justify-center items-center"
     class="justify-center items-center"
-    :class="getHasPermission ? '' : '!cursor-not-allowed !text-gray-200'"
+    :class="getHasPermission ? '' : '!cursor-not-allowed !text-gray-200 !dark:text-gray-700'"
   />
   />
 </template>
 </template>

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

@@ -7,4 +7,14 @@ export enum DictEnum {
   DATA_VALIDATE = 'data_validate',
   DATA_VALIDATE = 'data_validate',
   // 设备类型
   // 设备类型
   DEVICE_TYPE = 'device_type',
   DEVICE_TYPE = 'device_type',
+  // 平台管理员启用的权限
+  ENABLED_PLATFORM_ADMIN_AUTH = 'enabled_platform_admin_auth',
+  // 平台管理员禁用的权限
+  DISABLED_PLATFORM_ADMIN_AUTH = 'disabled_platform_admin_auth',
+  // 系统管理员启用的权限
+  ENABLED_SYSADMIN_AUTH = 'enabled_sysadmin_auth',
+  // 租户禁用的权限
+  DISABLED_TENANT_AUTH = 'disabled_tenant_auth',
+  // 客户禁用的权限
+  DISABLE_CUSTOMER_AUTH = 'disabled_customer_auth',
 }
 }

@@ -5,6 +5,13 @@ export enum DataActionModeEnum {
   DELETE = 'DELETE',
   DELETE = 'DELETE',
 }
 }
 
 
+export enum DataActionModeNameEnum {
+  CREATE = '创建',
+  READ = '查看',
+  UPDATE = '编辑',
+  DELETE = '删除',
+}
+
 export enum TimeUnitEnum {
 export enum TimeUnitEnum {
   SECOND = 'SECOND',
   SECOND = 'SECOND',
   MINUTE = 'MINUTE',
   MINUTE = 'MINUTE',
@@ -16,3 +23,8 @@ export enum TimeUnitNameEnum {
   MINUTE = '分',
   MINUTE = '分',
   HOUR = '时',
   HOUR = '时',
 }
 }
+
+export enum BooleanStringEnum {
+  TRUE = 'true',
+  FALSE = 'false',
+}

+import { computed, unref } from 'vue';
+import { useUserStore } from '/@/store/modules/user';
+import { RoleEnum } from '/@/enums/roleEnum';
+
+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 type { GlobConfig } from '/#/config';
-
-import { warn } from '/@/utils/log';
-import { getAppEnvConfig } from '/@/utils/env';
-
-export const useGlobSetting = (): Readonly<GlobConfig> => {
-  const {
-    VITE_GLOB_APP_TITLE,
-    VITE_GLOB_API_URL,
-    VITE_GLOB_APP_SHORT_NAME,
-    VITE_GLOB_API_URL_PREFIX,
-    VITE_GLOB_UPLOAD_URL,
-    VITE_GLOB_CONFIGURATION,
-    VITE_GLOB_WEB_SOCKET,
-    VITE_GLOB_CONTENT_SECURITY_POLICY,
-    VITE_GLOB_ALARM_NOTIFY_POLLING_INTERVAL_TIME,
-    VITE_GLOB_ALARM_NOTIFY_DURATION,
-    VITE_GLOB_LARGE_DESIGNER,
-  } = getAppEnvConfig();
-
-  if (!/[a-zA-Z\_]*/.test(VITE_GLOB_APP_SHORT_NAME)) {
-    warn(
-      `VITE_GLOB_APP_SHORT_NAME Variables can only be characters/underscores, please modify in the environment variables and re-running.`
-    );
-  }
-
-  // Take global configuration
-  const glob: Readonly<GlobConfig> = {
-    title: VITE_GLOB_APP_TITLE,
-    apiUrl: VITE_GLOB_API_URL,
-    shortName: VITE_GLOB_APP_SHORT_NAME,
-    urlPrefix: VITE_GLOB_API_URL_PREFIX,
-    uploadUrl: VITE_GLOB_UPLOAD_URL,
-    configurationPrefix: VITE_GLOB_CONFIGURATION,
-    largeDesignerPrefix: VITE_GLOB_LARGE_DESIGNER,
-    socketUrl: VITE_GLOB_WEB_SOCKET,
-    securityPolicy: VITE_GLOB_CONTENT_SECURITY_POLICY,
-    alarmNotifyDuration: VITE_GLOB_ALARM_NOTIFY_DURATION,
-    alarmPollingInterval: VITE_GLOB_ALARM_NOTIFY_POLLING_INTERVAL_TIME,
-  };
-  return glob as Readonly<GlobConfig>;
-};
+import type { GlobConfig } from '/#/config';
+
+import { warn } from '/@/utils/log';
+import { getAppEnvConfig } from '/@/utils/env';
+
+export const useGlobSetting = (): Readonly<GlobConfig> => {
+  const {
+    VITE_GLOB_APP_TITLE,
+    VITE_GLOB_API_URL,
+    VITE_GLOB_APP_SHORT_NAME,
+    VITE_GLOB_API_URL_PREFIX,
+    VITE_GLOB_UPLOAD_URL,
+    VITE_GLOB_CONFIGURATION,
+    VITE_GLOB_WEB_SOCKET,
+    VITE_GLOB_CONTENT_SECURITY_POLICY,
+    VITE_GLOB_ALARM_NOTIFY_POLLING_INTERVAL_TIME,
+    VITE_GLOB_ALARM_NOTIFY_DURATION,
+    VITE_GLOB_LARGE_DESIGNER,
+    VITE_GLOB_DISABLED_TASK_CENTER_EXECUTE_INTERVAL_UNIT_SECOND,
+  } = getAppEnvConfig();
+
+  if (!/[a-zA-Z\_]*/.test(VITE_GLOB_APP_SHORT_NAME)) {
+    warn(
+      `VITE_GLOB_APP_SHORT_NAME Variables can only be characters/underscores, please modify in the environment variables and re-running.`
+    );
+  }
+
+  // Take global configuration
+  const glob: Readonly<GlobConfig> = {
+    title: VITE_GLOB_APP_TITLE,
+    apiUrl: VITE_GLOB_API_URL,
+    shortName: VITE_GLOB_APP_SHORT_NAME,
+    urlPrefix: VITE_GLOB_API_URL_PREFIX,
+    uploadUrl: VITE_GLOB_UPLOAD_URL,
+    configurationPrefix: VITE_GLOB_CONFIGURATION,
+    largeDesignerPrefix: VITE_GLOB_LARGE_DESIGNER,
+    socketUrl: VITE_GLOB_WEB_SOCKET,
+    securityPolicy: VITE_GLOB_CONTENT_SECURITY_POLICY,
+    alarmNotifyDuration: VITE_GLOB_ALARM_NOTIFY_DURATION,
+    alarmPollingInterval: VITE_GLOB_ALARM_NOTIFY_POLLING_INTERVAL_TIME,
+    disabledTaskCenterExecuteIntervalUnitSecond:
+      VITE_GLOB_DISABLED_TASK_CENTER_EXECUTE_INTERVAL_UNIT_SECOND,
+  };
+  return glob as Readonly<GlobConfig>;
+};

@@ -17,7 +17,7 @@ function joinParentPath(menus: Menu[], parentPath = '') {
     // https://next.router.vuejs.org/guide/essentials/nested-routes.html
     // https://next.router.vuejs.org/guide/essentials/nested-routes.html
     // Note that nested paths that start with / will be treated as a root path.
     // Note that nested paths that start with / will be treated as a root path.
     // This allows you to leverage the component nesting without having to use a nested URL.
     // This allows you to leverage the component nesting without having to use a nested URL.
-    if (!(menu.path.startsWith('/') || isUrl(menu.path))) {
+    if (!(menu?.path?.startsWith('/') || isUrl(menu.path))) {
       // path doesn't start with /, nor is it a url, join parent path
       // path doesn't start with /, nor is it a url, join parent path
       menu.path = `${parentPath}/${menu.path}`;
       menu.path = `${parentPath}/${menu.path}`;
     }
     }

@@ -224,7 +224,7 @@ export const usePermissionStore = defineStore({
           // !Simulate to obtain permission codes from the background,
           // !Simulate to obtain permission codes from the background,
           // this function may only need to be executed once, and the actual project can be put at the right time by itself
           // this function may only need to be executed once, and the actual project can be put at the right time by itself
           let routeList: AppRouteRecordRaw[] = [];
           let routeList: AppRouteRecordRaw[] = [];
-          const userInfo: any = getAuthCache(USER_INFO_KEY);
+          const userInfo: any = getAuthCache(USER_INFO_KEY) || { roles: [] };
           const filterMenu = (allMenuList, menuIdsList) => {
           const filterMenu = (allMenuList, menuIdsList) => {
             return allMenuList
             return allMenuList
               .filter((item) => {
               .filter((item) => {

@@ -4,7 +4,14 @@ import { defineStore } from 'pinia';
 import { store } from '/@/store';
 import { store } from '/@/store';
 import { RoleEnum } from '/@/enums/roleEnum';
 import { RoleEnum } from '/@/enums/roleEnum';
 import { PageEnum } from '/@/enums/pageEnum';
 import { PageEnum } from '/@/enums/pageEnum';
-import { JWT_TOKEN_KEY, REFRESH_TOKEN_KEY, ROLES_KEY, USER_INFO_KEY } from '/@/enums/cacheEnum';
+import {
+  JWT_TOKEN_KEY,
+  REFRESH_TOKEN_KEY,
+  ROLES_KEY,
+  SHARE_JWT_TOKEN_KEY,
+  SHARE_REFRESH_TOKEN_KEY,
+  USER_INFO_KEY,
+} from '/@/enums/cacheEnum';
 import { getAuthCache, setAuthCache } from '/@/utils/auth';
 import { getAuthCache, setAuthCache } from '/@/utils/auth';
 import {
 import {
   LoginParams,
   LoginParams,
@@ -33,6 +40,8 @@ interface UserState {
   lastUpdateTime: number;
   lastUpdateTime: number;
   jwtToken?: string;
   jwtToken?: string;
   refreshToken?: string;
   refreshToken?: string;
+  shareJwtToken?: string;
+  shareRefreshToken?: string;
   outTarget?: string;
   outTarget?: string;
 }
 }
 
 
@@ -100,6 +109,13 @@ 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);
@@ -188,7 +204,7 @@ export const useUserStore = defineStore({
       const roleList = roles.map((item) => item) as RoleEnum[];
       const roleList = roles.map((item) => item) as RoleEnum[];
       this.setRoleList(roleList);
       this.setRoleList(roleList);
       try {
       try {
-        if (roleList[0] !== 'SYS_ADMIN') {
+        if (roleList[0] !== RoleEnum.SYS_ADMIN && roleList[0] !== RoleEnum.PLATFORM_ADMIN) {
           const res = await getEntitiesId();
           const res = await getEntitiesId();
           const entityId = res.data[0]?.entityId;
           const entityId = res.data[0]?.entityId;
           window.localStorage.setItem('entityId', JSON.stringify(entityId));
           window.localStorage.setItem('entityId', JSON.stringify(entityId));
@@ -232,6 +248,18 @@ export const useUserStore = defineStore({
       }
       }
     },
     },
 
 
+    async doShareRefresh() {
+      try {
+        const req = { refreshToken: this.shareRefreshToken } as RefreshTokenParams;
+        const data = await doRefreshToken(req);
+        const { token, refreshToken } = data;
+        this.storeToken(token, refreshToken);
+      } catch (error) {
+        window.location.reload();
+        throw error;
+      }
+    },
+
     /**
     /**
      * @description: Confirm before logging out
      * @description: Confirm before logging out
      */
      */

 import { Persistent, BasicKeys } from '/@/utils/cache/persistent';
 import { Persistent, BasicKeys } from '/@/utils/cache/persistent';
-import { CacheTypeEnum } from '/@/enums/cacheEnum';
+import { CacheTypeEnum, SHARE_JWT_TOKEN_KEY, SHARE_REFRESH_TOKEN_KEY } from '/@/enums/cacheEnum';
 import projectSetting from '/@/settings/projectSetting';
 import projectSetting from '/@/settings/projectSetting';
 import { JWT_TOKEN_KEY, REFRESH_TOKEN_KEY } from '/@/enums/cacheEnum';
 import { JWT_TOKEN_KEY, REFRESH_TOKEN_KEY } from '/@/enums/cacheEnum';
 
 
@@ -26,3 +26,11 @@ export function getJwtToken() {
 export function getRefreshToken() {
 export function getRefreshToken() {
   return getAuthCache(REFRESH_TOKEN_KEY);
   return getAuthCache(REFRESH_TOKEN_KEY);
 }
 }
+
+export function getShareJwtToken() {
+  return getAuthCache(SHARE_JWT_TOKEN_KEY);
+}
+
+export function getShareRefreshToken() {
+  return getAuthCache(SHARE_REFRESH_TOKEN_KEY);
+}

@@ -17,6 +17,8 @@ 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/cacheEnum';
 } from '/@/enums/cacheEnum';
 import { DEFAULT_CACHE_TIME } from '/@/settings/encryptionSetting';
 import { DEFAULT_CACHE_TIME } from '/@/settings/encryptionSetting';
 import { toRaw } from 'vue';
 import { toRaw } from 'vue';
@@ -33,6 +35,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 { GlobEnvConfig } from '/#/config';
-
-import { warn } from '/@/utils/log';
-import pkg from '../../package.json';
-import { getConfigFileName } from '../../build/getConfigFileName';
-
-export function getCommonStoragePrefix() {
-  const { VITE_GLOB_APP_SHORT_NAME } = getAppEnvConfig();
-  return `${VITE_GLOB_APP_SHORT_NAME}__${getEnv()}`.toUpperCase();
-}
-
-// Generate cache key according to version
-export function getStorageShortName() {
-  return `${getCommonStoragePrefix()}${`__${pkg.version}`}__`.toUpperCase();
-}
-
-export function getAppEnvConfig() {
-  const ENV_NAME = getConfigFileName(import.meta.env);
-
-  const ENV = (import.meta.env.DEV
-    ? // Get the global configuration (the configuration will be extracted independently when packaging)
-      (import.meta.env as unknown as GlobEnvConfig)
-    : window[ENV_NAME as any]) as unknown as GlobEnvConfig;
-  const {
-    VITE_GLOB_APP_TITLE,
-    VITE_GLOB_API_URL,
-    VITE_GLOB_APP_SHORT_NAME,
-    VITE_GLOB_API_URL_PREFIX,
-    VITE_GLOB_UPLOAD_URL,
-    VITE_GLOB_CONFIGURATION,
-    VITE_GLOB_WEB_SOCKET,
-    VITE_GLOB_CONTENT_SECURITY_POLICY,
-    VITE_GLOB_ALARM_NOTIFY_POLLING_INTERVAL_TIME,
-    VITE_GLOB_ALARM_NOTIFY_DURATION,
-    VITE_GLOB_LARGE_DESIGNER,
-  } = ENV;
-
-  if (!/^[a-zA-Z\_]*$/.test(VITE_GLOB_APP_SHORT_NAME)) {
-    warn(
-      `VITE_GLOB_APP_SHORT_NAME Variables can only be characters/underscores, please modify in the environment variables and re-running.`
-    );
-  }
-
-  return {
-    VITE_GLOB_APP_TITLE,
-    VITE_GLOB_API_URL,
-    VITE_GLOB_APP_SHORT_NAME,
-    VITE_GLOB_API_URL_PREFIX,
-    VITE_GLOB_UPLOAD_URL,
-    VITE_GLOB_CONFIGURATION,
-    VITE_GLOB_WEB_SOCKET,
-    VITE_GLOB_CONTENT_SECURITY_POLICY,
-    VITE_GLOB_ALARM_NOTIFY_POLLING_INTERVAL_TIME,
-    VITE_GLOB_ALARM_NOTIFY_DURATION,
-    VITE_GLOB_LARGE_DESIGNER,
-  };
-}
-
-/**
- * @description: Development mode
- */
-export const devMode = 'development';
-
-/**
- * @description: Production mode
- */
-export const prodMode = 'production';
-
-/**
- * @description: Get environment variables
- * @returns:
- * @example:
- */
-export function getEnv(): string {
-  return import.meta.env.MODE;
-}
-
-/**
- * @description: Is it a development mode
- * @returns:
- * @example:
- */
-export function isDevMode(): boolean {
-  return import.meta.env.DEV;
-}
-
-/**
- * @description: Is it a production mode
- * @returns:
- * @example:
- */
-export function isProdMode(): boolean {
-  return import.meta.env.PROD;
-}
+import type { GlobEnvConfig } from '/#/config';
+
+import { warn } from '/@/utils/log';
+import pkg from '../../package.json';
+import { getConfigFileName } from '../../build/getConfigFileName';
+
+export function getCommonStoragePrefix() {
+  const { VITE_GLOB_APP_SHORT_NAME } = getAppEnvConfig();
+  return `${VITE_GLOB_APP_SHORT_NAME}__${getEnv()}`.toUpperCase();
+}
+
+// Generate cache key according to version
+export function getStorageShortName() {
+  return `${getCommonStoragePrefix()}${`__${pkg.version}`}__`.toUpperCase();
+}
+
+export function getAppEnvConfig() {
+  const ENV_NAME = getConfigFileName(import.meta.env);
+
+  const ENV = (import.meta.env.DEV
+    ? // Get the global configuration (the configuration will be extracted independently when packaging)
+      (import.meta.env as unknown as GlobEnvConfig)
+    : window[ENV_NAME as any]) as unknown as GlobEnvConfig;
+  const {
+    VITE_GLOB_APP_TITLE,
+    VITE_GLOB_API_URL,
+    VITE_GLOB_APP_SHORT_NAME,
+    VITE_GLOB_API_URL_PREFIX,
+    VITE_GLOB_UPLOAD_URL,
+    VITE_GLOB_CONFIGURATION,
+    VITE_GLOB_WEB_SOCKET,
+    VITE_GLOB_CONTENT_SECURITY_POLICY,
+    VITE_GLOB_ALARM_NOTIFY_POLLING_INTERVAL_TIME,
+    VITE_GLOB_ALARM_NOTIFY_DURATION,
+    VITE_GLOB_LARGE_DESIGNER,
+    VITE_GLOB_DISABLED_TASK_CENTER_EXECUTE_INTERVAL_UNIT_SECOND,
+  } = ENV;
+
+  if (!/^[a-zA-Z\_]*$/.test(VITE_GLOB_APP_SHORT_NAME)) {
+    warn(
+      `VITE_GLOB_APP_SHORT_NAME Variables can only be characters/underscores, please modify in the environment variables and re-running.`
+    );
+  }
+
+  return {
+    VITE_GLOB_APP_TITLE,
+    VITE_GLOB_API_URL,
+    VITE_GLOB_APP_SHORT_NAME,
+    VITE_GLOB_API_URL_PREFIX,
+    VITE_GLOB_UPLOAD_URL,
+    VITE_GLOB_CONFIGURATION,
+    VITE_GLOB_WEB_SOCKET,
+    VITE_GLOB_CONTENT_SECURITY_POLICY,
+    VITE_GLOB_ALARM_NOTIFY_POLLING_INTERVAL_TIME,
+    VITE_GLOB_ALARM_NOTIFY_DURATION,
+    VITE_GLOB_LARGE_DESIGNER,
+    VITE_GLOB_DISABLED_TASK_CENTER_EXECUTE_INTERVAL_UNIT_SECOND,
+  };
+}
+
+/**
+ * @description: Development mode
+ */
+export const devMode = 'development';
+
+/**
+ * @description: Production mode
+ */
+export const prodMode = 'production';
+
+/**
+ * @description: Get environment variables
+ * @returns:
+ * @example:
+ */
+export function getEnv(): string {
+  return import.meta.env.MODE;
+}
+
+/**
+ * @description: Is it a development mode
+ * @returns:
+ * @example:
+ */
+export function isDevMode(): boolean {
+  return import.meta.env.DEV;
+}
+
+/**
+ * @description: Is it a production mode
+ * @returns:
+ * @example:
+ */
+export function isProdMode(): boolean {
+  return import.meta.env.PROD;
+}

@@ -80,7 +80,6 @@ export class VAxios {
   private refreshTokenBeforeReq(doRefreshTokenApi: () => Promise<unknown>): Promise<unknown> {
   private refreshTokenBeforeReq(doRefreshTokenApi: () => Promise<unknown>): Promise<unknown> {
     // 创建一个未完成的promise，把改变状态的resolve方法交给请求token结束后执行
     // 创建一个未完成的promise，把改变状态的resolve方法交给请求token结束后执行
     const promise = new Promise((resolve) => {
     const promise = new Promise((resolve) => {
-      console.log('等待新token');
       // 等待队列放的是一个回调函数，来延迟resolve的执行，以此控制promise状态的改变
       // 等待队列放的是一个回调函数，来延迟resolve的执行，以此控制promise状态的改变
       this.waitingQueue.push(() => resolve(null));
       this.waitingQueue.push(() => resolve(null));
     });
     });
@@ -88,7 +87,6 @@ export class VAxios {
       this.refreshing = true;
       this.refreshing = true;
       // 模拟请求刷新Token接口，当接口返回数据时执行then方法 TODO 添加catch捕获异常
       // 模拟请求刷新Token接口，当接口返回数据时执行then方法 TODO 添加catch捕获异常
       doRefreshTokenApi().then(() => {
       doRefreshTokenApi().then(() => {
-        console.log('刷新token成功，放行队列中的请求', this.waitingQueue.length);
         this.refreshing = false;
         this.refreshing = false;
         this.waitingQueue.forEach((cb) => cb());
         this.waitingQueue.forEach((cb) => cb());
         this.waitingQueue.length = 0;
         this.waitingQueue.length = 0;
@@ -117,12 +115,19 @@ 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) {
         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();
@@ -244,7 +249,6 @@ export class VAxios {
     const { requestOptions } = this.options;
     const { requestOptions } = this.options;
 
 
     const opt: RequestOptions = Object.assign({}, requestOptions, options);
     const opt: RequestOptions = Object.assign({}, requestOptions, options);
-
     const { beforeRequestHook, requestCatchHook, transformRequestHook } = transform || {};
     const { beforeRequestHook, requestCatchHook, transformRequestHook } = transform || {};
     if (beforeRequestHook && isFunction(beforeRequestHook)) {
     if (beforeRequestHook && isFunction(beforeRequestHook)) {
       conf = beforeRequestHook(conf, opt);
       conf = beforeRequestHook(conf, opt);

 /**
 /**
  * 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 OriginalAxiosRequestConfig, AxiosResponse } from 'axios';
 import type { RequestOptions, Result } from '/#/axios';
 import type { RequestOptions, Result } from '/#/axios';
 
 
 export interface CreateAxiosOptions extends AxiosRequestConfig {
 export interface CreateAxiosOptions extends AxiosRequestConfig {
@@ -10,6 +10,7 @@ export interface CreateAxiosOptions extends AxiosRequestConfig {
   transform?: AxiosTransform;
   transform?: AxiosTransform;
   requestOptions?: RequestOptions;
   requestOptions?: RequestOptions;
 }
 }
+export type AxiosRequestConfig = OriginalAxiosRequestConfig & { requestOptions?: RequestOptions };
 
 
 export abstract class AxiosTransform {
 export abstract class AxiosTransform {
   /**
   /**

@@ -10,7 +10,7 @@ import { useGlobSetting } from '/@/hooks/setting';
 import { useMessage } from '/@/hooks/web/useMessage';
 import { useMessage } from '/@/hooks/web/useMessage';
 import { RequestEnum, ContentTypeEnum } from '/@/enums/httpEnum';
 import { RequestEnum, ContentTypeEnum } from '/@/enums/httpEnum';
 import { isString } from '/@/utils/is';
 import { isString } from '/@/utils/is';
-import { getJwtToken } from '/@/utils/auth';
+import { getJwtToken, getShareJwtToken } from '/@/utils/auth';
 import { setObjToUrlParams, deepMerge } from '/@/utils';
 import { setObjToUrlParams, deepMerge } from '/@/utils';
 import { useErrorLogStoreWithOut } from '/@/store/modules/errorLog';
 import { useErrorLogStoreWithOut } from '/@/store/modules/errorLog';
 import { useI18n } from '/@/hooks/web/useI18n';
 import { useI18n } from '/@/hooks/web/useI18n';
@@ -92,12 +92,23 @@ 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;
+    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;
   },
   },
@@ -194,7 +205,7 @@ function createAxios(opt?: Partial<CreateAxiosOptions>) {
           ignoreCancelToken: true,
           ignoreCancelToken: true,
           // 是否携带token
           // 是否携带token
           withToken: true,
           withToken: true,
-        },
+        } as RequestOptions,
       },
       },
       opt || {}
       opt || {}
     )
     )

 import { BasicColumn, FormSchema } from '/@/components/Table';
 import { BasicColumn, FormSchema } from '/@/components/Table';
-import { getOrganizationList } from '/@/api/system/system';
-import { copyTransFun } from '/@/utils/fnUtils';
 import { findDictItemByCode } from '/@/api/system/dict';
 import { findDictItemByCode } from '/@/api/system/dict';
-
+import { useComponentRegister } from '/@/components/Form';
+import { OrgTreeSelect } from '../../common/OrgTreeSelect';
+useComponentRegister('OrgTreeSelect', OrgTreeSelect);
 // 表格列数据
 // 表格列数据
 export const columns: BasicColumn[] = [
 export const columns: BasicColumn[] = [
   {
   {
@@ -98,19 +98,8 @@ export const formSchema: FormSchema[] = [
   {
   {
     field: 'organizationId',
     field: 'organizationId',
     label: '所属组织',
     label: '所属组织',
-    component: 'ApiTreeSelect',
+    component: 'OrgTreeSelect',
     required: true,
     required: true,
-    componentProps: () => {
-      return {
-        maxLength: 250,
-        placeholder: '请选择所属组织',
-        api: async () => {
-          const data = await getOrganizationList();
-          copyTransFun(data as any as any[]);
-          return data;
-        },
-      };
-    },
   },
   },
   {
   {
     field: 'alarmContactId',
     field: 'alarmContactId',

 import { BasicColumn, FormSchema } from '/@/components/Table';
 import { BasicColumn, FormSchema } from '/@/components/Table';
-import { getOrganizationList } from '/@/api/system/system';
-import { copyTransFun } from '/@/utils/fnUtils';
 import { emailRule, phoneRule } from '/@/utils/rules';
 import { emailRule, phoneRule } from '/@/utils/rules';
-
+import { useComponentRegister } from '/@/components/Form';
+import { OrgTreeSelect } from '../../common/OrgTreeSelect';
+useComponentRegister('OrgTreeSelect', OrgTreeSelect);
 // 表格列数据
 // 表格列数据
 export const columns: BasicColumn[] = [
 export const columns: BasicColumn[] = [
   {
   {
@@ -78,14 +78,7 @@ export const formSchema: FormSchema[] = [
     field: 'organizationId',
     field: 'organizationId',
     label: '所属组织',
     label: '所属组织',
     required: true,
     required: true,
-    component: 'ApiTreeSelect',
-    componentProps: {
-      api: async () => {
-        const data = await getOrganizationList();
-        copyTransFun(data as any as any[]);
-        return data;
-      },
-    },
+    component: 'OrgTreeSelect',
   },
   },
   {
   {
     field: 'phone',
     field: 'phone',

-import { BasicColumn, FormSchema } from '/@/components/Table';
-import { getOrganizationList } from '/@/api/system/system';
-import { copyTransFun } from '/@/utils/fnUtils';
-import type { FormSchema as QFormSchema } from '/@/components/Form/index';
-
-import { CameraVideoUrl, CameraMaxLength } from '/@/utils/rules';
-import { h } from 'vue';
-import SnHelpMessage from './SnHelpMessage.vue';
-
-export enum CameraPermission {
-  PREVIEW = 'api:yt:video:get',
-  CREATE = 'api:yt:video:post',
-  UPDATE = 'api:yt:video:update',
-  DELETE = 'api:yt:video:delete',
-}
-
-export enum AccessMode {
-  ManuallyEnter = 0,
-  Streaming = 1,
-}
-
-export enum PlayProtocol {
-  HTTP = 0,
-  HTTPS = 1,
-}
-
-export enum StreamType {
-  MASTER = 0,
-  CHILD = 1,
-  THIRD = 2,
-}
-
-export enum PageMode {
-  SPLIT_SCREEN_MODE = 'splitScreen',
-  LIST_MODE = 'listMode',
-  FULL_SCREEN_MODE = 'fullScreenMode',
-}
-
-export enum MediaType {
-  MP4 = 'mp4',
-  M3U8 = 'm3u8',
-}
-
-// 表格列数据
-export const columns: BasicColumn[] = [
-  {
-    title: '封面',
-    dataIndex: 'avatar',
-    width: 80,
-    slots: { customRender: 'img' },
-  },
-  {
-    title: '名字',
-    dataIndex: 'name',
-    width: 120,
-  },
-  {
-    title: '摄像头编号/监控点编号',
-    dataIndex: 'sn',
-    width: 220,
-  },
-  {
-    title: '视频流',
-    dataIndex: 'videoUrl',
-    width: 120,
-  },
-  {
-    title: '所属组织',
-    dataIndex: 'organizationName',
-    width: 160,
-  },
-  {
-    title: '获取方式',
-    dataIndex: 'accessMode',
-    width: 100,
-    slots: { customRender: 'accessMode' },
-  },
-  {
-    title: '创建时间',
-    dataIndex: 'createTime',
-    width: 140,
-  },
-];
-
-// 查询字段
-export const searchFormSchema: FormSchema[] = [
-  {
-    field: 'name',
-    label: '摄像头名字',
-    component: 'Input',
-    colProps: { span: 8 },
-    componentProps: {
-      maxLength: 36,
-      placeholder: '请输入摄像头名字',
-    },
-  },
-];
-
-// 弹框配置项
-export const formSchema: QFormSchema[] = [
-  {
-    field: 'avatar',
-    label: '视频封面',
-    slot: 'iconSelect',
-    component: 'Input',
-  },
-  {
-    field: 'name',
-    label: '视频名字',
-    required: true,
-    component: 'Input',
-    componentProps: {
-      placeholder: '请输入视频名字',
-      maxLength: 30,
-    },
-    rules: [...CameraMaxLength, { required: true, message: '视频名是必填项' }],
-  },
-  {
-    field: 'organizationId',
-    label: '所属组织',
-    required: true,
-    component: 'ApiTreeSelect',
-    componentProps: {
-      api: async () => {
-        const data = await getOrganizationList();
-        copyTransFun(data as any as any[]);
-        return data;
-      },
-    },
-  },
-  {
-    label: '视频流获取方式',
-    field: 'accessMode',
-    component: 'RadioGroup',
-    rules: [{ required: true, message: '视频流获取方式为必选项', type: 'number' }],
-    defaultValue: AccessMode.ManuallyEnter,
-    componentProps({ formActionType }) {
-      return {
-        defaultValue: AccessMode.ManuallyEnter,
-        placeholder: '请选择视频流获取方式',
-        options: [
-          { label: '手动输入', value: AccessMode.ManuallyEnter },
-          { label: '流媒体获取', value: AccessMode.Streaming },
-        ],
-        onChange() {
-          formActionType.setFieldsValue({
-            brand: null,
-            sn: null,
-            videoUrl: null,
-            videoPlatformId: null,
-          });
-        },
-      };
-    },
-  },
-  {
-    field: 'brand',
-    label: '视频厂家',
-    component: 'Input',
-    ifShow({ values }) {
-      return values.accessMode === AccessMode.ManuallyEnter;
-    },
-    componentProps: {
-      maxLength: 36,
-      placeholder: '请输入视频厂家',
-    },
-  },
-  {
-    field: 'sn',
-    label: '摄像头编号',
-    required: true,
-    component: 'Input',
-    rules: [...CameraVideoUrl, { required: true, message: '摄像头编号是必填项' }],
-    ifShow({ values }) {
-      return values.accessMode === AccessMode.ManuallyEnter;
-    },
-    componentProps: {
-      maxLength: 36,
-      placeholder: '请输入摄像头编号',
-    },
-  },
-  {
-    field: 'videoUrl',
-    label: '视频流',
-    component: 'Input',
-    required: true,
-    ifShow({ values }) {
-      return values.accessMode === AccessMode.ManuallyEnter;
-    },
-    componentProps: {
-      placeholder: '请输入视频流',
-      maxLength: 255,
-    },
-    rules: [{ required: true, message: '视频流是必填项' }, ...CameraVideoUrl],
-  },
-
-  {
-    field: 'videoPlatformId',
-    label: '流媒体配置',
-    component: 'Select',
-    ifShow({ values }) {
-      return values.accessMode === AccessMode.Streaming;
-    },
-    slot: 'videoPlatformIdSlot',
-    componentProps: {
-      placeholder: '请选择流媒体配置',
-    },
-  },
-  {
-    field: 'streamType',
-    label: '码流',
-    component: 'RadioGroup',
-    defaultValue: StreamType.MASTER,
-    ifShow({ values }) {
-      return values.accessMode === AccessMode.Streaming;
-    },
-    componentProps: {
-      placeholder: '请选择码流',
-      defaultValue: StreamType.MASTER,
-      options: [
-        { label: '主码流', value: StreamType.MASTER },
-        { label: '子码流', value: StreamType.CHILD },
-        { label: '第三码流', value: StreamType.THIRD },
-      ],
-    },
-  },
-  {
-    field: 'playProtocol',
-    label: '播放协议',
-    component: 'RadioGroup',
-    defaultValue: PlayProtocol.HTTP,
-    ifShow({ values }) {
-      return values.accessMode === AccessMode.Streaming;
-    },
-    helpMessage: ['平台使用https的hls协议,需联系海康开放平台专家支持。'],
-    componentProps: {
-      placeholder: '请选择播放协议',
-      defaultValue: PlayProtocol.HTTP,
-      options: [
-        { label: 'http', value: PlayProtocol.HTTP },
-        { label: 'https', value: PlayProtocol.HTTPS },
-      ],
-    },
-  },
-  {
-    field: 'sn',
-    label: h(SnHelpMessage) as any,
-    component: 'Input',
-    rules: [...CameraVideoUrl, { required: true, message: '摄像头编号是必填项' }],
-    ifShow({ values }) {
-      return values.accessMode === AccessMode.Streaming;
-    },
-    componentProps: {
-      placeholder: '请输入监控点编号',
-    },
-  },
-];
+import { BasicColumn, FormSchema } from '/@/components/Table';
+import { FormSchema as QFormSchema, useComponentRegister } from '/@/components/Form/index';
+
+import { CameraVideoUrl, CameraMaxLength } from '/@/utils/rules';
+import { h } from 'vue';
+import SnHelpMessage from './SnHelpMessage.vue';
+import { OrgTreeSelect } from '../../common/OrgTreeSelect';
+
+useComponentRegister('OrgTreeSelect', OrgTreeSelect);
+
+export enum CameraPermission {
+  PREVIEW = 'api:yt:video:get',
+  CREATE = 'api:yt:video:post',
+  UPDATE = 'api:yt:video:update',
+  DELETE = 'api:yt:video:delete',
+}
+
+export enum AccessMode {
+  ManuallyEnter = 0,
+  Streaming = 1,
+}
+
+export enum PlayProtocol {
+  HTTP = 0,
+  HTTPS = 1,
+}
+
+export enum StreamType {
+  MASTER = 0,
+  CHILD = 1,
+  THIRD = 2,
+}
+
+export enum PageMode {
+  SPLIT_SCREEN_MODE = 'splitScreen',
+  LIST_MODE = 'listMode',
+  FULL_SCREEN_MODE = 'fullScreenMode',
+}
+
+export enum MediaType {
+  MP4 = 'mp4',
+  M3U8 = 'm3u8',
+}
+
+// 表格列数据
+export const columns: BasicColumn[] = [
+  {
+    title: '封面',
+    dataIndex: 'avatar',
+    width: 80,
+    slots: { customRender: 'img' },
+  },
+  {
+    title: '名字',
+    dataIndex: 'name',
+    width: 120,
+  },
+  {
+    title: '摄像头编号/监控点编号',
+    dataIndex: 'sn',
+    width: 220,
+  },
+  {
+    title: '视频流',
+    dataIndex: 'videoUrl',
+    width: 120,
+  },
+  {
+    title: '所属组织',
+    dataIndex: 'organizationName',
+    width: 160,
+  },
+  {
+    title: '获取方式',
+    dataIndex: 'accessMode',
+    width: 100,
+    slots: { customRender: 'accessMode' },
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    width: 140,
+  },
+];
+
+// 查询字段
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '摄像头名字',
+    component: 'Input',
+    colProps: { span: 8 },
+    componentProps: {
+      maxLength: 36,
+      placeholder: '请输入摄像头名字',
+    },
+  },
+];
+
+// 弹框配置项
+export const formSchema: QFormSchema[] = [
+  {
+    field: 'avatar',
+    label: '视频封面',
+    slot: 'iconSelect',
+    component: 'Input',
+  },
+  {
+    field: 'name',
+    label: '视频名字',
+    required: true,
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入视频名字',
+      maxLength: 30,
+    },
+    rules: [...CameraMaxLength, { required: true, message: '视频名是必填项' }],
+  },
+  {
+    field: 'organizationId',
+    label: '所属组织',
+    required: true,
+    component: 'OrgTreeSelect',
+  },
+  {
+    label: '视频流获取方式',
+    field: 'accessMode',
+    component: 'RadioGroup',
+    rules: [{ required: true, message: '视频流获取方式为必选项', type: 'number' }],
+    defaultValue: AccessMode.ManuallyEnter,
+    componentProps({ formActionType }) {
+      return {
+        defaultValue: AccessMode.ManuallyEnter,
+        placeholder: '请选择视频流获取方式',
+        options: [
+          { label: '手动输入', value: AccessMode.ManuallyEnter },
+          { label: '流媒体获取', value: AccessMode.Streaming },
+        ],
+        onChange() {
+          formActionType.setFieldsValue({
+            brand: null,
+            sn: null,
+            videoUrl: null,
+            videoPlatformId: null,
+          });
+        },
+      };
+    },
+  },
+  {
+    field: 'brand',
+    label: '视频厂家',
+    component: 'Input',
+    ifShow({ values }) {
+      return values.accessMode === AccessMode.ManuallyEnter;
+    },
+    componentProps: {
+      maxLength: 36,
+      placeholder: '请输入视频厂家',
+    },
+  },
+  {
+    field: 'sn',
+    label: '摄像头编号',
+    required: true,
+    component: 'Input',
+    rules: [...CameraVideoUrl, { required: true, message: '摄像头编号是必填项' }],
+    ifShow({ values }) {
+      return values.accessMode === AccessMode.ManuallyEnter;
+    },
+    componentProps: {
+      maxLength: 36,
+      placeholder: '请输入摄像头编号',
+    },
+  },
+  {
+    field: 'videoUrl',
+    label: '视频流',
+    component: 'Input',
+    required: true,
+    ifShow({ values }) {
+      return values.accessMode === AccessMode.ManuallyEnter;
+    },
+    componentProps: {
+      placeholder: '请输入视频流',
+      maxLength: 255,
+    },
+    rules: [{ required: true, message: '视频流是必填项' }, ...CameraVideoUrl],
+  },
+
+  {
+    field: 'videoPlatformId',
+    label: '流媒体配置',
+    component: 'Select',
+    ifShow({ values }) {
+      return values.accessMode === AccessMode.Streaming;
+    },
+    slot: 'videoPlatformIdSlot',
+    componentProps: {
+      placeholder: '请选择流媒体配置',
+    },
+  },
+  {
+    field: 'streamType',
+    label: '码流',
+    component: 'RadioGroup',
+    defaultValue: StreamType.MASTER,
+    ifShow({ values }) {
+      return values.accessMode === AccessMode.Streaming;
+    },
+    componentProps: {
+      placeholder: '请选择码流',
+      defaultValue: StreamType.MASTER,
+      options: [
+        { label: '主码流', value: StreamType.MASTER },
+        { label: '子码流', value: StreamType.CHILD },
+        { label: '第三码流', value: StreamType.THIRD },
+      ],
+    },
+  },
+  {
+    field: 'playProtocol',
+    label: '播放协议',
+    component: 'RadioGroup',
+    defaultValue: PlayProtocol.HTTP,
+    ifShow({ values }) {
+      return values.accessMode === AccessMode.Streaming;
+    },
+    helpMessage: ['平台使用https的hls协议,需联系海康开放平台专家支持。'],
+    componentProps: {
+      placeholder: '请选择播放协议',
+      defaultValue: PlayProtocol.HTTP,
+      options: [
+        { label: 'http', value: PlayProtocol.HTTP },
+        { label: 'https', value: PlayProtocol.HTTPS },
+      ],
+    },
+  },
+  {
+    field: 'sn',
+    label: h(SnHelpMessage) as any,
+    component: 'Input',
+    rules: [...CameraVideoUrl, { required: true, message: '摄像头编号是必填项' }],
+    ifShow({ values }) {
+      return values.accessMode === AccessMode.Streaming;
+    },
+    componentProps: {
+      placeholder: '请输入监控点编号',
+    },
+  },
+];

+export { default as OrgTreeSelect } from './index.vue';

+<script lang="ts" setup>
+  import { ApiTreeSelect } from '/@/components/Form';
+  import { Button } from 'ant-design-vue';
+  import { getOrganizationList } from '/@/api/system/system';
+  import { computed, ref, unref } from 'vue';
+  import OrganizationDrawer from '/@/views/system/organization/OrganizationDrawer.vue';
+  import { useDrawer } from '/@/components/Drawer';
+  import { OrganizationListItem } from '/@/api/system/model/systemModel';
+  import { useRole } from '/@/hooks/business/useRole';
+
+  const [registerDrawer, { openDrawer }] = useDrawer();
+  const { isCustomerUser } = useRole();
+
+  const props = withDefaults(
+    defineProps<{
+      value?: string | string[];
+      apiTreeSelectProps?: Recordable;
+      showCreate?: boolean;
+    }>(),
+    {
+      showCreate: true,
+    }
+  );
+
+  const needReload = ref(true);
+
+  const emit = defineEmits(['change']);
+
+  const handleOpenCreate = () => {
+    openDrawer(true, { isUpdate: false });
+  };
+
+  const timespan = ref(Date.now());
+
+  const orgList = ref<Recordable[]>([]);
+
+  const getBindProps = computed<Recordable>(() => {
+    const { value, apiTreeSelectProps = {} } = props;
+    const { params = {} } = apiTreeSelectProps;
+    return {
+      replaceFields: { children: 'children', key: 'id', title: 'name', value: 'id' },
+      getPopupContainer: () => document.body,
+      placeholder: '请选择所属组织',
+      maxLength: 250,
+      ...apiTreeSelectProps,
+      value,
+      api: async (params: OrganizationListItem) => {
+        try {
+          if (!unref(needReload)) return unref(orgList);
+          const result = ((await getOrganizationList(params)) as unknown as Recordable[]) || [];
+          orgList.value = result;
+          needReload.value = false;
+          return result;
+        } catch (error) {
+          return unref(orgList);
+        }
+      },
+      params: { ...params, _t: unref(timespan) },
+      onChange: (...args: any[]) => {
+        emit('change', ...args);
+      },
+    };
+  });
+
+  const getShowCreate = computed(() => {
+    const { showCreate } = props;
+    return unref(isCustomerUser) ? false : showCreate;
+  });
+
+  const handleReload = () => {
+    needReload.value = true;
+    timespan.value = Date.now();
+  };
+</script>
+
+<template>
+  <section class="flex">
+    <ApiTreeSelect v-bind="getBindProps" />
+    <Button v-if="getShowCreate" type="link" @click="handleOpenCreate">新增组织</Button>
+    <OrganizationDrawer v-if="getShowCreate" @register="registerDrawer" @success="handleReload" />
+  </section>
+</template>

@@ -25,7 +25,7 @@ export const schemas: FormSchema[] = [
   {
   {
     field: FieldsEnum.ACCESS_CREDENTIALS,
     field: FieldsEnum.ACCESS_CREDENTIALS,
     label: '访问凭证',
     label: '访问凭证',
-    component: 'Input',
+    component: 'InputPassword',
     ifShow: ({ model }) => model[FieldsEnum.IS_SHARE],
     ifShow: ({ model }) => model[FieldsEnum.IS_SHARE],
     componentProps: {
     componentProps: {
       maxLength: 64,
       maxLength: 64,

@@ -3,9 +3,13 @@
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { FieldsEnum, schemas, ViewTypeEnum } from './config';
   import { FieldsEnum, schemas, ViewTypeEnum } from './config';
   import { DataBoardRecord } from '/@/api/dataBoard/model';
   import { DataBoardRecord } from '/@/api/dataBoard/model';
-  import { Alert } from 'ant-design-vue';
+  import { Alert, Button, Tooltip } from 'ant-design-vue';
   import { ref, unref } from 'vue';
   import { ref, unref } from 'vue';
   import { nextTick } from 'vue';
   import { nextTick } from 'vue';
+  import { ModalParamsType } from '/#/utils';
+  import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { computed } from 'vue';
 
 
   const props = defineProps<{
   const props = defineProps<{
     shareApi?: (...args: any[]) => Promise<any>;
     shareApi?: (...args: any[]) => Promise<any>;
@@ -13,15 +17,20 @@
 
 
   const loading = ref(false);
   const loading = ref(false);
   const record = ref<DataBoardRecord>({} as unknown as DataBoardRecord);
   const record = ref<DataBoardRecord>({} as unknown as DataBoardRecord);
+  const link = ref('');
 
 
-  const [register, { closeModal }] = useModalInner(async (data: DataBoardRecord) => {
-    record.value = data;
-    await nextTick();
-    setFieldsValue({
-      [FieldsEnum.IS_SHARE]: data.viewType === ViewTypeEnum.PUBLIC_VIEW,
-      [FieldsEnum.ACCESS_CREDENTIALS]: data.accessCredentials,
-    });
-  });
+  const [register, { closeModal }] = useModalInner(
+    async (data: ModalParamsType<DataBoardRecord>) => {
+      const { record: value, href } = data;
+      record.value = value;
+      link.value = href;
+      await nextTick();
+      setFieldsValue({
+        [FieldsEnum.IS_SHARE]: value.viewType === ViewTypeEnum.PUBLIC_VIEW,
+        [FieldsEnum.ACCESS_CREDENTIALS]: value.accessCredentials,
+      });
+    }
+  );
 
 
   const [registerForm, { getFieldsValue, setFieldsValue }] = useForm({
   const [registerForm, { getFieldsValue, setFieldsValue }] = useForm({
     schemas,
     schemas,
@@ -32,6 +41,11 @@
 
 
   const emit = defineEmits(['register', 'success']);
   const emit = defineEmits(['register', 'success']);
 
 
+  const handleOpenLink = () => {
+    window.open(unref(link));
+  };
+  const { createMessage } = useMessage();
+
   const handleSubmit = async () => {
   const handleSubmit = async () => {
     try {
     try {
       loading.value = true;
       loading.value = true;
@@ -40,10 +54,23 @@
       await props?.shareApi?.({ id, ...value });
       await props?.shareApi?.({ id, ...value });
       closeModal();
       closeModal();
       emit('success');
       emit('success');
+      createMessage.success('操作成功');
     } finally {
     } finally {
       loading.value = false;
       loading.value = false;
     }
     }
   };
   };
+
+  const isPublicState = computed(() => {
+    return unref(record).viewType === ViewTypeEnum.PUBLIC_VIEW;
+  });
+
+  const { clipboardRef, isSuccessRef } = useCopyToClipboard();
+  const handleCopy = () => {
+    clipboardRef.value = unref(link);
+    if (unref(isSuccessRef)) {
+      createMessage.success('复制成功~');
+    }
+  };
 </script>
 </script>
 
 
 <template>
 <template>
@@ -54,5 +81,27 @@
       message="私有视图只有项目成员可以浏览,公开视图拥有一个公开的 URL,任何人无需登录即可浏览."
       message="私有视图只有项目成员可以浏览,公开视图拥有一个公开的 URL,任何人无需登录即可浏览."
     />
     />
     <BasicForm @register="registerForm" />
     <BasicForm @register="registerForm" />
+    <section>
+      <div v-if="isPublicState" class="mt-4">
+        <span> 设置分享后, 可通过如下 </span>
+        <Button type="link" class="!px-1" @click="handleOpenLink"> 链接 </Button>
+        <span>访问:</span>
+      </div>
+      <Tooltip v-if="isPublicState" title="点击复制链接">
+        <div
+          class="px-4 py-2 my-2 bg-gray-50 font-semibold tracking-wider text-base cursor-pointer truncate"
+          @click="handleCopy"
+        >
+          <span>{{ link }}</span>
+        </div>
+      </Tooltip>
+
+      <Alert type="warning">
+        <template #message>
+          <span class="font-bold mr-1">提示:</span>
+          <span>不要忘记将相关设备 <span class="mx-1 font-bold">公开</span> 以访问其数据</span>
+        </template>
+      </Alert>
+    </section>
   </BasicModal>
   </BasicModal>
 </template>
 </template>

 import { BasicColumn, FormSchema } from '/@/components/Table';
 import { BasicColumn, FormSchema } from '/@/components/Table';
-import { getOrganizationList } from '/@/api/system/system';
-import { copyTransFun } from '/@/utils/fnUtils';
 import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
 import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
 import { createImgPreview } from '/@/components/Preview';
 import { createImgPreview } from '/@/components/Preview';
 import { uploadThumbnail } from '/@/api/configuration/center/configurationCenter';
 import { uploadThumbnail } from '/@/api/configuration/center/configurationCenter';
+import { useComponentRegister } from '/@/components/Form';
+import { OrgTreeSelect } from '../../common/OrgTreeSelect';
+
+useComponentRegister('OrgTreeSelect', OrgTreeSelect);
 export enum Platform {
 export enum Platform {
   PHONE = 'phone',
   PHONE = 'phone',
   PC = 'pc',
   PC = 'pc',
@@ -126,14 +128,7 @@ export const formSchema: FormSchema[] = [
     field: 'organizationId',
     field: 'organizationId',
     label: '所属组织',
     label: '所属组织',
     required: true,
     required: true,
-    component: 'ApiTreeSelect',
-    componentProps: {
-      api: async () => {
-        const data = await getOrganizationList();
-        copyTransFun(data as any as any[]);
-        return data;
-      },
-    },
+    component: 'OrgTreeSelect',
   },
   },
   {
   {
     field: 'platform',
     field: 'platform',

@@ -28,11 +28,15 @@
   import { ViewTypeNameEnum } from '../../common/ShareModal/config';
   import { ViewTypeNameEnum } from '../../common/ShareModal/config';
   import { useModal } from '/@/components/Modal';
   import { useModal } from '/@/components/Modal';
   import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
   import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
+  import { ViewType } from '../../visual/board/config/panelDetail';
+  import { useRole } from '/@/hooks/business/useRole';
 
 
   const listColumn = ref(5);
   const listColumn = ref(5);
 
 
   const { createMessage } = useMessage();
   const { createMessage } = useMessage();
 
 
+  const { isCustomerUser } = useRole();
+
   const organizationId = ref<Nullable<number>>(null);
   const organizationId = ref<Nullable<number>>(null);
 
 
   const pagination = reactive<PaginationProps>({
   const pagination = reactive<PaginationProps>({
@@ -153,17 +157,20 @@
     getListData();
     getListData();
   };
   };
 
 
-  const { clipboardRef, isSuccessRef } = useCopyToClipboard();
-  const handleCreateShareUrl = (record: ConfigurationCenterItemsModal) => {
-    if (!unref(getShareFlag)) return;
-    const { origin } = location;
+  const createShareUrl = (record: ConfigurationCenterItemsModal) => {
     const searchParams = new URLSearchParams();
     const searchParams = new URLSearchParams();
     isDev && searchParams.set('dev', '1');
     isDev && searchParams.set('dev', '1');
     searchParams.set('share', 'SCADA');
     searchParams.set('share', 'SCADA');
     searchParams.set('configurationId', record.id);
     searchParams.set('configurationId', record.id);
     searchParams.set('publicId', record.publicId || '');
     searchParams.set('publicId', record.publicId || '');
     searchParams.set('lightbox', '1');
     searchParams.set('lightbox', '1');
-    const url = `${origin}${configurationPrefix}/?${searchParams.toString()}`;
+    return `${origin}${configurationPrefix}/?${searchParams.toString()}`;
+  };
+
+  const { clipboardRef, isSuccessRef } = useCopyToClipboard();
+  const handleCreateShareUrl = (record: ConfigurationCenterItemsModal) => {
+    if (!unref(getShareFlag)) return;
+    const url = createShareUrl(record);
     clipboardRef.value = url;
     clipboardRef.value = url;
     if (unref(isSuccessRef)) {
     if (unref(isSuccessRef)) {
       createMessage.success('复制成功～');
       createMessage.success('复制成功～');
@@ -173,7 +180,7 @@
   const [registerShareModal, { openModal }] = useModal();
   const [registerShareModal, { openModal }] = useModal();
 
 
   const handleOpenShareModal = (record: ConfigurationCenterItemsModal) => {
   const handleOpenShareModal = (record: ConfigurationCenterItemsModal) => {
-    openModal(true, record);
+    openModal(true, { record, href: createShareUrl(record) });
   };
   };
 
 
   const listEl = ref<Nullable<ComponentElRef>>(null);
   const listEl = ref<Nullable<ComponentElRef>>(null);
@@ -215,7 +222,7 @@
       >
       >
         <template #header>
         <template #header>
           <div class="flex gap-3 justify-end">
           <div class="flex gap-3 justify-end">
-            <Authority :value="ConfigurationPermission.CREATE">
+            <Authority v-if="!isCustomerUser" :value="ConfigurationPermission.CREATE">
               <Button type="primary" @click="handleCreateOrUpdate()">新增组态</Button>
               <Button type="primary" @click="handleCreateOrUpdate()">新增组态</Button>
             </Authority>
             </Authority>
             <CardLayoutButton v-model:value="listColumn" @change="handleCardLayoutChange" />
             <CardLayoutButton v-model:value="listColumn" @change="handleCardLayoutChange" />
@@ -228,7 +235,13 @@
         </template>
         </template>
         <template #renderItem="{ item }">
         <template #renderItem="{ item }">
           <List.Item>
           <List.Item>
-            <Card hoverable class="card-container">
+            <Card
+              :style="{
+                '--viewType': item.viewType === ViewType.PUBLIC_VIEW ? '#1890ff' : '#faad14',
+              }"
+              hoverable
+              class="card-container"
+            >
               <template #cover>
               <template #cover>
                 <div
                 <div
                   class="img-container h-full w-full !flex justify-center items-center text-center p-1 relative"
                   class="img-container h-full w-full !flex justify-center items-center text-center p-1 relative"
@@ -255,7 +268,7 @@
                     @click="handlePreview(item)"
                     @click="handlePreview(item)"
                   />
                   />
                 </Tooltip>
                 </Tooltip>
-                <Tooltip title="设计">
+                <Tooltip v-if="!isCustomerUser" title="设计">
                   <AuthIcon
                   <AuthIcon
                     :auth="ConfigurationPermission.DESIGN"
                     :auth="ConfigurationPermission.DESIGN"
                     class="!text-lg"
                     class="!text-lg"
@@ -273,6 +286,7 @@
                   />
                   />
                 </Tooltip>
                 </Tooltip>
                 <AuthDropDown
                 <AuthDropDown
+                  v-if="!isCustomerUser"
                   :dropMenuList="[
                   :dropMenuList="[
                     {
                     {
                       text: '分享',
                       text: '分享',
@@ -357,6 +371,6 @@
   }
   }
 
 
   .card-container:deep(.ant-card-cover) {
   .card-container:deep(.ant-card-cover) {
-    background-color: #2db7f5;
+    background-color: var(--viewType);
   }
   }
 </style>
 </style>

@@ -2,7 +2,70 @@
   <div>
   <div>
     <!-- 首页基础信息 -->
     <!-- 首页基础信息 -->
     <div class="md:flex">
     <div class="md:flex">
-      <Card size="small" class="md:w-1/3 w-full !md:mt-0 !mt-4 !md:mr-4" style="color: #666">
+      <Card
+        v-if="!isAdmin(role)"
+        size="small"
+        class="md:w-1/3 w-full !md:mt-0 !mt-4 !md:mr-4"
+        style="color: #666"
+      >
+        <div class="flex" style="height: 100px">
+          <div class="mr-4">
+            <img
+              v-if="!isAdmin(role)"
+              src="/src/assets/images/product.png"
+              style="width: 5.625rem; height: 5.625rem"
+            />
+            <img
+              v-else
+              src="/src/assets/images/product.png"
+              style="width: 5.625rem; height: 5.625rem"
+            />
+          </div>
+          <div class="flex-auto">
+            <div class="flex justify-between" style="align-items: center">
+              <div
+                v-if="!isAdmin(role)"
+                style="font-size: 1.625rem; color: #333; font-weight: bold"
+              >
+                <CountTo
+                  v-if="growCardList?.productInfo?.sumCount"
+                  :end-val="growCardList.productInfo.sumCount"
+                />
+                <CountTo v-else :end-val="0" />
+              </div>
+              <div style="font-size: 1.625rem; color: #333; font-weight: bold" v-else>
+                <CountTo
+                  v-if="growCardList?.productInfo?.sumCount"
+                  :end-val="growCardList.productInfo?.sumCount"
+                />
+                <CountTo v-else :end-val="0" />
+              </div>
+              <Tooltip>
+                <template #title>
+                  {{
+                    !isAdmin(role)
+                      ? `产品数：${growCardList?.productInfo?.sumCount} 今日新增 ${toThousands(
+                          growCardList?.productInfo?.todayAdd
+                        )}`
+                      : `产品数：${growCardList?.customerInfo?.sumCount} 今日新增 ${toThousands(
+                          growCardList?.productInfo?.todayAdd
+                        )}`
+                  }}
+                </template>
+                <img src="/src/assets/images/tip.png" style="width: 1.125rem; height: 1.125rem" />
+              </Tooltip>
+            </div>
+            <div> {{ !isAdmin(role) ? `产品数` : '产品数' }}</div>
+          </div>
+        </div>
+        <div v-if="!isAdmin(role)" class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5">
+          今日新增 {{ toThousands(growCardList?.productInfo?.todayAdd) }}</div
+        >
+        <div v-else class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5">
+          今日新增 {{ toThousands(growCardList?.productInfo?.todayAdd) }}</div
+        >
+      </Card>
+      <Card size="small" class="md:w-1/3 w-full !md:mt-0 !mt-4" style="color: #666">
         <div class="flex" style="height: 100px">
         <div class="flex" style="height: 100px">
           <div class="mr-4"
           <div class="mr-4"
             ><img
             ><img
@@ -33,7 +96,7 @@
           今日新增 {{ toThousands(growCardList?.deviceInfo?.todayAdd) }}
           今日新增 {{ toThousands(growCardList?.deviceInfo?.todayAdd) }}
         </div>
         </div>
       </Card>
       </Card>
-      <Card size="small" class="md:w-1/3 w-full !md:mt-0 !mt-4 !md:mr-4" style="color: #666">
+      <Card size="small" class="md:w-1/3 w-full !md:mt-0 !mt-4 !md:ml-4" style="color: #666">
         <div class="flex" style="height: 100px">
         <div class="flex" style="height: 100px">
           <div class="mr-4">
           <div class="mr-4">
             <img
             <img
@@ -70,7 +133,7 @@
                           growCardList?.alarmInfo?.todayAdd
                           growCardList?.alarmInfo?.todayAdd
                         )}`
                         )}`
                       : `租户总量：${growCardList?.tenantInfo?.sumCount} 今日新增 ${toThousands(
                       : `租户总量：${growCardList?.tenantInfo?.sumCount} 今日新增 ${toThousands(
-                          growCardList?.alarmInfo?.todayAdd
+                          growCardList?.tenantInfo?.todayAdd
                         )}`
                         )}`
                   }}
                   }}
                 </template>
                 </template>
@@ -87,7 +150,7 @@
           今日新增 {{ toThousands(growCardList?.tenantInfo?.todayAdd) }}</div
           今日新增 {{ toThousands(growCardList?.tenantInfo?.todayAdd) }}</div
         >
         >
       </Card>
       </Card>
-      <Card size="small" class="md:w-1/3 w-full !md:mt-0 !mt-4" style="color: #666">
+      <Card size="small" class="md:w-1/3 w-full !md:mt-0 !mt-4 !md:ml-4" style="color: #666">
         <div class="flex" style="height: 100px">
         <div class="flex" style="height: 100px">
           <div class="mr-4">
           <div class="mr-4">
             <img
             <img
@@ -104,8 +167,8 @@
                 style="font-size: 1.625rem; color: #333; font-weight: bold"
                 style="font-size: 1.625rem; color: #333; font-weight: bold"
               >
               >
                 <CountTo
                 <CountTo
-                  v-if="growCardList?.messageInfo?.messageCount"
-                  :end-val="growCardList.messageInfo.messageCount"
+                  v-if="growCardList?.messageInfo?.todayMessageAdd"
+                  :end-val="growCardList.messageInfo.todayMessageAdd"
                 />
                 />
                 <CountTo v-else :end-val="0" />
                 <CountTo v-else :end-val="0" />
               </div>
               </div>
@@ -120,88 +183,25 @@
                 <template #title>
                 <template #title>
                   {{
                   {{
                     !isAdmin(role)
                     !isAdmin(role)
-                      ? `消息数：${growCardList?.messageInfo?.messageCount} 今日新增 ${toThousands(
+                      ? `今日消息数：${
                           growCardList?.messageInfo?.todayMessageAdd
                           growCardList?.messageInfo?.todayMessageAdd
-                        )}`
+                        } 近30日新增 ${toThousands(growCardList?.messageInfo?.messageCount)}`
                       : `客户总量：${growCardList?.customerInfo?.sumCount} 今日新增 ${toThousands(
                       : `客户总量：${growCardList?.customerInfo?.sumCount} 今日新增 ${toThousands(
-                          growCardList?.messageInfo?.todayMessageAdd
+                          growCardList?.customerInfo?.todayAdd
                         )}`
                         )}`
                   }}
                   }}
                 </template>
                 </template>
                 <img src="/src/assets/images/tip.png" style="width: 1.125rem; height: 1.125rem" />
                 <img src="/src/assets/images/tip.png" style="width: 1.125rem; height: 1.125rem" />
               </Tooltip>
               </Tooltip>
             </div>
             </div>
-            <div> {{ !isAdmin(role) ? `消息数` : '客户总量' }}</div>
+            <div> {{ !isAdmin(role) ? `今日消息数` : '客户总量' }}</div>
           </div>
           </div>
         </div>
         </div>
         <div v-if="!isAdmin(role)" class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5">
         <div v-if="!isAdmin(role)" class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5">
-          今日新增 {{ toThousands(growCardList?.messageInfo?.todayMessageAdd) }}</div
+          近30日新增 {{ toThousands(growCardList?.messageInfo?.messageCount) }}</div
         >
         >
         <div v-else class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5">
         <div v-else class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5">
-          今日新增 {{ toThousands(growCardList?.customerInfo?.todayAdd) }}</div
-        >
-      </Card>
-      <Card
-        v-if="!isAdmin(role)"
-        size="small"
-        class="md:w-1/3 w-full !md:mt-0 !mt-4 !md:ml-4"
-        style="color: #666"
-      >
-        <div class="flex" style="height: 100px">
-          <div class="mr-4">
-            <img
-              v-if="!isAdmin(role)"
-              src="/src/assets/images/product.png"
-              style="width: 5.625rem; height: 5.625rem"
-            />
-            <img
-              v-else
-              src="/src/assets/images/product.png"
-              style="width: 5.625rem; height: 5.625rem"
-            />
-          </div>
-          <div class="flex-auto">
-            <div class="flex justify-between" style="align-items: center">
-              <div
-                v-if="!isAdmin(role)"
-                style="font-size: 1.625rem; color: #333; font-weight: bold"
-              >
-                <CountTo
-                  v-if="growCardList?.productInfo?.sumCount"
-                  :end-val="growCardList.productInfo.sumCount"
-                />
-                <CountTo v-else :end-val="0" />
-              </div>
-              <div style="font-size: 1.625rem; color: #333; font-weight: bold" v-else>
-                <CountTo
-                  v-if="growCardList?.productInfo?.sumCount"
-                  :end-val="growCardList.productInfo?.sumCount"
-                />
-                <CountTo v-else :end-val="0" />
-              </div>
-              <Tooltip>
-                <template #title>
-                  {{
-                    !isAdmin(role)
-                      ? `产品数：${growCardList?.productInfo?.sumCount} 今日新增 ${toThousands(
-                          growCardList?.productInfo?.todayAdd
-                        )}`
-                      : `产品数：${growCardList?.customerInfo?.sumCount} 今日新增 ${toThousands(
-                          growCardList?.productInfo?.todayAdd
-                        )}`
-                  }}
-                </template>
-                <img src="/src/assets/images/tip.png" style="width: 1.125rem; height: 1.125rem" />
-              </Tooltip>
-            </div>
-            <div> {{ !isAdmin(role) ? `产品数` : '产品数' }}</div>
-          </div>
-        </div>
-        <div v-if="!isAdmin(role)" class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5">
-          今日新增 {{ toThousands(growCardList?.productInfo?.todayAdd) }}</div
-        >
-        <div v-else class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5">
-          今日新增 {{ toThousands(growCardList?.productInfo?.todayAdd) }}</div
+          近30日新增 {{ toThousands(growCardList?.customerInfo?.todayAdd) }}</div
         >
         >
       </Card>
       </Card>
     </div>
     </div>

@@ -22,9 +22,12 @@
     shallowReactive,
     shallowReactive,
     onUnmounted,
     onUnmounted,
     nextTick,
     nextTick,
+    computed,
+    watch,
   } from 'vue';
   } from 'vue';
   import * as echarts from 'echarts';
   import * as echarts from 'echarts';
   import { seriesDataT } from './props';
   import { seriesDataT } from './props';
+  import { useAppStore } from '/@/store/modules/app';
 
 
   export default defineComponent({
   export default defineComponent({
     props: {
     props: {
@@ -35,10 +38,29 @@
     },
     },
 
 
     setup(props) {
     setup(props) {
+      const appStore = useAppStore();
+      const skinName = computed(() => {
+        return appStore.getDarkMode === 'light' ? '#ffffff' : '#151515';
+      });
+
       const chartsInstance = shallowReactive<{ [key: string]: echarts.ECharts }>({});
       const chartsInstance = shallowReactive<{ [key: string]: echarts.ECharts }>({});
 
 
       const { seriesStatusData } = toRefs(props);
       const { seriesStatusData } = toRefs(props);
 
 
+      watch(
+        () => appStore.getDarkMode,
+        (target) => {
+          const backgroundColor = target === 'light' ? '#ffffff' : '#151515';
+          for (const item of seriesStatusData.value) {
+            const { key } = item;
+            chartsInstance[key!]?.setOption({ backgroundColor });
+          }
+        },
+        {
+          immediate: true,
+        }
+      );
+
       const total = seriesStatusData.value
       const total = seriesStatusData.value
         .map((m) => m.value)
         .map((m) => m.value)
         .reduce((prev, cur) => prev! + cur!, 0);
         .reduce((prev, cur) => prev! + cur!, 0);
@@ -61,8 +83,9 @@
           chartsInstance[key!] = echarts.init(
           chartsInstance[key!] = echarts.init(
             document.getElementById(`chartPie${key}`) as HTMLElement
             document.getElementById(`chartPie${key}`) as HTMLElement
           );
           );
+          console.log('11', skinName.value);
           const option = {
           const option = {
-            backgroundColor: '#ffffff',
+            backgroundColor: skinName.value,
             tooltip: {
             tooltip: {
               trigger: 'item',
               trigger: 'item',
               formatter: `${legendKey}设备${((value! / total!) * 100).toFixed(2)}%`,
               formatter: `${legendKey}设备${((value! / total!) * 100).toFixed(2)}%`,
@@ -101,6 +124,9 @@
             ],
             ],
           };
           };
           chartsInstance[key!].setOption(option);
           chartsInstance[key!].setOption(option);
+          // chartsInstance[key!].setOption({
+          //   backgroundColor: skinName,
+          // });
         }
         }
       });
       });
 
 

@@ -5,10 +5,11 @@
   /></div>
   /></div>
 </template>
 </template>
 <script lang="ts">
 <script lang="ts">
-  import { defineComponent, PropType, ref, Ref, onMounted, toRefs } from 'vue';
+  import { defineComponent, PropType, ref, Ref, onMounted, toRefs, computed, watch } from 'vue';
   import { useECharts } from '/@/hooks/web/useECharts';
   import { useECharts } from '/@/hooks/web/useECharts';
   import { Empty } from 'ant-design-vue';
   import { Empty } from 'ant-design-vue';
   import { seriesDataT } from './props';
   import { seriesDataT } from './props';
+  import { useAppStore } from '/@/store/modules/app';
 
 
   export default defineComponent({
   export default defineComponent({
     components: { Empty },
     components: { Empty },
@@ -35,23 +36,22 @@
       },
       },
     },
     },
     setup(props) {
     setup(props) {
+      const appStore = useAppStore();
       const { legendData, seriesData } = toRefs(props);
       const { legendData, seriesData } = toRefs(props);
       const dataSeries: Ref<seriesDataT[]> = ref([]);
       const dataSeries: Ref<seriesDataT[]> = ref([]);
       const legendDatas: Ref<seriesDataT[]> = ref([]);
       const legendDatas: Ref<seriesDataT[]> = ref([]);
       dataSeries.value = seriesData.value as unknown as seriesDataT[];
       dataSeries.value = seriesData.value as unknown as seriesDataT[];
       legendDatas.value = legendData.value as unknown as seriesDataT[];
       legendDatas.value = legendData.value as unknown as seriesDataT[];
-
+      const skinName = computed(() => {
+        return appStore.getDarkMode === 'light' ? '#ffffff' : '#151515';
+      });
       const chartRef = ref<HTMLDivElement | null>(null);
       const chartRef = ref<HTMLDivElement | null>(null);
+
       const { setOptions, resize } = useECharts(chartRef as Ref<HTMLDivElement>);
       const { setOptions, resize } = useECharts(chartRef as Ref<HTMLDivElement>);
-      const labelLine = {
-        normal: {
-          show: true,
-          length2: 1,
-        },
-      } as any;
-      onMounted(() => {
-        setOptions({
-          backgroundColor: '#ffffff',
+
+      const getOptions: any = () => {
+        return {
+          backgroundColor: skinName.value,
           tooltip: {
           tooltip: {
             trigger: 'item',
             trigger: 'item',
             formatter: '{b} {d}%',
             formatter: '{b} {d}%',
@@ -72,7 +72,29 @@
               labelLine,
               labelLine,
             },
             },
           ],
           ],
-        });
+        };
+      };
+
+      watch(
+        () => appStore.getDarkMode,
+        (target) => {
+          const backgroundColor = target === 'light' ? '#ffffff' : '#151515';
+          setOptions &&
+            setOptions({
+              ...getOptions(),
+              backgroundColor,
+            });
+        }
+      );
+
+      const labelLine = {
+        normal: {
+          show: true,
+          length2: 1,
+        },
+      } as any;
+      onMounted(() => {
+        setOptions(getOptions());
         //自适应
         //自适应
         window.addEventListener('resize', () => resize());
         window.addEventListener('resize', () => resize());
       });
       });

@@ -42,8 +42,6 @@
 
 
   const role: string = userInfo?.roles[0];
   const role: string = userInfo?.roles[0];
 
 
-  console.log({ role });
-
   const loading = ref(true);
   const loading = ref(true);
 
 
   setTimeout(() => {
   setTimeout(() => {

 import { FormSchema } from '/@/components/Table';
 import { FormSchema } from '/@/components/Table';
-import { getOrganizationList } from '/@/api/system/system';
-import { copyTransFun } from '/@/utils/fnUtils';
 import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
 import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
 import { createImgPreview } from '/@/components/Preview';
 import { createImgPreview } from '/@/components/Preview';
 import { uploadThumbnail } from '/@/api/configuration/center/configurationCenter';
 import { uploadThumbnail } from '/@/api/configuration/center/configurationCenter';
+import { useComponentRegister } from '/@/components/Form';
+import { OrgTreeSelect } from '../common/OrgTreeSelect';
+
+useComponentRegister('OrgTreeSelect', OrgTreeSelect);
+
 export enum Platform {
 export enum Platform {
   PHONE = 0,
   PHONE = 0,
   PC = 1,
   PC = 1,
@@ -16,6 +19,8 @@ export enum ConfigurationPermission {
   SHARE = 'api:yt:dataview:center:share',
   SHARE = 'api:yt:dataview:center:share',
   DESIGN = 'api:yt:dataview:center:get_configuration_info:design',
   DESIGN = 'api:yt:dataview:center:get_configuration_info:design',
   PREVIEW = 'api:yt:dataview:center:get_configuration_info:preview',
   PREVIEW = 'api:yt:dataview:center:get_configuration_info:preview',
+  PUBLISH = 'api:yt:dataview:center:publish',
+  // CANCEL_PUBLISH = 'api:yt:dataview:center:cancel_publish',
 }
 }
 
 
 // 查询字段
 // 查询字段
@@ -78,29 +83,8 @@ export const formSchema: FormSchema[] = [
     field: 'organizationId',
     field: 'organizationId',
     label: '所属组织',
     label: '所属组织',
     required: true,
     required: true,
-    component: 'ApiTreeSelect',
-    componentProps: {
-      api: async () => {
-        const data = await getOrganizationList();
-        copyTransFun(data as any as any[]);
-        return data;
-      },
-    },
+    component: 'OrgTreeSelect',
   },
   },
-  // {
-  //   field: 'state',
-  //   label: '发布状态',
-  //   required: true,
-  //   component: 'RadioGroup',
-  //   defaultValue: Platform.PC,
-  //   componentProps: {
-  //     defaultValue: Platform.PC,
-  //     options: [
-  //       { label: '未发布', value: Platform.PC },
-  //       { label: '已发布', value: Platform.PHONE },
-  //     ],
-  //   },
-  // },
   {
   {
     field: 'remark',
     field: 'remark',
     label: '备注',
     label: '备注',

 <script setup lang="ts">
 <script setup lang="ts">
   import { List, Card, Button, PaginationProps, Tooltip } from 'ant-design-vue';
   import { List, Card, Button, PaginationProps, Tooltip } from 'ant-design-vue';
   import { ReloadOutlined } from '@ant-design/icons-vue';
   import { ReloadOutlined } from '@ant-design/icons-vue';
-  import { onMounted, reactive, ref, unref } from 'vue';
+  import { computed, onMounted, reactive, ref, unref } from 'vue';
   import { OrganizationIdTree, useResetOrganizationTree } from '../common/organizationIdTree';
   import { OrganizationIdTree, useResetOrganizationTree } from '../common/organizationIdTree';
   import {
   import {
     bigScreenCancelPublish,
     bigScreenCancelPublish,
@@ -29,6 +29,10 @@
   import { ShareModal } from '/@/views/common/ShareModal';
   import { ShareModal } from '/@/views/common/ShareModal';
   import { ViewTypeNameEnum } from '../common/ShareModal/config';
   import { ViewTypeNameEnum } from '../common/ShareModal/config';
   import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
   import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
+  import { ViewType } from '../visual/board/config/panelDetail';
+  import { useUserStore } from '/@/store/modules/user';
+  import { RoleEnum } from '/@/enums/roleEnum';
+  import { useRole } from '/@/hooks/business/useRole';
 
 
   const listColumn = ref(5);
   const listColumn = ref(5);
 
 
@@ -48,6 +52,7 @@
   });
   });
 
 
   const loading = ref(false);
   const loading = ref(false);
+  const { isCustomerUser } = useRole();
 
 
   const dataSource = ref<BigScreenCenterItemsModel[]>([]);
   const dataSource = ref<BigScreenCenterItemsModel[]>([]);
 
 
@@ -163,28 +168,31 @@
   const getPublicApiListData = () => {};
   const getPublicApiListData = () => {};
 
 
   const [registerShareModal, { openModal }] = useModal();
   const [registerShareModal, { openModal }] = useModal();
-  const handleOpenShareModal = (item: BigScreenCenterItemsModel) => {
-    openModal(true, item);
+  const handleOpenShareModal = (record: BigScreenCenterItemsModel) => {
+    openModal(true, { record, href: createShareUrl(record) });
   };
   };
 
 
+  const createShareUrl = (record: BigScreenCenterItemsModel) => {
+    const { origin } = location;
+    return `${origin}${largeDesignerPrefix}/#/share/preview/${record.id}/${record.publicId}`;
+  };
+
+  const userStore = useUserStore();
+  const hasPublicInterfacePermission = computed(() => {
+    return userStore.getUserInfo.roles![0] !== RoleEnum.CUSTOMER_USER;
+  });
+
   const { clipboardRef, isSuccessRef } = useCopyToClipboard();
   const { clipboardRef, isSuccessRef } = useCopyToClipboard();
   const handleCreateShareUrl = (record: BigScreenCenterItemsModel) => {
   const handleCreateShareUrl = (record: BigScreenCenterItemsModel) => {
-    const { origin } = location;
-    const { largeDesignerPrefix } = useGlobSetting();
-    clipboardRef.value = `${origin}${largeDesignerPrefix}/#/share/preview/${record.id}/${record.publicId}`;
+    clipboardRef.value = createShareUrl(record);
     if (unref(isSuccessRef)) {
     if (unref(isSuccessRef)) {
       createMessage.success('复制成功～');
       createMessage.success('复制成功～');
     }
     }
   };
   };
 
 
-  const handlePublish = async ({ id }) => {
-    await bigScreenPublish(id);
-    createMessage.success('发布成功');
-    getListData();
-  };
-  const handleCancelPublish = async ({ id }) => {
-    await bigScreenCancelPublish(id);
-    createMessage.success('取消发布成功');
+  const handlePublish = async ({ id, state }) => {
+    state === 0 ? await bigScreenPublish(id) : await bigScreenCancelPublish(id);
+    createMessage.success(state === 0 ? '发布成功' : '取消发布成功');
     getListData();
     getListData();
   };
   };
 </script>
 </script>
@@ -207,10 +215,10 @@
       >
       >
         <template #header>
         <template #header>
           <div class="flex gap-3 justify-end">
           <div class="flex gap-3 justify-end">
-            <Authority :value="ConfigurationPermission.CREATE">
-              <Button type="primary" @click="handleCreateOrUpdate()">新增大屏</Button>
+            <Authority v-if="!isCustomerUser" :value="ConfigurationPermission.CREATE">
+              <Button type="primary" @click="handleCreateOrUpdate()"> 新增大屏 </Button>
             </Authority>
             </Authority>
-            <Authority :value="ConfigurationPermission.CREATE">
+            <Authority v-if="hasPublicInterfacePermission" :value="ConfigurationPermission.CREATE">
               <Button type="primary" @click="handleCreateOrUpdatePublicApi()">公共接口管理</Button>
               <Button type="primary" @click="handleCreateOrUpdatePublicApi()">公共接口管理</Button>
             </Authority>
             </Authority>
             <CardLayoutButton v-model:value="listColumn" @change="handleCardLayoutChange" />
             <CardLayoutButton v-model:value="listColumn" @change="handleCardLayoutChange" />
@@ -223,7 +231,12 @@
         </template>
         </template>
         <template #renderItem="{ item }">
         <template #renderItem="{ item }">
           <List.Item>
           <List.Item>
-            <Card class="card-container">
+            <Card
+              :style="{
+                '--viewType': item.viewType === ViewType.PUBLIC_VIEW ? '#1890ff' : '#faad14',
+              }"
+              class="card-container"
+            >
               <template #cover>
               <template #cover>
                 <div class="h-full w-full relative hover-show-modal-content img-container">
                 <div class="h-full w-full relative hover-show-modal-content img-container">
                   <img
                   <img
@@ -265,7 +278,7 @@
                     @click="handlePreview(item)"
                     @click="handlePreview(item)"
                   />
                   />
                 </Tooltip>
                 </Tooltip>
-                <Tooltip title="设计">
+                <Tooltip v-if="!isCustomerUser" title="设计">
                   <AuthIcon
                   <AuthIcon
                     :disabled="item.state === 1"
                     :disabled="item.state === 1"
                     icon="ant-design:edit-outlined"
                     icon="ant-design:edit-outlined"
@@ -282,6 +295,7 @@
                   />
                   />
                 </Tooltip>
                 </Tooltip>
                 <AuthDropDown
                 <AuthDropDown
+                  v-if="!isCustomerUser"
                   :dropMenuList="[
                   :dropMenuList="[
                     {
                     {
                       text: '分享',
                       text: '分享',
@@ -291,19 +305,14 @@
                       onClick: handleOpenShareModal.bind(null, item),
                       onClick: handleOpenShareModal.bind(null, item),
                     },
                     },
                     {
                     {
-                      text: '发布',
-                      auth: ConfigurationPermission.UPDATE,
-                      icon: 'ant-design:node-expand-outlined',
+                      text: item.state == 0 ? '发布' : '取消发布',
+                      auth: ConfigurationPermission.PUBLISH,
+                      icon:
+                        item.state == 0
+                          ? 'ant-design:node-expand-outlined'
+                          : 'ant-design:node-collapse-outlined',
                       event: '',
                       event: '',
                       onClick: handlePublish.bind(null, item),
                       onClick: handlePublish.bind(null, item),
-                      disabled: item.state === 0 ? false : true,
-                    },
-                    {
-                      text: '取消发布',
-                      icon: 'ant-design:node-collapse-outlined',
-                      event: '',
-                      onClick: handleCancelPublish.bind(null, item),
-                      disabled: item.state === 1 ? false : true,
                     },
                     },
                     {
                     {
                       text: '编辑',
                       text: '编辑',
@@ -421,6 +430,6 @@
   }
   }
 
 
   .card-container:deep(.ant-card-cover) {
   .card-container:deep(.ant-card-cover) {
-    background-color: #2db7f5;
+    background-color: var(--viewType);
   }
   }
 </style>
 </style>