style: 移动网元快速安装到ne目录

src/views/ne/neQuickSetup/components/StepFinish.vue

@@ -0,0 +1,182 @@
+<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>