feat: device list page drawer add history data panel

@@ -4,5 +4,8 @@
     "src/locales/lang",
     "src/locales/lang",
     "public/resource/tinymce/langs"
     "public/resource/tinymce/langs"
   ],
   ],
-  "commentTranslate.targetLanguage": "en"
+  "commentTranslate.targetLanguage": "en",
+  "cSpell.words": [
+    "unref"
+  ]
 }
 }

+import type { ColProps } from 'ant-design-vue';
+
+export function useGridLayout(all: number): ColProps;
+export function useGridLayout(xs: number, lg: number, xxl: number): ColProps;
+export function useGridLayout(
+  xs: number,
+  sm: number,
+  md: number,
+  lg: number,
+  xl: number,
+  xxl: number
+): ColProps;
+export function useGridLayout(
+  xs: number,
+  sm?: number,
+  md?: number,
+  lg?: number,
+  xl?: number,
+  xxl?: number
+): ColProps {
+  const length = arguments.length;
+  const maxCol = 24;
+
+  const toCol = (number: number) => {
+    return Math.floor(maxCol / number);
+  };
+
+  switch (length) {
+    case 1:
+      return { span: toCol(xs) };
+    case 3:
+      return { xs: toCol(xs), lg: toCol(sm!), xxl: toCol(md!) };
+    case 6:
+      return {
+        xs: toCol(xs),
+        sm: toCol(sm!),
+        md: toCol(md!),
+        lg: toCol(lg!),
+        xl: toCol(xl!),
+        xxl: toCol(xxl!),
+      };
+    default:
+      return { span: toCol(xs) ?? 6 };
+  }
+}

