feat(views): 实时监测页面中设备配置对话框可点击跳转设备工况

src/views/device-group/DeviceGroup.vue

@@ -39,11 +39,23 @@ watch(deviceGroupId, () => {
   refreshView();
 });
 
+watch(
+  () => route.query.r,
+  () => {
+    setActiveKey();
+    refreshView();
+  },
+);
+
 onMounted(() => {
-  activeKey.value = (route.query.tab as string) ?? aiSmartCtrlTabs.value[0].key;
+  setActiveKey();
   refreshView();
 });
 
+const setActiveKey = () => {
+  activeKey.value = (route.query.tab as string) ?? aiSmartCtrlTabs.value[0].key;
+};
+
 const handleTabClick = (activeKey: string | number) => {
   router.replace({
     path: route.path,

src/views/device-work-status/DeviceWorkStatus.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { onMounted, ref, useTemplateRef } from 'vue';
-import { useRouter } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import { useInfiniteScroll } from '@vueuse/core';
 
 import SvgIcon from '@/components/SvgIcon.vue';
@@ -18,8 +18,10 @@ import type { DevGroupTabCompProps, DevicesListItem, DeviceTypeCount, PageParams
 const props = defineProps<DevGroupTabCompProps>();
 
 const router = useRouter();
+const route = useRoute();
 const { isLoading, handleRequest } = useRequest();
 const deviceTypes = ref<DeviceTypeCount[]>([]);
+const activeDeviceId = ref<number>();
 const activeDeviceType = ref<DeviceType>(DeviceType.空);
 const activeDeviceStatus = ref<DeviceStatusQuery>(DeviceStatusQuery.All);
 
@@ -34,7 +36,26 @@ onMounted(() => {
     ]);
 
     if (deviceTypes.value.length) {
-      activeDeviceType.value = deviceTypes.value[0].deviceType;
+      if (route.query.deviceType && route.query.deviceId) {
+        const deviceType = Number(route.query.deviceType);
+        const isDeviceTypeExisted = deviceTypes.value.find((item) => item.deviceType === deviceType);
+
+        if (isDeviceTypeExisted) {
+          activeDeviceId.value = Number(route.query.deviceId);
+          activeDeviceType.value = deviceType;
+
+          router.replace({
+            path: route.path,
+            query: {
+              tab: 'deviceWorkStatus',
+              r: route.query.r,
+            },
+          });
+        }
+      } else {
+        activeDeviceType.value = deviceTypes.value[0].deviceType;
+      }
+
       getDeviceList();
     }
   });

src/views/real-time-monitor/DeviceCtrlModal.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
 import { Modal } from 'ant-design-vue';
 
 import SvgIcon from '@/components/SvgIcon.vue';
@@ -166,6 +167,26 @@ const handleStartStopSwitch = () => {
   });
 };
 
+const router = useRouter();
+
+const goDevWorkStatus = () => {
+  if (!props.info?.deviceQueryVo) {
+    return;
+  }
+
+  const { id, groupId, deviceType } = props.info.deviceQueryVo;
+
+  router.push({
+    path: `/ai-smart-ctrl/device-group/${groupId}`,
+    query: {
+      tab: 'deviceWorkStatus',
+      deviceId: id,
+      deviceType,
+      r: Date.now(),
+    },
+  });
+};
+
 defineExpose({
   showView,
   hideView,
@@ -184,7 +205,7 @@ defineExpose({
     <template #title>
       <div class="dev-ctrl-modal-header">
         <span>{{ info?.deviceQueryVo.deviceName }}</span>
-        <span class="dev-ctrl-modal-operate">
+        <span class="dev-ctrl-modal-operate" @click="goDevWorkStatus">
           {{ $t('common.viewMore') }}
           <SvgIcon name="right" />
         </span>