fix:首页逻辑改动，待完成，暂存拉代码

+import { BasicPageParams } from './../model/baseModel';
 import { defHttp } from '/@/utils/http/axios';
 enum HomeEnum {
   home = '/homepage/left/top',
+  TenantExpireTimeList = '/homepage/right',
+  EntitiesQueryFind = '/entitiesQuery/find',
 }
 
 export const getHomeData = () => {
@@ -8,3 +11,54 @@ export const getHomeData = () => {
     url: HomeEnum.home,
   });
 };
+
+// 获取即将过期租户列表
+export const getTenantExpireTimeList = (params: BasicPageParams) => {
+  return defHttp.get({
+    url: HomeEnum.TenantExpireTimeList,
+    params,
+  });
+};
+
+// 获取entities实体ID
+export const getEntitiesId = () => {
+  return defHttp.post(
+    {
+      url: HomeEnum.EntitiesQueryFind,
+      data: {
+        entityFilter: {
+          type: 'apiUsageState',
+          resolveMultiple: false,
+        },
+        pageLink: {
+          pageSize: 1,
+          page: 0,
+          sortOrder: {
+            key: {
+              type: 'ENTITY_FIELD',
+              key: 'createdTime',
+            },
+            direction: 'DESC',
+          },
+        },
+        entityFields: [
+          {
+            type: 'ENTITY_FIELD',
+            key: 'name',
+          },
+          {
+            type: 'ENTITY_FIELD',
+            key: 'label',
+          },
+          {
+            type: 'ENTITY_FIELD',
+            key: 'additionalInfo',
+          },
+        ],
+      },
+    },
+    {
+      joinPrefix: false,
+    }
+  );
+};

-import { defHttp } from '/@/utils/http/axios';
-
-enum Api {
-  // The address does not exist
-  Error = '/error',
-}
-
-/**
- * @description: Trigger ajax error
- */
-
-export const fireErrorApi = () => defHttp.get({ url: Api.Error });

-import { defHttp } from '/@/utils/http/axios';
-
-enum Api {
-  TREE_OPTIONS_LIST = '/tree/getDemoOptions',
-}
-
-/**
- * @description: Get sample options value
- */
-export const treeOptionsListApi = (params?: Recordable) =>
-  defHttp.get<Recordable[]>({ url: Api.TREE_OPTIONS_LIST, params });

+<template>
+  <div ref="chartRef" :style="{ height, width }"></div>
+</template>
+<script lang="ts" setup>
+  import { ref, Ref, withDefaults, defineProps } from 'vue';
+  import { useECharts } from '/@/hooks/web/useECharts';
+
+  interface Props {
+    width?: string;
+    height?: string;
+  }
+  withDefaults(defineProps<Props>(), {
+    width: '100%',
+    height: '280px',
+  });
+
+  const chartRef = ref<HTMLDivElement | null>(null);
+  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+</script>

@@ -100,7 +100,9 @@
         </template>
       </Descriptions>
     </Card>
-    <BasicTable @register="registerTable" v-if="isAdmin(role)" />
+    <Card v-if="isAdmin(role)">
+      <BasicTable @register="registerTable" />
+    </Card>
   </div>
 </template>
 
@@ -125,6 +127,7 @@
   import { BasicTable, useTable } from '/@/components/Table';
   import { columns } from './props';
   import { isAdmin } from '/@/enums/roleEnum';
