优化服务检测顶部图形绘图

src/theme/fast.scss

@@ -39,7 +39,7 @@
 .el-tabs.h-full {
 	display: flex;
 	flex-flow: column nowrap;
-	.el-tabs__content{
+	.el-tabs__content {
 		flex: 1;
 		overflow-y: auto;
 		padding-right: 15px;
@@ -136,6 +136,12 @@ image {
 	align-items: center;
 }
 
+.flex-row-center {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
 .flex-around {
 	display: flex;
 	justify-content: space-around;

src/views/system/monitor/server/index.vue

@@ -25,50 +25,22 @@
             <el-descriptions-item label="使用率">{{ memorySizeFormat(sysInfo.memUsage) }}%</el-descriptions-item>
           </el-descriptions>
           <div class="flex1">
-            <!-- <VueUiGauge :dataset="dataset" :config="config" /> -->
-            <div style="min-height: 180px" ref="chartsWarningRef2"></div>
+            <VueUiGauge :dataset="dataset2" :config="config2" />
+          </div>
+        </div>
+      </el-card>
+      <el-card shadow="nover" class="flex1">
+        <div class="flex-row">
+          <el-descriptions :column="1" border class="flex1">
+            <el-descriptions-item label="磁盘容量">{{ memorySizeFormat(sysInfo.diskTotal) }}</el-descriptions-item>
+            <el-descriptions-item label="已使用">{{ memorySizeFormat(sysInfo.diskUsed) }}</el-descriptions-item>
+            <el-descriptions-item label="使用率">{{ memorySizeFormat(sysInfo.diskUsedPercent) }}%</el-descriptions-item>
+          </el-descriptions>
+          <div class="flex1">
+            <VueUiGauge :dataset="dataset3" :config="config3" />
           </div>
         </div>
       </el-card>
-      <el-col :xs="24" :sm="12" :md="8" class="mb-4">
-        <el-card shadow="nover" class="box-card-meter">
-          <el-row :gutter="20">
-            <el-col :xs="24" :sm="24" :md="12">
-              <table cellspacing="0" style="width: 100%">
-                <tbody>
-                  <tr>
-                    <td>
-                      <div class="cell-card">磁盘容量:</div>
-                    </td>
-                    <td>
-                      <div class="cell-card">{{ memorySizeFormat(sysInfo.diskTotal) }}</div>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td>
-                      <div class="cell-card">已使用:</div>
-                    </td>
-                    <td>
-                      <div class="cell-card">{{ memorySizeFormat(sysInfo.diskUsed) }}</div>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td>
-                      <div class="cell-card">使用率:</div>
-                    </td>
-                    <td>
-                      <div class="cell-card">{{ sysInfo.diskUsedPercent }}%</div>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </el-col>
-            <el-col :xs="24" :sm="24" :md="12">
-              <div style="min-height: 180px" ref="chartsWarningRef3"></div>
-            </el-col>
-          </el-row>
-        </el-card>
-      </el-col>
     </div>
     <el-row :gutter="15">
       <el-col :xs="24" :sm="12" :md="8" class="mb-4">
@@ -110,26 +82,20 @@
               <span>运行环境信息</span>
             </div>
           </template>
-          <div class="flex-row">
-            <el-form label-position="right" label-width="100px" class="flex1" style="max-width: 460px">
-              <el-form-item label="操作系统">{{ hostData.os }}</el-form-item>
-              <el-form-item label="启动时间">{{ goInfoData.startTime }}</el-form-item>
-              <el-form-item label="运行时长">{{ timeFormat(goInfoData.runTime) }}</el-form-item>
-              <el-form-item label="运行内存">{{ goInfoData.goMem }}</el-form-item>
-            </el-form>
-            <el-form label-position="right" label-width="100px" class="flex1" style="max-width: 460px">
-              <el-form-item label="系统架构">{{ goInfoData.arch }}</el-form-item>
-              <el-form-item label="语言环境">{{ goInfoData.goName }}</el-form-item>
-              <el-form-item label="磁盘占用">{{ goInfoData.goSize }}</el-form-item>
-              <el-form-item label="项目地址">{{ goInfoData.pwd }}</el-form-item>
-            </el-form>
-            <el-form label-position="right" label-width="100px" class="flex1" style="max-width: 460px">
-              <el-form-item label="架构版本">{{ hostData.kernelArch }}</el-form-item>
-              <el-form-item label="GO 版本">{{ goInfoData.goVersion }}</el-form-item>
-              <el-form-item label="协程数量">{{ goInfoData.goroutine }}</el-form-item>
-              <el-form-item label="服务器IP">{{ hostData.intranet_ip }} (内) &nbsp;&nbsp;&nbsp; {{ hostData.public_ip }} (公) </el-form-item>
-            </el-form>
-          </div>
+          <el-descriptions :column="3" border class="flex1">
+            <el-descriptions-item label="操作系统">{{ hostData.os }}</el-descriptions-item>
+            <el-descriptions-item label="系统架构">{{ goInfoData.arch }}</el-descriptions-item>
+            <el-descriptions-item label="架构版本">{{ hostData.kernelArch }}</el-descriptions-item>
+            <el-descriptions-item label="启动时间">{{ goInfoData.startTime }}</el-descriptions-item>
+            <el-descriptions-item label="语言环境">{{ goInfoData.goName }}</el-descriptions-item>
+            <el-descriptions-item label="GO 版本">{{ goInfoData.goVersion }}</el-descriptions-item>
+            <el-descriptions-item label="运行时长">{{ timeFormat(goInfoData.runTime) }}</el-descriptions-item>
+            <el-descriptions-item label="磁盘占用">{{ goInfoData.goSize }}</el-descriptions-item>
+            <el-descriptions-item label="协程数量">{{ goInfoData.goroutine }}</el-descriptions-item>
+            <el-descriptions-item label="运行内存">{{ goInfoData.goMem }}</el-descriptions-item>
+            <el-descriptions-item label="项目地址">{{ goInfoData.pwd }}</el-descriptions-item>
+            <el-descriptions-item label="服务器IP">{{ hostData.intranet_ip }} (内) &nbsp;&nbsp;&nbsp; {{ hostData.public_ip }} (公) </el-descriptions-item>
+          </el-descriptions>
         </el-card>
       </el-col>
     </div>
@@ -162,13 +128,14 @@ const chartData = getGaugeData({
 })
 
 const config = ref<any>(chartData.config);
+const config2 = ref<any>(chartData.config);
+const config3 = ref<any>(chartData.config);
 const dataset = ref<any>(chartData.dataset);
+const dataset2 = ref<any>(chartData.dataset);
+const dataset3 = ref<any>(chartData.dataset);
 
 //#endregion
 
-let myChart1: any;
-let myChart2: any;
-let myChart3: any;
 let myChart4: any;
 let myChart5: any;
 let myChart6: any;
@@ -268,32 +235,14 @@ function setOptChart1(value: number) {
   dataset.value = chartData.dataset
 }
 function setOptChart2(value: number) {
-  myChart2.setOption({
-    series: [
-      {
-        data: [
-          {
-            value: value,
-            name: '',//内存
-          },
-        ],
-      },
-    ],
-  });
+  const chartData = getGaugeData({ value })
+  config2.value = chartData.config
+  dataset2.value = chartData.dataset
 }
 function setOptChart3(value: number) {
-  myChart3.setOption({
-    series: [
-      {
-        data: [
-          {
-            value: value,
-            name: '',//磁盘
-          },
-        ],
-      },
-    ],
-  });
+  const chartData = getGaugeData({ value })
+  config3.value = chartData.config
+  dataset3.value = chartData.dataset
 }
 function setOptChart(myChart: any, myChartData: any, value: number) {
   myChartData.name.push(dayjs().format('HH:mm:ss'));
@@ -314,154 +263,6 @@ function setOptChart(myChart: any, myChartData: any, value: number) {
   });
 }
 
-//内存
-const initChartRAM = () => {
-  myChart2 = echarts.init(proxy.$refs.chartsWarningRef2);
-  const option = {
-    tooltip: {
-      formatter: '{a} <br/>{b} : {c}%',
-    },
-    series: [
-      {
-        type: 'gauge',
-        name: '内存',
-        radius: '90%', //修改表盘大小
-        title: {
-          show: true, //控制表盘title(今日预计用电量)字体是否显示
-          fontSize: 12, //控制表盘title(今日预计用电量)字体大小
-          'color': 'green',           		//控制表盘title(今日预计用电量)字体颜色
-          offsetCenter: [-2, '30%'], //设置表盘title(今日预计用电量)位置
-        },
-        axisLine: {
-          lineStyle: {
-            show: true,
-            with: 25,
-            // 属性lineStyle控制线条样式
-            color: [
-              [0.3, '#4dabf7'],
-              [0.6, '#69db7c'],
-              [0.8, '#ffa94d'],
-              [1, '#ff6b6b'],
-            ],
-          },
-        },
-        axisTick: {
-          distance: 0,
-          length: 4,
-          lineStyle: {
-            color: 'auto',
-            width: 1
-          }
-        },
-        axisLabel: {
-          distance: 12,
-          color: '#888',
-          fontSize: 12
-        },
-        splitLine: { // 分割线
-          length: 5,
-          distance: 2,
-          lineStyle: {
-            width: 1,
-            color: 'auto'
-          }
-        },
-        splitNumber: 5, //分割线之间的刻度
-
-        detail: {
-          valueAnimation: true,
-          formatter: '{value}%',
-          textStyle: {
-            fontSize: 20,
-            color: 'red',
-          },
-          offsetCenter: ['0', '80%'], //表盘数据(30%)位置
-        },
-        // data: [
-        // 	{
-        // 		value: 30,
-        // 		name: '内存使用率',
-        // 	},
-        // ],
-      }
-    ],
-  };
-  myChart2.setOption(option);
-};
-//磁盘
-const initChartDISK = () => {
-  myChart3 = echarts.init(proxy.$refs.chartsWarningRef3);
-  const option = {
-    tooltip: {
-      formatter: '{a} <br/>{b} : {c}%',
-    },
-    series: [
-      {
-        type: 'gauge',
-        name: '磁盘',
-        radius: '90%', //修改表盘大小
-        title: {
-          show: true, //控制表盘title(今日预计用电量)字体是否显示
-          fontSize: 12, //控制表盘title(今日预计用电量)字体大小
-          'color': 'green',           		//控制表盘title(今日预计用电量)字体颜色
-          offsetCenter: [-2, '30%'], //设置表盘title(今日预计用电量)位置
-        },
-        axisLine: {
-          lineStyle: {
-            show: true,
-            with: 25,
-            // 属性lineStyle控制线条样式
-            color: [
-              [0.3, '#4dabf7'],
-              [0.6, '#69db7c'],
-              [0.8, '#ffa94d'],
-              [1, '#ff6b6b'],
-            ],
-          },
-        },
-        axisTick: {
-          distance: 0,
-          length: 4,
-          lineStyle: {
-            color: 'auto',
-            width: 1
-          }
-        },
-        axisLabel: {
-          distance: 12,
-          color: '#888',
-          fontSize: 12
-        },
-        splitLine: { // 分割线
-          length: 5,
-          distance: 2,
-          lineStyle: {
-            width: 1,
-            color: 'auto'
-          }
-        },
-        splitNumber: 5, //分割线之间的刻度
-
-        detail: {
-          valueAnimation: true,
-          formatter: '{value}%',
-          textStyle: {
-            fontSize: 20,
-            color: 'red',
-          },
-          offsetCenter: ['0', '80%'], //表盘数据(30%)位置
-        },
-        // data: [
-        // 	{
-        // 		value: 30,
-        // 		name: '内存使用率',
-        // 	},
-        // ],
-      },
-    ],
-  };
-  myChart3.setOption(option);
-};
 
 //cpu运行状态
 const initChartCPURun = () => {
@@ -522,8 +323,6 @@ const initChartDISKRun = () => {
 
 // 页面加载时
 onMounted(() => {
-  initChartRAM();
-  initChartDISK();
   initChartCPURun();
   initChartRAMRun();
   initChartDISKRun();
@@ -653,8 +452,13 @@ onUnmounted(() => {
 
 <style scoped lang="scss">
 .el-card {
-  height: 300px;
-  overflow-y: auto;
+  ::v-deep .el-card__body {
+    height: 100%;
+
+    .flex-row {
+      height: 100%;
+    }
+  }
 }
 
 .mb-4 {