refactor: move modals from StationCard to DashboardPage

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

@@ -0,0 +1,190 @@
+<script setup lang="ts">
+import type { Station } from '@/apis/domains';
+import type { NdmDeviceAlarmLogResultVO } from '@/apis/models';
+import { ndmDeviceAlarmLogDefaultExportByTemplate } from '@/apis/requests';
+import type { StationAlarms } from '@/composables/query';
+import { JAVA_INTEGER_MAX_VALUE } from '@/constants';
+import { DeviceType, DeviceTypeName, getDeviceTypeVal } from '@/enums/device-type';
+import { useQueryControlStore } from '@/stores/query-control';
+import { downloadByData } from '@/utils/download';
+import { useMutation } from '@tanstack/vue-query';
+import dayjs from 'dayjs';
+import { NButton, NCol, NDataTable, NModal, NRow, NSpace, NStatistic, type DataTableColumns, type DataTableRowData, type PaginationProps } from 'naive-ui';
+import { computed, h, reactive, toRefs, watch } from 'vue';
+
+interface Props {
+  station: Station;
+  stationAlarms?: StationAlarms;
+}
+
+const props = defineProps<Props>();
+const { station, stationAlarms } = toRefs(props);
+const show = defineModel<boolean>('show', { required: true, default: false });
+
+watch(show, (newValue) => {
+  const queryControlStore = useQueryControlStore();
+  if (newValue) {
+    console.log('对话框打开，停止轮询');
+    queryControlStore.disablePolling();
+  } else {
+    console.log('对话框关闭，开启轮询');
+    queryControlStore.enablePolling();
+  }
+});
+
+const alarmCount = computed(() => {
+  return Object.values(DeviceType).reduce((count, deviceType) => {
+    return count + (stationAlarms.value?.[deviceType].length ?? 0);
+  }, 0);
+});
+
+const classifiedCounts = computed(() => {
+  return Object.values(DeviceType).map<{ label: string; count: number }>((deviceType) => {
+    return {
+      label: DeviceTypeName[deviceType],
+      count: stationAlarms.value?.[deviceType].length ?? 0,
+    };
+  });
+});
+
+const tableColumns: DataTableColumns<NdmDeviceAlarmLogResultVO> = [
+  { title: '告警流水号', key: 'alarmNo' },
+  {
+    title: '告警时间',
+    key: 'alarmDate',
+    render: (rowData /* , rowIndex */) => {
+      return dayjs(Number(rowData.alarmDate ?? 0)).format('YYYY-MM-DD HH:mm:ss');
+    },
+  },
+  {
+    title: '设备类型',
+    key: 'deviceType',
+    render: (rowData) => {
+      return DeviceTypeName[getDeviceTypeVal(rowData.deviceType)];
+    },
+    filterMultiple: true,
+    filterOptions: Object.values(DeviceType).map((deviceType) => ({ label: DeviceTypeName[deviceType], value: deviceType })),
+    filter: (filterOptionValue, row) => {
+      return getDeviceTypeVal(row.deviceType) === filterOptionValue;
+    },
+  },
+  { title: '设备名称', key: 'deviceName' },
+  { title: '告警类型', key: 'alarmType', align: 'center' },
+  { title: '故障级别', key: 'faultLevel', align: 'center' },
+  { title: '故障编码', key: 'faultCode', align: 'center' },
+  { title: '故障位置', key: 'faultLocation' },
+  { title: '故障描述', key: 'faultDescription' },
+  { title: '修复建议', key: 'alarmRepairSuggestion' },
+  {
+    title: '是否恢复',
+    key: 'alarmCategory',
+    align: 'center',
+    render: (rowData) => {
+      return rowData.alarmCategory === '2' ? '是' : '否';
+    },
+    filterMultiple: false,
+    filterOptions: [
+      { label: '是', value: '2' },
+      { label: '否', value: '1' },
+    ],
+    filter: (filterOptionValue, row) => {
+      return row.alarmCategory === filterOptionValue;
+    },
+  },
+  { title: '恢复时间', key: 'updatedTime' },
+  {
+    title: '告警确认',
+    key: 'alarmConfirm',
+    align: 'center',
+    render: (rowData) => {
+      return rowData.alarmConfirm === '1' ? '已确认' : '未确认';
+    },
+    filterMultiple: false,
+    filterOptions: [
+      { label: '已确认', value: '1' },
+      { label: '未确认', value: '2' },
+    ],
+    filter: (filterOptionValue, row) => {
+      return row.alarmConfirm === filterOptionValue;
+    },
+  },
+  // { title: '设备ID', key: 'deviceId' },
+];
+
+const tablePagination = reactive<PaginationProps>({
+  size: 'small',
+  showSizePicker: true,
+  page: 1,
+  pageSize: 10,
+  pageSizes: [5, 10, 20, 50, 80, 100],
+  // itemCount: 0,
+  // pageCount: 1,
+  prefix: ({ itemCount }) => {
+    return h('div', {}, { default: () => `共${itemCount}条` });
+  },
+  onUpdatePage: (page: number) => {
+    tablePagination.page = page;
+  },
+  onUpdatePageSize: (pageSize: number) => {
+    tablePagination.pageSize = pageSize;
+    tablePagination.page = 1;
+  },
+});
+
+const tableData = computed<DataTableRowData[]>(() => stationAlarms.value?.unclassified ?? []);
+
+const { mutate: downloadTableData, isPending: isDownloading } = useMutation({
+  mutationFn: async () => {
+    const data = await ndmDeviceAlarmLogDefaultExportByTemplate(station.value.code, {
+      model: {},
+      extra: {
+        createdTime_precisest: dayjs().startOf('date').format('YYYY-MM-DD HH:mm:ss'),
+        createdTime_preciseed: dayjs().endOf('date').format('YYYY-MM-DD HH:mm:ss'),
+      },
+      current: 1,
+      size: JAVA_INTEGER_MAX_VALUE,
+      order: 'descending',
+      sort: 'id',
+    });
+    return data;
+  },
+  onSuccess: (data) => {
+    downloadByData(data, `${station.value.name}-设备告警记录.xlsx`);
+  },
+  onError: (error) => {
+    window.$message.error(error.message);
+  },
+});
+
+const exportTableData = () => downloadTableData();
+
+const onModalClose = () => {};
+</script>
+
+<template>
+  <NModal v-model:show="show" preset="card" style="width: 100vw; height: 100vh" :title="`${station.name} - 设备告警详情`" :close-on-esc="false" :mask-closable="false" @close="onModalClose">
+    <div v-if="alarmCount === 0" style="text-align: center; padding: 20px; color: #6c757d">
+      <span>当前没有设备告警</span>
+    </div>
+    <div v-else style="height: 100%; display: flex; flex-direction: column">
+      <div style="flex: 0 0 auto; margin-bottom: 16px">
+        <NRow>
+          <NCol :span="3" v-for="item in classifiedCounts" :key="item.label">
+            <NStatistic :label="item.label + '告警'" :value="item.count" />
+          </NCol>
+        </NRow>
+      </div>
+      <div style="flex: 0 0 auto; display: flex; align-items: center; padding: 8px 0">
+        <div style="font-size: medium">今日设备告警列表</div>
+        <NSpace style="margin-left: auto">
+          <NButton type="primary" :loading="isDownloading" @click="exportTableData">导出</NButton>
+        </NSpace>
+      </div>
+      <div style="flex: 1 1 auto; min-height: 0">
+        <NDataTable :columns="tableColumns" :data="tableData" :pagination="tablePagination" :single-line="false" flex-height style="height: 100%" />
+      </div>
+    </div>
+  </NModal>
+</template>
+
+<style scoped lang="scss"></style>

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

