package.json

@@ -1,6 +1,6 @@
 {
   "name": "nazhua",
-  "version": "0.6.4",
+  "version": "0.6.3",
   "type": "module",
   "scripts": {
     "dev": "vite",

public/config.js

@@ -33,8 +33,6 @@ window.$$nazhuaConfig = {
   // hideTag: false, // 隐藏标签
   // hideDotBG: true, // 隐藏框框里面的点点背景
   // monitorRefreshTime: 10, // 监控刷新时间间隔，单位s（秒）, 0为不刷新，为保证不频繁请求源站，最低生效值为10s
-  monitorChartType: 'multi', // 监控图表类型 single/multi
-  monitorChartTypeToggle: true, // 监控图表类型切换
   // filterGPUKeywords: ['Virtual Display'], // 如果GPU名称中包含这些关键字，则过滤掉
   // customCodeMap: {}, // 自定义的地图点信息
   // nezhaVersion: 'v1', // 哪吒版本

src/components/charts/line.js

@@ -3,6 +3,7 @@ import { SVGRenderer } from 'echarts/renderers';
 import { LineChart } from 'echarts/charts';
 import {
   TooltipComponent,
+  // LegendComponent,
   GridComponent,
   DataZoomComponent,
 } from 'echarts/components';
@@ -14,11 +15,13 @@ use([
   SVGRenderer,
   LineChart,
   TooltipComponent,
+  // LegendComponent,
   GridComponent,
   DataZoomComponent,
 ]);
 
 export default (
+  cateList,
   dateList,
   valueList,
   mode = 'dark',
@@ -66,6 +69,23 @@ export default (
         fontSize: 14,
       },
     },
+    // legend: {
+    //   show: false,
+    //   data: cateList.map((i) => ({
+    //     name: i.name,
+    //     itemStyle: {
+    //       color: i.color,
+    //     },
+    //     lineStyle: {
+    //       color: i.color,
+    //     },
+    //   })),
+    //   textStyle: {
+    //     color: mode === 'dark' ? '#ddd' : '#222',
+    //     fontFamily,
+    //     fontSize: 14,
+    //   },
+    // },
     grid: {
       top: 10,
       left: 5,

src/components/charts/line.vue

@@ -25,6 +25,10 @@ import VChart from 'vue-echarts';
 import lineChart from './line';
 
 const props = defineProps({
+  cateList: {
+    type: Array,
+    default: () => [],
+  },
   dateList: {
     type: Array,
     default: () => [],
@@ -41,8 +45,9 @@ const props = defineProps({
 
 const chartRef = ref();
 const option = computed(() => {
-  if (props.dateList && props.valueList) {
+  if (props.cateList && props.dateList && props.valueList) {
     return lineChart(
+      props.cateList,
       props.dateList,
       props.valueList,
     );

src/views/components/server-detail/server-monitor.vue

@@ -11,22 +11,6 @@
         </span>
       </div>
       <div class="right-box">
-        <div
-          v-if="config.nazhua.monitorChartTypeToggle"
-          class="chart-type-switch-group"
-          title="监控折线图是否聚合"
-          @click="switchChartType"
-        >
-          <span class="label-text">聚合</span>
-          <div
-            class="switch-box"
-            :class="{
-              active: monitorChartType === 'multi',
-            }"
-          >
-            <span class="switch-dot" />
-          </div>
-        </div>
         <div
           class="refresh-data-group"
           title="是否自动刷新"
@@ -82,104 +66,55 @@
       </div>
     </div>
 
-    <template v-if="monitorChartType === 'single'">
+    <div class="monitor-cate-group">
-      <div class="monitor-chart-group">
+      <template
-        <div
+        v-for="cateItem in monitorChartData.cateList"
-          v-for="(cateItem, index) in monitorChartData.cateList"
+        :key="cateItem.id"
-          :key="cateItem.id"
+      >
-          class="monitor-chart-item"
+        <popover :title="cateItem.title">
-        >
+          <template #trigger>
-          <div class="cate-name-box">
+            <div
-            <popover :title="cateItem.title">
+              class="monitor-cate-item"
-              <template #trigger>
+              :class="{
-                <div
+                disabled: showCates[cateItem.id] === false,
-                  class="monitor-cate-item"
+              }"
-                  :class="{
+              :style="{
-                    disabled: showCates[cateItem.id] === false,
+                '--cate-color': cateItem.color,
-                  }"
+              }"
-                  :style="{
+              @click="toggleShowCate(cateItem.id)"
-                    '--cate-color': cateItem.color,
+              @touchstart="handleTouchStart(cateItem.id)"
-                  }"
+              @touchend="handleTouchEnd(cateItem.id)"
-                >
+              @touchmove="handleTouchMove(cateItem.id)"
-                  <span class="cate-legend" />
+            >
-                  <span
+              <span class="cate-legend" />
-                    class="cate-name"
+              <span
-                  >
+                class="cate-name"
-                    {{ cateItem.name }}
-                  </span>
-                  <span
-                    v-if="cateItem.avg !== 0"
-                    class="cate-avg-ms"
-                  >
-                    {{ cateItem.avg }}ms
-                  </span>
-                  <span
-                    v-else
-                    class="cate-avg-ms"
-                  >
-                    -ms
-                  </span>
-                </div>
-              </template>
-            </popover>
-          </div>
-          <line-chart
-            :date-list="monitorChartData.dateList"
-            :value-list="[monitorChartData.valueList[index]]"
-          />
-        </div>
-      </div>
-    </template>
-    <template v-else>
-      <div class="monitor-cate-group">
-        <template
-          v-for="cateItem in monitorChartData.cateList"
-          :key="cateItem.id"
-        >
-          <popover :title="cateItem.title">
-            <template #trigger>
-              <div
-                class="monitor-cate-item"
-                :class="{
-                  disabled: showCates[cateItem.id] === false,
-                }"
-                :style="{
-                  '--cate-color': cateItem.color,
-                }"
-                @click="toggleShowCate(cateItem.id)"
-                @touchstart="handleTouchStart(cateItem.id)"
-                @touchend="handleTouchEnd(cateItem.id)"
-                @touchmove="handleTouchMove(cateItem.id)"
               >
-                <span class="cate-legend" />
+                {{ cateItem.name }}
-                <span
+              </span>
-                  class="cate-name"
+              <span
-                >
+                v-if="cateItem.avg !== 0"
-                  {{ cateItem.name }}
+                class="cate-avg-ms"
-                </span>
+              >
-                <span
+                {{ cateItem.avg }}ms
-                  v-if="cateItem.avg !== 0"
+              </span>
-                  class="cate-avg-ms"
+              <span
-                >
+                v-else
-                  {{ cateItem.avg }}ms
+                class="cate-avg-ms"
-                </span>
+              >
-                <span
+                -ms
-                  v-else
+              </span>
-                  class="cate-avg-ms"
+            </div>
-                >
+          </template>
-                  -ms
+        </popover>
-                </span>
+      </template>
-              </div>
+    </div>
-            </template>
-          </popover>
-        </template>
-      </div>
 
-      <line-chart
+    <line-chart
-        :date-list="monitorChartData.dateList"
+      :cate-list="monitorChartData.cateList"
-        :value-list="monitorChartData.valueList"
+      :date-list="monitorChartData.dateList"
-      />
+      :value-list="monitorChartData.valueList"
-    </template>
+    />
   </dot-dot-box>
 </template>
 
@@ -240,14 +175,6 @@ const showCates = ref({});
 const monitorData = ref([]);
 const longPressTimer = ref(null);
 
-const chartType = ref(config.nazhua.monitorChartType === 'single' ? 'single' : 'multi');
-const monitorChartType = computed(() => {
-  if (config.nazhua.monitorChartTypeToggle) {
-    return chartType.value;
-  }
-  return config.nazhua.monitorChartType;
-});
-
 const now = ref(Date.now());
 const accpetShowTime = computed(() => now.value - (minute.value * 60 * 1000));
 
@@ -387,10 +314,6 @@ function switchRefresh() {
   refreshData.value = !refreshData.value;
 }
 
-function switchChartType() {
-  chartType.value = chartType.value === 'single' ? 'multi' : 'single';
-}
-
 function toggleMinute(value) {
   now.value = store.state.serverTime || Date.now();
   minute.value = value;
@@ -477,51 +400,6 @@ onUnmounted(() => {
 <style lang="scss" scoped>
 .server-monitor-group {
   --line-chart-size: 300px;
-
-  .monitor-cate-item {
-    --cate-item-height: 28px;
-    --cate-item-font-size: 14px;
-    --cate-color: #fff;
-
-    display: flex;
-    align-items: center;
-    width: var(--cate-item-width);
-    height: var(--cate-item-height);
-    gap: 6px;
-    padding: 0 6px;
-    font-size: var(--cate-item-font-size);
-    border-radius: 4px;
-    cursor: pointer;
-
-    @media screen and (max-width: 768px) {
-      cursor: default;
-    }
-
-    .cate-legend {
-      width: 0.5em;
-      height: 0.5em;
-      background: var(--cate-color);
-    }
-
-    .cate-name {
-      // flex: 1;
-      height: var(--cate-item-height);
-      line-height: calc(var(--cate-item-height) + 2px);
-      color: #eee;
-    }
-
-    .cate-avg-ms {
-      height: var(--cate-item-height);
-      line-height: calc(var(--cate-item-height) + 2px);
-      text-align: right;
-      color: #fff;
-    }
-
-    &.disabled {
-      filter: grayscale(1);
-      opacity: 0.5;
-    }
-  }
 }
 
 .module-head-group {
@@ -547,8 +425,7 @@ onUnmounted(() => {
   }
 
   .peak-shaving-group,
-  .refresh-data-group,
+  .refresh-data-group {
-  .chart-type-switch-group {
     display: flex;
     align-items: center;
     gap: 4px;
@@ -676,30 +553,63 @@ onUnmounted(() => {
   margin: 10px 0;
   display: flex;
   flex-wrap: wrap;
+  // justify-content: center;
   gap: var(--gap-size);
   margin-right: calc(var(--gap-size) * -1);
-}
 
-.monitor-chart-group {
+  .monitor-cate-item {
-  display: flex;
+    // --cate-item-width: calc(20% - var(--gap-size));
-  flex-wrap: wrap;
+    --cate-item-height: 28px;
-  gap: 10px 0;
+    --cate-item-font-size: 14px;
+    --cate-color: #fff;
 
-  .monitor-chart-item {
-    width: 50%;
-    height: calc(var(--line-chart-size) + 28px);
-  }
-
-  @media screen and (max-width: 768px) {
-    .monitor-chart-item {
-      width: 100%;
-    }
-  }
-
-  .cate-name-box {
     display: flex;
     align-items: center;
-    justify-content: center;
+    width: var(--cate-item-width);
+    height: var(--cate-item-height);
+    gap: 6px;
+    padding: 0 6px;
+    font-size: var(--cate-item-font-size);
+    // background: rgba(#fff, 0.2);
+    border-radius: 4px;
+    cursor: pointer;
+
+    @media screen and (max-width: 768px) {
+      cursor: default;
+    }
+
+    .cate-legend {
+      width: 0.5em;
+      height: 0.5em;
+      // border-radius: 50%;
+      // width: 6px;
+      // height: calc(var(--cate-item-height) - 10px);
+      // margin-left: -6px;
+      background: var(--cate-color);
+    }
+
+    .cate-name {
+      // flex: 1;
+      height: var(--cate-item-height);
+      line-height: calc(var(--cate-item-height) + 2px);
+      // text-overflow: ellipsis;
+      // white-space: nowrap;
+      // overflow: hidden;
+      color: #eee;
+    }
+
+    .cate-avg-ms {
+      // width: 55px;
+      height: var(--cate-item-height);
+      line-height: calc(var(--cate-item-height) + 2px);
+      text-align: right;
+      color: #fff;
+    }
+
+    &.disabled {
+      filter: grayscale(1);
+      opacity: 0.5;
+    }
   }
 }
 </style>