fix: DEFECT-1113 修复看板管理控制组件数据回显问题

 <script lang="ts">
   export default {
+    components: { Spin },
     inheritAttrs: false,
   };
 </script>
 <script lang="ts" setup>
+  import { Spin } from 'ant-design-vue';
   import { RadioRecord } from '../../detail/config/util';
   import { ControlComponentDefaultConfig, ControlComponentValue } from './control.config';
   import { useSendCommand } from './useSendCommand';
+  import { ref } from 'vue';
 
   interface VisualComponentProps<Layout = Recordable, Value = ControlComponentValue> {
     value?: Value;
@@ -23,33 +26,45 @@
   const emit = defineEmits(['update:value', 'change']);
 
   const { sendCommand } = useSendCommand();
-  const handleChange = (event: Event) => {
+
+  const loading = ref(false);
+  const handleChange = async (event: Event) => {
     const _value = (event.target as HTMLInputElement).checked;
+    if (props.value) {
+      loading.value = true;
+      const flag = await sendCommand(props.value, _value);
+      loading.value = false;
+      if (!flag) {
+        (event.target as HTMLInputElement).checked = !_value;
+        return;
+      }
+    }
     emit('update:value', _value);
     emit('change', _value);
-    sendCommand(props.value!, _value);
   };
 </script>
 
 <template>
   <div class="flex flex-col justify-center">
-    <label class="sliding-switch">
-      <input
-        :value="!!Number(props.value?.value)"
-        type="checkbox"
-        :checked="!!Number(props.value?.value)"
-        @change="handleChange"
-      />
-      <span class="slider"></span>
-      <span class="on">ON</span>
-      <span class="off">OFF</span>
-    </label>
-    <div
-      class="text-center mt-2 text-gray-700"
-      :style="{ color: props?.value?.fontColor || ControlComponentDefaultConfig.fontColor }"
-    >
-      {{ props.value?.attributeRename || props.value?.attribute }}</div
-    >
+    <Spin :spinning="loading">
+      <label class="sliding-switch">
+        <input
+          :value="!!Number(props.value?.value)"
+          type="checkbox"
+          :checked="!!Number(props.value?.value)"
+          @change="handleChange"
+        />
+        <span class="slider"></span>
+        <span class="on">ON</span>
+        <span class="off">OFF</span>
+      </label>
+      <div
+        class="text-center mt-2 text-gray-700"
+        :style="{ color: props?.value?.fontColor || ControlComponentDefaultConfig.fontColor }"
+      >
+        {{ props.value?.attributeRename || props.value?.attribute }}</div
+      >
+    </Spin>
   </div>
 </template>
 

@@ -31,8 +31,14 @@
   const checked = ref(!!Number(props.value.value));
 
   const { sendCommand } = useSendCommand();
-  const handleChange = (value: boolean) => {
-    sendCommand(props.value, value);
+  const loading = ref(false);
+  const handleChange = async (value: boolean) => {
+    loading.value = true;
+    const flag = await sendCommand(props.value, value);
+    loading.value = false;
+    if (!flag) {
+      checked.value = !value;
+    }
   };
 
   watchEffect(() => {
@@ -59,6 +65,6 @@
         {{ props.value.attributeRename || props.value.attribute }}
       </span>
     </div>
-    <Switch v-model:checked="checked" @change="handleChange" />
+    <Switch v-model:checked="checked" :loading="loading" @change="handleChange" />
   </div>
 </template>

 <script lang="ts">
   export default {
+    components: { Spin },
     inheritAttrs: false,
   };
 </script>
@@ -8,6 +9,8 @@
   import { DEFAULT_RADIO_RECORD, fontSize, RadioRecord } from '../../detail/config/util';
   import { ControlComponentDefaultConfig, ControlComponentValue } from './control.config';
   import { useSendCommand } from './useSendCommand';
+  import { ref } from 'vue';
+  import { Spin } from 'ant-design-vue';
 
   const props = defineProps<{
     value?: ControlComponentValue;
@@ -18,11 +21,20 @@
   const emit = defineEmits(['update:value', 'change']);
 
   const { sendCommand } = useSendCommand();
-  const handleChange = (event: Event) => {
+  const loading = ref(false);
+  const handleChange = async (event: Event) => {
     const _value = (event.target as HTMLInputElement).checked;
+    if (props.value) {
+      loading.value = true;
+      const flag = await sendCommand(props.value, _value);
+      loading.value = false;
+      if (!flag) {
+        (event.target as HTMLInputElement).checked = !_value;
+        return;
+      }
+    }
     emit('update:value', _value);
     emit('change', _value);
-    sendCommand(props.value!, _value);
   };
 
   const getRadio = computed(() => {
@@ -32,35 +44,37 @@
 
 <template>
   <div class="flex flex-col">
-    <div
-      class="toggle-switch"
-      :style="{
-        width: fontSize({ radioRecord: getRadio, basic: 75, max: 75, min: 60 }),
-        height: fontSize({ radioRecord: getRadio, basic: 97.5, max: 97.5, min: 80 }),
-      }"
-    >
-      <label class="switch">
-        <input
-          :value="!!Number(props.value?.value)"
-          type="checkbox"
-          :checked="!!Number(props.value?.value)"
-          @change="handleChange"
-        />
-        <div class="button">
-          <div class="light"></div>
-          <div class="dots"></div>
-          <div class="characters"></div>
-          <div class="shine"></div>
-          <div class="shadow"></div>
-        </div>
-      </label>
-    </div>
-    <div
-      class="text-center mt-2 text-gray-700"
-      :style="{ color: props?.value?.fontColor || ControlComponentDefaultConfig.fontColor }"
-    >
-      {{ props.value?.attributeRename || props.value?.attribute }}</div
-    >
+    <Spin :spinning="loading">
+      <div
+        class="toggle-switch"
+        :style="{
+          width: fontSize({ radioRecord: getRadio, basic: 75, max: 75, min: 60 }),
+          height: fontSize({ radioRecord: getRadio, basic: 97.5, max: 97.5, min: 80 }),
+        }"
+      >
+        <label class="switch">
+          <input
+            :value="!!Number(props.value?.value)"
+            type="checkbox"
+            :checked="!!Number(props.value?.value)"
+            @change="handleChange"
+          />
+          <div class="button">
+            <div class="light"></div>
+            <div class="dots"></div>
+            <div class="characters"></div>
+            <div class="shine"></div>
+            <div class="shadow"></div>
+          </div>
+        </label>
+      </div>
+      <div
+        class="text-center mt-2 text-gray-700"
+        :style="{ color: props?.value?.fontColor || ControlComponentDefaultConfig.fontColor }"
+      >
+        {{ props.value?.attributeRename || props.value?.attribute }}</div
+      >
+    </Spin>
   </div>
 </template>
 

@@ -5,33 +5,44 @@ import { DeviceTypeEnum } from '/@/api/device/model/deviceModel';
 import { getModelServices } from '/@/api/device/modelOfMatter';
 import { useMessage } from '/@/hooks/web/useMessage';
 import { isString } from '/@/utils/is';
+import { TransportTypeEnum } from '/@/views/device/profiles/components/TransportDescript/const';
 
 const { createMessage } = useMessage();
 export function useSendCommand() {
+  const error = () => {
+    createMessage.error('下发指令失败');
+    return false;
+  };
   const sendCommand = async (record: ControlComponentValue, value: any) => {
-    if (!record) return;
+    if (!record) return error();
     const { deviceProfileId, attribute, deviceType } = record;
     let { deviceId } = record;
-    if (!deviceId) return;
+    if (!deviceId) return error();
     try {
       const list = await getDeviceProfile();
       const deviceProfile = list.find((item) => item.id === deviceProfileId);
-      if (!deviceProfile) return;
+      if (!deviceProfile) return error();
+
       let params: string | Recordable = {
         [attribute!]: Number(value),
       };
-      if (deviceProfile.transportType === 'TCP') {
-        const serviceList = await getModelServices({ deviceProfileId: deviceProfileId! });
+
+      // 如果是TCP设备从物模型中获取下发命令(TCP网关子设备无物模型服务与事件)
+      if (deviceProfile!.transportType === TransportTypeEnum.TCP) {
+        const serviceList = (await getModelServices({ deviceProfileId: deviceProfileId! })) || [];
         const record = serviceList.find((item) => item.identifier === attribute);
         const sendCommand = record?.functionJson.inputData?.at(0)?.serviceCommand || '';
         params = isString(sendCommand) ? sendCommand : JSON.stringify(sendCommand);
       }
+
       if (deviceType === DeviceTypeEnum.SENSOR) {
         deviceId = await getDeviceRelation({
           deviceId,
           isSlave: deviceType === DeviceTypeEnum.SENSOR,
         });
       }
+
+      // 控制按钮下发命令为0 或 1
       await sendCommandOneway({
         deviceId,
         value: {
@@ -44,7 +55,11 @@ export function useSendCommand() {
         },
       });
       createMessage.success('命令下发成功');
-    } catch (error) {}
+    } catch (msg) {
+      return error();
+    } finally {
+      return true;
+    }
   };
   return {
     sendCommand,

@@ -57,6 +57,13 @@
     }
   };
 
+  const resetFormFields = async () => {
+    const hasExistEl = Object.keys(dataSourceEl).filter((key) => dataSourceEl[key]);
+    for (const id of hasExistEl) {
+      await dataSourceEl[id]?.resetFields();
+    }
+  };
+
   const validate = async () => {
     await basicMethod.validate();
     await validateDataSourceField();
@@ -258,6 +265,16 @@
     return isControlComponent(props.frontId as FrontComponent);
   });
 
+  watch(
+    () => props.frontId,
+    async (target, oldTarget) => {
+      if (isControlComponent(oldTarget!)) return;
+      if (isControlComponent(target!)) {
+        await resetFormFields();
+      }
+    }
+  );
+
   onMounted(() => handleSort());
 
   defineExpose({
@@ -293,7 +310,7 @@
 
     <section ref="formListEl">
       <div v-for="item in dataSource" :data-id="item.id" :key="item.id" class="flex bg-light-50">
-        <div class="w-24 text-right flex justify-end"> 选择设备 </div>
+        <div class="w-24 text-right flex justify-end" style="flex: 0 0 96px"> 选择设备 </div>
         <div class="pl-2 flex-auto">
           <component
             :frontId="$props.frontId"

@@ -9,6 +9,8 @@ import { getModelServices } from '/@/api/device/modelOfMatter';
 import { findDictItemByCode } from '/@/api/system/dict';
 import { DeviceTypeEnum } from '/@/api/device/model/deviceModel';
 import { DataTypeEnum } from '/@/components/Form/src/externalCompns/components/StructForm/config';
+import { TransportTypeEnum } from '/@/views/device/profiles/components/TransportDescript/const';
+import { nextTick } from 'vue';
 
 export enum BasicConfigField {
   NAME = 'name',
@@ -66,7 +68,7 @@ export const isMapComponent = (frontId: FrontComponent) => {
 };
 
 const isTcpProfile = (transportType: string) => {
-  return transportType === 'TCP';
+  return transportType === TransportTypeEnum.TCP;
 };
 
 export const basicSchema: FormSchema[] = [
@@ -117,6 +119,7 @@ export const dataSourceSchema = (isEdit: boolean, frontId?: FrontComponent): For
       component: 'ApiSelect',
       label: '设备类型',
       colProps: { span: 8 },
+      rules: [{ message: '请选择设备类型', required: true }],
       // defaultValue: DeviceTypeEnum.SENSOR,
       componentProps: ({ formActionType }) => {
         const { setFieldsValue } = formActionType;
@@ -180,7 +183,7 @@ export const dataSourceSchema = (isEdit: boolean, frontId?: FrontComponent): For
       colProps: { span: 8 },
       rules: [{ required: true, message: '组织为必填项' }],
       componentProps({ formActionType }) {
-        const { setFieldsValue } = formActionType;
+        const { setFieldsValue, getFieldsValue } = formActionType;
         return {
           placeholder: '请选择组织',
           api: async () => {
@@ -192,6 +195,9 @@ export const dataSourceSchema = (isEdit: boolean, frontId?: FrontComponent): For
             setFieldsValue({
               [DataSourceField.DEVICE_ID]: null,
             });
+            nextTick(() => {
+              console.log('org change', getFieldsValue());
+            });
           },
           getPopupContainer: () => document.body,
         };
@@ -250,11 +256,24 @@ export const dataSourceSchema = (isEdit: boolean, frontId?: FrontComponent): For
       component: 'ApiSelect',
       label: '属性',
       colProps: { span: 8 },
-      rules: [{ required: true, message: '属性为必填项' }],
+      dynamicRules: ({ model }) => {
+        const transportType = model[DataSourceField.TRANSPORT_TYPE];
+        return [
+          {
+            required: true,
+            message: `${
+              isControlComponent(frontId as FrontComponent) && isTcpProfile(transportType)
+                ? '服务'
+                : '属性'
+            }为必填项`,
+          },
+        ];
+      },
       componentProps({ formModel }) {
         const deviceProfileId = formModel[DataSourceField.DEVICE_PROFILE_ID];
         const transportType = formModel[DataSourceField.TRANSPORT_TYPE];
-        if (isEdit && ![deviceProfileId, transportType].every(Boolean)) return {};
+        if (isEdit && ![deviceProfileId, transportType].every(Boolean))
+          return { placeholder: '请选择属性', getPopupContainer: () => document.body };
         return {
           api: async () => {
             try {

@@ -47,7 +47,7 @@
   import { BAI_DU_MAP_GL_LIB, BAI_DU_MAP_TRACK_ANIMATION } from '/@/utils/fnUtils';
 
   const props = defineProps<{
-    value: Recordable;
+    value?: Recordable;
   }>();
 
   const ROUTE = useRoute();

@@ -126,7 +126,7 @@ export function useSocketConnect(dataSourceRef: Ref<DataBoardLayoutInfo[]>) {
         const { subscriptionId, data = {} } = res;
         if (isNullAndUnDef(subscriptionId)) return;
         const mappingRecord = cmdIdMapping.get(subscriptionId);
-        if (!mappingRecord) return;
+        if (!mappingRecord || !data) return;
         mappingRecord.forEach((item) => {
           const { attribute, recordIndex, dataSourceIndex } = item;
           const [[timespan, value]] = data[attribute];

@@ -249,17 +249,19 @@
                   </div>
                 </div>
                 <div class="flex justify-between mt-4 text-sm" style="color: #999">
-                  <div>
+                  <div class="flex min-w-20 mr-3">
                     <span>
                       {{ item.viewType === ViewType.PRIVATE_VIEW ? '私有看板' : '公共看板' }}
                     </span>
                     <span v-if="item.viewType === ViewType.PUBLIC_VIEW">
                       <Tooltip title="点击复制分享链接">
-                        <ShareAltOutlined class="ml-2" @click.stop="handleCopyShareUrl(item)" />
+                        <ShareAltOutlined class="ml-1" @click.stop="handleCopyShareUrl(item)" />
                       </Tooltip>
                     </span>
                   </div>
-                  <div>{{ item.createTime }}</div>
+                  <Tooltip placement="topLeft" :title="item.createTime">
+                    <div class="truncate">{{ item.createTime }}</div>
+                  </Tooltip>
                 </div>
               </section>
             </Card>