perf: 新增看板组件地图支持结构体获取经纬度

@@ -3,7 +3,7 @@
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { formSchema, getHistorySearchParams, SchemaFiled } from './history.config';
   import { HistoryModalOkEmitParams } from './type';
-  import { ref } from 'vue';
+  import { ref, unref } from 'vue';
   import { getAllDeviceByOrg } from '/@/api/dataBoard';
   import { getDeviceHistoryInfo } from '/@/api/alarm/position';
   import { DataSource } from '/@/views/visual/palette/types';
@@ -19,54 +19,149 @@
     ],
   });
 
-  const [registerModal, { closeModal }] = useModalInner(async (dataSource: DataSource[]) => {
-    try {
-      dataSource = cloneDeep(dataSource);
-      if (dataSource.length < 2) return;
-      dataSource = dataSource.splice(0, 2);
-      const deviceRecord = dataSource?.at(0) || ({} as DataSource);
-      if (!deviceRecord.organizationId) return;
-      const deviceList = await getAllDeviceByOrg(
-        deviceRecord.organizationId,
-        deviceRecord.deviceProfileId
-      );
-      const options = deviceList
-        .filter((item) => item.tbDeviceId === deviceRecord.deviceId)
-        .map((item) => ({ ...item, label: item.alias || item.name, value: item.tbDeviceId }));
-
-      const attKey = dataSource.map((item) => ({
-        ...item,
-        label: item.attribute,
-        value: item.attribute,
-      }));
-      updateSchema([
-        {
-          field: SchemaFiled.DEVICE_ID,
-          componentProps: {
-            options,
-          },
+  const getTwoMap = async (dataSource) => {
+    if (dataSource.length < 2) return;
+    dataSource = dataSource.splice(0, 2);
+    const deviceRecord = dataSource?.at(0) || ({} as DataSource);
+
+    if (!deviceRecord.organizationId) return;
+    const deviceList = await getAllDeviceByOrg(
+      deviceRecord.organizationId,
+      deviceRecord.deviceProfileId
+    );
+    const options = deviceList
+      .filter((item) => item.tbDeviceId === deviceRecord.deviceId)
+      .map((item) => ({ ...item, label: item.alias || item.name, value: item.tbDeviceId }));
+
+    const attKey = dataSource.map((item) => ({
+      ...item,
+      label: item.attribute,
+      value: item.attribute,
+    }));
+
+    updateSchemaMap(options, attKey, deviceRecord);
+  };
+
+  const getOneMap = async (dataSource) => {
+    const deviceRecord = dataSource?.[0];
+    if (!deviceRecord.organizationId) return;
+    const deviceList = await getAllDeviceByOrg(
+      deviceRecord.organizationId,
+      deviceRecord.deviceProfileId
+    );
+    const options = deviceList
+      .filter((item) => item.tbDeviceId === deviceRecord.deviceId)
+      .map((item) => ({ ...item, label: item.alias || item.name, value: item.tbDeviceId }));
+
+    const attKey = dataSource?.map((item) => ({
+      ...item,
+      label: item.attributeName,
+      value: item.attribute,
+    }));
+    updateSchemaMap(options, attKey, deviceRecord);
+  };
+
+  const updateSchemaMap = (options, attKey, deviceRecord) => {
+    updateSchema([
+      {
+        field: SchemaFiled.DEVICE_ID,
+        componentProps: {
+          options,
         },
-        {
-          field: SchemaFiled.KEYS,
-          component: 'Select',
-          defaultValue: attKey.map((item) => item.value),
-          componentProps: {
-            options: attKey,
-            mode: 'multiple',
-            disabled: true,
-          },
+      },
+      {
+        field: SchemaFiled.KEYS,
+        component: 'Select',
+        defaultValue: attKey.map((item) => item.value),
+        componentProps: {
+          options: attKey,
+          mode: 'multiple',
+          disabled: true,
         },
-      ]);
+      },
+    ]);
 
-      setFieldsValue({
-        [SchemaFiled.DEVICE_ID]: deviceRecord.deviceId,
-        [SchemaFiled.KEYS]: attKey.map((item) => item.value),
-      });
+    setFieldsValue({
+      [SchemaFiled.DEVICE_ID]: deviceRecord.deviceId,
+      [SchemaFiled.KEYS]: attKey.map((item) => item.value),
+    });
+  };
+
+  const getDesign = ref();
+
+  const [registerModal, { closeModal }] = useModalInner(async (dataSource: DataSource[]) => {
+    try {
+      getDesign.value = dataSource;
+      dataSource = cloneDeep(dataSource);
+      //判断选择是不是结构体
+      if (dataSource.length == 1 && dataSource?.[0]?.lal) {
+        getOneMap(dataSource);
+        return;
+      }
+      getTwoMap(dataSource);
     } catch (error) {
       throw error;
     }
   });
 
+  const getMultipleDataSource = async (res) => {
+    let timespanList = Object.keys(res).reduce((prev, next) => {
+      const ts = res[next].map((item) => item.ts);
+      return [...prev, ...ts];
+    }, [] as number[]);
+    timespanList = [...new Set(timespanList)];
+
+    const track: Record<'lng' | 'lat', number>[] = [];
+    const keys = Object.keys(res);
+
+    for (const ts of timespanList) {
+      const list: { ts: number; value: number }[] = [];
+      for (const key of keys) {
+        const record = res[key].find((item) => ts === item.ts);
+        if (!validEffective(record?.value)) {
+          continue;
+        }
+        list.push(record as any);
+      }
+
+      if (list.length === 2 && list.every(Boolean)) {
+        const lng = list.at(0)?.value;
+        const lat = list.at(1)?.value;
+        if (lng && lat) track.push({ lng, lat });
+      }
+    }
+    return track;
+  };
+
+  const getSingleDataSource = async (res) => {
+    const [keys] = Object.keys(res);
+    const track: Record<'lng' | 'lat', number>[] = [];
+    const dataSource = res[keys]?.map((item) => {
+      return {
+        value: item.value ? JSON.parse(item.value) : {},
+      };
+    });
+    const list: { value: number }[] = [];
+    dataSource?.forEach((item) => {
+      if (
+        //判断结构体得值是不是数字
+        Object.values(item.value).every((item1) => {
+          return validEffective(item1 as any);
+        })
+      ) {
+        list.push(item.value);
+      }
+    });
+    const { latitude, longitude } = unref(getDesign)?.[0]; //获取选择得经纬度选项
+
+    list.forEach((item) => {
+      const lng = item[longitude];
+      const lat = item[latitude];
+      if (lng && lat) track.push({ lng, lat });
+    });
+    return track;
+  };
+
   const validEffective = (value = '') => {
     return !!(value && !isNaN(value as unknown as number));
   };
@@ -84,33 +179,9 @@
         ...value,
         [SchemaFiled.KEYS]: value[SchemaFiled.KEYS].join(','),
       });
+      const ifSingle = unref(getDesign).length === 1 && unref(getDesign)?.[0]?.lal;
 
-      let timespanList = Object.keys(res).reduce((prev, next) => {
-        const ts = res[next].map((item) => item.ts);
-        return [...prev, ...ts];
-      }, [] as number[]);
-      timespanList = [...new Set(timespanList)];
-
-      const track: Record<'lng' | 'lat', number>[] = [];
-      const keys = Object.keys(res);
-
-      for (const ts of timespanList) {
-        const list: { ts: number; value: number }[] = [];
-        for (const key of keys) {
-          const record = res[key].find((item) => ts === item.ts);
-          if (!validEffective(record?.value)) {
-            continue;
-          }
-          list.push(record as any);
-        }
-
-        if (list.length === 2 && list.every(Boolean)) {
-          const lng = list.at(0)?.value;
-          const lat = list.at(1)?.value;
-          if (lng && lat) track.push({ lng, lat });
-        }
-      }
-
+      const track = ifSingle ? await getSingleDataSource(res) : await getMultipleDataSource(res);
       emit('ok', { track, value } as HistoryModalOkEmitParams);
       closeModal();
     } catch (error) {

@@ -24,6 +24,14 @@
     return props.config.option.dataSource?.at(0)?.deviceId;
   });
 
+  const getDesign = computed(() => {
+    const { option } = props.config;
+    const { dataSource } = option || {};
+    return {
+      dataSource: dataSource,
+    };
+  });
+
   /**
    * @description 经度key
    */
@@ -42,7 +50,7 @@
     return !!(value && !isNaN(value as unknown as number));
   };
 
