From 7773fca9c8f94e866e78fa83f7aaac54bdfee360 Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Wed, 13 Sep 2023 17:58:35 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=BC=E5=BC=8F=E5=8C=96=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/index.vue | 403 ++++++++++++++++++--------------------------
 1 file changed, 163 insertions(+), 240 deletions(-)

diff --git a/src/views/index.vue b/src/views/index.vue
index c519b98c..e21829c8 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,95 +1,26 @@
 <script setup lang="ts">
 import { PageContainer } from '@ant-design-vue/pro-layout';
-import useAppStore from '@/store/modules/app';
-import useUserStore from '@/store/modules/user';
-
-import {onMounted,onUnmounted} from "vue";
-import {ColumnsType} from "ant-design-vue/lib/table";
-import {parseDateToStr} from "@/utils/date-utils";
-import {SizeType} from "ant-design-vue/lib/config-provider";
-import {reactive,toRaw} from "vue";
-import {listNotice} from "@/api/system/notice";
-import {listUser} from "@/api/system/user";
-import {listMain} from "@/api/system/home";
-const userStore = useUserStore();
-const { appName, appVersion } = useAppStore();
-import { TooltipComponent, TooltipComponentOption } from 'echarts/components';
-import { GaugeChart, GaugeSeriesOption } from 'echarts/charts';
+import { onMounted } from 'vue';
+import { ColumnsType } from 'ant-design-vue/lib/table';
+import { reactive, toRaw } from 'vue';
+import { listMain } from '@/api/system/home';
+import { TooltipComponent } from 'echarts/components';
+import { GaugeChart } from 'echarts/charts';
 import { CanvasRenderer } from 'echarts/renderers';
 import * as echarts from 'echarts/core';
-import {
-  TitleComponent,
-  TitleComponentOption,
-  LegendComponent,
-  LegendComponentOption
-} from 'echarts/components';
-import { PieChart, PieSeriesOption } from 'echarts/charts';
+import { TitleComponent, LegendComponent } from 'echarts/components';
+import { PieChart } from 'echarts/charts';
 import { LabelLayout } from 'echarts/features';
 
-
-echarts.use([TooltipComponent,
+echarts.use([
+  TooltipComponent,
   GaugeChart,
   TitleComponent,
   LegendComponent,
   PieChart,
   CanvasRenderer,
-  LabelLayout]);
-
-type EChartsOption = echarts.ComposeOption<
-  TooltipComponentOption | GaugeSeriesOption
-  | TitleComponentOption
-  | LegendComponentOption
-  | PieSeriesOption
-  >;
-
-
-
-
-
-var option: any;
-
-option = {
-  title: {
-    text: 'Referer of a Website',
-    subtext: 'Fake Data',
-    left: 'center'
-  },
-  tooltip: {
-    trigger: 'item'
-  },
-  legend: {
-    orient: 'vertical',
-    left: 'left'
-  },
-  series: [
-    {
-      name: 'Access From',
-      type: 'pie',
-      radius: '50%',
-      data: [
-        { value: 1048, name: 'Search Engine' },
-        { value: 735, name: 'Direct' },
-        { value: 580, name: 'Email' },
-        { value: 484, name: 'Union Ads' },
-        { value: 300, name: 'Video Ads' }
-      ],
-      emphasis: {
-        itemStyle: {
-          shadowBlur: 10,
-          shadowOffsetX: 0,
-          shadowColor: 'rgba(0, 0, 0, 0.5)'
-        }
-      }
-    }
-  ]
-};
-
-/*
-onMounted(()=>{
-  var chartDom = document.getElementById('main')!;
-  var myChart = echarts.init(chartDom);
-  option && myChart.setOption(option);
-})*/
+  LabelLayout,
+]);
 
 /**表格字段列 */
 //customRender(){} ----单元格处理
