ndm-web-client/src/components/device-page/device-card/history-diag-card/security-box-history-diag-card.vue

<script setup lang="ts">
import type { NdmSecurityBoxResultVO } from '@/apis/models';
import dayjs from 'dayjs';
import { NButton, NCard, NDatePicker, NFlex, NGi, NGrid, NSelect, type DatePickerProps, type SelectOption } from 'naive-ui';
import { computed, onMounted, reactive, ref, toRefs, useTemplateRef } from 'vue';

import DeviceStatusHistoryDiagCard from './device-status-history-diag-card.vue';
import DeviceAlarmHistoryDiagCard from './device-alarm-history-diag-card.vue';
import DeviceUsageHistoryDiagCard from './device-usage-history-diag-card.vue';
import SecurityBoxRuntimeHistoryDiagCard from './security-box-runtime-history-diag-card.vue';

const props = defineProps<{
  stationCode: string;
  ndmSecurityBox: NdmSecurityBoxResultVO;
}>();

const { stationCode, ndmSecurityBox } = toRefs(props);

const searchFields = reactive({
  dateTimeRange: undefined as DatePickerProps['value'],
});
const onDateChange = (value: [number, number] | null) => {
  if (!value) {
    return;
  }
  const [start, end] = value;
  const diffDays = dayjs(end).diff(dayjs(start), 'day');
  if (diffDays > 7) {
    // 如果超过7天，自动调整结束时间
    const adjustedEnd = dayjs(start).add(7, 'day').valueOf();
    searchFields.dateTimeRange = [start, adjustedEnd];
    window.$message.warning('时间范围不能超过7天，已自动调整');
  } else {
    searchFields.dateTimeRange = value;
  }
};

type DeviceStatusHistoryDiagCardInst = InstanceType<typeof DeviceStatusHistoryDiagCard> | null;
type DeviceAlarmHistoryDiagCardInst = InstanceType<typeof DeviceAlarmHistoryDiagCard> | null;
type DeviceUsageHistoryDiagCardInst = InstanceType<typeof DeviceUsageHistoryDiagCard> | null;
type SecurityBoxRuntimeHistoryDiagCardInst = InstanceType<typeof SecurityBoxRuntimeHistoryDiagCard> | null;
const deviceStatusHistoryDiagCardRef = useTemplateRef<DeviceStatusHistoryDiagCardInst>('deviceStatusHistoryDiagCardRef');
const deviceAlarmHistoryDiagCardRef = useTemplateRef<DeviceAlarmHistoryDiagCardInst>('deviceAlarmHistoryDiagCardRef');
const deviceUsageHistoryDiagCardRef = useTemplateRef<DeviceUsageHistoryDiagCardInst>('deviceUsageHistoryDiagCardRef');
const securityBoxRuntimeHistoryDiagCardRef = useTemplateRef<SecurityBoxRuntimeHistoryDiagCardInst>('securityBoxCircuitHistoryDiagCardRef');

function refreshData() {
  deviceStatusHistoryDiagCardRef.value?.refresh();
  deviceAlarmHistoryDiagCardRef.value?.refresh();
  deviceUsageHistoryDiagCardRef.value?.refresh();
  securityBoxRuntimeHistoryDiagCardRef.value?.refresh();
}

const loading = computed(() => {
  return (
    deviceStatusHistoryDiagCardRef.value?.isPending ||
    deviceAlarmHistoryDiagCardRef.value?.isPending ||
    deviceUsageHistoryDiagCardRef.value?.isPending ||
    securityBoxRuntimeHistoryDiagCardRef.value?.isPending
  );
});

onMounted(() => {
  const now = dayjs();
  const todayEnd = now.endOf('date');
  const weekAgo = now.subtract(1, 'week').startOf('date');
  searchFields.dateTimeRange = [weekAgo.valueOf(), todayEnd.valueOf()];
  refreshData();
});

const diagCards = ref<SelectOption[]>([
  { label: '设备状态', value: 'status' },
  { label: '设备告警', value: 'alarm' },
  { label: '硬件使用率', value: 'usage' },
  { label: '运行情况', value: 'runtime' },
]);

const selectedCards = ref<string[]>([...diagCards.value.map((option) => `${option.value ?? ''}`)]);
</script>

<template>
  <NCard size="small">
    <NFlex vertical>
      <NCard size="small">
        <NFlex justify="space-between" :wrap="false">
          <NGrid :x-gap="8" :y-gap="8">
            <NGi :span="20">
              <NDatePicker v-model:value="searchFields.dateTimeRange" type="datetimerange" @update:value="onDateChange" />
            </NGi>
            <NGi :span="20">
              <NSelect v-model:value="selectedCards" multiple :options="diagCards" />
            </NGi>
          </NGrid>
          <NButton secondary :loading="loading" @click="refreshData">刷新数据</NButton>
        </NFlex>
      </NCard>

      <DeviceStatusHistoryDiagCard
        v-if="selectedCards.includes('status')"
        :ref="'deviceStatusHistoryDiagCardRef'"
        :station-code="stationCode"
        :ndm-device="ndmSecurityBox"
        :date-time-range="searchFields.dateTimeRange"
      />
      <DeviceAlarmHistoryDiagCard
        v-if="selectedCards.includes('alarm')"
        :ref="'deviceAlarmHistoryDiagCardRef'"
        :station-code="stationCode"
        :ndm-device="ndmSecurityBox"
        :date-time-range="searchFields.dateTimeRange"
      />
      <DeviceUsageHistoryDiagCard
        v-if="selectedCards.includes('usage')"
        :ref="'deviceUsageHistoryDiagCardRef'"
        :station-code="stationCode"
        :ndm-device="ndmSecurityBox"
        :date-time-range="searchFields.dateTimeRange"
        :cpu-usage-field="'stCommonInfo.CPU使用率'"
        :mem-usage-field="'stCommonInfo.内存使用率'"
      />
      <SecurityBoxRuntimeHistoryDiagCard
        v-if="selectedCards.includes('runtime')"
        :ref="'securityBoxCircuitHistoryDiagCardRef'"
        :station-code="stationCode"
        :ndm-security-box="ndmSecurityBox"
        :date-time-range="searchFields.dateTimeRange"
      />
    </NFlex>
  </NCard>
</template>

<style scoped lang="scss"></style>