feat: implement data board component data source bind gatewary device

@@ -75,7 +75,7 @@ export interface DataSource {
   attributeRename: string;
   attributeRename: string;
   deviceRename: string;
   deviceRename: string;
   slaveDeviceId: string;
   slaveDeviceId: string;
-  isGatewayDevice: boolean;
+  gatewayDevice: boolean;
   componentInfo: ComponentInfo;
   componentInfo: ComponentInfo;
   deviceName?: string;
   deviceName?: string;
 
 

@@ -8,7 +8,7 @@
   import type { DataBoardRecord, UpdateDataBoardParams } from '/@/api/dataBoard/model';
   import type { DataBoardRecord, UpdateDataBoardParams } from '/@/api/dataBoard/model';
   import { ref, unref } from 'vue';
   import { ref, unref } from 'vue';
 
 
-  const emit = defineEmits(['change']);
+  const emit = defineEmits(['change', 'register']);
 
 
   const isEdit = ref(false);
   const isEdit = ref(false);
   const recordId = ref<Nullable<string>>(null);
   const recordId = ref<Nullable<string>>(null);
@@ -62,6 +62,7 @@
 
 
   const handleGetValue = () => {
   const handleGetValue = () => {
     unref(isEdit) ? handleEditPanel() : handleCreatePanel();
     unref(isEdit) ? handleEditPanel() : handleCreatePanel();
+    isEdit.value = false;
   };
   };
 </script>
 </script>
 
 

@@ -55,14 +55,12 @@
         :style="{ width: `${100 / props.record.length}%` }"
         :style="{ width: `${100 / props.record.length}%` }"
         :key="index"
         :key="index"
       >
       >
-        <SvgIcon name="" prefix="iconfont" class="!fill-emerald-400" />
-        {{ item.deviceName }}
-        <!-- <div class="flex items-center">
-          <Tooltip>
-            <SvgIcon name="online" prefix="iconfont" class="!fill-emerald-400" />
-          </Tooltip>
-          <div class="truncate">{{ item.deviceName || item.deviceId }}</div>
-        </div> -->
+        <Tooltip :title="item.deviceName" placement="topLeft">
+          <span>
+            <SvgIcon name="" prefix="iconfont" class="!fill-emerald-400" />
+            <span>{{ item.deviceName }}</span>
+          </span>
+        </Tooltip>
       </div>
       </div>
     </div>
     </div>
     <div class="flex items-center w-10">
     <div class="flex items-center w-10">

@@ -31,10 +31,11 @@
   const componentRecord = ref<DataBoardLayoutInfo>({} as unknown as DataBoardLayoutInfo);
   const componentRecord = ref<DataBoardLayoutInfo>({} as unknown as DataBoardLayoutInfo);
 
 
   const [register, { closeModal, changeOkLoading }] = useModalInner(
   const [register, { closeModal, changeOkLoading }] = useModalInner(
-    (record: DataBoardLayoutInfo & { isEdit: boolean }) => {
-      componentRecord.value = record;
-      frontId.value = record.record.frontId;
-      isEdit.value = record.isEdit || false;
+    (data: { isEdit: boolean; record?: DataBoardLayoutInfo }) => {
+      componentRecord.value = data.record || ({} as unknown as DataBoardLayoutInfo);
+      frontId.value = data.record?.record?.frontId || '';
+      isEdit.value = data.isEdit || false;
+      console.log(unref(isEdit));
     }
     }
   );
   );
 
 
@@ -47,6 +48,7 @@
     const value = getAllDataSourceFieldValue();
     const value = getAllDataSourceFieldValue();
     unref(isEdit) ? handleUpdateComponent(value) : handleAddComponent(value);
     unref(isEdit) ? handleUpdateComponent(value) : handleAddComponent(value);
     isEdit.value = false;
     isEdit.value = false;
+    frontId.value = '';
   };
   };
 
 
   const handleAddComponent = async (value: Recordable) => {
   const handleAddComponent = async (value: Recordable) => {
@@ -95,7 +97,7 @@
     @register="register"
     @register="register"
     title="自定义组件"
     title="自定义组件"
     width="70%"
     width="70%"
-    destroy-on-close
+    :destroy-on-close="true"
     @ok="handleSubmit"
     @ok="handleSubmit"
   >
   >
     <section>
     <section>

@@ -17,7 +17,7 @@ const getDeviceAttribute = async (deviceId: string) => {
 };
 };
 
 
 export enum DataSourceField {
 export enum DataSourceField {
-  IS_GATEWAY_DEVICE = 'isGatewayDevice',
+  IS_GATEWAY_DEVICE = 'gatewayDevice',
   ORIGINATION_ID = 'organizationId',
   ORIGINATION_ID = 'organizationId',
   DEVICE_ID = 'deviceId',
   DEVICE_ID = 'deviceId',
   SLAVE_DEVICE_ID = 'slaveDeviceId',
   SLAVE_DEVICE_ID = 'slaveDeviceId',
@@ -127,7 +127,7 @@ export const dataSourceSchema: FormSchema[] = [
     component: 'ApiSelect',
     component: 'ApiSelect',
     colProps: { span: 8 },
     colProps: { span: 8 },
     ifShow({ model }) {
     ifShow({ model }) {
-      return model['isGatewayDevice'];
+      return model[DataSourceField.IS_GATEWAY_DEVICE];
     },
     },
     dynamicRules({ model }) {
     dynamicRules({ model }) {
       return [{ required: model[DataSourceField.IS_GATEWAY_DEVICE], message: '请选择网关子设备' }];
       return [{ required: model[DataSourceField.IS_GATEWAY_DEVICE], message: '请选择网关子设备' }];

@@ -142,7 +142,7 @@
   };
   };
 
 
   const handleOpenCreatePanel = () => {
   const handleOpenCreatePanel = () => {
-    openModal(true);
+    openModal(true, { isEdit: false });
   };
   };
 
 
   const handleSaveLayoutInfo = async () => {
   const handleSaveLayoutInfo = async () => {
@@ -214,7 +214,7 @@
 
 
   const handleUpdate = async (id: string) => {
   const handleUpdate = async (id: string) => {
     const record = unref(dataBoardList).find((item) => item.i === id);
     const record = unref(dataBoardList).find((item) => item.i === id);
-    openModal(true, { isEdit: true, ...record });
+    openModal(true, { isEdit: true, record });
   };
   };
 
 
   const handleCopy = async (id: string) => {
   const handleCopy = async (id: string) => {

@@ -100,21 +100,24 @@ export function useSocketConnect(dataSourceRef: Ref<DataBoardLayoutInfo[]>) {
   const transformSocketMessageItem = () => {
   const transformSocketMessageItem = () => {
     const messageList: SocketMessageItem[] = [];
     const messageList: SocketMessageItem[] = [];
     let index = 0;
     let index = 0;
+    console.log(unref(dataSourceRef));
     unref(dataSourceRef).forEach((record, recordIndex) => {
     unref(dataSourceRef).forEach((record, recordIndex) => {
       const componentId = record.record.id;
       const componentId = record.record.id;
       record.record.dataSource.forEach((dataSource, dataSourceIndex) => {
       record.record.dataSource.forEach((dataSource, dataSourceIndex) => {
-        const { deviceId, attribute } = dataSource;
+        const { deviceId, attribute, slaveDeviceId, gatewayDevice } = dataSource;
         const cmdId = index;
         const cmdId = index;
         index++;
         index++;
         setCmdId(cmdId, {
         setCmdId(cmdId, {
           componentId,
           componentId,
-          deviceId,
+          deviceId: gatewayDevice ? deviceId : slaveDeviceId,
           recordIndex,
           recordIndex,
           dataSourceIndex,
           dataSourceIndex,
           attribute,
           attribute,
         });
         });
 
 
-        messageList.push(generateMessage(deviceId, cmdId, attribute));
+        messageList.push(
+          generateMessage(gatewayDevice ? slaveDeviceId : deviceId, cmdId, attribute)
+        );
       });
       });
     });
     });
     return {
     return {