feat: add attr select && RangePicker on device/location page

@@ -22,7 +22,7 @@ export const getDeviceHistoryInfo = (params) => {
 
 // 获取设备数据的keys
 export const getDeviceDataKeys = (id: string) => {
-  return defHttp.get(
+  return defHttp.get<string[]>(
     {
       url: `/plugins/telemetry/DEVICE/${id}/keys/timeseries`,
     },

@@ -2,7 +2,8 @@ import type { BasicColumn } from '/@/components/Table';
 import type { FormSchema } from '/@/components/Table';
 import { getOrganizationList } from '/@/api/system/system';
 import { copyTransFun } from '/@/utils/fnUtils';
-import { getDeviceProfile } from '/@/api/alarm/position';
+import { getDeviceDataKeys, getDeviceProfile } from '/@/api/alarm/position';
+import { EChartsOption } from 'echarts';
 
 export enum AggregateDataEnum {
   MIN = 'MIN',
@@ -381,17 +382,11 @@ export const schemas: FormSchema[] = [
         ],
       };
     },
-    colProps: {
-      span: 6,
-    },
   },
   {
     field: 'interval',
     label: '分组间隔',
     component: 'Select',
-    colProps: {
-      span: 6,
-    },
     componentProps: {
       placeholder: '请选择分组间隔',
       getPopupContainer: () => document.body,
@@ -427,6 +422,7 @@ export const schemas: FormSchema[] = [
     field: 'agg',
     label: '数据聚合功能',
     component: 'Select',
+    defaultValue: AggregateDataEnum.NONE,
     componentProps: {
       getPopupContainer: () => document.body,
       options: [
@@ -446,10 +442,83 @@ export const schemas: FormSchema[] = [
           label: '求和',
           value: AggregateDataEnum.SUM,
         },
+        {
+          label: '计数',
+          value: AggregateDataEnum.COUNT,
+        },
+        {
+          label: '空',
+          value: AggregateDataEnum.NONE,
+        },
       ],
     },
-    colProps: {
-      span: 6,
+  },
+  {
+    field: 'attr',
+    label: '设备属性',
+    component: 'Select',
+    componentProps: {
+      api: async (id: string) => {
+        try {
+          const res = await getDeviceDataKeys(id);
+          return res.map((item) => ({ label: item, value: item }));
+        } catch (error) {}
+      },
     },
   },
 ];
+
+export const selectDeviceAttrSchema: FormSchema[] = [
+  {
+    field: 'keys',
+    label: '设备属性',
+    component: 'Select',
+    // componentProps: {
+    //   api: async ({ entityId }: { entityId: string }) => {
+    //     if (!entityId) return [];
+    //     try {
+    //       const res = await getDeviceDataKeys(entityId);
+    //       return res.map((item) => ({ label: item, value: item }));
+    //     } catch (error) {}
+    //   },
+    //   immediate: true,
+    // },
+  },
+];
+
+export const eChartOptions = (series, keys): EChartsOption => {
+  return {
+    tooltip: {
+      trigger: 'axis',
+    },
+    legend: {
+      data: keys,
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true,
+    },
+    dataZoom: [
+      {
+        type: 'inside',
+        start: 0,
+        end: 50,
+      },
+      {
+        start: 20,
+        end: 40,
+      },
+    ],
+    xAxis: {
+      type: 'time',
+      boundaryGap: false,
+    },
+    yAxis: {
+      type: 'value',
+      boundaryGap: [0, '100%'],
+    },
+    series,
+  };
+};

+<script setup lang="ts">
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { defaultSchemas, SchemaFiled } from './config';
+  import { onMounted } from 'vue';
+
+  const emit = defineEmits(['register']);
+  const [register, method] = useForm({
+    schemas: defaultSchemas,
+    labelWidth: 120,
+    baseColProps: {
+      span: 5,
+    },
+    fieldMapToTime: [[SchemaFiled.DATE_RANGE, [SchemaFiled.START_TS, SchemaFiled.END_TS]]],
+  });
+  onMounted(() => {
+    emit('register', method);
+  });
+</script>
+
+<template>
+  <BasicForm @register="register" />
+</template>

+import { Moment } from 'moment';
+import { getPacketIntervalByRange, getPacketIntervalByValue, intervalOption } from './helper';
+import { FormSchema } from '/@/components/Form';
+export enum QueryWay {
+  LATEST = 'latest',
+  TIME_PERIOD = 'timePeriod',
+}
+
+export enum SchemaFiled {
+  WAY = 'way',
+  TIME_PERIOD = 'timePeriod',
+  KEYS = 'keys',
+  DATE_RANGE = 'dataRange',
+  START_TS = 'startTs',
+  END_TS = 'endTs',
+  INTERVAL = 'interval',
+  LIMIT = 'limit',
+  AGG = 'agg',
+  ORDER_BY = 'orderBy',
+}
+
+export enum AggregateDataEnum {
+  MIN = 'MIN',
+  MAX = 'MAX',
+  AVG = 'AVG',
+  SUM = 'SUM',
+  COUNT = 'COUNT',
+  NONE = 'NONE',
+}
+export const defaultSchemas: FormSchema[] = [
+  {
+    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(value) {
+          value === QueryWay.LATEST
+            ? setFieldsValue({
+                [SchemaFiled.DATE_RANGE]: [],
+                [SchemaFiled.START_TS]: null,
+                [SchemaFiled.END_TS]: null,
+              })
+            : setFieldsValue({ [SchemaFiled.START_TS]: null });
+        },
+      };
+    },
+  },
+  {
+    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 });
+        },
+      };
+    },
+    rules: [{ required: true, message: '最后数据为必选项', type: 'number' }],
+  },
+  {
+    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: true,
+        onCalendarChange(value: Moment[]) {
+          console.log('enter ');
+          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 });
+        },
+      };
+    },
+    colProps: {
+      span: 10,
+    },
+  },
+  {
+    field: SchemaFiled.AGG,
+    label: '数据聚合功能',
+    component: 'Select',
+    defaultValue: AggregateDataEnum.NONE,
+    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',
+    ifShow({ values }) {
+      return values[SchemaFiled.AGG] !== AggregateDataEnum.NONE;
+    },
+    componentProps({ formModel }) {
+      const options =
+        formModel[SchemaFiled.WAY] === QueryWay.LATEST
+          ? getPacketIntervalByValue(formModel[SchemaFiled.START_TS])
+          : getPacketIntervalByRange(formModel[SchemaFiled.DATE_RANGE]);
+
+      return {
+        options,
+      };
+    },
+  },
+  {
+    field: SchemaFiled.LIMIT,
+    label: '最大值',
+    component: 'InputNumber',
+    defaultValue: 7,
+    ifShow({ values }) {
+      return values[SchemaFiled.AGG] === AggregateDataEnum.NONE;
+    },
+    componentProps: {
+      max: 50000,
+      min: 7,
+    },
+  },
+];

