From a7ad5208b9312bd804845ea259a21b47cb515010 Mon Sep 17 00:00:00 2001
From: lai <371757574@qq.com>
Date: Wed, 25 Oct 2023 17:23:24 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E9=A6=96=E9=A1=B510s?=
 =?UTF-8?q?=E5=88=B7=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/index.vue | 196 +++++++++++++++++++++++++++-----------------
 1 file changed, 121 insertions(+), 75 deletions(-)

diff --git a/src/views/index.vue b/src/views/index.vue
index ab4cd04c..888eeaed 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -2,7 +2,7 @@
 import { PageContainer } from '@ant-design-vue/pro-layout';
 import { ColumnsType } from 'ant-design-vue/lib/table';
 import { message } from 'ant-design-vue/lib';
-import { reactive, toRaw,ref,onMounted} from 'vue';
+import { reactive, toRaw, ref, onMounted,onBeforeUnmount} from 'vue';
 import { listMain } from '@/api/index';
 import useI18n from '@/hooks/useI18n';
 import { TooltipComponent } from 'echarts/components';
@@ -82,11 +82,11 @@ let tableState: TabeStateType = reactive({
 
 /**表格状态 */
 let nfInfo: any = reactive({
-  obj: "OMC",
-  version: "1.6.2",
-  status: "正常",
-  number: "",
-  outTimeDate: "",
+  obj: 'OMC',
+  version: '1.6.2',
+  status: '正常',
+  number: '',
+  outTimeDate: '',
 });
 
 /**表格状态类型 */
@@ -112,22 +112,23 @@ type nfStateType = {
   /**序列号 */
   serialNum: string;
   /**许可证到期日期 */
-/*  selectedRowKeys: (string | number)[];*/
-  expiryDate:string
+  /*  selectedRowKeys: (string | number)[];*/
+  expiryDate: string;
 };
 /**网元详细信息 */
 let pronInfo: nfStateType = reactive({
   hostName: '5gc',
-  osInfo: 'Linux 5gc 4.15.0-112-generic #113-Ubuntu SMP Thu Jul 9 23:41:39 UTC 2020 x86_64 GNU/Linux',
+  osInfo:
+    'Linux 5gc 4.15.0-112-generic #113-Ubuntu SMP Thu Jul 9 23:41:39 UTC 2020 x86_64 GNU/Linux',
   dbInfo: 'adb v1.0.1',
   ipAddress: '-',
-  port:3030,
+  port: 3030,
   version: '-',
   cpuUse: '-',
-  memoryUse:'-',
-  capability:0  ,
+  memoryUse: '-',
+  capability: 0,
   serialNum: '-',
-  expiryDate:"-",
+  expiryDate: '-',
 });
 
 /**查询网元状态列表 */
@@ -202,11 +203,13 @@ function init(e: any) {
   var myChart = echarts.init(chartDom);
   myChart.clear(); //怕遗留以前得元素
 
-  let cpuUsage = realData.cpuUsage
-  let memUsage = realData.memUsage
-  var nfMenUsage = Math.round((memUsage?.nfUsedMem / memUsage?.totalMem) * 10000) / 100.0;
-  let partitionInfo = realData.diskSpace?.partitionInfo[1]
-  var nfMaxDiskSpace = Math.round((partitionInfo?.used / partitionInfo?.total) * 10000 ) / 100.0;
+  let cpuUsage = realData.cpuUsage;
+  let memUsage = realData.memUsage;
+  var nfMenUsage =
+    Math.round((memUsage?.nfUsedMem / memUsage?.totalMem) * 10000) / 100.0;
+  let partitionInfo = realData.diskSpace?.partitionInfo[1];
+  var nfMaxDiskSpace =
+    Math.round((partitionInfo?.used / partitionInfo?.total) * 10000) / 100.0;
   let option = {
     tooltip: {
       formatter: '{a} <br/>{b} : {c}%',
@@ -226,7 +229,6 @@ function init(e: any) {
           show: true,
           //指针长度
           length: '60%',
-
         },
         title: {
           offsetCenter: [0, '90%'],
@@ -311,8 +313,6 @@ function init(e: any) {
   nfInfo.obj = realData.name;
   nfInfo.number = realData.serialNum;
   nfInfo.outTimeDate = realData.expiryDate;
-
-
 }
 
 /**抽屉 网元详细信息 */
@@ -323,39 +323,59 @@ const closeDrawer = () => {
 /**抽屉 网元详细信息 */
 
 /**监听表格行事件*/
-function rowClick(record:any, index:any) {
+function rowClick(record: any, index: any) {
   return {
-    onClick: (event:any) => {
-      if (toRaw(record).status=='异常'){
+    onClick: (event: any) => {
+      if (toRaw(record).status == '异常') {
         message.error(`网元状态异常`, 2);
         return false;
-      }else {
-        let pronData=toRaw(record);
+      } else {
+        let pronData = toRaw(record);
         //渲染详细信息
-        pronInfo={
+        pronInfo = {
           hostName: pronData.hostName,
-          osInfo:pronData.osInfo,
+          osInfo: pronData.osInfo,
           dbInfo: pronData.dbInfo,
-          ipAddress:pronData.ipAddress,
-          port:pronData.port,
-          version:pronData.version,
-          cpuUse:pronData.name+":"+pronData.cpuUsage?.nfCpuUsage/100+"%; "+"SYS:"+pronData.cpuUsage?.sysCpuUsage / 100+"%",
-          memoryUse:"Total:"+pronData.memUsage?.totalMem+"KB; "+pronData.name+":"+pronData.memUsage?.nfUsedMem+"KB; SYS:"+pronData.memUsage?.sysMemUsage+"KB",
-          capability:pronData.capability ,
-          serialNum:pronData.serialNum,
-          expiryDate:pronData.expiryDate,
-        }
+          ipAddress: pronData.ipAddress,
+          port: pronData.port,
+          version: pronData.version,
+          cpuUse:
+            pronData.name +
+            ':' +
+            pronData.cpuUsage?.nfCpuUsage / 100 +
+            '%; ' +
+            'SYS:' +
+            pronData.cpuUsage?.sysCpuUsage / 100 +
+            '%',
+          memoryUse:
+            'Total:' +
+            pronData.memUsage?.totalMem +
+            'KB; ' +
+            pronData.name +
+            ':' +
+            pronData.memUsage?.nfUsedMem +
+            'KB; SYS:' +
+            pronData.memUsage?.sysMemUsage +
+            'KB',
+          capability: pronData.capability,
+          serialNum: pronData.serialNum,
+          expiryDate: pronData.expiryDate,
+        };
       }
       visible.value = true;
-
     },
   };
 }
-
-
+let timer: any;
 onMounted(() => {
-
   fnGetList();
+  timer = setInterval(fnGetList, 10000); // 每隔10秒执行一次
+});
+
+// 在组件卸载之前清除定时器
+
+onBeforeUnmount(() => {
+  clearInterval(timer);
 });
 </script>
 
@@ -364,29 +384,39 @@ onMounted(() => {
     <div>
       <a-drawer :visible="visible" @close="closeDrawer" :width="700">
         <a-descriptions bordered :column="1" :label-style="{ width: '160px' }">
-          <a-descriptions-item :label="t('views.index.hostName')">{{ pronInfo.hostName }}</a-descriptions-item>
-          <a-descriptions-item :label="t('views.index.osInfo')">{{ pronInfo.osInfo }}</a-descriptions-item>
-          <a-descriptions-item :label="t('views.index.dbInfo')">{{ pronInfo.dbInfo }}</a-descriptions-item>
-          <a-descriptions-item :label="t('views.index.ipAddress')">{{ pronInfo.ipAddress }}</a-descriptions-item>
-          <a-descriptions-item :label="t('views.index.port')">{{ pronInfo.port }}</a-descriptions-item>
-          <a-descriptions-item :label="t('views.index.version')">{{ pronInfo.version }}</a-descriptions-item>
-          <a-descriptions-item :label="t('views.index.cpuUse')">{{ pronInfo.cpuUse }}</a-descriptions-item>
-          <a-descriptions-item :label="t('views.index.memoryUse')">{{ pronInfo.memoryUse }}</a-descriptions-item>
-          <a-descriptions-item :label="t('views.index.capability')">{{ pronInfo.capability }}</a-descriptions-item>
-          <a-descriptions-item :label="t('views.index.serialNum')">{{ pronInfo.serialNum }}</a-descriptions-item>
-          <a-descriptions-item :label="t('views.index.expiryDate')">{{ pronInfo.expiryDate }}</a-descriptions-item>
-
-
-
-          <template v-if="nfInfo.obj === 'OMC'">
-            <a-descriptions-item label="版本号">{{ nfInfo.version }}</a-descriptions-item>
-            <a-descriptions-item label="系统状态">{{ nfInfo.status }}</a-descriptions-item>
-          </template>
-          <template v-else>
-            <a-descriptions-item label="序列号">{{ nfInfo.number }}</a-descriptions-item>
-            <a-descriptions-item label="许可证到期日期">{{ nfInfo.outTimeDate }}</a-descriptions-item>
-          </template>
-
+          <a-descriptions-item :label="t('views.index.hostName')">{{
+            pronInfo.hostName
+          }}</a-descriptions-item>
+          <a-descriptions-item :label="t('views.index.osInfo')">{{
+            pronInfo.osInfo
+          }}</a-descriptions-item>
+          <a-descriptions-item :label="t('views.index.dbInfo')">{{
+            pronInfo.dbInfo
+          }}</a-descriptions-item>
+          <a-descriptions-item :label="t('views.index.ipAddress')">{{
+            pronInfo.ipAddress
+          }}</a-descriptions-item>
+          <a-descriptions-item :label="t('views.index.port')">{{
+            pronInfo.port
+          }}</a-descriptions-item>
+          <a-descriptions-item :label="t('views.index.version')">{{
+            pronInfo.version
+          }}</a-descriptions-item>
+          <a-descriptions-item :label="t('views.index.cpuUse')">{{
+            pronInfo.cpuUse
+          }}</a-descriptions-item>
+          <a-descriptions-item :label="t('views.index.memoryUse')">{{
+            pronInfo.memoryUse
+          }}</a-descriptions-item>
+          <a-descriptions-item :label="t('views.index.capability')">{{
+            pronInfo.capability
+          }}</a-descriptions-item>
+          <a-descriptions-item :label="t('views.index.serialNum')">{{
+            pronInfo.serialNum
+          }}</a-descriptions-item>
+          <a-descriptions-item :label="t('views.index.expiryDate')">{{
+            pronInfo.expiryDate
+          }}</a-descriptions-item>
         </a-descriptions>
       </a-drawer>
     </div>
@@ -407,7 +437,9 @@ onMounted(() => {
           <template #bodyCell="{ column, record }">
             <template v-if="column.key === 'status'">
               <div v-if="record.status == '正常'">
-                <a-tag color="blue" @click="init(record)">{{ record.name }}</a-tag>
+                <a-tag color="blue" @click="init(record)">{{
+                  record.name
+                }}</a-tag>
               </div>
               <div v-else>
                 <a-tag color="pink">{{ record.name }}</a-tag>
@@ -418,27 +450,41 @@ onMounted(() => {
       </a-col>
       <a-col :lg="10" :md="8" :xs="24">
         <a-card title="运行状态" style="margin-bottom: 16px">
-          <div id="echarts-records" style="width: 100%;min-height:200px"></div>
-
+          <div
+            id="echarts-records"
+            style="width: 100%; min-height: 200px"
+          ></div>
         </a-card>
         <a-card title="简略信息" style="margin-top: 16px">
-          <a-descriptions bordered :column="1" :label-style="{ width: '160px' }">
-            <a-descriptions-item label="对象">{{ nfInfo.obj }}</a-descriptions-item>
+          <a-descriptions
+            bordered
+            :column="1"
+            :label-style="{ width: '160px' }"
+          >
+            <a-descriptions-item label="对象">{{
+              nfInfo.obj
+            }}</a-descriptions-item>
             <template v-if="nfInfo.obj === 'OMC'">
-              <a-descriptions-item label="版本号">{{ nfInfo.version }}</a-descriptions-item>
-              <a-descriptions-item label="系统状态">{{ nfInfo.status }}</a-descriptions-item>
+              <a-descriptions-item label="版本号">{{
+                nfInfo.version
+              }}</a-descriptions-item>
+              <a-descriptions-item label="系统状态">{{
+                nfInfo.status
+              }}</a-descriptions-item>
             </template>
             <template v-else>
-              <a-descriptions-item label="序列号">{{ nfInfo.number }}</a-descriptions-item>
-              <a-descriptions-item label="许可证到期日期">{{ nfInfo.outTimeDate }}</a-descriptions-item>
+              <a-descriptions-item label="序列号">{{
+                nfInfo.number
+              }}</a-descriptions-item>
+              <a-descriptions-item label="许可证到期日期">{{
+                nfInfo.outTimeDate
+              }}</a-descriptions-item>
             </template>
-
           </a-descriptions>
         </a-card>
       </a-col>
     </a-row>
   </PageContainer>
-
 </template>
 
 <style lang="less" scoped></style>