fe.ems.vue3/src/views/ne/neQuickSetup/components/StepFinish.vue

<script setup lang="ts">
import { reactive, onMounted } from 'vue';
import useI18n from '@/hooks/useI18n';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { stateNeInfo } from '@/api/ne/neInfo';
import { stepState } from '../hooks/useStep';
const { t } = useI18n();

/**状态数据 */
const state = reactive({
  data: {} as Record<string, any>,
  resoures: {} as Record<string, any>,
});

function getNeState() {
  // 读取第二步的网元信息
  const stepNeInfo = stepState.states[1].from;
  stateNeInfo(stepNeInfo.neType, stepNeInfo.neId).then(res => {
    // 单文件内容
    if (res.code === RESULT_CODE_SUCCESS) {
      state.data = res.data;

      let sysCpuUsage = 0;
      let nfCpuUsage = 0;
      if (res.data.cpu) {
        nfCpuUsage = res.data.cpu.nfCpuUsage;
        if (nfCpuUsage > 100) {
          const nfCpu = +(res.data.cpu.nfCpuUsage / 100);
          if (nfCpu > 100) {
            nfCpuUsage = 100;
          } else {
            nfCpuUsage = +nfCpu.toFixed(2);
          }
        }

        sysCpuUsage = res.data.cpu.sysCpuUsage;
        if (sysCpuUsage > 100) {
          const sysCpu = +(res.data.cpu.sysCpuUsage / 100);
          if (sysCpu > 100) {
            sysCpuUsage = 100;
          } else {
            sysCpuUsage = +sysCpu.toFixed(2);
          }
        }
      }

      let sysMemUsage = 0;
      if (res.data.mem) {
        let men = res.data.mem.sysMemUsage;
        if (men > 100) {
          men = +(men / 100).toFixed(2);
        }
        sysMemUsage = men;
      }

      let sysDiskUsage = 0;
      if (res.data.disk && Array.isArray(res.data.disk.partitionInfo)) {
        let disks: any[] = res.data.disk.partitionInfo;
        disks = disks.sort((a, b) => +b.used - +a.used);
        if (disks.length > 0) {
          const { total, used } = disks[0];
          sysDiskUsage = +((used / total) * 100).toFixed(2);
        }
      }

      Reflect.set(state, 'resoures', {
        sysDiskUsage,
        sysMemUsage,
        sysCpuUsage,
        nfCpuUsage,
      });
    }
  });
}

onMounted(() => {
  getNeState();
});
</script>

<template>
  <div style="width: 46%; padding-left: 32px; padding-bottom: 16px">
    <a-divider orientation="left">
      {{ t('views.ne.neInfo.info') }}
    </a-divider>
    <div>
      <span>{{ t('views.ne.neInfo.serviceState') }}：</span>
      <a-tag :color="state.data.online ? 'processing' : 'error'">
        {{
          state.data.online
            ? t('views.ne.neInfo.normalcy')
            : t('views.ne.neInfo.exceptions')
        }}
      </a-tag>
    </div>
    <div>
      <span>{{ t('views.ne.neInfo.version') }}：</span>
      <span>{{ state.data.version }}</span>
    </div>
    <div>
      <span>{{ t('views.ne.neInfo.serialNum') }}：</span>
      <span>{{ state.data.sn }}</span>
    </div>
    <div>
      <span>{{ t('views.ne.neInfo.expiryDate') }}：</span>
      <span>{{ state.data.expire }}</span>
    </div>

    <a-divider orientation="left">
      {{ t('views.ne.neInfo.resourceInfo') }}
    </a-divider>
    <div>
      <span>{{ t('views.ne.neInfo.neCpu') }}：</span>
      <a-progress
        status="normal"
        :stroke-color="
          state.resoures.nfCpuUsage < 30
            ? '#52c41a'
            : state.resoures.nfCpuUsage > 70
            ? '#ff4d4f'
            : '#1890ff'
        "
        :percent="state.resoures.nfCpuUsage"
      />
    </div>
    <div>
      <span>{{ t('views.ne.neInfo.sysCpu') }}：</span>
      <a-progress
        status="normal"
        :stroke-color="
          state.resoures.sysCpuUsage < 30
            ? '#52c41a'
            : state.resoures.sysCpuUsage > 70
            ? '#ff4d4f'
            : '#1890ff'
        "
        :percent="state.resoures.sysCpuUsage"
      />
    </div>
    <div>
      <span>{{ t('views.ne.neInfo.sysMem') }}：</span>
      <a-progress
        status="normal"
        :stroke-color="
          state.resoures.sysMemUsage < 30
            ? '#52c41a'
            : state.resoures.sysMemUsage > 70
            ? '#ff4d4f'
            : '#1890ff'
        "
        :percent="state.resoures.sysMemUsage"
      />
    </div>
    <div>
      <span>{{ t('views.ne.neInfo.sysDisk') }}：</span>
      <a-progress
        status="normal"
        :stroke-color="
          state.resoures.sysDiskUsage < 30
            ? '#52c41a'
            : state.resoures.sysDiskUsage > 70
            ? '#ff4d4f'
            : '#1890ff'
        "
        :percent="state.resoures.sysDiskUsage"
      />
    </div>
  </div>
</template>

<style lang="less" scoped>
.collapse :deep(.ant-collapse-item) > .ant-collapse-header {
  padding-left: 0;
  padding-right: 0;
}
.collapse-header {
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
</style>