+import { Moment } from 'moment';
+
+enum TimeUnit {
+  SECOND = 'second',
+  MINUTE = 'MINUTE',
+  HOUR = 'HOUR',
+  DAY = 'DAY',
+}
+
+const unitMapping = {
+  [TimeUnit.SECOND]: '秒',
+  [TimeUnit.MINUTE]: '分',
+  [TimeUnit.HOUR]: '小时',
+  [TimeUnit.DAY]: '天',
+};
+
+const unitConversion = {
+  [TimeUnit.SECOND]: 1 * 1000,
+  [TimeUnit.MINUTE]: 1 * 60 * 1000,
+  [TimeUnit.HOUR]: 1 * 60 * 60 * 1000,
+  [TimeUnit.DAY]: 1 * 60 * 60 * 24 * 1000,
+};
+
+export const intervalOption = [
+  {
+    id: 1,
+    unit: TimeUnit.SECOND,
+    linkage: [{ id: 1, unit: TimeUnit.SECOND }],
+  },
+  {
+    id: 5,
+    unit: TimeUnit.SECOND,
+    linkage: [{ id: 1, unit: TimeUnit.SECOND }],
+  },
+  {
+    id: 10,
+    unit: TimeUnit.SECOND,
+    linkage: [{ id: 1, unit: TimeUnit.SECOND }],
+  },
+  {
+    id: 15,
+    unit: TimeUnit.SECOND,
+    linkage: [{ id: 1, unit: TimeUnit.SECOND }],
+  },
+  {
+    id: 30,
+    unit: TimeUnit.SECOND,
+    linkage: [{ id: 1, unit: TimeUnit.SECOND }],
+  },
+  {
+    id: 1,
+    unit: TimeUnit.MINUTE,
+    linkage: [
+      { id: 1, unit: TimeUnit.SECOND },
+      { id: 5, unit: TimeUnit.SECOND },
+    ],
+  },
+  {
+    id: 2,
+    unit: TimeUnit.MINUTE,
+    linkage: [
+      { id: 1, unit: TimeUnit.SECOND },
+      { id: 5, unit: TimeUnit.SECOND },
+      { id: 10, unit: TimeUnit.SECOND },
+      { id: 15, unit: TimeUnit.SECOND },
+    ],
+  },
+  {
+    id: 5,
+    unit: TimeUnit.MINUTE,
+    linkage: [
+      { id: 1, unit: TimeUnit.SECOND },
+      { id: 5, unit: TimeUnit.SECOND },
+      { id: 10, unit: TimeUnit.SECOND },
+      { id: 15, unit: TimeUnit.SECOND },
+      { id: 30, unit: TimeUnit.SECOND },
+    ],
+  },
+  {
+    id: 10,
+    unit: TimeUnit.MINUTE,
+    linkage: [
+      { id: 5, unit: TimeUnit.SECOND },
+      { id: 10, unit: TimeUnit.SECOND },
+      { id: 15, unit: TimeUnit.SECOND },
+      { id: 30, unit: TimeUnit.SECOND },
+      { id: 1, unit: TimeUnit.MINUTE },
+    ],
+  },
+  {
+    id: 15,
+    unit: TimeUnit.MINUTE,
+    linkage: [
+      { id: 5, unit: TimeUnit.SECOND },
+      { id: 10, unit: TimeUnit.SECOND },
+      { id: 15, unit: TimeUnit.SECOND },
+      { id: 30, unit: TimeUnit.SECOND },
+      { id: 1, unit: TimeUnit.MINUTE },
+      { id: 2, unit: TimeUnit.MINUTE },
+    ],
+  },
+  {
+    id: 30,
+    unit: TimeUnit.MINUTE,
+    linkage: [
+      { id: 5, unit: TimeUnit.SECOND },
+      { id: 10, unit: TimeUnit.SECOND },
+      { id: 15, unit: TimeUnit.SECOND },
+      { id: 30, unit: TimeUnit.SECOND },
+      { id: 1, unit: TimeUnit.MINUTE },
+      { id: 2, unit: TimeUnit.MINUTE },
+    ],
+  },
+  {
+    id: 1,
+    unit: TimeUnit.HOUR,
+    linkage: [
+      { id: 10, unit: TimeUnit.SECOND },
+      { id: 15, unit: TimeUnit.SECOND },
+      { id: 30, unit: TimeUnit.SECOND },
+      { id: 1, unit: TimeUnit.MINUTE },
+      { id: 2, unit: TimeUnit.MINUTE },
+      { id: 5, unit: TimeUnit.MINUTE },
+    ],
+  },
+  {
+    id: 2,
+    unit: TimeUnit.HOUR,
+    linkage: [
+      { id: 15, unit: TimeUnit.SECOND },
+      { id: 30, unit: TimeUnit.SECOND },
+      { id: 1, unit: TimeUnit.MINUTE },
+      { id: 2, unit: TimeUnit.MINUTE },
+      { id: 5, unit: TimeUnit.MINUTE },
+      { id: 10, unit: TimeUnit.MINUTE },
+      { id: 15, unit: TimeUnit.MINUTE },
+    ],
+  },
+  {
+    id: 5,
+    unit: TimeUnit.HOUR,
+    linkage: [
+      { id: 1, unit: TimeUnit.MINUTE },
+      { id: 2, unit: TimeUnit.MINUTE },
+      { id: 5, unit: TimeUnit.MINUTE },
+      { id: 10, unit: TimeUnit.MINUTE },
+      { id: 15, unit: TimeUnit.MINUTE },
+      { id: 30, unit: TimeUnit.MINUTE },
+    ],
+  },
+  {
+    id: 10,
+    unit: TimeUnit.HOUR,
+    linkage: [
+      { id: 2, unit: TimeUnit.MINUTE },
+      { id: 5, unit: TimeUnit.MINUTE },
+      { id: 10, unit: TimeUnit.MINUTE },
+      { id: 15, unit: TimeUnit.MINUTE },
+      { id: 30, unit: TimeUnit.MINUTE },
+      { id: 1, unit: TimeUnit.HOUR },
+    ],
+  },
+  {
+    id: 12,
+    unit: TimeUnit.HOUR,
+    linkage: [
+      { id: 2, unit: TimeUnit.MINUTE },
+      { id: 5, unit: TimeUnit.MINUTE },
+      { id: 10, unit: TimeUnit.MINUTE },
+      { id: 15, unit: TimeUnit.MINUTE },
+      { id: 30, unit: TimeUnit.MINUTE },
+      { id: 1, unit: TimeUnit.HOUR },
+    ],
+  },
+  {
+    id: 1,
+    unit: TimeUnit.DAY,
+    linkage: [
+      { id: 5, unit: TimeUnit.MINUTE },
+      { id: 10, unit: TimeUnit.MINUTE },
+      { id: 15, unit: TimeUnit.MINUTE },
+      { id: 30, unit: TimeUnit.MINUTE },
+      { id: 1, unit: TimeUnit.HOUR },
+      { id: 2, unit: TimeUnit.HOUR },
+    ],
+  },
+  {
+    id: 7,
+    unit: TimeUnit.DAY,
+    linkage: [
+      { id: 30, unit: TimeUnit.MINUTE },
+      { id: 1, unit: TimeUnit.HOUR },
+      { id: 2, unit: TimeUnit.HOUR },
+      { id: 5, unit: TimeUnit.HOUR },
+      { id: 10, unit: TimeUnit.HOUR },
+      { id: 12, unit: TimeUnit.HOUR },
+      { id: 1, unit: TimeUnit.DAY },
+    ],
+  },
+  {
+    id: 30,
+    unit: TimeUnit.DAY,
+    linkage: [
+      { id: 2, unit: TimeUnit.HOUR },
+      { id: 5, unit: TimeUnit.HOUR },
+      { id: 10, unit: TimeUnit.HOUR },
+      { id: 12, unit: TimeUnit.HOUR },
+      { id: 1, unit: TimeUnit.DAY },
+    ],
+  },
+].map((item) => {
+  return {
+    value: item.id * unitConversion[item.unit],
+    label: item.id + unitMapping[item.unit],
+    linkage: item.linkage.map((item) => {
+      return {
+        value: item.id * unitConversion[item.unit],
+        label: item.id + unitMapping[item.unit],
+      };
+    }),
+  };
+});
+
+const rangeIntervalOption = [
+  {
+    id: 90,
+    unit: TimeUnit.DAY,
+    linkage: [
+      { id: 5, unit: TimeUnit.HOUR },
+      { id: 10, unit: TimeUnit.HOUR },
+      { id: 12, unit: TimeUnit.HOUR },
+      { id: 1, unit: TimeUnit.DAY },
+      { id: 7, unit: TimeUnit.DAY },
+    ],
+  },
+  {
+    id: 180,
+    unit: TimeUnit.DAY,
+    linkage: [
+      { id: 10, unit: TimeUnit.HOUR },
+      { id: 12, unit: TimeUnit.HOUR },
+      { id: 1, unit: TimeUnit.DAY },
+      { id: 7, unit: TimeUnit.DAY },
+    ],
+  },
+  {
+    id: 360,
+    unit: TimeUnit.DAY,
+    linkage: [
+      { id: 1, unit: TimeUnit.DAY },
+      { id: 7, unit: TimeUnit.DAY },
+      { id: 30, unit: TimeUnit.DAY },
+    ],
+  },
+].map((item) => {
+  return {
+    value: item.id * unitConversion[item.unit],
+    label: item.id + unitMapping[item.unit],
+    linkage: item.linkage.map((item) => {
+      return {
+        value: item.id * unitConversion[item.unit],
+        label: item.id + unitMapping[item.unit],
+      };
+    }),
+  };
+});
+
+/**
+ * @description
+ * @param {number} value
+ * @returns
+ */
+export function getPacketIntervalByValue(value: number) {
+  return intervalOption.find((item) => item.value === value)?.linkage || [];
+}
+
+export function getPacketIntervalByRange(
+  [start, end] = [null, null] as [Nullable<Moment>, Nullable<Moment>]
+) {
+  if (start && end) {
+    const value = end.diff(start, 'ms');
+    let options: { value: number; label: string }[] = [];
+    for (const item of [...intervalOption, ...rangeIntervalOption]) {
+      if (item.value <= value) continue;
+      if (item.value >= value) {
+        options = item.linkage;
+        break;
+      }
+    }
+    return options;
+  }
+  return [];
+}