-  const updateFn: MultipleDataFetchUpdateFn = (message, deviceId) => {
+  const getTwoMap = (message, deviceId) => {
     if (unref(getDeviceId) !== deviceId) return;
 
     const { data = {} } = message;
@@ -51,7 +59,7 @@
 
     const lngData = bindMessage[unref(getLngKey)] || [];
     const [lngLatest] = lngData;
-    const [, lng] = lngLatest;
+    const [, lng] = lngLatest || [];
 
     const latData = bindMessage[unref(getLatKey)] || [];
     const [latLatest] = latData;
@@ -62,6 +70,35 @@
     }
   };
 
+  const getOneMap = (message, deviceId) => {
+    if (unref(getDeviceId) !== deviceId) return;
+
+    const { longitude, latitude, attribute } = unref(getDesign)?.dataSource?.[0] || {};
+    const { data } = message || {};
+    const bindMessage = data[deviceId];
+    const [, values] = attribute && bindMessage?.[attribute][0];
+
+    const mapValues = values ? JSON.parse(values) : [];
+    const lng = longitude && mapValues[longitude];
+    const lat = latitude && mapValues[latitude];
+
+    if (validEffective(lng) && validEffective(lat)) {
+      drawLine({ lng: Number(lng), lat: Number(lat) });
+    }
+  };
+
+  const updateFn: MultipleDataFetchUpdateFn = (message, deviceId) => {
+    const { lal } = unref(getDesign)?.dataSource?.[0] || {};
+
+    // 属性选择结构体时
+    if (lal) {
+      getOneMap(message, deviceId);
+      return;
+    }
+    // 选择两个属性时
+    getTwoMap(message, deviceId);
+  };
+
   useMultipleDataFetch(props, updateFn);
 
   const { drawLine } = useMapTrackPlayBack(mapInstance);

