feat:

+import type { BasicColumn } from '/@/components/Table';
+import type { FormSchema } from '/@/components/Table';
+import { getOrganizationList } from '/@/api/system/system';
+import { copyTransFun } from '/@/utils/fnUtils';
+import { getDeviceDataKeys, getDeviceProfile } from '/@/api/alarm/position';
+import { EChartsOption } from 'echarts';
+
+export enum AggregateDataEnum {
+  MIN = 'MIN',
+  MAX = 'MAX',
+  AVG = 'AVG',
+  SUM = 'SUM',
+  COUNT = 'COUNT',
+  NONE = 'NONE',
+}
+export const formSchema: FormSchema[] = [
+  {
+    field: 'organizationId',
+    label: '',
+    component: 'ApiTreeSelect',
+    componentProps: {
+      placeholder: '请选择组织',
+      api: async () => {
+        const data = await getOrganizationList();
+        copyTransFun(data as any as any[]);
+        return data;
+      },
+    },
+  },
+  {
+    field: 'deviceProfileId',
+    label: '',
+    component: 'ApiSelect',
+    componentProps: {
+      api: getDeviceProfile,
+      placeholder: '请选择产品',
+      labelField: 'name',
+      valueField: 'tbProfileId',
+    },
+  },
+  {
+    field: 'name',
+    label: '',
+    component: 'Input',
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入设备名称',
+    },
+  },
+  {
+    field: 'deviceState',
+    label: '',
+    component: 'RadioGroup',
+    componentProps: {
+      size: 'small',
+      options: [
+        { label: '全部', value: null },
+        { label: '待激活', value: 'INACTIVE' },
+        { label: '在线', value: 'ONLINE' },
+        { label: '离线', value: 'OFFLINE' },
+      ],
+    },
+  },
+  {
+    field: 'alarmStatus',
+    label: '是否告警',
+    component: 'RadioGroup',
+    labelWidth: '85px',
+    componentProps: {
+      size: 'small',
+      options: [
+        { label: '是', value: 1 },
+        { label: '否', value: 0 },
+      ],
+    },
+  },
+];
+
+export const columns: BasicColumn[] = [
+  {
+    title: '名称',
+    dataIndex: 'name',
+    width: 120,
+    format: (_text: string, record: Recordable) => {
+      return record?.alias || record?.name;
+    },
+  },
+  {
+    title: '设备状态',
+    dataIndex: 'deviceState',
+    width: 80,
+    slots: { customRender: 'deviceState' },
+  },
+  {
+    title: '位置',
+    dataIndex: 'deviceInfo.address',
+    width: 120,
+  },
+  {
+    title: '告警状态',
+    dataIndex: 'alarmStatus',
+    width: 80,
+    slots: { customRender: 'alarmStatus' },
+  },
+];
+
+// 动态生成options
+function generateOptions(value: number) {
+  if (value === 3600000) {
+    return [
+      {
+        label: '10秒',
+        value: 10000,
+      },
+      {
+        label: '15秒',
+        value: 15000,
+      },
+      {
+        label: '30秒',
+        value: 30000,
+      },
+      {
+        label: '1分钟',
+        value: 60000,
+      },
+      {
+        label: '2分钟',
+        value: 120000,
+      },
+      {
+        label: '5分钟',
+        value: 300000,
+      },
+    ];
+  } else if (value === 7200000) {
+    return [
+      {
+        label: '15秒',
+        value: 15000,
+      },
+      {
+        label: '30秒',
+        value: 30000,
+      },
+      {
+        label: '1分钟',
+        value: 60000,
+      },
+      {
+        label: '2分钟',
+        value: 120000,
+      },
+      {
+        label: '5分钟',
+        value: 300000,
+      },
+      {
+        label: '10分钟',
+        value: 600000,
+      },
+      {
+        label: '15分钟',
+        value: 900000,
+      },
+    ];
+  } else if (value === 18000000) {
+    return [
+      {
+        label: '1分钟',
+        value: 60000,
+      },
+      {
+        label: '2分钟',
+        value: 120000,
+      },
+      {
+        label: '5分钟',
+        value: 300000,
+      },
+      {
+        label: '10分钟',
+        value: 600000,
+      },
+      {
+        label: '15分钟',
+        value: 900000,
+      },
+      {
+        label: '30分钟',
+        value: 1800000,
+      },
+    ];
+  } else if (value === 36000000) {
+    return [
+      {
+        label: '2分钟',
+        value: 120000,
+      },
+      {
+        label: '5分钟',
+        value: 300000,
+      },
+      {
+        label: '10分钟',
+        value: 600000,
+      },
+      {
+        label: '15分钟',
+        value: 900000,
+      },
+      {
+        label: '30分钟',
+        value: 1800000,
+      },
+      {
+        label: '1小时',
+        value: 3600000,
+      },
+    ];
+  } else if (value === 43200000) {
+    return [
+      {
+        label: '2分钟',
+        value: 120000,
+      },
+      {
+        label: '5分钟',
+        value: 300000,
+      },
+      {
+        label: '10分钟',
+        value: 600000,
+      },
+      {
+        label: '15分钟',
+        value: 900000,
+      },
+      {
+        label: '30分钟',
+        value: 1800000,
+      },
+      {
+        label: '1小时',
+        value: 3600000,
+      },
+    ];
+  } else if (value === 86400000) {
+    return [
+      {
+        label: '5分钟',
+        value: 300000,
+      },
+      {
+        label: '10分钟',
+        value: 600000,
+      },
+      {
+        label: '15分钟',
+        value: 900000,
+      },
+      {
+        label: '30分钟',
+        value: 1800000,
+      },
+      {
+        label: '1小时',
+        value: 3600000,
+      },
+      {
+        label: '2小时',
+        value: 7200000,
+      },
+    ];
+  } else if (value === 604800000) {
+    return [
+      {
+        label: '30分钟',
+        value: 1800000,
+      },
+      {
+        label: '1小时',
+        value: 3600000,
+      },
+      {
+        label: '2小时',
+        value: 7200000,
+      },
+      {
+        label: '5小时',
+        value: 18000000,
+      },
+      {
+        label: '10小时',
+        value: 36000000,
+      },
+      {
+        label: '12小时',
+        value: 43200000,
+      },
+      {
+        label: '1天',
+        value: 86400000,
+      },
+    ];
+  } else {
+    return [
+      {
+        label: '2小时',
+        value: 7200000,
+      },
+      {
+        label: '5小时',
+        value: 18000000,
+      },
+      {
+        label: '10小时',
+        value: 36000000,
+      },
+      {
+        label: '12小时',
+        value: 43200000,
+      },
+      {
+        label: '1天',
+        value: 86400000,
+      },
+    ];
+  }
+}
+export const schemas: FormSchema[] = [
+  {
+    field: 'endTs',
+    label: '最后数据',
+    component: 'Select',
+    required: true,
+    componentProps({ formModel, formActionType }) {
+      return {
+        onChange(value) {
+          const { updateSchema } = formActionType;
+          console.log(value);
+          formModel.interval = '';
+          updateSchema({
+            field: 'interval',
+            componentProps: {
+              placeholder: '请选择分组间隔',
+              options: generateOptions(value),
+            },
+          });
+        },
+        getPopupContainer: () => document.body,
+        options: [
+          {
+            label: '最近1小时',
+            value: 3600000,
+          },
+          {
+            label: '最近2小时',
+            value: 7200000,
+          },
+          {
+            label: '最近5小时',
+            value: 18000000,
+          },
+          {
+            label: '最近10小时',
+            value: 36000000,
+          },
+          {
+            label: '最近12小时',
+            value: 43200000,
+          },
+          {
+            label: '最近1天',
+            value: 86400000,
+          },
+          {
+            label: '最近7天',
+            value: 604800000,
+          },
+          {
+            label: '最近30天',
+            value: 2592000000,
+          },
+        ],
+      };
+    },
+  },
+  {
+    field: 'interval',
+    label: '分组间隔',
+    component: 'Select',
+    componentProps: {
+      placeholder: '请选择分组间隔',
+      getPopupContainer: () => document.body,
+      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,
+        },
+      ],
+    },
+  },
+  {
+    field: '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: '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: {
+      getPopupContainer: () => document.body,
+    },
+  },
+];
+
+export const eChartOptions = (series: EChartsOption['series'], keys: string[]): 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,
+  };
+};
+
+//百度地图设置个性化地图配置
+export const setMapStyleV2 = {
+  styleJson: [
+    {
+      featureType: 'land',
+      elementType: 'geometry',
+      stylers: {
+        visibility: 'on',
+        color: '#091220ff',
+      },
+    },
+    {
+      featureType: 'water',
+      elementType: 'geometry',
+      stylers: {
+        visibility: 'on',
+        color: '#113549ff',
+      },
+    },
+    {
+      featureType: 'green',
+      elementType: 'geometry',
+      stylers: {
+        visibility: 'on',
+        color: '#0e1b30ff',
+      },
+    },
+    {
+      featureType: 'building',
+      elementType: 'geometry',
+      stylers: {
+        visibility: 'on',
+      },
+    },
+    {
+      featureType: 'building',
+      elementType: 'geometry.topfill',
+      stylers: {
+        color: '#113549ff',
+      },
+    },
+    {
+      featureType: 'building',
+      elementType: 'geometry.sidefill',
+      stylers: {
+        color: '#143e56ff',
+      },
+    },
+    {
+      featureType: 'building',
+      elementType: 'geometry.stroke',
+      stylers: {
+        color: '#dadada00',
+      },
+    },
+    {
+      featureType: 'subwaystation',
+      elementType: 'geometry',
+      stylers: {
+        visibility: 'on',
+        color: '#113549B2',
+      },
+    },
+    {
+      featureType: 'education',
+      elementType: 'geometry',
+      stylers: {
+        visibility: 'on',
+        color: '#12223dff',
+      },
+    },
+    {
+      featureType: 'medical',
+      elementType: 'geometry',
+      stylers: {
+        visibility: 'on',
+        color: '#12223dff',
+      },
+    },
+    {
+      featureType: 'scenicspots',
+      elementType: 'geometry',
+      stylers: {
+        visibility: 'on',
+        color: '#12223dff',
+      },
+    },
+    {
+      featureType: 'highway',
+      elementType: 'geometry',
+      stylers: {
+        visibility: 'on',
+        weight: 4,
+      },
+    },
+    {
+      featureType: 'highway',
+      elementType: 'geometry.fill',
+      stylers: {
+        color: '#12223dff',
+      },
+    },
+    {
+      featureType: 'highway',
+      elementType: 'geometry.stroke',
+      stylers: {
+        color: '#fed66900',
+      },
+    },
+    {
+      featureType: 'highway',
+      elementType: 'labels',
+      stylers: {
+        visibility: 'on',
+      },
+    },
+    {
+      featureType: 'highway',
+      elementType: 'labels.text.fill',
+      stylers: {
+        color: '#12223dff',
+      },
+    },
+    {
+      featureType: 'highway',
+      elementType: 'labels.text.stroke',
+      stylers: {
+        color: '#ffffff00',
+      },
+    },
+    {
+      featureType: 'highway',
+      elementType: 'labels.icon',
+      stylers: {
+        visibility: 'on',
+      },
+    },
+    {
+      featureType: 'arterial',
+      elementType: 'geometry',
+      stylers: {
+        visibility: 'on',
+        weight: 2,
+      },
+    },
+    {
+      featureType: 'arterial',
+      elementType: 'geometry.fill',
+      stylers: {
+        color: '#12223dff',
+      },
+    },
+    {
+      featureType: 'arterial',
+      elementType: 'geometry.stroke',
+      stylers: {
+        color: '#ffeebb00',
+      },
+    },
+    {
+      featureType: 'arterial',
+      elementType: 'labels',
+      stylers: {
+        visibility: 'on',
+      },
+    },
+    {
+      featureType: 'arterial',
+      elementType: 'labels.text.fill',
+      stylers: {
+        color: '#2dc4bbff',
+      },
+    },
+    {
+      featureType: 'arterial',
+      elementType: 'labels.text.stroke',
+      stylers: {
+        color: '#ffffff00',
+      },
+    },
+    {
+      featureType: 'local',
+      elementType: 'geometry',
+      stylers: {
+        visibility: 'on',
+        weight: 1,
+      },
+    },
+    {
+      featureType: 'local',
+      elementType: 'geometry.fill',
+      stylers: {
+        color: '#12223dff',
+      },
+    },
+    {
+      featureType: 'local',
+      elementType: 'geometry.stroke',
+      stylers: {
+        color: '#ffffff00',
+      },
+    },
+    {
+      featureType: 'local',
+      elementType: 'labels',
+      stylers: {
+        visibility: 'on',
+      },
+    },
+    {
+      featureType: 'local',
+      elementType: 'labels.text.fill',
+      stylers: {
+        color: '#979c9aff',
+      },
+    },
+    {
+      featureType: 'local',
+      elementType: 'labels.text.stroke',
+      stylers: {
+        color: '#ffffffff',
+      },
+    },
+    {
+      featureType: 'railway',
+      elementType: 'geometry',
+      stylers: {
+        visibility: 'off',
+      },
+    },
+    {
+      featureType: 'subway',
+      elementType: 'geometry',
+      stylers: {
+        visibility: 'off',
+        weight: 1,
+      },
+    },
+    {
+      featureType: 'subway',
+      elementType: 'geometry.fill',
+      stylers: {
+        color: '#d8d8d8ff',
+      },
+    },
+    {
+      featureType: 'subway',
+      elementType: 'geometry.stroke',
+      stylers: {
+        color: '#ffffff00',
+      },
+    },
+    {
+      featureType: 'subway',
+      elementType: 'labels',
+      stylers: {
+        visibility: 'on',
+      },
+    },
+    {
+      featureType: 'subway',
+      elementType: 'labels.text.fill',
+      stylers: {
+        color: '#979c9aff',
+      },
+    },
+    {
+      featureType: 'subway',
+      elementType: 'labels.text.stroke',
+      stylers: {
+        color: '#ffffffff',
+      },
+    },
+    {
+      featureType: 'continent',
+      elementType: 'labels',
+      stylers: {
+        visibility: 'on',
+      },
+    },
+    {
+      featureType: 'continent',
+      elementType: 'labels.icon',
+      stylers: {
+        visibility: 'on',
+      },
+    },
+    {
+      featureType: 'continent',
+      elementType: 'labels.text.fill',
+      stylers: {
+        color: '#2dc4bbff',
+      },
+    },
+    {
+      featureType: 'continent',
+      elementType: 'labels.text.stroke',
+      stylers: {
+        color: '#ffffff00',
+      },
+    },
+    {
+      featureType: 'city',
+      elementType: 'labels.icon',
+      stylers: {
+        visibility: 'off',
+      },
+    },
+    {
+      featureType: 'city',
+      elementType: 'labels',
+      stylers: {
+        visibility: 'on',
+      },
+    },
+    {
+      featureType: 'city',
+      elementType: 'labels.text.fill',
+      stylers: {
+        color: '#2dc4bbff',
+      },
+    },
+    {
+      featureType: 'city',
+      elementType: 'labels.text.stroke',
+      stylers: {
+        color: '#ffffff00',
+      },
+    },
+    {
+      featureType: 'town',
+      elementType: 'labels.icon',
+      stylers: {
+        visibility: 'on',
+      },
+    },
+    {
+      featureType: 'town',
+      elementType: 'labels',
+      stylers: {
+        visibility: 'off',
+      },
+    },
+    {
+      featureType: 'town',
+      elementType: 'labels.text.fill',
+      stylers: {
+        color: '#454d50ff',
+      },
+    },
+    {
+      featureType: 'town',
+      elementType: 'labels.text.stroke',
+      stylers: {
+        color: '#ffffffff',
+      },
+    },
+    {
+      featureType: 'road',
+      elementType: 'geometry.fill',
+      stylers: {
+        color: '#12223dff',
+      },
+    },
+    {
+      featureType: 'poilabel',
+      elementType: 'labels',
+      stylers: {
+        visibility: 'on',
+      },
+    },
+    {
+      featureType: 'districtlabel',
+      elementType: 'labels',
+      stylers: {
+        visibility: 'off',
+      },
+    },
+    {
+      featureType: 'road',
+      elementType: 'geometry',
+      stylers: {
+        visibility: 'on',
+      },
+    },
+    {
+      featureType: 'road',
+      elementType: 'labels',
+      stylers: {
+        visibility: 'off',
+      },
+    },
+    {
+      featureType: 'road',
+      elementType: 'geometry.stroke',
+      stylers: {
+        color: '#ffffff00',
+      },
+    },
+    {
+      featureType: 'district',
+      elementType: 'labels',
+      stylers: {
+        visibility: 'on',
+      },
+    },
+    {
+      featureType: 'poilabel',
+      elementType: 'labels.icon',
+      stylers: {
+        visibility: 'off',
+      },
+    },
+    {
+      featureType: 'poilabel',
+      elementType: 'labels.text.fill',
+      stylers: {
+        color: '#2dc4bbff',
+      },
+    },
+    {
+      featureType: 'poilabel',
+      elementType: 'labels.text.stroke',
+      stylers: {
+        color: '#ffffff00',
+      },
+    },
+    {
+      featureType: 'manmade',
+      elementType: 'geometry',
+      stylers: {
+        color: '#12223dff',
+      },
+    },
+    {
+      featureType: 'districtlabel',
+      elementType: 'labels.text.stroke',
+      stylers: {
+        color: '#ffffffff',
+      },
+    },
+    {
+      featureType: 'entertainment',
+      elementType: 'geometry',
+      stylers: {
+        color: '#12223dff',
+      },
+    },
+    {
+      featureType: 'shopping',
+      elementType: 'geometry',
+      stylers: {
+        color: '#12223dff',
+      },
+    },
+    {
+      featureType: 'nationalway',
+      stylers: {
+        curZoomRegionId: '0',
+        curZoomRegion: '6,10',
+        level: '6',
+      },
+    },
+    {
+      featureType: 'nationalway',
+      stylers: {
+        curZoomRegionId: '0',
+        curZoomRegion: '6,10',
+        level: '7',
+      },
+    },
+    {
+      featureType: 'nationalway',
+      stylers: {
+        curZoomRegionId: '0',
+        curZoomRegion: '6,10',
+        level: '8',
+      },
+    },
+    {
+      featureType: 'nationalway',
+      stylers: {
+        curZoomRegionId: '0',
+        curZoomRegion: '6,10',
+        level: '9',
+      },
+    },
+    {
+      featureType: 'nationalway',
+      stylers: {
+        curZoomRegionId: '0',
+        curZoomRegion: '6,10',
+        level: '10',
+      },
+    },
+    {
+      featureType: 'nationalway',
+      elementType: 'geometry',
+      stylers: {
+        visibility: 'off',
+        curZoomRegionId: '0',
+        curZoomRegion: '6,10',
+        level: '6',
+      },
+    },
+    {
+      featureType: 'nationalway',
+      elementType: 'geometry',
+      stylers: {
+        visibility: 'off',
+        curZoomRegionId: '0',
+        curZoomRegion: '6,10',
+        level: '7',
+      },
+    },
+    {
+      featureType: 'nationalway',
+      elementType: 'geometry',
+      stylers: {
+        visibility: 'off',
+        curZoomRegionId: '0',
+        curZoomRegion: '6,10',
+        level: '8',
+      },
+    },
+    {
+      featureType: 'nationalway',
+      elementType: 'geometry',
+      stylers: {
+        visibility: 'off',
+        curZoomRegionId: '0',
+        curZoomRegion: '6,10',
+        level: '9',
+      },
+    },
+    {
+      featureType: 'nationalway',
+      elementType: 'geometry',
+      stylers: {
+        visibility: 'off',
+        curZoomRegionId: '0',
+        curZoomRegion: '6,10',
+        level: '10',
+      },
+    },
+    {
+      featureType: 'nationalway',
+      elementType: 'labels',
+      stylers: {
+        visibility: 'off',
+        curZoomRegionId: '0',
+        curZoomRegion: '6,10',
+        level: '6',
+      },
+    },
+    {
+      featureType: 'nationalway',
+      elementType: 'labels',
+      stylers: {
+        visibility: 'off',
+        curZoomRegionId: '0',
+        curZoomRegion: '6,10',
+        level: '7',
+      },
+    },
+    {
+      featureType: 'nationalway',
+      elementType: 'labels',
+      stylers: {
+        visibility: 'off',
+        curZoomRegionId: '0',
+        curZoomRegion: '6,10',
+        level: '8',
+      },
+    },
+    {
+      featureType: 'nationalway',
+      elementType: 'labels',
+      stylers: {
+        visibility: 'off',
+        curZoomRegionId: '0',
+        curZoomRegion: '6,10',
+        level: '9',
+      },
+    },
+    {
+      featureType: 'nationalway',
+      elementType: 'labels',
+      stylers: {
+        visibility: 'off',
+        curZoomRegionId: '0',
+        curZoomRegion: '6,10',
+        level: '10',
+      },
+    },
+    {
+      featureType: 'cityhighway',
+      stylers: {
+        curZoomRegionId: '0',
+        curZoomRegion: '6,9',
+        level: '6',
+      },
+    },
+    {
+      featureType: 'cityhighway',
+      stylers: {
+        curZoomRegionId: '0',
+        curZoomRegion: '6,9',
+        level: '7',
+      },
+    },
+    {
+      featureType: 'cityhighway',
+      stylers: {
+        curZoomRegionId: '0',
+        curZoomRegion: '6,9',
+        level: '8',
+      },
+    },
+    {
+      featureType: 'cityhighway',
+      stylers: {
+        curZoomRegionId: '0',
+        curZoomRegion: '6,9',
+        level: '9',
+      },
+    },
+    {
+      featureType: 'cityhighway',
+      elementType: 'geometry',
+      stylers: {
+        visibility: 'off',
+        curZoomRegionId: '0',
+        curZoomRegion: '6,9',
+        level: '6',
+      },
+    },
+    {
+      featureType: 'cityhighway',
+      elementType: 'geometry',
+      stylers: {
+        visibility: 'off',
+        curZoomRegionId: '0',
+        curZoomRegion: '6,9',
+        level: '7',
+      },
+    },
+    {
+      featureType: 'cityhighway',
+      elementType: 'geometry',
+      stylers: {
+        visibility: 'off',
+        curZoomRegionId: '0',
+        curZoomRegion: '6,9',
+        level: '8',
+      },
+    },
+    {
+      featureType: 'cityhighway',
+      elementType: 'geometry',
+      stylers: {
+        visibility: 'off',
+        curZoomRegionId: '0',
+        curZoomRegion: '6,9',
+        level: '9',
+      },
+    },
+    {
+      featureType: 'cityhighway',
+      elementType: 'labels',
+      stylers: {
+        visibility: 'off',
+        curZoomRegionId: '0',
+        curZoomRegion: '6,9',
+        level: '6',
+      },
+    },
+    {
+      featureType: 'cityhighway',
+      elementType: 'labels',
+      stylers: {
+        visibility: 'off',
+        curZoomRegionId: '0',
+        curZoomRegion: '6,9',
+        level: '7',
+      },
+    },
+    {
+      featureType: 'cityhighway',
+      elementType: 'labels',
+      stylers: {
+        visibility: 'off',
+        curZoomRegionId: '0',
+        curZoomRegion: '6,9',
+        level: '8',
+      },
+    },
+    {
+      featureType: 'cityhighway',
+      elementType: 'labels',
+      stylers: {
+        visibility: 'off',
+        curZoomRegionId: '0',
+        curZoomRegion: '6,9',
+        level: '9',
+      },
+    },
+    {
+      featureType: 'subwaylabel',
+      elementType: 'labels',
+      stylers: {
+        visibility: 'off',
+      },
+    },
+    {
+      featureType: 'subwaylabel',
+      elementType: 'labels.icon',
+      stylers: {
+        visibility: 'off',
+      },
+    },
+    {
+      featureType: 'tertiarywaysign',
+      elementType: 'labels',
+      stylers: {
+        visibility: 'off',
+      },
+    },
+    {
+      featureType: 'tertiarywaysign',
+      elementType: 'labels.icon',
+      stylers: {
+        visibility: 'off',
+      },
+    },
+    {
+      featureType: 'provincialwaysign',
+      elementType: 'labels',
+      stylers: {
+        visibility: 'off',
+      },
+    },
+    {
+      featureType: 'provincialwaysign',
+      elementType: 'labels.icon',
+      stylers: {
+        visibility: 'off',
+      },
+    },
+    {
+      featureType: 'nationalwaysign',
+      elementType: 'labels',
+      stylers: {
+        visibility: 'off',
+      },
+    },
+    {
+      featureType: 'nationalwaysign',
+      elementType: 'labels.icon',
+      stylers: {
+        visibility: 'off',
+      },
+    },
+    {
+      featureType: 'highwaysign',
+      elementType: 'labels',
+      stylers: {
+        visibility: 'off',
+      },
+    },
+    {
+      featureType: 'highwaysign',
+      elementType: 'labels.icon',
+      stylers: {
+        visibility: 'off',
+      },
+    },
+    {
+      featureType: 'village',
+      elementType: 'labels',
+      stylers: {
+        visibility: 'off',
+      },
+    },
+    {
+      featureType: 'district',
+      elementType: 'labels.text',
+      stylers: {
+        fontsize: 20,
+      },
+    },
+    {
+      featureType: 'district',
+      elementType: 'labels.text.fill',
+      stylers: {
+        color: '#2dc4bbff',
+      },
+    },
+    {
+      featureType: 'district',
+      elementType: 'labels.text.stroke',
+      stylers: {
+        color: '#ffffff00',
+      },
+    },
+    {
+      featureType: 'country',
+      elementType: 'labels.text.fill',
+      stylers: {
+        color: '#2dc4bbff',
+      },
+    },
+    {
+      featureType: 'country',
+      elementType: 'labels.text.stroke',
+      stylers: {
+        color: '#ffffff00',
+      },
+    },
+    {
+      featureType: 'water',
+      elementType: 'labels.text.fill',
+      stylers: {
+        color: '#2dc4bbff',
+      },
+    },
+    {
+      featureType: 'water',
+      elementType: 'labels.text.stroke',
+      stylers: {
+        color: '#ffffff00',
+      },
+    },
+    {
+      featureType: 'cityhighway',
+      elementType: 'geometry.fill',
+      stylers: {
+        color: '#12223dff',
+      },
+    },
+    {
+      featureType: 'cityhighway',
+      elementType: 'geometry.stroke',
+      stylers: {
+        color: '#ffffff00',
+      },
+    },
+    {
+      featureType: 'tertiaryway',
+      elementType: 'geometry.fill',
+      stylers: {
+        color: '#12223dff',
+      },
+    },
+    {
+      featureType: 'tertiaryway',
+      elementType: 'geometry.stroke',
+      stylers: {
+        color: '#ffffff10',
+      },
+    },
+    {
+      featureType: 'provincialway',
+      elementType: 'geometry.fill',
+      stylers: {
+        color: '#12223dff',
+      },
+    },
+    {
+      featureType: 'provincialway',
+      elementType: 'geometry.stroke',
+      stylers: {
+        color: '#ffffff00',
+      },
+    },
+    {
+      featureType: 'nationalway',
+      elementType: 'geometry.fill',
+      stylers: {
+        color: '#12223dff',
+      },
+    },
+    {
+      featureType: 'nationalway',
+      elementType: 'geometry.stroke',
+      stylers: {
+        color: '#ffffff00',
+      },
+    },
+    {
+      featureType: 'highway',
+      elementType: 'labels.text',
+      stylers: {
+        fontsize: 20,
+      },
+    },
+    {
+      featureType: 'nationalway',
+      elementType: 'labels.text.stroke',
+      stylers: {
+        color: '#ffffff00',
+      },
+    },
+    {
+      featureType: 'nationalway',
+      elementType: 'labels.text.fill',
+      stylers: {
+        color: '#12223dff',
+      },
+    },
+    {
+      featureType: 'nationalway',
+      elementType: 'labels.text',
+      stylers: {
+        fontsize: 20,
+      },
+    },
+    {
+      featureType: 'provincialway',
+      elementType: 'labels.text.fill',
+      stylers: {
+        color: '#12223dff',
+      },
+    },
+    {
+      featureType: 'provincialway',
+      elementType: 'labels.text.stroke',
+      stylers: {
+        color: '#ffffff00',
+      },
+    },
+    {
+      featureType: 'provincialway',
+      elementType: 'labels.text',
+      stylers: {
+        fontsize: 20,
+      },
+    },
+    {
+      featureType: 'cityhighway',
+      elementType: 'labels.text.fill',
+      stylers: {
+        color: '#12223dff',
+      },
+    },
+    {
+      featureType: 'cityhighway',
+      elementType: 'labels.text',
+      stylers: {
+        fontsize: 20,
+      },
+    },
+    {
+      featureType: 'cityhighway',
+      elementType: 'labels.text.stroke',
+      stylers: {
+        color: '#ffffff00',
+      },
+    },
+    {
+      featureType: 'estate',
+      elementType: 'geometry',
+      stylers: {
+        color: '#12223dff',
+      },
+    },
+    {
+      featureType: 'tertiaryway',
+      elementType: 'labels.text.fill',
+      stylers: {
+        color: '#2dc4bbff',
+      },
+    },
+    {
+      featureType: 'tertiaryway',
+      elementType: 'labels.text.stroke',
+      stylers: {
+        color: '#ffffff00',
+      },
+    },
+    {
+      featureType: 'fourlevelway',
+      elementType: 'labels.text.fill',
+      stylers: {
+        color: '#2dc4bbff',
+      },
+    },
+    {
+      featureType: 'fourlevelway',
+      elementType: 'labels.text.stroke',
+      stylers: {
+        color: '#ffffff00',
+      },
+    },
+    {
+      featureType: 'scenicspotsway',
+      elementType: 'geometry.fill',
+      stylers: {
+        color: '#12223dff',
+      },
+    },
+    {
+      featureType: 'scenicspotsway',
+      elementType: 'geometry.stroke',
+      stylers: {
+        color: '#ffffff00',
+      },
+    },
+    {
+      featureType: 'universityway',
+      elementType: 'geometry.fill',
+      stylers: {
+        color: '#12223dff',
+      },
+    },
+    {
+      featureType: 'universityway',
+      elementType: 'geometry.stroke',
+      stylers: {
+        color: '#ffffff00',
+      },
+    },
+    {
+      featureType: 'vacationway',
+      elementType: 'geometry.fill',
+      stylers: {
+        color: '#12223dff',
+      },
+    },
+    {
+      featureType: 'vacationway',
+      elementType: 'geometry.stroke',
+      stylers: {
+        color: '#ffffff00',
+      },
+    },
+    {
+      featureType: 'fourlevelway',
+      elementType: 'geometry',
+      stylers: {
+        visibility: 'on',
+      },
+    },
+    {
+      featureType: 'fourlevelway',
+      elementType: 'geometry.fill',
+      stylers: {
+        color: '#12223dff',
+      },
+    },
+    {
+      featureType: 'fourlevelway',
+      elementType: 'geometry.stroke',
+      stylers: {
+        color: '#ffffff00',
+      },
+    },
+    {
+      featureType: 'transportationlabel',
+      elementType: 'labels',
+      stylers: {
+        visibility: 'on',
+      },
+    },
+    {
+      featureType: 'transportationlabel',
+      elementType: 'labels.icon',
+      stylers: {
+        visibility: 'off',
+      },
+    },
+    {
+      featureType: 'transportationlabel',
+      elementType: 'labels.text.fill',
+      stylers: {
+        color: '#2dc4bbff',
+      },
+    },
+    {
+      featureType: 'transportationlabel',
+      elementType: 'labels.text.stroke',
+      stylers: {
+        color: '#ffffff00',
+      },
+    },
+    {
+      featureType: 'educationlabel',
+      elementType: 'labels',
+      stylers: {
+        visibility: 'on',
+      },
+    },
+    {
+      featureType: 'educationlabel',
+      elementType: 'labels.icon',
+      stylers: {
+        visibility: 'off',
+      },
+    },
+    {
+      featureType: 'educationlabel',
+      elementType: 'labels.text.fill',
+      stylers: {
+        color: '#2dc4bbff',
+      },
+    },
+    {
+      featureType: 'educationlabel',
+      elementType: 'labels.text.stroke',
+      stylers: {
+        color: '#ffffff00',
+      },
+    },
+    {
+      featureType: 'transportation',
+      elementType: 'geometry',
+      stylers: {
+        color: '#113549ff',
+      },
+    },
+    {
+      featureType: 'airportlabel',
+      elementType: 'labels.text.fill',
+      stylers: {
+        color: '#2dc4bbff',
+      },
+    },
+    {
+      featureType: 'airportlabel',
+      elementType: 'labels.text.stroke',
+      stylers: {
+        color: '#ffffff00',
+      },
+    },
+    {
+      featureType: 'scenicspotslabel',
+      elementType: 'labels.text.fill',
+      stylers: {
+        color: '#2dc4bbff',
+      },
+    },
+    {
+      featureType: 'scenicspotslabel',
+      elementType: 'labels.text.stroke',
+      stylers: {
+        color: '#ffffff00',
+      },
+    },
+    {
+      featureType: 'medicallabel',
+      elementType: 'labels.text.fill',
+      stylers: {
+        color: '#2dc4bbff',
+      },
+    },
+    {
+      featureType: 'medicallabel',
+      elementType: 'labels.text.stroke',
+      stylers: {
+        color: '#ffffff00',
+      },
+    },
+    {
+      featureType: 'medicallabel',
+      elementType: 'labels.icon',
+      stylers: {
+        visibility: 'off',
+      },
+    },
+    {
+      featureType: 'scenicspotslabel',
+      elementType: 'labels.icon',
+      stylers: {
+        visibility: 'off',
+      },
+    },
+    {
+      featureType: 'airportlabel',
+      elementType: 'labels.icon',
+      stylers: {
+        visibility: 'off',
+      },
+    },
+    {
+      featureType: 'entertainmentlabel',
+      elementType: 'labels.icon',
+      stylers: {
+        visibility: 'off',
+      },
+    },
+    {
+      featureType: 'entertainmentlabel',
+      elementType: 'labels.text.fill',
+      stylers: {
+        color: '#2dc4bbff',
+      },
+    },
+    {
+      featureType: 'entertainmentlabel',
+      elementType: 'labels.text.stroke',
+      stylers: {
+        color: '#ffffff00',
+      },
+    },
+    {
+      featureType: 'estatelabel',
+      elementType: 'labels.icon',
+      stylers: {
+        visibility: 'off',
+      },
+    },
+    {
+      featureType: 'estatelabel',
+      elementType: 'labels.text.fill',
+      stylers: {
+        color: '#2dc4bbff',
+      },
+    },
+    {
+      featureType: 'estatelabel',
+      elementType: 'labels.text.stroke',
+      stylers: {
+        color: '#ffffff00',
+      },
+    },
+    {
+      featureType: 'businesstowerlabel',
+      elementType: 'labels.text.fill',
+      stylers: {
+        color: '#2dc4bbff',
+      },
+    },
+    {
+      featureType: 'businesstowerlabel',
+      elementType: 'labels.text.stroke',
+      stylers: {
+        color: '#ffffff00',
+      },
+    },
+    {
+      featureType: 'businesstowerlabel',
+      elementType: 'labels.icon',
+      stylers: {
+        visibility: 'off',
+      },
+    },
+    {
+      featureType: 'companylabel',
+      elementType: 'labels.text.fill',
+      stylers: {
+        color: '#2dc4bbff',
+      },
+    },
+    {
+      featureType: 'companylabel',
+      elementType: 'labels.text.stroke',
+      stylers: {
+        color: '#ffffff00',
+      },
+    },
+    {
+      featureType: 'companylabel',
+      elementType: 'labels.icon',
+      stylers: {
+        visibility: 'off',
+      },
+    },
+    {
+      featureType: 'governmentlabel',
+      elementType: 'labels.icon',
+      stylers: {
+        visibility: 'off',
+      },
+    },
+    {
+      featureType: 'governmentlabel',
+      elementType: 'labels.text.fill',
+      stylers: {
+        color: '#2dc4bbff',
+      },
+    },
+    {
+      featureType: 'governmentlabel',
+      elementType: 'labels.text.stroke',
+      stylers: {
+        color: '#ffffff00',
+      },
+    },
+    {
+      featureType: 'restaurantlabel',
+      elementType: 'labels.text.fill',
+      stylers: {
+        color: '#2dc4bbff',
+      },
+    },
+    {
+      featureType: 'restaurantlabel',
+      elementType: 'labels.text.stroke',
+      stylers: {
+        color: '#ffffff00',
+      },
+    },
+    {
+      featureType: 'restaurantlabel',
+      elementType: 'labels.icon',
+      stylers: {
+        visibility: 'off',
+      },
+    },
+    {
+      featureType: 'hotellabel',
+      elementType: 'labels.icon',
+      stylers: {
+        visibility: 'off',
+      },
+    },
+    {
+      featureType: 'hotellabel',
+      elementType: 'labels.text.fill',
+      stylers: {
+        color: '#2dc4bbff',
+      },
+    },
+    {
+      featureType: 'hotellabel',
+      elementType: 'labels.text.stroke',
+      stylers: {
+        color: '#ffffff00',
+      },
+    },
+    {
+      featureType: 'shoppinglabel',
+      elementType: 'labels.text.fill',
+      stylers: {
+        color: '#2dc4bbff',
+      },
+    },
+    {
+      featureType: 'shoppinglabel',
+      elementType: 'labels.text.stroke',
+      stylers: {
+        color: '#ffffff00',
+      },
+    },
+    {
+      featureType: 'shoppinglabel',
+      elementType: 'labels.icon',
+      stylers: {
+        visibility: 'off',
+      },
+    },
+    {
+      featureType: 'lifeservicelabel',
+      elementType: 'labels.text.fill',
+      stylers: {
+        color: '#2dc4bbff',
+      },
+    },
+    {
+      featureType: 'lifeservicelabel',
+      elementType: 'labels.text.stroke',
+      stylers: {
+        color: '#ffffff00',
+      },
+    },
+    {
+      featureType: 'lifeservicelabel',
+      elementType: 'labels.icon',
+      stylers: {
+        visibility: 'off',
+      },
+    },
+    {
+      featureType: 'carservicelabel',
+      elementType: 'labels.text.fill',
+      stylers: {
+        color: '#2dc4bbff',
+      },
+    },
+    {
+      featureType: 'carservicelabel',
+      elementType: 'labels.text.stroke',
+      stylers: {
+        color: '#ffffff00',
+      },
+    },
+    {
+      featureType: 'carservicelabel',
+      elementType: 'labels.icon',
+      stylers: {
+        visibility: 'off',
+      },
+    },
+    {
+      featureType: 'financelabel',
+      elementType: 'labels.text.fill',
+      stylers: {
+        color: '#2dc4bbff',
+      },
+    },
+    {
+      featureType: 'financelabel',
+      elementType: 'labels.text.stroke',
+      stylers: {
+        color: '#ffffff00',
+      },
+    },
+    {
+      featureType: 'financelabel',
+      elementType: 'labels.icon',
+      stylers: {
+        visibility: 'off',
+      },
+    },
+    {
+      featureType: 'otherlabel',
+      elementType: 'labels.text.fill',
+      stylers: {
+        color: '#2dc4bbff',
+      },
+    },
+    {
+      featureType: 'otherlabel',
+      elementType: 'labels.text.stroke',
+      stylers: {
+        color: '#ffffff00',
+      },
+    },
+    {
+      featureType: 'otherlabel',
+      elementType: 'labels.icon',
+      stylers: {
+        visibility: 'off',
+      },
+    },
+    {
+      featureType: 'manmade',
+      elementType: 'labels.text.fill',
+      stylers: {
+        color: '#2dc4bbff',
+      },
+    },
+    {
+      featureType: 'manmade',
+      elementType: 'labels.text.stroke',
+      stylers: {
+        color: '#ffffff00',
+      },
+    },
+    {
+      featureType: 'transportation',
+      elementType: 'labels.text.fill',
+      stylers: {
+        color: '#2dc4bbff',
+      },
+    },
+    {
+      featureType: 'transportation',
+      elementType: 'labels.text.stroke',
+      stylers: {
+        color: '#ffffff00',
+      },
+    },
+    {
+      featureType: 'education',
+      elementType: 'labels.text.fill',
+      stylers: {
+        color: '#2dc4bbff',
+      },
+    },
+    {
+      featureType: 'education',
+      elementType: 'labels.text.stroke',
+      stylers: {
+        color: '#ffffff00',
+      },
+    },
+    {
+      featureType: 'medical',
+      elementType: 'labels.text.fill',
+      stylers: {
+        color: '#2dc4bbff',
+      },
+    },
+    {
+      featureType: 'medical',
+      elementType: 'labels.text.stroke',
+      stylers: {
+        color: '#ffffff00',
+      },
+    },
+    {
+      featureType: 'scenicspots',
+      elementType: 'labels.text.fill',
+      stylers: {
+        color: '#2dc4bbff',
+      },
+    },
+    {
+      featureType: 'scenicspots',
+      elementType: 'labels.text.stroke',
+      stylers: {
+        color: '#ffffff00',
+      },
+    },
+  ],
+};

