Merge branch 'perf/visual-app' into 'main_dev'

feat：看板添加手机端逻辑

See merge request yunteng/thingskit-front!1122

@@ -53,6 +53,7 @@ export interface DataBoardRecord {
   publicId: string;
   organizationId?: string;
   accessCredentials?: string;
+  platform?: string;
 }
 
 export interface DataBoardList {
@@ -137,7 +138,12 @@ export interface MasterDeviceList {
 }
 
 export interface ComponentInfoDetail {
-  data: { componentData: DataComponentRecord[]; componentLayout: Layout[] };
+  data: {
+    componentData: DataComponentRecord[];
+    componentLayout: Layout[];
+    phoneModel?: string | object;
+    platform: string;
+  };
 }
 
 export interface DeviceAttributeParams {

@@ -21,6 +21,7 @@ enum Api {
   SendLoginSmsCode = '/noauth/send_login_code/',
   ResetCode = '/noauth/reset_code/',
   ResetPassword = '/noauth/reset/',
+  APP_GET_TOKEN = '/third/login/id/',
 }
 
 /**
@@ -100,3 +101,9 @@ export const getUserToken = (id: string) => {
     url: `/third/login/id/${id}`,
   });
 };
+
+export const doAppLogin = (userId: string) => {
+  return defHttp.get<Record<'refreshToken' | 'token', string>>({
+    url: `${Api.APP_GET_TOKEN}${userId}`,
+  });
+};

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1702374950759" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1997" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M144.700101 684.994006l535.580045 0L680.280146 359.237781 144.700101 359.237781 144.700101 684.994006 144.700101 684.994006zM918.373823 440.680675l0-81.442894c0-44.791136-36.649711-81.437777-81.437777-81.437777l-692.235944 0c-44.791136 0-81.437777 36.646642-81.437777 81.437777L63.262324 684.994006c0 44.791136 36.646642 81.442894 81.437777 81.442894l692.235944 0c44.788066 0 81.437777-36.650735 81.437777-81.442894l0-81.437777c22.396079 0 40.7194-18.322297 40.7194-40.7194l0-81.436754C959.093223 459.003995 940.769902 440.680675 918.373823 440.680675L918.373823 440.680675zM877.655446 481.400075l0 81.436754L877.655446 684.994006c0 22.395056-18.323321 40.718377-40.7194 40.718377l-692.235944 0c-22.396079 0-40.7194-18.323321-40.7194-40.718377L103.980701 359.237781c0-22.396079 18.323321-40.7194 40.7194-40.7194l692.235944 0c22.396079 0 40.7194 18.323321 40.7194 40.7194L877.655446 481.400075 877.655446 481.400075zM877.655446 481.400075" fill="#272636" p-id="1998"></path></svg>
\ No newline at end of file

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1702374946029" class="icon" viewBox="0 0 1294 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1850" xmlns:xlink="http://www.w3.org/1999/xlink" width="252.734375" height="200"><path d="M0 727.578947l188.631579 0 0 296.421053-188.631579 0 0-296.421053Z" p-id="1851"></path><path d="M269.473684 565.894737l188.631579 0 0 458.105263-188.631579 0 0-458.105263Z" p-id="1852"></path><path d="M565.894737 377.263158l161.684211 0 0 646.736842-161.684211 0 0-646.736842Z" p-id="1853"></path><path d="M835.368421 188.631579l188.631579 0 0 835.368421-188.631579 0 0-835.368421Z" p-id="1854"></path><path d="M1104.842105 0l188.631579 0 0 1024-188.631579 0 0-1024Z" p-id="1855"></path></svg>
\ No newline at end of file

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1702374954963" class="icon" viewBox="0 0 1280 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2277" xmlns:xlink="http://www.w3.org/1999/xlink" width="250" height="200"><path d="M1269.82 309.76C915.48-17.98 364.38-17.86 10.18 309.76c-13.32 12.32-13.58 33.18-0.7 45.96l68.48 67.94c12.28 12.2 32.04 12.46 44.8 0.76 291.84-267.36 742.6-267.42 1034.5 0 12.76 11.7 32.52 11.42 44.8-0.76l68.48-67.94c12.86-12.78 12.6-33.64-0.72-45.96zM640 704c-70.7 0-128 57.3-128 128s57.3 128 128 128 128-57.3 128-128-57.3-128-128-128z m405.34-167.18c-230.52-203.86-580.42-203.64-810.68 0-13.8 12.2-14.24 33.38-1.14 46.3l68.88 67.98c12 11.84 31.32 12.64 44.1 1.6 167.9-145.14 419.48-144.82 586.98 0 12.78 11.04 32.1 10.26 44.1-1.6l68.88-67.98c13.12-12.92 12.66-34.12-1.12-46.3z" p-id="2278"></path></svg>
\ No newline at end of file

@@ -16,6 +16,7 @@ export const PageEnum = {
   DEVICE_LIST: '/device/list',
 
   SHARE_PAGE: '/share/:viewType/:id/:publicId',
+  APP_PAGE: '/appPage/:boardId/:userId',
 
   RULE_CHAIN_DETAIL: '/rule/chain/:id',
 

@@ -2,7 +2,7 @@ import { RouteLocationNormalizedLoaded } from 'vue-router';
 
 const menuMap = new Map();
 
-menuMap.set('/visual/board/detail/:boardId/:boardName/:organizationId?', '/visual/board');
+menuMap.set('/visual/board/detail/:boardId/:boardName/:platform/:organizationId?', '/visual/board');
 menuMap.set('/rule/chain/:id', '/rule/chain');
 
 export const useMenuActiveFix = (route: RouteLocationNormalizedLoaded) => {

@@ -11,7 +11,8 @@ import { getAuthCache } from '/@/utils/auth';
 const LOGIN_PATH = PageEnum.BASE_LOGIN;
 const ROOT_PATH = RootRoute.path;
 const SHARE_PATH = PageEnum.SHARE_PAGE;
-const whitePathList: string[] = [LOGIN_PATH, SHARE_PATH];
+const APP_PATH = PageEnum.APP_PAGE;
+const whitePathList: string[] = [LOGIN_PATH, SHARE_PATH, APP_PATH];
 // const userInfo1 = getAuthCache(USER_INFO_KEY);
 // const userInfo = ref(userInfo1);
 

+import { AppRouteRecordRaw } from '../types';
+import { PageEnum } from '/@/enums/pageEnum';
+
+export const APP_PAGE_ROUTER: AppRouteRecordRaw = {
+  path: PageEnum.APP_PAGE,
+  name: 'appPage',
+  component: () => import('/@/views/sys/appPage/index.vue'),
+  meta: {
+    title: '公开',
+    hideBreadcrumb: true,
+    hideChildrenInMenu: true,
+  },
+};

@@ -5,6 +5,7 @@ import { PageEnum } from '/@/enums/pageEnum';
 import { t } from '/@/hooks/web/useI18n';
 import { LAYOUT } from '../constant';
 import { PUBLIC_PAGE_ROUTER } from './public';
+import { APP_PAGE_ROUTER } from './appPage';
 
 const modules = import.meta.globEager('./modules/**/*.ts');
 const routeModuleList: AppRouteModule[] = [];
@@ -87,4 +88,5 @@ export const basicRoutes = [
   REDIRECT_ROUTE,
   PAGE_NOT_FOUND_ROUTE,
   PUBLIC_PAGE_ROUTER,
+  APP_PAGE_ROUTER,
 ];

@@ -105,7 +105,7 @@ export const getFormSchemas = (hasAlarmNotify: Ref<boolean>): FormSchema[] => {
       field: FormFieldsEnum.ALARM_PROFILED,
       label: '',
       component: 'AlarmProfileSelect',
-      rules: [{ required: true, message: `请选择${FormFieldsEnum.ALARM_PROFILED}` }],
+      // rules: [{ required: true, message: `请选择${FormFieldsEnum.ALARM_PROFILED}` }],
       ifShow: ({ model }) => model[FormFieldsEnum.OUT_TARGET] === ExecutionActionEnum.MSG_NOTIFY,
       componentProps: () => {
         return {

+import { useRouter } from 'vue-router';
+
+export enum ViewTypeEnum {
+  DATA_BOARD = 'DATA_BOARD',
+  LARGE_SCREEN = 'LARGE_SCREEN',
+  SCADA = 'SCADA',
+}
+
+export const goShareUrl = (options: { type: ViewTypeEnum; id: string }, openNew?: false) => {
+  const { type, id } = options;
+  const ROUTER = useRouter();
+  const { origin } = location;
+  const path = `/share/${type}/${id}`;
+  openNew ? ROUTER.push(path) : open(`${origin}${path}`);
+};

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

+<script lang="ts" setup>
+  import { onMounted } from 'vue';
+  import { Spin } from 'ant-design-vue';
+  import { ref } from 'vue';
+  import { useRoute } from 'vue-router';
+  import { useUserStore } from '/@/store/modules/user';
+  import BoardDetail from '/@/views/visual/board/detail/index.vue';
+  import { doAppLogin } from '/@/api/sys/user';
+
+  const loading = ref(true);
+  const ROUTE = useRoute();
+  const contentData = ref<any>();
+  const canLoadComponent = ref(false);
+
+  const modelVisable = ref(false);
+
+  const userStore = useUserStore();
+
+  const getShareToken = async () => {
+    const { params } = ROUTE;
+    const { userId }: any = params;
+    const { token, refreshToken } = await doAppLogin(userId);
+    userStore.storeToken(token, refreshToken);
+  };
+
+  const getContentLoading = ref(false);
+  const getContentData = async () => {
+    try {
+      getContentLoading.value = true;
+      loading.value = false;
+      canLoadComponent.value = true;
+      modelVisable.value = false;
+    } catch (error) {
+    } finally {
+      getContentLoading.value = false;
+    }
+  };
+
+  onMounted(async () => {
+    await getShareToken();
+    await getContentData();
+  });
+</script>
+
+<template>
+  <Spin
+    :spinning="loading"
+    tip="正在加载中..."
+    size="large"
+    class="!flex justify-center items-center w-full h-full share-full-loading"
+  >
+    <BoardDetail v-if="canLoadComponent" :value="contentData" />
+  </Spin>
+</template>
+
+<style lang="less">
+  .share-page-token-modal {
+    .ant-modal-close {
+      display: none;
+    }
+  }
+</style>

 <script lang="ts" setup>
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { BasicForm, useForm } from '/@/components/Form';
-  import { formSchema } from '../config/panelDetail';
+  import { formSchema, PlatformType } from '../config/panelDetail';
   import { addDataBoard, updateDataBoard } from '/@/api/dataBoard';
   import { AddDataBoardParams } from '/@/api/dataBoard/model';
   import { useMessage } from '/@/hooks/web/useMessage';
@@ -34,6 +34,9 @@
     if (!Reflect.get(value, 'accessCredentials')) {
       Reflect.deleteProperty(value, 'accessCredentials');
     }
+    if (value.platform === PlatformType.PC) {
+      Reflect.deleteProperty(value, 'phoneModel');
+    }
     return value as any;
   };
 

@@ -4,7 +4,13 @@ export enum ViewType {
   PRIVATE_VIEW = 'PRIVATE_VIEW',
   PUBLIC_VIEW = 'PUBLIC_VIEW',
 }
+import { Platform } from '../../palette/components/PagerHeader/config';
+
 useComponentRegister('OrgTreeSelect', OrgTreeSelect);
+export enum PlatformType {
+  PHONE = 'phone',
+  PC = 'pc',
+}
 
 export const formSchema: FormSchema[] = [
   {
@@ -24,6 +30,32 @@ export const formSchema: FormSchema[] = [
     rules: [{ required: true, message: '组织为必填项' }],
   },
   {
+    field: 'platform',
+    label: '平台',
+    required: true,
+    component: 'RadioGroup',
+    defaultValue: PlatformType.PC,
+    componentProps({ formModel }) {
+      return {
+        defaultValue: PlatformType.PC,
+        options: [
+          { label: 'PC端', value: PlatformType.PC },
+          { label: '移动端', value: PlatformType.PHONE },
+        ],
+        onChange(e) {
+          formModel.phoneModel =
+            e?.target?.value === PlatformType.PHONE ? JSON.stringify(Platform[1]) : [];
+        },
+      };
+    },
+  },
+  {
+    field: 'phoneModel',
+    label: '手机端尺寸',
+    component: 'Input',
+    ifShow: false,
+  },
+  {
     field: 'remark',
     label: '备注',
     component: 'InputTextArea',

@@ -135,12 +135,13 @@
 
   const handleViewBoard = (record: DataBoardRecord) => {
     const hasDetailPermission = hasPermission(VisualBoardPermission.DETAIL);
+    const { platform = 'pc' } = record || {};
     if (hasDetailPermission) {
       const boardId = encode(record.id);
       const boardName = encode(record.name);
       const organizationId = encode(record!.organizationId!);
 
-      router.push(`/visual/board/detail/${boardId}/${boardName}/${organizationId}`);
+      router.push(`/visual/board/detail/${boardId}/${boardName}/${platform}/${organizationId}`);
     } else createMessage.warning('没有权限');
   };
 </script>
@@ -170,7 +171,7 @@
             </Dropdown>
           </template>
           <section @click="handleViewBoard(item)">
-            <div class="flex data-card__info">
+            <div class="flex data-card__info relative">
               <div>
                 <div>组件数量</div>
                 <Statistic class="text-2xl" :value="item.componentNum">
@@ -179,6 +180,12 @@
                   </template>
                 </Statistic>
               </div>
+              <div class="absolute" style="right: 1%">
+                <Icon
+                  :icon="item.platform === 'pc' ? 'ri:computer-line' : 'clarity:mobile-phone-solid'"
+                  style="font-size: 32px"
+                />
+              </div>
             </div>
             <div class="flex justify-between mt-4 text-sm" style="color: #999">
               <div class="flex min-w-20 mr-3">

@@ -23,6 +23,7 @@
   import { WidgetDataType } from '../../hooks/useDataSource';
   import { ExtraDataSource } from '../../types';
   import { OrderByEnum } from '/@/views/device/localtion/cpns/TimePeriodForm/config';
+  import { useApp } from '../../hooks/useApp';
 
   type DeviceOption = Record<'label' | 'value' | 'organizationId', string>;
 
@@ -38,6 +39,8 @@
 
   const historyData = ref<{ ts: number; value: string; name: string }[]>([]);
 
+  const { getIsAppPage } = useApp();
+
   const { deviceAttrs, getDeviceKeys, getSearchParams, setChartOptions, getDeviceAttribute } =
     useHistoryData();
 
@@ -294,7 +297,7 @@
     :destroy-on-close="true"
     :show-ok-btn="false"
     cancel-text="关闭"
-    width="70%"
+    :width="getIsAppPage ? '100%' : '75%'"
     title="历史趋势"
   >
     <section

+export const Platform = [
+  { key: 'iPhone 8', title: 'iPhone 8', width: 375, height: 667 },
+  { key: 'iPhone 8 Plus', title: 'iPhone 8 Plus', width: 415, height: 737 },
+  { key: 'iPhone X/XS', title: 'iPhone X/XS', width: 376, height: 813 },
+  { key: 'iPad 4', title: 'iPad 4', width: 709, height: 1025 },
+  { key: 'Galaxy S9', title: 'Galaxy S9', width: 361, height: 741 },
+  { key: 'Galaxy S10/S10+', title: 'Galaxy S10/S10+', width: 413, height: 870 },
+  { key: 'Pixel 2', title: 'Pixel 2', width: 413, height: 732 },
+  { key: 'custom', title: '自定义', width: '', height: '' },
+];

 <script lang="ts" setup>
-  import { PageHeader } from 'ant-design-vue';
-  import { computed, unref } from 'vue';
+  import { PageHeader, RadioButton, RadioGroup, InputNumber, Button } from 'ant-design-vue';
+  import { computed, ref, unref, onMounted } from 'vue';
   import { useRoute, useRouter } from 'vue-router';
   import { decode } from '../..';
   import { RollbackOutlined } from '@ant-design/icons-vue';
+  import { Platform } from './config';
+  import { useApp } from '../../hooks/useApp';
+  import { getDataComponent } from '/@/api/dataBoard';
+  import { updateDataBoard } from '/@/api/dataBoard';
+  import { useMessage } from '/@/hooks/web/useMessage';
 
   defineProps<{ widgetNumber: number }>();
+  const emits = defineEmits(['getPhoneSize']);
 
   const ROUTE = useRoute();
   const ROUTER = useRouter();
+
+  const { isPhone } = useApp();
   const getIsSharePage = computed(() => {
     return ROUTE.matched.find((item) => item.path === '/share/:viewType/:id/:publicId');
   });
@@ -22,7 +30,85 @@
     ROUTER.go(-1);
   };
 
-  // const handleOpenCreatePanel = () => {};
+  const getSize = () => {
+    return {
+      width: '',
+      height: '',
+    };
+  };
+
+  const phoneRadio = ref<string>('iPhone 8');
+  const phoneSize = ref<{ width?: number | string; height?: number | string }>(getSize());
+  const ifShowWidth = ref<boolean>(false);
+
+  const phoneModel = ref<{
+    key: string;
+    width: string | number;
+    height: number | string;
+    title: string;
+  }>();
+  const getDataList = async () => {
+    const values = await getDataComponent(decode((ROUTE.params as { boardId: string }).boardId));
+    phoneModel.value = values?.data.phoneModel && JSON.parse(values?.data.phoneModel as string);
+    phoneRadio.value = unref(phoneModel)?.key as any;
+    ifShowWidth.value = unref(phoneRadio) === 'custom' ? true : false;
+    phoneSize.value = {
+      width: unref(phoneModel)?.width,
+      height: unref(phoneModel)?.height,
+    };
+
+    emits('getPhoneSize', unref(phoneSize));
+  };
+
+  const updateComponent = () => {
+    const { boardId, boardName, organizationId, platform } = ROUTE.params;
+
+    const values = {
+      id: boardId,
+      boardName,
+      organizationId,
+      platform,
+      phoneModel: JSON.stringify({
+        key: unref(phoneRadio),
+        ...phoneSize.value,
+      }),
+    };
+    updateDataBoard(values as any);
+  };
+
+  const handleChange = (e) => {
+    const { target } = e || {};
+    phoneSize.value = getSize();
+    if (target.value === 'custom') {
+      ifShowWidth.value = true;
+      return;
+    } else {
+      ifShowWidth.value = false;
+      const values = Platform.find((item) => item.key == target.value);
+      phoneSize.value = {
+        width: values?.width || '',
+        height: values?.height || '',
+      };
+    }
+    updateComponent();
+    emits('getPhoneSize', unref(phoneSize));
+  };
+
+  const { createMessage } = useMessage();
+
+  const handleCustom = () => {
+    const { width, height } = unref(phoneSize);
+    if (!width || !height) {
+      createMessage.warning('请填写尺寸大小');
+      return;
+    }
+    emits('getPhoneSize', unref(phoneSize));
+    updateComponent();
+  };
+
+  onMounted(() => {
+    getDataList();
+  });
 </script>
 
 <template>
@@ -46,6 +132,18 @@
       <span class="mr-3 text-sm text-gray-500">已创建组件:</span>
       <span class="text-blue-500"> {{ widgetNumber }}个</span>
     </div>
+    <div v-if="isPhone()" class="flex items-center my-1">
+      <RadioGroup v-model:value="phoneRadio" button-style="solid" @change="handleChange">
+        <RadioButton v-for="item in Platform" :value="item.key" :key="item.key">{{
+          item.title
+        }}</RadioButton>
+      </RadioGroup>
+      <div class="ml-1" v-if="ifShowWidth">
+        <InputNumber v-model:value="phoneSize.width" :min="300" placeholder="请输入宽度" />
+        <InputNumber v-model:value="phoneSize.height" :min="300" placeholder="请输入高度" />
+        <Button type="primary" @click="handleCustom" class="ml-1">确定</Button>
+      </div>
+    </div>
   </PageHeader>
 </template>
 

@@ -7,6 +7,7 @@
   import { BasicForm } from '/@/components/Form';
   import { BasicModal } from '/@/components/Modal';
   import { nextTick } from 'vue';
+  import { useApp } from '../../hooks/useApp';
   const emit = defineEmits(['register', 'getAlarmForm', 'getHistoryForm']);
   // const emit = defineEmits<{
   //   (event: 'getAlarmForm', data: WidgetDataType): void;
@@ -15,6 +16,8 @@
   // const fontId = ref('');
   const [registerModal, { closeModal }] = useModalInner(async () => {});
 
+  const { getIsAppPage } = useApp();
+
   const [register, method] = useForm({
     schemas: formSchema(),
     baseColProps: useGridLayout(1) as unknown as ColEx,
@@ -53,7 +56,7 @@
     :destroy-on-close="true"
     :show-ok-btn="true"
     cancel-text="关闭"
-    width="40%"
+    :width="getIsAppPage ? '80%' : '40%'"
     title="历史趋势"
   >
     <section

+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+
+export const useApp = () => {
+  const ROUTE = useRoute();
+  const getIsAppPage = computed(() => {
+    return ROUTE.matched.find((item) => item.path === '/appPage/:boardId/:userId');
+  });
+
+  const isPhone = () => {
+    const values = location?.pathname.split('/') || [];
+    return values[values?.length - 2] === 'phone' ? true : false;
+  };
+
+  return { getIsAppPage, isPhone };
+};

 import { unref } from 'vue';
 import { Layout } from 'vue3-grid-layout';
-import { DEFAULT_MAX_COL, DEFAULT_WIDGET_HEIGHT, DEFAULT_WIDGET_WIDTH } from '..';
+import { DEFAULT_MAX_COL, DEFAULT_WIDGET_HEIGHT, DEFAULT_WIDGET_WIDTH, PHONE_SIZE } from '..';
+import { useApp } from './useApp';
 
 interface GapRecord {
   maxGap: number;
@@ -8,9 +9,14 @@ interface GapRecord {
   endIndex: Nullable<number>;
 }
 
+const { isPhone } = useApp();
+
 export const useCalcNewWidgetPosition = (
   layoutInfo: Layout[],
-  randomLayout = { width: DEFAULT_WIDGET_WIDTH, height: DEFAULT_WIDGET_HEIGHT }
+  randomLayout = {
+    width: isPhone() ? PHONE_SIZE.DEFAULT_WIDGET_WIDTH : DEFAULT_WIDGET_WIDTH,
+    height: isPhone() ? PHONE_SIZE.DEFAULT_WIDGET_HEIGHT : DEFAULT_WIDGET_HEIGHT,
+  }
 ) => {
   let maxWidth = 0;
   let maxHeight = 0;

@@ -30,6 +30,10 @@ export const useDataSource = (propsRef: ComputedRef<Recordable>) => {
   const getIsSharePage = computed(() => {
     return ROUTE.matched.find((item) => item.path === '/share/:viewType/:id/:publicId');
   });
+  //小程序打开的页面
+  const getIsAppPage = computed(() => {
+    return ROUTE.matched.find((item) => item.path === '/appPage/:boardId/:userId');
+  });
 
   const getBoardId = computed(() => {
     return decode((ROUTE.params as { boardId: string }).boardId);
@@ -131,8 +135,8 @@ export const useDataSource = (propsRef: ComputedRef<Recordable>) => {
 
   return {
     loading,
-    draggable: !unref(getIsSharePage),
-    resizable: !unref(getIsSharePage),
+    draggable: !unref(getIsSharePage) && !unref(getIsAppPage),
+    resizable: !unref(getIsSharePage) && !unref(getIsAppPage),
     dataSource,
     rawDataSource,
     getDataSource,

@@ -11,6 +11,12 @@ export const DEFAULT_WIDGET_HEIGHT = 6;
 export const DEFAULT_MIN_HEIGHT = 5;
 export const DEFAULT_MIN_WIDTH = 3;
 export const DEFAULT_ITEM_MARIGN = 20;
+export const PHONE_SIZE = {
+  DEFAULT_WIDGET_WIDTH: 12,
+  DEFAULT_WIDGET_HEIGHT: 4,
+  DEFAULT_MIN_HEIGHT: 4,
+  DEFAULT_MIN_WIDTH: 11,
+};
 
 import { ViewTypeEnum } from '/@/views/sys/share/config/config';
 

@@ -10,6 +10,7 @@
     DEFAULT_MIN_WIDTH,
     DEFAULT_ITEM_MARIGN,
     VisualComponentPermission,
+    PHONE_SIZE,
   } from './index';
   import { useDragGridLayout } from './hooks/useDragGridLayout';
   import { WidgetHeader, WidgetWrapper } from './components/WidgetWrapper';
@@ -19,6 +20,7 @@
   import { DataSourceBindPanel } from '../dataSourceBindPanel';
   import { PageHeader } from './components/PagerHeader';
   import { useShare } from './hooks/useShare';
+  import { useApp } from './hooks/useApp';
   import { useRole } from '/@/hooks/business/useRole';
   import { Authority } from '/@/components/Authority';
   import { useModal } from '/@/components/Modal';
@@ -33,6 +35,11 @@
   import { useSocket } from '/@/views/visual/packages/hook/socket/useSocket';
   import { createAlarmContext } from './hooks/useAlarmTime';
   import { createHistoryContext } from './hooks/useHistoryForm';
+  import { MoreOutlined, LeftOutlined } from '@ant-design/icons-vue';
+  import WIFISVG from '/@/assets/svg/wifi.svg';
+  import SIGNALSVG from '/@/assets/svg/signal.svg';
+  import BATTERYSVG from '/@/assets/svg/battery.svg';
+  import { useRoute } from 'vue-router';
 
   const props = defineProps<{
     value?: Recordable;
@@ -44,6 +51,8 @@
 
   const containerRectRef = ref<DOMRect>({} as unknown as DOMRect);
 
+  const ROUTE = useRoute();
+
   const { loading, draggable, resizable, dataSource, rawDataSource, setLayoutInfo, getDataSource } =
     useDataSource(getProps);
 
@@ -63,6 +72,9 @@
     }
   });
   const { getIsSharePage } = useShare();
+
+  // getIsAppPage 是否是小程序进入的页面  isPhone 是否是创建的手机端
+  const { getIsAppPage, isPhone } = useApp();
   const { isCustomerUser } = useRole();
   const handleOpenCreatePanel = () => {
     openModal(true, { mode: DataActionModeEnum.CREATE } as ModalParamsType);
@@ -157,6 +169,28 @@
     },
     { immediate: true }
   );
+  watch(
+    getIsAppPage,
+    (value) => {
+      if (value) {
+        const root = document.querySelector('#app');
+        (root as HTMLDivElement).style.backgroundColor =
+          unref(getDarkMode) === ThemeEnum.LIGHT ? '#F5F5F5' : '#1b1b1b';
+      }
+    },
+    { immediate: true }
+  );
+  const getDataBoardName = computed(() => {
+    return decodeURIComponent((ROUTE.params as { boardName: string }).boardName || '');
+  });
+
+  const phoneSize = ref({
+    width: '' || 375,
+    height: '' || 667,
+  });
+  const getPhoneSize = (values) => {
+    phoneSize.value = { ...values };
+  };
 </script>
 
 <template>
@@ -164,7 +198,11 @@
     ref="containerRefEl"
     class="palette w-full h-full flex-col bg-neutral-100 flex dark:bg-dark-700 dark:text-light-50"
   >
-    <PageHeader :widget-number="dataSource.length">
+    <PageHeader
+      v-if="!getIsAppPage"
+      :widget-number="dataSource.length"
+      @getPhoneSize="getPhoneSize"
+    >
       <Authority :value="VisualComponentPermission.CREATE">
         <Button
           v-if="!getIsSharePage && !isCustomerUser"
@@ -177,55 +215,104 @@
     </PageHeader>
 
     <Spin :spinning="loading">
-      <GridLayout
-        v-model:layout="dataSource"
-        :col-num="DEFAULT_MAX_COL"
-        :row-height="30"
-        :margin="[DEFAULT_ITEM_MARIGN, DEFAULT_ITEM_MARIGN]"
-        :is-draggable="draggable"
-        :is-resizable="resizable"
-        :vertical-compact="true"
-        :use-css-transforms="true"
-        style="width: 100%"
-      >
-        <GridItem
-          v-for="item in dataSource"
-          :key="item.i"
-          :static="item.static"
-          :x="item.x"
-          :y="item.y"
-          :w="item.w"
-          :h="item.h"
-          :i="item.i"
-          :min-h="DEFAULT_MIN_HEIGHT"
-          :min-w="DEFAULT_MIN_WIDTH"
-          :style="{ display: 'flex', flexWrap: 'wrap' }"
-          class="grid-item-layout"
-          @resized="resized"
-          @resize="resize"
-          @moved="moved"
-          @container-resized="containerResized"
-          drag-ignore-from=".no-drag"
+      <div class="w-full h-full flex justify-center items-center mb-3">
+        <div
+          :style="
+            !getIsAppPage && isPhone()
+              ? {
+                  width: phoneSize.width + 'px',
+                  height: phoneSize.height + 'px',
+                  border: '2px solid #e5e7eb',
+                }
+              : { width: '100%', height: '100%' }
+          "
+          style="border-radius: 1%"
         >
-          <WidgetWrapper>
-            <template #header>
-              <WidgetHeader
-                :raw-data-source="rawDataSource"
-                :source-info="item"
-                @update="handleUpdateWidget"
-                @open-trend="handleOpenTrend"
-                @open-alarm="handleOpenAlarm"
-                @ok="getDataSource"
-              />
-            </template>
-            <WidgetDistribute :source-info="item" />
-          </WidgetWrapper>
-        </GridItem>
-      </GridLayout>
-      <Empty
-        v-if="!dataSource.length"
-        class="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
-      />
+          <!-- 手机端写的模拟样式 -->
+          <div
+            v-if="!getIsAppPage && isPhone()"
+            style="height: 60px; background: white"
+            class="px-1 py-1 relative"
+          >
+            <div class="flex justify-between">
+              <div>thingskit</div>
+              <div class="flex items-center">
+                <img :src="WIFISVG" alt="" class="w-3 h-3" />
+                <img :src="SIGNALSVG" alt="" class="w-3 h-3 mx-1" />
+                <img :src="BATTERYSVG" alt="" class="w-4 h-4 rotate-45" />
+                <h1 class="mb-0">18:13</h1>
+              </div>
+            </div>
+            <div class="flex items-center justify-between">
+              <LeftOutlined class="transform cursor-pointer text-lg" />
+              <h1 class="font-bold">{{ getDataBoardName }}</h1>
+              <MoreOutlined class="transform rotate-90 cursor-pointer text-lg" />
+            </div>
+          </div>
+
+          <div
+            id="appLayoutId"
+            :style="
+              !getIsAppPage && isPhone() ? { height: `calc(${phoneSize.height}px - 67px)` } : {}
+            "
+            class="overflow-y-scroll"
+          >
+            <GridLayout
+              v-model:layout="dataSource"
+              :col-num="DEFAULT_MAX_COL"
+              :row-height="30"
+              :margin="[DEFAULT_ITEM_MARIGN, DEFAULT_ITEM_MARIGN]"
+              :is-draggable="draggable"
+              :is-resizable="resizable"
+              :vertical-compact="true"
+              :use-css-transforms="true"
+              style="width: 100%"
+              :style="{
+                '--is-app': isPhone() ? 'auto' : 'none',
+              }"
+            >
+              <GridItem
+                v-for="item in dataSource"
+                :key="item.i"
+                :static="item.static"
+                :x="item.x"
+                :y="item.y"
+                :w="item.w"
+                :h="item.h"
+                :i="item.i"
+                :min-h="isPhone() ? PHONE_SIZE.DEFAULT_MIN_HEIGHT : DEFAULT_MIN_HEIGHT"
+                :min-w="isPhone() ? PHONE_SIZE.DEFAULT_MIN_WIDTH : DEFAULT_MIN_WIDTH"
+                :style="{ display: 'flex', flexWrap: 'wrap' }"
+                class="grid-item-layout"
+                @resized="resized"
+                @resize="resize"
+                @moved="moved"
+                @container-resized="containerResized"
+                drag-ignore-from=".no-drag"
+              >
+                <WidgetWrapper>
+                  <template #header>
+                    <WidgetHeader
+                      :raw-data-source="rawDataSource"
+                      :source-info="item"
+                      @update="handleUpdateWidget"
+                      @open-trend="handleOpenTrend"
+                      @open-alarm="handleOpenAlarm"
+                      @ok="getDataSource"
+                    />
+                  </template>
+                  <WidgetDistribute :source-info="item" />
+                </WidgetWrapper>
+              </GridItem>
+            </GridLayout>
+          </div>
+          <Empty
+            v-if="!dataSource.length"
+            :class="isPhone() ? 'absolute' : 'fixed'"
+            class="top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
+          />
+        </div>
+      </div>
     </Spin>
 
     <DataSourceBindPanel @register="register" :layout="dataSource" @ok="getDataSource" />
@@ -238,4 +325,9 @@
   </section>
 </template>
 
-<style lang="less" scoped></style>
+<style lang="less">
+  .vue-grid-item {
+    pointer-events: painted;
+    touch-action: var(--is-app) !important;
+  }
+</style>

@@ -91,6 +91,7 @@ export interface ComponentLayoutType {
 export interface ApiDataBoardDataType {
   componentData: ComponentDataType[];
   componentLayout: ComponentLayoutType[];
+  phoneModel?: string;
 }
 
 export interface ApiDataBoardInfoType {