Merge branch 'local_dev_ft' into 'main'

feat:新增大屏设计器页面和跳转配置

See merge request yunteng/thingskit-front!503

@@ -16,7 +16,7 @@ VITE_GLOB_PUBLIC_PATH = /
 # VITE_PROXY = [["/api","http://localhost:8080/api"],["/thingskit-drawio","http://localhost:3000/"]]
 VITE_PROXY = [["/api","http://222.180.200.114:48080/api"],["/thingskit-drawio","http://localhost:3000/"],["/large-designer", "http://localhost:5555/large-designer/"]]
 # VITE_PROXY = [["/api","http://121.37.251.8:8080/api"],["/thingskit-drawio","http://localhost:3000/"]]
-# VITE_PROXY = [["/api","http://192.168.10.103:8080/api"],["/thingskit-drawio","http://192.168.10.136:8080/api"]]
+# VITE_PROXY = [["/api","http://192.168.10.125:8080/api"],["/thingskit-drawio","http://192.168.10.125:8080/api"]]
 
 # 实时数据的ws地址
 # VITE_WEB_SOCKET = ws://localhost:8080/api/ws/plugins/telemetry?token=
@@ -39,6 +39,9 @@ VITE_GLOB_API_URL_PREFIX=/yt
 #configuration
 VITE_GLOB_CONFIGURATION = /thingskit-drawio
 
+# 大屏设计器
+VITE_GLOB_LARGE_DESIGNER = /large-designer
+
 # Content Security Policy
 VITE_GLOB_CONTENT_SECURITY_POLICY = 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
-
-# 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://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

+import { defHttp } from '/@/utils/http/axios';
+import type {
+  queryPageParams,
+  BigScreenCenterParams,
+  ConfigurationCenterInfo,
+  BigScreenCenterItemsModal,
+} from './model/bigscreenCenterModel';
+import { getPageData } from '../../base';
+import { FileUploadResponse } from '../../oem/model';
+enum API {
+  basicUrl = '/data_view',
+  UPLOAD = '/oss/upload',
+}
+
+export const getPage = (params: queryPageParams) => {
+  return getPageData<BigScreenCenterItemsModal>(params, API.basicUrl);
+};
+
+export const saveConfigurationCenter = (params: BigScreenCenterParams) => {
+  return defHttp.post({
+    url: API.basicUrl,
+    data: params,
+  });
+};
+
+export const updateConfigurationCenter = (params: BigScreenCenterParams) => {
+  return defHttp.put({
+    url: API.basicUrl,
+    data: params,
+  });
+};
+
+export const deleteBigScreenenter = (ids: string[]) => {
+  return defHttp.delete({
+    url: API.basicUrl,
+    data: {
+      ids: ids,
+    },
+  });
+};
+
+export const saveOrUpdateBigScreenCenter = (params: ConfigurationCenterInfo, isUpdate: boolean) => {
+  return isUpdate ? updateConfigurationCenter(params) : saveConfigurationCenter(params);
+};
+
+export const uploadThumbnail = (file: FormData) => {
+  return defHttp.post<FileUploadResponse>({ url: API.UPLOAD, params: file });
+};

+import { BasicPageParams } from '/@/api/model/baseModel';
+
+export interface BigScreenCenterItemsModel {
+  id: string;
+  name: string;
+  createTime: string;
+  creator: string;
+  remark: string;
+}
+export type queryPageParams = BasicPageParams & {
+  name?: Nullable<string>;
+  organizationId?: Nullable<number>;
+};
+
+export interface ConfigurationModal {
+  items: BigScreenCenterItemsModel[];
+  total: number;
+}
+
+export interface BigScreenCenterParams {
+  name: string;
+  createTime: string;
+  creator: string;
+  remark: string;
+  defaultContent?: string;
+}
+export type ConfigurationCenterInfo = BigScreenCenterParams;