@@ -0,0 +1,237 @@
+<script lang="ts">
+// 设备参数配置在系统中的key前缀
+const DeviceConfigParamPrefix = {
+  Switch: 'SWITCH_',
+  Server: 'SERVER_',
+  Decoder: 'DECODER_',
+  Nvr: 'NVR_',
+  Box: 'BOX_',
+  Monitor: 'MONITOR_',
+} as const;
+
+type DeviceConfigParamPrefixType = (typeof DeviceConfigParamPrefix)[keyof typeof DeviceConfigParamPrefix];
+
+// 渲染时的数据结构
+interface DeviceParamItem {
+  id: string;
+  key: string;
+  name: string;
+  numValue?: number;
+  timeValue?: string;
+  suffix?: string;
+  step?: number;
+  min?: number;
+  max?: number;
+}
+
+// 一些参数值是零点几，一些参数值是好几十，需要根据参数名称中的关键词来做预处理
+const parseNumericValue = (name: string, value: string) => {
+  let val = parseFloat(value);
+  const needMultiply = name.includes('流量') || name.includes('占用率');
+  if (needMultiply) val *= 100;
+  return val;
+};
+
+// 在保存参数时需要反向处理
+const deparseNumericValue = (name: string, value: number) => {
+  let val = value;
+  const needMultiply = name.includes('流量') || name.includes('占用率');
+  if (needMultiply) val /= 100;
+  return val;
+};
+
+const getItemStep = (name: string) => {
+  if (name.includes('转速')) return 100;
+  return 1;
+};
+
+const getItemMax = (name: string) => {
+  if (name.includes('转速')) return 50000;
+  return 100;
+};
+
+const getItemSuffix = (name: string) => {
+  const percentLike = name.includes('流量') || name.includes('占用率') || name.includes('湿度');
+  const secondLike = name.includes('忽略丢失');
+  const currentLike = name.includes('电流');
+  const voltageLike = name.includes('电压');
+  const temperatureLike = name.includes('温');
+  const rpmLike = name.includes('转速');
+  if (percentLike) return '%';
+  if (secondLike) return '秒';
+  if (currentLike) return 'A';
+  if (voltageLike) return 'V';
+  if (temperatureLike) return '℃';
+  if (rpmLike) return '转/分';
+  return '';
+};
+</script>
+
+<script setup lang="ts">
+import type { Station } from '@/apis/domains';
+import { postDefParameterPage, putDefParameter } from '@/apis/requests';
+import { useQueryControlStore } from '@/stores/query-control';
+import { useMutation } from '@tanstack/vue-query';
+import { NForm, NFormItemGi, NGrid, NInputNumber, NModal, NTabPane, NTabs, NTimePicker } from 'naive-ui';
+import { ref, toRefs, watch } from 'vue';
+
+const props = defineProps<{ station: Station }>();
+const { station } = toRefs(props);
+const show = defineModel<boolean>('show', { required: true, default: false });
+
+watch(show, (newValue) => {
+  const queryControlStore = useQueryControlStore();
+  if (newValue) {
+    console.log('对话框打开，停止轮询');
+    queryControlStore.disablePolling();
+  } else {
+    console.log('对话框关闭，开启轮询');
+    queryControlStore.enablePolling();
+  }
+});
+
+const tabPanes = [
+  {
+    tab: '交换机阈值',
+    name: DeviceConfigParamPrefix.Switch,
+  },
+  {
+    tab: '服务器阈值',
+    name: DeviceConfigParamPrefix.Server,
+  },
+  {
+    tab: '解码器阈值',
+    name: DeviceConfigParamPrefix.Decoder,
+  },
+  {
+    tab: '录像机阈值',
+    name: DeviceConfigParamPrefix.Nvr,
+  },
+  {
+    tab: '安防箱阈值',
+    name: DeviceConfigParamPrefix.Box,
+  },
+  {
+    tab: '显示器计划',
+    name: DeviceConfigParamPrefix.Monitor,
+  },
+];
+const activeTabName = ref<DeviceConfigParamPrefixType>(DeviceConfigParamPrefix.Switch);
+
+const onBeforeTabLeave = (name: string, oldName: string): boolean | Promise<boolean> => {
+  saveDeviceParams({ tabName: oldName, params: deviceConfigParams.value });
+  getDeviceParams({ deviceKeyPrefix: name });
+  return true;
+};
+
+const onAfterModalEnter = () => {
+  getDeviceParams({ deviceKeyPrefix: activeTabName.value });
+};
+
+const onBeforeModalLeave = () => {
+  saveDeviceParams({ tabName: activeTabName.value, params: deviceConfigParams.value });
+};
+
+const deviceConfigParams = ref<DeviceParamItem[]>([]);
+
+const { mutate: getDeviceParams } = useMutation({
+  mutationFn: async ({ deviceKeyPrefix }: { deviceKeyPrefix: string }) => {
+    const { records } = await postDefParameterPage(station.value.code, {
+      model: {},
+      extra: { key_likeRight: deviceKeyPrefix },
+      current: 1,
+      size: 1000,
+      sort: 'id',
+      order: 'descending',
+    });
+    return records;
+  },
+  onSuccess: (records) => {
+    deviceConfigParams.value = records.map<DeviceParamItem>((record) => {
+      if (record.key?.includes(DeviceConfigParamPrefix.Monitor)) {
+        return {
+          id: record.id ?? '',
+          key: record.key ?? '',
+          name: record.name ?? '',
+          timeValue: record.value ?? '',
+        };
+      }
+      return {
+        id: record.id ?? '',
+        key: record.key ?? '',
+        name: record.name ?? '',
+        numValue: parseNumericValue(record.name ?? '', record.value ?? '0'),
+        suffix: getItemSuffix(record.name ?? ''),
+        step: getItemStep(record.name ?? ''),
+        min: 0,
+        max: getItemMax(record.name ?? ''),
+      };
+    });
+  },
+  onError: (error) => {
+    window.$message.error(error.message);
+  },
+});
+
+const { mutate: saveDeviceParams } = useMutation({
+  mutationFn: async ({ tabName, params }: { tabName: string; params: DeviceParamItem[] }) => {
+    for (const item of params) {
+      if (tabName.includes(DeviceConfigParamPrefix.Monitor)) {
+        await putDefParameter(station.value.code, {
+          id: item.id,
+          key: item.key,
+          name: item.name,
+          value: item.timeValue,
+        });
+      } else {
+        await putDefParameter(station.value.code, {
+          id: item.id,
+          key: item.key,
+          name: item.name,
+          value: `${deparseNumericValue(item.name, item.numValue ?? 0)}`,
+        });
+      }
+    }
+  },
+  onError: (error) => {
+    window.$message.error(error.message);
+  },
+});
+</script>
+
+<template>
+  <NModal
+    v-model:show="show"
+    preset="card"
+    style="width: 800px; height: 600px"
+    :title="`${station.name} - 设备参数配置`"
+    :close-on-esc="false"
+    :mask-closable="false"
+    @after-enter="onAfterModalEnter"
+    @before-leave="onBeforeModalLeave"
+  >
+    <NTabs v-model:value="activeTabName" type="card" @before-leave="onBeforeTabLeave">
+      <NTabPane v-for="pane in tabPanes" :key="pane.name" :tab="pane.tab" :name="pane.name">
+        <NForm>
+          <NGrid :cols="1">
+            <NFormItemGi v-for="item in deviceConfigParams" :key="item.key" label-placement="left" :span="1" :label="item.name">
+              <!-- 监视器计划配置渲染时间选择器，其他配置项渲染数字输入框 -->
+              <template v-if="activeTabName === DeviceConfigParamPrefix.Monitor">
+                <NTimePicker v-model:formatted-value="item.timeValue" />
+              </template>
+              <template v-else>
+                <NInputNumber v-model:value="item.numValue" :step="item.step" :min="item.min" :max="item.max" style="width: 100%">
+                  <template #suffix>
+                    <span>{{ item.suffix }}</span>
+                  </template>
+                </NInputNumber>
+              </template>
+            </NFormItemGi>
+          </NGrid>
+        </NForm>
+      </NTabPane>
+    </NTabs>
+  </NModal>
+</template>
+
+<style scoped></style>

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