+import moment, { Moment } from 'moment';
+import { getPacketIntervalByRange, getPacketIntervalByValue } from './helper';
+import { FormSchema } from '/@/components/Form';
+import { ColEx } from '/@/components/Form/src/types';
+import { useGridLayout } from '/@/hooks/component/useGridLayout';
+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.DATE_RANGE,
+    label: '时间段',
+    component: 'RangePicker',
+    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,
+  },
+  {
+    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',
+        },
+      ];
+    },
+    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',
+    // defaultValue: 7,
+    ifShow({ values }) {
+      return values[SchemaFiled.AGG] === AggregateDataEnum.NONE;
+    },
+    helpMessage: ['根据查询条件，查出的数据条数不超过这个值'],
+    componentProps() {
+      return {
+        max: 50000,
+        min: 7,
+        getPopupContainer: () => document.body,
+      };
+    },
+  },
+];

+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 [];
+}

@@ -28,6 +28,14 @@
               <span>~</span>
               <span>~</span>
               <a-input style="width: 6vw" placeholder="请输入" v-model:value="item.date2" />
               <a-input style="width: 6vw" placeholder="请输入" v-model:value="item.date2" />
             </div>
             </div>
+            <div v-if="item.key === 'date_range'">
+              <a-checkbox
+                style="position: relative; left: 0"
+                @change="onHandleCheck"
+                v-model:checked="isDateRange"
+                >更多选项</a-checkbox
+              >
+            </div>
             <div v-else>
             <div v-else>
               <a-input
               <a-input
                 :disabled="item.editDisabled"
                 :disabled="item.editDisabled"