@@ -46,7 +46,8 @@ export const AccountDetail: AppRouteRecordRaw = {
     {
     {
       path: 'account_detail/:id',
       path: 'account_detail/:id',
       name: 'Account_Detail',
       name: 'Account_Detail',
-      component: () => import('/@/views/system/account/AccountDetail.vue'),
+      // component: () => import('/@/views/system/account/AccountDetail.vue'),
+      component: () => import('../../views/alarm/config/ContactDrawer.vue'),
       meta: {
       meta: {
         title: '用户详情',
         title: '用户详情',
       },
       },

@@ -15,6 +15,9 @@
       <TabPane key="2" tab="实时数据" v-if="deviceDetail?.deviceType !== 'GATEWAY'">
       <TabPane key="2" tab="实时数据" v-if="deviceDetail?.deviceType !== 'GATEWAY'">
         <RealTimeData :deviceDetail="deviceDetail" />
         <RealTimeData :deviceDetail="deviceDetail" />
       </TabPane>
       </TabPane>
+      <TabPane key="7" tab="历史数据" v-if="deviceDetail?.deviceType !== 'GATEWAY'">
+        <HistoryData :deviceDetail="deviceDetail" />
+      </TabPane>
       <TabPane key="5" tab="命令下发" v-if="deviceDetail?.deviceType !== 'SENSOR'">
       <TabPane key="5" tab="命令下发" v-if="deviceDetail?.deviceType !== 'SENSOR'">
         <CommandIssuance :deviceDetail="deviceDetail" />
         <CommandIssuance :deviceDetail="deviceDetail" />
       </TabPane>
       </TabPane>
@@ -46,6 +49,7 @@
   import TBoxDetail from '../tabs/TBoxDetail.vue';
   import TBoxDetail from '../tabs/TBoxDetail.vue';
   import CommandIssuance from '../tabs/CommandIssuance.vue';
   import CommandIssuance from '../tabs/CommandIssuance.vue';
   import { getDeviceDetail } from '/@/api/device/deviceManager';
   import { getDeviceDetail } from '/@/api/device/deviceManager';
+  import HistoryData from '../tabs/HistoryData.vue';
   export default defineComponent({
   export default defineComponent({
     name: 'DeviceModal',
     name: 'DeviceModal',
     components: {
     components: {
@@ -58,6 +62,7 @@
       ChildDevice,
       ChildDevice,
       CommandIssuance,
       CommandIssuance,
       TBoxDetail,
       TBoxDetail,
+      HistoryData,
     },
     },
     emits: ['reload', 'register'],
     emits: ['reload', 'register'],
     setup() {
     setup() {

+<script lang="ts" setup>
+  import moment from 'moment';
+  import { nextTick, onMounted, onUnmounted, Ref, ref, unref } from 'vue';
+  import { getDeviceDataKeys, getDeviceHistoryInfo } from '/@/api/alarm/position';
+  import { Empty } from 'ant-design-vue';
+  import { useECharts } from '/@/hooks/web/useECharts';
+  import { dateUtil } from '/@/utils/dateUtil';
+  import {
+    AggregateDataEnum,
+    eChartOptions,
+    selectDeviceAttrSchema,
+  } from '/@/views/device/localtion/config.data';
+  import { useTimePeriodForm } from '/@/views/device/localtion/cpns/TimePeriodForm';
+  import { defaultSchemas, QueryWay } from '/@/views/device/localtion/cpns/TimePeriodForm/config';
+  import TimePeriodForm from '/@/views/device/localtion/cpns/TimePeriodForm/TimePeriodForm.vue';
+  import { SchemaFiled } from '/@/views/report/config/config.data';
+  import { useGridLayout } from '/@/hooks/component/useGridLayout';
+  import { ColEx } from '/@/components/Form/src/types';
+
+  interface DeviceDetail {
+    tbDeviceId: string;
+  }
+
+  const props = defineProps<{
+    deviceDetail: DeviceDetail;
+  }>();
+
+  const chartRef = ref();
+
+  const deviceAttrs = ref<string[]>([]);
+
+  const loading = ref(false);
+
+  const isNull = ref(false);
+
+  function getSearchParams(value: Recordable) {
+    const { startTs, endTs, interval, agg, limit, keys, way } = value;
+    if (way === QueryWay.LATEST) {
+      return {
+        entityId: props.deviceDetail.tbDeviceId,
+        keys: keys ? keys : unref(deviceAttrs).join(),
+        startTs: moment().subtract(startTs, 'ms').valueOf(),
+        endTs: Date.now(),
+        interval,
+        agg,
+        limit,
+      };
+    } else {
+      return {
+        entityId: props.deviceDetail.tbDeviceId,
+        keys: keys ? keys : unref(deviceAttrs).join(),
+        startTs: moment(startTs).valueOf(),
+        endTs: moment(endTs).valueOf(),
+        interval,
+        agg,
+        limit,
+      };
+    }
+  }
+
+  function hasDeviceAttr() {
+    if (!unref(deviceAttrs).length) {
+      return false;
+    } else {
+      return true;
+    }
+  }
+
+  const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>);
+
+  function setChartOptions(data, keys?) {
+    const dataArray: any[] = [];
+    for (const key in data) {
+      for (const item1 of data[key]) {
+        let { ts, value } = item1;
+        const time = dateUtil(ts).format('YYYY-MM-DD HH:mm:ss');
+        value = Number(value).toFixed(2);
+        dataArray.push([time, value, key]);
+      }
+    }
+    keys = keys ? [keys] : unref(deviceAttrs);
+    const series: any = keys.map((item) => {
+      return {
+        name: item,
+        type: 'line',
+        data: dataArray.filter((item1) => item1[2] === item),
+      };
+    });
+    // 设置数据
+    setOptions(eChartOptions(series, keys));
+  }
+
+  const [register, method] = useTimePeriodForm({
+    schemas: [...defaultSchemas, ...selectDeviceAttrSchema],
+    baseColProps: useGridLayout(2, 3, 4) as unknown as ColEx,
+    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;
+    },
+  });
+
+  const getDeviceDataKey = async () => {
+    const { tbDeviceId } = props.deviceDetail || {};
+    try {
+      deviceAttrs.value = (await getDeviceDataKeys(tbDeviceId)) || [];
+    } catch (error) {}
+  };
+
+  const openHistoryPanel = async () => {
+    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,
+      [SchemaFiled.LIMIT]: 7,
+      [SchemaFiled.AGG]: AggregateDataEnum.NONE,
+    });
+
+    if (!hasDeviceAttr()) return;
+
+    const res = await getDeviceHistoryInfo({
+      entityId: props.deviceDetail.tbDeviceId,
+      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);
+  };
+
+  onMounted(async () => {
+    await getDeviceDataKey();
+    await openHistoryPanel();
+  });
+
+  onUnmounted(() => {
+    getInstance()?.clear();
+  });
+</script>
+
+<template>
+  <section class="flex flex-col p-4 h-full" style="color: #f0f2f5">
+    <section class="bg-white p-3">
+      <TimePeriodForm @register="register" />
+    </section>
+    <section class="bg-white p-3">
+      <div v-show="isNull" ref="chartRef" :style="{ height: '550px', width: '100%' }">
+        <Loading :loading="loading" :absolute="true" />
+      </div>
+      <Empty v-show="!isNull" />
+    </section>
+  </section>
+</template>
+
+<style scoped></style>

@@ -473,16 +473,9 @@ export const selectDeviceAttrSchema: FormSchema[] = [
     field: 'keys',
     field: 'keys',
     label: '设备属性',
     label: '设备属性',
     component: 'Select',
     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,
-    // },
+    componentProps: {
+      getPopupContainer: () => document.body,
+    },
   },
   },
 ];
 ];
 
 

 import { Moment } from 'moment';
 import { Moment } from 'moment';
 import { getPacketIntervalByRange, getPacketIntervalByValue, intervalOption } from './helper';
 import { getPacketIntervalByRange, getPacketIntervalByValue, intervalOption } from './helper';
 import { FormSchema } from '/@/components/Form';
 import { FormSchema } from '/@/components/Form';
+import { ColEx } from '/@/components/Form/src/types';
+import { useGridLayout } from '/@/hooks/component/useGridLayout';
 export enum QueryWay {
 export enum QueryWay {
   LATEST = 'latest',
   LATEST = 'latest',
   TIME_PERIOD = 'timePeriod',
   TIME_PERIOD = 'timePeriod',
@@ -49,6 +51,7 @@ export const defaultSchemas: FormSchema[] = [
               })
               })
             : setFieldsValue({ [SchemaFiled.START_TS]: null });
             : setFieldsValue({ [SchemaFiled.START_TS]: null });
         },
         },
