fix: 优化服务监测页面中线图的显示，和顶部仪表单颜色块的增加

src/utils/dataUiOptions.ts

@@ -53,7 +53,7 @@ export function getLineData({ xAxis = [] as any[], datas = [] as number[][], leg
         suffix
       },
       "legend": {
-        "show": true,
+        "show": legend.length > 1,
         "color": "#888888",
         "fontSize": 12
       },
@@ -97,6 +97,102 @@ export function getLineData({ xAxis = [] as any[], datas = [] as number[][], leg
   return { config, dataset }
 }
 
+export function getLine2Data({ xAxis = [] as any[], datas = [] as number[][], legend = [] as string[], suffix = '', width = 600, height = 300, color = 'rgb(1, 191, 236)' }) {
+
+  const max = 100
+  const config = {
+    "responsive": false,
+    "chart": {
+      "fontFamily": "inherit",
+      "paddingTop": 0,
+      "backgroundColor": "transparent",
+      "color": "#888888",
+      height,
+      width,
+      "zoom": {
+        "show": false
+      },
+      "padding": {
+        "top": 10,
+        "right": 10,
+        "bottom": 10,
+        "left": 10
+      },
+      "grid": {
+        "position": "start",
+        "labels": {
+          "color": "#888888",
+          "fontSize": 14,
+          "axis": {
+            "fontSize": 14
+          },
+          "yAxis": {
+            "commonScaleSteps": 10,
+            "scaleMin": 0,
+            "scaleMax": max,
+          },
+          "xAxisLabels": {
+            "show": true,
+            "color": "#888888",
+            "values": xAxis,
+            "fontSize": 14,
+            "modulo": 112,
+            "showOnlyFirstAndLast": false,
+            "yOffset": 8
+          }
+        }
+      },
+      "labels": {
+        "fontSize": 14,
+        "prefix": "",
+        suffix
+      },
+      "legend": {
+        "show": legend.length > 1,
+        "color": "#888888",
+        "fontSize": 14
+      },
+      "title": {
+        "text": " ",
+        "show": false
+      },
+      "userOptions": {
+        "show": false
+      }
+    },
+    "line": {
+      "radius": 3,
+      "useGradient": true,
+      "strokeWidth": 2,
+      "labels": {
+        "rounding": 22,
+      },
+      "area": {
+        "useGradient": true,
+        "opacity": "26"
+      }
+    },
+  }
+
+  const dataset = datas.map((data, i) => {
+    return {
+      "name": legend[i],
+      "series": data,
+      "color": color,
+      "type": "line",
+      "shape": "circle",
+      "useArea": true,
+      "useProgression": false,
+      "dataLabels": true,
+      "smooth": true,
+      "dashed": false,
+      "useTag": "none"
+    }
+  })
+
+  return { config, dataset }
+}
+
 export function getPieData({ datas = [] as number[][], legend = [] as string[], types = [] as number[], width = 500, height = 1300 }) {
 
   const colorList = ['#4285F4', '#2ecc71', '#FBBB04', '#e67e22', '#FF0000'].reverse()
@@ -243,7 +339,7 @@ export function getGaugeData({ value = 50 }) {
   }
 
   const dataset = {
-    "series": [{ "from": 0, "to": 50, "color": "#6376DD", "id": "111" }, { "from": 50, "to": 100, "color": "#42d392", "id": "222" }],
+    "series": [{ "from": 0, "to": 25, "color": "#4DABF7", "id": "111" }, { "from": 25, "to": 50, "color": "#69DB7C", "id": "111" }, { "from": 50, "to": 75, "color": "#FFA94D", "id": "111" }, { "from": 75, "to": 100, "color": "#FF6B6B", "id": "222" }],
     value
   }
 

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

@@ -22,7 +22,7 @@
             <el-descriptions-item label="已使用">{{ memorySizeFormat(sysInfo.memUsed) }}</el-descriptions-item>
             <el-descriptions-item label="剩余">{{ memorySizeFormat(sysInfo.available) }}</el-descriptions-item>
             <el-descriptions-item label="系统使用">{{ memorySizeFormat(sysInfo.goUsed) }}</el-descriptions-item>
-            <el-descriptions-item label="使用率">{{ memorySizeFormat(sysInfo.memUsage) }}%</el-descriptions-item>
+            <el-descriptions-item label="使用率">{{ sysInfo.memUsage }}%</el-descriptions-item>
           </el-descriptions>
           <div class="flex1">
             <VueUiGauge :dataset="dataset2" :config="config2" />
@@ -34,7 +34,7 @@
           <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-item label="使用率">{{ sysInfo.diskUsedPercent }}%</el-descriptions-item>
           </el-descriptions>
           <div class="flex1">
             <VueUiGauge :dataset="dataset3" :config="config3" />
@@ -42,63 +42,37 @@
         </div>
       </el-card>
     </div>
-    <el-row :gutter="15">
-      <el-col :xs="24" :sm="12" :md="8" class="mb-4">
-        <el-card shadow="nover" class="box-card-height" style="height:auto">
-          <template #header>
-            <div class="card-header">
-              <span>CPU运行情况</span>
-            </div>
-          </template>
-          <div style="height: 250px" ref="chartsWarningRef4"></div>
-        </el-card>
-      </el-col>
-      <el-col :xs="24" :sm="12" :md="8" class="mb-4">
-        <el-card shadow="nover" class="box-card-height" style="height:auto">
-          <template #header>
-            <div class="card-header">
-              <span>内存运行情况</span>
-            </div>
-          </template>
-          <div style="height: 250px" ref="chartsWarningRef5"></div>
-        </el-card>
-      </el-col>
-      <el-col :xs="24" :sm="12" :md="8" class="mb-4">
-        <el-card shadow="nover" class="box-card-height" style="height:auto">
-          <template #header>
-            <div class="card-header">
-              <span>磁盘使用情况</span>
-            </div>
-          </template>
-          <div style="height: 250px" ref="chartsWarningRef6"></div>
-        </el-card>
-      </el-col>
-    </el-row>
-    <div class="flex-row gap-2">
-      <el-col :xs="24" :sm="24" :md="24">
-        <el-card shadow="nover" class="box-card-height" style="height:auto">
-          <template #header>
-            <div class="card-header">
-              <span>运行环境信息</span>
-            </div>
-          </template>
-          <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 class="flex-row" style="gap: 16px; align-items: stretch;margin-bottom: 16px">
+      <el-card shadow="nover" class="flex1">
+        <template #header>CPU运行情况</template>
+        <VueUiXy :dataset="dataset4" :config="config4" />
+      </el-card>
+      <el-card shadow="nover" class="flex1">
+        <template #header>内存运行情况</template>
+        <VueUiXy :dataset="dataset5" :config="config5" />
+      </el-card>
+      <el-card shadow="nover" class="flex1">
+        <template #header>磁盘使用情况</template>
+        <VueUiXy :dataset="dataset6" :config="config6" />
+      </el-card>
     </div>
+    <el-card shadow="nover">
+      <template #header>运行环境信息</template>
+      <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>
   </div>
 </template>
 
@@ -108,9 +82,9 @@ import * as echarts from 'echarts';
 import 'echarts-wordcloud';
 import dayjs from 'dayjs';
 import { getSSEOrigin } from '/@/utils/origin'
-import { VueUiGauge } from "vue-data-ui";
+import { VueUiGauge, VueUiXy } from "vue-data-ui";
 import "vue-data-ui/style.css";
-import { getGaugeData } from "/@/utils/dataUiOptions";
+import { getGaugeData, getLine2Data } from "/@/utils/dataUiOptions";
 
 let interval: any = null;
 let es: any = null;
@@ -134,6 +108,20 @@ const dataset = ref<any>(chartData.dataset);
 const dataset2 = ref<any>(chartData.dataset);
 const dataset3 = ref<any>(chartData.dataset);
 
+
+const chartLineData = getLine2Data({
+  xAxis: [],
+  legend: [],
+  datas: [[]]
+})
+
+const dataset4 = ref<any>(chartLineData.dataset);
+const config4 = ref<any>(chartLineData.config);
+const dataset5 = ref<any>(chartLineData.dataset);
+const config5 = ref<any>(chartLineData.config);
+const dataset6 = ref<any>(chartLineData.dataset);
+const config6 = ref<any>(chartLineData.config);
+
 //#endregion
 
 let myChart4: any;
@@ -186,49 +174,6 @@ const myChart6Data: any = {
   value: [],
 }
 
-const moveOption = {
-  tooltip: {
-    trigger: 'axis',
-  },
-  grid: {
-    top: 5,
-    bottom: 5,
-    left: 5,
-    right: 30,
-    containLabel: true
-  },
-  xAxis: {
-    type: 'category',
-    boundaryGap: false,
-    splitLine: {
-      show: false
-    }
-  },
-  yAxis: {
-    type: 'value',
-    boundaryGap: [0, '100%'],
-    axisLabel: {
-      formatter: '{value}%'
-    },
-    splitLine: {
-      show: false
-    }
-  },
-  series: [
-    {
-      name: '使用率',
-      type: 'line',
-      showSymbol: false,
-      data: [],
-      smooth: true,
-      lineStyle: {
-        width: 0
-      },
-      areaStyle: {}
-    }
-  ]
-};
-
 function setOptChart1(value: number) {
   const chartData = getGaugeData({ value })
   config.value = chartData.config
@@ -244,88 +189,29 @@ function setOptChart3(value: number) {
   config3.value = chartData.config
   dataset3.value = chartData.dataset
 }
-function setOptChart(myChart: any, myChartData: any, value: number) {
-  myChartData.name.push(dayjs().format('HH:mm:ss'));
+function setOptChart(dataset: any, config: any, myChartData: any, value: number, color = '') {
+  myChartData.name.push(dayjs().format('mm:ss'));
   myChartData.value.push(value);
-  if (myChartData.name.length > 20) {
+  if (myChartData.name.length > 10) {
     myChartData.name.shift()
     myChartData.value.shift()
   }
-  myChart.setOption({
-    xAxis: {
-      data: myChartData.name
-    },
-    series: [
-      {
-        data: myChartData.value
-      },
-    ],
-  });
-}
 
+  const chartLineData = getLine2Data({
+    xAxis: myChartData.name,
+    legend: ['使用率'],
+    suffix: '%',
+    color,
+    datas: [myChartData.value]
+  })
+
+  dataset.value = chartLineData.dataset
+  config.value = chartLineData.config
+}
 
-//cpu运行状态
-const initChartCPURun = () => {
-  myChart4 = echarts.init(proxy.$refs.chartsWarningRef4);
-  moveOption.series[0].areaStyle = {
-    opacity: 0.8,
-    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-      {
-        offset: 0,
-        color: 'rgb(128, 255, 165)'
-      },
-      {
-        offset: 1,
-        color: 'rgb(1, 191, 236)'
-      }
-    ])
-  }
-  myChart4.setOption(moveOption);
-};
-
-//内存运行状态
-const initChartRAMRun = () => {
-  myChart5 = echarts.init(proxy.$refs.chartsWarningRef5);
-  moveOption.series[0].areaStyle = {
-    opacity: 0.8,
-    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-      {
-        offset: 0,
-        color: 'rgb(0, 221, 255)'
-      },
-      {
-        offset: 1,
-        color: 'rgb(77, 119, 255)'
-      }
-    ])
-  }
-  myChart5.setOption(moveOption);
-};
-
-//磁盘运行状态
-const initChartDISKRun = () => {
-  myChart6 = echarts.init(proxy.$refs.chartsWarningRef6);
-  moveOption.series[0].areaStyle = {
-    opacity: 0.8,
-    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-      {
-        offset: 0,
-        color: 'rgb(55, 162, 255)'
-      },
-      {
-        offset: 1,
-        color: 'rgb(116, 21, 219)'
-      }
-    ])
-  }
-  myChart6.setOption(moveOption);
-};
 
 // 页面加载时
 onMounted(() => {
-  initChartCPURun();
-  initChartRAMRun();
-  initChartDISKRun();
 });
 
 function startWs() {
@@ -360,20 +246,18 @@ function displayMem(event: { data: any; }) {
   sysInfo.available = data.available
   sysInfo.goUsed = data.goUsed
   sysInfo.memUsage = data.usedPercent.toFixed(2)
-  setOptChart(myChart5, myChart5Data, sysInfo.memUsage);
+  setOptChart(dataset5, config5, myChart5Data, sysInfo.memUsage, '#56B5FF');
   loading.value = false
 }
 
 function displayCpu(event: { data: any; }) {
   const data = JSON.parse(event.data);
-  // console.log(dayjs().format('HH:mm:ss'))
-  // console.log(data)
 
   sysInfo.cpuNum = data.Number
   sysInfo.cpuCores = data.Cores
   sysInfo.cpuUsed = data.UsedPercent[0].toFixed(2)
   setOptChart1(data.UsedPercent[0].toFixed(2));
-  setOptChart(myChart4, myChart4Data, sysInfo.cpuUsed);
+  setOptChart(dataset4, config4, myChart4Data, sysInfo.cpuUsed, '#4FE4F0');
   loading.value = false
 }
 
@@ -390,7 +274,7 @@ function displayDisk(event: { data: any; }) {
   sysInfo.diskUsed = data.used
   sysInfo.diskUsedPercent = data.usedPercent.toFixed(2)
   setOptChart3(data.usedPercent.toFixed(2));
-  setOptChart(myChart6, myChart6Data, sysInfo.diskUsedPercent);
+  setOptChart(dataset6, config6, myChart6Data, sysInfo.diskUsedPercent, '#7387F4');
   loading.value = false
 }
 
@@ -460,37 +344,4 @@ onUnmounted(() => {
     }
   }
 }
-
-.mb-4 {
-  margin-bottom: 15px;
-}
-
-.cell {
-  box-sizing: border-box;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: normal;
-  word-break: break-all;
-  line-height: 36px;
-  padding-left: 10px;
-  padding-right: 10px;
-}
-
-.cell-card {
-  box-sizing: border-box;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: normal;
-  word-break: break-all;
-  line-height: 36px;
-}
-
-.box-card {
-  min-height: 380px;
-}
-
-.box-card-meter {
-  height: auto;
-  min-height: 180px;
-}
 </style>