@@ -98,7 +29,7 @@ let tableColumns: ColumnsType = [
     title: '对象',
     dataIndex: 'name',
     align: 'center',
-    key:'status'
+    key: 'status',
   },
   {
     title: '网元状态',
@@ -120,7 +51,7 @@ let tableColumns: ColumnsType = [
     dataIndex: 'ipAddress',
     key: 'groupName',
     align: 'center',
-  }
+  },
 ];
 /**表格状态类型 */
 type TabeStateType = {
@@ -148,14 +79,13 @@ let tableState: TabeStateType = reactive({
   selectedRowKeys: [],
 });
 
-
 /**表格状态 */
 let nfInfo: any = reactive({
- obj:"OMC",
-  version:"1.6.1",
-  status:"正常",
-  number:"",
-  outTimeDate:"",
+  obj: 'OMC',
+  version: '1.6.1',
+  status: '正常',
+  number: '',
+  outTimeDate: '',
 });
 
 /**查询网元状态列表 */
@@ -165,153 +95,102 @@ function fnGetList() {
   listMain().then(res => {
     tableState.data = res;
     tableState.loading = false;
-    var rightNum=0;
-    var errorNum=0;
+    var rightNum = 0;
+    var errorNum = 0;
 
-for (let i=0;i<res.length;i++){
-  if (res[i].status=='正常'){
-    rightNum++;
-  }else{
-    errorNum++;
-  }
-}
+    for (let i = 0; i < res.length; i++) {
+      if (res[i].status == '正常') {
+        rightNum++;
+      } else {
+        errorNum++;
+      }
+    }
     echarts.init(document.getElementById('echarts-records')).clear();
     var chartDom = document.getElementById('echarts-records');
     var myChart = echarts.init(chartDom);
 
-    var option;
-    option = {
+    var option = {
       title: {
         text: '',
         subtext: '',
-        left: 'center'
+        left: 'center',
       },
       tooltip: {
-        trigger: 'item'
+        trigger: 'item',
       },
       legend: {
         orient: 'vertical',
-        left: 'left'
+        left: 'left',
       },
       series: [
         {
           name: '网元状态',
           type: 'pie',
           radius: '70%',
-          center:['50%','50%'],
+          center: ['50%', '50%'],
           data: [
             { value: rightNum, name: '正常' },
-            { value: errorNum, name: '异常' }
+            { value: errorNum, name: '异常' },
           ],
           emphasis: {
             itemStyle: {
               shadowBlur: 10,
               shadowOffsetX: 0,
-              shadowColor: 'rgba(0, 0, 0, 0.5)'
-            }
-          }
+              shadowColor: 'rgba(0, 0, 0, 0.5)',
+            },
+          },
 
-          ,label:{
-
-          }
-        }
-      ]
+          label: {},
+        },
+      ],
     };
 
     option && myChart.setOption(option);
-    window.onresize = function () { // echarts 窗口缩放自适应 随着div--echarts-records的大小来适应
+    window.onresize = function () {
+      // echarts 窗口缩放自适应 随着div--echarts-records的大小来适应
       myChart.resize();
-      option.resize();
-    }
+    };
   });