+export { default as TimePeriodForm } from './TimePeriodForm.vue';
+export { useTimePeriodForm } from './useTimePeriodForm';

+import { nextTick, reactive, ref, unref, watch } from 'vue';
+import { FormActionType, FormProps } from '/@/components/Form';
+import { getDynamicProps } from '/@/utils';
+
+export function useTimePeriodForm(props: FormProps): [Fn, FormActionType] {
+  const method = reactive<Partial<FormActionType>>({} as any);
+  const isInitialize = ref(false);
+  async function register(instance: FormActionType) {
+    if (unref(isInitialize)) return;
+    await nextTick();
+    Object.assign(method, instance);
+    isInitialize.value = true;
+    watch(
+      () => props,
+      () => {
+        props && instance.setProps(getDynamicProps(props));
+      },
+      {
+        immediate: true,
+        deep: true,
+      }
+    );
+  }
+
+  return [register, method as FormActionType];
+}

@@ -36,11 +36,12 @@
       width="70%"
       :minHeight="400"
       :footer="null"
-      @cancel="cancelHistoryModal"
       :canFullscreen="false"
+      @cancel="handleCancelModal"
     >
-      <BasicForm @register="registerForm" />
-      <div v-show="isNull" ref="chartRef" :style="{ height: '600px', width }">
+      <TimePeriodForm @register="timePeriodRegister" />
+      <!-- <BasicForm @register="registerForm" /> -->
+      <div v-show="isNull" ref="chartRef" :style="{ height: '550px', width }">
         <Loading :loading="loading" :absolute="true" />
       </div>
       <Empty v-show="!isNull" />