@@ -247,7 +247,6 @@ export const commonDataSourceSchemas = (): FormSchema[] => {
             });
           },
           placeholder: '请选择设备',
-          getPopupContainer: () => document.body,
           ...createPickerSearch(),
         };
       },
@@ -382,11 +381,18 @@ export const commonDataSourceSchemas = (): FormSchema[] => {
             return [];
           },
           placeholder: '请选择属性',
-          getPopupContainer: () => document.body,
           onChange(value: string, option: Record<'label' | 'value' | any, string>) {
+            const { detail }: any = option || {};
             setFieldsValue({
               [DataSourceField.ATTRIBUTE_NAME]: value ? option.label : null,
               [DataSourceField.EXTENSION_DESC]: value ? JSON.stringify(option.extensionDesc) : '',
+              // 地图组件结构体
+              lal:
+                category === 'MAP' && value && detail?.dataType.type === 'STRUCT'
+                  ? JSON.stringify(detail?.dataType.specs)
+                  : null,
+              latitude: null,
+              longitude: null,
             });
           },
           ...createPickerSearch(),
@@ -394,6 +400,46 @@ export const commonDataSourceSchemas = (): FormSchema[] => {
       },
     },
     {
+      field: 'lal',
+      label: '经纬度存储的值',
+      component: 'Input',
+      show: false,
+    },
+    {
+      field: 'longitude',
+      label: '经度',
+      colProps: { span: 8 },
+      component: 'Select',
+      required: true,
+      ifShow: ({ model }) => category === 'MAP' && model.lal,
+      componentProps({ formModel }) {
+        const { lal } = formModel || {};
+        return {
+          placeholder: '请选择经度',
+          options: lal
+            ? JSON.parse(lal)?.map((item) => ({ label: item.functionName, value: item.identifier }))
+            : [],
+        };
+      },
+    },
+    {
+      field: 'latitude',
+      label: '纬度',
+      colProps: { span: 8 },
+      required: true,
+      component: 'Select',
+      ifShow: ({ model }) => category === 'MAP' && model.lal,
+      componentProps({ formModel }) {
+        const { lal } = formModel || {};
+        return {
+          placeholder: '请选择纬度',
+          options: lal
+            ? JSON.parse(lal)?.map((item) => ({ label: item.functionName, value: item.identifier }))
+            : [],
+        };
+      },
+    },
+    {
       field: DataSourceField.EXTENSION_DESC,
       component: 'Input',
       show: false,

@@ -29,6 +29,9 @@ export interface DataSource {
   customCommand: CustomCommand;
   videoConfig?: VideoConfigType;
   [key: string]: any;
+  lal?: string;
+  latitude?: string | number;
+  longitude?: string | number;
 }
 
 export interface ExtraDataSource extends DataSource, PublicComponentOptions {