feat: 新增控制组件和文本组件等

@@ -33,6 +33,7 @@
         service: value.service,
         command: value.command,
         commandType: value.commandType,
+        callType: value.callType,
       },
     };
     return value;
@@ -42,10 +43,11 @@
     const { customCommand } = record;
     return setFieldsValue({
       ...record,
-      transportType: customCommand?.transportType,
-      service: customCommand?.service,
-      command: customCommand?.command,
-      commandType: customCommand?.commandType,
+      transportType: customCommand?.transportType || (record as Recordable).transportType,
+      service: customCommand?.service || (record as Recordable).service,
+      command: customCommand?.command || (record as Recordable).command,
+      commandType: customCommand?.commandType || (record as Recordable).commandType,
+      callType: customCommand?.callType || (record as Recordable).callType,
     } as unknown as Partial<CommonDataSourceBindValueType>);
   };
 

@@ -10,17 +10,19 @@
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
   import { MultipleDataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
   import { useMultipleDataFetch } from '../../../hook/socket/useSocket';
+  import { useReceiveMessage } from '../../../hook/useReceiveMessage';
+  import { useReceiveValue } from '../../../hook/useReceiveValue';
+  import { DataSource } from '/@/views/visual/palette/types';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
   }>();
 
-  const checked = ref(false);
-
   const svgList = ref<any>([
     {
       value: 26.2,
-      name: 'wendu',
+      deviceName: '光照设备',
+      attributeName: '光照',
       icon: 'zongfushe',
       unit: 'kw',
       iconColor: '#367BFF',
@@ -30,7 +32,8 @@
     },
     {
       value: 53.7,
-      name: 'shidu',
+      deviceName: '风机设备',
+      attributeName: '风机',
       icon: 'guangzhaoqiangdu',
       unit: '℃',
       iconColor: '#FFA000',
@@ -41,6 +44,7 @@
   ]);
 
   const getDesign = computed(() => {
+    console.log(props.config.option, 'option');
     const { persetOption = {}, option } = props.config;
     const { dataSource = [] } = option || {};
     const {
@@ -51,42 +55,65 @@
     } = persetOption || {};
     return {
       dataSource: dataSource.map((item) => {
-        const { fontColor, icon, iconColor, unit } = item.componentInfo;
-        const { attribute, attributeRename } = item;
+        const { fontColor, icon, iconColor, unit, showDeviceName } = item.componentInfo;
+        const { attribute, attributeRename, attributeName, deviceId, deviceName, deviceRename } =
+          item;
         return {
           unit: unit ?? persetUnit,
           fontColor: fontColor ?? persetFontColor,
           icon: icon ?? persetIcon,
           iconColor: iconColor ?? persetIconColor,
-          attribute: attribute || attributeRename,
-          attributeRename,
+          attribute: attribute,
+          attributeName: attributeRename ?? attributeName,
+          showDeviceName,
+          deviceName: deviceRename ?? deviceName,
+          id: deviceId,
         };
       }),
     };
   });
 
-  const { sendCommand, loading } = useSendCommand();
-  const handleChange = async (index: number) => {
-    const flag = await sendCommand(props.config.option, unref(checked));
-    if (!flag) svgList[index].checked = !svgList[index].checked;
+  const { loading, sendCommand } = useSendCommand();
+  const handleChange = async (index: number, checked: Boolean) => {
+    console.log(props.config.option);
+    const { heightPx, itemHeightRatio, itemWidthRatio, mode, widthPx, dataSource } =
+      props.config.option;
+
+    const data = {
+      ...dataSource?.[index],
+      heightPx,
+      itemHeightRatio,
+      itemWidthRatio,
+      mode,
+      widthPx,
+    } as DataSource;
+    console.log(data, 'data', checked);
+
+    const flag = await sendCommand(data, checked);
+    if (!flag) controlList.value[index].checked = !checked;
   };
 
-  const updateFn: MultipleDataFetchUpdateFn = (message) => {
-    const { data = {} } = message;
-    const { dataSource } = unref(getDesign);
-    svgList.value.length = 0;
-    svgList.value = dataSource.map((item) => {
-      const { icon, iconColor, unit, fontColor, attribute } = item || {};
-      const [latest] = data[attribute] || [];
-      const [_timespan, value] = latest || [];
-      return {
-        value: Number(value),
-        name: attribute,
-        icon,
-        unit,
-        iconColor,
-        fontColor,
-      };
+  const { forEachGroupMessage } = useReceiveMessage();
+  const { getNumberValue } = useReceiveValue();
+
+  const controlList = ref(
+    props.config.option.dataSource
+      ? unref(getDesign).dataSource.map((item) => {
+          return { ...item, checked: false };
+        })
+      : svgList
+  );
+
+  const updateFn: MultipleDataFetchUpdateFn = async (message, deviceId, attribute) => {
+    console.log(unref(getDesign).dataSource, 'dataSource');
+
+    forEachGroupMessage(message, deviceId, attribute, (attribute, value, time) => {
+      console.log(attribute, value, time);
+      controlList.value.forEach((item) => {
+        if (item.id === deviceId && item.attribute === attribute) {
+          item.checked = Boolean(getNumberValue(value));
+        }
+      });
     });
   };
 
@@ -99,7 +126,7 @@
     <DeviceName :config="config" />
     <div
       style="width: 86%"
-      v-for="(item, index) in svgList"
+      v-for="(item, index) in controlList"
       :key="item.id"
       class="flex justify-between items-center"
     >
@@ -111,10 +138,18 @@
           :style="{ color: item.iconColor }"
         />
 
-        <div class="text-gray-500 text-lg truncate ml-6">{{ item.attribute || '温度' }}</div>
+        <div
+          class="text-gray-500 truncate ml-6"
+          :style="{ fontSize: getRatio ? '18px' : getRatio * 18 + 'px' }"
+          >{{ `${item.deviceName} - ${item.attributeName}` }}</div
+        >
       </div>
 
-      <Switch v-model:checked="item.checked" :loading="loading" @change="handleChange(index)" />
+      <Switch
+        v-model:checked="item.checked"
+        :loading="loading"
+        @change="handleChange(index, item.checked)"
+      />
     </div>
   </main>
 </template>

@@ -2,12 +2,12 @@ import { ControlComponentSlidingSwitchConfig } from './ControlComponentSlidingSw
 import { ControlComponentSwitchWithIconConfig } from './ControlComponentSwitchWithIcon';
 import { ControlComponentToggleSwitchConfig } from './ControlComponentToggleSwitch';
 import { LateralNumericalControlConfig } from './LateralNumericalControl';
-// import { SwitchListConfig } from './SwitchList';
+import { SwitchListConfig } from './SwitchList';
 
 export const ControlList = [
   ControlComponentSwitchWithIconConfig,
   ControlComponentSlidingSwitchConfig,
   ControlComponentToggleSwitchConfig,
   LateralNumericalControlConfig,
-  // SwitchListConfig,
+  SwitchListConfig,
 ];

@@ -63,14 +63,16 @@
   <main :style="getScale" class="w-full h-full flex flex-col justify-center items-center">
     <DeviceName :config="config" class="text-center" />
 
-    <div
-      :style="{
-        '--open-color': getDesign.openColor,
-        '--close-color': getDesign.closeColor,
-      }"
-      :class="isOpenClose ? 'switch_open' : 'switch_close'"
-    ></div>
-    <div class="text-gray-500 text-sm truncate">{{ getDesign.attribute }}</div>
+    <div class="flex-1 flex justify-center items-center flex-col">
+      <div
+        :style="{
+          '--open-color': getDesign.openColor,
+          '--close-color': getDesign.closeColor,
+        }"
+        :class="isOpenClose ? 'switch_open' : 'switch_close'"
+      ></div>
+      <div class="text-gray-500 text-sm truncate">{{ getDesign.attribute }}</div>
+    </div>
     <UpdateTime :time="time" />
   </main>
 </template>

@@ -10,9 +10,9 @@ import { PublicConfigClass, componentInitConfig } from '/@/views/visual/packages
 import { ComponentConfigFieldEnum } from '/@/views/visual/packages/enum';
 
 export const option: PublicPresetOptions = {
-  [ComponentConfigFieldEnum.ICON]: 'shuiwen',
-  [ComponentConfigFieldEnum.ICON_COLOR]: '#367bff',
-  [ComponentConfigFieldEnum.ICON_CLOSE]: 'shuiwen',
+  [ComponentConfigFieldEnum.ICON]: 'dianyuandianya',
+  [ComponentConfigFieldEnum.ICON_COLOR]: '#ffa621',
+  [ComponentConfigFieldEnum.ICON_CLOSE]: 'dianyuandianya',
   [ComponentConfigFieldEnum.ICON_COLOR_CLOSE]: '#CCCCCC',
   [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
 };

@@ -5,5 +5,5 @@ const componentKeys = useComponentKeys('SwitchStatus');
 export const SwitchStatusConfig: ConfigType = {
   ...componentKeys,
   title: '开关量状态',
-  package: PackagesCategoryEnum.TEXT,
+  package: PackagesCategoryEnum.OTHER,
 };

@@ -2,52 +2,71 @@
   import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
   import { option } from './config';
   import { SvgIcon } from '/@/components/Icon';
-  import { computed } from 'vue';
+  import { computed, ref } from 'vue';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+  import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
   import { useDataFetch } from '../../../hook/socket/useSocket';
   import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
+  import { useReceiveValue } from '../../../hook/useReceiveValue';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
   }>();
 
+  const time = ref<Nullable<number>>(null);
+  const isOpenClose = ref<boolean>(true);
+
   const getDesign = computed(() => {
     const { persetOption = {}, option } = props.config;
-
     const {
       iconColor: persetIconColor,
       unit: perseUnit,
       icon: persetIcon,
       fontColor: persetFontColor,
+      iconClose: persetIconCLose,
+      iconColorClose: persetIconColorClose,
     } = persetOption;
 
-    const { componentInfo, attribute, attributeRename } = option;
+    const { componentInfo, attributeRename } = option;
 
-    const { icon, iconColor, fontColor, unit } = componentInfo || {};
+    const { icon, iconColor, fontColor, unit, iconClose, iconColorClose, attributeName } =
+      componentInfo || {};
     return {
       iconColor: iconColor || persetIconColor,
       unit: unit ?? perseUnit,
       icon: icon || persetIcon,
       fontColor: fontColor || persetFontColor,
-      attribute: attributeRename || attribute,
+      attribute: attributeRename || attributeName,
+      iconClose: iconClose || persetIconCLose,
+      iconColorClose: iconColorClose || persetIconColorClose,
     };
   });
 
-  const updateFn: DataFetchUpdateFn = () => {};
+  const { getNumberValue } = useReceiveValue();
+
+  const updateFn: DataFetchUpdateFn = (message, attribute) => {
+    const { data = {} } = message;
+    const [latest] = data[attribute] || [];
+    const [timespan, value] = latest;
+    time.value = timespan;
+    isOpenClose.value = Boolean(getNumberValue(value));
+  };
 
   useDataFetch(props, updateFn);
 </script>
 
 <template>
-  <main class="w-full h-full flex flex-col justify-evenly items-center">
+  <main class="w-full h-full flex flex-col justify-center items-center">
     <DeviceName :config="config" />
-    <div class="flex justify-center items-center">
+    <div class="flex flex-1 flex-col justify-center items-center">
       <SvgIcon
-        :name="getDesign.icon!"
+        :name="isOpenClose ? getDesign.icon : getDesign.iconClose"
         prefix="iconfont"
         :size="60"
-        :style="{ color: getDesign.iconColor }"
+        :style="{ color: isOpenClose ? getDesign.iconColor : getDesign.iconColorClose }"
       />
+      <div class="text-gray-500 text-sm truncate m-2">{{ getDesign.attribute || '温度' }}</div>
     </div>
+    <UpdateTime :time="time" />
   </main>
 </template>

 import { MonitorVideoConfig } from './MonitorVideo';
 import { PictureConfig } from './Picture';
 import { SwitchSignalLightConfig } from './SwitchSignalLight';
+import { SwitchStatusConfig } from './SwitchStatus';
 
-export const OtherList = [MonitorVideoConfig, PictureConfig, SwitchSignalLightConfig];
+export const OtherList = [
+  MonitorVideoConfig,
+  PictureConfig,
+  SwitchSignalLightConfig,
+  SwitchStatusConfig,
+];

@@ -37,8 +37,8 @@
       fontColor: '#377dff',
       backgroundColor: '#377dff',
       unit: '℃',
-      deviceName: '温度',
-      attribute: '1',
+      deviceName: '温湿度',
+      attribute: '温度',
       id: buildUUID(),
     },
     {
@@ -46,8 +46,8 @@
       fontColor: '#1E8667',
       backgroundColor: '#1E8667',
       unit: '℃',
-      deviceName: '温度',
-      attribute: '3',
+      deviceName: '温湿度',
+      attribute: '湿度',
       id: buildUUID(),
     },
   ];

@@ -29,7 +29,8 @@
     return {
       dataSource: dataSource.map((item) => {
         const { fontColor, icon, iconColor, unit } = item.componentInfo;
-        const { attribute, attributeRename, deviceName, deviceRename, deviceId } = item;
+        const { attribute, attributeRename, deviceName, deviceRename, deviceId, attributeName } =
+          item;
 
         return {
           unit: unit ?? persetUnit,
@@ -39,6 +40,7 @@
           attribute: attribute || attributeRename,
           attributeRename,
           deviceName,
+          attributeName,
           deviceRename,
           id: deviceId,
         };
@@ -48,15 +50,17 @@
   const defaultSvgList = ref<any>([
     {
       value: 26.2,
-      name: 'wendu',
+      deviceRename: '温湿度',
+      attributeRename: '温度',
       icon: 'zongfushe',
-      unit: 'kw',
+      unit: '℃',
       iconColor: '#367BFF',
       fontColor: '#357CFB',
     },
     {
       value: 53.7,
-      name: 'shidu',
+      deviceRename: '温湿度',
+      attributeRename: '湿度',
       icon: 'guangzhaoqiangdu',
       unit: '℃',
       iconColor: '#FFA000',
@@ -72,7 +76,6 @@
   );
 
   const updateFn: MultipleDataFetchUpdateFn = (message, deviceId, attribute) => {
-    // console.log(unref(getDesign).dataSource, 'dataSource');
     forEachGroupMessage(message, deviceId, attribute, (attribute, value, timespan) => {
       updateSvgList.value.forEach((item) => {
         if (item.id === deviceId && item.attribute === attribute) {
@@ -93,19 +96,19 @@
       style="width: 86%"
       v-for="item in updateSvgList"
       :key="item.id"
-      class="flex justify-between items-center"
+      class="flex justify-between items-center mt-2"
     >
       <div class="flex items-center">
         <SvgIcon
           :name="item.icon!"
           prefix="iconfont"
-          :size="45"
+          :size="40"
           :style="{ color: item.iconColor }"
         />
 
         <div class="text-gray-500 text-lg truncate ml-6">{{
           item.deviceRename ||
-          item.deviceName + '-' + (item.attributeRename || item.attribute) ||
+          item.deviceName + '-' + (item.attributeRename || item.attributeName) ||
           '温度'
         }}</div>
       </div>

@@ -3,6 +3,7 @@ import { TextComponent2Config } from './TextComponent2';
 import { TextComponent3Config } from './TextComponent3';
 import { TextComponent4Config } from './TextComponent4';
 import { ValueList1Config } from './ValueList1';
+import { ValueList2Config } from './ValueList2';
 
 export const TextList = [
   TextComponent1Config,
@@ -10,4 +11,5 @@ export const TextList = [
   TextComponent3Config,
   TextComponent4Config,
   ValueList1Config,
+  ValueList2Config,
 ];

@@ -54,7 +54,10 @@ const isControlComponent = (category?: string) => PackagesCategoryEnum.CONTROL =
 
 const isBooleanComponent = (componentKeys: { categoryKey?: string; componentKey?: string }) => {
   const { categoryKey, componentKey } = componentKeys;
-  return categoryKey == 'OTHER' && componentKey == 'SwitchSignalLight';
+  return (
+    categoryKey == 'OTHER' &&
+    (componentKey == 'SwitchSignalLight' || componentKey == 'SwitchStatus')
+  );
 };
 
 const getDeviceService = async (deviceProfileId: string) => {