perf(views): 新增站内通知功能

src/layout/HvacAside.vue

@@ -1,17 +1,18 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, useTemplateRef } from 'vue';
+import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { message } from 'ant-design-vue';
 import Simplebar from 'simplebar-vue';
 
 import SvgIcon from '@/components/SvgIcon.vue';
+import { useRequest } from '@/hooks/request';
 import { dataCenterRoutes, opsCenterRoutes } from '@/router';
 import { t } from '@/i18n';
-import { getPageList } from '@/api';
+import { getNoticePageList, getPageList, getUnreadNotifications } from '@/api';
 import { translateNavigation } from '@/utils';
 
 import type { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
-import type { DeviceGroupItem, PageParams } from '@/types';
+import type { DeviceGroupItem, NoticePageItem, PageParams } from '@/types';
 
 const router = useRouter();
 const route = useRoute();
@@ -20,13 +21,15 @@ const selectedKeys = ref<string[]>([route.path]);
 const openKeys = ref<string[]>([]);
 const deviceGroupList = ref<DeviceGroupItem[]>([]);
 const messageOpen = ref<boolean>(false);
-const messageList = ref([]);
+const messageList = ref<NoticePageItem[]>([]);
 const messageParam = ref<PageParams>({
   pageIndex: 1,
   pageSize: 10,
 });
 const messageTotal = ref<number>();
-
+const { handleRequest } = useRequest();
+let timer: number | null = null; // 保存定时器ID
+const countNumber = ref<number>();
 const menuGroupList = computed(() => {
   return [
     {
@@ -43,30 +46,43 @@ const menuGroupList = computed(() => {
 const messageColumns = [
   {
     title: '报警内容',
-    dataIndex: 'name',
-    key: 'name',
+    dataIndex: 'content',
+    key: 'content',
     ellipsis: true,
   },
   {
     title: '二级设备分组/事件名称',
-    dataIndex: 'name1',
-    key: 'name1',
+    dataIndex: 'name',
+    key: 'name',
     ellipsis: true,
   },
   {
     title: '设备/监测点',
-    dataIndex: 'name2',
-    key: 'name2',
+    dataIndex: 'dev',
+    key: 'dev',
     ellipsis: true,
   },
   {
     title: '时间',
-    dataIndex: 'Time',
-    key: 'Time',
+    dataIndex: 'createTime',
+    key: 'createTime',
     ellipsis: true,
   },
 ];
 
+const getNoticeNumber = () => {
+  handleRequest(async () => {
+    countNumber.value = await getUnreadNotifications();
+  });
+};
+
+// 启动定时器
+const startTimer = () => {
+  timer = setInterval(() => {
+    getNoticeNumber();
+  }, 10000) as unknown as number;
+};
+
 onMounted(async () => {
   try {
     const data = await getPageList();
@@ -78,10 +94,16 @@ onMounted(async () => {
 
     console.error(err);
   }
-
+  getNoticeNumber();
+  startTimer();
   openSelectedSubMenu();
 });
 
+// 组件卸载前清理定时器
+onBeforeUnmount(() => {
+  if (timer) clearInterval(timer);
+});
+
 const openSelectedSubMenu = () => {
   setTimeout(() => {
     const menuEl = menuRef.value?.$el as HTMLElement | undefined;
@@ -118,14 +140,38 @@ const handleMenuClick = (menu: MenuInfo) => {
 };
 
 const collapsed = ref<boolean>(false);
-
+const getNoticeList = () => {
+  handleRequest(async () => {
+    const { records, total } = await getNoticePageList(messageParam.value);
+    messageList.value = records;
+    messageTotal.value = total;
+  });
+};
 const toggleCollapsed = () => {
   collapsed.value = !collapsed.value;
 };
 const addInformation = () => {
+  getNoticeList();
   messageOpen.value = true;
 };
-const messageChange = () => {};
+const messageChange = () => {
+  getNoticeList();
+};
+const clickNavigateMonitor = (monitorId: number, parentDevGroupId: number, devGroupId: number) => {
+  if (monitorId) {
+    router.push({
+      path: '/env-monitor/index',
+      query: { monitorId, parentDevGroupId, devGroupId }, // 查询参数
+    });
+    messageOpen.value = false;
+  }
+};
+const clickNavigateGroup = (devGroupId: number) => {
+  if (devGroupId) {
+    router.push(`/ai-smart-ctrl/device-group/${devGroupId}`);
+    messageOpen.value = false;
+  }
+};
 </script>
 
 <template>
@@ -212,7 +258,7 @@ const messageChange = () => {};
       <div v-show="!collapsed">
         <SvgIcon name="setting" />
         <span @click="addInformation">
-          <ABadge count="5">
+          <ABadge :count="countNumber">
             <SvgIcon name="information" />
           </ABadge>
         </span>
@@ -225,7 +271,17 @@ const messageChange = () => {};
     <ATable class="table-margin" :columns="messageColumns" :data-source="messageList" :pagination="false">
       <template #bodyCell="{ column, record }">
         <template v-if="column.key === 'name'">
-          <span>{{ record.name }}</span>
+          <span class="text-style" v-if="record.type === 1" @click="clickNavigateGroup(record.devGroupId)">{{
+            record.groupName
+          }}</span>
+        </template>
+        <template v-if="column.key === 'dev'">
+          <span
+            class="text-style"
+            v-if="record.type === 1"
+            @click="clickNavigateMonitor(record.monitorId, record.parentDevGroupId, record.devGroupId)"
+            >{{ record.monitorName }}</span
+          >
         </template>
       </template>
     </ATable>
@@ -257,6 +313,17 @@ const messageChange = () => {};
 </style>
 
 <style lang="scss" scoped>
+.text-style {
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 22px;
+  color: var(--antd-color-primary);
+  text-align: left;
+  text-decoration-line: underline;
+  cursor: pointer;
+}
+
 :deep(.aside-footer) {
   .ant-badge .ant-badge-count {
     min-width: 15px;

src/types/index.ts

@@ -2335,4 +2335,10 @@ export interface NoticePageItem {
   devGroupId: number;
   content: string;
   readStatus: boolean;
+  groupName: string;
+  monitorId: number;
+  monitorName: string;
+  deviceIds: number;
+  deviceName: string;
+  parentDevGroupId: number;
 }

src/views/env-monitor/EnvMonitor.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, nextTick, onMounted, onUnmounted, ref, useTemplateRef, watch } from 'vue';
+import { useRoute } from 'vue-router';
 import BScroll from '@better-scroll/core';
 import MouseWheel from '@better-scroll/mouse-wheel';
 import { message } from 'ant-design-vue';
@@ -113,7 +114,7 @@ const timeList = ref<TimeList[]>([]);
 const timeLineIndex = ref<number>(0);
 const chooseTime = ref<string>();
 const alarmHistoryList = ref<AlarmHistoryItem[]>([]);
-
+const route = useRoute();
 const monitoringForm = ref<MonitoringForm>({
   name: '',
   tempHumidityControlMode: '2',
@@ -302,13 +303,24 @@ const addAllGatewayList = (value: number) => {
     }
 
     const data = await getDeviceGroupList(item);
+
+    const { devGroupId, parentDevGroupId } = route.query;
+
     if (data.length) {
       if (value === -1) {
         oneDeviceGroup.value = data;
-        gradeOne.value = data[0].id;
+        if (Number(parentDevGroupId)) {
+          gradeOne.value = Number(parentDevGroupId);
+        } else {
+          gradeOne.value = data[0].id;
+        }
       } else {
         twoDeviceGroup.value = data;
-        gradeTwo.value = data[0].id;
+        if (Number(devGroupId)) {
+          gradeTwo.value = Number(devGroupId);
+        } else {
+          gradeTwo.value = data[0].id;
+        }
       }
     }
   });
@@ -357,7 +369,13 @@ const getRegionsPointsList = (value: number, show: boolean) => {
 
           return priority1 - priority2;
         });
-        monitoringId.value = monitoringPointData.value[0].id;
+
+        const monitorId = Number(route.query.monitorId);
+        if (monitorId) {
+          monitoringId.value = monitorId;
+        } else {
+          monitoringId.value = monitoringPointData.value[0].id;
+        }
         selectId.value = monitoringPointData.value[0].regionId;
       } else {
         selectId.value = data[0].id;
@@ -954,6 +972,18 @@ watch(
   },
 );
 
+watch(
+  () => route.query,
+  (count) => {
+    if (count) {
+      const { devGroupId, monitorId, parentDevGroupId } = route.query;
+      gradeOne.value = Number(parentDevGroupId);
+      gradeTwo.value = Number(devGroupId);
+      monitoringId.value = Number(monitorId);
+    }
+  },
+);
+
 onMounted(() => {
   addAllGatewayList(-1);
   getDeviceGroup();