Merge branch 'main_dev'

# Conflicts:
#	src/views/message/template/TemplateDrawer.vue

@@ -13,7 +13,7 @@
       name="viewport"
       content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
     />
-    <title></title>
+    <title>&lrm;</title>
     <link rel="icon" href="/favicon.ico" />
   </head>
 

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

@@ -187,6 +187,7 @@ export interface DeviceRecord {
   brand?: string;
   deviceProfileId: string;
   organizationId: string;
+  alarmStatus: number;
   deviceProfile: {
     default: boolean;
     name: string;

@@ -7,6 +7,9 @@ export interface Specs {
   unit: string;
   unitName: string;
 
+  dataType?: string;
+  name?: string;
+  value?: string;
   step: string;
   length: string;
   boolOpen: string;
@@ -20,6 +23,7 @@ export interface Specs {
 export interface DataType {
   type: DataTypeEnum;
   specs?: Partial<Specs> | StructJSON[];
+  specsList?: Specs[];
 }
 
 export interface StructJSON {

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

@@ -42,6 +42,7 @@ import InputGroup from './components/InputGroup.vue';
 import RegisterAddressInput from '/@/views/task/center/components/PollCommandInput/RegisterAddressInput.vue';
 import ExtendDesc from '/@/components/Form/src/externalCompns/components/ExtendDesc/index.vue';
 import DeviceProfileForm from '/@/components/Form/src/externalCompns/components/DeviceProfileForm/index.vue';
+import EnumList from './externalCompns/components/StructForm/EnumList.vue';
 
 const componentMap = new Map<ComponentType, Component>();
 
@@ -90,6 +91,7 @@ componentMap.set('ApiSelectScrollLoad', ApiSelectScrollLoad);
 componentMap.set('InputGroup', InputGroup);
 componentMap.set('RegisterAddressInput', RegisterAddressInput);
 componentMap.set('ExtendDesc', ExtendDesc);
+componentMap.set('EnumList', EnumList);
 componentMap.set('DeviceProfileForm', DeviceProfileForm);
 
 export function add(compName: ComponentType, component: Component) {

+import { FormSchema } from '/@/components/Table';
+
+export enum FormFieldsEnum {
+  VALUE = 'value',
+  NAME = 'name',
+  DATA_TYPE = 'dataType',
+}
+
+export const getFormSchemas = (): FormSchema[] => {
+  return [
+    {
+      field: FormFieldsEnum.VALUE,
+      label: '',
+      component: 'InputNumber',
+      rules: [
+        { required: true, message: `支持整型，取值范围：-2147483648 ~ 2147483647`, type: 'number' },
+      ],
+      componentProps: () => {
+        return {
+          placeholder: '编号如"0"',
+          min: -2147483648,
+          max: 2147483647,
+          step: 1,
+          precision: 0,
+        };
+      },
+      colProps: {
+        span: 11,
+      },
+    },
+    {
+      field: 'division',
+      label: '',
+      component: 'Input',
+      slot: 'division',
+      colProps: {
+        span: 1,
+      },
+    },
+    {
+      field: FormFieldsEnum.NAME,
+      label: '',
+      component: 'Input',
+      rules: [
+        {
+          required: true,
+          message: `支持中文、英文大小写、数字、下划线和短划线，必须以中文、英文或数字开头，不超过20个字符`,
+          type: 'string',
+          pattern: /^[a-zA-Z0-9\u4e00-\u9fa5a][\u4e00-\u9fa5a-zA-Z0-9_-]*$/,
+        },
+      ],
+      componentProps: () => {
+        return {
+          placeholder: '对该枚举项的描述',
+          maxLength: 20,
+        };
+      },
+      colProps: {
+        span: 11,
+      },
+    },
+  ];
+};

+<script setup lang="ts">
+  import { Button, Tooltip } from 'ant-design-vue';
+  import { computed, nextTick, ref, unref, watch } from 'vue';
+  import { useForm, BasicForm } from '/@/components/Form';
+  import { Specs } from '/@/api/device/model/modelOfMatterModel';
+  import { Icon } from '/@/components/Icon';
+  import { getFormSchemas } from './EnumList.config';
+  import { FormActionType } from '../../../types/form';
+  import { buildUUID } from '/@/utils/uuid';
+  import { DataTypeEnum } from '/@/enums/objectModelEnum';
+  import { isNullOrUnDef } from '/@/utils/is';
+
+  const props = defineProps<{ disabled?: boolean; value?: Specs[] }>();
+
+  interface EnumElItemType {
+    uuid: string;
+    formActionType?: FormActionType;
+    dataSource?: Recordable;
+  }
+
+  const [registerForm] = useForm({
+    schemas: getFormSchemas(),
+    showActionButtonGroup: false,
+    layout: 'inline',
+  });
+
+  const enumsListElRef = ref<EnumElItemType[]>([{ uuid: buildUUID() }]);
+
+  const setFormActionType = (item: EnumElItemType, el: any) => {
+    item.formActionType = el as unknown as FormActionType;
+  };
+
+  const getEnumsLimit = computed(() => unref(enumsListElRef).length >= 100);
+
+  const hasSameEnum = ref(false);
+
+  const validateSameEnum = () => {
+    const value = getFieldsValue();
+    hasSameEnum.value = false;
+    const values = value.map((item) => item.value).filter((value) => !isNullOrUnDef(value));
+    const names = value.map((item) => item.name).filter((value) => !isNullOrUnDef(value));
+
+    if (values.length !== new Set(values).size || names.length !== new Set(names).size) {
+      hasSameEnum.value = true;
+    }
+  };
+
+  const validate = async () => {
+    if (unref(hasSameEnum)) throw Error('存在相同的枚举');
+    for (const enumElItem of unref(enumsListElRef)) {
+      await enumElItem.formActionType?.validate?.();
+    }
+    validateSameEnum();
+  };
+
+  const getFieldsValue = () => {
+    return unref(enumsListElRef).map(
+      (item) =>
+        ({
+          ...(item.formActionType?.getFieldsValue?.() || {}),
+          dataType: DataTypeEnum.ENUM,
+        } as Specs)
+    );
+  };
+
+  const setFieldsValue = (spaceList: Specs[]) => {
+    enumsListElRef.value = spaceList.map((item) => ({ uuid: buildUUID(), dataSource: item }));
+
+    nextTick(() => {
+      unref(enumsListElRef).forEach((item) =>
+        item.formActionType?.setFieldsValue?.(item.dataSource)
+      );
+    });
+  };
+
+  const handleDeleteEnums = (item: EnumElItemType) => {
+    const index = unref(enumsListElRef).findIndex((temp) => item.uuid === temp.uuid);
+
+    if (~index) {
+      enumsListElRef.value.splice(index, 1);
+      validateSameEnum();
+    }
+  };
+
+  const handleAddEnums = () => {
+    unref(enumsListElRef).push({ uuid: buildUUID() });
+  };
+
+  watch(
+    () => props.value,
+    (target) => {
+      setFieldsValue(target || [{} as Specs]);
+    },
+    {
+      immediate: true,
+    }
+  );
+
+  defineExpose({
+    validate,
+    getFieldsValue,
+    setFieldsValue,
+  });
+</script>
+
+<template>
+  <section class="w-full">
+    <header class="flex h-8 items-center">
+      <div class="w-1/2">
+        <span>参考值</span>
+        <Tooltip title="支持整型，取值范围：-2147483648 ~ 2147483647">
+          <Icon icon="ant-design:question-circle-outlined" class="cursor-pointer ml-1" />
+        </Tooltip>
+      </div>
+      <div class="w-1/2">
+        <span>参考描述</span>
+        <Tooltip
+          title="支持中文、英文大小写、数字、下划线和短划线，必须以中文、英文或数字开头，不超过20个字符"
+        >
+          <Icon icon="ant-design:question-circle-outlined" class="cursor-pointer ml-1" />
+        </Tooltip>
+      </div>
+    </header>
+    <main class="w-full">
+      <section class="w-full flex" v-for="item in enumsListElRef" :key="item.uuid">
+        <BasicForm
+          :ref="(el) => setFormActionType(item, el)"
+          @register="registerForm"
+          class="enums-form"
+          :disabled="disabled"
+          @field-value-change="validateSameEnum"
+        >
+          <template #division>
+            <div>~</div>
+          </template>
+        </BasicForm>
+        <Button
+          type="link"
+          class="relative -left-6"
+          :disabled="disabled"
+          @click="handleDeleteEnums(item)"
+        >
+          删除
+        </Button>
+      </section>
+    </main>
+    <div v-if="hasSameEnum" class="text-red-400">枚举项中存在相同的参数值或参数描述</div>
+    <Tooltip title="枚举项最多创建 100 个">
+      <Button type="link" @click="handleAddEnums" :disabled="disabled || getEnumsLimit">
+        +添加枚举项
+      </Button>
+    </Tooltip>
+  </section>
+</template>
+
+<style scoped lang="less">
+  .enums-form {
+    @apply w-full;
+
+    > :deep(.ant-row) {
+      @apply w-full;
+
+      .ant-input-number {
+        width: 100%;
+      }
+    }
+  }
+</style>

@@ -14,6 +14,8 @@
   import { DataType, StructJSON } from '/@/api/device/model/modelOfMatterModel';
   import { isArray } from '/@/utils/is';
   import { useMessage } from '/@/hooks/web/useMessage';
+  import EnumList from './EnumList.vue';
+  import { DataTypeEnum } from '/@/enums/objectModelEnum';
 
   const modalReceiveRecord = ref<OpenModalParams>({
     mode: OpenModalMode.CREATE,
@@ -26,6 +28,8 @@
     hiddenAccessMode: boolean;
   }>();
 
+  const enumListRef = ref<InstanceType<typeof EnumList>>();
+
   const emit = defineEmits(['register', 'submit']);
 
   const { createMessage } = useMessage();
@@ -53,13 +57,14 @@
     modalReceiveRecord.value = record;
     const data = record.record || {};
     const { dataType = {} } = data! as StructJSON;
-    const { specs = {}, type } = dataType as DataType;
+    const { specs = {}, type, specsList } = dataType as DataType;
 
     if (record.record) {
       const value = {
         type,
         ...data,
         ...(isArray(specs) ? { specs } : { ...specs }),
+        enumList: type === DataTypeEnum.ENUM ? specsList : [],
       };
 
       setFieldsValue(value);
@@ -74,7 +79,8 @@
   const handleSubmit = async () => {
     try {
       const _value = await validate();
-      let structJSON = transfromToStructJSON(_value);
+      await unref(enumListRef)?.validate?.();
+      let structJSON = transfromToStructJSON(_value, unref(enumListRef)?.getFieldsValue?.() || []);
       const value = {
         ...structJSON,
         ...(unref(modalReceiveRecord)?.record?.id
@@ -104,7 +110,11 @@
     destroy-on-close
     :show-ok-btn="!$props.disabled"
   >
-    <BasicForm @register="register" :schemas="getFormSchemas" />
+    <BasicForm @register="register" :schemas="getFormSchemas">
+      <template #EnumList="{ field, model }">
+        <EnumList ref="enumListRef" :value="model[field]" :disabled="disabled" />
+      </template>
+    </BasicForm>
   </BasicModal>
 </template>
 

@@ -37,7 +37,7 @@ const validateExcludeComma = (field: string, errorName: string): Rule[] => {
       validator: () => {
         const reg = /[,，]+/;
         if (reg.test(field)) {
-          return Promise.reject(errorName);
+          return Promise.reject(`${errorName}不能包含逗号`);
         }
         return Promise.resolve();
       },
@@ -64,7 +64,10 @@ export const formSchemas = ({
         placeholder: '请输入功能名称',
       },
       dynamicRules: ({ values }) => {
-        return validateExcludeComma(values[FormField.FUNCTION_NAME], '功能名称不能包含逗号');
+        return [
+          { required: true, message: '请输入功能名称' },
+          ...validateExcludeComma(values[FormField.FUNCTION_NAME], '功能名称'),
+        ];
       },
     },
     {
@@ -80,7 +83,10 @@ export const formSchemas = ({
         placeholder: '请输入标识符',
       },
       dynamicRules: ({ values }) => {
-        return validateExcludeComma(values[FormField.IDENTIFIER], '标识符不能包含逗号');
+        return [
+          { required: true, message: '请输入标识符' },
+          ...validateExcludeComma(values[FormField.IDENTIFIER], '标识符'),
+        ];
       },
     },
     {
@@ -105,6 +111,19 @@ export const formSchemas = ({
           api: async (params: Recordable) => {
             try {
               const record = await findDictItemByCode(params);
+
+              if (isTcp) {
+                // TCP 产品 属性可创建范围
+                return record.filter((item) =>
+                  [
+                    DataTypeEnum.BOOL,
+                    DataTypeEnum.NUMBER_DOUBLE,
+                    DataTypeEnum.NUMBER_INT,
+                    DataTypeEnum.STRING,
+                  ].includes(item.itemValue as DataTypeEnum)
+                );
+              }
+
               return hasStructForm
                 ? record.filter((item) => item.itemValue !== DataTypeEnum.STRUCT)
                 : record;
@@ -127,6 +146,16 @@ export const formSchemas = ({
       },
     },
     {
+      field: FormField.ENUM_LIST,
+      component: 'Input',
+      label: '枚举',
+      ifShow: ({ values }) => values[FormField.TYPE] === DataTypeEnum.ENUM,
+      slot: 'EnumList',
+      colProps: {
+        span: 24,
+      },
+    },
+    {
       field: FormField.VALUE_RANGE,
       label: '取值范围',
       component: 'CustomMinMaxInput',

 import { cloneDeep } from 'lodash-es';
 import { StructFormValue } from './type';
-import { DataType, ModelOfMatterParams, StructJSON } from '/@/api/device/model/modelOfMatterModel';
+import {
+  DataType,
+  ModelOfMatterParams,
+  Specs,
+  StructJSON,
+} from '/@/api/device/model/modelOfMatterModel';
 import { isArray } from '/@/utils/is';
 import { DataTypeEnum } from '/@/enums/objectModelEnum';
 
-export function transfromToStructJSON(value: StructFormValue): StructJSON {
+export function transfromToStructJSON(value: StructFormValue, enumList: Specs[] = []): StructJSON {
   const {
     type,
     valueRange,
@@ -55,6 +60,13 @@ export function transfromToStructJSON(value: StructFormValue): StructJSON {
       };
       break;
 
+    case DataTypeEnum.ENUM:
+      dataType = {
+        type,
+        specsList: enumList,
+      };
+      break;
+
     case DataTypeEnum.STRUCT:
       dataType = {
         type,
@@ -62,12 +74,13 @@ export function transfromToStructJSON(value: StructFormValue): StructJSON {
       };
       break;
   }
-  return { ...basic, dataType };
+  return { ...basic, dataType } as StructJSON;
 }
 
 export const excludeIdInStructJSON = (struct: DataType) => {
   const _value = cloneDeep(struct);
   const { specs } = _value;
+  if (!specs) return _value;
   const list = [specs];
 
   while (list.length) {
@@ -77,10 +90,10 @@ export const excludeIdInStructJSON = (struct: DataType) => {
           if (temp.dataType?.specs) {
             list.push(temp.dataType.specs);
           }
-          Reflect.deleteProperty(temp, 'id');
+          Reflect.has(temp, 'id') && Reflect.deleteProperty(temp, 'id');
         });
       } else {
-        Reflect.deleteProperty(item as Recordable, 'id');
+        Reflect.has(item as Recordable, 'id') && Reflect.deleteProperty(item as Recordable, 'id');
       }
       list.shift();
     }

@@ -101,6 +101,26 @@ export const getFormSchemas = ({
     };
   };
 
+  const createEnumsSelect = ({ identifier, functionName, dataType }: StructJSON): FormSchema => {
+    const { specsList } = dataType || {};
+    return {
+      field: identifier,
+      label: functionName!,
+      component: 'Select',
+      rules: [
+        {
+          required,
+          message: `${functionName}是必填项`,
+          type: 'number',
+        },
+      ],
+      componentProps: {
+        options: specsList?.map((item) => ({ label: item.name, value: item.value })),
+        placeholder: `请选择${functionName}`,
+      },
+    };
+  };
+
   const createStructJson = ({ identifier, functionName, dataType }: StructJSON): FormSchema => {
     return {
       field: identifier,
@@ -140,6 +160,7 @@ export const getFormSchemas = ({
     }
 
     if (type === DataTypeEnum.BOOL) schemas.push(createSelect(item));
+    else if (type === DataTypeEnum.ENUM) schemas.push(createEnumsSelect(item));
     else if (type === DataTypeEnum.NUMBER_INT) schemas.push(createInputNumber(item));
     else if (type === DataTypeEnum.NUMBER_DOUBLE) schemas.push(createInputNumber(item));
     else if (type === DataTypeEnum.STRING) schemas.push(createInput(item));

@@ -144,4 +144,5 @@ export type ComponentType =
   | 'TimeRangePicker'
   | 'TriggerDurationInput'
   | 'AlarmProfileSelect'
-  | 'LockControlGroup';
+  | 'LockControlGroup'
+  | 'EnumList';

@@ -4,12 +4,12 @@
       <Tooltip v-if="action.tooltip" v-bind="getTooltip(action.tooltip)">
         <PopConfirmButton v-bind="action">
           <Icon :icon="action.icon" :class="{ 'mr-1': !!action.label }" v-if="action.icon" />
-          <template v-if="action.label">{{ action.label }}</template>
+          <template v-if="action.label"><Label :label="action.label" /></template>
         </PopConfirmButton>
       </Tooltip>
       <PopConfirmButton v-else v-bind="action">
         <Icon :icon="action.icon" :class="{ 'mr-1': !!action.label }" v-if="action.icon" />
-        <template v-if="action.label">{{ action.label }}</template>
+        <template v-if="action.label"><Label :label="action.label" /> </template>
       </PopConfirmButton>
       <Divider
         type="vertical"
@@ -36,7 +36,7 @@
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, PropType, computed, toRaw, unref } from 'vue';
+  import { defineComponent, PropType, computed, toRaw, unref, VNode } from 'vue';
   // import { MoreOutlined } from '@ant-design/icons-vue';
   import { Divider, Tooltip, TooltipProps } from 'ant-design-vue';
   import Icon from '/@/components/Icon/index';
@@ -52,7 +52,14 @@
 
   export default defineComponent({
     name: 'TableAction',
-    components: { Icon, PopConfirmButton, Divider, Dropdown, Tooltip },
+    components: {
+      Icon,
+      PopConfirmButton,
+      Divider,
+      Dropdown,
+      Tooltip,
+      Label: (props: { label: VNode | string }) => props.label,
+    },
     props: {
       actions: {
         type: Array as PropType<ActionItem[]>,

 import { ButtonProps } from 'ant-design-vue/es/button/buttonTypes';
 import { TooltipProps } from 'ant-design-vue/es/tooltip/Tooltip';
 import { RoleEnum } from '/@/enums/roleEnum';
+import { VNode } from 'vue';
 export interface ActionItem extends ButtonProps {
   onClick?: Fn;
-  label?: string;
+  label?: string | VNode;
   color?: 'success' | 'error' | 'warning';
   icon?: string;
   popConfirm?: PopConfirm;

@@ -24,6 +24,9 @@ export enum DictEnum {
   // 实体类型 规则节点 Filter originator types switch
   ORIGINATOR_TYPES = 'originator_types',
 
+  // 流媒体平台
+  STREAMING_MEDIA_TYPE = 'streaming_media_type',
+
   // 产品品类领域
   CATEGORY_FIELD = 'category_field',
 }

@@ -4,4 +4,5 @@ export enum DataTypeEnum {
   STRING = 'TEXT',
   STRUCT = 'STRUCT',
   BOOL = 'BOOL',
+  ENUM = 'ENUM',
 }

@@ -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,
 ];

@@ -12,7 +12,16 @@
         <a-select
           placeholder="请选择流媒体配置"
           v-model:value="model[field]"
-          :options="streamConfigOptions.map((item) => ({ value: item.value, label: item.label }))"
+          :options="
+            streamConfigOptions
+              .filter((item) => item.type === model.videoType)
+              .map((item) => ({
+                value: item.value,
+                label: item.label,
+                type: item.type,
+              }))
+          "
+          @change="handleChange"
         >
           <template #dropdownRender="{ menuNode: menu }">
             <v-nodes :vnodes="menu" />
@@ -31,7 +40,7 @@
 <script lang="ts">
   import { defineComponent, ref, computed, unref, nextTick, onMounted } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form';
-  import { formSchema } from './config.data';
+  import { AccessMode, formSchema, VideoPlatformEnum } from './config.data';
   import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
   import { createOrEditCameraManage } from '/@/api/camera/cameraManager';
   import { useMessage } from '/@/hooks/web/useMessage';
@@ -70,6 +79,7 @@
           return {
             label: m.host,
             value: m.id,
+            type: m.type,
           };
         });
       });
@@ -96,14 +106,26 @@
         isUpdate.value = !!data?.isUpdate;
         if (unref(isUpdate)) {
           await nextTick();
+          const { record } = data || {};
           editId.value = data.record.id;
+
           if (data.record.avatar) {
-            setFieldsValue({
-              avatar: [{ uid: buildUUID(), name: 'name', url: data.record.avatar } as FileItem],
+            Object.assign(record, {
+              avatar: [{ uid: buildUUID(), name: 'name', url: record.avatar } as FileItem],
             });
           }
-          const { ...params } = data.record;
-          await setFieldsValue({ ...params });
+
+          if (
+            record?.accessMode === AccessMode.Streaming &&
+            record.videoPlatformDTO?.type === VideoPlatformEnum.FLUORITE
+          ) {
+            Object.assign(record, {
+              articulation: record.streamType,
+              videoFormat: record.playProtocol,
+            });
+          }
+
+          setFieldsValue({ ...record, videoType: record.videoPlatformDTO?.type });
         } else {
           editId.value = '';
         }
@@ -128,6 +150,15 @@
           }
           let saveMessage = '添加成功';
           let updateMessage = '修改成功';
+
+          if (
+            values?.accessMode === AccessMode.Streaming &&
+            values.videoType === VideoPlatformEnum.FLUORITE
+          ) {
+            values.streamType = values.articulation;
+            values.playProtocol = values.videoFormat;
+          }
+
           await createOrEditCameraManage(values);
           closeDrawer();
           emit('success');
@@ -139,6 +170,11 @@
         }
       }
 
+      const handleChange = (e, options) => {
+        //流媒体配置
+        setFieldsValue({ videoType: e ? options.type : null });
+      };
+
       return {
         getTitle,
         registerDrawer,
@@ -149,6 +185,7 @@
         registerSteramingDrawer,
         handleOpenStreamConfig,
         handleSuccess,
+        handleChange,
       };
     },
   });

@@ -42,6 +42,8 @@
 
   const withToken = ref(false);
 
+  const videoId = ref<string>();
+
   const fingerprintResult = ref<Nullable<GetResult>>(null);
 
   const options = reactive<VideoJsPlayerOptions>({
@@ -64,6 +66,7 @@
   const [register] = useModalInner(
     async (data: { record: CameraModel | StreamingManageRecord }) => {
       const { record } = data;
+      videoId.value = record.id || '';
       const result = await getResult();
       fingerprintResult.value = result;
       if (record.accessMode === AccessMode.ManuallyEnter) {

+<script lang="ts" setup>
+  import { BasicHelp } from '/@/components/Basic';
+  import { createImgPreview } from '/@/components/Preview/index';
+  import snStep4 from '/@/assets/images/sn-step4.png';
+  const imgList: string[] = [snStep4];
+  function handlePreview() {
+    createImgPreview({ imageList: imgList, defaultWidth: 1000 });
+  }
+</script>
+
+<template>
+  <div>监控点编号</div>
+  <BasicHelp
+    placement="top"
+    @click="handlePreview"
+    class="mx-1"
+    text='点击查看如何获取"监控点编号"'
+  />
+</template>

@@ -306,7 +306,7 @@
                       @on-unmounted="handleCloseFlvPlayUrl(item)"
                     />
                     <div
-                      class="video-container-mask absolute top-0 left-0 z-50 text-lg w-full text-light-50 flex justify-center items-center"
+                      class="video-container-mask absolute top-0 left-0 z-50 text-lg w-full text-light-50 flex justify-center"
                       style="height: 100%; background-color: rgba(0, 0, 0, 0.5)"
                     >
                       <span>{{ item.name }}</span>

@@ -4,10 +4,13 @@ import { FormSchema as QFormSchema, useComponentRegister } from '/@/components/F
 import { CameraVideoUrl, CameraMaxLength } from '/@/utils/rules';
 import { h } from 'vue';
 import SnHelpMessage from './SnHelpMessage.vue';
+import SnHelpMessage1 from './SnHelpMessage1.vue';
 import { OrgTreeSelect } from '../../common/OrgTreeSelect';
 import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
 import { createImgPreview } from '/@/components/Preview';
 import { uploadThumbnail } from '/@/api/configuration/center/configurationCenter';
+import { findDictItemByCode } from '/@/api/system/dict';
+import { DictEnum } from '/@/enums/dictEnum';
 
 useComponentRegister('OrgTreeSelect', OrgTreeSelect);
 
@@ -45,6 +48,19 @@ export enum MediaType {
   M3U8 = 'm3u8',
 }
 
+export enum FluoriteMideaProtocolEnum {
+  HLS = 2,
+  FLV = 4,
+}
+
+export enum ArticulationEnumType {
+  HIGH_DEFINITION = 1,
+  SMOOTH = 2,
+}
+export enum ArticulationEnumNameType {
+  HIGH_DEFINITION = '高清',
+  SMOOTH = '流畅',
+}
 // 表格列数据
 export const columns: BasicColumn[] = [
   {
@@ -100,6 +116,13 @@ export const searchFormSchema: FormSchema[] = [
   },
 ];
 
+export enum VideoPlatformEnum {
+  // 海康
+  SCI = 0,
+  // 萤石云
+  FLUORITE = 1,
+}
+
 // 弹框配置项
 export const formSchema: QFormSchema[] = [
   {
@@ -215,7 +238,25 @@ export const formSchema: QFormSchema[] = [
     },
     rules: [{ required: true, message: '视频流是必填项' }, ...CameraVideoUrl],
   },
-
+  {
+    field: 'videoType',
+    label: '流媒体平台',
+    component: 'ApiRadioGroup',
+    required: true,
+    defaultValue: VideoPlatformEnum.SCI,
+    ifShow: ({ values }) => values.accessMode === AccessMode.Streaming,
+    componentProps: {
+      api: async (params) => {
+        const values = await findDictItemByCode(params);
+        return values.map((item) => ({ label: item.itemText, value: Number(item.itemValue) }));
+      },
+      params: {
+        dictCode: DictEnum.STREAMING_MEDIA_TYPE,
+      },
+      getPopupContainer: () => document.body,
+      placeholder: `请选择平台类型`,
+    },
+  },
   {
     field: 'videoPlatformId',
     label: '流媒体配置',
@@ -234,7 +275,10 @@ export const formSchema: QFormSchema[] = [
     component: 'RadioGroup',
     defaultValue: StreamType.MASTER,
     ifShow({ values }) {
-      return values.accessMode === AccessMode.Streaming;
+      return (
+        values.accessMode === AccessMode.Streaming &&
+        values.videoType !== VideoPlatformEnum.FLUORITE
+      );
     },
     componentProps: {
       placeholder: '请选择码流',
@@ -247,12 +291,53 @@ export const formSchema: QFormSchema[] = [
     },
   },
   {
+    field: 'articulation',
+    label: '清晰度',
+    component: 'RadioGroup',
+    defaultValue: ArticulationEnumType.HIGH_DEFINITION,
+    ifShow: ({ model }) =>
+      model.accessMode === AccessMode.Streaming && model.videoType === VideoPlatformEnum.FLUORITE,
+    componentProps: () => {
+      return {
+        options: [
+          {
+            label: ArticulationEnumNameType.HIGH_DEFINITION,
+            value: ArticulationEnumType.HIGH_DEFINITION,
+          },
+          {
+            label: ArticulationEnumNameType.SMOOTH,
+            value: ArticulationEnumType.SMOOTH,
+          },
+        ],
+      };
+    },
+  },
+  {
+    field: 'videoFormat',
+    label: '视频格式',
+    component: 'Select',
+    ifShow: ({ model }) =>
+      model.accessMode === AccessMode.Streaming && model.videoType === VideoPlatformEnum.FLUORITE,
+    defaultValue: FluoriteMideaProtocolEnum.FLV,
+    required: true,
+    componentProps: {
+      options: [
+        { label: 'FLV', value: FluoriteMideaProtocolEnum.FLV },
+        { label: 'HLS', value: FluoriteMideaProtocolEnum.HLS },
+      ],
+      allowClear: false,
+    },
+  },
+  {
     field: 'playProtocol',
     label: '播放协议',
     component: 'RadioGroup',
     defaultValue: PlayProtocol.HTTP,
     ifShow({ values }) {
-      return values.accessMode === AccessMode.Streaming;
+      return (
+        values.accessMode === AccessMode.Streaming &&
+        values.videoType !== VideoPlatformEnum.FLUORITE
+      );
     },
     helpMessage: ['平台使用https的hls协议,需联系海康开放平台专家支持。'],
     componentProps: {
@@ -270,7 +355,25 @@ export const formSchema: QFormSchema[] = [
     component: 'Input',
     rules: [...CameraVideoUrl, { required: true, message: '摄像头编号是必填项' }],
     ifShow({ values }) {
-      return values.accessMode === AccessMode.Streaming;
+      return (
+        values.accessMode === AccessMode.Streaming &&
+        values.videoType !== VideoPlatformEnum.FLUORITE
+      );
+    },
+    componentProps: {
+      placeholder: '请输入监控点编号',
+    },
+  },
+  {
+    field: 'sn',
+    label: h(SnHelpMessage1) as any,
+    component: 'Input',
+    rules: [...CameraVideoUrl, { required: true, message: '摄像头编号是必填项' }],
+    ifShow({ values }) {
+      return (
+        values.accessMode === AccessMode.Streaming &&
+        values.videoType === VideoPlatformEnum.FLUORITE
+      );
     },
     componentProps: {
       placeholder: '请输入监控点编号',

 import { PlayProtocol } from '../manage/config.data';
 import type { StreamingMediaModel } from '/@/api/camera/model/cameraModel';
+import { findDictItemByCode } from '/@/api/system/dict';
+import { DictEnum } from '/@/enums/dictEnum';
 import { BasicColumn, FormSchema } from '/@/components/Table';
 
 export interface DrawerParams {
@@ -9,6 +11,7 @@ export interface DrawerParams {
 
 export const streamingMediaTypeMapping = {
   0: '海康ISC平台',
+  1: '萤石平台',
 };
 
 export const streamingMediaSSLMapping = {
@@ -37,6 +40,9 @@ export const columnSchema: BasicColumn[] = [
     title: '用户Key',
     dataIndex: 'appKey',
     width: 80,
+    format(text) {
+      return formatSecret(text);
+    },
   },
   {
     title: '用户密钥',
@@ -73,26 +79,27 @@ export const formDetailSchema: FormSchema[] = [
   {
     label: '平台类型',
     field: 'type',
-    component: 'Select',
-    rules: [{ required: true, message: '平台类型为必填项', type: 'number' }],
+    component: 'ApiSelect',
+    required: true,
     componentProps: {
-      options: [{ label: '海康ISC平台', value: 0 }],
-      placeholder: '请输入选择平台类型',
+      api: async (params) => {
+        const values = await findDictItemByCode(params);
+        return values.map((item) => ({ label: item.itemText, value: Number(item.itemValue) }));
+      },
+      params: {
+        dictCode: DictEnum.STREAMING_MEDIA_TYPE,
+      },
+      getPopupContainer: () => document.body,
+      placeholder: `请选择平台类型`,
     },
   },
   {
     label: '部署环境',
     field: 'ssl',
     component: 'RadioGroup',
+    ifShow: false,
     rules: [{ required: true, message: '流媒体部署环境为必填项', type: 'number' }],
-    defaultValue: PlayProtocol.HTTP,
-    componentProps: {
-      defaultValue: PlayProtocol.HTTP,
-      options: [
-        { label: 'http', value: PlayProtocol.HTTP },
-        { label: 'https', value: PlayProtocol.HTTPS },
-      ],
-    },
+    defaultValue: PlayProtocol.HTTPS,
   },
   {
     label: '平台地址',
@@ -108,7 +115,7 @@ export const formDetailSchema: FormSchema[] = [
   {
     label: '用户Key',
     field: 'appKey',
-    component: 'Input',
+    component: 'InputPassword',
     rules: [{ required: true, message: '用户Key为必填项' }],
     componentProps: {
       maxLength: 36,
@@ -118,7 +125,7 @@ export const formDetailSchema: FormSchema[] = [
   {
     label: '用户密钥',
     field: 'appSecret',
-    component: 'Input',
+    component: 'InputPassword',
     rules: [
       { required: true, message: '用户密钥为必填项' },
       { required: true, min: 20, message: '用户密钥不能少于20位字符' },

@@ -14,7 +14,9 @@
           v-model:value="model['templateId']"
           placeholder="请选择模板"
           style="width: 100%"
-          :options="selectTemplateOptions"
+          :options="
+            selectTemplateOptions?.filter((item) => item.platform === model['platform']) || []
+          "
           @change="handleTemplateChange"
           v-bind="createPickerSearch()"
           :disabled="templateDisabled"
@@ -140,6 +142,7 @@
       });
 
       const selectTemplateOptions: Ref<any[]> = ref([]);
+
       const getTemplate = async (params: queryPageParams) => {
         const { items } = await getPage({ ...params, isTemplate: 1 });
         selectTemplateOptions.value = items.map((item) => ({
@@ -152,11 +155,7 @@
 
       const handleTemplateChange = async (_, option) => {
         const { productAndDevice } = option;
-        // if (!productAndDevice) return;
-        // selectOptions.value = productAndDevice?.map((item) => ({
-        //   label: item.profileName || item.name,
-        //   value: item.profileId,
-        // }));
+        setFieldsValue({ platform: option?.platform });
         await nextTick();
         // 赋值
         selectDeviceProfileRef.value?.setFieldsValue(

@@ -144,6 +144,7 @@ export const formSchema: FormSchema[] = [
         { label: '移动端', value: Platform.PHONE },
       ],
     },
+    dynamicDisabled: ({ model }) => !!model?.enableTemplate,
   },
   {
     field: 'enableTemplate', //前端控制

@@ -101,10 +101,6 @@ export const formSchema: FormSchema[] = [
         onPreview: (fileList: FileItem) => {
           createImgPreview({ imageList: [fileList.url!] });
         },
-        // showUploadList: {
-        //   showDownloadIcon: true,
-        //   showRemoveIcon: true,
-        // },
       };
     },
   },

@@ -348,7 +348,7 @@ export const step1Schemas: FormSchema[] = [
       popconfirmTitle: () =>
         updateOrgHelpMessage.map((text) => h('div', { style: { maxWidth: '240px' } }, text)),
     }),
-    componentProps: ({ formModel }) => {
+    componentProps: ({ formModel, formActionType }) => {
       return {
         component: 'OrgTreeSelect',
         defaultLockStatus: !!formModel?.isUpdate,
@@ -358,6 +358,17 @@ export const step1Schemas: FormSchema[] = [
               organizationId: formModel?.sensorOrganizationId,
             },
           },
+          onOptionsChange: (options: Recordable[]) => {
+            if (!formModel?.organizationId && formModel?.deviceType === DeviceTypeEnum.SENSOR) {
+              const firstItem = options?.[0];
+
+              if (firstItem && firstItem?.id) {
+                const { setFieldsValue, clearValidate } = formActionType;
+                setFieldsValue({ organizationId: firstItem.id });
+                clearValidate('organizationId');
+              }
+            }
+          },
         },
       };
     },

@@ -70,6 +70,7 @@ export const columns: BasicColumn[] = [
     title: '状态',
     dataIndex: 'deviceState',
     width: 110,
+    className: 'device-status',
     slots: { customRender: 'deviceState' },
   },
   {
@@ -237,4 +238,17 @@ export const searchFormSchema: FormSchema[] = [
       placeholder: '请选择',
     },
   },
+  {
+    field: 'alarmStatus',
+    label: '是否告警',
+    component: 'Select',
+    colProps: { span: 6 },
+    componentProps: {
+      options: [
+        { label: '是', value: 1 },
+        { label: '否', value: 0 },
+      ],
+      placeholder: '请选择设备是否存在告警',
+    },
+  },
 ];

@@ -19,7 +19,20 @@
       <Tabs.TabPane key="modelOfMatter" tab="物模型数据">
         <ModelOfMatter :deviceDetail="deviceDetail" />
       </Tabs.TabPane>
-      <Tabs.TabPane key="3" tab="告警">
+      <Tabs.TabPane key="3">
+        <template #tab>
+          <Badge :offset="[2, -5]" style="color: inherit">
+            <span>告警</span>
+            <template #count>
+              <div
+                :style="{ visibility: deviceDetail.alarmStatus ? 'visible' : 'hidden' }"
+                class="w-3.5 h-3.5 !flex justify-center items-center rounded-1 border-red-400 border"
+              >
+                <Icon icon="mdi:bell-warning" color="#f46161" :size="12" class="!mr-0" />
+              </div>
+            </template>
+          </Badge>
+        </template>
         <AlarmLog :device-id="deviceDetail.id" class="bg-gray-100" />
       </Tabs.TabPane>
       <Tabs.TabPane key="4" tab="子设备" v-if="deviceDetail?.deviceType === 'GATEWAY'">
@@ -51,7 +64,7 @@
 <script lang="ts" setup>
   import { ref, computed } from 'vue';
   import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
-  import { Tabs } from 'ant-design-vue';
+  import { Tabs, Badge } from 'ant-design-vue';
   import Detail from '../tabs/Detail.vue';
   import ChildDevice from '../tabs/ChildDevice.vue';
   import TBoxDetail from '../tabs/TBoxDetail.vue';
@@ -62,6 +75,7 @@
   import { DeviceRecord } from '/@/api/device/model/deviceModel';
   import Task from '../tabs/Task.vue';
   import AlarmLog from '/@/views/alarm/log/index.vue';
+  import { Icon } from '/@/components/Icon';
 
   const emit = defineEmits(['reload', 'register', 'openTbDeviceDetail', 'openGatewayDeviceDetail']);
 

@@ -27,16 +27,26 @@ export interface SocketInfoDataSourceItemType extends BaseAdditionalInfo {
   expand?: boolean;
   showHistoryDataButton?: boolean;
   rawValue?: any;
+  enum?: Record<string, string>;
 }
 
 export function buildTableDataSourceByObjectModel(
   models: DeviceModelOfMatterAttrs[]
 ): SocketInfoDataSourceItemType[] {
   function getAdditionalInfoByDataType(dataType?: DataType) {
-    const { specs } = dataType || {};
+    const { specs, specsList, type } = dataType || {};
     if (isArray(specs)) return {};
     const { unit, boolClose, boolOpen, unitName } = (specs as Partial<Specs>) || {};
-    return { unit, boolClose, boolOpen, unitName };
+    const result = { unit, boolClose, boolOpen, unitName };
+    if (type == DataTypeEnum.ENUM && specsList && specsList.length) {
+      Reflect.set(
+        result,
+        'enum',
+        specsList.reduce((prev, next) => ({ ...prev, [next.value!]: next.name }), {})
+      );
+    }
+
+    return result;
   }
 
   return models.map((item) => {
@@ -72,7 +82,6 @@ export function buildTableDataSourceByObjectModel(
     } else {
       Object.assign(res, getAdditionalInfoByDataType(dataType));
     }
-
     return res;
   });
 }

@@ -284,13 +284,15 @@
   });
 
   const formatValue = (item: SocketInfoDataSourceItemType) => {
-    return item.type === DataTypeEnum.BOOL
-      ? !isNullOrUnDef(item.value)
-        ? !!Number(item.value)
-          ? item.boolOpen
-          : item.boolClose
-        : '--'
-      : (item.value as string) || '--';
+    if (isNullOrUnDef(item)) return '--';
+    switch (item.type) {
+      case DataTypeEnum.BOOL:
+        return !!Number(item.value) ? item.boolOpen : item.boolClose;
+      case DataTypeEnum.ENUM:
+        return item.enum?.[item.value as string];
+      default:
+        return item.value || '--';
+    }
   };
 
   const [register, { openModal: openSendCommandModal }] = useModal();

+import { StructJSON } from '/@/api/device/model/modelOfMatterModel';
 import { FormSchema } from '/@/components/Form';
+import { validateTCPCustomCommand } from '/@/components/Form/src/externalCompns/components/ThingsModelForm';
+import { DataTypeEnum } from '/@/enums/objectModelEnum';
 
 const InsertString = (t, c, n) => {
   const r: string | number[] = [];
@@ -127,21 +130,33 @@ const SingleToHexBatch = (t) => {
   return r.join('\r\n');
 };
 
-const formSchemasConfig = (schemas, actionType): FormSchema[] => {
-  const { identifier, functionName } = schemas;
+const formSchemasConfig = (schemas: StructJSON, actionType: string): FormSchema[] => {
+  const { identifier, functionName, dataType } = schemas;
+
+  if (dataType?.type === DataTypeEnum.STRING) {
+    return [
+      {
+        field: identifier,
+        label: functionName!,
+        component: 'Input',
+        rules: [{ required: true, validator: validateTCPCustomCommand }],
+        componentProps: {
+          placeholder: `请输入${functionName}`,
+        },
+      },
+    ];
+  }
+
   if (actionType == '06') {
     return [
       {
         field: identifier,
-        label: functionName,
+        label: functionName!,
         component: 'InputNumber',
         rules: [{ required: true, message: '请输入正数' }],
         componentProps: {
           min: 0,
-          formatter: (e) => {
-            const value = `${e}`.replace('-', '').replace(/^(-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
-            return value;
-          },
+          precision: 2,
           placeholder: `请输入正数`,
         },
       },
@@ -150,7 +165,7 @@ const formSchemasConfig = (schemas, actionType): FormSchema[] => {
     return [
       {
         field: identifier,
-        label: functionName,
+        label: functionName!,
         component: 'InputNumber',
         rules: [{ required: true, message: '请输入值' }],
         componentProps: {
@@ -165,13 +180,12 @@ const formSchemasConfig = (schemas, actionType): FormSchema[] => {
     return [
       {
         field: identifier,
-        label: functionName,
+        label: functionName!,
         component: 'InputNumber',
         rules: [{ required: true, message: '请输入值' }],
         componentProps: {
           placeholder: `请输入数字`,
-          formatter: (e) =>
-            `${e}`.replace(/\B(?=(\d{3})+(?!\d))/g, '').replace(/^(-)*(\d+)\.(\d\d).*$/, '$1$2.$3'),
+          precision: 2,
         },
       },
     ];

@@ -35,6 +35,7 @@
   const zoomFactorValue = ref<number>(1); //缩放因子
   const isShowMultiply = ref<Boolean>(false); // 只有tcp --> int和double类型才相乘缩放因子
   const deviceTransportType = ref<string>();
+  const objectDataType = ref<DataTypeEnum>();
 
   const [register] = useModalInner(async (params: ModalParamsType<DeviceModelOfMatterAttrs>) => {
     const { record } = params;
@@ -48,6 +49,7 @@
     zoomFactorValue.value = zoomFactor ? Number(zoomFactor) : 1;
     isShowMultiply.value = type == 'INT' || type == 'DOUBLE' ? true : false;
     deviceTransportType.value = transportType;
+    objectDataType.value = type;
 
     let schemas = [{ dataType: dataType, identifier, functionName: name } as StructJSON];
 
@@ -136,7 +138,12 @@
 
       const sendValue = ref({});
       //判断tcp类型 标识符是自定义还是ModBus
-      if (unref(isShowModBUS)) {
+      if (unref(objectDataType) === DataTypeEnum.STRING) {
+        const flag = await validate();
+        if (!flag) return;
+        const value = getFieldsValue()[unref(formField)];
+        sendValue.value = value;
+      } else if (unref(isShowModBUS)) {
         if (!unref(isShowActionType)) {
           createMessage.warning('当前物模型扩展描述没有填写');
           return;

@@ -12,16 +12,9 @@ export interface BasicCreateFormParams {
 
 useComponentRegister('JSONEditor', JSONEditor);
 
-const validateDouble = (
-  value: number,
-  type: DataTypeEnum,
-  min?: number | string,
-  max?: number | string
-) => {
-  min =
-    Number(min) || type === DataTypeEnum.NUMBER_INT ? Number.MIN_SAFE_INTEGER : Number.MIN_VALUE;
-  max =
-    Number(max) || type === DataTypeEnum.NUMBER_INT ? Number.MAX_SAFE_INTEGER : Number.MAX_VALUE;
+const validateDouble = (value: number, min?: number | string, max?: number | string) => {
+  min = Number(min) || Number.MIN_SAFE_INTEGER;
+  max = Number(max) || Number.MAX_SAFE_INTEGER;
 
   return {
     flag: value < min || value > max,
@@ -47,7 +40,7 @@ export const useGenDynamicForm = () => {
           type: 'number',
           trigger: 'change',
           validator: (_rule, value) => {
-            const { flag, message } = validateDouble(value, type, min, max);
+            const { flag, message } = validateDouble(value, min, max);
             if (flag) {
               return Promise.reject(`${functionName}${message}`);
             }
@@ -56,8 +49,8 @@ export const useGenDynamicForm = () => {
         },
       ],
       componentProps: {
-        max: max ?? type === DataTypeEnum.NUMBER_INT ? Number.MAX_SAFE_INTEGER : Number.MAX_VALUE,
-        min: min ?? type === DataTypeEnum.NUMBER_INT ? Number.MIN_SAFE_INTEGER : Number.MIN_VALUE,
+        max: max ?? Number.MAX_SAFE_INTEGER,
+        min: min ?? Number.MIN_SAFE_INTEGER,
         step,
         placeholder: `请输入${functionName}`,
         precision: type === DataTypeEnum.NUMBER_INT ? 0 : 2,
@@ -81,7 +74,7 @@ export const useGenDynamicForm = () => {
           type: 'string',
           trigger: 'change',
           validator: (_rule, value) => {
-            if (value.length > length) {
+            if (value?.length > length) {
               return Promise.reject(`${functionName}数据长度应该小于${length}`);
             }
             return Promise.resolve(value);
@@ -117,6 +110,24 @@ export const useGenDynamicForm = () => {
     };
   };
 
+  const createEnumSelect = ({
+    identifier,
+    functionName,
+    dataType,
+  }: BasicCreateFormParams): FormSchema => {
+    const { specsList } = dataType;
+    return {
+      field: identifier,
+      label: functionName,
+      component: 'Select',
+      componentProps: {
+        options: specsList?.map((item) => ({ label: item.name, value: item.value })),
+        placeholder: `请选择${functionName}`,
+        getPopupContainer: () => document.body,
+      },
+    };
+  };
+
   const createInputJson = ({ identifier, functionName }: BasicCreateFormParams): FormSchema => {
     return {
       field: identifier,
@@ -144,6 +155,7 @@ export const useGenDynamicForm = () => {
     [DataTypeEnum.NUMBER_INT]: createInputNumber,
     [DataTypeEnum.STRING]: createInput,
     [DataTypeEnum.STRUCT]: createInputJson,
+    [DataTypeEnum.ENUM]: createEnumSelect,
   };
 
   const fieldTypeMap = new Map<string, DataTypeEnum>();

@@ -39,6 +39,8 @@
 
   const playUrl = ref('');
 
+  const videoId = ref<string>();
+
   const withToken = ref(false);
 
   const fingerprintResult = ref<Nullable<GetResult>>(null);
@@ -64,6 +66,7 @@
   const [register] = useModalInner(
     async (data: { record: CameraModel | StreamingManageRecord }) => {
       const { record } = data;
+      videoId.value = record.id || '';
       const result = await getResult();
       fingerprintResult.value = result;
       if (record.accessMode === AccessMode.ManuallyEnter) {

@@ -2,7 +2,7 @@
   <div>
     <PageWrapper dense contentFullHeight contentClass="flex">
       <OrganizationIdTree @select="handleSelect" ref="organizationIdTreeRef" />
-      <BasicTable style="flex: auto" @register="registerTable" class="w-5/6 xl:w-4/5">
+      <BasicTable style="flex: auto" @register="registerTable" class="w-5/6 xl:w-4/5 device-table">
         <template #toolbar>
           <Authority :value="DeviceListAuthEnum.CREATE">
             <a-button type="primary" @click="handleCreate" v-if="authBtn(role)">
@@ -106,13 +106,17 @@
           </Tag>
         </template>
         <template #deviceState="{ record }">
-          <!-- <HeartOutlined v-if="!record.isCollect" class="mr-1" style="color: red" /> -->
-          <Tooltip>
-            <template #title> 我的收藏</template>
-            <HeartTwoTone v-if="record.isCollect" class="mr-1" twoToneColor="#3B82F6" />
-          </Tooltip>
+          <div v-if="record.isCollect">
+            <div class="absolute top-0 left-0 device-collect"> </div>
+            <Icon
+              icon="ph:star-fill"
+              class="fill-light-50 absolute top-0.5 left-0.5"
+              color="#fff"
+              :size="12"
+            />
+          </div>
+
           <Tag
-            :style="{ marginLeft: !record.isCollect ? '17px' : '' }"
             :color="
               record.deviceState == DeviceState.INACTIVE
                 ? 'warning'
@@ -135,7 +139,7 @@
           <TableAction
             :actions="[
               {
-                label: '详情',
+                label: AlarmDetailActionButton({ hasAlarm: !!record.alarmStatus }),
                 icon: 'ant-design:eye-outlined',
                 auth: DeviceListAuthEnum.DETAIL,
                 onClick: handleDetail.bind(null, record),
@@ -232,7 +236,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { reactive, onMounted, ref } from 'vue';
+  import { reactive, onMounted, ref, h, CSSProperties } from 'vue';
   import {
     DeviceModel,
     DeviceRecord,
@@ -241,8 +245,7 @@
   } from '/@/api/device/model/deviceModel';
   import { BasicTable, useTable, TableAction, TableImg } from '/@/components/Table';
   import { columns, DeviceListAuthEnum, searchFormSchema } from './config/device.data';
-  import { Tag, Popover, Button, Tooltip } from 'ant-design-vue';
-  import { HeartTwoTone } from '@ant-design/icons-vue';
+  import { Tag, Popover, Button, Badge } from 'ant-design-vue';
   import {
     deleteDevice,
     devicePage,
@@ -278,6 +281,7 @@
   } from './cpns/modal/BatchUpdateProductModal';
   import { DataActionModeEnum } from '/@/enums/toolEnum';
   import { AuthDropDown } from '/@/components/Widget';
+  import Icon from '/@/components/Icon';
 
   const { isCustomer } = useAuthDeviceDetail();
   const { createMessage } = useMessage();
@@ -294,6 +298,32 @@
   const [registerImportModal, { openModal: openImportModal }] = useModal();
   const [registerBatchUpdateProductModal, { openModal: openBatchUpdateProductModal }] = useModal();
 
+  const AlarmDetailActionButton = ({ hasAlarm }: { hasAlarm?: boolean }) =>
+    h(
+      Badge,
+      { offset: [0, -5] },
+      {
+        default: () => h('span', { style: { color: '#377dff' } }, '详情'),
+        count: () =>
+          h(
+            'div',
+            {
+              style: {
+                visibility: hasAlarm ? 'visible' : 'hidden',
+                width: '14px',
+                height: '14px',
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                border: '1px solid #f46161',
+                borderRadius: '50%',
+              } as CSSProperties,
+            },
+            h(Icon, { icon: 'mdi:bell-warning', color: '#f46161', size: 12 })
+          ),
+      }
+    );
+
   const batchUpdateProductFlag = ref(true);
 
   const [
@@ -336,6 +366,7 @@
     rowKey: 'id',
     searchInfo: searchInfo,
     clickToRowSelect: false,
+    rowClassName: (record) => ((record as DeviceRecord).alarmStatus ? 'device-alarm-badge' : ''),
     actionColumn: {
       width: 200,
       title: '操作',
@@ -557,4 +588,25 @@
   };
 </script>
 
-<style scoped lang="css"></style>
+<style scoped lang="less">
+  .device-table {
+    :deep(.ant-form-item-control-input-content) {
+      & > div > div {
+        width: 100%;
+      }
+    }
+  }
+</style>
+
+<style lang="less">
+  .device-status {
+    position: relative;
+
+    .device-collect {
+      width: 0;
+      height: 0;
+      border-top: 30px solid #377dff;
+      border-right: 30px solid transparent;
+    }
+  }
+</style>

@@ -144,7 +144,7 @@
             <div class="h-full w-full !flex justify-center items-center text-center p-1">
               <Image
                 @click.stop
-                wrapper-class-name="!w-32 !h-32 !flex !items-center"
+                wrapper-class-name="!w-32 !h-32 !flex !items-center overflow-hidden"
                 :src="item.image || IMAGE_FALLBACK"
                 placeholder
                 :fallback="IMAGE_FALLBACK"

-<template>
-  <BasicForm @register="register" />
-</template>
 <script lang="ts" setup>
   import { BasicForm, useForm } from '/@/components/Form';
   import { DataType, ModelOfMatterParams } from '/@/api/device/model/modelOfMatterModel';
@@ -15,34 +12,38 @@
   import { formSchemas } from '/@/components/Form/src/externalCompns/components/StructForm/config';
   import { TransportTypeEnum } from '../../../../components/TransportDescript/const';
   import { DataTypeEnum } from '/@/enums/objectModelEnum';
+  import { ref, unref } from 'vue';
+  import EnumList from '/@/components/Form/src/externalCompns/components/StructForm/EnumList.vue';
 
   const props = defineProps<{ openModalMode: OpenModelMode; transportType?: string | undefined }>();
 
-  const [register, { validate, resetFields, setFieldsValue, setProps }] = useForm({
+  const enumListRef = ref<InstanceType<typeof EnumList>>();
+
+  const [register, { validate, getFieldsValue, resetFields, setFieldsValue }] = useForm({
     labelWidth: 100,
     schemas: formSchemas({
       hasStructForm: false,
       hiddenAccessMode: false,
       isTcp: props.transportType === TransportTypeEnum.TCP,
     }),
-    actionColOptions: {
-      span: 14,
-    },
-    showResetButton: false,
-    submitOnReset: false,
     showActionButtonGroup: false,
   });
 
+  const disabled = ref(false);
   const setDisable = (flag: boolean) => {
-    setProps({ disabled: flag });
+    disabled.value = flag;
   };
 
   async function getFormData(): Promise<Partial<ModelOfMatterParams>> {
-    const _values = (await validate()) as StructFormValue;
-    if (!_values) return {};
+    await validate();
+    await unref(enumListRef)?.validate?.();
+
+    const _values = getFieldsValue() as StructFormValue;
     const { functionName, remark, identifier, accessMode } = _values;
-    const structJSON = transfromToStructJSON(_values);
+    const structJSON = transfromToStructJSON(_values, unref(enumListRef)?.getFieldsValue?.());
+
     const dataType = excludeIdInStructJSON(structJSON.dataType!);
+
     const value = {
       functionName,
       functionType: FunctionType.PROPERTIES,
@@ -54,6 +55,7 @@
         dataType: dataType,
       },
     } as ModelOfMatterParams;
+
     return value;
   }
 
@@ -63,18 +65,21 @@
 
   const setFormData = (record: ModelOfMatterParams) => {
     const { functionJson } = record;
-    const { dataType = {} } = functionJson!;
+    const { dataType } = functionJson!;
 
-    const { specs } = dataType! as DataType;
+    const { specs } = (dataType! || {}) as DataType;
 
     const value = {
       ...record,
       ...functionJson,
       ...dataType,
       ...(isArray(specs) ? specs : { ...specs }),
-      hasStructForm: (record?.functionJson?.dataType as DataType)?.type === DataTypeEnum.STRUCT,
+      hasStructForm: (dataType as DataType)?.type === DataTypeEnum.STRUCT,
+      enumList:
+        (dataType as DataType)?.type === DataTypeEnum.ENUM
+          ? unref((dataType as DataType).specsList)
+          : [],
     };
-
     setFieldsValue(value);
   };
 
@@ -85,4 +90,13 @@
     setDisable,
   });
 </script>
+
+<template>
+  <BasicForm @register="register" :disabled="disabled">
+    <template #EnumList="{ field, model }">
+      <EnumList ref="enumListRef" :value="model[field]" :disabled="disabled" />
+    </template>
+  </BasicForm>
+</template>
+
 <style lang="less" scoped></style>

@@ -28,6 +28,7 @@ export enum FormField {
   REGISTER_ADDRESS = 'registerAddress',
   EXTENSION_DESC = 'extensionDesc',
   STRUCT = 'struct',
+  ENUM_LIST = 'enumList',
 
   HAS_STRUCT_FROM = 'hasStructForm',
 }

@@ -185,8 +185,8 @@ export const list = [
   {
     deviceType: '网关/直连/网关子设备',
     function: '事件上报',
-    release: 'v1/devices/event/${deviceId}||${deviceName}/${identifier}',
-    subscribe: 'v1/devices/event/${deviceId}||${deviceName}/${identifier}',
+    release: 'v1/devices/event/${deviceId}或${deviceName}/${identifier}',
+    subscribe: 'v1/devices/event/${deviceId}或${deviceName}/${identifier}',
     platform: '订阅',
     device: '发布',
   },

@@ -132,10 +132,7 @@
             };
           }
           Reflect.set(values, 'config', config);
-          if (
-            Reflect.get(values, 'messageType') === MessageEnum.IS_VOICE &&
-            Reflect.get(values, 'voiceSignName')
-          ) {
+          if (Reflect.get(values, 'messageType') === MessageEnum.IS_VOICE) {
             Reflect.set(values, 'signName', values['voiceSignName']);
           }
           let saveMessage = '添加成功';

@@ -102,36 +102,36 @@ export const getFormSchemas = (hasAlarmNotify: Ref<boolean>): FormSchema[] => {
       },
     },
     {
-      field: FormFieldsEnum.ALARM_PROFILED,
+      field: FormFieldsEnum.ALARM_LEVEL,
       label: '',
-      component: 'AlarmProfileSelect',
-      rules: [{ required: true, message: `请选择${FormFieldsEnum.ALARM_PROFILED}` }],
+      component: 'Select',
       ifShow: ({ model }) => model[FormFieldsEnum.OUT_TARGET] === ExecutionActionEnum.MSG_NOTIFY,
+      rules: [{ required: true, message: `请选择${FormFieldsNameEnum.ALARM_LEVEL}` }],
       componentProps: () => {
         return {
-          api: async () => {
-            if (!unref(organizationId)) return [];
-            return await getOrganizationAlarmConfig({ organizationId: unref(organizationId) });
-          },
-          labelField: 'name',
-          valueField: 'id',
-          placeholder: `请选择${FormFieldsNameEnum.ALARM_PROFILED}`,
+          options: Object.keys(AlarmLevelEnum).map((value) => ({
+            label: AlarmLevelNameEnum[value],
+            value,
+          })),
+          placeholder: `请选择${FormFieldsNameEnum.ALARM_LEVEL}`,
         };
       },
     },
     {
-      field: FormFieldsEnum.ALARM_LEVEL,
+      field: FormFieldsEnum.ALARM_PROFILED,
       label: '',
-      component: 'Select',
+      component: 'AlarmProfileSelect',
+      // rules: [{ required: true, message: `请选择${FormFieldsEnum.ALARM_PROFILED}` }],
       ifShow: ({ model }) => model[FormFieldsEnum.OUT_TARGET] === ExecutionActionEnum.MSG_NOTIFY,
-      rules: [{ required: true, message: `请选择${FormFieldsEnum.ALARM_LEVEL}` }],
       componentProps: () => {
         return {
-          options: Object.keys(AlarmLevelEnum).map((value) => ({
-            label: AlarmLevelNameEnum[value],
-            value,
-          })),
-          placeholder: `请选择${FormFieldsNameEnum.ALARM_LEVEL}`,
+          api: async () => {
+            if (!unref(organizationId)) return [];
+            return await getOrganizationAlarmConfig({ organizationId: unref(organizationId) });
+          },
+          labelField: 'name',
+          valueField: 'id',
+          placeholder: `请选择${FormFieldsNameEnum.ALARM_PROFILED}(可选项)`,
         };
       },
     },

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

@@ -88,6 +88,7 @@ export const usePlatform = async () => {
   };
 
   const setTitle = () => {
+    if (!platformInfo.name) return;
     document.title = platformInfo.name || '';
   };
 

@@ -34,6 +34,7 @@
     if (!Reflect.get(value, 'accessCredentials')) {
       Reflect.deleteProperty(value, 'accessCredentials');
     }
+
     return value as any;
   };
 

-import { ComponentInfo, DataComponentRecord, DataSource } from '/@/api/dataBoard/model';
-export interface TextComponentLayout {
-  id: string;
-  base?: boolean;
-  showUpdate?: boolean;
-  showIcon?: boolean;
-  showUnit?: boolean;
-}
-
-export interface TextComponentValue {
-  name: string;
-  value: number;
-  icon?: string;
-  unit?: string;
-  updateTime?: string;
-  fontColor?: string;
-  iconColor?: string;
-  deviceName?: string;
-}
-
-type TextComponentDefault = TextComponentLayout;
-
-export const TextComponent1Config: TextComponentDefault = {
-  id: 'text-component-1',
-  base: true,
-};
-
-export const TextComponent3Config: TextComponentDefault = {
-  id: 'text-component-3',
-  base: false,
-  showUpdate: true,
-};
-export const TextComponent4Config: TextComponentDefault = {
-  id: 'text-component-4',
-  base: false,
-  showIcon: true,
-  showUpdate: true,
-  showUnit: true,
-};
-export const TextComponent5Config: TextComponentDefault = {
-  id: 'text-component-5',
-  base: false,
-  showIcon: true,
-  showUnit: true,
-};
-
-export const TextComponentDefaultConfig: Partial<ComponentInfo> = {
-  fontColor: '#000',
-  unit: '℃',
-  iconColor: '#367BFF',
-  icon: 'shuiwen',
-};
-
-export const transformTextComponentConfig = (
-  config: TextComponentDefault,
-  _record: DataComponentRecord,
-  dataSourceRecord: DataSource
-) => {
-  return {
-    layout: {
-      ...config,
-    } as TextComponentLayout,
-    value: {
-      name: dataSourceRecord.attributeRename || dataSourceRecord.attribute,
-      deviceName: dataSourceRecord.deviceRename || dataSourceRecord.deviceId,
-      value: dataSourceRecord.componentInfo.value,
-      icon: dataSourceRecord.componentInfo.icon,
-      unit: dataSourceRecord.componentInfo.unit,
-      updateTime: dataSourceRecord.componentInfo.updateTime,
-      fontColor: dataSourceRecord.componentInfo.fontColor,
-      iconColor: dataSourceRecord.componentInfo.iconColor,
-    } as TextComponentValue,
-  };
-};

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

+import { PlatformType } from './panelDetail';
 import { FormSchema } from '/@/components/Form';
 import { ColEx } from '/@/components/Form/src/types';
 import { useGridLayout } from '/@/hooks/component/useGridLayout';
@@ -13,4 +14,16 @@ export const formSchema: FormSchema[] = [
       placeholder: '请输入看板名称',
     },
   },
+  {
+    field: 'platform',
+    label: '平台',
+    component: 'Select',
+    colProps: useGridLayout(2, 3, 4) as unknown as ColEx,
+    componentProps: {
+      options: [
+        { label: 'PC端', value: PlatformType.PC },
+        { label: '移动端', value: PlatformType.PHONE },
+      ],
+    },
+  },
 ];

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

@@ -107,6 +107,9 @@ export const formSchemas = (): FormSchema[] => {
               [DataSourceField.DEVICE_ID]: null,
             });
           },
+          apiTreeSelectProps: {
+            params: { organizationId: location?.pathname?.split('/')?.pop() || '' },
+          },
           showCreate: false,
           getPopupContainer: () => document.body,
         };
@@ -157,7 +160,6 @@ export const formSchemas = (): FormSchema[] => {
             });
           },
           placeholder: '请选择设备',
-          getPopupContainer: () => document.body,
           ...createPickerSearch(),
         };
       },

@@ -58,24 +58,24 @@
 
   const alarmColumns: BasicColumn[] = [
     {
-      title: '状态',
-      dataIndex: 'severity',
+      title: '告警等级',
+      dataIndex: 'status',
       ellipsis: true,
       width: 80,
-      customRender: ({ record }) => {
-        const { severity } = record;
-        const { text, color } = alarmLevel(severity);
-        return h(Tag, { color }, () => text);
-      },
+      format: (text) => statusType(text),
     },
     { title: '设备', dataIndex: 'device', ellipsis: true, width: 120 },
     { title: '告警场景', dataIndex: 'type', ellipsis: true, width: 80 },
     {
-      title: '状态',
-      dataIndex: 'status',
+      title: '告警级别',
+      dataIndex: 'severity',
       ellipsis: true,
       width: 80,
-      format: (text) => statusType(text),
+      customRender: ({ record }) => {
+        const { severity } = record;
+        const { text, color } = alarmLevel(severity);
+        return h(Tag, { color }, () => text);
+      },
     },
     {
       title: '时间',

@@ -4,8 +4,8 @@
       destroyOnClose
       v-bind="$attrs"
       width="30rem"
-      :height="50"
-      :minHeight="50"
+      :height="75"
+      :minHeight="75"
       @register="register"
       title="操作密码"
       @ok="handleSuccess"
@@ -33,6 +33,8 @@
   const [registerForm, { getFieldsValue, validate }] = useForm({
     labelWidth: 70,
     schemas: formSchema,
+
+    wrapperCol: { span: 12 },
     showActionButtonGroup: false,
   });
 

@@ -4,7 +4,7 @@ export const formSchema: FormSchema[] = [
   {
     field: 'password',
     label: '操作密码',
-    colProps: { span: 16 },
+    colProps: { span: 18 },
     component: 'InputPassword',
     required: true,
     componentProps: {

@@ -14,7 +14,7 @@
   import { useBaiduMapSDK } from '../../../hook/useBaiduMapSDK';
   import { HistoryModalOkEmitParams, TrackAnimationStatus } from './type';
   import { useMapTrackPlayback } from './useMapTrackPlayback';
-  import { shallowRef } from 'vue';
+  // import { shallowRef } from 'vue';
   import { formatToDateTime } from '/@/utils/dateUtil';
 
   const props = defineProps<{
@@ -25,7 +25,7 @@
 
   const wrapId = `bai-map-${buildUUID()}`;
 
-  const mapInstance = shallowRef<Nullable<Recordable>>(null);
+  const mapInstance = ref<Nullable<Recordable>>(null);
 
   const rangString = ref<Nullable<string>>(null);
 
@@ -35,6 +35,9 @@
     openModal(true, toRaw(props.config.option.dataSource));
   };
 
+  const { genTrackPlaybackAnimation, playStatus, playFn, continueFn, pauseFn } =
+    useMapTrackPlayback(mapInstance);
+
   const getIsWidgetLibSelectMode = computed(() => {
     return !props.config.option.dataSource;
   });
@@ -68,8 +71,8 @@
   async function initMap() {
     const wrapEl = unref(wrapRef);
     if (!wrapEl) return;
-    const BMapGL = (window as any).BMapGL;
     if (!Reflect.has(window, 'BMapGL')) return;
+    const BMapGL = (window as any).BMapGL;
     mapInstance.value = new BMapGL.Map(wrapId);
 
     // 定位当前城市
@@ -89,13 +92,10 @@
   }
 
   const { loading } = useBaiduMapSDK(initMap);
-
-  const { genTrackPlaybackAnimation, playStatus, playFn, continueFn, pauseFn } =
-    useMapTrackPlayback(mapInstance);
 </script>
 
 <template>
-  <main class="w-full h-full flex flex-col justify-center items-center">
+  <main class="w-full h-full flex flex-col p-2 justify-center items-center">
     <div class="w-full flex justify-end">
       <Button
         type="text"
@@ -126,9 +126,8 @@
       :spinning="loading"
       wrapper-class-name="map-spin-wrapper !w-full !h-full !flex justify-center items-center pointer-events-none"
       tip="地图加载中..."
-    >
-      <div ref="wrapRef" :id="wrapId" class="w-full h-full no-drag"> </div>
-    </Spin>
+    />
+    <div ref="wrapRef" :id="wrapId" class="w-full h-full no-drag"> </div>
 
     <HistoryDataModel @register="register" @ok="handleRenderHistroyData" />
   </main>

@@ -88,6 +88,9 @@ export const formSchemas: FormSchema[] = [
       return {
         showCreate: false,
         allowClean: true,
+        apiTreeSelectProps: {
+          params: { organizationId: location?.pathname?.split('/')?.pop() || '' },
+        },
         onChange() {
           setFieldsValue({
             [FormFieldEnum.ACCESS_MODE]: null,

@@ -68,8 +68,6 @@
       };
 
       const instance = unref(basicVideoPlayEl)?.customInit((options) => {
-        withToken.value = true;
-
         if (unref(withToken)) {
           (options as any).flvjs.config.headers = {
             'X-Authorization': `Bearer ${isShareMode() ? getShareJwtToken() : getJwtToken()}`,

@@ -5,6 +5,7 @@
   import { ComponentPropsConfigType } from '../../../index.type';
   import { useDataFetch } from '../../../hook/socket/useSocket';
   import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
+  import { isNullOrUnDef } from '/@/utils/is';
 
   const props = defineProps<{
     config: ComponentPropsConfigType;
@@ -42,6 +43,7 @@
     const { data = {} } = message;
     const [latest] = data[attribute] || [];
     const [timespan, value] = latest;
+    if (isNullOrUnDef(value)) return;
     time.value = timespan;
     url.value = `${value}?timespan=${timespan}`;
   };

@@ -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: '' },
+];

@@ -9,6 +9,7 @@
 
   const ROUTE = useRoute();
   const ROUTER = useRouter();
+
   const getIsSharePage = computed(() => {
     return ROUTE.matched.find((item) => item.path === '/share/:viewType/:id/:publicId');
   });
@@ -21,8 +22,6 @@
     if (unref(getIsSharePage)) return;
     ROUTER.go(-1);
   };
-
-  // const handleOpenCreatePanel = () => {};
 </script>
 
 <template>

@@ -19,6 +19,7 @@
   import { computed } from 'vue';
   import { useGetComponentConfig } from '../../../packages/hook/useGetComponetConfig';
   import { isBoolean } from '/@/utils/is';
+  import { useApp } from '../../hooks/useApp';
 
   const props = defineProps<{
     sourceInfo: WidgetDataType;
@@ -38,6 +39,8 @@
 
   const { createMessage } = useMessage();
 
+  const { getIsAppPage } = useApp();
+
   const { boardId } = useBoardId();
 
   const dropMenuList = ref<AuthDropMenuList[]>([
@@ -171,7 +174,7 @@
           <AreaChartOutlined v-else class="text-lg" @click="handleOpenTrendModal" />
         </Tooltip>
         <AuthDropDown
-          v-if="!isCustomerUser && dropMenuList.length"
+          v-if="!isCustomerUser && dropMenuList.length && !getIsAppPage"
           :drop-menu-list="dropMenuList"
           :trigger="['click']"
         >

@@ -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: 24,
+  DEFAULT_WIDGET_HEIGHT: 5,
+  DEFAULT_MIN_HEIGHT: 5,
+  DEFAULT_MIN_WIDTH: 24,
+};
 
 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,25 @@
     },
     { 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,
+  });
 </script>
 
 <template>
@@ -164,7 +195,7 @@
     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">
       <Authority :value="VisualComponentPermission.CREATE">
         <Button
           v-if="!getIsSharePage && !isCustomerUser"
@@ -177,55 +208,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': getIsAppPage ? '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 +318,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 {