Merge branch 'main_dev' of http://git.yunteng.com/yunteng/thingskit-front into fix/DEFECT-1362

@@ -18,4 +18,5 @@ export interface Platform {
   copyright: string;
   presentedOurselves: string;
   domain: string;
+  icon: string;
 }

@@ -49,13 +49,6 @@
     return userStore.platInfo?.logo;
   });
   const getTitle = computed(() => {
-    // 设置icon
-    let link = (document.querySelector("link[rel*='icon']") ||
-      document.createElement('link')) as HTMLLinkElement;
-    link.type = 'image/x-icon';
-    link.rel = 'shortcut icon';
-    link.href = userStore.platInfo?.icon ?? '/favicon.ico';
-    document.getElementsByTagName('head')[0].appendChild(link);
     return userStore.platInfo?.name ?? title;
   });
 </script>
@@ -67,6 +60,7 @@
     padding-left: 7px;
     cursor: pointer;
     transition: all 0.2s ease;
+
     &.light {
       border-bottom: 1px solid @border-color-base;
     }

@@ -113,7 +113,7 @@
       componentProps: {
         options: [
           { label: `${boolClose}-0`, value: 0 },
-          { label: `${boolOpen}-0`, value: 1 },
+          { label: `${boolOpen}-1`, value: 1 },
         ],
         onChange: (value: string) => {
           syncValue(identifier, value);

@@ -397,22 +397,6 @@
           );
         });
       }
-      /**
-       * 只针对表格分页和组织列表分页的Tree（不是通过弹窗显示，默认是关闭的并且图标显示）
-       * 如果是其他弹窗出来的Tree（会造成默认是关闭的并且图标显示），则在对应页面重写css样式即可
-       * <style scoped lang="less">
-        :deep(.vben-basic-tree) {
-          width: 100% !important;
-        }
-        :deep(.is-unflod) {
-          display: none !important;
-        }
-        :deep(.is-flod) {
-          display: none !important;
-        }
-        </style>
-        TODO下次优化通过传配置值来动态显示那些页面需要默认展开或收起
-       */
       return () => {
         const { title, helpMessage, toolbar, search, checkable } = props;
         const showTitle = title || toolbar || search || slots.headerTitle;
@@ -454,51 +438,6 @@
   });
 </script>
 <style lang="less">
-  // 使用媒体查询兼容 1920 1280 1024 800
-  @media screen and (max-width: 1980px) {
-    .fold-left {
-      z-index: 1;
-      cursor: pointer;
-      position: absolute;
-      top: 0.85rem;
-      left: 1.1vw;
-    }
-
-    .fold-right {
-      z-index: 1;
-      cursor: pointer;
-      position: absolute;
-      top: 0.85rem;
-      left: 18.2vw;
-    }
-  }
-  @media screen and (max-width: 1280px) {
-    .fold-right {
-      z-index: 1;
-      cursor: pointer;
-      position: absolute;
-      top: 0.85rem;
-      left: 17.5vw;
-    }
-  }
-  @media screen and (max-width: 1024px) {
-    .fold-right {
-      z-index: 1;
-      cursor: pointer;
-      position: absolute;
-      top: 0.85rem;
-      left: 14.2vw;
-    }
-  }
-  @media screen and (max-width: 800px) {
-    .fold-right {
-      z-index: 1;
-      cursor: pointer;
-      position: absolute;
-      top: 0.85rem;
-      left: 18vw;
-    }
-  }
   @prefix-cls: ~'@{namespace}-basic-tree';
 
   .@{prefix-cls} {

@@ -35,6 +35,8 @@ export const APP_SESSION_CACHE_KEY = 'COMMON__SESSION__KEY__';
 
 export const PLATFORM = 'PLATFORM';
 
+export const PLATFORM_INFO_CACHE_KEY = 'PLATFORM_INFO';
+
 export const MENU_LIST = 'MENU_LIST';
 export enum CacheTypeEnum {
   SESSION,

@@ -71,7 +71,6 @@
 
   import { useUserStore } from '/@/store/modules/user';
   import { LoginStateEnum, useLoginState, useFormRules, useFormValid } from './useLogin';
-  import { useDesign } from '/@/hooks/web/useDesign';
   import { getPlatForm } from '/@/api/oem';
   import { createLocalStorage } from '/@/utils/cache';
 
@@ -80,8 +79,7 @@
   const FormItem = Form.Item;
   const InputPassword = Input.Password;
   const { t } = useI18n();
-  const { notification, createMessage } = useMessage();
-  const { prefixCls } = useDesign('login');
+  const { notification } = useMessage();
   const userStore = useUserStore();
 
   const { setLoginState, getLoginState } = useLoginState();
@@ -115,7 +113,7 @@
         username: data.account,
         mode: 'modal', //不要默认的错误提示
       })