+  import { getTenantExpireTimeList } from '/@/api/dashboard';
   export default defineComponent({
     components: {
       Card,
@@ -179,11 +182,17 @@
       const onTabChange = (key) => {
         activeKey.value = key;
       };
-      const [registerTable] = useTable({
+
+      const [registerTable, { redoHeight }] = useTable({
+        api: getTenantExpireTimeList,
         title: '本月即将过期租户',
         showIndexColumn: false,
         useSearchForm: false,
         columns,
+        fetchSetting: {
+          listField: 'expireTenant.items',
+          totalField: 'expireTenant.total',
+        },
       });
 
       const userStore = useUserStore();
@@ -201,6 +210,7 @@
       });
       onMounted(async () => {
         if (isAdmin(props.role)) return;
+
         const res = await getEnterPriseDetail();
         const notice = await notifyMyGetrPageApi({ page: 1, pageSize: 5 });
         userStore.setEnterPriseInfo(res);
@@ -220,6 +230,7 @@
         go,
         registerTable,
         isAdmin,
+        redoHeight,
       };
     },
   });

@@ -4,128 +4,82 @@
     v-bind="$attrs"
     :active-tab-key="activeKey"
     @tabChange="onTabChange"
+    v-if="!isAdmin(role)"
   >
-    <template #tabBarExtraContent v-if="!isAdmin(role)">
+    <template #tabBarExtraContent>
       <div class="extra-date">
-        <template v-for="(item, index) in dateList" :key="item">
-          <span @click="changeDate(index)" :class="{ active: index === activeIndex }">{{
-            item
+        <template v-for="(item, index) in dateList" :key="item.value">
+          <span @click="changeDate(index, item.value)" :class="{ active: index === activeIndex }">{{
+            item.label
           }}</span>
         </template>
         <DatePicker @change="onDateChange" />
       </div>
     </template>
     <div v-if="activeKey === '1'">
-      <p class="center">{{ !isAdmin(role) ? '告警数' : '租户趋势' }}</p>
+      <p class="center">告警数</p>
+      <!-- 折线图 -->
       <VisitAnalysis v-if="!isAdmin(role)" :alarmList="state.alarmList" />
-      <VisitAnalysisBar v-else />
     </div>
     <div v-if="activeKey === '2'">
       <p class="center">消息量</p>
-      <VisitAnalysisBar :dataPointList="state.dataPointList" :messageList="state.messageList" />
+      <!-- 柱形图 -->
+      <VisitAnalysisBar
+        v-if="!isAdmin(role)"
+        :dataPointList="state.dataPointList"
+        :messageList="state.messageList"
+      />
     </div>
   </Card>
-  <Card v-bind="$attrs" :tab-list="tab1ListTitle" v-if="isAdmin(role)">
-    <p class="center">客户趋势</p>
-    <VisitAnalysis
-  /></Card>
+  <Card v-bind="$attrs" v-if="isAdmin(role)" title="租户趋势">
+    <TenantTrend />
+  </Card>
+  <Card v-bind="$attrs" v-if="isAdmin(role)" title="客户趋势">
+    <CustomerTrend />
+  </Card>
 </template>
 <script lang="ts" setup>
-  import { ref, defineExpose, reactive } from 'vue';
+  import { ref, reactive } from 'vue';
   import { Card, DatePicker } from 'ant-design-vue';
   import VisitAnalysis from './VisitAnalysis.vue';
   import VisitAnalysisBar from './VisitAnalysisBar.vue';
-  import { defineProps } from 'vue';
   import { isAdmin } from '/@/enums/roleEnum';
   import { useWebSocket } from '@vueuse/core';
   import { getAuthCache } from '/@/utils/auth';
+  import CustomerTrend from './CustomerTrend.vue';
+  import TenantTrend from './TenantTrend.vue';
   import { JWT_TOKEN_KEY } from '/@/enums/cacheEnum';
-
+  import { formatToDateTime } from '/@/utils/dateUtil';
+  import { getEntitiesId } from '/@/api/dashboard/index';
   defineExpose({
     isAdmin,
   });
-  const props = defineProps<{
+  defineProps<{
     role: string;
   }>();
   const activeKey = ref('1');
-
-  // 动态根据登录角色来判断
-  const tabListTitle = !isAdmin(props.role)
-    ? [
-        {
-          key: '1',
-          tab: '告警数统计',
-        },
-        {
-          key: '2',
-          tab: '消息量统计',
-        },
-      ]
-    : [
-        {
-          key: '1',
-          tab: '租户',
-        },
-      ];
-
-  const tab1ListTitle = [
+  let entityId = null;
+  // 图表tab切换选项卡
+  const tabListTitle = [
     {
       key: '1',
-      tab: '客户',
+      tab: '告警数统计',
+    },
+    {
+      key: '2',
+      tab: '消息量统计',
     },
   ];
-
-  const dateList = ref(['1小时', '1天', '7天', '30天']);
+  const activeIndex = ref(0);
+  const dateList = ref([
+    { label: '1小时', value: 3600000 },
+    { label: '1天', value: 86400000 },
+    { label: '7天', value: 604800000 },
+    { label: '30天', value: 2592000000 },
+  ]);
   // web Socket
   const token: string = getAuthCache(JWT_TOKEN_KEY);
-  const sendValue = JSON.stringify({
-    entityDataCmds: [
-      {
-        query: {
-          entityFilter: {
-            type: 'singleEntity',
-            singleEntity: {
-              id: '33782740-5d97-11ec-8ac9-f38ed935ea2a',
-              entityType: 'API_USAGE_STATE',
-            },
-          },
-          pageLink: {
-            pageSize: 1024,
-            page: 0,
-            sortOrder: {
-              key: {
-                type: 'ENTITY_FIELD',
-                key: 'createdTime',
-              },
-              direction: 'DESC',
-            },
-          },
-          entityFields: [
-            {
-              type: 'ENTITY_FIELD',
-              key: 'name',
-            },
-            {
-              type: 'ENTITY_FIELD',
-              key: 'label',
-            },
-            {
-              type: 'ENTITY_FIELD',
-              key: 'additionalInfo',
-            },
-          ],
-          latestValues: [
-            {
-              type: 'TIME_SERIES',
-              key: 'createdAlarmsCountHourly',
-            },
-          ],
-        },
-        cmdId: activeKey.value,
-      },
-    ],
-  });
-  const activeIndex = ref(0);
+
   const state = reactive({
     server: `${import.meta.env.VITE_WEB_SOCKET}${token}`,
     alarmList: new Array<[number, string]>(),
@@ -136,7 +90,53 @@
     MsgCount: new Array<[number, string]>(),
   });
   const { send, close } = useWebSocket(state.server, {
-    onConnected() {
+    async onConnected() {
+      const res = await getEntitiesId();
+      entityId = res.data[0].entityId;
+      const sendValue = JSON.stringify({
+        entityDataCmds: [
+          {
+            query: {
+              entityFilter: {
+                type: 'singleEntity',
+                singleEntity: entityId,
+              },
+              pageLink: {
+                pageSize: 1024,
+                page: 0,
+                sortOrder: {
+                  key: {
+                    type: 'ENTITY_FIELD',
+                    key: 'createdTime',
+                  },
+                  direction: 'DESC',
+                },
+              },
+              entityFields: [
+                {
+                  type: 'ENTITY_FIELD',
+                  key: 'name',
+                },
+                {
+                  type: 'ENTITY_FIELD',
+                  key: 'label',
+                },
+                {
+                  type: 'ENTITY_FIELD',
+                  key: 'additionalInfo',
+                },
+              ],
+              latestValues: [
+                {
+                  type: 'TIME_SERIES',
+                  key: 'createdAlarmsCountHourly',
+                },
+              ],
+            },
+            cmdId: activeKey.value,
+          },
+        ],
+      });
       send(sendValue);
       console.log('建立连接了');
     },
@@ -144,9 +144,12 @@
       const { data, update } = JSON.parse(e.data);
       if (activeKey.value === '1') {
         if (data) {
-          const { createdAlarmsCountHourly } = data.data[0].latest.TIME_SERIES;
-          state.alarmItem = [createdAlarmsCountHourly.ts, createdAlarmsCountHourly.value];
-          state.alarmList.push([createdAlarmsCountHourly.ts, createdAlarmsCountHourly.value]);
+          const alarmData = data.data[0]?.latest.TIME_SERIES;
+          if (alarmData?.createdAlarmsCountHourly) {
+            const { createdAlarmsCountHourly } = alarmData;
+            state.alarmItem = [createdAlarmsCountHourly.ts, createdAlarmsCountHourly.value];
+            state.alarmList.push([createdAlarmsCountHourly.ts, createdAlarmsCountHourly.value]);
+          }
         }
         if (update) {
           const { createdAlarmsCountHourly } = update[0].timeseries;
@@ -177,8 +180,9 @@
         }
         if (update) {
           const { transportDataPointsCountHourly, transportMsgCountHourly } = update[0].timeseries;
-          const newArray: any = [];
-          const newArray1: any = [];
+          const newArray: any[] = [];
+          const newArray1: any[] = [];
+          console.log(update[0]);
           for (const item of transportDataPointsCountHourly) {
             newArray.push([item.ts, item.value]);
           }
@@ -208,7 +212,7 @@
               endTs: 1641370336692,
               interval: 43200000,
               limit: 60,
-              agg: 'SUM',
+              agg: 'COUNT',
             },
           },
         ],
@@ -221,10 +225,7 @@
             query: {
               entityFilter: {
                 type: 'singleEntity',
-                singleEntity: {
-                  id: '33782740-5d97-11ec-8ac9-f38ed935ea2a',
-                  entityType: 'API_USAGE_STATE',
-                },
+                singleEntity: entityId,
               },
               pageLink: {
                 pageSize: 1024,
@@ -285,11 +286,42 @@
       send(sendMessageValue2);
     }
   }
-  function onDateChange(date, dateString) {
-    console.log(date, dateString);
+  function onDateChange(_, dateString) {
+    const dateTime = formatToDateTime(dateString, 'x');
+    console.log(dateTime);
   }
-  function changeDate(index: number) {
+  function changeDate(index: number, value: number) {
     activeIndex.value = index;
+    let limit;
+    if (value === 3600000 || value === 86400000) {
+      limit = 12;
+    } else if (value === 604800000) {
+      limit = 7;
+    } else if (value === 2592000000) {
+      limit = 30;
+    }
+    // 动态发送ws数据
+    const sendValue = JSON.stringify({
+      entityDataCmds: [
+        {
+          cmdId: activeKey.value,
+          historyCmd: {
+            keys:
+              activeKey.value === '1'
+                ? ['createdAlarmsCountHourly']
+                : ['transportMsgCountHourly', 'transportDataPointsCountHourly'],
+            startTs: Date.now() - value,
+            endTs: Date.now(),
+            interval: value > 3600000 ? 7200000 : 300000,
+            limit,
+            agg: 'COUNT',
+          },
+        },
+      ],
+    });
+    send(sendValue);
+
+    console.log(value);
   }
 </script>
 

+<template>
+  <div ref="chartRef" :style="{ height, width }"></div>
+</template>
+<script lang="ts" setup>
+  import { ref, Ref, withDefaults, defineProps } from 'vue';
+  import { useECharts } from '/@/hooks/web/useECharts';
+
+  interface Props {
+    width?: string;
+    height?: string;
+  }
+  withDefaults(defineProps<Props>(), {
+    width: '100%',
+    height: '280px',
+  });
+
+  const chartRef = ref<HTMLDivElement | null>(null);
+  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+</script>

@@ -23,7 +23,13 @@
     () => [props.dataPointList, props.messageList],
     ([newValue, newValue1]) => {
       setOptions({
-        tooltip: {},
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            // Use axis to trigger tooltip
+            type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
+          },
+        },
         xAxis: {
           type: 'time',
         },
@@ -39,13 +45,14 @@
           {
             name: '传输数据点',
             type: 'bar',
-            stack: 'one',
+            stack: 'total',
             data: newValue,
           },
           {
             name: '传输消息量',
             type: 'bar',
-            stack: 'one',
+            stack: 'total',
+
             data: newValue1,
           },
         ],

@@ -18,12 +18,12 @@ export const basicProps = {
 export const columns: BasicColumn[] = [
   {
     title: '租户名称',
-    dataIndex: 'tenantName',
+    dataIndex: 'name',
     width: 120,
   },
   {
     title: '过期时间',
-    dataIndex: 'createdTime',
+    dataIndex: 'tenantExpireTime',
     width: 120,
   },
 ];

@@ -10,7 +10,7 @@
       </div>
     </div>
     <div class="md:w-3/10 w-full enter-y">
-      <HelpDoc :role="role" />
+      <HelpDoc :role="role" ref="helpDocRef" />
     </div>
   </div>
 </template>
@@ -29,9 +29,22 @@
 
   const userInfo: any = getAuthCache(USER_INFO_KEY);
   const role = userInfo.roles[0];
+
   console.log(role);
   const loading = ref(true);
+  const helpDocRef = ref();
   setTimeout(() => {
     loading.value = false;
   }, 1500);
+  window.addEventListener(
+    'scroll',
+    () => {
+      const scrollBottom =
+        document.body.scrollHeight - document.body.scrollTop - document.body.clientHeight;
+      if (scrollBottom <= 0) {
+        helpDocRef.value.redoHeight();
+      }
+    },
+    true
+  );
 </script>