fix: 修改运维管理的dashboard颜色

src/views/link/DashBoard/components/Cpu.vue

@@ -45,7 +45,7 @@
                       v-if="serverOptions.length > 1"
                       v-model:value="serverActive"
                       :options="serverOptions"
-                      color="#2CB6E0"
+                      :color="colorCpu"
                   />
                 </template>
             </div>
@@ -59,9 +59,10 @@ import dayjs from 'dayjs';
 import {
     getTimeByType,
     arrayReverse,
-    defulteParamsData,
+    defaultParamsData,
     areaStyleCpu,
     typeDataLine,
+    colorCpu
 } from './tool.ts';
 import { DataType } from '../typings';
 import ServerList from './ServerList.vue'
@@ -97,6 +98,7 @@ const pickerTimeChange = () => {
 };
 
 const echartsOptions = computed(() => {
+  console.log(serverActive.value)
   const series = serverActive.value.length
           ? serverActive.value.map((key) => setOptions(serverData.data, key))
           : typeDataLine
@@ -128,13 +130,13 @@ const echartsOptions = computed(() => {
         end: data.value.type !== 'hour' ? 5 : 100,
       },
     ],
-    color: ['#2CB6E0'],
+    color: colorCpu,
     series: series
   };
 })
 const getCPUEcharts = async (val: any) => {
     loading.value = true;
-    const res: any = await dashboard(defulteParamsData('cpu', val));
+    const res: any = await dashboard(defaultParamsData('cpu', val));
     if (res.success) {
         const _cpuOptions = {};
         const _cpuXAxis = new Set();
@@ -174,7 +176,7 @@ const setOptions = (optionsData: any, key: string) => ({
     type: 'line',
     smooth: true,
     symbol: 'none',
-    areaStyle: areaStyleCpu,
+    // areaStyle: areaStyleCpu(index),
 });
 
 const handleCpuOptions = (optionsData: any, xAxis: any) => {

src/views/link/DashBoard/components/Jvm.vue

@@ -45,7 +45,7 @@
                     v-if="serverOptions.length > 1"
                     v-model:value="serverActive"
                     :options="serverOptions"
-                    color="#60DFC7"
+                    :color="colorJvm"
                 />
               </template>
             </div>
@@ -61,7 +61,8 @@ import {
     arrayReverse,
     typeDataLine,
     areaStyleJvm,
-    defulteParamsData,
+    colorJvm,
+    defaultParamsData
 } from './tool.ts';
 import { DataType } from '../typings';
 import ServerList from './ServerList.vue'
@@ -98,7 +99,7 @@ const pickerTimeChange = () => {
 
 const getJVMEcharts = async (val: any) => {
     loading.value = true;
-    const res: any = await dashboard(defulteParamsData('jvm', val));
+    const res: any = await dashboard(defaultParamsData('jvm', val));
     if (res.success) {
         const _jvmOptions = {};
         const _jvmXAxis = new Set();
@@ -142,7 +143,7 @@ const setOptions = (optionsData: any, key: string) => ({
     type: 'line',
     smooth: true,
     symbol: 'none',
-    areaStyle: areaStyleJvm,
+    // areaStyle: areaStyleJvm(_index),
 });
 const handleJVMOptions = (optionsData: any, xAxis: any) => {
   const dataKeys = Object.keys(optionsData);
@@ -184,7 +185,7 @@ const echartsOptions = computed(() => {
         end: data.value.type !== 'hour' ? 10 : 100,
       },
     ],
-    color: ['#60DFC7'],
+    color: colorJvm,
     series: series
   }
 })

src/views/link/DashBoard/components/Network.vue

@@ -73,6 +73,7 @@ import {
   getTimeByType,
   typeDataLine,
   areaStyle,
+  colorNetwork,
   networkParams, arrayReverse,
 } from './tool.ts';
 import dayjs from 'dayjs';
@@ -168,7 +169,7 @@ const setOptions = (data: any, key: string) => ({
     name: key,
     type: 'line',
     smooth: true,
-    areaStyle,
+    // areaStyle,
 });
 
 const handleNetworkOptions = (optionsData: any, xAxis: any) => {
@@ -205,7 +206,7 @@ const echartsOptions = computed(() => {
       trigger: 'axis',
       formatter: (_value: any) => networkValueRender(_value[0]),
     },
-    color: ['#979AFF'],
+    color: colorNetwork,
     series: series
   };
 })

src/views/link/DashBoard/components/ServerList.vue

@@ -4,10 +4,10 @@
     <j-scrollbar>
       <div class="server-list-items">
         <div
-            v-for="item in options" :class="['server-item', myValue.includes(item) ? 'active' : '']"
+            v-for="(item, index) in options" :key="item" :class="['server-item', myValue.includes(item) ? 'active' : '']"
             @click="() => change(item)"
         >
-          <j-badge :color=" myValue.includes(item) ? color : '#a3a3a3'" :text="item" />
+          <j-badge :color="myValue.includes(item) ? (Array.isArray(color) ? color[index % 5] : color) : '#a3a3a3'" :text="item" />
         </div>
       </div>
     </j-scrollbar>
@@ -26,7 +26,7 @@ const props = defineProps({
     default: () => []
   },
   color: {
-    type: String,
+    type: [String, Array],
     default: '#979AFF'
   }
 })

src/views/link/DashBoard/components/tool.ts

@@ -104,7 +104,7 @@ export const networkParams = (val: any) => {
         },
     ];
 };
-export const defulteParamsData = (group: any, val: any) => [
+export const defaultParamsData = (group: any, val: any) => [
     {
         dashboard: 'systemMonitor',
         object: 'stats',
@@ -119,6 +119,10 @@ export const defulteParamsData = (group: any, val: any) => [
     },
 ];
 
+export const colorNetwork = ['#FF7D00', '#FFC300', '#37E2E2', '#165DFF', '#722ED1']
+export const colorCpu = ['#313CA9', '#21CCFF', '#249EFF', '#86DF6C', '#979AFF']
+export const colorJvm = ['#246EFF', '#00B2FF', '#81E2FF', '#2CAB40', '#8D4EDA']
+
 export const areaStyle = {
     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
         {