-<script lang="ts" setup>
-  import { Icon } from '/@/components/Icon';
-  import { computed, ExtractPropTypes, unref } from 'vue';
-  import { usePermission } from '/@/hooks/web/usePermission';
-
-  interface AuthIconProps extends ExtractPropTypes<typeof Icon> {
-    auth?: string;
-  }
-
-  const props = defineProps<AuthIconProps>();
-
-  const emit = defineEmits(['click']);
-
-  const { hasPermission } = usePermission();
-
-  const getHasPermission = computed(() => {
-    const { auth } = props;
-    return auth ? hasPermission(auth) : true;
-  });
-
-  const getBindProps = computed(() => {
-    return {
-      ...props,
-      ...(unref(getHasPermission) ? { onClick: (event: Event) => emit('click', event) } : {}),
-    };
-  });
-</script>
-
-<template>
-  <Icon
-    v-bind="getBindProps"
-    class="justify-center items-center"
-    :class="getHasPermission ? '' : '!cursor-not-allowed !text-gray-200'"
-  />
-</template>
+<script lang="ts" setup>
+  import { Icon } from '/@/components/Icon';
+  import { computed, ExtractPropTypes, unref } from 'vue';
+  import { usePermission } from '/@/hooks/web/usePermission';
+
+  interface AuthIconProps extends ExtractPropTypes<typeof Icon> {
+    auth?: string;
+  }
+
+  const props = defineProps<AuthIconProps>();
+
+  const emit = defineEmits(['click']);
+
+  const { hasPermission } = usePermission();
+
+  const getHasPermission = computed(() => {
+    const { auth } = props;
+    console.log(auth);
+    return auth ? hasPermission(auth) : true;
+  });
+
+  const getBindProps = computed(() => {
+    return {
+      ...props,
+      ...(unref(getHasPermission) ? { onClick: (event: Event) => emit('click', event) } : {}),
+    };
+  });
+</script>
+
+<template>
+  <Icon
+    v-bind="getBindProps"
+    class="justify-center items-center"
+    :class="getHasPermission ? '' : '!cursor-not-allowed !text-gray-200'"
+  />
+</template>