@@ -0,0 +1,172 @@
+<script setup lang="ts">
+import type { Station } from '@/apis/domains';
+import type { NdmDeviceVO } from '@/apis/models';
+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, TreeProps } from 'naive-ui';
+import { computed, h, ref, toRefs, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+interface Props {
+  station: Station;
+  stationDevices?: StationDevices;
+}
+
+const props = defineProps<Props>();
+const { station, stationDevices } = toRefs(props);
+const show = defineModel<boolean>('show', { required: true, default: false });
+
+const route = useRoute();
+const router = useRouter();
+
+const queryControlStore = useQueryControlStore();
+
+watch(show, (newValue) => {
+  if (newValue) {
+    console.log('对话框打开，停止轮询');
+    queryControlStore.disablePolling();
+  } else {
+    console.log('对话框关闭，开启轮询');
+    queryControlStore.enablePolling();
+  }
+});
+
+const searchPattern = ref('');
+const searchFilter: (pattern: string, node: TreeOption) => boolean = (pattern, node) => {
+  const device = node['device'] as NdmDeviceVO | undefined;
+  const { name, ipAddress, deviceId } = device ?? {};
+  return (name ?? '').includes(pattern) || (ipAddress ?? '').includes(pattern) || (deviceId ?? '').includes(pattern);
+};
+
+const offlineDeviceCount = computed(() => {
+  let count = 0;
+  Object.values(DeviceType).forEach((deviceType) => {
+    const offlineDeviceList = stationDevices.value?.[deviceType].filter((device) => device.deviceStatus === '20') ?? [];
+    count += offlineDeviceList.length;
+  });
+  return count;
+});
+
+const classifiedCounts = computed(() => {
+  return Object.values(DeviceType).map((deviceType) => {
+    return {
+      label: DeviceTypeName[deviceType],
+      offlineCount: stationDevices.value?.[deviceType].filter((device) => device.deviceStatus === '20').length ?? 0,
+      total: stationDevices.value?.[deviceType].length ?? 0,
+    };
+  });
+});
+
+const treeData = computed<TreeOption[]>(() => {
+  return Object.values(DeviceType).map<TreeOption>((deviceType) => {
+    const offlineDeviceList = stationDevices.value?.[deviceType].filter((device) => device.deviceStatus === '20') ?? [];
+    return {
+      label: `${DeviceTypeName[deviceType]} (${offlineDeviceList.length}台)`,
+      key: deviceType,
+      children: offlineDeviceList.map<TreeOption>((device) => ({
+        label: `${device.name}`,
+        key: device.id,
+        suffix: () => `${device.ipAddress ?? '未知IP地址'}`,
+        prefix: () => {
+          return h(
+            NButton,
+            {
+              text: true,
+              size: 'tiny',
+              type: 'info',
+              onClick: () => {
+                queryControlStore.enablePolling();
+                const dev = device as NdmDeviceVO;
+                router.push({
+                  path: '/device',
+                  query: {
+                    stationCode: station.value.code,
+                    deviceType: getDeviceTypeVal(dev.deviceType),
+                    deviceDBId: dev.id,
+                    from: route.path,
+                  },
+                });
+              },
+            },
+            { default: () => h('span', '查看') },
+          );
+        },
+        device,
+      })),
+    };
+  });
+});
+
+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 = '';
+};
+</script>
+
+<template>
+  <NModal v-model:show="show" preset="card" style="width: 800px; height: 600px" :title="`${station.name} - 离线设备详情`" :close-on-esc="false" :mask-closable="false" @close="onModalClose">
+    <div v-if="offlineDeviceCount === 0" style="text-align: center; padding: 20px; color: #6c757d">
+      <span>当前没有离线设备</span>
+    </div>
+    <template v-else>
+      <div style="height: 100%; display: flex; flex-direction: column">
+        <div style="flex: 0 0 auto; margin-bottom: 16px">
+          <NRow>
+            <NCol :span="3" v-for="item in classifiedCounts" :key="item.label">
+              <NStatistic :label="item.label">
+                <template #default>
+                  <span style="font-size: smaller">{{ `${item.offlineCount}/${item.total}` }}</span>
+                </template>
+              </NStatistic>
+            </NCol>
+          </NRow>
+        </div>
+        <div style="flex: 1 1 auto; min-height: 0">
+          <NInput v-model:value="searchPattern" placeholder="搜索设备名称、设备ID或IP地址" clearable />
+          <NTree
+            :data="treeData"
+            :override-default-node-click-behavior="override"
+            :node-props="nodeProps"
+            :pattern="searchPattern"
+            :filter="searchFilter"
+            :show-irrelevant-nodes="false"
+            block-line
+            show-line
+            virtual-scroll
+            style="height: 380px"
+          />
+        </div>
+      </div>
+    </template>
+  </NModal>
+</template>
+
+<style scoped lang="scss"></style>

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

