feat: ui

src/components/device-alarm-stat-modal.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div></div>
+</template>
+
+<style scoped></style>

src/components/offline-device-tree-modal.vue

@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import { NInput, NModal, NTree } from 'naive-ui';
+import { computed, ref, toRefs, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import type { TreeOption, TreeOverrideNodeClickBehavior } from 'naive-ui';
+import type {
+  NdmCameraResultVO,
+  NdmDecoderResultVO,
+  NdmDeviceVO,
+  NdmKeyboardResultVO,
+  NdmMediaServerResultVO,
+  NdmNvrResultVO,
+  NdmSecurityBoxResultVO,
+  NdmSwitchResultVO,
+  NdmVideoServerResultVO,
+} from '@/apis/models/device';
+import { useQueryControlStore } from '@/stores/query-control';
+import { DeviceType, DeviceTypeName } from '@/enums/device-type';
+import type { Station } from '@/apis/domains';
+
+interface Props {
+  station: Station;
+  ndmDeviceList: {
+    [DeviceType.Camera]: NdmCameraResultVO[];
+    [DeviceType.Decoder]: NdmDecoderResultVO[];
+    [DeviceType.Keyboard]: NdmKeyboardResultVO[];
+    [DeviceType.MediaServer]: NdmMediaServerResultVO[];
+    [DeviceType.Nvr]: NdmNvrResultVO[];
+    [DeviceType.SecurityBox]: NdmSecurityBoxResultVO[];
+    [DeviceType.Switch]: NdmSwitchResultVO[];
+    [DeviceType.VideoServer]: NdmVideoServerResultVO[];
+  };
+}
+
+const props = defineProps<Props>();
+const { station, ndmDeviceList } = toRefs(props);
+const show = defineModel<boolean>('show', { required: true });
+const route = useRoute();
+const router = useRouter();
+
+watch(show, (newValue) => {
+  const queryControlStore = useQueryControlStore();
+  if (newValue) {
+    console.log('对话框打开，停止轮询');
+    queryControlStore.disablePolling();
+  } else {
+    console.log('对话框关闭，开启轮询');
+    queryControlStore.enablePolling();
+  }
+});
+
+const searchPattern = ref('');
+const searchFilter: (pattern: string, node: TreeOption) => boolean = (pattern, node) => {
+  if (node.children) {
+    return node.children.some((child) => searchFilter(pattern, child));
+  }
+  const device = node['device'] as NdmDeviceVO;
+  const { name, ipAddress } = device;
+  return name?.includes(pattern) || ipAddress?.includes(pattern);
+};
+
+const offlineDeviceCount = computed(() => {
+  let count = 0;
+  Object.values(DeviceType).forEach((type) => {
+    const offlineDeviceList = ndmDeviceList.value[type].filter((device) => device.deviceStatus === '20');
+    count += offlineDeviceList.length;
+  });
+  return count;
+});
+
+const treeData = computed<TreeOption[]>(() => {
+  return Object.values(DeviceType).map<TreeOption>((type) => {
+    const offlineDeviceList = ndmDeviceList.value[type].filter((device) => device.deviceStatus === '20');
+    return {
+      label: `${DeviceTypeName[type]} (${offlineDeviceList.length}台)`,
+      key: type,
+      children: offlineDeviceList.map<TreeOption>((device) => ({
+        label: `${device.name}`,
+        key: device.deviceId,
+        suffix: () => `${device.ipAddress ?? '未知IP地址'}`,
+        isLeaf: true,
+        device,
+      })),
+    };
+  });
+});
+
+const nodeProps = ({ option }: { option: TreeOption }) => {
+  return {
+    ondblclick: () => {
+      if (option.isLeaf) {
+        const device = option['device'] as NdmDeviceVO;
+        router.push({
+          path: '/device',
+          query: {
+            stationCode: station.value.code,
+            deviceType: device.deviceType,
+            deviceId: device.deviceId,
+            from: route.path,
+          },
+        });
+      }
+    },
+  };
+};
+
+const override: TreeOverrideNodeClickBehavior = ({ option }) => {
+  if (option.children) {
+    return 'toggleExpand';
+  }
+  return 'default';
+};
+
+const onModalClose = () => {
+  searchPattern.value = '';
+};
+</script>
+
+<template>
+  <NModal v-model:show="show" preset="card" style="width: 600px; height: 500px" :title="`${station.name} - 离线设备详情`" @close="onModalClose">
+    <div v-if="offlineDeviceCount === 0" class="no-offline-devices">
+      <span>当前没有离线设备</span>
+    </div>
+    <template v-else>
+      <NInput v-model:value="searchPattern" placeholder="搜索设备名称或IP地址" clearable />
+      <NTree
+        :data="treeData"
+        :node-props="nodeProps"
+        :override-default-node-click-behavior="override"
+        :pattern="searchPattern"
+        :filter="searchFilter"
+        :show-irrelevant-nodes="false"
+        block-line
+        show-line
+        virtual-scroll
+        style="height: 380px"
+      />
+    </template>
+  </NModal>
+</template>
+
+<style scoped lang="scss">
+.no-offline-devices {
+  text-align: center;
+  padding: 20px;
+  color: #6c757d;
+}
+</style>

src/components/station-card.vue

@@ -1,54 +1,147 @@
 <script setup lang="ts">
-import { NCard, NStatistic, NTag, NIcon, NGrid, NGi } from 'naive-ui';
-import { Wifi } from '@vicons/ionicons5';
-import { toRefs } from 'vue';
+import { NCard, NStatistic, NTag, NGrid, NGi, NButton, NIcon } from 'naive-ui';
+import { Video } from '@vicons/carbon';
+import { toRefs, computed, ref } from 'vue';
+import axios from 'axios';
+import OfflineDeviceTreeModal from './offline-device-tree-modal.vue';
+import type {
+  NdmCameraResultVO,
+  NdmDecoderResultVO,
+  NdmDeviceAlarmLogResultVO,
+  NdmKeyboardResultVO,
+  NdmMediaServerResultVO,
+  NdmNvrResultVO,
+  NdmSecurityBoxResultVO,
+  NdmSwitchResultVO,
+  NdmVideoServerResultVO,
+} from '@/apis/models/device';
+import { DeviceType } from '@/enums/device-type';
+import type { Station } from '@/apis/domains';
 
-// 定义组件props
 interface Props {
-  name: string;
-  online: boolean;
-  offlineDeviceCount: number;
+  station: Station;
   alarmCount: number;
+  ndmDeviceList: {
+    [DeviceType.Camera]: NdmCameraResultVO[];
+    [DeviceType.Decoder]: NdmDecoderResultVO[];
+    [DeviceType.Keyboard]: NdmKeyboardResultVO[];
+    [DeviceType.MediaServer]: NdmMediaServerResultVO[];
+    [DeviceType.Nvr]: NdmNvrResultVO[];
+    [DeviceType.SecurityBox]: NdmSecurityBoxResultVO[];
+    [DeviceType.Switch]: NdmSwitchResultVO[];
+    [DeviceType.VideoServer]: NdmVideoServerResultVO[];
+  };
+  ndmDeviceAlarmLogList: NdmDeviceAlarmLogResultVO[];
 }
 
 const props = defineProps<Props>();
 
-const { name, online, offlineDeviceCount, alarmCount } = toRefs(props);
+const { alarmCount, ndmDeviceList, station } = toRefs(props);
+const { code, name, online } = toRefs(station.value);
+
+// 计算总离线设备数量
+const offlineDeviceCount = computed(() => {
+  let count = 0;
+  Object.values(DeviceType).forEach((type) => {
+    const offlineDeviceList = ndmDeviceList.value[type].filter((device) => device.deviceStatus === '20');
+    count += offlineDeviceList.length;
+  });
+  return count;
+});
+
+const offlineDeviceTreeModalShow = ref(false);
+
+// 打开离线设备详情对话框
+const openOfflineDeviceTreeModal = () => {
+  if (online.value) {
+    offlineDeviceTreeModalShow.value = true;
+  }
+};
+
+// 打开视频平台
+const openVideoPlatform = async () => {
+  try {
+    const response = await axios.get<Record<string, string>>('/minio/ndm/ndm-vimps.json');
+    const vimpUrl = response.data[code.value];
+    if (vimpUrl) {
+      window.open(vimpUrl, '_blank');
+    } else {
+      window.$message.warning(`未找到车站编码 ${code.value} 对应的视频平台URL`);
+      return;
+    }
+  } catch (error) {
+    console.error('获取视频平台URL失败:', error);
+    window.$message.error('获取视频平台URL失败');
+  }
+};
 </script>
 
 <template>
-  <NCard bordered hoverable size="small" :title="name" class="station-card">
+  <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>
+    </template>
     <template #header-extra>
       <NTag :type="online ? 'success' : 'error'" size="small">
-        <template #icon>
-          <NIcon><Wifi /></NIcon>
-        </template>
         {{ online ? '在线' : '离线' }}
       </NTag>
     </template>
     <template #default>
-      <NGrid :cols="2">
+      <NButton text @click="openVideoPlatform">
+        <NIcon>
+          <Video />
+        </NIcon>
+      </NButton>
+      <NGrid :cols="2" :style="{ opacity: online ? '1' : '0.3' }">
         <NGi>
-          <NStatistic label="离线设备" :value="offlineDeviceCount" :tabular-nums="true">
+          <NStatistic tabular-nums>
+            <template #label>
+              <span class="font-xx-small" :class="[online ? 'clickable' : '']" @click="openOfflineDeviceTreeModal">离线设备</span>
+            </template>
+            <template #default>
+              <span class="font-medium">{{ offlineDeviceCount }}</span>
+            </template>
             <template #suffix>
-              <span class="stat-suffix">台</span>
+              <span class="font-xx-small">台</span>
             </template>
           </NStatistic>
         </NGi>
         <NGi>
-          <NStatistic label="告警记录" :value="alarmCount" :tabular-nums="true">
+          <NStatistic tabular-nums>
+            <template #label>
+              <span class="font-xx-small">告警记录</span>
+            </template>
+            <template #default>
+              <span class="font-medium">{{ alarmCount }}</span>
+            </template>
             <template #suffix>
-              <span class="stat-suffix">条</span>
+              <span class="font-xx-small">条</span>
             </template>
           </NStatistic>
         </NGi>
       </NGrid>
     </template>
   </NCard>
+
+  <!-- TODO: 离线设备详情对话框 -->
+  <OfflineDeviceTreeModal v-model:show="offlineDeviceTreeModalShow" :station="station" :ndm-device-list="ndmDeviceList" />
 </template>
 
 <style scoped lang="scss">
-.stat-suffix {
-  font-size: 14px;
+.clickable {
+  text-decoration: underline dashed;
+  cursor: pointer;
+}
+
+.font-xx-small {
+  font-size: xx-small;
+}
+
+.font-medium {
+  font-size: medium;
+}
+
+.font-smaller {
+  font-size: smaller;
 }
 </style>