perf: histroy data all add table mode && chart mode

 import { RadioRecord } from '../../../views/visual/board/detail/config/util';
 import { RadioRecord } from '../../../views/visual/board/detail/config/util';
 import { DeviceTypeEnum } from '../../device/model/deviceModel';
 import { DeviceTypeEnum } from '../../device/model/deviceModel';
+import { DataType } from '../../device/model/modelOfMatterModel';
 
 
 export interface AddDataBoardParams {
 export interface AddDataBoardParams {
   name: string;
   name: string;
@@ -149,8 +150,6 @@ export interface ComponentInfoDetail {
   data: { componentData: DataComponentRecord[]; componentLayout: Layout[] };
   data: { componentData: DataComponentRecord[]; componentLayout: Layout[] };
 }
 }
 
 
-export type DataType = 'BOOL' | 'DOUBLE' | 'INT' | 'STRUCT' | 'TExT';
-
 export interface DeviceAttributeParams {
 export interface DeviceAttributeParams {
   deviceProfileId: string;
   deviceProfileId: string;
   dataType?: DataType;
   dataType?: DataType;
@@ -159,7 +158,7 @@ export interface DeviceAttributeParams {
 export interface DeviceAttributeRecord {
 export interface DeviceAttributeRecord {
   name: string;
   name: string;
   identifier: string;
   identifier: string;
-  detail: DataType;
+  detail: { dataType: DataType };
 }
 }
 
 
 export interface SendCommandParams {
 export interface SendCommandParams {

-import { FunctionType } from '/@/views/device/profiles/step/cpns/physical/cpns/config';
+import {
+  DataTypeEnum,
+  FunctionType,
+} from '/@/views/device/profiles/step/cpns/physical/cpns/config';
 
 
 export interface Specs {
 export interface Specs {
   min: string;
   min: string;
@@ -16,7 +19,7 @@ export interface Specs {
 }
 }
 
 
 export interface DataType {
 export interface DataType {
-  type: string;
+  type: DataTypeEnum;
   specs?: Partial<Specs> | StructJSON[];
   specs?: Partial<Specs> | StructJSON[];
 }
 }
 
 

@@ -3,7 +3,7 @@ import { findDictItemByCode } from '/@/api/system/dict';
 import { FormSchema } from '/@/components/Table';
 import { FormSchema } from '/@/components/Table';
 import { FormField } from '/@/views/device/profiles/step/cpns/physical/cpns/config';
 import { FormField } from '/@/views/device/profiles/step/cpns/physical/cpns/config';
 
 
-export enum DateTypeEnum {
+export enum DataTypeEnum {
   IS_NUMBER_INT = 'INT',
   IS_NUMBER_INT = 'INT',
   IS_NUMBER_DOUBLE = 'DOUBLE',
   IS_NUMBER_DOUBLE = 'DOUBLE',
   IS_STRING = 'TEXT',
   IS_STRING = 'TEXT',
@@ -84,8 +84,8 @@ export const formSchemas: FormSchema[] = [
       span: 18,
       span: 18,
     },
     },
     ifShow: ({ values }) =>
     ifShow: ({ values }) =>
-      values[FormField.TYPE] === DateTypeEnum.IS_NUMBER_INT ||
-      values[FormField.TYPE] === DateTypeEnum.IS_NUMBER_DOUBLE,
+      values[FormField.TYPE] === DataTypeEnum.IS_NUMBER_INT ||
+      values[FormField.TYPE] === DataTypeEnum.IS_NUMBER_DOUBLE,
     rules: [{ validator: validateValueRange }],
     rules: [{ validator: validateValueRange }],
   },
   },
   {
   {
@@ -104,8 +104,8 @@ export const formSchemas: FormSchema[] = [
       },
       },
     },
     },
     ifShow: ({ values }) =>
     ifShow: ({ values }) =>
-      values[FormField.TYPE] === DateTypeEnum.IS_NUMBER_INT ||
-      values[FormField.TYPE] === DateTypeEnum.IS_NUMBER_DOUBLE,
+      values[FormField.TYPE] === DataTypeEnum.IS_NUMBER_INT ||
+      values[FormField.TYPE] === DataTypeEnum.IS_NUMBER_DOUBLE,
     dynamicRules: ({ model }) => {
     dynamicRules: ({ model }) => {
       const valueRange = model[FormField.VALUE_RANGE] || {};
       const valueRange = model[FormField.VALUE_RANGE] || {};
       const { min = 0, max = 0 } = valueRange;
       const { min = 0, max = 0 } = valueRange;
@@ -166,8 +166,8 @@ export const formSchemas: FormSchema[] = [
       };
       };
     },
     },
     ifShow: ({ values }) =>
     ifShow: ({ values }) =>
-      values[FormField.TYPE] === DateTypeEnum.IS_NUMBER_INT ||
-      values[FormField.TYPE] === DateTypeEnum.IS_NUMBER_DOUBLE,
+      values[FormField.TYPE] === DataTypeEnum.IS_NUMBER_INT ||
+      values[FormField.TYPE] === DataTypeEnum.IS_NUMBER_DOUBLE,
   },
   },
   {
   {
     field: FormField.BOOL_CLOSE,
     field: FormField.BOOL_CLOSE,
@@ -180,7 +180,7 @@ export const formSchemas: FormSchema[] = [
     componentProps: {
     componentProps: {
       placeholder: '如：关',
       placeholder: '如：关',
     },
     },
-    ifShow: ({ values }) => values[FormField.TYPE] === DateTypeEnum.IS_BOOL,
+    ifShow: ({ values }) => values[FormField.TYPE] === DataTypeEnum.IS_BOOL,
     dynamicRules: ({ model }) => {
     dynamicRules: ({ model }) => {
       const close = model[FormField.BOOL_CLOSE];
       const close = model[FormField.BOOL_CLOSE];
       const open = model[FormField.BOOL_OPEN];
       const open = model[FormField.BOOL_OPEN];
@@ -205,7 +205,7 @@ export const formSchemas: FormSchema[] = [
     componentProps: {
     componentProps: {
       placeholder: '如：开',
       placeholder: '如：开',
     },
     },
-    ifShow: ({ values }) => values[FormField.TYPE] === DateTypeEnum.IS_BOOL,
+    ifShow: ({ values }) => values[FormField.TYPE] === DataTypeEnum.IS_BOOL,
     dynamicRules: ({ model }) => {
     dynamicRules: ({ model }) => {
       const close = model[FormField.BOOL_CLOSE];
       const close = model[FormField.BOOL_CLOSE];
       const open = model[FormField.BOOL_OPEN];
       const open = model[FormField.BOOL_OPEN];
@@ -236,7 +236,7 @@ export const formSchemas: FormSchema[] = [
         suffix: () => '字节',
         suffix: () => '字节',
       };
       };
     },
     },
-    ifShow: ({ values }) => values[FormField.TYPE] === DateTypeEnum.IS_STRING,
+    ifShow: ({ values }) => values[FormField.TYPE] === DataTypeEnum.IS_STRING,
   },
   },
   {
   {
     field: FormField.ACCESS_MODE,
     field: FormField.ACCESS_MODE,
@@ -264,7 +264,7 @@ export const formSchemas: FormSchema[] = [
     valueField: 'value',
     valueField: 'value',
     changeEvent: 'update:value',
     changeEvent: 'update:value',
     colProps: { span: 24 },
     colProps: { span: 24 },
-    ifShow: ({ values }) => values[FormField.TYPE] === DateTypeEnum.IS_STRUCT,
+    ifShow: ({ values }) => values[FormField.TYPE] === DataTypeEnum.IS_STRUCT,
     rules: [{ required: true, validator: validateJSON }],
     rules: [{ required: true, validator: validateJSON }],
   },
   },
   {
   {

-import { DateTypeEnum } from './config';
+import { DataTypeEnum } from './config';
 import { StructJSON } from '/@/api/device/model/modelOfMatterModel';
 import { StructJSON } from '/@/api/device/model/modelOfMatterModel';
 import { FormField } from '/@/views/device/profiles/step/cpns/physical/cpns/config';
 import { FormField } from '/@/views/device/profiles/step/cpns/physical/cpns/config';
 
 
@@ -14,7 +14,7 @@ export interface OpenModalParams {
 
 
 export interface StructFormValue
 export interface StructFormValue
   extends Partial<Record<Exclude<FormField, FormField.VALUE_RANGE | FormField.STRUCT>, string>> {
   extends Partial<Record<Exclude<FormField, FormField.VALUE_RANGE | FormField.STRUCT>, string>> {
-  [FormField.TYPE]: DateTypeEnum;
+  [FormField.TYPE]: DataTypeEnum;
   [FormField.VALUE_RANGE]?: {
   [FormField.VALUE_RANGE]?: {
     [FormField.MIN]: string;
     [FormField.MIN]: string;
     [FormField.MAX]: string;
     [FormField.MAX]: string;

 import { cloneDeep } from 'lodash-es';
 import { cloneDeep } from 'lodash-es';
-import { DateTypeEnum } from './config';
+import { DataTypeEnum } from './config';
 import { StructFormValue } from './type';
 import { StructFormValue } from './type';
 import { DataType, ModelOfMatterParams, StructJSON } from '/@/api/device/model/modelOfMatterModel';
 import { DataType, ModelOfMatterParams, StructJSON } from '/@/api/device/model/modelOfMatterModel';
 import { isArray } from '/@/utils/is';
 import { isArray } from '/@/utils/is';
@@ -24,21 +24,21 @@ export function transfromToStructJSON(value: StructFormValue): StructJSON {
   let dataType = {} as unknown as DataType;
   let dataType = {} as unknown as DataType;
 
 
   switch (type) {
   switch (type) {
-    case DateTypeEnum.IS_NUMBER_INT:
+    case DataTypeEnum.IS_NUMBER_INT:
       dataType = {
       dataType = {
         type,
         type,
         specs: { valueRange, step, unit, unitName },
         specs: { valueRange, step, unit, unitName },
       };
       };
       break;
       break;
 
 
-    case DateTypeEnum.IS_NUMBER_DOUBLE:
+    case DataTypeEnum.IS_NUMBER_DOUBLE:
       dataType = {
       dataType = {
         type,
         type,
         specs: { valueRange, step, unit, unitName },
         specs: { valueRange, step, unit, unitName },
       };
       };
       break;
       break;
 
 
-    case DateTypeEnum.IS_BOOL:
+    case DataTypeEnum.IS_BOOL:
       dataType = {
       dataType = {
         type,
         type,
         specs: {
         specs: {
@@ -48,14 +48,14 @@ export function transfromToStructJSON(value: StructFormValue): StructJSON {
       };
       };
       break;
       break;
 
 
-    case DateTypeEnum.IS_STRING:
+    case DataTypeEnum.IS_STRING:
       dataType = {
       dataType = {
         type,
         type,
         specs: { length },
         specs: { length },
       };
       };
       break;
       break;
 
 
-    case DateTypeEnum.IS_STRUCT:
+    case DataTypeEnum.IS_STRUCT:
       dataType = {
       dataType = {
         type,
         type,
         specs: specs! as unknown as ModelOfMatterParams[],
         specs: specs! as unknown as ModelOfMatterParams[],

 <script lang="ts" setup>
 <script lang="ts" setup>
-  import { nextTick, onMounted, onUnmounted, Ref, ref, unref } from 'vue';
+  import { computed, nextTick, onMounted, onUnmounted, Ref, ref, unref } from 'vue';
   import { getDeviceHistoryInfo } from '/@/api/alarm/position';
   import { getDeviceHistoryInfo } from '/@/api/alarm/position';
-  import { Empty, Spin } from 'ant-design-vue';
+  import { Empty, Spin, Tooltip, Button } from 'ant-design-vue';
   import { useECharts } from '/@/hooks/web/useECharts';
   import { useECharts } from '/@/hooks/web/useECharts';
   import { AggregateDataEnum, selectDeviceAttrSchema } from '/@/views/device/localtion/config.data';
   import { AggregateDataEnum, selectDeviceAttrSchema } from '/@/views/device/localtion/config.data';
   import { useTimePeriodForm } from '/@/views/device/localtion/cpns/TimePeriodForm';
   import { useTimePeriodForm } from '/@/views/device/localtion/cpns/TimePeriodForm';
@@ -11,6 +11,10 @@
   import { useGridLayout } from '/@/hooks/component/useGridLayout';
   import { useGridLayout } from '/@/hooks/component/useGridLayout';
   import { ColEx } from '/@/components/Form/src/types';
   import { ColEx } from '/@/components/Form/src/types';
   import { useHistoryData } from '../../hook/useHistoryData';
   import { useHistoryData } from '../../hook/useHistoryData';
+  import { formatToDateTime } from '/@/utils/dateUtil';
+  import { useTable, BasicTable } from '/@/components/Table';
+  import { LineChartOutlined, BarsOutlined } from '@ant-design/icons-vue';
+  import { DataTypeEnum } from '/@/components/Form/src/externalCompns/components/StructForm/config';
 
 
   interface DeviceDetail {
   interface DeviceDetail {
     tbDeviceId: string;
     tbDeviceId: string;
@@ -22,15 +26,33 @@
     attr?: string;
     attr?: string;
   }>();
   }>();
 
 
+  enum Mode {
+    TABLE = 'table',
+    CHART = 'chart',
+  }
+
+  const mode = ref<Mode>(Mode.CHART);
+
   const chartRef = ref();
   const chartRef = ref();
 
 
   const loading = ref(false);
   const loading = ref(false);
 
 
   const isNull = ref(false);
   const isNull = ref(false);
 
 
+  const historyData = ref<{ ts: number; value: string; name: string }[]>([]);
+
   const { deviceAttrs, getDeviceKeys, getSearchParams, setChartOptions, getDeviceAttribute } =
   const { deviceAttrs, getDeviceKeys, getSearchParams, setChartOptions, getDeviceAttribute } =
     useHistoryData();
     useHistoryData();
 
 
+  const getIdentifierNameMapping = computed(() => {
+    const mapping = {};
+    unref(deviceAttrs).forEach((item) => {
+      const { identifier, name } = item;
+      mapping[identifier] = name;
+    });
+    return mapping;
+  });
+
   function hasDeviceAttr() {
   function hasDeviceAttr() {
     if (!unref(deviceAttrs).length) {
     if (!unref(deviceAttrs).length) {
       return false;
       return false;
@@ -39,6 +61,34 @@
     }
     }
   }
   }
 
 
+  const [registerTable] = useTable({
+    showIndexColumn: false,
+    showTableSetting: false,
+    dataSource: historyData,
+    maxHeight: 300,
+    size: 'small',
+    columns: [
+      {
+        title: '属性',
+        dataIndex: 'name',
+        format: (text) => {
+          return unref(getIdentifierNameMapping)[text];
+        },
+      },
+      {
+        title: '值',
+        dataIndex: 'value',
+      },
+      {
+        title: '更新时间',
+        dataIndex: 'ts',
+        format: (val) => {
+          return formatToDateTime(val, 'YYYY-MM-DD HH:mm:ss');
+        },
+      },
+    ],
+  });
+
   const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>);
   const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>);
 
 
   const [register, method] = useTimePeriodForm({
   const [register, method] = useTimePeriodForm({
@@ -57,6 +107,7 @@
         ...searchParams,
         ...searchParams,
         entityId: props.deviceDetail.tbDeviceId,
         entityId: props.deviceDetail.tbDeviceId,
       });
       });
+      historyData.value = getTableHistoryData(res);
       // 判断数据对象是否为空
       // 判断数据对象是否为空
       if (!Object.keys(res).length) {
       if (!Object.keys(res).length) {
         isNull.value = false;
         isNull.value = false;
@@ -74,11 +125,36 @@
     },
     },
   });
   });
 
 
+  const getTableHistoryData = (record: Recordable<{ ts: number; value: string }[]>) => {
+    const keys = Object.keys(record);
+    const list = keys.reduce((prev, next) => {
+      const list = record[next].map((item) => {
+        return {
+          ...item,
+          name: next,
+        };
+      });
+      return [...prev, ...list];
+    }, []);
+    return list;
+  };
+
   const getDeviceDataKey = async () => {
   const getDeviceDataKey = async () => {
     try {
     try {
       await getDeviceAttribute(props.deviceDetail);
       await getDeviceAttribute(props.deviceDetail);
       if (props.attr) {
       if (props.attr) {
         method.setFieldsValue({ keys: props.attr });
         method.setFieldsValue({ keys: props.attr });
+        const attrInfo = unref(deviceAttrs).find((item) => item.identifier === props.attr);
+        console.log({ attrInfo });
+        if (
+          [DataTypeEnum.IS_STRING, DataTypeEnum.IS_STRUCT].includes(
+            attrInfo?.detail.dataType.type as unknown as DataTypeEnum
+          )
+        ) {
+          mode.value = Mode.TABLE;
+        } else {
+          mode.value = Mode.CHART;
+        }
       }
       }
     } catch (error) {}
     } catch (error) {}
   };
   };
@@ -110,6 +186,7 @@
       agg: AggregateDataEnum.NONE,
       agg: AggregateDataEnum.NONE,
       limit: 7,
       limit: 7,
     });
     });
+    historyData.value = getTableHistoryData(res);
 
 
     // 判断对象是否为空
     // 判断对象是否为空
     if (!Object.keys(res).length) {
     if (!Object.keys(res).length) {
@@ -123,6 +200,10 @@
     setOptions(setChartOptions(res, selectedKeys));
     setOptions(setChartOptions(res, selectedKeys));
   };
   };
 
 
+  const switchMode = (flag: Mode) => {
+    mode.value = flag;
+  };
+
   onMounted(async () => {
   onMounted(async () => {
     await getDeviceDataKey();
     await getDeviceDataKey();
     await openHistoryPanel();
     await openHistoryPanel();
@@ -139,10 +220,60 @@
       <TimePeriodForm @register="register" />
       <TimePeriodForm @register="register" />
     </section>
     </section>
     <section class="bg-white p-3">
     <section class="bg-white p-3">
-      <div v-show="isNull" ref="chartRef" :style="{ height: '400px', width: '100%' }">
-        <Spin :spinning="loading" :absolute="true" />
-      </div>
-      <Empty v-show="!isNull" />
+      <Spin :spinning="loading" :absolute="true">
+        <div v-show="mode === Mode.CHART" class="flex h-70px items-center justify-end p-2">
+          <Tooltip title="图表模式">
+            <Button
+              :class="[mode === Mode.CHART && '!bg-blue-500 svg:text-light-50']"
+              class="!p-2 !children:flex flex justify-center items-center border-r-0"
+              @click="switchMode(Mode.CHART)"
+            >
+              <LineChartOutlined />
+            </Button>
+          </Tooltip>
+
+          <Tooltip title="列表模式">
+            <Button
+              class="!p-2 !children:flex flex justify-center items-center"
+              @click="switchMode(Mode.TABLE)"
+            >
+              <BarsOutlined />
+            </Button>
+          </Tooltip>
+        </div>
+        <div
+          v-show="isNull && mode === Mode.CHART"
+          ref="chartRef"
+          :style="{ height: '400px', width: '100%' }"
+        >
+        </div>
+        <Empty v-show="!isNull && mode === Mode.CHART" />
+
+        <BasicTable v-show="mode === Mode.TABLE" @register="registerTable">
+          <template #toolbar>
+            <div v-show="mode === Mode.TABLE" class="flex h-70px items-center justify-end p-2">
+              <Tooltip title="图表模式">
+                <Button
+                  class="!p-2 !children:flex flex justify-center items-center border-r-0"
+                  @click="switchMode(Mode.CHART)"
+                >
+                  <LineChartOutlined />
+                </Button>
+              </Tooltip>
+
+              <Tooltip title="列表模式">
+                <Button
+                  :class="[mode === Mode.TABLE && '!bg-blue-500 svg:text-light-50']"
+                  class="!p-2 !children:flex flex justify-center items-center"
+                  @click="switchMode(Mode.TABLE)"
+                >
+                  <BarsOutlined />
+                </Button>
+              </Tooltip>
+            </div>
+          </template>
+        </BasicTable>
+      </Spin>
     </section>
     </section>
   </section>
   </section>
 </template>
 </template>

@@ -18,7 +18,7 @@
   import { computed } from '@vue/reactivity';
   import { computed } from '@vue/reactivity';
   import { Specs, StructJSON } from '/@/api/device/model/modelOfMatterModel';
   import { Specs, StructJSON } from '/@/api/device/model/modelOfMatterModel';
   import { isArray, isObject } from '/@/utils/is';
   import { isArray, isObject } from '/@/utils/is';
-  import { DateTypeEnum } from '/@/components/Form/src/externalCompns/components/StructForm/config';
+  import { DataTypeEnum } from '/@/components/Form/src/externalCompns/components/StructForm/config';
 
 
   interface ReceiveMessage {
   interface ReceiveMessage {
     data: {
     data: {
@@ -136,8 +136,8 @@
       : '';
       : '';
   };
   };
 
 
-  const isStructAndTextType = (type: DateTypeEnum) => {
-    return [DateTypeEnum.IS_STRUCT, DateTypeEnum.IS_STRING].includes(type);
+  const isStructAndTextType = (type: DataTypeEnum) => {
+    return [DataTypeEnum.IS_STRUCT, DataTypeEnum.IS_STRING].includes(type);
   };
   };
 
 
   const { send, close, data } = useWebSocket(socketInfo.origin, {
   const { send, close, data } = useWebSocket(socketInfo.origin, {
@@ -170,7 +170,7 @@
               name,
               name,
               unit,
               unit,
               showHistoryDataButton: !isStructAndTextType(
               showHistoryDataButton: !isStructAndTextType(
-                dataInfo?.detail.dataType?.type as unknown as DateTypeEnum
+                dataInfo?.detail.dataType?.type as unknown as DataTypeEnum
               ),
               ),
             };
             };
           });
           });
@@ -242,13 +242,7 @@
                 <span class="text-base font-normal">{{ item.name }}</span>
                 <span class="text-base font-normal">{{ item.name }}</span>
               </template>
               </template>
               <template #extra>
               <template #extra>
-                <Button
-                  v-if="item.showHistoryDataButton"
-                  type="link"
-                  class="!p-0"
-                  @click="handleShowDetail(item)"
-                  >历史数据</Button
-                >
+                <Button type="link" class="!p-0" @click="handleShowDetail(item)">历史数据</Button>
               </template>
               </template>
               <section class="min-h-16 flex flex-col justify-between">
               <section class="min-h-16 flex flex-col justify-between">
                 <div class="flex font-bold text-lg mb-4 gap-2">
                 <div class="flex font-bold text-lg mb-4 gap-2">

@@ -48,15 +48,66 @@
       @cancel="handleCancelModal"
       @cancel="handleCancelModal"
     >
     >
       <TimePeriodForm @register="timePeriodRegister" />
       <TimePeriodForm @register="timePeriodRegister" />
-      <!-- <BasicForm @register="registerForm" /> -->
-      <div v-show="isNull" ref="chartRef" :style="{ height: '550px', width }">
-        <Loading :loading="loading" :absolute="true" />
-      </div>
-      <Empty
-        :style="{ height: '550px', width }"
-        class="flex flex-col justify-center items-center"
-        v-show="!isNull"
-      />
+      <section>
+        <Spin :spinning="loading">
+          <div v-show="mode === Mode.CHART" class="flex h-70px items-center justify-end p-2">
+            <Tooltip title="图表模式">
+              <Button
+                :class="[mode === Mode.CHART && '!bg-blue-500 svg:text-light-50']"
+                class="!p-2 !children:flex flex justify-center items-center border-r-0"
+                @click="switchMode(Mode.CHART)"
+              >
+                <LineChartOutlined />
+              </Button>
+            </Tooltip>
+
+            <Tooltip title="列表模式">
+              <Button
+                class="!p-2 !children:flex flex justify-center items-center"
+                @click="switchMode(Mode.TABLE)"
+              >
+                <BarsOutlined />
+              </Button>
+            </Tooltip>
+          </div>
+          <div
+            v-show="isNull && mode === Mode.CHART"
+            ref="chartRef"
+            :style="{ height: '400px', width }"
+          >
+          </div>
+          <Empty
+            :style="{ height: '550px', width }"
+            class="flex flex-col justify-center items-center"
+            v-show="!isNull && mode === Mode.CHART"
+          />
+
+          <BasicTable v-show="mode === Mode.TABLE" @register="registerAttrTable">
+            <template #toolbar>
+              <div v-show="mode === Mode.TABLE" class="flex h-70px items-center justify-end p-2">
+                <Tooltip title="图表模式">
+                  <Button
+                    class="!p-2 !children:flex flex justify-center items-center border-r-0"
+                    @click="switchMode(Mode.CHART)"
+                  >
+                    <LineChartOutlined />
+                  </Button>
+                </Tooltip>
+
+                <Tooltip title="列表模式">
+                  <Button
+                    :class="[mode === Mode.TABLE && '!bg-blue-500 svg:text-light-50']"
+                    class="!p-2 !children:flex flex justify-center items-center"
+                    @click="switchMode(Mode.TABLE)"
+                  >
+                    <BarsOutlined />
+                  </Button>
+                </Tooltip>
+              </div>
+            </template>
+          </BasicTable>
+        </Spin>
+      </section>
     </BasicModal>
     </BasicModal>
     <DeviceDetailDrawer
     <DeviceDetailDrawer
       @register="registerDetailDrawer"
       @register="registerDetailDrawer"
@@ -69,12 +120,21 @@
   </div>
   </div>
 </template>
 </template>
 <script lang="ts">
 <script lang="ts">
-  import { defineComponent, ref, nextTick, unref, onMounted, Ref, onUnmounted } from 'vue';
+  import {
+    defineComponent,
+    ref,
+    nextTick,
+    unref,
+    onMounted,
+    Ref,
+    onUnmounted,
+    computed,
+  } from 'vue';
   import { useScript } from '/@/hooks/web/useScript';
   import { useScript } from '/@/hooks/web/useScript';
   import { formSchema, columns } from './config.data';
   import { formSchema, columns } from './config.data';
   import { BasicTable, useTable } from '/@/components/Table';
   import { BasicTable, useTable } from '/@/components/Table';
   import { devicePage } from '/@/api/alarm/contact/alarmContact';
   import { devicePage } from '/@/api/alarm/contact/alarmContact';
-  import { Tag, Empty } from 'ant-design-vue';
+  import { Tag, Empty, Spin, Tooltip, Button } from 'ant-design-vue';
   import { DeviceState } from '/@/api/device/model/deviceModel';
   import { DeviceState } from '/@/api/device/model/deviceModel';
   import { BAI_DU_MAP_URL } from '/@/utils/fnUtils';
   import { BAI_DU_MAP_URL } from '/@/utils/fnUtils';
   import { useModal, BasicModal } from '/@/components/Modal';
   import { useModal, BasicModal } from '/@/components/Modal';
@@ -91,14 +151,14 @@
   import djh from '/@/assets/images/djh.png';
   import djh from '/@/assets/images/djh.png';
   import online from '/@/assets/images/online1.png';
   import online from '/@/assets/images/online1.png';
   import lx1 from '/@/assets/images/lx1.png';
   import lx1 from '/@/assets/images/lx1.png';
-  import Loading from '/@/components/Loading/src/Loading.vue';
   import { TimePeriodForm, useTimePeriodForm } from './cpns/TimePeriodForm';
   import { TimePeriodForm, useTimePeriodForm } from './cpns/TimePeriodForm';
   import { selectDeviceAttrSchema } from './config.data';
   import { selectDeviceAttrSchema } from './config.data';
   import { defaultSchemas } from './cpns/TimePeriodForm/config';
   import { defaultSchemas } from './cpns/TimePeriodForm/config';
   import { QueryWay, SchemaFiled, AggregateDataEnum } from './cpns/TimePeriodForm/config';
   import { QueryWay, SchemaFiled, AggregateDataEnum } from './cpns/TimePeriodForm/config';
-  import { Spin } from 'ant-design-vue';
   import { useAsyncQueue } from './useAsyncQueue';
   import { useAsyncQueue } from './useAsyncQueue';
   import { useHistoryData } from '../list/hook/useHistoryData';
   import { useHistoryData } from '../list/hook/useHistoryData';
+  import { LineChartOutlined, BarsOutlined } from '@ant-design/icons-vue';
+  import { formatToDateTime } from '/@/utils/dateUtil';
 
 
   interface DeviceInfo {
   interface DeviceInfo {
     alarmStatus: 0 | 1;
     alarmStatus: 0 | 1;
@@ -121,9 +181,12 @@
       Empty,
       Empty,
       BasicModal,
       BasicModal,
       DeviceDetailDrawer,
       DeviceDetailDrawer,
-      Loading,
       TimePeriodForm,
       TimePeriodForm,
       Spin,
       Spin,
+      Tooltip,
+      Button,
+      LineChartOutlined,
+      BarsOutlined,
     },
     },
     props: {
     props: {
       width: {
       width: {
@@ -136,6 +199,12 @@
       },
       },
     },
     },
     setup() {
     setup() {
+      enum Mode {
+        TABLE = 'table',
+        CHART = 'chart',
+      }
+
+      const mode = ref<Mode>(Mode.CHART);
       let entityId = '';
       let entityId = '';
       let globalRecord: any = {};
       let globalRecord: any = {};
       const wrapRef = ref<HTMLDivElement | null>(null);
       const wrapRef = ref<HTMLDivElement | null>(null);
@@ -149,11 +218,64 @@
       const [registerModal, { openModal }] = useModal();
       const [registerModal, { openModal }] = useModal();
       const BMapInstance = ref<Nullable<any>>(null);
       const BMapInstance = ref<Nullable<any>>(null);
 
 
+      const historyData = ref<{ ts: number; value: string; name: string }[]>([]);
+
       const loading = ref(false);
       const loading = ref(false);
 
 
       const { deviceAttrs, getDeviceKeys, getDeviceAttribute, getSearchParams, setChartOptions } =
       const { deviceAttrs, getDeviceKeys, getDeviceAttribute, getSearchParams, setChartOptions } =
         useHistoryData();
         useHistoryData();
 
 
+      const getTableHistoryData = (record: Recordable<{ ts: number; value: string }[]>) => {
+        const keys = Object.keys(record);
+        const list = keys.reduce((prev, next) => {
+          const list = record[next].map((item) => {
+            return {
+              ...item,
+              name: next,
+            };
+          });
+          return [...prev, ...list];
+        }, []);
+        return list;
+      };
+
+      const getIdentifierNameMapping = computed(() => {
+        const mapping = {};
+        unref(deviceAttrs).forEach((item) => {
+          const { identifier, name } = item;
+          mapping[identifier] = name;
+        });
+        return mapping;
+      });
+
+      const [registerAttrTable] = useTable({
+        showIndexColumn: false,
+        showTableSetting: false,
+        dataSource: historyData,
+        maxHeight: 300,
+        size: 'small',
+        columns: [
+          {
+            title: '属性',
+            dataIndex: 'name',
+            format: (text) => {
+              return unref(getIdentifierNameMapping)[text];
+            },
+          },
+          {
+            title: '值',
+            dataIndex: 'value',
+          },
+          {
+            title: '更新时间',
+            dataIndex: 'ts',
+            format: (val) => {
+              return formatToDateTime(val, 'YYYY-MM-DD HH:mm:ss');
+            },
+          },
+        ],
+      });
+
       const [registerTable] = useTable({
       const [registerTable] = useTable({
         api: devicePage,
         api: devicePage,
         columns,
         columns,
@@ -352,6 +474,7 @@
           loading.value = true;
           loading.value = true;
           const res = await getDeviceHistoryInfo({ ...searchParams, entityId });
           const res = await getDeviceHistoryInfo({ ...searchParams, entityId });
           loading.value = false;
           loading.value = false;
+          historyData.value = getTableHistoryData(res);
           // 判断数据对象是否为空
           // 判断数据对象是否为空
           if (!Object.keys(res).length) {
           if (!Object.keys(res).length) {
             isNull.value = false;
             isNull.value = false;
@@ -397,6 +520,7 @@
           limit: 7,
           limit: 7,
         });
         });
 
 
+        historyData.value = getTableHistoryData(res);
         // 判断对象是否为空
         // 判断对象是否为空
         if (!Object.keys(res).length) {
         if (!Object.keys(res).length) {
           isNull.value = false;
           isNull.value = false;
@@ -447,7 +571,13 @@
         openGatewayDetailDrawer(true, data);
         openGatewayDetailDrawer(true, data);
       };
       };
 
 
+      const switchMode = (flag: Mode) => {
+        mode.value = flag;
+      };
+
       return {
       return {
+        mode,
+        Mode,
         wrapRef,
         wrapRef,
         registerTable,
         registerTable,
         deviceRowClick,
         deviceRowClick,
@@ -464,6 +594,8 @@
         registerGatewayDetailDrawer,
         registerGatewayDetailDrawer,
         handleOpenTbDeviceDetail,
         handleOpenTbDeviceDetail,
         handleOpenGatewayDetail,
         handleOpenGatewayDetail,
+        switchMode,
+        registerAttrTable,
       };
       };
     },
     },
   });
   });

@@ -42,7 +42,7 @@ export enum AssessMode {
 /**
 /**
  * 新增参数 动态显示表单
  * 新增参数 动态显示表单
  */
  */
-export enum DateTypeEnum {
+export enum DataTypeEnum {
   IS_NUMBER_INT = 'INT',
   IS_NUMBER_INT = 'INT',
   IS_NUMBER_DOUBLE = 'DOUBLE',
   IS_NUMBER_DOUBLE = 'DOUBLE',
   IS_STRING = 'TEXT',
   IS_STRING = 'TEXT',
@@ -51,18 +51,18 @@ export enum DateTypeEnum {
 }
 }
 
 
 const isNumber = (type: string) => {
 const isNumber = (type: string) => {
-  return type === DateTypeEnum.IS_NUMBER_INT || type === DateTypeEnum.IS_NUMBER_DOUBLE;
+  return type === DataTypeEnum.IS_NUMBER_INT || type === DataTypeEnum.IS_NUMBER_DOUBLE;
 };
 };
 
 
 const isString = (type: string) => {
 const isString = (type: string) => {
-  return type === DateTypeEnum.IS_STRING;
+  return type === DataTypeEnum.IS_STRING;
 };
 };
 const isStruct = (type: string) => {
 const isStruct = (type: string) => {
-  return type === DateTypeEnum.IS_STRUCT;
+  return type === DataTypeEnum.IS_STRUCT;
 };
 };
 
 
 const isBool = (type: string) => {
 const isBool = (type: string) => {
-  return type === DateTypeEnum.IS_BOOL;
+  return type === DataTypeEnum.IS_BOOL;
 };
 };
 
 
 export const serviceSchemas = (tcpDeviceFlag: boolean): FormSchema[] => {
 export const serviceSchemas = (tcpDeviceFlag: boolean): FormSchema[] => {

 <script lang="ts" setup>
 <script lang="ts" setup>
-  import { nextTick, Ref, ref, unref } from 'vue';
+  import { computed, nextTick, Ref, ref, unref } from 'vue';
   import { getDeviceHistoryInfo } from '/@/api/alarm/position';
   import { getDeviceHistoryInfo } from '/@/api/alarm/position';
-  import { Empty, Tooltip, Button } from 'ant-design-vue';
+  import { Empty, Tooltip, Button, Spin } from 'ant-design-vue';
   import { useECharts } from '/@/hooks/web/useECharts';
   import { useECharts } from '/@/hooks/web/useECharts';
   import { AggregateDataEnum } from '/@/views/device/localtion/config.data';
   import { AggregateDataEnum } from '/@/views/device/localtion/config.data';
   import { useGridLayout } from '/@/hooks/component/useGridLayout';
   import { useGridLayout } from '/@/hooks/component/useGridLayout';
@@ -9,7 +9,6 @@
   import { DataSource } from '/@/api/dataBoard/model';
   import { DataSource } from '/@/api/dataBoard/model';
   import { useForm, BasicForm } from '/@/components/Form';
   import { useForm, BasicForm } from '/@/components/Form';
   import { formSchema, SchemaFiled } from '../config/historyTrend.config';
   import { formSchema, SchemaFiled } from '../config/historyTrend.config';
-  import { Loading } from '/@/components/Loading';
   import BasicModal from '/@/components/Modal/src/BasicModal.vue';
   import BasicModal from '/@/components/Modal/src/BasicModal.vue';
   import { useModalInner } from '/@/components/Modal';
   import { useModalInner } from '/@/components/Modal';
   import { getAllDeviceByOrg } from '/@/api/dataBoard';
   import { getAllDeviceByOrg } from '/@/api/dataBoard';
@@ -43,11 +42,7 @@
   const { setOptions, destory } = useECharts(chartRef as Ref<HTMLDivElement>);
   const { setOptions, destory } = useECharts(chartRef as Ref<HTMLDivElement>);
 
 
   function hasDeviceAttr() {
   function hasDeviceAttr() {
-    if (!unref(deviceAttrs).length) {
-      return false;
-    } else {
-      return true;
-    }
+    return !!unref(deviceAttrs).length;
   }
   }
 
 
   const [register, method] = useForm({
   const [register, method] = useForm({
@@ -107,6 +102,15 @@
     return list;
     return list;
   };
   };
 
 
+  const getIdentifierNameMapping = computed(() => {
+    const mapping = {};
+    unref(deviceAttrs).forEach((item) => {
+      const { identifier, name } = item;
+      mapping[identifier] = name;
+    });
+    return mapping;
+  });
+
   const [registerTable] = useTable({
   const [registerTable] = useTable({
     showIndexColumn: false,
     showIndexColumn: false,
     showTableSetting: false,
     showTableSetting: false,
@@ -117,6 +121,9 @@
       {
       {
         title: '属性',
         title: '属性',
         dataIndex: 'name',
         dataIndex: 'name',
+        format: (value) => {
+          return unref(getIdentifierNameMapping)[value];
+        },
       },
       },
       {
       {
         title: '值',
         title: '值',
@@ -173,7 +180,7 @@
     });
     });
     historyData.value = getTableHistoryData(res);
     historyData.value = getTableHistoryData(res);
     // 判断对象是否为空
     // 判断对象是否为空
-    if (!Object.keys(unref(historyData)).length) {
+    if (!Object.keys(res).length) {
       isNull.value = false;
       isNull.value = false;
       return;
       return;
     } else {
     } else {
@@ -261,65 +268,66 @@
         <BasicForm @register="register" />
         <BasicForm @register="register" />
       </section>
       </section>
       <section class="bg-white p-3" style="min-height: 350px">
       <section class="bg-white p-3" style="min-height: 350px">
-        <div v-show="mode === Mode.CHART" class="flex h-70px items-center justify-end p-2">
-          <Tooltip title="图表模式">
-            <Button
-              :class="[mode === Mode.CHART && '!bg-blue-500 svg:text-light-50']"
-              class="!p-2 !children:flex flex justify-center items-center border-r-0"
-              @click="switchMode(Mode.CHART)"
-            >
-              <LineChartOutlined />
-            </Button>
-          </Tooltip>
-
-          <Tooltip title="列表模式">
-            <Button
-              class="!p-2 !children:flex flex justify-center items-center"
-              @click="switchMode(Mode.TABLE)"
-            >
-              <BarsOutlined />
-            </Button>
-          </Tooltip>
-        </div>
-
-        <div
-          v-show="isNull && mode === Mode.CHART"
-          ref="chartRef"
-          :style="{ height: '350px', width: '100%' }"
-        >
-          <Loading :loading="loading" :absolute="true" />
-        </div>
-        <Empty
-          v-if="mode === Mode.CHART"
-          class="h-350px flex flex-col justify-center items-center"
-          description="暂无数据，请选择设备查询"
-          v-show="!isNull"
-        />
-
-        <BasicTable v-show="mode === Mode.TABLE" @register="registerTable">
-          <template #toolbar>
-            <div v-show="mode === Mode.TABLE" class="flex h-70px items-center justify-end p-2">
-              <Tooltip title="图表模式">
-                <Button
-                  class="!p-2 !children:flex flex justify-center items-center border-r-0"
-                  @click="switchMode(Mode.CHART)"
-                >
-                  <LineChartOutlined />
-                </Button>
-              </Tooltip>
-
-              <Tooltip title="列表模式">
-                <Button
-                  :class="[mode === Mode.TABLE && '!bg-blue-500 svg:text-light-50']"
-                  class="!p-2 !children:flex flex justify-center items-center"
-                  @click="switchMode(Mode.TABLE)"
-                >
-                  <BarsOutlined />
-                </Button>
-              </Tooltip>
-            </div>
-          </template>
-        </BasicTable>
+        <Spin :spinning="loading" :absolute="true">
+          <div v-show="mode === Mode.CHART" class="flex h-70px items-center justify-end p-2">
+            <Tooltip title="图表模式">
+              <Button
+                :class="[mode === Mode.CHART && '!bg-blue-500 svg:text-light-50']"
+                class="!p-2 !children:flex flex justify-center items-center border-r-0"
+                @click="switchMode(Mode.CHART)"
+              >
+                <LineChartOutlined />
+              </Button>
+            </Tooltip>
+
+            <Tooltip title="列表模式">
+              <Button
+                class="!p-2 !children:flex flex justify-center items-center"
+                @click="switchMode(Mode.TABLE)"
+              >
+                <BarsOutlined />
+              </Button>
+            </Tooltip>
+          </div>
+
+          <div
+            v-show="isNull && mode === Mode.CHART"
+            ref="chartRef"
+            :style="{ height: '350px', width: '100%' }"
+          >
+          </div>
+          <Empty
+            v-if="mode === Mode.CHART"
+            class="h-350px flex flex-col justify-center items-center"
+            description="暂无数据，请选择设备查询"
+            v-show="!isNull"
+          />
+
+          <BasicTable v-show="mode === Mode.TABLE" @register="registerTable">
+            <template #toolbar>
+              <div v-show="mode === Mode.TABLE" class="flex h-70px items-center justify-end p-2">
+                <Tooltip title="图表模式">
+                  <Button
+                    class="!p-2 !children:flex flex justify-center items-center border-r-0"
+                    @click="switchMode(Mode.CHART)"
+                  >
+                    <LineChartOutlined />
+                  </Button>
+                </Tooltip>
+
+                <Tooltip title="列表模式">
+                  <Button
+                    :class="[mode === Mode.TABLE && '!bg-blue-500 svg:text-light-50']"
+                    class="!p-2 !children:flex flex justify-center items-center"
+                    @click="switchMode(Mode.TABLE)"
+                  >
+                    <BarsOutlined />
+                  </Button>
+                </Tooltip>
+              </div>
+            </template>
+          </BasicTable>
+        </Spin>
       </section>
       </section>
     </section>
     </section>
   </BasicModal>
   </BasicModal>