@@ -53,6 +61,18 @@
       </tbody>
       </tbody>
     </table>
     </table>
   </div>
   </div>
+  <BasicModal
+    @register="registerModal"
+    title="历史数据"
+    width="70%"
+    :minHeight="400"
+    :footer="null"
+    wrap-class-name="history-trend-model"
+    :canFullscreen="false"
+    @cancel="handleCancelModal"
+  >
+    <TimePeriodForm @register="timePeriodRegister" />
+  </BasicModal>
 </template>
 </template>
 <script lang="ts" setup name="editCellTable">
 <script lang="ts" setup name="editCellTable">
   import { reactive, ref, onMounted, nextTick } from 'vue';
   import { reactive, ref, onMounted, nextTick } from 'vue';
@@ -61,6 +81,11 @@
   import { PlusOutlined, MinusOutlined } from '@ant-design/icons-vue';
   import { PlusOutlined, MinusOutlined } from '@ant-design/icons-vue';
   import { editCellTableTHeadConfig } from '../../../config';
   import { editCellTableTHeadConfig } from '../../../config';
   import { selectType, tableItems } from '../../../types';
   import { selectType, tableItems } from '../../../types';
+  import { useModal, BasicModal } from '/@/components/Modal';
+  import TimePeriodForm from './selectDateRange.vue';
+  import { selectDeviceAttrSchema } from './config.data';
+  import { defaultSchemas } from './config';
+  import { useTimePeriodForm } from '/@/views/device/localtion/cpns/TimePeriodForm/useTimePeriodForm';
 
 
   defineProps({
   defineProps({
     method: {
     method: {
@@ -70,6 +95,27 @@
 
 
   const selectOptions = ref<selectType[]>([]);
   const selectOptions = ref<selectType[]>([]);
 
 
+  const [registerModal, { openModal }] = useModal();
+
+  const isDateRange = ref(false);
+
+  const onHandleCheck = ({ target }) => {
+    isDateRange.value = target?.checked;
+    if (isDateRange.value) {
+      openModal(true);
+    }
+  };
+
+  const [timePeriodRegister, method] = useTimePeriodForm({
+    schemas: [...defaultSchemas, ...selectDeviceAttrSchema],
+    async submitFunc() {
+      const value = method.getFieldsValue();
+      console.log(value);
+    },
+  });
+
+  const handleCancelModal = () => {};
+
   onMounted(() => {
   onMounted(() => {
     getSelectOptions();
     getSelectOptions();
   });
   });

+<script setup lang="ts">
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { defaultSchemas, SchemaFiled } from './config';
+  import { onMounted } from 'vue';
+  import { useGridLayout } from '/@/hooks/component/useGridLayout';
+  import { ColEx } from '/@/components/Form/src/types';
+
+  const emit = defineEmits(['register']);
+  const [register, method] = useForm({
+    schemas: defaultSchemas,
+    labelWidth: 120,
+    baseColProps: useGridLayout(2, 3, 4) as unknown as ColEx,
+    fieldMapToTime: [
+      [SchemaFiled.DATE_RANGE, [SchemaFiled.START_TS, SchemaFiled.END_TS], 'YYYY-MM-DD HH:mm:ss'],
+    ],
+    showResetButton: false,
+    showSubmitButton: false,
+  });
+  onMounted(() => {
+    emit('register', method);
+  });
+</script>
+
+<template>
+  <BasicForm @register="register" />
+</template>