-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,
-  } = 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,
-    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,
+  } = 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 { 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,
-  } = 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,
-  };
-}
-
-/**
- * @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,
+  } = 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;
+}

+<template>
+  <BasicDrawer
+    v-bind="$attrs"
+    @register="registerDrawer"
+    showFooter
+    :title="getTitle"
+    width="30%"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm" />
+  </BasicDrawer>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, computed, unref } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { formSchema, Platform } from './config';
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { saveOrUpdateBigScreenCenter } from '/@/api/bigscreen/center/bigscreenCenter';
+  import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
+  import { buildUUID } from '/@/utils/uuid';
+
+  export default defineComponent({
+    name: 'BigScreenDrawer',
+    components: { BasicDrawer, BasicForm },
+    emits: ['success', 'register'],
+    setup(_, { emit }) {
+      const isUpdate = ref(true);
+
+      const [registerForm, { validate, setFieldsValue, resetFields }] = useForm({
+        labelWidth: 120,
+        schemas: formSchema,
+        showActionButtonGroup: false,
+      });
+
+      const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+        await resetFields();
+        setDrawerProps({ confirmLoading: false });
+        isUpdate.value = !!data?.isUpdate;
+        if (unref(isUpdate)) {
+          if (data.record.thumbnail) {
+            data.record.thumbnail = [
+              { uid: buildUUID(), name: 'name', url: data.record.thumbnail } as FileItem,
+            ];
+          }
+          if (data.record.organizationDTO) {
+            await setFieldsValue(data.record);
+          } else {
+            Reflect.deleteProperty(data.record, 'organizationId');
+            await setFieldsValue(data.record);
+          }
+        }
+      });
+
+      const getTitle = computed(() => (!unref(isUpdate) ? '新增大屏' : '编辑大屏'));
+
+      const getDefaultContent = (platform: Platform) => {
+        if (platform === Platform.PC) {
+        }
+      };
+
+      async function handleSubmit() {
+        try {
+          const { createMessage } = useMessage();
+          const values = await validate();
+          if (Reflect.has(values, 'thumbnail')) {
+            const file = (values.thumbnail || []).at(0) || {};
+            values.thumbnail = file.url || null;
+          }
+          setDrawerProps({ confirmLoading: true });
+          let saveMessage = '添加成功';
+          let updateMessage = '修改成功';
+          values.defaultContent = getDefaultContent(values.platform);
+          await saveOrUpdateBigScreenCenter(values, unref(isUpdate));
+          closeDrawer();
+          emit('success');
+          createMessage.success(unref(isUpdate) ? updateMessage : saveMessage);
+        } finally {
+          setDrawerProps({ confirmLoading: false });
+        }
+      }
+
+      return {
+        getTitle,
+        registerDrawer,
+        registerForm,
+        handleSubmit,
+      };
+    },
+  });
+</script>

+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 { createImgPreview } from '/@/components/Preview';
+import { uploadThumbnail } from '/@/api/configuration/center/configurationCenter';
+export enum Platform {
+  PHONE = 0,
+  PC = 1,
+}
+
+export enum ConfigurationPermission {
+  CREATE = 'api:yt:dataview:center:post',
+  UPDATE = 'api:yt:dataview:center:update',
+  DELETE = 'api:yt:dataview:center:delete',
+  DESIGN = 'api:yt:dataview:center:get_configuration_info:design',
+  PREVIEW = 'api:yt:dataview:center:get_configuration_info:preview',
+}
+
+// 查询字段
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '大屏名称',
+    component: 'Input',
+    colProps: { span: 8 },
+    componentProps: {
+      maxLength: 36,
+      placeholder: '请输入大屏名称',
+    },
+  },
+];
+
+export const formSchema: FormSchema[] = [
+  {
+    field: 'thumbnail',
+    label: '缩略图',
+    component: 'ApiUpload',
+    changeEvent: 'update:fileList',
+    valueField: 'fileList',
+    componentProps: () => {
+      return {
+        listType: 'picture-card',
+        maxFileLimit: 1,
+        api: async (file: File) => {
+          try {
+            const formData = new FormData();
+            formData.set('file', file);
+            const { fileStaticUri, fileName } = await uploadThumbnail(formData);
+            return {
+              uid: fileStaticUri,
+              name: fileName,
+              url: fileStaticUri,
+            } as FileItem;
+          } catch (error) {
+            return {};
+          }
+        },
+        onPreview: (fileList: FileItem) => {
+          createImgPreview({ imageList: [fileList.url!] });
+        },
+      };
+    },
+  },
+
+  {
+    field: 'name',
+    label: '大屏名称',
+    required: true,
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入大屏名称',
+      maxLength: 255,
+    },
+  },
+  {
+    field: 'organizationId',
+    label: '所属组织',
+    required: true,
+    component: 'ApiTreeSelect',
+    componentProps: {
+      api: async () => {
+        const data = await getOrganizationList();
+        copyTransFun(data as any as any[]);
+        return data;
+      },
+    },
+  },
+  {
+    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',
+    label: '备注',
+    component: 'InputTextArea',
+    componentProps: {
+      placeholder: '请输入备注',
+      maxLength: 255,
+    },
+  },
+  {
+    field: 'id',
+    label: '',
+    component: 'Input',
+    show: false,
+    componentProps: {
+      maxLength: 36,
+      placeholder: 'id',
+    },
+  },
+];

+<script setup lang="ts">
+  import { List, Card, Button, PaginationProps, Tooltip } from 'ant-design-vue';
+  import { ReloadOutlined } from '@ant-design/icons-vue';
+  import { onMounted, reactive, ref, unref } from 'vue';
+  import { OrganizationIdTree, useResetOrganizationTree } from '../common/organizationIdTree';
+  import { deleteBigScreenenter, getPage } from '/@/api/bigscreen/center/bigscreenCenter';
+  import { BigScreenCenterItemsModel } from '/@/api/bigscreen/center/model/bigscreenCenterModel';
+  import { PageWrapper } from '/@/components/Page';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { ConfigurationPermission, searchFormSchema } from './config';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { Authority } from '/@/components/Authority';
+  import ConfigurationCenterDrawer from './BigScreenDrawer.vue';
+  import { useDrawer } from '/@/components/Drawer';
+  import { getBoundingClientRect } from '/@/utils/domUtils';
+  import configurationSrc from '/@/assets/icons/configuration.svg';
+  import { cloneDeep } from 'lodash';
+  import { useGlobSetting } from '/@/hooks/setting';
+  import { AuthIcon, CardLayoutButton } from '/@/components/Widget';
+  import AuthDropDown from '/@/components/Widget/AuthDropDown.vue';
+
+  const listColumn = ref(5);
+
+  const { createMessage } = useMessage();
+
+  const organizationId = ref<Nullable<number>>(null);
+
+  const pagination = reactive<PaginationProps>({
+    size: 'small',
+    showTotal: (total: number) => `共 ${total} 条数据`,
+    current: 1,
+    pageSize: unref(listColumn) * 2,
+    onChange: (page: number) => {
+      pagination.current = page;
+      getListData();
+    },
+  });
+
+  const loading = ref(false);
+
+  const dataSource = ref<BigScreenCenterItemsModel[]>([]);
+
+  const [registerForm, { getFieldsValue }] = useForm({
+    schemas: searchFormSchema,
+    showAdvancedButton: true,
+    labelWidth: 100,
+    compact: true,
+    resetFunc: () => {
+      resetFn();
+      organizationId.value = null;
+      return getListData();
+    },
+    submitFunc: async () => {
+      const value = getFieldsValue();
+      getListData(value);
+    },
+  });
+
+  async function getListData(value: Recordable = {}) {
+    try {
+      loading.value = true;
+      const pageSize = unref(listColumn) * 2;
+      const { items, total } = await getPage({
+        organizationId: unref(organizationId),
+        ...value,
+        page: pagination.current!,
+        pageSize,
+      });
+
+      dataSource.value = items;
+      Object.assign(pagination, { total, pageSize });
+    } catch (error) {
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  onMounted(() => {
+    getListData();
+  });
+
+  const searchInfo = reactive<Recordable>({});
+  const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo);
+  const handleSelect = (orgId: number) => {
+    organizationId.value = orgId;
+    getListData();
+  };
+
+  const [registerDrawer, { openDrawer }] = useDrawer();
+
+  const handleCreateOrUpdate = (record?: BigScreenCenterItemsModel) => {
+    if (record) {
+      openDrawer(true, {
+        isUpdate: true,
+        record: cloneDeep(record),
+      });
+    } else {
+      openDrawer(true, {
+        isUpdate: false,
+      });
+    }
+  };
+
+  const { largeDesignerPrefix } = useGlobSetting();
+
+  const handlePreview = (record: BigScreenCenterItemsModel) => {
+    window.open(`${largeDesignerPrefix}/${record.id}`);
+  };
+
+  const handleDesign = (record: BigScreenCenterItemsModel) => {
+    window.open(`${largeDesignerPrefix}/${record.id}`);
+  };
+
+  const handleDelete = async (record: BigScreenCenterItemsModel) => {
+    try {
+      await deleteBigScreenenter([record.id]);
+      createMessage.success('删除成功');
+      await getListData();
+    } catch (error) {}
+  };
+
+  const handleCardLayoutChange = () => {
+    pagination.current = 1;
+    getListData();
+  };
+
+  const listEl = ref<Nullable<ComponentElRef>>(null);
+
+  onMounted(() => {
+    const clientHeight = document.documentElement.clientHeight;
+    const rect = getBoundingClientRect(unref(listEl)!.$el!) as DOMRect;
+    // margin-top 24 height 24
+    const paginationHeight = 24 + 24 + 8;
+    // list pading top 8 maring-top 8 extra slot 56
+    const listContainerMarginBottom = 8 + 8 + 56;
+    const listContainerHeight =
+      clientHeight - rect.top - paginationHeight - listContainerMarginBottom;
+    const listContainerEl = (unref(listEl)!.$el as HTMLElement).querySelector(
+      '.ant-spin-container'
+    ) as HTMLElement;
+    listContainerEl &&
+      (listContainerEl.style.height = listContainerHeight + 'px') &&
+      (listContainerEl.style.overflowY = 'auto') &&
+      (listContainerEl.style.overflowX = 'hidden');
+  });
+</script>
+
+<template>
+  <PageWrapper dense contentFullHeight contentClass="flex">
+    <OrganizationIdTree @select="handleSelect" ref="organizationIdTreeRef" />
+    <section class="flex-auto p-4 w-3/4 xl:w-4/5 w-full configuration-list">
+      <div class="flex-auto w-full bg-light-50 dark:bg-dark-900 p-4">
+        <BasicForm @register="registerForm" />
+      </div>
+      <List
+        ref="listEl"
+        :loading="loading"
+        class="flex-auto bg-light-50 dark:bg-dark-900 !p-2 !mt-4"
+        position="bottom"
+        :pagination="pagination"
+        :data-source="dataSource"
+        :grid="{ gutter: 4, column: listColumn }"
+      >
+        <template #header>
+          <div class="flex gap-3 justify-end">
+            <Authority :value="ConfigurationPermission.CREATE">
+              <Button type="primary" @click="handleCreateOrUpdate()">新增大屏</Button>
+            </Authority>
+            <CardLayoutButton v-model:value="listColumn" @change="handleCardLayoutChange" />
+            <Tooltip title="刷新">
+              <Button type="primary" @click="getListData">
+                <ReloadOutlined @click="getListData" />
+              </Button>
+            </Tooltip>
+          </div>
+        </template>
+        <template #renderItem="{ item }">
+          <List.Item>
+            <Card hoverable>
+              <template #cover>
+                <div class="h-full w-full !flex justify-center items-center text-center p-1">
+                  <img
+                    class="w-full h-36"
+                    alt="example"
+                    :src="item.thumbnail || configurationSrc"
+                    @click="handlePreview(item)"
+                  />
+                </div>
+              </template>
+              <template class="ant-card-actions" #actions>
+                <Tooltip title="预览">
+                  <AuthIcon
+                    class="!text-lg"
+                    icon="ant-design:eye-outlined"
+                    @click="handlePreview(item)"
+                  />
+                </Tooltip>
+                <Tooltip title="设计">
+                  <AuthIcon
+                    class="!text-lg"
+                    icon="ant-design:edit-outlined"
+                    @click="handleDesign(item)"
+                  />
+                </Tooltip>
+                <AuthDropDown
+                  :dropMenuList="[
+                    {
+                      text: '编辑',
+                      auth: ConfigurationPermission.UPDATE,
+                      icon: 'clarity:note-edit-line',
+                      event: '',
+                      onClick: handleCreateOrUpdate.bind(null, item),
+                    },
+                    {
+                      text: '删除',
+                      auth: ConfigurationPermission.DELETE,
+                      icon: 'ant-design:delete-outlined',
+                      event: '',
+                      popconfirm: {
+                        title: '是否确认删除操作?',
+                        onConfirm: handleDelete.bind(null, item),
+                      },
+                    },
+                  ]"
+                  :trigger="['hover']"
+                />
+              </template>
+              <Card.Meta>
+                <template #title>
+                  <span class="truncate">{{ item.name }}</span>
+                </template>
+                <template #description>
+                  <div class="truncate h-11">
+                    <div class="truncate">{{ item.organizationDTO.name }}</div>
+                    <div class="truncate">{{ item.remark || '' }} </div>
+                  </div>
+                </template>
+              </Card.Meta>
+            </Card>
+          </List.Item>
+        </template>
+      </List>
+    </section>
+    <ConfigurationCenterDrawer @register="registerDrawer" @success="getListData" />
+  </PageWrapper>
+</template>
+
+<style lang="less" scoped>
+  .configuration-list:deep(.ant-list-header) {
+    border-bottom: none !important;
+  }
+
+  .configuration-list:deep(.ant-list-pagination) {
+    height: 24px;
+  }
+
+  .configuration-list:deep(.ant-card-body) {
+    padding: 16px !important;
+  }
+
+  .configuration-list:deep(.ant-list-empty-text) {
+    @apply w-full h-full flex justify-center items-center;
+  }
+</style>

-import { MenuTypeEnum, MenuModeEnum, TriggerEnum, MixSidebarTriggerEnum } from '/@/enums/menuEnum';
-import {
-  ContentEnum,
-  PermissionModeEnum,
-  ThemeEnum,
-  RouterTransitionEnum,
-  SettingButtonPositionEnum,
-  SessionTimeoutProcessingEnum,
-} from '/@/enums/appEnum';
-
-import { CacheTypeEnum } from '/@/enums/cacheEnum';
-
-export type LocaleType = 'zh_CN' | 'en' | 'ru' | 'ja' | 'ko';
-
-export interface MenuSetting {
-  bgColor: string;
-  fixed: boolean;
-  collapsed: boolean;
-  canDrag: boolean;
-  show: boolean;
-  hidden: boolean;
-  split: boolean;
-  menuWidth: number;
-  mode: MenuModeEnum;
-  type: MenuTypeEnum;
-  theme: ThemeEnum;
-  topMenuAlign: 'start' | 'center' | 'end';
-  trigger: TriggerEnum;
-  accordion: boolean;
-  closeMixSidebarOnChange: boolean;
-  collapsedShowTitle: boolean;
-  mixSideTrigger: MixSidebarTriggerEnum;
-  mixSideFixed: boolean;
-}
-
-export interface MultiTabsSetting {
-  cache: boolean;
-  show: boolean;
-  showQuick: boolean;
-  canDrag: boolean;
-  showRedo: boolean;
-  showFold: boolean;
-}
-
-export interface HeaderSetting {
-  bgColor: string;
-  fixed: boolean;
-  show: boolean;
-  theme: ThemeEnum;
-  // Turn on full screen
-  showFullScreen: boolean;
-  // Whether to show the lock screen
-  useLockPage: boolean;
-  // Show document button
-  showDoc: boolean;
-  // Show message center button
-  showNotice: boolean;
-  showSearch: boolean;
-}
-
-export interface LocaleSetting {
-  showPicker: boolean;
-  // Current language
-  locale: LocaleType;
-  // default language
-  fallback: LocaleType;
-  // available Locales
-  availableLocales: LocaleType[];
-}
-
-export interface TransitionSetting {
-  //  Whether to open the page switching animation
-  enable: boolean;
-  // Route basic switching animation
-  basicTransition: RouterTransitionEnum;
-  // Whether to open page switching loading
-  openPageLoading: boolean;
-  // Whether to open the top progress bar
-  openNProgress: boolean;
-}
-
-export interface ProjectConfig {
-  // Storage location of permission related information
-  permissionCacheType: CacheTypeEnum;
-  // Whether to show the configuration button
-  showSettingButton: boolean;
-  // Whether to show the theme switch button
-  showDarkModeToggle: boolean;
-  // Configure where the button is displayed
-  settingButtonPosition: SettingButtonPositionEnum;
-  // Permission mode
-  permissionMode: PermissionModeEnum;
-  // Session timeout processing
-  sessionTimeoutProcessing: SessionTimeoutProcessingEnum;
-  // Website gray mode, open for possible mourning dates
-  grayMode: boolean;
-  // Whether to turn on the color weak mode
-  colorWeak: boolean;
-  // Theme color
-  themeColor: string;
-
-  // The main interface is displayed in full screen, the menu is not displayed, and the top
-  fullContent: boolean;
-  // content width
-  contentMode: ContentEnum;
-  // Whether to display the logo
-  showLogo: boolean;
-  // Whether to show the global footer
-  showFooter: boolean;
-  // menuType: MenuTypeEnum;
-  headerSetting: HeaderSetting;
-  // menuSetting
-  menuSetting: MenuSetting;
-  // Multi-tab settings
-  multiTabsSetting: MultiTabsSetting;
-  // Animation configuration
-  transitionSetting: TransitionSetting;
-  // pageLayout whether to enable keep-alive
-  openKeepAlive: boolean;
-  // Lock screen time
-  lockTime: number;
-  // Show breadcrumbs
-  showBreadCrumb: boolean;
-  // Show breadcrumb icon
-  showBreadCrumbIcon: boolean;
-  // Use error-handler-plugin
-  useErrorHandle: boolean;
-  // Whether to open back to top
-  useOpenBackTop: boolean;
-  // Is it possible to embed iframe pages
-  canEmbedIFramePage: boolean;
-  // Whether to delete unclosed messages and notify when switching the interface
-  closeMessageOnSwitch: boolean;
-  // Whether to cancel the http request that has been sent but not responded when switching the interface.
-  removeAllHttpPending: boolean;
-}
-
-export interface GlobConfig {
-  // Site title
-  title: string;
-  // Service interface url
-  apiUrl: string;
-  // Upload url
-  uploadUrl?: string;
-  //  Service interface url prefix
-  urlPrefix?: string;
-  // Project abbreviation
-  shortName: string;
-  // configuration center proxy prefix
-  configurationPrefix: string;
-  // socket url
-  socketUrl: string;
-  // alarm notify alarm duration
-  alarmNotifyDuration: string;
-  // alarm notify polling interval
-  alarmPollingInterval: string;
-  // upgrade your http policy to https
-  securityPolicy: string;
-}
-export interface GlobEnvConfig {
-  // Site title
-  VITE_GLOB_APP_TITLE: string;
-  // Service interface url
-  VITE_GLOB_API_URL: string;
-  // Service interface url prefix
-  VITE_GLOB_API_URL_PREFIX?: string;
-  // Project abbreviation
-  VITE_GLOB_APP_SHORT_NAME: string;
-  // Upload url
-  VITE_GLOB_UPLOAD_URL?: string;
-  // configuration
-  VITE_GLOB_CONFIGURATION: string;
-  // socket
-  VITE_GLOB_WEB_SOCKET: string;
-  // force transform http to https
-  VITE_GLOB_CONTENT_SECURITY_POLICY: string;
-  // notify polling interval time
-  VITE_GLOB_ALARM_NOTIFY_POLLING_INTERVAL_TIME: string;
-  // notify duration
-  VITE_GLOB_ALARM_NOTIFY_DURATION: string;
-}
+import { MenuTypeEnum, MenuModeEnum, TriggerEnum, MixSidebarTriggerEnum } from '/@/enums/menuEnum';
+import {
+  ContentEnum,
+  PermissionModeEnum,
+  ThemeEnum,
+  RouterTransitionEnum,
+  SettingButtonPositionEnum,
+  SessionTimeoutProcessingEnum,
+} from '/@/enums/appEnum';
+
+import { CacheTypeEnum } from '/@/enums/cacheEnum';
+
+export type LocaleType = 'zh_CN' | 'en' | 'ru' | 'ja' | 'ko';
+
+export interface MenuSetting {
+  bgColor: string;
+  fixed: boolean;
+  collapsed: boolean;
+  canDrag: boolean;
+  show: boolean;
+  hidden: boolean;
+  split: boolean;
+  menuWidth: number;
+  mode: MenuModeEnum;
+  type: MenuTypeEnum;
+  theme: ThemeEnum;
+  topMenuAlign: 'start' | 'center' | 'end';
+  trigger: TriggerEnum;
+  accordion: boolean;
+  closeMixSidebarOnChange: boolean;
+  collapsedShowTitle: boolean;
+  mixSideTrigger: MixSidebarTriggerEnum;
+  mixSideFixed: boolean;
+}
+
+export interface MultiTabsSetting {
+  cache: boolean;
+  show: boolean;
+  showQuick: boolean;
+  canDrag: boolean;
+  showRedo: boolean;
+  showFold: boolean;
+}
+
+export interface HeaderSetting {
+  bgColor: string;
+  fixed: boolean;
+  show: boolean;
+  theme: ThemeEnum;
+  // Turn on full screen
+  showFullScreen: boolean;
+  // Whether to show the lock screen
+  useLockPage: boolean;
+  // Show document button
+  showDoc: boolean;
+  // Show message center button
+  showNotice: boolean;
+  showSearch: boolean;
+}
+
+export interface LocaleSetting {
+  showPicker: boolean;
+  // Current language
+  locale: LocaleType;
+  // default language
+  fallback: LocaleType;
+  // available Locales
+  availableLocales: LocaleType[];
+}
+
+export interface TransitionSetting {
+  //  Whether to open the page switching animation
+  enable: boolean;
+  // Route basic switching animation
+  basicTransition: RouterTransitionEnum;
+  // Whether to open page switching loading
+  openPageLoading: boolean;
+  // Whether to open the top progress bar
+  openNProgress: boolean;
+}
+
+export interface ProjectConfig {
+  // Storage location of permission related information
+  permissionCacheType: CacheTypeEnum;
+  // Whether to show the configuration button
+  showSettingButton: boolean;
+  // Whether to show the theme switch button
+  showDarkModeToggle: boolean;
+  // Configure where the button is displayed
+  settingButtonPosition: SettingButtonPositionEnum;
+  // Permission mode
+  permissionMode: PermissionModeEnum;
+  // Session timeout processing
+  sessionTimeoutProcessing: SessionTimeoutProcessingEnum;
+  // Website gray mode, open for possible mourning dates
+  grayMode: boolean;
+  // Whether to turn on the color weak mode
+  colorWeak: boolean;
+  // Theme color
+  themeColor: string;
+
+  // The main interface is displayed in full screen, the menu is not displayed, and the top
+  fullContent: boolean;
+  // content width
+  contentMode: ContentEnum;
+  // Whether to display the logo
+  showLogo: boolean;
+  // Whether to show the global footer
+  showFooter: boolean;
+  // menuType: MenuTypeEnum;
+  headerSetting: HeaderSetting;
+  // menuSetting
+  menuSetting: MenuSetting;
+  // Multi-tab settings
+  multiTabsSetting: MultiTabsSetting;
+  // Animation configuration
+  transitionSetting: TransitionSetting;
+  // pageLayout whether to enable keep-alive
+  openKeepAlive: boolean;
+  // Lock screen time
+  lockTime: number;
+  // Show breadcrumbs
+  showBreadCrumb: boolean;
+  // Show breadcrumb icon
+  showBreadCrumbIcon: boolean;
+  // Use error-handler-plugin
+  useErrorHandle: boolean;
+  // Whether to open back to top
+  useOpenBackTop: boolean;
+  // Is it possible to embed iframe pages
+  canEmbedIFramePage: boolean;
+  // Whether to delete unclosed messages and notify when switching the interface
+  closeMessageOnSwitch: boolean;
+  // Whether to cancel the http request that has been sent but not responded when switching the interface.
+  removeAllHttpPending: boolean;
+}
+
+export interface GlobConfig {
+  // Site title
+  title: string;
+  // Service interface url
+  apiUrl: string;
+  // Upload url
+  uploadUrl?: string;
+  //  Service interface url prefix
+  urlPrefix?: string;
+  // Project abbreviation
+  shortName: string;
+  // configuration center proxy prefix
+  configurationPrefix: string;
+  // large designer proxy prefix
+  largeDesignerPrefix: string;
+  // socket url
+  socketUrl: string;
+  // alarm notify alarm duration
+  alarmNotifyDuration: string;
+  // alarm notify polling interval
+  alarmPollingInterval: string;
+  // upgrade your http policy to https
+  securityPolicy: string;
+}
+export interface GlobEnvConfig {
+  // Site title
+  VITE_GLOB_APP_TITLE: string;
+  // Service interface url
+  VITE_GLOB_API_URL: string;
+  // Service interface url prefix
+  VITE_GLOB_API_URL_PREFIX?: string;
+  // Project abbreviation
+  VITE_GLOB_APP_SHORT_NAME: string;
+  // Upload url
+  VITE_GLOB_UPLOAD_URL?: string;
+  // configuration
+  VITE_GLOB_CONFIGURATION: string;
+  // large designer
+  VITE_GLOB_LARGE_DESIGNER: string;
+  // socket
+  VITE_GLOB_WEB_SOCKET: string;
+  // force transform http to https
+  VITE_GLOB_CONTENT_SECURITY_POLICY: string;
+  // notify polling interval time
+  VITE_GLOB_ALARM_NOTIFY_POLLING_INTERVAL_TIME: string;
+  // notify duration
+  VITE_GLOB_ALARM_NOTIFY_DURATION: string;
+}