Merge branch 'perf/visual-board-map' into 'main_dev'

perf：看板组件地图新增选择单数据源结构体时选择经纬度

See merge request yunteng/thingskit-front!1107

@@ -10,7 +10,8 @@
 
 
   const alert = {
   const alert = {
     [PackagesCategoryEnum.MAP]: [
     [PackagesCategoryEnum.MAP]: [
-      '地图组件，需绑定两个数据源，且数据源为同一设备。第一数据源为经度，第二数据源为纬度，否则地图组件不能正常显示。',
+      '1、绑定数据源为结构体时，可以自行选择结构体里的属性作为经纬度',
+      '2、绑定数据源为非结构体时，第一数据源为经度，第二数据源为纬度，且数据源为同一设备，并同时上报。否则地图组件不能正常显示。',
     ],
     ],
   };
   };
 
 

@@ -34,14 +34,6 @@
         const { unit, fontColor, showDeviceName } = item.componentInfo || {};
         const { unit, fontColor, showDeviceName } = item.componentInfo || {};
         const { deviceName, deviceRename, attribute, attributeRename, deviceId, attributeName } =
         const { deviceName, deviceRename, attribute, attributeRename, deviceId, attributeName } =
           item;
           item;
-        // return {
-        //   unit: unit ?? persetUnit,
-        //   fontColor: fontColor ?? persetFontColor,
-        //   showDeviceName: showDeviceName ?? persetShowDeviceName,
-        //   attribute,
-        //   deviceName,
-        //   deviceRename,
-        // };
         return {
         return {
           unit: unit ?? presetUnit,
           unit: unit ?? presetUnit,
           fontColor: fontColor ?? presetFontColor,
           fontColor: fontColor ?? presetFontColor,
@@ -58,7 +50,6 @@
   });
   });
 
 
   const getOffset = (length: number, index: number) => {
   const getOffset = (length: number, index: number) => {
-    // try {
     const offsetList = ref<any>([]);
     const offsetList = ref<any>([]);
     switch (length) {
     switch (length) {
       case 1:
       case 1:
@@ -147,7 +138,6 @@
         break;
         break;
     }
     }
     return unref(offsetList);
     return unref(offsetList);
-    // } catch {}
   };
   };
 
 
   const series = ref(
   const series = ref(
@@ -263,7 +253,6 @@
       series.value.forEach((item) => {
       series.value.forEach((item) => {
         if (item.id === deviceId && item.attribute === attribute && value) {
         if (item.id === deviceId && item.attribute === attribute && value) {
           item.value = getNumberValue(value);
           item.value = getNumberValue(value);
-          // time.value = timespan;
         }
         }
       });
       });
     });
     });

@@ -62,7 +62,6 @@
   const options = (): EChartsOption => {
   const options = (): EChartsOption => {
     const { unit, fontColor, pointerColor, maxNumber, valueSize } = unref(getDesign);
     const { unit, fontColor, pointerColor, maxNumber, valueSize } = unref(getDesign);
 
 
-    // getStageColor(gradientInfo);
     return {
     return {
       series: [
       series: [
         {
         {
@@ -103,14 +102,6 @@
               color: pointerColor,
               color: pointerColor,
             },
             },
           },
           },
-          // anchor: {
-          //   show: true,
-          //   showAbove: true,
-          //   size: 10,
-          //   itemStyle: {
-          //     borderWidth: 4,
-          //   },
-          // },
           title: {
           title: {
             show: false,
             show: false,
           },
           },

@@ -3,7 +3,7 @@
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { formSchema, getHistorySearchParams, SchemaFiled } from './history.config';
   import { formSchema, getHistorySearchParams, SchemaFiled } from './history.config';
   import { HistoryModalOkEmitParams } from './type';
   import { HistoryModalOkEmitParams } from './type';
-  import { ref } from 'vue';
+  import { ref, unref } from 'vue';
   import { getAllDeviceByOrg } from '/@/api/dataBoard';
   import { getAllDeviceByOrg } from '/@/api/dataBoard';
   import { getDeviceHistoryInfo } from '/@/api/alarm/position';
   import { getDeviceHistoryInfo } from '/@/api/alarm/position';
   import { DataSource } from '/@/views/visual/palette/types';
   import { DataSource } from '/@/views/visual/palette/types';
@@ -19,58 +19,154 @@
     ],
     ],
   });
   });
 
 
