feat: basic implement share data borad page

ww
1 parent 00889916
Showing 7 changed files with 101 additions and 11 deletions
src/api/dataBoard/index.ts
src/router/routes/basic.ts
src/router/routes/index.ts
src/views/data/board/config/config.ts
src/views/data/board/detail/index.vue
src/views/data/board/hook/useSocketConnect.ts
src/views/data/board/index.vue
--- a/src/api/dataBoard/index.ts
View file @dcd3250
+++ b/src/api/dataBoard/index.ts
View file @dcd3250
@@ -27,6 +27,10 @@ enum DataComponentUrl {
   UPDATE_DATA_COMPONENT = '/data_component',
 }
+enum DataBoardShareUrl {
+  GET_DATA_COMPONENT = '/noauth/share/dataBoard',
+}
+
 enum DeviceUrl {
   GET_DEVICE = '/device/list/master',
   GET_SLAVE_DEVICE = '/device/list/slave',
@@ -141,6 +145,18 @@ export const updateDataComponent = (params: UpdateDataComponentParams) => {
 };
 /**
+ * @description 分享组件信息
+ * @param params
+ * @returns
+ */
+export const getShareBoardComponentInfo = (params: { boardId: string; tenantId: string }) => {
+  const { boardId, tenantId } = params;
+  return defHttp.get({
+    url: `${DataBoardShareUrl.GET_DATA_COMPONENT}/${boardId}/${tenantId}`,
+  });
+};
+
+/**
  * @description 获取所有主设备
  * @param params
  * @returns
--- a/src/router/routes/basic.ts
View file @dcd3250
+++ b/src/router/routes/basic.ts
View file @dcd3250
@@ -6,6 +6,7 @@ import {
   EXCEPTION_COMPONENT,
   PAGE_NOT_FOUND_NAME,
 } from '/@/router/constant';
+import { DATA_BOARD_SHARE_URL } from '/@/views/data/board/config/config';
 // 404 on a page
 export const PAGE_NOT_FOUND_ROUTE: AppRouteRecordRaw = {
@@ -76,3 +77,13 @@ export const ERROR_LOG_ROUTE: AppRouteRecordRaw = {
     },
   ],
 };
+
+export const DATA_BOARD_SHARE: AppRouteRecordRaw = {
+  path: DATA_BOARD_SHARE_URL(),
+  name: 'dataBoardSharePage',
+  component: () => import('/@/views/data/board/detail/index.vue'),
+  meta: {
+    ignoreAuth: true,
+    title: '分享看板',
+  },
+};
--- a/src/router/routes/index.ts
View file @dcd3250
+++ b/src/router/routes/index.ts
View file @dcd3250
 import type { AppRouteRecordRaw, AppRouteModule } from '/@/router/types';
-import { PAGE_NOT_FOUND_ROUTE, REDIRECT_ROUTE } from '/@/router/routes/basic';
+import { DATA_BOARD_SHARE, PAGE_NOT_FOUND_ROUTE, REDIRECT_ROUTE } from '/@/router/routes/basic';
 import { mainOutRoutes } from './mainOut';
 import { PageEnum } from '/@/enums/pageEnum';
 import { t } from '/@/hooks/web/useI18n';
@@ -85,4 +85,5 @@ export const basicRoutes = [
   ...mainOutRoutes,
   REDIRECT_ROUTE,
   PAGE_NOT_FOUND_ROUTE,
+  DATA_BOARD_SHARE,
 ];
--- a/src/views/data/board/config/config.ts
View file @dcd3250
+++ b/src/views/data/board/config/config.ts
View file @dcd3250
@@ -8,3 +8,11 @@ export enum MoreActionEvent {
 export const DEFAULT_WIDGET_WIDTH = 6;
 export const DEFAULT_WIDGET_HEIGHT = 6;
+
+export const DATA_BOARD_SHARE_URL = (boardId = ':boardId', tenantId = ':tenantId') =>
+  `/data/board/share/${boardId}/${tenantId}`;
+
+export const isBataBoardSharePage = (url: string) => {
+  const reg = /^\/data\/board\/share/g;
+  return reg.test(url);
+};
--- a/src/views/data/board/detail/index.vue
View file @dcd3250
+++ b/src/views/data/board/detail/index.vue
View file @dcd3250
 <script lang="ts" setup>
   import { Button, PageHeader, Empty, Spin, Tooltip } from 'ant-design-vue';
-  import { LineChartOutlined } from '@ant-design/icons-vue';
+  import { LineChartOutlined, RollbackOutlined } from '@ant-design/icons-vue';
   import { GridItem, GridLayout } from 'vue3-grid-layout';
   import { nextTick, onMounted, ref } from 'vue';
   import WidgetWrapper from '../components/WidgetWrapper/WidgetWrapper.vue';
@@ -8,11 +8,17 @@
   import { DropMenu } from '/@/components/Dropdown';
   import DataBindModal from './components/DataBindModal.vue';
   import { useModal } from '/@/components/Modal';
-  import { DEFAULT_WIDGET_HEIGHT, DEFAULT_WIDGET_WIDTH, MoreActionEvent } from '../config/config';
+  import {
+    DEFAULT_WIDGET_HEIGHT,
+    DEFAULT_WIDGET_WIDTH,
+    isBataBoardSharePage,
+    MoreActionEvent,
+  } from '../config/config';
   import {
     addDataComponent,
     deleteDataComponent,
     getDataComponent,
+    getShareBoardComponentInfo,
     updateDataBoardLayout,
   } from '/@/api/dataBoard';
   import { useRoute, useRouter } from 'vue-router';
@@ -33,21 +39,32 @@
   const ROUTER = useRouter();
   const { createMessage, createConfirm } = useMessage();
+
   const getBoardId = computed(() => {
     return (ROUTE.params as { id: string }).id;
   });
+  const getSharePageParams = computed(() => {
+    const { boardId, tenantId } = ROUTE.params as { boardId: string; tenantId: string };
+    return { boardId, tenantId };
+  });
+
+  const getIsSharePage = computed(() => {
+    return isBataBoardSharePage(ROUTE.path);
+  });
+
   const widgetEl = new Map<string, Fn>();
   const dataBoardList = ref<DataBoardLayoutInfo[]>([]);
-  const draggable = ref(true);
-  const resizable = ref(true);
+  const draggable = ref(!unref(getIsSharePage));
+  const resizable = ref(!unref(getIsSharePage));
   const GirdLayoutColNum = 24;
   const GridLayoutMargin = 10;
   const handleBack = () => {
+    if (unref(getIsSharePage)) return;
     ROUTER.go(-1);
   };
@@ -168,12 +185,36 @@
   const { beginSendMessage } = useSocketConnect(dataBoardList);
+  const getBasePageComponentData = async () => {
+    try {
+      return await getDataComponent(unref(getBoardId));
+    } catch (error) {}
+    return [];
+  };
+
+  const getSharePageComponentData = async () => {
+    try {
+      const params = unref(getSharePageParams);
+      return await getShareBoardComponentInfo(params);
+    } catch (error) {}
+    return [];
+  };
+
+  const getDataBoradDetail = async () => {
+    try {
+      return unref(getIsSharePage)
+        ? await getSharePageComponentData()
+        : await getBasePageComponentData();
+    } catch (error) {}
+    return [];
+  };
+
   const loading = ref(false);
   const getDataBoardComponent = async () => {
     try {
       // dataBoardList.value = [];
       loading.value = true;
-      const data = await getDataComponent(unref(getBoardId));
+      const data = await getDataBoradDetail();
       dataBoardList.value = data.data.componentData.map((item) => {
         const index = data.data.componentLayout.findIndex((each) => item.id === each.id);
         let layout;
@@ -258,10 +299,18 @@
 <template>
   <section class="bg-light-50 flex flex-col overflow-hidden h-full w-full">
-    <PageHeader title="水电表看板" @back="handleBack">
+    <PageHeader>
+      <template #title>
+        <div class="flex items-center">
+          <RollbackOutlined v-if="!getIsSharePage" class="mr-3" @click="handleBack" />
+          <span>看板名称</span>
+        </div>
+      </template>
       <template #extra>
         <Authority value="api:yt:dataBoardDetail:post">
-          <Button type="primary" @click="handleOpenCreatePanel">创建组件</Button>
+          <Button v-if="!getIsSharePage" type="primary" @click="handleOpenCreatePanel"
+            >创建组件</Button
+          >
         </Authority>
       </template>
       <div>
@@ -313,6 +362,7 @@
                   <template #moreAction>
                     <Tooltip title="趋势">
                       <LineChartOutlined
+                        v-if="!getIsSharePage"
                         class="cursor-pointer mx-1"
                         @click="handleOpenHistroyDataModal(item.record.dataSource)"
                       />
--- a/src/views/data/board/hook/useSocketConnect.ts
View file @dcd3250
+++ b/src/views/data/board/hook/useSocketConnect.ts
View file @dcd3250
@@ -100,7 +100,6 @@ export function useSocketConnect(dataSourceRef: Ref<DataBoardLayoutInfo[]>) {
   const transformSocketMessageItem = () => {
     const messageList: SocketMessageItem[] = [];
     let index = 0;
-    console.log(unref(dataSourceRef));
     unref(dataSourceRef).forEach((record, recordIndex) => {
       const componentId = record.record.id;
       record.record.dataSource.forEach((dataSource, dataSourceIndex) => {
--- a/src/views/data/board/index.vue
View file @dcd3250
+++ b/src/views/data/board/index.vue
View file @dcd3250
@@ -7,7 +7,7 @@
   import { useMessage } from '/@/hooks/web/useMessage';
   import Dropdown from '/@/components/Dropdown/src/Dropdown.vue';
   import { DropMenu } from '/@/components/Dropdown';
-  import { MoreActionEvent } from './config/config';
+  import { DATA_BOARD_SHARE_URL, MoreActionEvent } from './config/config';
   import { useModal } from '/@/components/Modal';
   import PanelDetailModal from './components/PanelDetailModal.vue';
   import { getDataBoardList, deleteDataBoard } from '/@/api/dataBoard';
@@ -50,9 +50,14 @@
     pageSize.value = size;
   }
+  const createShareUrl = (boardId: string, tenantId: string) => {
+    const { origin } = location;
+    return `${origin}${DATA_BOARD_SHARE_URL(boardId, tenantId)}`;
+  };
+
   const { clipboardRef } = useCopyToClipboard();
   const handleCopyShareUrl = (record: DataBoardRecord) => {
-    clipboardRef.value = record.openUrl;
+    clipboardRef.value = createShareUrl(record.id, record.tenantId);
     unref(clipboardRef) ? createMessage.success('复制成功') : createMessage.error('未找到分享链接');
   };