Merge remote-tracking branch 'origin/ww' into main_dev

# Conflicts:
#	src/views/dataview/index.vue

-import { defHttp } from '/@/utils/http/axios';
-import type {
-  queryPageParams,
-  BigScreenCenterParams,
-  ConfigurationCenterInfo,
-  BigScreenCenterItemsModel,
-  BigScreenInterfaceParams,
-} from './model/bigscreenCenterModel';
-import { getPageData } from '../../base';
-import { FileUploadResponse } from '../../oem/model';
-enum API {
-  basicUrl = '/data_view',
-  UPLOAD = '/oss/upload',
-  //大屏公共接口
-  DATA_VIEW_INTERFACE = '/data_view_interface',
-}
-
-export const getPage = (params: queryPageParams) => {
-  return getPageData<BigScreenCenterItemsModel>(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 });
-};
-
-export const bigScreenPublish = (id) => {
-  return defHttp.get({
-    url: API.basicUrl + '/publish/' + id,
-  });
-};
-
-export const bigScreenCancelPublish = (id) => {
-  return defHttp.get({
-    url: API.basicUrl + '/cancel_publish/' + id,
-  });
-};
-
-/**
- * 大屏公共接口
- */
-
-export const getDataViewInterfacePage = (params: queryPageParams) => {
-  return getPageData<BigScreenCenterItemsModel>(params, API.DATA_VIEW_INTERFACE);
-};
-
-export const saveDataViewInterface = (params: BigScreenInterfaceParams) => {
-  return defHttp.post({
-    url: API.DATA_VIEW_INTERFACE,
-    data: params,
-  });
-};
-
-export const updateDataViewInterface = (params: BigScreenInterfaceParams) => {
-  return defHttp.put({
-    url: API.DATA_VIEW_INTERFACE,
-    data: params,
-  });
-};
-
-export const deleteBigViewInterface = (ids: string[]) => {
-  return defHttp.delete({
-    url: API.DATA_VIEW_INTERFACE,
-    data: {
-      ids: ids,
-    },
-  });
-};
-
-export const getPublish = (id) => {
-  return defHttp.get({
-    url: API.DATA_VIEW_INTERFACE + '/publish/' + id,
-  });
-};
-
-export const getCancelPublish = (id) => {
-  return defHttp.get({
-    url: API.DATA_VIEW_INTERFACE + '/cancel_publish/' + id,
-  });
-};
-
-//批量发布和取消发布
-export const putPublishOrCancelPublish = (type, ids) => {
-  return defHttp.put({
-    url: `${API.DATA_VIEW_INTERFACE}/${
-      type === 'batchPublish' ? 'batch_publish' : 'batch_cancel_publish'
-    }/?ids=${ids.join(',')}`,
-  });
-};
+import { defHttp } from '/@/utils/http/axios';
+import type {
+  queryPageParams,
+  BigScreenCenterParams,
+  ConfigurationCenterInfo,
+  BigScreenCenterItemsModel,
+  BigScreenInterfaceParams,
+} from './model/bigscreenCenterModel';
+import { getPageData } from '../../base';
+import { FileUploadResponse } from '../../oem/model';
+enum API {
+  basicUrl = '/data_view',
+  UPLOAD = '/oss/upload',
+  //大屏公共接口
+  DATA_VIEW_INTERFACE = '/data_view_interface',
+
+  SHARE = '/data_view/share',
+}
+
+export const getPage = (params: queryPageParams) => {
+  return getPageData<BigScreenCenterItemsModel>(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 });
+};
+
+export const bigScreenPublish = (id) => {
+  return defHttp.get({
+    url: API.basicUrl + '/publish/' + id,
+  });
+};
+
+export const bigScreenCancelPublish = (id) => {
+  return defHttp.get({
+    url: API.basicUrl + '/cancel_publish/' + id,
+  });
+};
+
+/**
+ * 大屏公共接口
+ */
+
+export const getDataViewInterfacePage = (params: queryPageParams) => {
+  return getPageData<BigScreenCenterItemsModel>(params, API.DATA_VIEW_INTERFACE);
+};
+
+export const saveDataViewInterface = (params: BigScreenInterfaceParams) => {
+  return defHttp.post({
+    url: API.DATA_VIEW_INTERFACE,
+    data: params,
+  });
+};
+
+export const updateDataViewInterface = (params: BigScreenInterfaceParams) => {
+  return defHttp.put({
+    url: API.DATA_VIEW_INTERFACE,
+    data: params,
+  });
+};
+
+export const deleteBigViewInterface = (ids: string[]) => {
+  return defHttp.delete({
+    url: API.DATA_VIEW_INTERFACE,
+    data: {
+      ids: ids,
+    },
+  });
+};
+
+export const getPublish = (id) => {
+  return defHttp.get({
+    url: API.DATA_VIEW_INTERFACE + '/publish/' + id,
+  });
+};
+
+export const getCancelPublish = (id) => {
+  return defHttp.get({
+    url: API.DATA_VIEW_INTERFACE + '/cancel_publish/' + id,
+  });
+};
+
+//批量发布和取消发布
+export const putPublishOrCancelPublish = (type, ids) => {
+  return defHttp.put({
+    url: `${API.DATA_VIEW_INTERFACE}/${
+      type === 'batchPublish' ? 'batch_publish' : 'batch_cancel_publish'
+    }/?ids=${ids.join(',')}`,
+  });
+};
+
+export const shareLargeScreen = (record: {
+  id: string;
+  accessCredentials?: string;
+  isShare: boolean;
+}) => {
+  const { accessCredentials, isShare, id } = record;
+  return defHttp.post(
+    {
+      url: `${API.SHARE}/${id}`,
+      params: { isShare, ...(accessCredentials ? { accessCredentials } : {}) },
+    },
+    {
+      joinParamsToUrl: true,
+    }
+  );
+};