-  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 loading = ref(false);
+  const getDesign = ref();
+
+  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 [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) {
     } catch (error) {
       throw 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 = '') => {
   const validEffective = (value = '') => {
     return !!(value && !isNaN(value as unknown as number));
     return !!(value && !isNaN(value as unknown as number));
   };
   };
-  const loading = ref(false);
   const handleOk = async () => {
   const handleOk = async () => {
     try {
     try {
       await validate();
       await validate();
@@ -84,33 +180,9 @@
         ...value,
         ...value,
         [SchemaFiled.KEYS]: value[SchemaFiled.KEYS].join(','),
         [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);
       emit('ok', { track, value } as HistoryModalOkEmitParams);
       closeModal();
       closeModal();
     } catch (error) {
     } catch (error) {

@@ -24,6 +24,14 @@
     return props.config.option.dataSource?.at(0)?.deviceId;
     return props.config.option.dataSource?.at(0)?.deviceId;
   });
   });
 
 
+  const getDesign = computed(() => {
+    const { option } = props.config;
+    const { dataSource } = option || {};
+    return {
+      dataSource: dataSource,
+    };
+  });
+
   /**
   /**
    * @description 经度key
    * @description 经度key
    */
    */
@@ -42,7 +50,7 @@
     return !!(value && !isNaN(value as unknown as number));
     return !!(value && !isNaN(value as unknown as number));
   };
   };
 
 
-  const updateFn: MultipleDataFetchUpdateFn = (message, deviceId) => {
+  const getTwoMap = (message, deviceId) => {
     if (unref(getDeviceId) !== deviceId) return;
     if (unref(getDeviceId) !== deviceId) return;
 
 
     const { data = {} } = message;
     const { data = {} } = message;
@@ -51,7 +59,7 @@
 
 
     const lngData = bindMessage[unref(getLngKey)] || [];
     const lngData = bindMessage[unref(getLngKey)] || [];
     const [lngLatest] = lngData;
     const [lngLatest] = lngData;
-    const [, lng] = lngLatest;
+    const [, lng] = lngLatest || [];
 
 
     const latData = bindMessage[unref(getLatKey)] || [];
     const latData = bindMessage[unref(getLatKey)] || [];
     const [latLatest] = latData;
     const [latLatest] = latData;
@@ -62,6 +70,34 @@
     }
     }
   };
   };
 
 
+  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 && unref(getDesign)?.dataSource?.length == 1) {
+      getOneMap(message, deviceId);
+      return;
+    }
+    // 选择两个属性时
+    getTwoMap(message, deviceId);
+  };
+
   useMultipleDataFetch(props, updateFn);
   useMultipleDataFetch(props, updateFn);
 
 
   const { drawLine } = useMapTrackPlayBack(mapInstance);
   const { drawLine } = useMapTrackPlayBack(mapInstance);
@@ -100,11 +136,3 @@
     <div v-show="!loading" ref="wrapRef" :id="wrapId" class="w-full h-full no-drag"> </div>
     <div v-show="!loading" ref="wrapRef" :id="wrapId" class="w-full h-full no-drag"> </div>
   </main>
   </main>
 </template>
 </template>
-
-<style lang="less" scoped>
-  // .map-spin-wrapper {
-  //   :deep(.ant-spin-container) {
-  //     @apply justify-center items-center p-2 w-full h-full;
-  //   }
-  // }
-</style>

@@ -247,7 +247,6 @@ export const commonDataSourceSchemas = (): FormSchema[] => {
             });
             });
           },
           },
           placeholder: '请选择设备',
           placeholder: '请选择设备',
-          getPopupContainer: () => document.body,
           ...createPickerSearch(),
           ...createPickerSearch(),
         };
         };
       },
       },
@@ -382,11 +381,18 @@ export const commonDataSourceSchemas = (): FormSchema[] => {
             return [];
             return [];
           },
           },
           placeholder: '请选择属性',
           placeholder: '请选择属性',
-          getPopupContainer: () => document.body,
           onChange(value: string, option: Record<'label' | 'value' | any, string>) {
           onChange(value: string, option: Record<'label' | 'value' | any, string>) {
+            const { detail }: any = option || {};
             setFieldsValue({
             setFieldsValue({
               [DataSourceField.ATTRIBUTE_NAME]: value ? option.label : null,
               [DataSourceField.ATTRIBUTE_NAME]: value ? option.label : null,
               [DataSourceField.EXTENSION_DESC]: value ? JSON.stringify(option.extensionDesc) : '',
               [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(),
           ...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,
       field: DataSourceField.EXTENSION_DESC,
       component: 'Input',
       component: 'Input',
       show: false,
       show: false,

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