-      .catch((data) => {
+      .catch(() => {
         //登录失败返回的html,所以提示框什么都没有
         //去掉提示框
         // createMessage.error(data.message);
@@ -129,13 +127,6 @@
       const res = await getPlatForm();
       storage.set('platformInfo', res);
       userStore.setPlatInfo(res);
-      // 设置icon
-      let link = (document.querySelector("link[rel*='icon']") ||
-        document.createElement('link')) as HTMLLinkElement;
-      link.type = 'image/x-icon';
-      link.rel = 'shortcut icon';
-      link.href = res.icon ?? '/favicon.ico';
-      document.getElementsByTagName('head')[0].appendChild(link);
 
       var _hmt = _hmt || [];
       (function () {

 <template>
-  <div
-    style="background-size: 100% 100%"
-    :style="{ backgroundImage: 'url(' + (logoUrl !== undefined ? logoUrl : '') + ')' }"
-    :class="prefixCls"
-    class="relative w-full h-full px-4"
-  >
+  <div :class="prefixCls" class="relative w-full h-full px-4">
     <AppLocalePicker
       class="absolute text-white top-4 right-4 enter-x xl:text-gray-600"
       :showText="false"
@@ -36,12 +31,8 @@
               {{ defaultTitle }}
             </div>
           </div>
-          <div v-if="ifCustom" class="my-auto">
-            <img
-              :alt="title"
-              src="../../../assets/svg/thingskit-login-background.svg"
-              class="w-1/2 -mt-16 -enter-x"
-            />
+          <div v-if="show" class="my-auto">
+            <img :alt="title" :src="defaultBackgroundImage" class="w-1/2 -mt-16 -enter-x" />
             <div class="mt-10 font-medium text-white -enter-x">
               <span class="inline-block mt-4 text-3xl"> {{ t('sys.login.signInTitle') }}</span>
             </div>
@@ -67,7 +58,6 @@
 </template>
 <script lang="ts" setup>
   import { ref, onMounted } from 'vue';
-  // import { AppLogo } from '/@/components/Application';
   import { AppLocalePicker, AppDarkModeToggle } from '/@/components/Application';
   import LoginForm from './LoginForm.vue';
   import ForgetPasswordForm from './ForgetPasswordForm.vue';
@@ -77,13 +67,9 @@
   import { useI18n } from '/@/hooks/web/useI18n';
   import { useDesign } from '/@/hooks/web/useDesign';
   import { useLocaleStore } from '/@/store/modules/locale';
-  // import { useUserStore } from '/@/store/modules/user';
-  import { getPlatForm } from '/@/api/oem/index';
-  import defaultShowLogoImg from '/@/assets/svg/login-bg.svg';
-  import defaultShowLogoDarkImg from '/@/assets/svg/login-bg-dark.svg';
   import { useTitle } from '@vueuse/core';
-  import { createLocalStorage } from '/@/utils/cache';
-  // import {usePlatform} from '/@/views/system/customize/hook/usePlatformInfo'
+  import defaultBackgroundImage from '/@/assets/svg/thingskit-login-background.svg';
+  import { getPlatFormInfo } from '../../system/customize/hook/usePlatformInfo';
 
   defineProps({
     sessionTimeout: {
@@ -93,88 +79,22 @@
   const { title } = useGlobSetting();
   const defaultTitle = ref('');
   const defaultLogo = ref('');
-  const logoUrl = ref('');
-  // const userStore = useUserStore();
-  const storage = createLocalStorage();
-
-  onMounted(async () => {
-    let res = storage.get('platformInfo');
-    if (res === '' || res === null) {
-      res = await getPlatForm();
-    }
-    logoUrl.value = res?.background;
-    defaultTitle.value = res?.name || title;
-    defaultLogo.value = res?.logo;
-    let link = (document.querySelector("link[rel*='icon']") ||
-      document.createElement('link')) as HTMLLinkElement;
-    link.type = 'image/x-icon';
-    link.rel = 'shortcut icon';
-    link.href = res?.icon ?? '/favicon.ico';
-    document.getElementsByTagName('head')[0].appendChild(link);
-    let defaultLogoBg = document.createElement('style');
-    let defaultLogoDarkBg = document.createElement('style');
-    if (logoUrl.value !== undefined) {
-      //企业自定义
-      ifCustom.value = false;
-      //默认图片
-      defaultLogoBg.innerHTML = `.vben-login::before{
-      background-image:url("");
-      position:absolute;
-    }`;
-      //切换黑暗模式图片
-      defaultLogoDarkBg.innerHTML = `html[data-theme='dark'] .vben-login::before{
-      background-image:url("");
-      position:absolute;
-    }`;
-    } else {
-      logoUrl.value = 'url(' + defaultShowLogoImg + ')';
-      //默认图片
-      defaultLogoBg.innerHTML = `.vben-login::before{
-      background-image:url(${defaultShowLogoImg});
-      position:absolute;
-    }`;
-      //切换黑暗模式图片
-      defaultLogoDarkBg.innerHTML = `html[data-theme='dark'] .vben-login::before{
-      background-image:url(${defaultShowLogoDarkImg});
-      position:absolute;
-    }`;
-    }
-    document.head.appendChild(defaultLogoBg);
-    document.head.appendChild(defaultLogoDarkBg);
-  });
 
-  // const userStore = useUserStore();
-
-  const ifCustom = ref(true);
-  // const getLogo = computed(() => {
-  //   return userStore.platInfo?.logo;
-  // });
-  // const getTitle = computed(() => {
-  //   // 设置icon
-  //   let link = (document.querySelector("link[rel*='icon']") ||
-  //     document.createElement('link')) as HTMLLinkElement;
-  //   link.type = 'image/x-icon';
-  //   link.rel = 'shortcut icon';
-  //   link.href = userStore.platInfo?.icon ?? '/favicon.ico';
-  //   document.getElementsByTagName('head')[0].appendChild(link);
-  //   // logoUrl.value = userStore.platInfo?.background;
-  //   // if (logoUrl.value !== undefined) {
-  //   //   ifCustom.value = false;
-  //   // } else {
-  //   //   logoUrl.value = 'url(' + defaultShowLogoImg + ')';
-  //   // }
-  //   return userStore.platInfo?.name ?? title;
-  // });
-  // const globSetting = useGlobSetting();
   const { prefixCls } = useDesign('login');
   const { t } = useI18n();
   const localeStore = useLocaleStore();
   const showLocale = localeStore.getShowPicker;
-  // const title = computed(() => globSetting?.title ?? '');
 
   onMounted(() => {
     useTitle('ThingsKit 物联网平台');
   });
+
+  const show = ref(false);
+
+  onMounted(() => {
+    const platform = getPlatFormInfo();
+    show.value = !platform.background;
+  });
 </script>
 <style lang="less">
   @prefix-cls: ~'@{namespace}-login';

@@ -71,7 +71,6 @@
 
   import { useUserStore } from '/@/store/modules/user';
   import { LoginStateEnum, useLoginState, useFormRules, useFormValid } from './useLogin';
-  import { useDesign } from '/@/hooks/web/useDesign';
   import { getPlatForm } from '/@/api/oem';
   import { createLocalStorage, createSessionStorage } from '/@/utils/cache';
 
@@ -81,7 +80,6 @@
   const InputPassword = Input.Password;
   const { t } = useI18n();
   const { notification, createMessage } = useMessage();
-  const { prefixCls } = useDesign('login');
   const userStore = useUserStore();
 
   const { setLoginState, getLoginState } = useLoginState();
@@ -137,13 +135,6 @@
       const res = await getPlatForm();
       storage.set('platformInfo', res);
       userStore.setPlatInfo(res);
-      // 设置icon
-      let link = (document.querySelector("link[rel*='icon']") ||
-        document.createElement('link')) as HTMLLinkElement;
-      link.type = 'image/x-icon';
-      link.rel = 'shortcut icon';
-      link.href = res.icon ?? '/favicon.ico';
-      document.getElementsByTagName('head')[0].appendChild(link);
 
       var _hmt = _hmt || [];
       (function () {

@@ -38,7 +38,7 @@
                 >
               </template>
               <template #uploadText>
-                <div class="box-outline"> 支持.ICON格式，建议尺寸为16*16px </div>
+                <div class="box-outline"> 支持.ICO格式，建议尺寸为16*16px </div>
               </template>
             </ContentUploadText>
           </template>
@@ -149,9 +149,10 @@
         }
       }
       const beforeUploadIconPic = (file: FileItem) => {
-        const isJpgOrPng = file.type === 'image/x-icon';
+        console.log(file);
+        const isJpgOrPng = file.type === 'image/vnd.microsoft.icon';
         if (!isJpgOrPng) {
-          createMessage.error('只能上传.icon图片文件!');
+          createMessage.error('只能上传.ico图片文件!');
         }
         const isLt2M = (file.size as number) / 1024 < 500;
         if (!isLt2M) {

 import { getPlatForm } from '/@/api/oem';
-import { createLocalStorage } from '/@/utils/cache';
+import lightThemeBgImage from '/@/assets/svg/login-bg.svg';
+import darkThemeBgImage from '/@/assets/svg/login-bg-dark.svg';
+import { createStorage } from '/@/utils/cache';
+import { Platform } from '/@/api/oem/model';
+import { PLATFORM_INFO_CACHE_KEY } from '/@/enums/cacheEnum';
 
 enum DefaultPlatform {
   LOGO = '/resource/img/logo.png',
@@ -7,19 +11,15 @@ enum DefaultPlatform {
   ICO = '/favicon.ico',
 }
 
+const storage = createStorage();
+
+export const getPlatFormInfo = () => storage.get(PLATFORM_INFO_CACHE_KEY) as Platform;
+export const setPlatFormInfo = (info: Recordable) => storage.set(PLATFORM_INFO_CACHE_KEY, info);
+
 export const usePlatform = async () => {
-  const platformInfo = await getPlatForm();
-  const storage = createLocalStorage();
-  if (
-    platformInfo === '' ||
-    platformInfo === null ||
-    Object.getOwnPropertyNames(platformInfo).length === 0
-  ) {
-    storage.set('platformInfo', 1234);
-  } else {
-    storage.set('platformInfo', platformInfo);
-  }
+  const platformInfo = (await getPlatForm()) || {};
 
+  setPlatFormInfo(platformInfo);
   const createLoadingEffect = () => {
     const wrap = document.createElement('div');
     wrap.setAttribute('class', 'app-loading-wrap');
@@ -50,7 +50,7 @@ export const usePlatform = async () => {
   const replaceSiteIco = () => {
     const linkEl = document.querySelectorAll('link[rel*="icon"]');
     linkEl.forEach((item) => {
-      item.setAttribute('href', platformInfo.logo || DefaultPlatform.ICO);
+      item.setAttribute('href', platformInfo.icon || DefaultPlatform.ICO);
     });
   };
 
@@ -60,9 +60,31 @@ export const usePlatform = async () => {
     loadingWrapper?.appendChild(createLoadingEffect());
   };
 
+  const setBackgroundImage = () => {
+    const { background } = platformInfo;
+    const styleEl = document.createElement('style');
+
+    styleEl.innerHTML = `
+      .vben-login::before{
+        background-image:url("${background || lightThemeBgImage}");
+        position:absolute;
+        margin-left: ${background ? 0 : '-48%'} !important;
+      }
+      html[data-theme='dark'] .vben-login::before{
+        background-image:url("${background || darkThemeBgImage}");
+        position:absolute;
+        margin-left: ${background ? 0 : '-48%'} !important;
+      }
+    `;
+
+    console.log(styleEl);
+    document.head.appendChild(styleEl);
+  };
+
   const bootstrap = () => {
     replaceSiteIco();
     replaceLoadingEffect();
+    setBackgroundImage();
   };
 
   bootstrap();

@@ -16,6 +16,7 @@
             toolbar
             ref="treeRef"
             :treeData="treeData"
+            @check="handleCheckClick"
             :replace-fields="{ title: 'name', key: 'id' }"
             :checkedKeys="roleMenus"
             title="菜单分配"
@@ -58,6 +59,7 @@
       const treeRef = ref<Nullable<TreeActionType>>();
       const checked = ref<string[]>([]); //需要选中的节点
       const spinning = ref(false);
+      const checkedKeysWithHalfChecked = ref<string[]>([]);
 
       const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
         labelWidth: 100,
@@ -126,7 +128,9 @@
               roleId.value = data.record.id;
 
               //通过角色id去获取角色对应的菜单的ids
-              roleMenus.value = await getMenusIdsByRoleId(data.record.id);
+              checkedKeysWithHalfChecked.value = roleMenus.value = await getMenusIdsByRoleId(
+                data.record.id
+              );
               excludeHalfCheckedKeys(unref(treeData));
               await nextTick();
               unref(treeRef)?.setCheckedKeys(roleMenus.value);
@@ -147,14 +151,13 @@
         setDrawerProps({ confirmLoading: true });
         const { createMessage } = useMessage();
         try {
-          const menu = (unref(treeRef)?.getCheckedKeys() as string[]) || [];
           const values = await validate();
           const req = {
             id: roleId.value,
             name: values.name,
             remark: values.remark,
             status: values.status,
-            menu,
+            menu: unref(checkedKeysWithHalfChecked),
           };
           if (req.menu == undefined) return createMessage.error('请勾选权限菜单');
           saveOrUpdateRoleInfoWithMenu(req).then(() => {
@@ -239,6 +242,13 @@
         return needExcludeKeys;
       };
 
+      const handleCheckClick = (selectedKeys: string[], event: CheckEvent) => {
+        checkedKeysWithHalfChecked.value = [
+          ...selectedKeys,
+          ...(event.halfCheckedKeys as string[]),
+        ];
+      };
+
       return {
         spinning,
         registerDrawer,
@@ -248,6 +258,7 @@
         treeData,
         roleMenus,
         treeRef,
+        handleCheckClick,
       };
     },
   });

@@ -15,6 +15,7 @@
             :treeData="treeData"
             :replaceFields="{ title: 'name', key: 'id' }"
             :checkedKeys="roleMenus"
+            @check="handleCheckClick"
             checkable
             toolbar
             ref="treeRef"
@@ -30,7 +31,7 @@
   import { BasicForm, useForm } from '/@/components/Form/index';
   import { formSchema } from './role.data';
   import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
-  import { BasicTree, TreeActionType, TreeItem } from '/@/components/Tree';
+  import { BasicTree, CheckEvent, TreeActionType, TreeItem } from '/@/components/Tree';
   const { t } = useI18n(); //加载国际化
   // 加载菜单数据
   import { getAdminMenuList, getMenuList, getMenusIdsByRoleId } from '/@/api/sys/menu';
@@ -58,6 +59,7 @@
       const treeRef = ref<Nullable<TreeActionType>>(null);
       const checked = ref<string[]>([]); //需要选中的节点
       const spinning = ref(false);
+      const checkedKeysWithHalfChecked = ref<string[]>([]);
 
       const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
         labelWidth: 90,
@@ -85,7 +87,6 @@
         const roleType = RoleEnum.TENANT_ADMIN;
         try {
           spinning.value = true;
-          // 需要在setFieldsValue之前先填充treeData，否则Tree组件可能会报key not exist警告
 
           if (!unref(treeData).length) {
             // 获取全部的菜单
@@ -108,7 +109,10 @@
             roleId.value = data.record.id;
 
             //通过角色id去获取角色对应的菜单的ids
-            roleMenus.value = await getMenusIdsByRoleId(data.record.id);
+            checkedKeysWithHalfChecked.value = roleMenus.value = await getMenusIdsByRoleId(
+              data.record.id
+            );
+
             excludeHalfCheckedKeys(unref(treeData));
 
             await nextTick();
@@ -125,10 +129,8 @@
       const getTitle = computed(() => (!unref(isUpdate) ? '新增角色' : '编辑角色'));
 
       async function handleSubmit() {
-        setDrawerProps({ loading: true });
-        setDrawerProps({ confirmLoading: true });
+        setDrawerProps({ loading: true, confirmLoading: true });
         const { createMessage } = useMessage();
-        const menu = (unref(treeRef)?.getCheckedKeys() as string[]) || [];
         try {
           const values = await validate();
           const req = {
@@ -137,7 +139,7 @@
             remark: values.remark,
             status: values.status,
             roleType: RoleEnum.TENANT_ADMIN,
-            menu,
+            menu: unref(checkedKeysWithHalfChecked),
           };
           if (req.menu == undefined) return createMessage.error('请勾选权限菜单');
           const res = await saveOrUpdateRoleInfoWithMenu(req);
@@ -226,6 +228,13 @@
         return needExcludeKeys;
       };
 
+      const handleCheckClick = (selectedKeys: string[], event: CheckEvent) => {
+        checkedKeysWithHalfChecked.value = [
+          ...selectedKeys,
+          ...(event.halfCheckedKeys as string[]),
+        ];
+      };
+
       return {
         spinning,
         registerDrawer,
@@ -235,6 +244,7 @@
         treeData,
         roleMenus,
         treeRef,
+        handleCheckClick,
       };
     },
   });

@@ -75,7 +75,7 @@
 
   createSelectWidgetModeContext(currentMode);
 
-  const currentRecord = ref<WidgetDataType>();
+  const currentRecord = ref<Nullable<Recordable>>({});
 
   const [registerModal, { closeModal }] = useModalInner(
     (params: ModalParamsType<WidgetDataType>) => {
@@ -105,6 +105,7 @@
     if (activeKey === TabKeyEnum.VISUAL) {
       dataSource.value = (dataSourceFormEl.value?.getFormValues() as DataSourceType[]) || [];
     }
+    currentRecord.value = basicInfoFromEl.value?.getFormValues() || {};
   };
 
   const handleNewRecord = () => {

@@ -22,6 +22,10 @@
 
   const wrapId = `bai-map-${buildUUID()}`;
 
+  const getDeviceId = computed(() => {
+    return props.config.option.dataSource?.at(0)?.deviceId;
+  });
+
   /**
    * @description 经度key
    */
@@ -40,14 +44,18 @@
     return !!(value && !isNaN(value as unknown as number));
   };
 
-  const updateFn: MultipleDataFetchUpdateFn = (message) => {
+  const updateFn: MultipleDataFetchUpdateFn = (message, deviceId) => {
+    if (unref(getDeviceId) !== deviceId) return;
+
     const { data = {} } = message;
 
-    const lngData = data[unref(getLngKey)] || [];
+    const bindMessage = data[deviceId];
+
+    const lngData = bindMessage[unref(getLngKey)] || [];
     const [lngLatest] = lngData;
     const [, lng] = lngLatest;
 
-    const latData = data[unref(getLatKey)] || [];
+    const latData = bindMessage[unref(getLatKey)] || [];
     const [latLatest] = latData;
     const [, lat] = latLatest;
 

@@ -9,40 +9,48 @@
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
   import { unref } from 'vue';
   import { onMounted } from 'vue';
+  import { useReceiveMessage } from '../../../hook/useReceiveMessage';
+  import { buildUUID } from '/@/utils/uuid';
+  import { useReceiveValue } from '../../../hook/useReceiveValue';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
   }>();
 
-  const percentList = ref<any[]>([
+  interface PercentType {
+    value: number;
+    fontColor: string;
+    backgroundColor: string;
+    unit: string;
+    id: string;
+    attribute?: string;
+    attributeRename?: string;
+    deviceId?: string;
+  }
+
+  const defaultValue: PercentType[] = [
     {
       value: 20,
       fontColor: '#19eff',
       backgroundColor: '#19eff',
-      color: '#000',
-      fontSize: '16px',
       unit: '℃',
-      id: 1,
+      id: buildUUID(),
     },
     {
       value: 66,
       fontColor: '#1E8667',
       backgroundColor: '#1E8667',
-      color: '#000',
-      fontSize: '16px',
       unit: '℃',
-      id: 2,
+      id: buildUUID(),
     },
     {
       value: 49,
       fontColor: '#2196F3',
       backgroundColor: '#2196F3',
-      color: '#000',
-      fontSize: '16px',
       unit: '℃',
-      id: 3,
+      id: buildUUID(),
     },
-  ]);
+  ];
 
   const getDesign = computed(() => {
     const { persetOption = {}, option } = props.config;
@@ -52,65 +60,52 @@
       fontColor: presetFontColor,
       backgroundColor: persetBackgroundColor,
     } = persetOption || {};
+
     return {
-      dataSource: dataSource?.map((item) => {
-        const { unit, fontColor, fontSize, backgroundColor } = item.componentInfo || {};
-        const { attribute, attributeRename } = item;
+      dataSource: dataSource.map((item) => {
+        const { unit, fontColor, backgroundColor } = item.componentInfo || {};
+        const { attribute, attributeRename, deviceId } = item;
         return {
           unit: unit ?? presetUnit,
           fontColor: fontColor ?? presetFontColor,
-          fontSize,
           backgroundColor: backgroundColor ?? persetBackgroundColor,
           attribute,
           attributeRename,
-        };
+          id: deviceId,
+        } as PercentType;
       }),
     };
   });
+  const percentList = ref(
+    props.config.option.dataSource ? unref(getDesign).dataSource : defaultValue
+  );
+  const { forEachGroupMessage } = useReceiveMessage();
 
-  const newPercentList = ref<any[]>([]);
-
-  const updateFn: MultipleDataFetchUpdateFn = (message) => {
-    const { data = {} } = message;
-    const { dataSource } = unref(getDesign);
-    newPercentList.value = dataSource.map((item) => {
-      const { attribute, fontSize, attributeRename, fontColor, unit, backgroundColor } = item;
-
-      const [latest] = data[attribute] || [];
-      const [_timespan, value] = latest || [];
-      return {
-        value: Number(value),
-        name: attributeRename ?? attribute,
-        fontSize,
-        unit,
-        backgroundColor: backgroundColor,
-        fontColor: fontColor,
-      };
+  const { getNumberValue } = useReceiveValue();
+  const updateFn: MultipleDataFetchUpdateFn = (message, deviceId, attribute) => {
+    forEachGroupMessage(message, deviceId, attribute, (attribute, value) => {
+      percentList.value.forEach((item) => {
+        if (item.id === deviceId && item.attribute === attribute) {
+          item.value = getNumberValue(value);
+        }
+      });
     });
-    // console.log(numberList, 'numberList');
   };
 
-  onMounted(() => {
-    newPercentList.value = percentList.value;
-    !props.config.option.uuid;
-  });
+  onMounted(() => {});
 
   useMultipleDataFetch(props, updateFn);
-
-  // const { getScale } = useComponentScale(props);
 </script>
 
 <template>
   <main class="w-full h-full flex flex-col justify-center">
     <DeviceName :config="config" />
 
-    <div
-      v-for="item in newPercentList"
-      :key="item.id"
-      class="flex flex-col ml-3 mr-3 items-stretch"
-    >
+    <div v-for="item in percentList" :key="item.id" class="flex flex-col ml-3 mr-3 items-stretch">
       <div class="flex justify-between">
-        <div class="text-gray-500 text-lg truncate">{{ item.name || '温度' }}</div>
+        <div class="text-gray-500 text-lg truncate">
+          {{ item.attributeRename || item.attribute || '温度' }}
+        </div>
         <span class="text-lg" :style="{ color: item.fontColor }"
           >{{ item.value }} {{ item.unit }}</span
         >

@@ -302,7 +302,9 @@ export const commonDataSourceSchemas = (): FormSchema[] => {
           placeholder: '请选择服务',
           getPopupContainer: () => document.body,
           onChange(value: string, options: ModelOfMatterParams) {
-            const command = value ? (options.functionJson.inputData || [])[0].serviceCommand : null;
+            const command = value
+              ? (options.functionJson.inputData || [])[0]?.serviceCommand
+              : null;
             setFieldsValue({ [DataSourceField.COMMAND]: command });
           },
         };

+import { ReceiveGroupMessageType } from '../index.type';
+
+export const useReceiveMessage = () => {
+  const forEachGroupMessage = (
+    message: ReceiveGroupMessageType,
+    deviceId: string,
+    attributes: string[],
+    Fn: (attribute: string, value: any, timespan: number) => void
+  ) => {
+    const { data = {} } = message;
+    const bindMessage = data[deviceId];
+
+    for (const attribute of attributes) {
+      const [latest] = bindMessage[attribute] || [];
+      const [timespan, value] = latest || [];
+      Fn?.(attribute, value, timespan);
+    }
+  };
+
+  return { forEachGroupMessage };
+};

+export const useReceiveValue = () => {
+  const getNumberValue = (value: any, defaultValue = 0) => {
+    const newValue = isNaN(value) ? defaultValue : Number(value);
+    return newValue;
+  };
+
+  return { getNumberValue };
+};

@@ -31,11 +31,13 @@ export function useSendCommand() {
         params = customCommand.command!;
       }
 
+      console.log(params);
+
       // 控制按钮下发命令为0 或 1
       await sendCommandOneway({
         deviceId,
         value: {
-          params: params,
+          params: params || null,
           persistent: true,
           additionalInfo: {
             cmdType: 'API',

@@ -10,6 +10,7 @@ import {
   DataFetchUpdateFn,
   EntityTypeEnum,
   MultipleDataFetchUpdateFn,
+  ReceiveGroupMessageType,
   ReceiveMessageType,
   ScopeTypeEnum,
   SubscribeMessageItemType,
@@ -115,6 +116,20 @@ class Subscriber {
     } as ReceiveMessageType;
   }
 
+  getGroupScopeMessage(message: ReceiveMessageType, attribute: string[], deviceId: string) {
+    const result = this.getScopeMessage(message, attribute);
+
+    return {
+      ...result,
+      data: {
+        [deviceId]: result.data,
+      },
+      latestValues: {
+        [deviceId]: result.latestValues,
+      },
+    } as ReceiveGroupMessageType;
+  }
+
   trackUpdate(uuid: string, fn: Fn) {
     if (!uuid || !fn) return;
     this.componentUpdateFnMap.set(uuid, fn);
@@ -144,7 +159,7 @@ class Subscriber {
         const { attributes, fn } = item;
         try {
           if (!fn) return;
-          fn?.(this.getScopeMessage(message, attributes), attributes);
+          fn?.(this.getGroupScopeMessage(message, attributes, deviceId), deviceId, attributes);
         } catch (error) {
           console.error(`deviceId: ${deviceId}`);
           throw error;
@@ -253,23 +268,47 @@ export const useMultipleDataFetch = (
   props: { config: ComponentPropsConfigType },
   updateFn: MultipleDataFetchUpdateFn
 ) => {
-  const getBindAttributes = computed(() => {
-    const attributes = props.config.option.dataSource?.map((item) => item.attribute);
-    return [...new Set(attributes)];
-  });
+  const getDataSourceGroup = computed(() => {
+    const { config } = props;
+    const { option } = config;
+    const { dataSource } = option || {};
 
-  if (!unref(getBindAttributes).length) return;
+    const group: Record<string, DataSource[]> = {};
 
-  const getDeviceId = computed(() => {
-    return props.config.option.dataSource?.at(0)?.deviceId;
+    dataSource?.forEach((item) => {
+      const { deviceId } = item;
+      if (group[deviceId]) {
+        group[deviceId].push(item);
+      } else {
+        group[deviceId] = [item];
+      }
+    });
+
+    return group;
   });
 
+  if (!Object.keys(unref(getDataSourceGroup)).length) return;
+  // const getBindAttributes = computed(() => {
+  //   const attributes = props.config.option.dataSource?.map((item) => item.attribute);
+  //   return [...new Set(attributes)];
+  // });
+
+  // if (!unref(getBindAttributes).length) return;
+
+  // const getDeviceId = computed(() => {
+  //   return props.config.option.dataSource?.at(0)?.deviceId;
+  // });
+
   watch(
-    () => getDeviceId,
+    () => getDataSourceGroup,
     () => {
-      subscriber.trackUpdateGroup(unref(getDeviceId)!, {
-        attributes: unref(getBindAttributes),
-        fn: updateFn,
+      Object.keys(unref(getDataSourceGroup)).forEach((key) => {
+        const item = unref(getDataSourceGroup)[key];
+        const attributes = [...new Set(item.map((item) => item.attribute))];
+        subscriber.trackUpdateGroup(key, {
+          attributes,
+          fn: updateFn,
+        });
       });
     },
     {
@@ -277,5 +316,5 @@ export const useMultipleDataFetch = (
     }
   );
 
-  return { getDeviceId, getBindAttributes };
+  return {};
 };

@@ -162,6 +162,18 @@ export interface ReceiveMessageType {
   latestValues: Record<string, number>;
 }
 
+export interface ReceiveGroupMessageType {
+  subscriptionId: number;
+  errorCode: number;
+  errorMsg: Nullable<string>;
+  data: {
+    string: Record<string, [number, string][]>;
+  };
+  latestValues: {
+    string: Record<string, number>;
+  };
+}
+
 export enum EntityTypeEnum {
   DEVICE = 'DEVICE',
 }
@@ -172,7 +184,11 @@ export enum ScopeTypeEnum {
 
 export type DataFetchUpdateFn = (message: ReceiveMessageType, attr: string) => void;
 
-export type MultipleDataFetchUpdateFn = (message: ReceiveMessageType, attr: string[]) => void;
+export type MultipleDataFetchUpdateFn = (
+  message: ReceiveGroupMessageType,
+  deviceId: string,
+  attr: string[]
+) => void;
 
 // 旧 组件key
 // TEXT_COMPONENT_1 = 'text-component-1',

@@ -27,6 +27,8 @@
   import { HistoryTrendModal } from './components/HistoryTrendModal';
   import { useSocket } from '../packages/hook/useSocket';
   import { watch } from 'vue';
+  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+  import { ThemeEnum } from '/@/enums/appEnum';
 
   const props = defineProps<{
     value?: Recordable;
@@ -72,12 +74,15 @@
 
   useSocket(dataSource);
 
+  const { getDarkMode } = useRootSetting();
   watch(
     getIsSharePage,
     (value) => {
       if (value) {
+        console.log(unref(getDarkMode));
         const root = document.querySelector('#app');
-        (root as HTMLDivElement).style.backgroundColor = '#F5F5F5';
+        (root as HTMLDivElement).style.backgroundColor =
+          unref(getDarkMode) === ThemeEnum.LIGHT ? '#F5F5F5' : '#1b1b1b';
       }
     },
     { immediate: true }