@@ -0,0 +1,189 @@
+<script setup lang="ts">
+import type { Station } from '@/apis/domains';
+import { DeviceType } from '@/enums/device-type';
+import { type StationAlarms, type StationDevices } from '@/composables/query';
+import { ControlOutlined } from '@vicons/antd';
+import { Video as VideoIcon } from '@vicons/carbon';
+import axios from 'axios';
+import { NCard, NStatistic, NTag, NGrid, NGi, NButton, NIcon, useThemeVars, NSpace, NTooltip } from 'naive-ui';
+import { toRefs, computed } from 'vue';
+
+interface Props {
+  station: Station;
+  stationDevices?: StationDevices;
+  stationAlarms?: StationAlarms;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  'open-offline-device-detail-modal': [station: Station];
+  'open-device-alarm-detail-modal': [station: Station];
+  'open-device-params-config-modal': [station: Station];
+}>();
+
+const { station, stationDevices, stationAlarms } = toRefs(props);
+
+// 计算总离线设备数量
+const offlineDeviceCount = computed(() => {
+  let count = 0;
+  Object.values(DeviceType).forEach((deviceType) => {
+    const offlineDeviceList = stationDevices.value?.[deviceType].filter((device) => device.deviceStatus === '20') ?? [];
+    count += offlineDeviceList.length;
+  });
+  return count;
+});
+const deviceCount = computed(() => {
+  let count = 0;
+  Object.values(DeviceType).forEach((deviceType) => {
+    count += stationDevices.value?.[deviceType].length ?? 0;
+  });
+  return count;
+});
+const devicAlarmCount = computed(() => {
+  let count = 0;
+  Object.values(DeviceType).forEach((deviceType) => {
+    count += stationAlarms.value?.[deviceType].length ?? 0;
+  });
+  return count;
+});
+
+// 打开对话框
+const openOfflineDeviceTreeModal = () => {
+  if (station.value.online) {
+    emit('open-offline-device-detail-modal', station.value);
+  } else {
+    window.$message.error('当前车站离线，无法查看');
+  }
+};
+const openDeviceAlarmTreeModal = () => {
+  if (station.value.online) {
+    emit('open-device-alarm-detail-modal', station.value);
+  } else {
+    window.$message.error('当前车站离线，无法查看');
+  }
+};
+const openDeviceConfigModal = () => {
+  if (station.value.online) {
+    emit('open-device-params-config-modal', station.value);
+  } else {
+    window.$message.error('当前车站离线，无法查看');
+  }
+};
+
+// 打开视频平台
+const openVideoPlatform = async () => {
+  try {
+    const response = await axios.get<Record<string, string>>('/minio/ndm/ndm-vimps.json');
+    const vimpUrl = response.data[station.value.code];
+    if (vimpUrl) {
+      window.open(vimpUrl, '_blank');
+    } else {
+      window.$message.warning(`未找到车站编码 ${station.value.code} 对应的视频平台URL`);
+      return;
+    }
+  } catch (error) {
+    console.error('获取视频平台URL失败:', error);
+    window.$message.error('获取视频平台URL失败');
+  }
+};
+
+const theme = useThemeVars();
+</script>
+
+<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">{{ station.name }}</span>
+    </template>
+    <template #header-extra>
+      <NTag :type="station.online ? 'success' : 'error'" size="small">
+        {{ station.online ? '在线' : '离线' }}
+      </NTag>
+    </template>
+    <template #default>
+      <NSpace>
+        <NTooltip trigger="hover">
+          <template #trigger>
+            <NButton text @click="openVideoPlatform">
+              <NIcon>
+                <VideoIcon />
+              </NIcon>
+            </NButton>
+          </template>
+          <template #default>
+            <span style="font-size: xx-small">打开视频平台</span>
+          </template>
+        </NTooltip>
+        <NTooltip trigger="hover">
+          <template #trigger>
+            <NButton text @click="openDeviceConfigModal">
+              <NIcon>
+                <ControlOutlined />
+              </NIcon>
+            </NButton>
+          </template>
+          <template #default>
+            <span style="font-size: xx-small">打开设备配置</span>
+          </template>
+        </NTooltip>
+      </NSpace>
+      <NGrid :cols="2" :style="{ opacity: station.online ? '1' : '0.3' }">
+        <NGi>
+          <NStatistic tabular-nums>
+            <template #label>
+              <span class="font-xx-small" :class="[station.online ? 'clickable' : '']" @click="openOfflineDeviceTreeModal">离线设备</span>
+            </template>
+            <template #default>
+              <span class="font-small">{{ offlineDeviceCount }}/{{ deviceCount }}</span>
+            </template>
+            <template #suffix>
+              <span class="font-xx-small">台</span>
+            </template>
+          </NStatistic>
+        </NGi>
+        <NGi>
+          <NStatistic tabular-nums>
+            <template #label>
+              <span class="font-xx-small" :class="[station.online ? 'clickable' : '']" @click="openDeviceAlarmTreeModal">告警记录</span>
+            </template>
+            <template #default>
+              <span class="font-small">{{ devicAlarmCount }}</span>
+            </template>
+            <template #suffix>
+              <span class="font-xx-small">条</span>
+            </template>
+          </NStatistic>
+        </NGi>
+      </NGrid>
+    </template>
+  </NCard>
+</template>
+
+<style scoped lang="scss">
+.clickable {
+  text-decoration: underline dashed;
+  cursor: pointer;
+  transition: color 0.2s ease;
+
+  &:hover {
+    color: v-bind('theme.primaryColorHover');
+  }
+}
+
+.font-xx-small {
+  font-size: xx-small;
+}
+
+.font-medium {
+  font-size: medium;
+}
+
+.font-small {
+  font-size: small;
+}
+
+.font-smaller {
+  font-size: smaller;
+}
+</style>