feat: basic implement data board history trend

@@ -77,7 +77,7 @@ export interface DataSource {
   slaveDeviceId: string;
   gatewayDevice: boolean;
   componentInfo: ComponentInfo;
-  deviceName?: string;
+  deviceName: string;
 
   // front usage
   uuid?: string;

@@ -64,9 +64,7 @@
       </div>
     </div>
     <div class="flex items-center w-10">
-      <Tooltip title="趋势">
-        <LineChartOutlined class="cursor-pointer mx-1" />
-      </Tooltip>
+      <slot name="moreAction"></slot>
       <Dropdown
         v-if="dropMenuList.length"
         :drop-menu-list="dropMenuList"

-<script setup lang="ts"></script>
-
-<template>
-  <div>历史趋势</div>
-</template>

+<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 { useGridLayout } from '/@/hooks/component/useGridLayout';
+  import { ColEx } from '/@/components/Form/src/types';
+  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 { Loading } from '/@/components/Loading';
+  import BasicModal from '/@/components/Modal/src/BasicModal.vue';
+  import { useModalInner } from '/@/components/Modal';
+  import { getDeviceAttributes } from '/@/api/dataBoard';
+
+  defineEmits(['register']);
+
+  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, deviceId } = value;
+    if (way === QueryWay.LATEST) {
+      return {
+        entityId: deviceId,
+        keys: keys ? keys : unref(deviceAttrs).join(),
+        startTs: moment().subtract(startTs, 'ms').valueOf(),
+        endTs: Date.now(),
+        interval,
+        agg,
+        limit,
+      };
+    } else {
+      return {
+        entityId: deviceId,
+        keys: keys ? keys : unref(deviceAttrs).join(),
+        startTs: moment(startTs).valueOf(),
+        endTs: moment(endTs).valueOf(),
+        interval,
+        agg,
+        limit,
+      };
+    }
+  }
+
+  function hasDeviceAttr() {
+    if (!unref(deviceAttrs).length) {
+      return false;
+    } else {
+      return true;
+    }
+  }
+
+  function setChartOptions(data, keys?) {
+    const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+
+    const dataArray: any[] = [];
+    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]);
+      }
+    }
+    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] = useForm({
+    schemas: formSchema,
+    baseColProps: useGridLayout(2, 3, 4) as unknown as ColEx,
+    rowProps: {
+      gutter: 10,
+    },
+    fieldMapToTime: [[SchemaFiled.DATE_RANGE, [SchemaFiled.START_TS, SchemaFiled.END_TS]]],
+    async submitFunc() {
+      // 表单验证
+      await method.validate();
+      const value = method.getFieldsValue();
+      const searchParams = getSearchParams(value);
+
+      console.log(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;
+    },
+  });
+
+  const getDeviceDataKey = async (deviceId: string) => {
+    if (!deviceId) return;
+    try {
+      deviceAttrs.value = (await getDeviceAttributes({ deviceId })) || [];
+      await nextTick();
+      method.updateSchema({
+        field: SchemaFiled.KEYS,
+        componentProps: {
+          options: unref(deviceAttrs).map((item) => ({ label: item, value: item })),
+        },
+      });
+    } catch (error) {}
+  };
+
+  const handleModalOpen = async () => {
+    await nextTick();
+
+    method.setFieldsValue({
+      [SchemaFiled.START_TS]: 1 * 24 * 60 * 60 * 1000,
+      [SchemaFiled.LIMIT]: 7,
+      [SchemaFiled.AGG]: AggregateDataEnum.NONE,
+    });
+
+    if (!hasDeviceAttr()) return;
+
+    const { deviceId } = method.getFieldsValue();
+
+    const res = await getDeviceHistoryInfo({
+      entityId: deviceId,
+      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;
+      return;
+    } else {
+      isNull.value = true;
+    }
+    setChartOptions(res);
+  };
+
+  const generateDeviceOptions = (dataSource: DataSource[]) => {
+    const record: { [key: string]: boolean } = {};
+    const options: Record<'label' | 'value', string>[] = [];
+    for (const item of dataSource) {
+      const { deviceName, gatewayDevice, slaveDeviceId } = item;
+      let { deviceId } = item;
+      if (gatewayDevice) {
+        deviceId = slaveDeviceId;
+      }
+      if (record[deviceId]) continue;
+      options.push({
+        label: deviceName,
+        value: deviceId,
+      });
+      record[deviceId] = true;
+    }
+
+    return options;
+  };
+
+  const [registerModal] = useModalInner(async (dataSource: DataSource[]) => {
+    deviceAttrs.value = [];
+    loading.value = false;
+    const options = generateDeviceOptions(dataSource);
+    await nextTick();
+    method.updateSchema({
+      field: SchemaFiled.DEVICE_ID,
+      componentProps({ formActionType }) {
+        const { setFieldsValue } = formActionType;
+        return {
+          options,
+          onChange(value: string) {
+            getDeviceDataKey(value);
+            setFieldsValue({ [SchemaFiled.KEYS]: null });
+          },
+        };
+      },
+    });
+
+    await handleModalOpen();
+  });
+</script>
+
+<template>
+  <BasicModal @register="registerModal" :destroy-on-close="true" width="70%">
+    <section class="flex flex-col p-4 h-full w-full min-w-7/10" style="color: #f0f2f5">
+      <section class="bg-white p-3">
+        <BasicForm @register="register" />
+      </section>
+      <section class="bg-white p-3">
+        <div v-show="isNull" ref="chartRef" :style="{ height: '400px', width: '100%' }">
+          <Loading :loading="loading" :absolute="true" />
+        </div>
+        <Empty v-show="!isNull" />
+      </section>
+    </section>
+  </BasicModal>
+</template>
+
+<style scoped></style>

+import { Moment } from 'moment';
+import { getDeviceAttributes } from '/@/api/dataBoard';
+import { FormSchema } from '/@/components/Form';
+import { ColEx } from '/@/components/Form/src/types';
+import { useGridLayout } from '/@/hooks/component/useGridLayout';
+import {
+  getPacketIntervalByRange,
+  getPacketIntervalByValue,
+  intervalOption,
+} from '/@/views/device/localtion/cpns/TimePeriodForm/helper';
+export enum QueryWay {
+  LATEST = 'latest',
+  TIME_PERIOD = 'timePeriod',
+}
+
+export enum SchemaFiled {
+  DEVICE_ID = 'deviceId',
+  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 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 });
+        },
+      };
+    },
+  },
+  {
+    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 });
+        },
+        getPopupContainer: () => document.body,
+      };
+    },
+  },
+  {
+    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' }],
+  },
+  {
+    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[]) {
+          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',
+    // 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, 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;
+    },
+    componentProps() {
+      return {
+        max: 50000,
+        min: 7,
+        getPopupContainer: () => document.body,
+      };
+    },
+  },
+  {
+    field: SchemaFiled.KEYS,
+    label: '设备属性',
+    component: 'Select',
+    componentProps: {
+      getPopupContainer: () => document.body,
+    },
+    // componentProps({ formModel }) {
+    //   const deviceId = formModel[SchemaFiled.DEVICE_ID];
+    //   return {
+    //     api: async () => {
+    //       if (deviceId) {
+    //         try {
+    //           try {
+    //             const data = await getDeviceAttributes({ deviceId });
+    //             if (data) return data.map((item) => ({ label: item, value: item }));
+    //           } catch (error) {}
+    //           return [];
+    //         } catch (error) {}
+    //       }
+    //       return [];
+    //     },
+    //     getPopupContainer: () => document.body,
+    //   };
+    // },
+  },
+];
+
+// export const selectDeviceAttrSchema: FormSchema[] = [
+//   {
+//     field: 'keys',
+//     label: '设备属性',
+//     component: 'Select',
+//     componentProps: {
+//       getPopupContainer: () => document.body,
+//     },
+//   },
+// ];

 <script lang="ts" setup>
