格式化代码

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 { onMounted } from 'vue';
-import useUserStore from '@/store/modules/user';
+import { ColumnsType } from 'ant-design-vue/lib/table';
-
+import { reactive, toRaw } from 'vue';
-import {onMounted,onUnmounted} from "vue";
+import { listMain } from '@/api/system/home';
-import {ColumnsType} from "ant-design-vue/lib/table";
+import { TooltipComponent } from 'echarts/components';
-import {parseDateToStr} from "@/utils/date-utils";
+import { GaugeChart } from 'echarts/charts';
-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 { CanvasRenderer } from 'echarts/renderers';
 import * as echarts from 'echarts/core';
-import {
+import { TitleComponent, LegendComponent } from 'echarts/components';
-  TitleComponent,
+import { PieChart } from 'echarts/charts';
-  TitleComponentOption,
-  LegendComponent,
-  LegendComponentOption
-} from 'echarts/components';
-import { PieChart, PieSeriesOption } from 'echarts/charts';
 import { LabelLayout } from 'echarts/features';
 
-
+echarts.use([
-echarts.use([TooltipComponent,
+  TooltipComponent,
   GaugeChart,
   TitleComponent,
   LegendComponent,
   PieChart,
   CanvasRenderer,
-  LabelLayout]);
+  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);
-})*/
 
 /**表格字段列 */
 //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",
+  obj: 'OMC',
-  version:"1.6.1",
+  version: '1.6.1',
-  status:"正常",
+  status: '正常',
-  number:"",
+  number: '',
-  outTimeDate:"",
+  outTimeDate: '',
 });
 
 /**查询网元状态列表 */
@@ -179,19 +109,18 @@ for (let i=0;i<res.length;i++){
     var chartDom = document.getElementById('echarts-records');
     var myChart = echarts.init(chartDom);
 
-    var option;
+    var option = {
-    option = {
       title: {
         text: '',
         subtext: '',
-        left: 'center'
+        left: 'center',
       },
       tooltip: {
-        trigger: 'item'
+        trigger: 'item',
       },
       legend: {
         orient: 'vertical',
-        left: 'left'
+        left: 'left',
       },
       series: [
         {
@@ -201,50 +130,51 @@ for (let i=0;i<res.length;i++){
           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))
+  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 =
-  var nfMenUsage=  Math.round(realData.memUsage.nfUsedMem/ realData.memUsage.totalMem* 10000) / 100.00 ;
+    Math.round(
-  var nfMaxDiskSpace =Math.round(realData.diskSpace.partitionInfo[1].used/ realData.diskSpace.partitionInfo[1].total* 10000) / 100.00 ;
+      (realData.memUsage.nfUsedMem / realData.memUsage.totalMem) * 10000
-  option = {
+    ) / 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: [
       {
@@ -253,14 +183,14 @@ function init(e: any) {
         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%'],
@@ -269,22 +199,24 @@ function init(e: any) {
           valueAnimation: true,
           formatter: '{value}',
           textStyle: {
-            fontSize:18
+            fontSize: 18,
           },
           offsetCenter: [0, '60%'],
         },
         data: [
           {
             value: nfMenUsage,
-            name: 'MEM'
+            name: 'MEM',
-          }
+          },
-        ]},{
+        ],
+      },
+      {
         center: ['50%', '50%'],
         name: 'Nf CPU usage',
         radius: '80%',
         type: 'gauge',
         progress: {
-          show: true
+          show: true,
         },
 
         title: {
@@ -294,16 +226,16 @@ function init(e: any) {
           valueAnimation: true,
           formatter: '{value}',
           textStyle: {
-            fontSize:18
+            fontSize: 18,
           },
           offsetCenter: [0, '60%'],
         },
         data: [
           {
             value: realData.cpuUsage.nfCpuUsage / 100,
-            name: 'CPU'
+            name: 'CPU',
-          }],
+          },
-
+        ],
       },
       {
         center: ['83%', '50%'],
@@ -311,7 +243,7 @@ function init(e: any) {
         radius: '80%',
         type: 'gauge',
         progress: {
-          show: true
+          show: true,
         },
         title: {
           offsetCenter: [0, '90%'],
@@ -320,67 +252,38 @@ function init(e: any) {
           valueAnimation: true,
           formatter: '{value}',
           textStyle: {
-            fontSize:18
+            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;
-
-
 }
 
 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">
-
-
     <a-row :gutter="16">
       <a-col :lg="14" :md="16" :xs="24">
         <!-- 表格列表 -->
@@ -395,35 +298,55 @@ function fnGetList() {
         >
           <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-if="record.status == '正常'">
-               <div v-else><a-tag color="pink" >{{ record.name }}</a-tag> </div>
+                <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
-            <a-descriptions-item label="对象">{{ nfInfo.obj }}</a-descriptions-item>
+            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="版本号">{{
-              <a-descriptions-item label="系统状态">{{ nfInfo.status }}</a-descriptions-item>
+                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="序列号">{{
-              <a-descriptions-item label="许可证到期日期">{{ nfInfo.outTimeDate }}</a-descriptions-item>
+                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>