feat: 网元安装步骤页面

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

@@ -1,37 +1,171 @@
 <script setup lang="ts">
-import { reactive, onMounted, toRaw, watch } from 'vue';
-import { message, Form } from 'ant-design-vue/lib';
+import { reactive, onMounted } from 'vue';
 import useI18n from '@/hooks/useI18n';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
-import useNeInfoStore from '@/store/modules/neinfo';
-import { getNeInfo, addNeInfo, updateNeInfo } from '@/api/ne/neInfo';
-import { NE_TYPE_LIST } from '@/constants/ne-constants';
-import { testNeHost } from '@/api/ne/neHost';
-import useDictStore from '@/store/modules/dict';
-const { getDict } = useDictStore();
+import { stateNeInfo } from '@/api/ne/neInfo';
+import { stepState } from '../hooks/useStep';
 const { t } = useI18n();
-const emit = defineEmits(['ok', 'cancel', 'update:visible']);
-const props = defineProps({
-  visible: {
-    type: Boolean,
-    default: false,
-  },
-  editId: {
-    type: String,
-    default: '',
-  },
+
+/**状态数据 */
+const state = reactive({
+  data: {} as Record<string, any>,
+  resoures: {} as Record<string, any>,
 });
 
-onMounted(() => {});
+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>
-  <a-result title="网元状态">
-    <template #extra>
-      <div>版本：1.x</div>
-      <div>sn：0000</div>
-    </template>
-  </a-result>
+  <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>