From 5a8ab1343fc2cd5137a12d3d3328993fe7e286e2 Mon Sep 17 00:00:00 2001
From: zhongzm <zhongzm@agt.com>
Date: Wed, 20 Nov 2024 17:00:22 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E6=97=A5=E6=9C=9F=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9=E5=99=A8=E5=B1=9E=E6=80=A7=E5=BC=83=E7=94=A8=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/perfManage/kpiOverView/index.vue | 38 +++++++++++++---------
 1 file changed, 23 insertions(+), 15 deletions(-)

diff --git a/src/views/perfManage/kpiOverView/index.vue b/src/views/perfManage/kpiOverView/index.vue
index 8cb4715a..aa23d66c 100644
--- a/src/views/perfManage/kpiOverView/index.vue
+++ b/src/views/perfManage/kpiOverView/index.vue
@@ -49,17 +49,24 @@ echarts.use([
 const ws = ref<WS | null>(null);
 
 //时间选择
-let ranges = ref<Record<string, [Dayjs, Dayjs]>>({
-  [t('views.perfManage.customTarget.sixHoursAgo')]: [
-    dayjs().subtract(6, 'hours'),
-    dayjs(),
-  ],
-  [t('views.perfManage.customTarget.threeHoursAgo')]: [
-    dayjs().subtract(3, 'hours'),
-    dayjs(),
-  ],
-  [t('views.monitor.monitor.today')]: [dayjs().startOf('day'), dayjs()],
-});
+// let ranges = ref<Record<string, [Dayjs, Dayjs]>>({
+//   [t('views.perfManage.customTarget.sixHoursAgo')]: [
+//     dayjs().subtract(6, 'hours'),
+//     dayjs(),
+//   ],
+//   [t('views.perfManage.customTarget.threeHoursAgo')]: [
+//     dayjs().subtract(3, 'hours'),
+//     dayjs(),
+//   ],
+//   [t('views.monitor.monitor.today')]: [dayjs().startOf('day'), dayjs()],
+// });
+const ranges = ref([
+  {label:t('views.perfManage.customTarget.sixHoursAgo'),value:[dayjs().subtract(6, 'hours'),
+     dayjs(),]},
+  {label:t('views.perfManage.customTarget.threeHoursAgo'),value:[dayjs().subtract(3, 'hours'),
+     dayjs(),]},
+  {label:t('views.monitor.monitor.today'),value:[dayjs().startOf('day'), dayjs()]},
+])
 //日期范围响应式变量
 const dateRange = ref<[string, string]>([
   dayjs().startOf('hour').valueOf().toString(),
@@ -272,12 +279,13 @@ const getSeriesConfig = () => ({
 
 const updateChart = () => {
   if (!chart || !kpiColumns.value.length) return;
-
+//获取图表配置
   const commonConfig = getSeriesConfig();
-
+//构建数据系列
   const series = selectedKPIs.value.map(kpiId => {
     const kpi = kpiColumns.value.find(col=>col.kpiId ===kpiId);
     if (!kpi) return null;
+    //为每个KPI分配临时的固定颜色
     const color = kpiColors.get(kpiId)||generateColorRGBA();
     kpiColors.set(kpiId, color);
 
@@ -535,7 +543,7 @@ onUnmounted(() => {
   }
 });
 
-// 更新图表数据方法
+// 实时数据更新图表数据方法
 const updateChartData = (newData: ChartDataItem) => {
   if(!chart){
     return;
@@ -685,7 +693,7 @@ const updateChartLegendSelect = (selectedKpiId?: string) => {
         format="YYYY-MM-DD HH:mm:ss"
         :value-format="'x'"
         :disabled="isRealtime"
-        :ranges="ranges"
+        :presets="ranges"
         :loading="rangeLoading"
         @change="handleDateChange"
       />