fix: all history data charts

@@ -9,7 +9,7 @@ export const getDeviceProfile = () => {
 };
 
 // 获取历史数据
-export const getDeviceHistoryInfo = (params) => {
+export const getDeviceHistoryInfo = (params: Recordable) => {
   return defHttp.get<HistoryData>(
     {
       url: `/plugins/telemetry/DEVICE/${params.entityId}/values/timeseries`,

 <script lang="ts" setup>
-  import moment from 'moment';
   import { nextTick, onMounted, onUnmounted, Ref, ref, unref } from 'vue';
-  import { getDeviceDataKeys, getDeviceHistoryInfo } from '/@/api/alarm/position';
+  import { getDeviceHistoryInfo } from '/@/api/alarm/position';
   import { Empty, Spin } from 'ant-design-vue';
   import { useECharts } from '/@/hooks/web/useECharts';
-  import { dateUtil } from '/@/utils/dateUtil';
-  import {
-    AggregateDataEnum,
-    eChartOptions,
-    selectDeviceAttrSchema,
-  } from '/@/views/device/localtion/config.data';
+  import { AggregateDataEnum, selectDeviceAttrSchema } from '/@/views/device/localtion/config.data';
   import { useTimePeriodForm } from '/@/views/device/localtion/cpns/TimePeriodForm';
-  import { defaultSchemas, QueryWay } from '/@/views/device/localtion/cpns/TimePeriodForm/config';
+  import { defaultSchemas } from '/@/views/device/localtion/cpns/TimePeriodForm/config';
   import TimePeriodForm from '/@/views/device/localtion/cpns/TimePeriodForm/TimePeriodForm.vue';
   import { SchemaFiled } from '/@/views/report/config/config.data';
   import { useGridLayout } from '/@/hooks/component/useGridLayout';
   import { ColEx } from '/@/components/Form/src/types';
+  import { useHistoryData } from '../../hook/useHistoryData';
 
   interface DeviceDetail {
     tbDeviceId: string;
+    deviceProfileId: string;
   }
 
   const props = defineProps<{
@@ -28,36 +24,12 @@
 
   const chartRef = ref();
 
-  const deviceAttrs = ref<string[]>([]);
-
   const loading = ref(false);
 
   const isNull = ref(false);
 
-  function getSearchParams(value: Recordable) {
-    const { startTs, endTs, interval, agg, limit, keys, way } = value;
-    if (way === QueryWay.LATEST) {
-      return {
-        entityId: props.deviceDetail.tbDeviceId,
-        keys: keys ? keys : unref(deviceAttrs).join(),
-        startTs: moment().subtract(startTs, 'ms').valueOf(),
-        endTs: Date.now(),
-        interval,
-        agg,
-        limit,
-      };
-    } else {
-      return {
-        entityId: props.deviceDetail.tbDeviceId,
-        keys: keys ? keys : unref(deviceAttrs).join(),
-        startTs: moment(startTs).valueOf(),
-        endTs: moment(endTs).valueOf(),
-        interval,
-        agg,
-        limit,
-      };
-    }
-  }
+  const { deviceAttrs, getDeviceKeys, getSearchParams, setChartOptions, getDeviceAttribute } =
+    useHistoryData();
 
   function hasDeviceAttr() {
     if (!unref(deviceAttrs).length) {
@@ -69,28 +41,6 @@
 
   const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>);
 
-  function setChartOptions(data, keys?) {
-    const dataArray: any[] = [];
-    for (const key in data) {
-      for (const item1 of data[key]) {
-        let { ts, value } = item1;
-        const time = dateUtil(ts).format('YYYY-MM-DD HH:mm:ss');
-        value = Number(value).toFixed(2);
-        dataArray.push([time, value, key]);
-      }
-    }
-    keys = keys ? [keys] : unref(deviceAttrs);
-    const series: any = keys.map((item) => {
-      return {
-        name: item,
-        type: 'line',
-        data: dataArray.filter((item1) => item1[2] === item),
-      };
-    });
-    // 设置数据
-    setOptions(eChartOptions(series, keys));
-  }
-
   const [register, method] = useTimePeriodForm({
     schemas: [...defaultSchemas, ...selectDeviceAttrSchema],
     baseColProps: useGridLayout(2, 3, 4) as unknown as ColEx,
@@ -103,7 +53,10 @@
       if (!hasDeviceAttr()) return;
       // 发送请求
       loading.value = true;
-      const res = await getDeviceHistoryInfo(searchParams);
+      const res = await getDeviceHistoryInfo({
+        ...searchParams,
+        entityId: props.deviceDetail.tbDeviceId,
+      });
       // 判断数据对象是否为空
       if (!Object.keys(res).length) {
         isNull.value = false;
@@ -111,16 +64,19 @@
       } else {
         isNull.value = true;
       }
-      setChartOptions(res, value.keys);
+
+      const selectedKeys = unref(deviceAttrs).find(
+        (item) => item.identifier === value[SchemaFiled.KEYS]
+      );
+
+      setOptions(setChartOptions(res, selectedKeys));
       loading.value = false;
     },
   });
 
   const getDeviceDataKey = async () => {
-    const { tbDeviceId } = props.deviceDetail || {};
     try {
-      deviceAttrs.value = (await getDeviceDataKeys(tbDeviceId)) || [];
-
+      await getDeviceAttribute(props.deviceDetail);
       if (props.attr) {
         method.setFieldsValue({ keys: props.attr });
       }
@@ -132,7 +88,7 @@
     method.updateSchema({
       field: 'keys',
       componentProps: {
-        options: unref(deviceAttrs).map((item) => ({ label: item, value: item })),
+        options: unref(deviceAttrs).map((item) => ({ label: item.name, value: item.identifier })),
       },
     });
 
@@ -144,7 +100,7 @@
 
     if (!hasDeviceAttr()) return;
 
-    const keys = props.attr ? props.attr : unref(deviceAttrs).join();
+    const keys = props.attr ? props.attr : unref(getDeviceKeys).join();
 
     const res = await getDeviceHistoryInfo({
       entityId: props.deviceDetail.tbDeviceId,
@@ -162,7 +118,9 @@
     } else {
       isNull.value = true;
     }
-    setChartOptions(res, props.attr);
+    const selectedKeys = unref(deviceAttrs).find((item) => item.identifier === props.attr);
+
+    setOptions(setChartOptions(res, selectedKeys));
   };
 
   onMounted(async () => {

+import { EChartsOption } from 'echarts';
+import moment from 'moment';
+import { computed, ref, unref } from 'vue';
+import { eChartOptions } from '../../localtion/config.data';
+import { HistoryData } from '/@/api/alarm/position/model';
+import { getDeviceAttributes } from '/@/api/dataBoard';
+import { DeviceAttributeRecord } from '/@/api/dataBoard/model';
+import { dateUtil } from '/@/utils/dateUtil';
+import { QueryWay } from '/@/views/report/config/config.data';
+import { SchemaFiled } from '/@/views/visual/board/detail/config/historyTrend.config';
+import { DEFAULT_DATE_FORMAT } from '/@/views/visual/board/detail/config/util';
+
+interface DeviceOption {
+  deviceProfileId: string;
+}
+
+export function useHistoryData() {
+  const deviceAttrs = ref<DeviceAttributeRecord[]>([]);
+
+  const getDeviceKeys = computed(() => {
+    return unref(deviceAttrs).map((item) => item.identifier);
+  });
+
+  const getDeviceAttribute = async (record: DeviceOption) => {
+    try {
+      const { deviceProfileId } = record;
+      deviceAttrs.value = (await getDeviceAttributes({ deviceProfileId })) || [];
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  function getSearchParams(value: Partial<Record<SchemaFiled, string>>) {
+    const { startTs, endTs, interval, agg, limit, keys, way, deviceId } = value;
+    const basicRecord = {
+      entityId: deviceId,
+      keys: keys ? keys : unref(getDeviceKeys).join(),
+      interval,
+      agg,
+      limit,
+    };
+    if (way === QueryWay.LATEST) {
+      return Object.assign(basicRecord, {
+        startTs: moment().subtract(startTs, 'ms').valueOf(),
+        endTs: Date.now(),
+      });
+    } else {
+      return Object.assign(basicRecord, {
+        startTs: moment(startTs).valueOf(),
+        endTs: moment(endTs).valueOf(),
+      });
+    }
+  }
+
+  function setChartOptions(
+    data: HistoryData,
+    keys?: DeviceAttributeRecord | DeviceAttributeRecord[]
+  ) {
+    const dataArray: [string, string, string][] = [];
+    for (const key in data) {
+      for (const item of data[key]) {
+        let { value } = item;
+        const { ts } = item;
+        const time = dateUtil(ts).format(DEFAULT_DATE_FORMAT);
+        value = Number(value).toFixed(2);
+        dataArray.push([time, value, key as string]);
+      }
+    }
+
+    keys = keys ? [keys as DeviceAttributeRecord] : unref(deviceAttrs);
+    const legend = keys.map((item) => item.name);
+
+    const series: EChartsOption['series'] = (keys as DeviceAttributeRecord[]).map((item) => {
+      return {
+        name: item.name,
+        type: 'line',
+        data: dataArray.filter((temp) => temp[2] === item.identifier),
+      };
+    });
+
+    return eChartOptions(series, legend);
+  }
+
+  return {
+    deviceAttrs,
+    getDeviceKeys,
+    getDeviceAttribute,
+    getSearchParams,
+    setChartOptions,
+  };
+}

@@ -78,11 +78,7 @@
   import { BAI_DU_MAP_URL } from '/@/utils/fnUtils';
   import { useModal, BasicModal } from '/@/components/Modal';
   import { useECharts } from '/@/hooks/web/useECharts';
-  import {
-    getDeviceHistoryInfo,
-    getDeviceDataKeys,
-    getDeviceActiveTime,
-  } from '/@/api/alarm/position';
+  import { getDeviceHistoryInfo, getDeviceActiveTime } from '/@/api/alarm/position';
   import { useDrawer } from '/@/components/Drawer';
   import DeviceDetailDrawer from '/@/views/device/list/cpns/modal/DeviceDetailDrawer.vue';
   import moment from 'moment';
@@ -96,12 +92,12 @@
   import lx1 from '/@/assets/images/lx1.png';
   import Loading from '/@/components/Loading/src/Loading.vue';
   import { TimePeriodForm, useTimePeriodForm } from './cpns/TimePeriodForm';
-  import { selectDeviceAttrSchema, eChartOptions } from './config.data';
+  import { selectDeviceAttrSchema } from './config.data';
   import { defaultSchemas } from './cpns/TimePeriodForm/config';
   import { QueryWay, SchemaFiled, AggregateDataEnum } from './cpns/TimePeriodForm/config';
-  import { dateUtil } from '/@/utils/dateUtil';
   import { Spin } from 'ant-design-vue';
   import { useAsyncQueue } from './useAsyncQueue';
+  import { useHistoryData } from '../list/hook/useHistoryData';
 
   interface DeviceInfo {
     alarmStatus: 0 | 1;
@@ -112,6 +108,7 @@
     deviceProfile: { default: boolean; enabled: boolean; name: string; transportType: string };
     deviceInfo: { longitude: string; latitude: string; address: string };
     deviceType?: string;
+    deviceProfileId: string;
   }
   type MarkerList = DeviceInfo & { marker: any; label: any };
 
@@ -142,8 +139,7 @@
       let globalRecord: any = {};
       const wrapRef = ref<HTMLDivElement | null>(null);
       const chartRef = ref<HTMLDivElement | null>(null);
-      const deviceAttrs = ref<string[]>([]);
-      const { setOptions, getInstance, resize } = useECharts(chartRef as Ref<HTMLDivElement>);
+      const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>);
       const isNull = ref(true);
       const { toPromise } = useScript({ src: BAI_DU_MAP_URL });
       const [registerDetailDrawer, { openDrawer }] = useDrawer();
@@ -154,6 +150,9 @@
 
       const loading = ref(false);
 
+      const { deviceAttrs, getDeviceKeys, getDeviceAttribute, getSearchParams, setChartOptions } =
+        useHistoryData();
+
       const [registerTable] = useTable({
         api: devicePage,
         columns,
@@ -259,7 +258,7 @@
         entityId = record.tbDeviceId;
         globalRecord = record;
         try {
-          deviceAttrs.value = (await getDeviceDataKeys(entityId)) || [];
+          await getDeviceAttribute(record);
         } catch (error) {}
 
         const options = {
@@ -350,7 +349,7 @@
           if (!hasDeviceAttr()) return;
           // 发送请求
           loading.value = true;
-          const res = await getDeviceHistoryInfo(searchParams);
+          const res = await getDeviceHistoryInfo({ ...searchParams, entityId });
           loading.value = false;
           // 判断数据对象是否为空
           if (!Object.keys(res).length) {
@@ -359,35 +358,13 @@
           } else {
             isNull.value = true;
           }
-          setChartOptions(res, value.keys);
+          const selectedKeys = unref(deviceAttrs).find(
+            (item) => item.identifier === value[SchemaFiled.KEYS]
+          );
+          setOptions(setChartOptions(res, selectedKeys));
         },
       });
 
-      function getSearchParams(value: Recordable) {
-        const { startTs, endTs, interval, agg, limit, keys, way } = value;
-        if (way === QueryWay.LATEST) {
-          return {
-            entityId,
-            keys: keys ? keys : unref(deviceAttrs).join(),
-            startTs: moment().subtract(startTs, 'ms').valueOf(),
-            endTs: Date.now(),
-            interval,
-            agg,
-            limit,
-          };
-        } else {
-          return {
-            entityId,
-            keys: keys ? keys : unref(deviceAttrs).join(),
-            startTs: moment(startTs).valueOf(),
-            endTs: moment(endTs).valueOf(),
-            interval,
-            agg,
-            limit,
-          };
-        }
-      }
-
       const openHistoryModal = async () => {
         openModal(true);
 
@@ -395,7 +372,10 @@
         method.updateSchema({
           field: 'keys',
           componentProps: {
-            options: unref(deviceAttrs).map((item) => ({ label: item, value: item })),
+            options: unref(deviceAttrs).map((item) => ({
+              label: item.name,
+              value: item.identifier,
+            })),
           },
         });
 
@@ -409,7 +389,7 @@
 
         const res = await getDeviceHistoryInfo({
           entityId,
-          keys: unref(deviceAttrs).join(),
+          keys: unref(getDeviceKeys).join(),
           startTs: Date.now() - 1 * 24 * 60 * 60 * 1000,
           endTs: Date.now(),
           agg: AggregateDataEnum.NONE,
@@ -423,7 +403,7 @@
         } else {
           isNull.value = true;
         }
-        setChartOptions(res);
+        setOptions(setChartOptions(res));
       };
       function hasDeviceAttr() {
         if (!unref(deviceAttrs).length) {
@@ -435,29 +415,6 @@
         }
       }
 
-      function setChartOptions(data, keys?) {
-        const dataArray: any[] = [];
-        for (const key in data) {
-          for (const item1 of data[key]) {
-            let { ts, value } = item1;
-            const time = dateUtil(ts).format('YYYY-MM-DD HH:mm:ss');
-            value = Number(value).toFixed(2);
-            dataArray.push([time, value, key]);
-          }
-        }
-        keys = keys ? [keys] : unref(deviceAttrs);
-        const series: any = keys.map((item) => {
-          return {
-            name: item,
-            type: 'line',
-            data: dataArray.filter((item1) => item1[2] === item),
-          };
-        });
-        resize();
-        // 设置数据
-        setOptions(eChartOptions(series, keys));
-      }
-
       const handleCancelModal = () => {
         method.setFieldsValue({
           [SchemaFiled.WAY]: QueryWay.LATEST,

@@ -18,7 +18,7 @@
     schemas: formSchema(),
     showActionButtonGroup: false,
     fieldMapToTime: [
-      [SchemaFiled.DATE_RANGE, [SchemaFiled.START_TS, SchemaFiled.END_TS], 'YYYY-MM-DD HH:ss'],
+      [SchemaFiled.DATE_RANGE, [SchemaFiled.START_TS, SchemaFiled.END_TS], 'YYYY-MM-DD HH:mm:ss'],
     ],
   });
 

 <script lang="ts" setup>
-  import moment from 'moment';
   import { nextTick, Ref, ref, unref } from 'vue';
   import { getDeviceHistoryInfo } from '/@/api/alarm/position';
   import { Empty } from 'ant-design-vue';
   import { useECharts } from '/@/hooks/web/useECharts';
-  import { dateUtil } from '/@/utils/dateUtil';
-  import { AggregateDataEnum, eChartOptions } from '/@/views/device/localtion/config.data';
+  import { AggregateDataEnum } from '/@/views/device/localtion/config.data';
   import { useGridLayout } from '/@/hooks/component/useGridLayout';
   import { ColEx } from '/@/components/Form/src/types';
-  import { DataSource, DeviceAttributeRecord } from '/@/api/dataBoard/model';
+  import { DataSource } from '/@/api/dataBoard/model';
   import { useForm, BasicForm } from '/@/components/Form';
-  import { formSchema, QueryWay, SchemaFiled } from '../config/historyTrend.config';
-  import { DEFAULT_DATE_FORMAT } from '../config/util';
+  import { formSchema, SchemaFiled } from '../config/historyTrend.config';
   import { Loading } from '/@/components/Loading';
   import BasicModal from '/@/components/Modal/src/BasicModal.vue';
   import { useModalInner } from '/@/components/Modal';
-  import { getAllDeviceByOrg, getDeviceAttributes } from '/@/api/dataBoard';
-  import { HistoryData } from '/@/api/alarm/position/model';
-  import { EChartsOption } from 'echarts';
+  import { getAllDeviceByOrg } from '/@/api/dataBoard';
+  import { useHistoryData } from '/@/views/device/list/hook/useHistoryData';
 
   type DeviceOption = Record<'label' | 'value' | 'organizationId', string>;
 
@@ -25,37 +21,14 @@
 
   const chartRef = ref();
 
-  const deviceAttrs = ref<DeviceAttributeRecord[]>([]);
-
   const loading = ref(false);
 
   const isNull = ref(false);
 
-  function getSearchParams(value: Recordable) {
-    const { startTs, endTs, interval, agg, limit, keys, way, deviceId } = value;
-    const basicRecord = {
-      entityId: deviceId,
-      keys: keys
-        ? keys
-        : unref(deviceAttrs)
-            .map((item) => item.identifier)
-            .join(),
-      interval,
-      agg,
-      limit,
-    };
-    if (way === QueryWay.LATEST) {
-      return Object.assign(basicRecord, {
-        startTs: moment().subtract(startTs, 'ms').valueOf(),
-        endTs: Date.now(),
-      });
-    } else {
-      return Object.assign(basicRecord, {
-        startTs: moment(startTs).valueOf(),
-        endTs: moment(endTs).valueOf(),
-      });
-    }
-  }
+  const { deviceAttrs, getDeviceKeys, getSearchParams, setChartOptions, getDeviceAttribute } =
+    useHistoryData();
+
+  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
 
   function hasDeviceAttr() {
     if (!unref(deviceAttrs).length) {
@@ -65,30 +38,6 @@
     }
   }
 
-  function setChartOptions(data: HistoryData, keys?: string | string[]) {
-    const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
-
-    const dataArray: [string, string, string][] = [];
-    for (const key in data) {
-      for (const item1 of data[key]) {
-        let { ts, value } = item1;
-        const time = dateUtil(ts).format(DEFAULT_DATE_FORMAT);
-        value = Number(value).toFixed(2);
-        dataArray.push([time, value, key as string]);
-      }
-    }
-    keys = keys ? [keys as string] : unref(deviceAttrs).map((item) => item.identifier);
-    const series: EChartsOption['series'] = (keys as string[]).map((item) => {
-      return {
-        name: item,
-        type: 'line',
-        data: dataArray.filter((temp) => temp[2] === item),
-      };
-    });
-    // 设置数据
-    setOptions(eChartOptions(series, keys));
-  }
-
   const [register, method] = useForm({
     schemas: formSchema(),
     baseColProps: useGridLayout(2, 3, 4) as unknown as ColEx,
@@ -119,7 +68,11 @@
       } else {
         isNull.value = true;
       }
-      setChartOptions(res, value.keys);
+
+      const selectedKeys = unref(deviceAttrs).find(
+        (item) => item.identifier === value[SchemaFiled.KEYS]
+      );
+      setOptions(setChartOptions(res, selectedKeys));
     },
   });
 
@@ -128,8 +81,7 @@
     try {
       const options = await getAllDeviceByOrg(organizationId);
       const record = options.find((item) => item.id === value);
-      const { deviceProfileId } = record!;
-      deviceAttrs.value = (await getDeviceAttributes({ deviceProfileId })) || [];
+      await getDeviceAttribute(record!);
       await nextTick();
       method.updateSchema({
         field: SchemaFiled.KEYS,
@@ -157,9 +109,7 @@
 
     const res = await getDeviceHistoryInfo({
       entityId: deviceId,
-      keys: unref(deviceAttrs)
-        .map((item) => item.identifier)
-        .join(),
+      keys: unref(getDeviceKeys).join(),
       startTs: Date.now() - 1 * 24 * 60 * 60 * 1000,
       endTs: Date.now(),
       agg: AggregateDataEnum.NONE,
@@ -173,7 +123,7 @@
     } else {
       isNull.value = true;
     }
-    setChartOptions(res);
+    setOptions(setChartOptions(res));
   };
 
   const generateDeviceOptions = (dataSource: DataSource[]) => {