fix: 修改看板组件实时数据表格样式和数据问题

@@ -15,31 +15,37 @@
   import { MultipleDataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
   import { MultipleDataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
 
 
   interface IList {
   interface IList {
-    [key: string]: string | number;
+    [key: string]: string | number | object;
   }
   }
 
 
   const props = defineProps<{
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
     config: ComponentPropsConfigType<typeof option>;
   }>();
   }>();
 
 
-  const [registerTable, { setTableData, setColumns, getDataSource, redoHeight, setProps }] =
-    useTable({ showIndexColumn: false, showTableSetting: false, canResize: true, size: 'small' });
-
-  const getDesign = computed(() => {
-    const { persetOption, option } = props.config;
-    const { dataSource = [] } = option || {};
-    const { unit: presetUnit, showDeviceName: presetShowDeviceName } = persetOption || {};
-    const columns: BasicColumn[] = dataSource.map((item) => ({
-      title: item.attributeRename || item.attributeName || item.attribute,
-      dataIndex: item.attribute,
+  const columns: BasicColumn[] = [
+    {
+      title: '设备属性',
+      dataIndex: 'attribute',
+      width: 80,
+      ellipsis: true,
+      format(text) {
+        if (props.config.option.mode == 'SELECT_PREVIEW') return text;
+        const { uniqueArr } = unref(getDesign);
+        const values = uniqueArr.filter((item) => item[text])[0][text];
+        return values;
+      },
+    },
+    {
+      title: '值',
+      dataIndex: 'value',
       width: 80,
       width: 80,
       ellipsis: true,
       ellipsis: true,
       format(text, record) {
       format(text, record) {
         const value = text ? text + (record.unit || '') : '';
         const value = text ? text + (record.unit || '') : '';
         return value;
         return value;
       },
       },
-    }));
-    columns.push({
+    },
+    {
       title: '时间',
       title: '时间',
       dataIndex: 'time',
       dataIndex: 'time',
       width: 110,
       width: 110,
@@ -47,9 +53,37 @@
       format(text) {
       format(text) {
         return formatToDateTime(text, 'YYYY-MM-DD HH:mm:ss');
         return formatToDateTime(text, 'YYYY-MM-DD HH:mm:ss');
       },
       },
+    },
+  ];
+
+  const [registerTable, { setTableData, getDataSource, redoHeight, setProps }] = useTable({
+    showIndexColumn: false,
+    showTableSetting: false,
+    canResize: true,
+    size: 'small',
+    columns,
+  });
+
+  const getDesign = computed(() => {
+    const { persetOption, option } = props.config;
+    const { dataSource = [] } = option || {};
+    const { unit: presetUnit, showDeviceName: presetShowDeviceName } = persetOption || {};
+    const convert = dataSource.map((item) => {
+      return {
+        [item.attribute + '-' + item.deviceId]: item.deviceName + '-' + item.attributeName,
+        id: item.deviceId,
+      };
+    });
+
+    const uniqueSet = new Set();
+    const uniqueArr = convert.filter((obj) => {
+      const jsonString = JSON.stringify(obj);
+      const isUnique = !uniqueSet.has(jsonString);
+      uniqueSet.add(jsonString);
+      return isUnique;
     });
     });
     return {
     return {
-      columns,
+      uniqueArr,
       dataSource: dataSource?.map((item) => {
       dataSource: dataSource?.map((item) => {
         const { unit, showDeviceName } = item.componentInfo || {};
         const { unit, showDeviceName } = item.componentInfo || {};
         const { attribute, attributeName, attributeRename, deviceName, deviceRename, deviceId } =
         const { attribute, attributeName, attributeRename, deviceName, deviceRename, deviceId } =
@@ -57,11 +91,9 @@
         return {
         return {
           unit: unit ?? presetUnit,
           unit: unit ?? presetUnit,
           attribute,
           attribute,
-          attributeRename,
-          attributeName,
+          attributeName: attributeRename || attributeName,
           showDeviceName: showDeviceName ?? presetShowDeviceName,
           showDeviceName: showDeviceName ?? presetShowDeviceName,
-          deviceName,
-          deviceRename,
+          deviceName: deviceRename || deviceName,
           id: deviceId,
           id: deviceId,
         };
         };
       }),
       }),
@@ -73,29 +105,31 @@
 
 
   const updateFn: MultipleDataFetchUpdateFn = async (message, deviceId, attribute) => {
   const updateFn: MultipleDataFetchUpdateFn = async (message, deviceId, attribute) => {
     const list: IList = {};
     const list: IList = {};
+    const list1: IList = {};
     forEachGroupMessage(message, deviceId, attribute, (attribute, value, timespan) => {
     forEachGroupMessage(message, deviceId, attribute, (attribute, value, timespan) => {
-      list[attribute] = getNumberValue(value);
+      list[deviceId + attribute] = getNumberValue(value);
       list.time = timespan || list.time;
       list.time = timespan || list.time;
+
+      if (timespan && value) {
+        list1[attribute + '-' + deviceId] = {
+          attribute: attribute + '-' + deviceId,
+          value: value ? getNumberValue(value) : value,
+          time: timespan,
+        };
+      }
     });
     });
     await nextTick();
     await nextTick();
-    setTableData([list, ...toRaw(unref(getDataSource()))]);
+    console.log(Object.values(list1), 'list1');
+    setTableData([...Object.values(list1), ...toRaw(unref(getDataSource()))]);
   };
   };
 
 
   useMultipleDataFetch(props, updateFn);
   useMultipleDataFetch(props, updateFn);
   onMounted(async () => {
   onMounted(async () => {
-    setColumns(
-      props.config.option.dataSource
-        ? unref(getDesign).columns
-        : [
-            { title: '属性', dataIndex: 'attribute', width: 80, ellipsis: true },
-            { title: '时间', dataIndex: 'time', width: 80, ellipsis: true },
-          ]
-    );
     !props.config.option.dataSource &&
     !props.config.option.dataSource &&
       setTableData([
       setTableData([
-        { attribute: '温度', time: '2023-06-29' },
-        { attribute: '湿度', time: '2023-06-29' },
-        { attribute: '湿度', time: '2023-06-29' },
+        { attribute: '温度', value: 1, time: '2023-06-29' },
+        { attribute: '湿度', value: 1, time: '2023-06-29' },
+        { attribute: '湿度', value: 1, time: '2023-06-29' },
       ]);
       ]);
 
 
     await nextTick();
     await nextTick();
@@ -103,6 +137,7 @@
   });
   });
   const resize = async () => {
   const resize = async () => {
     const { height } = unref(getContainerSize);
     const { height } = unref(getContainerSize);
+    console.log(unref(getDataSource()), 'getDataSource()');
     height && setProps({ scroll: { x: 190, y: height - 120 } });
     height && setProps({ scroll: { x: 190, y: height - 120 } });
 
 
     await nextTick();
     await nextTick();