-import { BasicPageParams } from '/@/api/model/baseModel';
-
-export interface BigScreenCenterItemsModel {
-  id: string;
-  name: string;
-  createTime: string;
-  creator: string;
-  remark: string;
-  state: number;
-}
-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;
-
-/**
- * 大屏公共接口
- */
-export interface BigScreenInterfaceParams {
-  createTime: string;
-  creator: string;
-  defaultConfig: string;
-  description: string;
-  enabled: boolean;
-  icon: string;
-  id: string;
-  interfaceName: string;
-  name: string;
-  remark: string;
-  requestContentType: 0;
-  requestHttpType: string;
-  requestOriginUrl: string;
-  requestParams: string;
-  requestUrl: string;
-  roleIds: [string];
-  state: number;
-  tenantExpireTime: string;
-  tenantId: string;
-  tenantProfileId: string;
-  tenantStatus: string;
-  updateTime: string;
-  updater: string;
-}
+import { BasicPageParams } from '/@/api/model/baseModel';
+
+export interface BigScreenCenterItemsModel {
+  id: string;
+  name: string;
+  createTime: string;
+  creator: string;
+  remark: string;
+  state: number;
+  publicId: 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;
+
+/**
+ * 大屏公共接口
+ */
+export interface BigScreenInterfaceParams {
+  createTime: string;
+  creator: string;
+  defaultConfig: string;
+  description: string;
+  enabled: boolean;
+  icon: string;
+  id: string;
+  interfaceName: string;
+  name: string;
+  remark: string;
+  requestContentType: 0;
+  requestHttpType: string;
+  requestOriginUrl: string;
+  requestParams: string;
+  requestUrl: string;
+  roleIds: [string];
+  state: number;
+  tenantExpireTime: string;
+  tenantId: string;
+  tenantProfileId: string;
+  tenantStatus: string;
+  updateTime: string;
+  updater: string;
+}

@@ -109,6 +109,6 @@ export const schedueLogCleanPage = () => {
 //详情
 //详情
 export const schedueLogDetailPage = (jobId, id) => {
 export const schedueLogDetailPage = (jobId, id) => {
   return defHttp.get<ReportQueryParam>({
   return defHttp.get<ReportQueryParam>({
-    url: ReportManagerApi.JOB_LOG_DETAIL_API + '/' + jobId + '/' + id,
+    url: ReportManagerApi.JOB_LOG_DETAIL_API + jobId + '/' + id,
   });
   });
 };
 };

@@ -5,6 +5,7 @@
 
 
   interface AuthIconProps extends ExtractPropTypes<typeof Icon> {
   interface AuthIconProps extends ExtractPropTypes<typeof Icon> {
     auth?: string;
     auth?: string;
+    disabled?: boolean;
   }
   }
 
 
   const props = defineProps<AuthIconProps>();
   const props = defineProps<AuthIconProps>();
@@ -14,8 +15,8 @@
   const { hasPermission } = usePermission();
   const { hasPermission } = usePermission();
 
 
   const getHasPermission = computed(() => {
   const getHasPermission = computed(() => {
-    const { auth } = props;
-    return auth ? hasPermission(auth) : true;
+    const { auth, disabled } = props;
+    return disabled ? false : auth ? hasPermission(auth) : true;
   });
   });
 
 
   const getBindProps = computed(() => {
   const getBindProps = computed(() => {

@@ -242,7 +242,7 @@
                   <span
                   <span
                     class="absolute top-0 left-0 text-light-50 transform -rotate-45 translate-y-1"
                     class="absolute top-0 left-0 text-light-50 transform -rotate-45 translate-y-1"
                   >
                   >
-                    {{ ViewTypeNameEnum[item.viewType] }}
+                    {{ ViewTypeNameEnum[item.viewType] || ViewTypeNameEnum.PRIVATE_VIEW }}
                   </span>
                   </span>
                 </div>
                 </div>
               </template>
               </template>
@@ -263,9 +263,10 @@
                     @click="handleDesign(item)"
                     @click="handleDesign(item)"
                   />
                   />
                 </Tooltip>
                 </Tooltip>
-                <Tooltip title="分享">
+                <Tooltip title="点击复制分享链接">
                   <AuthIcon
                   <AuthIcon
                     :auth="ConfigurationPermission.SHARE"
                     :auth="ConfigurationPermission.SHARE"
+                    :disabled="!item.publicId"
                     class="!text-lg"
                     class="!text-lg"
                     icon="ant-design:share-alt-outlined"
                     icon="ant-design:share-alt-outlined"
                     @click="handleCreateShareUrl(item)"
                     @click="handleCreateShareUrl(item)"
@@ -348,10 +349,14 @@
     .img-container {
     .img-container {
       border-top-left-radius: 80px;
       border-top-left-radius: 80px;
       background-color: #fff;
       background-color: #fff;
+
+      img {
+        border-top-left-radius: 80px;
+      }
     }
     }
   }
   }
 
 
   .card-container:deep(.ant-card-cover) {
   .card-container:deep(.ant-card-cover) {
-    background-color: red;
+    background-color: #2db7f5;
   }
   }
 </style>
 </style>

-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',
-    },
-  },
-];
+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',
+  SHARE = 'api:yt:dataview:center:share',
+  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 {
-    bigScreenCancelPublish,
-    bigScreenPublish,
-    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';
-  import { PublicApiDrawer } from './publicApi/index';
-
-  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 [registerPublicDrawer, { openDrawer: openPublicApiDrawer }] = useDrawer();
-
-  const handleCreateOrUpdate = (record?: BigScreenCenterItemsModel) => {
-    if (record) {
-      openDrawer(true, {
-        isUpdate: true,
-        record: cloneDeep(record),
-      });
-    } else {
-      openDrawer(true, {
-        isUpdate: false,
-      });
-    }
-  };
-
-  const handleCreateOrUpdatePublicApi = () => openPublicApiDrawer(true);
-
-  const { largeDesignerPrefix } = useGlobSetting();
-
-  const handlePreview = (record: BigScreenCenterItemsModel) => {
-    window.open(`${largeDesignerPrefix}/#/chart/preview/${record.id}`);
-  };
-
-  const handleDesign = (record: BigScreenCenterItemsModel) => {
-    if (record.state === 1) return;
-    window.open(`${largeDesignerPrefix}/#/chart/home/${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');
-  });
-
-  const getPublicApiListData = () => {};
-
-  const handlePublish = async ({ id }) => {
-    await bigScreenPublish(id);
-    createMessage.success('发布成功');
-    getListData();
-  };
-  const handleCancelPublish = async ({ id }) => {
-    await bigScreenCancelPublish(id);
-    createMessage.success('取消发布成功');
-    getListData();
-  };
-</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>
-            <Authority :value="ConfigurationPermission.CREATE">
-              <Button type="primary" @click="handleCreateOrUpdatePublicApi()">公共接口管理</Button>
-            </Authority>
-            <CardLayoutButton v-model:value="listColumn" @change="handleCardLayoutChange" />
-            <Tooltip title="刷新">
-              <Button type="primary" @click="getListData">
-                <ReloadOutlined />
-              </Button>
-            </Tooltip>
-          </div>
-        </template>
-        <template #renderItem="{ item }">
-          <List.Item>
-            <Card>
-              <template #cover>
-                <div class="h-full w-full hover-show-modal-content">
-                  <img
-                    style="position: relative"
-                    class="w-full h-45 hover-show-modal"
-                    alt="example"
-                    :src="item.thumbnail || configurationSrc"
-                    @click="handlePreview(item)"
-                  />
-                  <div class="masker-content">
-                    <div class="masker-text">
-                      <div
-                        ><span>{{ item.name }}</span></div
-                      >
-                      <div>
-                        <span class="masker-text-org"
-                          >所属组织：{{ item?.organizationDTO?.name }}</span
-                        >
-                      </div>
-                      <div>
-                        <span class="masker-text-state"
-                          >发布状态：{{ item.state === 1 ? '已发布' : '未发布' }}</span
-                        >
-                      </div>
-                    </div>
-                  </div>
-                </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 ${
-                      item.state === 1 ? '!cursor-not-allowed !text-gray-200' : ''
-                    }`"
-                    icon="ant-design:edit-outlined"
-                    @click="handleDesign(item)"
-                  />
-                </Tooltip>
-                <AuthDropDown
-                  :dropMenuList="[
-                    {
-                      text: '发布',
-                      auth: ConfigurationPermission.UPDATE,
-                      icon: 'ant-design:node-expand-outlined',
-                      event: '',
-                      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: '编辑',
-                      auth: ConfigurationPermission.UPDATE,
-                      icon: 'clarity:note-edit-line',
-                      event: '',
-                      onClick: handleCreateOrUpdate.bind(null, item),
-                      disabled: item.state === 0 ? false : true,
-                    },
-                    {
-                      text: '删除',
-                      auth: ConfigurationPermission.DELETE,
-                      icon: 'ant-design:delete-outlined',
-                      disabled: item.state === 0 ? false : true,
-                      event: '',
-                      popconfirm: {
-                        title: '是否确认删除操作?',
-                        onConfirm: handleDelete.bind(null, item),
-                      },
-                    },
-                  ]"
-                  :trigger="['hover']"
-                />
-              </template>
-            </Card>
-          </List.Item>
-        </template>
-      </List>
-    </section>
-    <ConfigurationCenterDrawer @register="registerDrawer" @success="getListData" />
-    <PublicApiDrawer @register="registerPublicDrawer" @success="getPublicApiListData" />
-  </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;
-  }
-
-  :deep(.ant-card-body) {
-    display: none;
-  }
-
-  .masker-content {
-    opacity: 0;
-    z-index: 1000;
-    width: 100%;
-    height: 11.25rem;
-    background-color: rgba(0, 0, 0, 0.5);
-    position: absolute;
-    transition: opacity 0.5;
-    pointer-events: none;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-
-    .masker-text {
-      color: #fff;
-      font-size: 16px;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      line-height: 2.5rem;
-      margin: 4rem 0;
-
-      .masker-text-org {
-        font-size: 12px;
-        position: absolute;
-        bottom: 0;
-        left: 0.8rem;
-      }
-
-      .masker-text-state {
-        font-size: 12px;
-        position: absolute;
-        bottom: 0;
-        right: 0.8rem;
-      }
-    }
-  }
-
-  .hover-show-modal-content:hover > .masker-content {
-    opacity: 1;
-  }
-</style>
+<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 {
+    bigScreenCancelPublish,
+    bigScreenPublish,
+    deleteBigScreenenter,
+    getPage,
+    shareLargeScreen,
+  } 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';
+  import { PublicApiDrawer } from './publicApi/index';
+  import { useModal } from '/@/components/Modal';
+  import { ShareModal } from '/@/views/common/ShareModal';
+  import { ViewTypeNameEnum } from '../common/ShareModal/config';
+  import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
+
+  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 [registerPublicDrawer, { openDrawer: openPublicApiDrawer }] = useDrawer();
+
+  const handleCreateOrUpdate = (record?: BigScreenCenterItemsModel) => {
+    if (record) {
+      openDrawer(true, {
+        isUpdate: true,
+        record: cloneDeep(record),
+      });
+    } else {
+      openDrawer(true, {
+        isUpdate: false,
+      });
+    }
+  };
+
+  const handleCreateOrUpdatePublicApi = () => openPublicApiDrawer(true);
+
+  const { largeDesignerPrefix } = useGlobSetting();
+
+  const handlePreview = (record: BigScreenCenterItemsModel) => {
+    window.open(`${largeDesignerPrefix}/#/chart/preview/${record.id}`);
+  };
+
+  const handleDesign = (record: BigScreenCenterItemsModel) => {
+    if (record.state === 1) return;
+    window.open(`${largeDesignerPrefix}/#/chart/home/${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');
+  });
+
+  const getPublicApiListData = () => {};
+
+  const [registerShareModal, { openModal }] = useModal();
+  const handleOpenShareModal = (item: BigScreenCenterItemsModel) => {
+    openModal(true, item);
+  };
+
+  const { clipboardRef, isSuccessRef } = useCopyToClipboard();
+  const handleCreateShareUrl = (record: BigScreenCenterItemsModel) => {
+    const { origin } = location;
+    const { largeDesignerPrefix } = useGlobSetting();
+    clipboardRef.value = `${origin}${largeDesignerPrefix}/#/share/preview/${record.id}/${record.publicId}`;
+    if (unref(isSuccessRef)) {
+      createMessage.success('复制成功～');
+    }
+  };
+
+  const handlePublish = async ({ id }) => {
+    await bigScreenPublish(id);
+    createMessage.success('发布成功');
+    getListData();
+  };
+  const handleCancelPublish = async ({ id }) => {
+    await bigScreenCancelPublish(id);
+    createMessage.success('取消发布成功');
+    getListData();
+  };
+</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>
+            <Authority :value="ConfigurationPermission.CREATE">
+              <Button type="primary" @click="handleCreateOrUpdatePublicApi()">公共接口管理</Button>
+            </Authority>
+            <CardLayoutButton v-model:value="listColumn" @change="handleCardLayoutChange" />
+            <Tooltip title="刷新">
+              <Button type="primary" @click="getListData">
+                <ReloadOutlined />
+              </Button>
+            </Tooltip>
+          </div>
+        </template>
+        <template #renderItem="{ item }">
+          <List.Item>
+            <Card class="card-container">
+              <template #cover>
+                <div class="h-full w-full relative hover-show-modal-content img-container">
+                  <img
+                    style="position: relative"
+                    class="w-full h-45 hover-show-modal"
+                    alt="example"
+                    :src="item.thumbnail || configurationSrc"
+                    @click="handlePreview(item)"
+                  />
+                  <span
+                    class="absolute top-0 left-0 text-light-50 transform -rotate-45 translate-y-1"
+                  >
+                    {{ ViewTypeNameEnum[item.viewType] || ViewTypeNameEnum.PRIVATE_VIEW }}
+                  </span>
+                  <div class="masker-content">
+                    <div class="masker-text">
+                      <div
+                        ><span>{{ item.name }}</span></div
+                      >
+                      <div>
+                        <span class="masker-text-org"
+                          >所属组织：{{ item?.organizationDTO?.name }}</span
+                        >
+                      </div>
+                      <div>
+                        <span class="masker-text-state"
+                          >发布状态：{{ item.state === 1 ? '已发布' : '未发布' }}</span
+                        >
+                      </div>
+                    </div>
+                  </div>
+                </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
+                    :disabled="item.state === 1"
+                    icon="ant-design:edit-outlined"
+                    @click="handleDesign(item)"
+                  />
+                </Tooltip>
+                <Tooltip title="点击复制分享链接">
+                  <AuthIcon
+                    :auth="ConfigurationPermission.SHARE"
+                    :disabled="!item.publicId"
+                    class="!text-lg"
+                    icon="ant-design:share-alt-outlined"
+                    @click="handleCreateShareUrl(item)"
+                  />
+                </Tooltip>
+                <AuthDropDown
+                  :dropMenuList="[
+                    {
+                      text: '分享',
+                      auth: ConfigurationPermission.SHARE,
+                      icon: 'ant-design:share-alt-outlined',
+                      event: '',
+                      onClick: handleOpenShareModal.bind(null, item),
+                    },
+                    {
+                      text: '发布',
+                      auth: ConfigurationPermission.UPDATE,
+                      icon: 'ant-design:node-expand-outlined',
+                      event: '',
+                      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: '编辑',
+                      auth: ConfigurationPermission.UPDATE,
+                      icon: 'clarity:note-edit-line',
+                      event: '',
+                      onClick: handleCreateOrUpdate.bind(null, item),
+                      disabled: item.state === 0 ? false : true,
+                    },
+                    {
+                      text: '删除',
+                      auth: ConfigurationPermission.DELETE,
+                      icon: 'ant-design:delete-outlined',
+                      disabled: item.state === 0 ? false : true,
+                      event: '',
+                      popconfirm: {
+                        title: '是否确认删除操作?',
+                        onConfirm: handleDelete.bind(null, item),
+                      },
+                    },
+                  ]"
+                  :trigger="['hover']"
+                />
+              </template>
+            </Card>
+          </List.Item>
+        </template>
+      </List>
+    </section>
+    <ShareModal
+      @register="registerShareModal"
+      :shareApi="shareLargeScreen"
+      @success="getListData"
+    />
+    <ConfigurationCenterDrawer @register="registerDrawer" @success="getListData" />
+    <PublicApiDrawer @register="registerPublicDrawer" @success="getPublicApiListData" />
+  </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;
+  }
+
+  :deep(.ant-card-body) {
+    display: none;
+  }
+
+  .masker-content {
+    opacity: 0;
+    z-index: 1000;
+    width: 100%;
+    height: 11.25rem;
+    background-color: rgba(0, 0, 0, 0.5);
+    position: absolute;
+    transition: opacity 0.5;
+    pointer-events: none;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    .masker-text {
+      color: #fff;
+      font-size: 16px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      line-height: 2.5rem;
+      margin: 4rem 0;
+
+      .masker-text-org {
+        font-size: 12px;
+        position: absolute;
+        bottom: 0;
+        left: 0.8rem;
+      }
+
+      .masker-text-state {
+        font-size: 12px;
+        position: absolute;
+        bottom: 0;
+        right: 0.8rem;
+      }
+    }
+  }
+
+  .hover-show-modal-content:hover > .masker-content {
+    opacity: 1;
+  }
+
+  .card-container {
+    // background-color: red;
+    .img-container {
+      border-top-left-radius: 80px;
+      background-color: #fff;
+
+      img {
+        border-top-left-radius: 80px;
+      }
+    }
+  }
+
+  .card-container:deep(.ant-card-cover) {
+    background-color: #2db7f5;
+  }
+</style>

@@ -53,7 +53,7 @@
     baseColProps: { span: 8 },
     baseColProps: { span: 8 },
     schemas: searchFormSchema,
     schemas: searchFormSchema,
     submitFunc: async () => {
     submitFunc: async () => {
-      getDataSource();
+      getDataSource({ pageSize: pagination.pageSize, page: 1 });
     },
     },
   });
   });
 
 

@@ -16,7 +16,6 @@
 
 
   const getDataSchema = computed(() => {
   const getDataSchema = computed(() => {
     const { frontId, isEdit } = props;
     const { frontId, isEdit } = props;
-    console.log({ frontId });
     if (!frontId) return [];
     if (!frontId) return [];
     return dataSourceSchema(isEdit, frontId);
     return dataSourceSchema(isEdit, frontId);
   });
   });