@@ -49,17 +50,15 @@
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, ref, nextTick, unref, onMounted, Ref } from 'vue';
+  import { defineComponent, ref, nextTick, unref, onMounted, Ref, onUnmounted } from 'vue';
   import { useScript } from '/@/hooks/web/useScript';
   import { formSchema, columns } from './config.data';
   import { BasicTable, useTable } from '/@/components/Table';
   import { devicePage } from '/@/api/alarm/contact/alarmContact';
-  import { Tag, Empty } from 'ant-design-vue';
+  import { Tag, Empty, message } from 'ant-design-vue';
   import { DeviceState } from '/@/api/device/model/deviceModel';
   import { BAI_DU_MAP_URL } from '/@/utils/fnUtils';
   import { useModal, BasicModal } from '/@/components/Modal';
-  import { BasicForm, useForm } from '/@/components/Form';
-  import { schemas } from './config.data';
   import { useECharts } from '/@/hooks/web/useECharts';
   import {
     getDeviceHistoryInfo,
@@ -77,6 +76,11 @@
   import online from '/@/assets/images/online1.png';
   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 { defaultSchemas } from './cpns/TimePeriodForm/config';
+  import { QueryWay, SchemaFiled, AggregateDataEnum } from './cpns/TimePeriodForm/config';
+  import { formatToDateTime } from '/@/utils/dateUtil';
   export default defineComponent({
     name: 'BaiduMap',
     components: {
@@ -84,9 +88,9 @@
       Tag,
       Empty,
       BasicModal,
-      BasicForm,
       DeviceDetailDrawer,
       Loading,
+      TimePeriodForm,
     },
     props: {
       width: {
@@ -100,103 +104,17 @@
     },
     setup() {
       let entityId = '';
-      let keys = [];
       let globalRecord: any = {};
       const wrapRef = ref<HTMLDivElement | null>(null);
       const chartRef = ref<HTMLDivElement | null>(null);
+      const deviceAttrs = ref<string[]>([]);
       const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
       const isNull = ref(true);
       const { toPromise } = useScript({ src: BAI_DU_MAP_URL });
       const [registerDetailDrawer, { openDrawer }] = useDrawer();
       const [registerModal, { openModal }] = useModal();
       const loading = ref(false);
-      const [
-        registerForm,
-        { resetFields, getFieldsValue, setFieldsValue, validate, updateSchema },
-      ] = useForm({
-        labelWidth: 120,
-        schemas,
-        async submitFunc() {
-          // 表单验证
-          await validate();
-          let { endTs, interval, agg } = getFieldsValue();
-          if (!endTs || !keys.length) return;
-          // 数据收集
-          const dataArray: any[] = [];
-          const startTs = Date.now() - endTs;
-          endTs = Date.now();
-          // 发送请求
-          loading.value = true;
-          const res = await getDeviceHistoryInfo({
-            entityId,
-            keys: keys.join(),
-            startTs,
-            endTs,
-            interval,
-            agg,
-          });
-          // 判断数据对象是否为空
-          if (!Object.keys(res).length) {
-            isNull.value = false;
-            return;
-          } else {
-            isNull.value = true;
-          }
-          // 处理数据
-          for (const key in res) {
-            for (const item1 of res[key]) {
-              let { ts, value } = item1;
-              const time = moment(ts).format('YYYY-MM-DD HH:mm:ss');
-              value = Number(value).toFixed(2);
-              dataArray.push([time, value, key]);
-            }
-          }
-          const series: any = keys.map((item) => {
-            return {
-              name: item,
-              type: 'line',
-              // stack: 'Total',
-              data: dataArray.filter((item1) => item1[2] === item),
-            };
-          });
-          // 设置数据
-          setOptions({
-            tooltip: {
-              trigger: 'axis',
-            },
-            legend: {
-              data: keys,
-            },
-            grid: {
-              left: '3%',
-              right: '4%',
-              bottom: '3%',
-              containLabel: true,
-            },
-            dataZoom: [
-              {
-                type: 'inside',
-                start: 0,
-                end: 50,
-              },
-              {
-                start: 20,
-                end: 40,
-              },
-            ],
-            xAxis: {
-              type: 'time',
-              boundaryGap: false,
-            },
-            yAxis: {
-              type: 'value',
-              boundaryGap: [0, '100%'],
-            },
-            series,
-          });
-          loading.value = false;
-        },
-      });
+
       const [registerTable] = useTable({
         api: devicePage,
         columns,
@@ -231,7 +149,11 @@
         const wrapEl = unref(wrapRef);
         const map = new BMap.Map(wrapEl);
         // if (record.deviceInfo.address) {
-        keys = await getDeviceDataKeys(entityId);
+        // keys = await getDeviceDataKeys(entityId);
+        try {
+          deviceAttrs.value = (await getDeviceDataKeys(entityId)) || [];
+        } catch (error) {}
+
         const { name, organizationDTO, deviceState, deviceProfile } = record;
         const { longitude, latitude, address } = record.deviceInfo;
         //这里如果没有地理位置 最好设置一个默认位置 不然地图会全蓝
@@ -314,27 +236,81 @@
           tbDeviceId,
         });
       };
-      const openHistoryModal = async () => {
-        openModal(true);
-        // 收集参数
-        const dataArray: any[] = [];
-        const startTs = Date.now() - 86400000; //最近一天
-        const endTs = Date.now();
-        // 发送请求
-        if (!keys.length) {
-          isNull.value = false;
-          return;
+
+      const [timePeriodRegister, method] = useTimePeriodForm({
+        schemas: [...defaultSchemas, ...selectDeviceAttrSchema],
+        async submitFunc() {
+          // 表单验证
+          await method.validate();
+          const value = method.getFieldsValue();
+          const searchParams = getSearchParams(value);
+
+          if (!hasDeviceAttr()) return;
+          // 发送请求
+          loading.value = true;
+          const res = await getDeviceHistoryInfo(searchParams);
+          // 判断数据对象是否为空
+          if (!Object.keys(res).length) {
+            isNull.value = false;
+            return;
+          } else {
+            isNull.value = true;
+          }
+          setChartOptions(res, value.keys);
+          loading.value = false;
+        },
+      });
+
+      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 {
-          isNull.value = true;
+          return {
+            entityId,
+            keys: keys ? keys : unref(deviceAttrs).join(),
+            startTs: moment(startTs).valueOf(),
+            endTs: moment(endTs).valueOf(),
+            interval,
+            agg,
+            limit,
+          };
         }
+      }
+
+      const openHistoryModal = async () => {
+        openModal(true);
+
+        await nextTick();
+        method.updateSchema({
+          field: 'keys',
+          componentProps: {
+            options: unref(deviceAttrs).map((item) => ({ label: item, value: item })),
+          },
+        });
+
+        method.setFieldsValue({
+          [SchemaFiled.START_TS]: 1 * 24 * 60 * 60 * 1000,
+        });
+
+        if (!hasDeviceAttr()) return;
+
         const res = await getDeviceHistoryInfo({
           entityId,
-          keys: keys.join(),
-          startTs,
-          endTs,
-          interval: 7200000, //间隔两小时
-          agg: 'AVG',
+          keys: unref(deviceAttrs).join(),
+          startTs: Date.now() - 1 * 24 * 60 * 60 * 1000,
+          endTs: Date.now(),
+          agg: AggregateDataEnum.NONE,
         });
+
         // 判断对象是否为空
         if (!Object.keys(res).length) {
           isNull.value = false;
@@ -342,118 +318,74 @@
         } else {
           isNull.value = true;
         }
-        // 处理数据
-        for (const key in res) {
-          for (const item1 of res[key]) {
+        setChartOptions(res);
+      };
+      function hasDeviceAttr() {
+        if (!unref(deviceAttrs).length) {
+          isNull.value = false;
+          return false;
+        } else {
+          isNull.value = true;
+          return true;
+        }
+      }
+
+      function setChartOptions(data, keys?) {
+        const dataArray: any[] = [];
+        for (const key in data) {
+          for (const item1 of data[key]) {
             let { ts, value } = item1;
-            const time = moment(ts).format('YYYY-MM-DD HH:mm:ss');
+            const time = formatToDateTime(ts);
             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',
-            // stack: 'Total',
             data: dataArray.filter((item1) => item1[2] === item),
           };
         });
-        console.log(dataArray);
-        // 设置数据;
-        setOptions({
-          tooltip: {
-            trigger: 'axis',
-          },
-          legend: {
-            data: keys,
-          },
-          grid: {
-            left: '3%',
-            right: '4%',
-            bottom: '3%',
-            containLabel: true,
-          },
-          dataZoom: [
-            {
-              type: 'inside',
-              start: 0,
-              end: 50,
-            },
-            {
-              start: 0,
-              end: 20,
-            },
-          ],
-          xAxis: {
-            type: 'time',
-            boundaryGap: false,
-          },
-          yAxis: {
-            type: 'value',
-            boundaryGap: [0, '100%'],
-          },
-          series,
-        });
-        setFieldsValue({
-          endTs: 86400000,
-          interval: 7200000,
-          agg: 'AVG',
-        });
-      };
-      const cancelHistoryModal = () => {
-        resetFields();
-        updateSchema({
-          field: 'interval',
-          componentProps: {
-            placeholder: '请选择分组间隔',
-            options: [
-              {
-                label: '5分钟',
-                value: 300000,
-              },
-              {
-                label: '10分钟',
-                value: 600000,
-              },
-              {
-                label: '15分钟',
-                value: 900000,
-              },
-              {
-                label: '30分钟',
-                value: 1800000,
-              },
-              {
-                label: '1小时',
-                value: 3600000,
-              },
-              {
-                label: '2小时',
-                value: 7200000,
-              },
-            ],
-          },
+        // 设置数据
+        setOptions(eChartOptions(series, keys));
+      }
+
+      const handleCancelModal = () => {
+        method.setFieldsValue({
+          [SchemaFiled.WAY]: QueryWay.LATEST,
+          [SchemaFiled.KEYS]: null,
+          [SchemaFiled.DATE_RANGE]: [],
+          [SchemaFiled.INTERVAL]: null,
+          [SchemaFiled.LIMIT]: 7,
+          [SchemaFiled.AGG]: AggregateDataEnum.NONE,
         });
-        setOptions({});
       };
+
       onMounted(() => {
         initMap();
         (window as any).openDeviceInfoDrawer = openDeviceInfoDrawer;
         (window as any).openHistoryModal = openHistoryModal;
       });
+
+      onUnmounted(() => {
+        (window as any).openDeviceInfoDrawer = null;
+        (window as any).openHistoryModal = null;
+      });
+
       return {
         wrapRef,
         registerTable,
         deviceRowClick,
         DeviceState,
         registerModal,
-        registerForm,
         chartRef,
         isNull,
-        cancelHistoryModal,
         registerDetailDrawer,
         loading,
+        timePeriodRegister,
+        handleCancelModal,
       };
     },
   });