feat: data component history trend add table mode

ww
1 parent 5e373602
Showing 2 changed files with 137 additions and 26 deletions
src/views/visual/board/detail/components/BasicConfiguration.vue
src/views/visual/board/detail/components/HistoryTrendModal.vue
--- a/src/views/visual/board/detail/components/BasicConfiguration.vue
View file @179744a
+++ b/src/views/visual/board/detail/components/BasicConfiguration.vue
View file @179744a
@@ -289,7 +289,7 @@
     <Alert type="info" show-icon v-if="isMapComponent">
       <template #description>
         <div>
-          地图组件，需绑定两个数据源，且数据源为同一设备。第一数据源为经度，第二数据源为维度，否则地图组件不能正常显示。
+          地图组件，需绑定两个数据源，且数据源为同一设备。第一数据源为经度，第二数据源为纬度，否则地图组件不能正常显示。
         </div>
       </template>
     </Alert>
--- a/src/views/visual/board/detail/components/HistoryTrendModal.vue
View file @179744a
+++ b/src/views/visual/board/detail/components/HistoryTrendModal.vue
View file @179744a
 <script lang="ts" setup>
   import { nextTick, Ref, ref, unref } from 'vue';
   import { getDeviceHistoryInfo } from '/@/api/alarm/position';
-  import { Empty } from 'ant-design-vue';
+  import { Empty, Tooltip, Button } from 'ant-design-vue';
   import { useECharts } from '/@/hooks/web/useECharts';
   import { AggregateDataEnum } from '/@/views/device/localtion/config.data';
   import { useGridLayout } from '/@/hooks/component/useGridLayout';
@@ -14,17 +14,29 @@
   import { useModalInner } from '/@/components/Modal';
   import { getAllDeviceByOrg } from '/@/api/dataBoard';
   import { useHistoryData } from '/@/views/device/list/hook/useHistoryData';
+  import { BasicTable, useTable } from '/@/components/Table';
+  import { LineChartOutlined, BarsOutlined } from '@ant-design/icons-vue';
+  import { formatToDateTime } from '/@/utils/dateUtil';
   type DeviceOption = Record<'label' | 'value' | 'organizationId', string>;
   defineEmits(['register']);
+  enum Mode {
+    TABLE = 'table',
+    CHART = 'chart',
+  }
+
+  const mode = ref<Mode>(Mode.CHART);
+
   const chartRef = ref();
   const loading = ref(false);
   const isNull = ref(false);
+  const historyData = ref<{ ts: number; value: string; name: string }[]>([]);
+
   const { deviceAttrs, getDeviceKeys, getSearchParams, setChartOptions, getDeviceAttribute } =
     useHistoryData();
@@ -52,30 +64,74 @@
       loading: loading as unknown as boolean,
     },
     async submitFunc() {
-      // 表单验证
-      await method.validate();
-      const value = method.getFieldsValue();
-      const searchParams = getSearchParams(value);
-      if (!hasDeviceAttr()) return;
-      // 发送请求
-      loading.value = true;
-      const res = await getDeviceHistoryInfo(searchParams);
-      loading.value = false;
-      // 判断数据对象是否为空
-      if (!Object.keys(res).length) {
-        isNull.value = false;
-        return;
-      } else {
-        isNull.value = true;
-      }
-
-      const selectedKeys = unref(deviceAttrs).find(
-        (item) => item.identifier === value[SchemaFiled.KEYS]
-      );
-      setOptions(setChartOptions(res, selectedKeys));
+      search();
     },
   });
+  const search = async () => {
+    // 表单验证
+    await method.validate();
+    const value = method.getFieldsValue();
+    const searchParams = getSearchParams(value);
+    if (!hasDeviceAttr()) return;
+    // 发送请求
+    loading.value = true;
+    const res = await getDeviceHistoryInfo(searchParams);
+    historyData.value = getTableHistoryData(res);
+    loading.value = false;
+    // 判断数据对象是否为空
+    if (!Object.keys(res).length) {
+      isNull.value = false;
+      return;
+    } else {
+      isNull.value = true;
+    }
+
+    const selectedKeys = unref(deviceAttrs).find(
+      (item) => item.identifier === value[SchemaFiled.KEYS]
+    );
+    setOptions(setChartOptions(res, selectedKeys));
+  };
+
+  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 [registerTable] = useTable({
+    showIndexColumn: false,
+    showTableSetting: false,
+    dataSource: historyData,
+    maxHeight: 300,
+    size: 'small',
+    columns: [
+      {
+        title: '属性',
+        dataIndex: 'name',
+      },
+      {
+        title: '值',
+        dataIndex: 'value',
+      },
+      {
+        title: '更新时间',
+        dataIndex: 'ts',
+        format: (val) => {
+          return formatToDateTime(val, 'YYYY-MM-DD HH:mm:ss');
+        },
+      },
+    ],
+  });
+
   const getDeviceDataKey = async (record: DeviceOption) => {
     const { organizationId, value } = record;
     try {
@@ -115,9 +171,9 @@
       agg: AggregateDataEnum.NONE,
       limit: 7,
     });
-
+    historyData.value = getTableHistoryData(res);
     // 判断对象是否为空
-    if (!Object.keys(res).length) {
+    if (!Object.keys(unref(historyData)).length) {
       isNull.value = false;
       return;
     } else {
@@ -181,6 +237,10 @@
   const handleCancel = () => {
     destory();
   };
+
+  const switchMode = (flag: Mode) => {
+    mode.value = flag;
+  };
 </script>
 <template>
@@ -201,14 +261,65 @@
         <BasicForm @register="register" />
       </section>
       <section class="bg-white p-3" style="min-height: 350px">
-        <div v-show="isNull" ref="chartRef" :style="{ height: '350px', width: '100%' }">
+        <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>
       </section>
     </section>
   </BasicModal>