refactor: move modals from StationCard to DashboardPage

src/components/dashboard-page/device-alarm-detail-modal.vue

@@ -19,7 +19,7 @@ interface Props {
 
 const props = defineProps<Props>();
 const { station, stationAlarms } = toRefs(props);
-const show = defineModel<boolean>('show', { required: true });
+const show = defineModel<boolean>('show', { required: true, default: false });
 
 watch(show, (newValue) => {
   const queryControlStore = useQueryControlStore();

src/components/dashboard-page/device-params-config-modal.vue

@@ -77,7 +77,7 @@ import { ref, toRefs, watch } from 'vue';
 
 const props = defineProps<{ station: Station }>();
 const { station } = toRefs(props);
-const show = defineModel<boolean>('show', { required: true });
+const show = defineModel<boolean>('show', { required: true, default: false });
 
 watch(show, (newValue) => {
   const queryControlStore = useQueryControlStore();

src/components/dashboard-page/offline-device-detail-modal.vue

@@ -5,7 +5,7 @@ import type { StationDevices } from '@/composables/query';
 import { DeviceType, DeviceTypeName, getDeviceTypeVal } from '@/enums/device-type';
 import { useQueryControlStore } from '@/stores/query-control';
 import { NButton, NCol, NInput, NModal, NRow, NStatistic, NTree } from 'naive-ui';
-import type { TreeOption, TreeOverrideNodeClickBehavior } from 'naive-ui';
+import type { TreeOption, TreeOverrideNodeClickBehavior, TreeProps } from 'naive-ui';
 import { computed, h, ref, toRefs, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
@@ -16,13 +16,14 @@ interface Props {
 
 const props = defineProps<Props>();
 const { station, stationDevices } = toRefs(props);
-const show = defineModel<boolean>('show', { required: true });
+const show = defineModel<boolean>('show', { required: true, default: false });
 
 const route = useRoute();
 const router = useRouter();
 
+const queryControlStore = useQueryControlStore();
+
 watch(show, (newValue) => {
-  const queryControlStore = useQueryControlStore();
   if (newValue) {
     console.log('对话框打开，停止轮询');
     queryControlStore.disablePolling();
@@ -76,7 +77,6 @@ const treeData = computed<TreeOption[]>(() => {
               size: 'tiny',
               type: 'info',
               onClick: () => {
-                const queryControlStore = useQueryControlStore();
                 queryControlStore.enablePolling();
                 const dev = device as NdmDeviceVO;
                 router.push({
@@ -100,12 +100,32 @@ const treeData = computed<TreeOption[]>(() => {
 });
 
 const override: TreeOverrideNodeClickBehavior = ({ option }) => {
+  return 'none';
   if (!option['device']) {
     return 'none';
   }
   return 'default';
 };
 
+const nodeProps: TreeProps['nodeProps'] = ({ option }) => {
+  return {
+    onDblclick: (payload: MouseEvent) => {
+      payload.stopPropagation();
+      queryControlStore.enablePolling();
+      const device = option['device'] as NdmDeviceVO;
+      router.push({
+        path: '/device',
+        query: {
+          stationCode: station.value.code,
+          deviceType: getDeviceTypeVal(device.deviceType),
+          deviceDBId: device.id,
+          from: route.path,
+        },
+      });
+    },
+  };
+};
+
 const onModalClose = () => {
   searchPattern.value = '';
 };
@@ -134,6 +154,7 @@ const onModalClose = () => {
           <NTree
             :data="treeData"
             :override-default-node-click-behavior="override"
+            :node-props="nodeProps"
             :pattern="searchPattern"
             :filter="searchFilter"
             :show-irrelevant-nodes="false"

src/components/dashboard-page/station-card.vue

@@ -23,7 +23,6 @@ const emit = defineEmits<{
 }>();
 
 const { station, stationDevices, stationAlarms } = toRefs(props);
-const { code, name, online } = toRefs(station.value);
 
 // 计算总离线设备数量
 const offlineDeviceCount = computed(() => {
@@ -51,21 +50,21 @@ const devicAlarmCount = computed(() => {
 
 // 打开对话框
 const openOfflineDeviceTreeModal = () => {
-  if (online.value) {
+  if (station.value.online) {
     emit('open-offline-device-detail-modal', station.value);
   } else {
     window.$message.error('当前车站离线，无法查看');
   }
 };
 const openDeviceAlarmTreeModal = () => {
-  if (online.value) {
+  if (station.value.online) {
     emit('open-device-alarm-detail-modal', station.value);
   } else {
     window.$message.error('当前车站离线，无法查看');
   }
 };
 const openDeviceConfigModal = () => {
-  if (online.value) {
+  if (station.value.online) {
     emit('open-device-params-config-modal', station.value);
   } else {
     window.$message.error('当前车站离线，无法查看');
@@ -76,11 +75,11 @@ const openDeviceConfigModal = () => {
 const openVideoPlatform = async () => {
   try {
     const response = await axios.get<Record<string, string>>('/minio/ndm/ndm-vimps.json');
-    const vimpUrl = response.data[code.value];
+    const vimpUrl = response.data[station.value.code];
     if (vimpUrl) {
       window.open(vimpUrl, '_blank');
     } else {
-      window.$message.warning(`未找到车站编码 ${code.value} 对应的视频平台URL`);
+      window.$message.warning(`未找到车站编码 ${station.value.code} 对应的视频平台URL`);
       return;
     }
   } catch (error) {
@@ -95,11 +94,11 @@ const theme = useThemeVars();
 <template>
   <NCard bordered hoverable size="small" class="station-card" :header-style="{ padding: `6px` }" :content-style="{ padding: `0px 6px 6px 6px` }">
     <template #header>
-      <span class="font-smaller">{{ name }}</span>
+      <span class="font-smaller">{{ station.name }}</span>
     </template>
     <template #header-extra>
-      <NTag :type="online ? 'success' : 'error'" size="small">
+      <NTag :type="station.online ? 'success' : 'error'" size="small">
-        {{ online ? '在线' : '离线' }}
+        {{ station.online ? '在线' : '离线' }}
       </NTag>
     </template>
     <template #default>
@@ -129,11 +128,11 @@ const theme = useThemeVars();
           </template>
         </NTooltip>
       </NSpace>
-      <NGrid :cols="2" :style="{ opacity: online ? '1' : '0.3' }">
+      <NGrid :cols="2" :style="{ opacity: station.online ? '1' : '0.3' }">
         <NGi>
           <NStatistic tabular-nums>
             <template #label>
-              <span class="font-xx-small" :class="[online ? 'clickable' : '']" @click="openOfflineDeviceTreeModal">离线设备</span>
+              <span class="font-xx-small" :class="[station.online ? 'clickable' : '']" @click="openOfflineDeviceTreeModal">离线设备</span>
             </template>
             <template #default>
               <span class="font-small">{{ offlineDeviceCount }}/{{ deviceCount }}</span>
@@ -146,7 +145,7 @@ const theme = useThemeVars();
         <NGi>
           <NStatistic tabular-nums>
             <template #label>
-              <span class="font-xx-small" :class="[online ? 'clickable' : '']" @click="openDeviceAlarmTreeModal">告警记录</span>
+              <span class="font-xx-small" :class="[station.online ? 'clickable' : '']" @click="openDeviceAlarmTreeModal">告警记录</span>
             </template>
             <template #default>
               <span class="font-small">{{ devicAlarmCount }}</span>

src/components/device-page/switch-card.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import type { NdmSwitchResultVO } from '@/apis/models';
+import { computed, ref, toRefs } from 'vue';
+import DeviceHeaderCard from './device-header-card.vue';
+import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
+import { destr } from 'destr';
+import type { NdmSwitchDiagInfo } from '@/apis/domains';
+import DeviceHardwareCard from './device-hardware-card.vue';
+import SwitchPortCard from './switch-port-card.vue';
+
+const props = defineProps<{
+  stationCode: string;
+  ndmSwitch: NdmSwitchResultVO;
+}>();
+
+const { stationCode, ndmSwitch } = toRefs(props);
+
+const lastDiagInfo = computed(() => {
+  const result = destr<NdmSwitchDiagInfo>(ndmSwitch.value.lastDiagInfo);
+  if (!result) return null;
+  if (typeof result !== 'object') return null;
+  return result;
+});
+
+const cpuUsage = computed(() => lastDiagInfo.value?.cpuRatio);
+const memUsage = computed(() => lastDiagInfo.value?.memoryRatio);
+
+const portInfoList = computed(() => lastDiagInfo.value?.info.portInfoList ?? []);
+
+const selectedTab = ref('设备状态');
+</script>
+
+<template>
+  <NCard size="small">
+    <NTabs v-model:value="selectedTab" size="small">
+      <NTabPane name="设备状态">
+        <NFlex vertical>
+          <DeviceHeaderCard :device="ndmSwitch" />
+          <DeviceHardwareCard :cpu-usage="cpuUsage" :mem-usage="memUsage" />
+          <SwitchPortCard :port-info-list="portInfoList" />
+          <pre style="width: 500px; height: 400px; overflow: auto">{{ lastDiagInfo }}</pre>
+        </NFlex>
+      </NTabPane>
+      <NTabPane name="诊断记录" tab="诊断记录"></NTabPane>
+      <NTabPane name="设备配置" tab="设备配置"></NTabPane>
+    </NTabs>
+  </NCard>
+</template>
+
+<style scoped lang="scss"></style>

src/pages/dashboard-page.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { Station } from '@/apis/domains';
-import DeviceAlarmDetailModal from '@/components/device-alarm-detail-modal.vue';
+import DeviceAlarmDetailModal from '@/components/dashboard-page/device-alarm-detail-modal.vue';
-import DeviceParamsConfigModal from '@/components/device-params-config-modal.vue';
+import DeviceParamsConfigModal from '@/components/dashboard-page/device-params-config-modal.vue';
-import OfflineDeviceDetailModal from '@/components/offline-device-detail-modal.vue';
+import OfflineDeviceDetailModal from '@/components/dashboard-page/offline-device-detail-modal.vue';
-import StationCard from '@/components/station-card.vue';
+import StationCard from '@/components/dashboard-page/station-card.vue';
 import { useLineAlarmsQuery, useLineDevicesQuery } from '@/composables/query';
 import { useStationStore } from '@/stores/station';
 import { useLineDevicesStore } from '@/stores/line-devices';