-  import { Button, PageHeader, Empty, Spin } from 'ant-design-vue';
+  import { Button, PageHeader, Empty, Spin, Tooltip } from 'ant-design-vue';
+  import { LineChartOutlined } from '@ant-design/icons-vue';
   import { GridItem, GridLayout } from 'vue3-grid-layout';
   import { nextTick, onMounted, ref } from 'vue';
   import WidgetWrapper from '../components/WidgetWrapper/WidgetWrapper.vue';
@@ -25,6 +26,7 @@
   import Authority from '/@/components/Authority/src/Authority.vue';
   import { useSocketConnect } from '../hook/useSocketConnect';
   import { buildUUID } from '/@/utils/uuid';
+  import HistoryTrendModal from './components/HistoryTrendModal.vue';
 
   const ROUTE = useRoute();
 
@@ -243,6 +245,12 @@
     }
   };
 
+  const [registerHistoryDataModal, historyDataModalMethod] = useModal();
+
+  const handleOpenHistroyDataModal = (record: DataSource[]) => {
+    historyDataModalMethod.openModal(true, record);
+  };
+
   onMounted(() => {
     getDataBoardComponent();
   });
@@ -301,7 +309,16 @@
                   :record="item.record.dataSource"
                   :id="item.record.id"
                   @action="handleMoreAction"
-                />
+                >
+                  <template #moreAction>
+                    <Tooltip title="趋势">
+                      <LineChartOutlined
+                        class="cursor-pointer mx-1"
+                        @click="handleOpenHistroyDataModal(item.record.dataSource)"
+                      />
+                    </Tooltip>
+                  </template>
+                </BaseWidgetHeader>
               </template>
               <template #controls="{ record, add, remove, update }">
                 <component
@@ -320,6 +337,7 @@
       </Spin>
     </section>
     <DataBindModal @register="register" @submit="getDataBoardComponent" />
+    <HistoryTrendModal @register="registerHistoryDataModal" />
   </section>
 </template>