+        getPopupContainer: () => document.body,
       };
       };
     },
     },
   },
   },
@@ -66,6 +69,7 @@ export const defaultSchemas: FormSchema[] = [
         onChange() {
         onChange() {
           setFieldsValue({ [SchemaFiled.INTERVAL]: null });
           setFieldsValue({ [SchemaFiled.INTERVAL]: null });
         },
         },
+        getPopupContainer: () => document.body,
       };
       };
     },
     },
     rules: [{ required: true, message: '最后数据为必选项', type: 'number' }],
     rules: [{ required: true, message: '最后数据为必选项', type: 'number' }],
@@ -97,11 +101,10 @@ export const defaultSchemas: FormSchema[] = [
           dates = [];
           dates = [];
           setFieldsValue({ [SchemaFiled.INTERVAL]: null });
           setFieldsValue({ [SchemaFiled.INTERVAL]: null });
         },
         },
+        getPopupContainer: () => document.body,
       };
       };
     },
     },
-    colProps: {
-      span: 10,
-    },
+    colProps: useGridLayout(2, 2, 2, 2, 2, 2) as unknown as ColEx,
   },
   },
   {
   {
     field: SchemaFiled.AGG,
     field: SchemaFiled.AGG,
@@ -137,6 +140,7 @@ export const defaultSchemas: FormSchema[] = [
       }
       }
       return {
       return {
         options,
         options,
+        getPopupContainer: () => document.body,
       };
       };
     },
     },
   },
   },
@@ -152,6 +156,7 @@ export const defaultSchemas: FormSchema[] = [
       return {
       return {
         max: 50000,
         max: 50000,
         min: 7,
         min: 7,
+        getPopupContainer: () => document.body,
       };
       };
     },
     },
   },
   },