ndm-web-client/src/components/station-card.vue

<script setup lang="ts">
import DeviceAlarmDetailModal from './device-alarm-detail-modal.vue';
import DeviceParamsConfigModal from './device-params-config-modal.vue';
import OfflineDeviceDetailModal from './offline-device-detail-modal.vue';
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, ref } from 'vue';

interface Props {
  station: Station;
  stationDevices: StationDevices;
  stationAlarms: StationAlarms;
}

const props = defineProps<Props>();

const { station, stationDevices, stationAlarms } = toRefs(props);
const { code, name, online } = toRefs(station.value);

// 计算总离线设备数量
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;
  });
  return count;
});
const devicAlarmCount = computed(() => {
  let count = 0;
  Object.values(DeviceType).forEach((deviceType) => {
    count += stationAlarms.value[deviceType].length;
  });
  return count;
});

// 打开对话框
const offlineDeviceTreeModalShow = ref(false);
const deviceAlarmTreeModalShow = ref(false);
const deviceParamsConfigModalShow = ref(false);
const openOfflineDeviceTreeModal = () => {
  if (online.value) {
    offlineDeviceTreeModalShow.value = true;
  } else {
    window.$message.error('当前车站离线，无法查看');
  }
};
const openDeviceAlarmTreeModal = () => {
  if (online.value) {
    deviceAlarmTreeModalShow.value = true;
  } else {
    window.$message.error('当前车站离线，无法查看');
  }
};
const openDeviceConfigModal = () => {
  if (online.value) {
    deviceParamsConfigModalShow.value = true;
  } 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[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失败');
  }
};

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">{{ name }}</span>
    </template>
    <template #header-extra>
      <NTag :type="online ? 'success' : 'error'" size="small">
        {{ 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: online ? '1' : '0.3' }">
        <NGi>
          <NStatistic tabular-nums>
            <template #label>
              <span class="font-xx-small" :class="[online ? 'clickable' : '']" @click="openOfflineDeviceTreeModal">离线设备</span>
            </template>
            <template #default>
              <span class="font-medium">{{ 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="[online ? 'clickable' : '']" @click="openDeviceAlarmTreeModal">告警记录</span>
            </template>
            <template #default>
              <span class="font-medium">{{ devicAlarmCount }}</span>
            </template>
            <template #suffix>
              <span class="font-xx-small">条</span>
            </template>
          </NStatistic>
        </NGi>
      </NGrid>
    </template>
  </NCard>

  <!-- 离线设备详情对话框 -->
  <OfflineDeviceDetailModal v-model:show="offlineDeviceTreeModalShow" :station="station" :station-devices="stationDevices" />
  <!-- 设备告警详情对话框 -->
  <DeviceAlarmDetailModal v-model:show="deviceAlarmTreeModalShow" :station="station" :station-alarms="stationAlarms" />
  <!-- 设备配置面板对话框 -->
  <DeviceParamsConfigModal v-model:show="deviceParamsConfigModalShow" :station="station" />
</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-smaller {
  font-size: smaller;
}
</style>