Merge branch 'ww' into 'main'

fix: BUG in teambition

See merge request huang/yun-teng-iot-front!410

@@ -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`,

@@ -10,6 +10,7 @@ import {
 } from './tenantInfo';
 import { defHttp } from '/@/utils/http/axios';
 import { BasicPageParams } from '/@/api/model/baseModel';
+import { PaginationResult } from '/#/axios';
 export type QueryTenantProfilesParam = BasicPageParams & OtherParams;
 export type DeleteTenantProfilesParam = OtherParams;
 export type OtherParams = {
@@ -47,7 +48,7 @@ export async function deleteTenantProfileApi(ids: string) {
 }
 
 export const getTableTenantProfileApi = (params?: QueryTenantProfilesParam) => {
-  return defHttp.get({
+  return defHttp.get<PaginationResult>({
     url: Api.getTenantProfile,
     params,
   });
@@ -67,12 +68,12 @@ export const setTenantProfileIsDefaultApi = (id: string, v, params?: {}) => {
 };
 
 export const selectTenantProfileApi = async (params?: QueryTenantProfilesParam) => {
-  const { items } = await getTableTenantProfileApi(params);
+  const { items, total } = await getTableTenantProfileApi(params);
   items.forEach((item) => {
     item.label = item.name;
     item.value = item.id.id;
   });
-  return Promise.resolve<any[]>(items);
+  return { items, total };
 };
 
 export async function saveTenantProfileApi(params: tenantProfileDTO) {

@@ -37,6 +37,7 @@ import ApiUpload from './components/ApiUpload.vue';
 import ApiSearchSelect from './components/ApiSearchSelect.vue';
 import CustomMinMaxInput from './externalCompns/components/CustomMinMaxInput.vue';
 import StructForm from './externalCompns/components/StructForm/StructForm.vue';
+import ApiSelectScrollLoad from './components/ApiSelectScrollLoad.vue';
 
 const componentMap = new Map<ComponentType, Component>();
 
@@ -81,6 +82,7 @@ componentMap.set('ApiUpload', ApiUpload);
 componentMap.set('ApiSearchSelect', ApiSearchSelect);
 componentMap.set('CustomMinMaxInput', CustomMinMaxInput);
 componentMap.set('StructForm', StructForm);
+componentMap.set('ApiSelectScrollLoad', ApiSelectScrollLoad);
 
 export function add(compName: ComponentType, component: Component) {
   componentMap.set(compName, component);

+<script lang="ts">
+  export default {
+    inheritAttrs: true,
+  };
+</script>
+<script lang="ts" setup>
+  import { ref, watchEffect, computed, unref, watch, reactive } from 'vue';
+  import { Select, Spin } from 'ant-design-vue';
+  import { isFunction } from '/@/utils/is';
+  import { useRuleFormItem } from '/@/hooks/component/useFormItem';
+  import { useAttrs } from '/@/hooks/core/useAttrs';
+  import { get, omit } from 'lodash-es';
+  import { LoadingOutlined } from '@ant-design/icons-vue';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { PaginationResult } from '/#/axios';
+  import { useDebounceFn } from '@vueuse/core';
+
+  type OptionsItem = { label: string; value: string; disabled?: boolean };
+
+  type Pagination = Record<'page' | 'pageSize', number>;
+
+  const emit = defineEmits(['options-change', 'change']);
+  const props = withDefaults(
+    defineProps<{
+      value?: Recordable | number | string;
+      numberToString?: boolean;
+      api?: (arg?: Recordable) => Promise<PaginationResult<OptionsItem>>;
+      params?: Recordable;
+      resultField?: string;
+      labelField?: string;
+      valueField?: string;
+      immediate?: boolean;
+      pagenation?: Pagination;
+      queryEmptyDataAgin?: boolean;
+    }>(),
+    {
+      resultField: '',
+      labelField: 'label',
+      valueField: 'value',
+      immediate: true,
+      queryEmptyDataAgin: true,
+      pagenation: () => ({ page: 1, pageSize: 10 }),
+    }
+  );
+
+  const OptionsItem = (_, { attrs }: { attrs: { vNode: any } }) => attrs.vNode;
+
+  const options = ref<OptionsItem[]>([]);
+  const pagination = reactive(Object.assign({ total: 0, page: 1, pageSize: 10 }, props.pagenation));
+  const scrollLoading = ref(false);
+  const lock = ref(false);
+  const loading = ref(false);
+  const isFirstLoad = ref(true);
+  const emitData = ref<any[]>([]);
+  const attrs = useAttrs();
+  const { t } = useI18n();
+
+  // Embedded in the form, just use the hook binding to perform form verification
+  const [state] = useRuleFormItem(props, 'value', 'change', emitData);
+
+  const getOptions = computed(() => {
+    const { labelField, valueField, numberToString } = props;
+
+    return unref(options).reduce((prev, next: Recordable) => {
+      if (next) {
+        const value = get(next, valueField);
+        prev.push({
+          label: next[labelField],
+          value: numberToString ? `${value}` : value,
+          ...omit(next, [labelField, valueField]),
+        });
+      }
+      return prev;
+    }, [] as OptionsItem[]);
+  });
+
+  watchEffect(() => {
+    props.immediate && isFirstLoad.value && fetch();
+  });
+
+  watch(
+    () => props.params,
+    () => {
+      !unref(isFirstLoad) && fetch();
+    },
+    { deep: true }
+  );
+
+  async function fetch() {
+    const api = props.api;
+    if (!api || !isFunction(api)) return;
+    try {
+      !unref(getOptions).length ? (loading.value = true) : (scrollLoading.value = true);
+      lock.value = true;
+      const { total, items } = await api({
+        ...props.params,
+        page: pagination.page,
+        pageSize: pagination.pageSize,
+      });
+
+      pagination.total = total;
+      if (Array.isArray(items)) {
+        options.value = [...options.value, ...items];
+        emitChange();
+        return;
+      }
+      if (props.resultField) {
+        options.value = [...options.value, ...(get(items, props.resultField) || [])];
+      }
+      emitChange();
+    } catch (error) {
+      pagination.page = Math.ceil(unref(getOptions).length / pagination.pageSize);
+      console.warn(error);
+    } finally {
+      isFirstLoad.value = false;
+      loading.value = false;
+      scrollLoading.value = false;
+      lock.value = false;
+    }
+  }
+
+  async function handleFetch() {
+    if (!props.immediate && unref(isFirstLoad)) {
+      await fetch();
+      isFirstLoad.value = false;
+    }
+  }
+
+  function emitChange() {
+    emit('options-change', unref(getOptions));
+  }
+
+  function handleChange(_, ...args) {
+    emitData.value = args;
+  }
+
+  async function handlePopupScroll(event: MouseEvent) {
+    const { scrollHeight, scrollTop, clientHeight } = event.target as HTMLDivElement;
+    if (scrollTop + clientHeight >= scrollHeight) {
+      if (unref(getOptions).length < pagination.total && !unref(lock)) {
+        pagination.page = pagination.page + 1;
+        await fetch();
+      }
+    }
+  }
+
+  const debounceHandlePopupScroll = useDebounceFn(handlePopupScroll, 100);
+</script>
+
+<template>
+  <Select
+    @dropdownVisibleChange="handleFetch"
+    v-bind="attrs"
+    @change="handleChange"
+    :options="getOptions"
+    v-model:value="state"
+    @popup-scroll="debounceHandlePopupScroll"
+  >
+    <template #[item]="data" v-for="item in Object.keys($slots)">
+      <slot :name="item" v-bind="data || {}"></slot>
+    </template>
+    <template #suffixIcon v-if="loading">
+      <LoadingOutlined spin />
+    </template>
+    <template #notFoundContent v-if="loading">
+      <span>
+        <LoadingOutlined spin class="mr-1" />
+        {{ t('component.form.apiSelectNotFound') }}
+      </span>
+    </template>
+    <template #dropdownRender="{ menuNode }">
+      <OptionsItem :vNode="menuNode" />
+      <div v-show="scrollLoading" class="flex justify-center">
+        <Spin size="small" />
+      </div>
+    </template>
+  </Select>
+</template>

@@ -118,4 +118,5 @@ export type ComponentType =
   | 'IconDrawer'
   | 'ApiUpload'
   | 'ApiSearchSelect'
-  | 'StructForm';
+  | 'StructForm'
+  | 'ApiSelectScrollLoad';

 <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 () => {

@@ -233,7 +233,9 @@
                   <div>{{ item.value || '--' }}</div>
                   <div>{{ item.unit }}</div>
                 </div>
-                <div class="text-dark-800 text-xs">{{ formatToDateTime(item.time) || '--' }}</div>
+                <div class="text-dark-800 text-xs">
+                  {{ item.value ? formatToDateTime(item.time) : '--' }}
+                </div>
               </section>
             </Card>
           </List.Item>

+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,

 import { BasicColumn } from '/@/components/Table/src/types/table';
 import { FormSchema } from '/@/components/Form';
 import { getAllRoleList } from '/@/api/system/system';
-import { selectTenantProfileApi } from '/@/api/tenant/tenantApi';
+import { getTableTenantProfileApi, QueryTenantProfilesParam } from '/@/api/tenant/tenantApi';
 import { RoleEnum } from '/@/enums/roleEnum';
 
 export function getBasicColumns(): BasicColumn[] {
@@ -123,16 +123,26 @@ export const tenantFormSchema: FormSchema[] = [
   {
     field: 'tenantProfileId',
     label: '租户配置',
-    component: 'ApiSelect',
+    component: 'ApiSelectScrollLoad',
     required: true,
-    defaultValue: 'Default',
-    componentProps: {
-      api: selectTenantProfileApi,
-      showSearch: true,
-      params: {
-        page: 1,
-        pageSize: 100,
-      },
+    componentProps: ({ formActionType }) => {
+      const { setFieldsValue } = formActionType;
+      return {
+        api: async (params: QueryTenantProfilesParam) => {
+          const { items, total } = await getTableTenantProfileApi(params);
+          const firstRecord = items.at(0);
+          if (firstRecord) {
+            setFieldsValue({ tenantProfileId: firstRecord.id.id });
+          }
+          return { items, total };
+        },
+        showSearch: true,
+        labelField: 'name',
+        valueField: 'id.id',
+        filterOption: (inputValue: string, options: Record<'label' | 'value', string>) => {
+          return options.label.toLowerCase().includes(inputValue.toLowerCase());
+        },
+      };
     },
   },
   {

@@ -15,10 +15,10 @@
   const emit = defineEmits(['register', 'ok']);
 
   const [registerForm, { updateSchema, setFieldsValue, validate, getFieldsValue }] = useForm({
-    schemas: formSchema,
+    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'],
     ],
   });
 

@@ -214,7 +214,7 @@
 </script>
 
 <template>
-  <div class="w-full h-full flex justify-center items-center flex-col p-2 no-drag">
+  <div class="w-full h-full flex justify-center items-center flex-col p-2">
     <div
       class="w-full flex"
       v-if="props.layout?.componentType === FrontComponent.MAP_COMPONENT_TRACK_HISTORY"
@@ -241,8 +241,12 @@
         </span>
       </Button>
     </div>
-    <Spin class="w-full h-full" :spinning="!prepare" tip="Loading..." />
-    <div ref="wrapRef" :id="wrapId" class="w-full h-full"></div>
+    <Spin
+      class="w-full h-full !flex flex-col justify-center items-center pointer-events-none"
+      :spinning="!prepare"
+      tip="地图加载中..."
+    />
+    <div v-show="prepare" ref="wrapRef" :id="wrapId" class="w-full h-full no-drag"></div>
     <HistoryDataModel @register="register" @ok="handleRenderHistroyData" />
   </div>
 </template>

@@ -267,12 +267,7 @@
     <h3 class="w-24 flex-shrink-0 text-right pr-2 my-4">选择数据源</h3>
     <section ref="formListEl">
       <div v-for="item in dataSource" :data-id="item.id" :key="item.id" class="flex bg-light-50">
-        <div
-          class="w-24 text-right leading-30px pr-8px flex right"
-          style="flex: 0 0 96px; justify-content: right"
-        >
-          选择设备
-        </div>
+        <div class="w-24 text-right flex right justify-end"> 选择设备 </div>
         <div class="pl-2 flex-auto">
           <component
             :frontId="$props.frontId"

 <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,32 +38,8 @@
     }
   }
 
-  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,
+    schemas: formSchema(),
     baseColProps: useGridLayout(2, 3, 4) as unknown as ColEx,
     rowProps: {
       gutter: 10,
@@ -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[]) => {

@@ -35,171 +35,173 @@ export enum AggregateDataEnum {
   COUNT = 'COUNT',
   NONE = 'NONE',
 }
-export const formSchema: FormSchema[] = [
-  {
-    field: SchemaFiled.DEVICE_ID,
-    label: '设备名称',
-    component: 'Select',
-    rules: [{ required: true, message: '设备名称为必选项', type: 'string' }],
-    componentProps({ formActionType }) {
-      const { setFieldsValue } = formActionType;
-      return {
-        placeholder: '请选择设备',
-        onChange() {
-          setFieldsValue({ [SchemaFiled.KEYS]: null });
-        },
-      };
+export const formSchema = (): FormSchema[] => {
+  return [
+    {
+      field: SchemaFiled.DEVICE_ID,
+      label: '设备名称',
+      component: 'Select',
+      rules: [{ required: true, message: '设备名称为必选项', type: 'string' }],
+      componentProps({ formActionType }) {
+        const { setFieldsValue } = formActionType;
+        return {
+          placeholder: '请选择设备',
+          onChange() {
+            setFieldsValue({ [SchemaFiled.KEYS]: null });
+          },
+        };
+      },
     },
-  },
-  {
-    field: SchemaFiled.WAY,
-    label: '查询方式',
-    component: 'RadioGroup',
-    defaultValue: QueryWay.LATEST,
-    componentProps({ formActionType }) {
-      const { setFieldsValue } = formActionType;
-      return {
-        options: [
-          { label: '最后', value: QueryWay.LATEST },
-          { label: '时间段', value: QueryWay.TIME_PERIOD },
-        ],
-        onChange(event: ChangeEvent) {
-          (event.target as HTMLInputElement).value === QueryWay.LATEST
-            ? setFieldsValue({
-                [SchemaFiled.DATE_RANGE]: [],
-                [SchemaFiled.START_TS]: null,
-                [SchemaFiled.END_TS]: null,
-              })
-            : setFieldsValue({ [SchemaFiled.START_TS]: null });
-        },
-        getPopupContainer: () => document.body,
-      };
+    {
+      field: SchemaFiled.WAY,
+      label: '查询方式',
+      component: 'RadioGroup',
+      defaultValue: QueryWay.LATEST,
+      componentProps({ formActionType }) {
+        const { setFieldsValue } = formActionType;
+        return {
+          options: [
+            { label: '最后', value: QueryWay.LATEST },
+            { label: '时间段', value: QueryWay.TIME_PERIOD },
+          ],
+          onChange(event: ChangeEvent) {
+            (event.target as HTMLInputElement).value === QueryWay.LATEST
+              ? setFieldsValue({
+                  [SchemaFiled.DATE_RANGE]: [],
+                  [SchemaFiled.START_TS]: null,
+                  [SchemaFiled.END_TS]: null,
+                })
+              : setFieldsValue({ [SchemaFiled.START_TS]: null });
+          },
+          getPopupContainer: () => document.body,
+        };
+      },
     },
-  },
-  {
-    field: SchemaFiled.START_TS,
-    label: '最后数据',
-    component: 'Select',
-    ifShow({ values }) {
-      return values[SchemaFiled.WAY] === QueryWay.LATEST;
+    {
+      field: SchemaFiled.START_TS,
+      label: '最后数据',
+      component: 'Select',
+      ifShow({ values }) {
+        return values[SchemaFiled.WAY] === QueryWay.LATEST;
+      },
+      componentProps({ formActionType }) {
+        const { setFieldsValue } = formActionType;
+        return {
+          options: intervalOption,
+          onChange() {
+            setFieldsValue({ [SchemaFiled.INTERVAL]: null });
+          },
+          getPopupContainer: () => document.body,
+        };
+      },
+      rules: [{ required: true, message: '最后数据为必选项', type: 'number' }],
     },
-    componentProps({ formActionType }) {
-      const { setFieldsValue } = formActionType;
-      return {
-        options: intervalOption,
-        onChange() {
-          setFieldsValue({ [SchemaFiled.INTERVAL]: null });
-        },
-        getPopupContainer: () => document.body,
-      };
-    },
-    rules: [{ required: true, message: '最后数据为必选项', type: 'number' }],
-  },
-  {
-    field: SchemaFiled.DATE_RANGE,
-    label: '时间段',
-    component: 'RangePicker',
-    ifShow({ values }) {
-      return values[SchemaFiled.WAY] === QueryWay.TIME_PERIOD;
+    {
+      field: SchemaFiled.DATE_RANGE,
+      label: '时间段',
+      component: 'RangePicker',
+      ifShow({ values }) {
+        return values[SchemaFiled.WAY] === QueryWay.TIME_PERIOD;
+      },
+      rules: [{ required: true, message: '时间段为必选项' }],
+      componentProps({ formActionType }) {
+        const { setFieldsValue } = formActionType;
+        let dates: Moment[] = [];
+        return {
+          showTime: {
+            defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
+          },
+          onCalendarChange(value: Moment[]) {
+            dates = value;
+          },
+          disabledDate(current: Moment) {
+            if (!dates || dates.length === 0 || !current) {
+              return false;
+            }
+            const diffDate = current.diff(dates[0], 'years', true);
+            return Math.abs(diffDate) > 1;
+          },
+          onChange() {
+            dates = [];
+            setFieldsValue({ [SchemaFiled.INTERVAL]: null });
+          },
+          getPopupContainer: () => document.body,
+        };
+      },
+      colProps: useGridLayout(2, 2, 2, 2, 2, 2) as unknown as ColEx,
     },
-    rules: [{ required: true, message: '时间段为必选项' }],
-    componentProps({ formActionType }) {
-      const { setFieldsValue } = formActionType;
-      let dates: Moment[] = [];
-      return {
-        showTime: {
-          defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
-        },
-        onCalendarChange(value: Moment[]) {
-          dates = value;
-        },
-        disabledDate(current: Moment) {
-          if (!dates || dates.length === 0 || !current) {
-            return false;
-          }
-          const diffDate = current.diff(dates[0], 'years', true);
-          return Math.abs(diffDate) > 1;
-        },
-        onChange() {
-          dates = [];
-          setFieldsValue({ [SchemaFiled.INTERVAL]: null });
-        },
+    {
+      field: SchemaFiled.AGG,
+      label: '数据聚合功能',
+      component: 'Select',
+      componentProps: {
         getPopupContainer: () => document.body,
-      };
-    },
-    colProps: useGridLayout(2, 2, 2, 2, 2, 2) as unknown as ColEx,
-  },
-  {
-    field: SchemaFiled.AGG,
-    label: '数据聚合功能',
-    component: 'Select',
-    componentProps: {
-      getPopupContainer: () => document.body,
-      options: [
-        { label: '最小值', value: AggregateDataEnum.MIN },
-        { label: '最大值', value: AggregateDataEnum.MAX },
-        { label: '平均值', value: AggregateDataEnum.AVG },
-        { label: '求和', value: AggregateDataEnum.SUM },
-        { label: '计数', value: AggregateDataEnum.COUNT },
-        { label: '空', value: AggregateDataEnum.NONE },
-      ],
-    },
-  },
-  {
-    field: SchemaFiled.INTERVAL,
-    label: '分组间隔',
-    component: 'Select',
-    dynamicRules: ({ model }) => {
-      return [
-        {
-          required: model[SchemaFiled.AGG] !== AggregateDataEnum.NONE,
-          message: '分组间隔为必填项',
-          type: 'number',
-        },
-      ];
-    },
-    ifShow({ values }) {
-      return values[SchemaFiled.AGG] !== AggregateDataEnum.NONE;
+        options: [
+          { label: '最小值', value: AggregateDataEnum.MIN },
+          { label: '最大值', value: AggregateDataEnum.MAX },
+          { label: '平均值', value: AggregateDataEnum.AVG },
+          { label: '求和', value: AggregateDataEnum.SUM },
+          { label: '计数', value: AggregateDataEnum.COUNT },
+          { label: '空', value: AggregateDataEnum.NONE },
+        ],
+      },
     },
-    componentProps({ formModel, formActionType }) {
-      const options =
-        formModel[SchemaFiled.WAY] === QueryWay.LATEST
-          ? getPacketIntervalByValue(formModel[SchemaFiled.START_TS])
-          : getPacketIntervalByRange(formModel[SchemaFiled.DATE_RANGE]);
-      if (formModel[SchemaFiled.AGG] !== AggregateDataEnum.NONE) {
-        formActionType.setFieldsValue({ [SchemaFiled.LIMIT]: null });
-      }
-      return {
-        options,
-        getPopupContainer: () => document.body,
-      };
+    {
+      field: SchemaFiled.INTERVAL,
+      label: '分组间隔',
+      component: 'Select',
+      dynamicRules: ({ model }) => {
+        return [
+          {
+            required: model[SchemaFiled.AGG] !== AggregateDataEnum.NONE,
+            message: '分组间隔为必填项',
+            type: 'number',
+          },
+        ];
+      },
+      ifShow({ values }) {
+        return values[SchemaFiled.AGG] !== AggregateDataEnum.NONE;
+      },
+      componentProps({ formModel, formActionType }) {
+        const options =
+          formModel[SchemaFiled.WAY] === QueryWay.LATEST
+            ? getPacketIntervalByValue(formModel[SchemaFiled.START_TS])
+            : getPacketIntervalByRange(formModel[SchemaFiled.DATE_RANGE]);
+        if (formModel[SchemaFiled.AGG] !== AggregateDataEnum.NONE) {
+          formActionType.setFieldsValue({ [SchemaFiled.LIMIT]: null });
+        }
+        return {
+          options,
+          getPopupContainer: () => document.body,
+        };
+      },
     },
-  },
-  {
-    field: SchemaFiled.LIMIT,
-    label: '最大条数',
-    component: 'InputNumber',
-    ifShow({ values }) {
-      return values[SchemaFiled.AGG] === AggregateDataEnum.NONE;
+    {
+      field: SchemaFiled.LIMIT,
+      label: '最大条数',
+      component: 'InputNumber',
+      ifShow({ values }) {
+        return values[SchemaFiled.AGG] === AggregateDataEnum.NONE;
+      },
+      helpMessage: ['根据查询条件，查出的数据条数不超过这个值'],
+      componentProps() {
+        return {
+          max: 50000,
+          min: 7,
+          getPopupContainer: () => document.body,
+        };
+      },
     },
-    helpMessage: ['根据查询条件，查出的数据条数不超过这个值'],
-    componentProps() {
-      return {
-        max: 50000,
-        min: 7,
+    {
+      field: SchemaFiled.KEYS,
+      label: '设备属性',
+      component: 'Select',
+      componentProps: {
         getPopupContainer: () => document.body,
-      };
-    },
-  },
-  {
-    field: SchemaFiled.KEYS,
-    label: '设备属性',
-    component: 'Select',
-    componentProps: {
-      getPopupContainer: () => document.body,
+      },
     },
-  },
-];
+  ];
+};
 
 export function getHistorySearchParams(value: Recordable) {
   const { startTs, endTs, interval, agg, limit, way, keys, deviceId } = value;