-
-
-
 }
 
 /**點擊網元名 */
 function init(e: any) {
- console.log(toRaw(e))
-  let realData=toRaw(e);
+  console.log(toRaw(e));
+  let realData = toRaw(e);
 
   var chartDom = document.getElementById('echarts-records');
   var myChart = echarts.init(chartDom);
   myChart.clear(); //怕遗留以前得元素
-  var option;
 
-
-  var nfMenUsage=  Math.round(realData.memUsage.nfUsedMem/ realData.memUsage.totalMem* 10000) / 100.00 ;
-  var nfMaxDiskSpace =Math.round(realData.diskSpace.partitionInfo[1].used/ realData.diskSpace.partitionInfo[1].total* 10000) / 100.00 ;
-  option = {
+  var nfMenUsage =
+    Math.round(
+      (realData.memUsage.nfUsedMem / realData.memUsage.totalMem) * 10000
+    ) / 100.0;
+  var nfMaxDiskSpace =
+    Math.round(
+      (realData.diskSpace.partitionInfo[1].used /
+        realData.diskSpace.partitionInfo[1].total) *
+        10000
+    ) / 100.0;
+  let option = {
     tooltip: {
-      formatter: '{a} <br/>{b} : {c}%'
+      formatter: '{a} <br/>{b} : {c}%',
     },
     series: [
       {
         name: 'Nf Memory usage',
         center: ['17%', '50%'],
-        radius:'80%',
+        radius: '80%',
         type: 'gauge',
         progress: {
-          show: true
+          show: true,
         },
-        pointer: {   //仪表盘的指针
+        pointer: {
+          //仪表盘的指针
           //这个show属性好像有问题，因为在这次开发中，需要去掉指正，我设置false的时候，还是显示指针，估计是BUG吧，我用的echarts-3.2.3；希望改进。最终，我把width属性设置为0，成功搞定！
           show: true,
           //指针长度
           length: '60%',
-
-        },
-        title:{
-          offsetCenter: [0, '90%'],
-        },
-        detail: {
-          valueAnimation: true,
-          formatter: '{value}',
-          textStyle:{
-            fontSize:18
-          },
-          offsetCenter: [0, '60%'],
-        },
-        data: [
-          {
-            value: nfMenUsage,
-            name: 'MEM'
-          }
-        ]},{
-        center: ['50%', '50%'],
-        name: 'Nf CPU usage',
-        radius:'80%',
-        type: 'gauge',
-        progress: {
-          show: true
-        },
-
-        title:{
-          offsetCenter: [0, '90%'],
-        },
-        detail: {
-          valueAnimation: true,
-          formatter: '{value}',
-          textStyle:{
-            fontSize:18
-          },
-          offsetCenter: [0, '60%'],
-        },
-        data: [
-          {
-            value: realData.cpuUsage.nfCpuUsage/100,
-            name: 'CPU'
-          }],
-
-      },
-      {
-        center: ['83%', '50%'],
-        name: 'NF maximum disk usage',
-        radius:'80%',
-        type: 'gauge',
-        progress: {
-          show: true
         },
         title: {
           offsetCenter: [0, '90%'],
@@ -319,68 +198,92 @@ function init(e: any) {
         detail: {
           valueAnimation: true,
           formatter: '{value}',
-          textStyle:{
-            fontSize:18
+          textStyle: {
+            fontSize: 18,
+          },
+          offsetCenter: [0, '60%'],
+        },
+        data: [
+          {
+            value: nfMenUsage,
+            name: 'MEM',
+          },
+        ],
+      },
+      {
+        center: ['50%', '50%'],
+        name: 'Nf CPU usage',
+        radius: '80%',
+        type: 'gauge',
+        progress: {
+          show: true,
+        },
+
+        title: {
+          offsetCenter: [0, '90%'],
+        },
+        detail: {
+          valueAnimation: true,
+          formatter: '{value}',
+          textStyle: {
+            fontSize: 18,
+          },
+          offsetCenter: [0, '60%'],
+        },
+        data: [
+          {
+            value: realData.cpuUsage.nfCpuUsage / 100,
+            name: 'CPU',
+          },
+        ],
+      },
+      {
+        center: ['83%', '50%'],
+        name: 'NF maximum disk usage',
+        radius: '80%',
+        type: 'gauge',
+        progress: {
+          show: true,
+        },
+        title: {
+          offsetCenter: [0, '90%'],
+        },
+        detail: {
+          valueAnimation: true,
+          formatter: '{value}',
+          textStyle: {
+            fontSize: 18,
           },
           offsetCenter: [0, '60%'],
         },
         data: [
           {
             value: nfMaxDiskSpace,
-            name: 'DiskSpace'
-          }],
-
-      }
-    ]
+            name: 'DiskSpace',
+          },
+        ],
+      },
+    ],
   };
 
   option && myChart.setOption(option);
-  window.onresize = function () { // echarts 窗口缩放自适应 随着div--echarts-records的大小来适应
+  window.onresize = function () {
+    // echarts 窗口缩放自适应 随着div--echarts-records的大小来适应
     myChart.resize();
-    option.resize();
-  }
-
-  nfInfo.obj=realData.name;
-  nfInfo.number=realData.serialNum;
-  nfInfo.outTimeDate=realData.expiryDate;
-
+  };
 
+  nfInfo.obj = realData.name;
+  nfInfo.number = realData.serialNum;
+  nfInfo.outTimeDate = realData.expiryDate;
 }
 
-onMounted(()=>{
-
+onMounted(() => {
   fnGetList();
-
-
-})
-
-
-
-/**查询用户列表
-function fnGetList() {
-  if (tableState.loading) return;
-  tableState.loading = true;
-  queryParams.beginTime = queryRangePicker.value[0];
-  queryParams.endTime = queryRangePicker.value[1];
-  listUser(toRaw(queryParams)).then(res => {
-    if (res.code === 1 && Array.isArray(res.rows)) {
-      // 取消勾选
-      if (tableState.selectedRowKeys.length > 0) {
-        tableState.selectedRowKeys = [];
-      }
-      tablePagination.total = res.total;
-      tableState.data = res.rows;
-    }
-    tableState.loading = false;
-  });
-}*/
-
+});
 </script>
 
 <template>
-  <PageContainer :breadcrumb="false"  >
-
-
+  <PageContainer :breadcrumb="false">
     <a-row :gutter="16">
       <a-col :lg="14" :md="16" :xs="24">
         <!-- 表格列表 -->
@@ -394,36 +297,56 @@ function fnGetList() {
           :scroll="{ x: true }"
         >
           <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></div>
-               <div v-else><a-tag color="pink" >{{ record.name }}</a-tag> </div>
+            <template v-if="column.key === 'status'">
+              <div v-if="record.status == '正常'">
+                <a-tag color="blue" @click="init(record)">{{
+                  record.name
+                }}</a-tag>
+              </div>
+              <div v-else>
+                <a-tag color="pink">{{ record.name }}</a-tag>
+              </div>
             </template>
           </template>
         </a-table>
       </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>