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"
       />