fix:修改日期选择器默认时间

src/views/perfManage/kpiKeyTarget/index.vue

@@ -250,7 +250,6 @@ const chartStates: Record<AllChartType, ReturnType<typeof createChartState>> = O
 //日期选择器
 interface RangePicker extends Record<AllChartType, [string, string]> {
   placeholder: [string, string];
-  ranges: Record<string, [Dayjs, Dayjs]>;
 }
 
 // 日期选择器状态
@@ -258,17 +257,11 @@ const rangePicker = reactive<RangePicker>({
   ...Object.fromEntries(networkElementTypes.value.map(type => [
     type,
     [
-      dayjs().startOf('day').valueOf().toString(),  //  0 点 0 分 0 秒
-      dayjs().valueOf().toString()  // 此时
+      dayjs().startOf('hour').valueOf().toString(),  // 当前小时内
+      dayjs().endOf('hour').valueOf().toString()
     ]
   ])) as Record<AllChartType, [string, string]>,
   placeholder: [t('views.monitor.monitor.startTime'), t('views.monitor.monitor.endTime')] as [string, string],
-  ranges: {
-    [t('views.monitor.monitor.yesterday')]: [dayjs().subtract(1, 'day').startOf('day'), dayjs().subtract(1, 'day').endOf('day')],
-    [t('views.monitor.monitor.today')]: [dayjs().startOf('day'), dayjs()],
-    [t('views.monitor.monitor.week')]: [dayjs().startOf('week'), dayjs().endOf('week')],
-    [t('views.monitor.monitor.month')]: [dayjs().startOf('month'), dayjs().endOf('month')],
-  } as Record<string, [Dayjs, Dayjs]>,
 });
 
 // 可复用的图表初始化函数
@@ -896,7 +889,6 @@ const applyTwoColumnLayout = () => {
                 format="YYYY-MM-DD HH:mm:ss"
                 value-format="x"
                 :placeholder="rangePicker.placeholder"
-                :ranges="rangePicker.ranges"
                 style="width: 360px"
                 @change="() => fetchData(item.i)"
                 class="no-drag"

src/views/perfManage/kpiOverView/index.vue

@@ -19,7 +19,7 @@ interface KPIBase{
   kpiId: string;
   title: string;
 }
-
+//继承接口
 interface KPIColumn extends KPIBase{
   dataIndex: string;
   key: string;
@@ -49,8 +49,8 @@ const ws = ref<WS | null>(null);
 
 //日期范围响应式变量
 const dateRange = ref<[string, string]>([
-  dayjs().startOf('day').valueOf().toString(),
-  dayjs().valueOf().toString(),
+  dayjs().startOf('hour').valueOf().toString(),
+  dayjs().endOf('hour').valueOf().toString(),
 ]);
 //实时数据状态
 const isRealtime = ref(false);
@@ -98,6 +98,10 @@ const TARGET_KPI_IDS: Record<NeType, string[]> = {
 // 实时数据开关函数
 const fnRealTimeSwitch = (bool: boolean) => {
   if (bool) {
+    if(!chart){
+      isRealtime.value=false;
+      return;
+    }
     if (!ws.value) {
       ws.value = new WS();
     }
@@ -141,6 +145,9 @@ const handleWebSocketMessage = (kpiEvent:any)=>{
 };
 //成功回调
 const wsMessage = (res:Record<string,any>)=>{
+  if(!chart){
+    return;
+  }
   const{code,data}=res;
   if(code===RESULT_CODE_ERROR||!data?.groupId)return;
   handleWebSocketMessage(data.data);
@@ -304,27 +311,27 @@ const updateChart = () => {
     },
     xAxis: {
       // 指定x轴类型为类目轴，适用于离散的类目数据
-      type: 'category',
+      //type: 'category',
       // boundaryGap 控制坐标轴两边留白
       // 当为折线图时(isLine为true)时不留白，柱状图时留白
       // 这样可以让折线图从原点开始，柱状图有合适的间距
-      boundaryGap: isLine,
+      //boundaryGap: isLine,
       // 设置x轴的数据
       // 将时间戳转换为格式化的时间字符串
       data:chartData.value.map(item=>
       dayjs(Number(item.date)).format('YYYY-MM-DD HH:mm:ss')
       ),
       // 设置坐标轴刻度标签的样式
-      axisLabel: {
-        // 格式化函数，这里直接返回原值
-        formatter: (value: string) => value,
-        // 刻度标签旋转角度，0表示不旋转
-        rotate: 0,
-        // 自动计算标签显示的间隔，防止标签重叠
-        interval: 'auto', // 自动计算显示间隔
-        // 刻度标签对齐方式，右对齐
-        align: 'right',
-      },
+      // axisLabel: {
+      //   // 格式化函数，这里直接返回原值
+      //   formatter: (value: string) => value,
+      //   // 刻度标签旋转角度，0表示不旋转
+      //   rotate: 0,
+      //   // 自动计算标签显示的间隔，防止标签重叠
+      //   interval: 'auto', // 自动计算显示间隔
+      //   // 刻度标签对齐方式，右对齐
+      //   align: 'right',
+      // },
     },
     yAxis: {
       // y轴配置
@@ -546,14 +553,18 @@ const { t, currentLocale } = useI18n();
 
 // 更新图表数据方法
 const updateChartData = (newData: ChartDataItem) => {
-  chartData.value.push(newData);
-  if (chartData.value.length > 100) {
-    chartData.value.shift();
+  if(!chart){
+    return;
   }
-
-  if (chart) {
+  chartData.value.push(newData);
+  if (chartData.value.length > 50) {//100改为50
+    chartData.value.shift();//大于100条时删除最早的数据
+  }
+  //使用try-catch包裹图表更新逻辑
+  try {
     requestAnimationFrame(() => {
-      chart!.setOption({
+      if (!chart) return;
+      const option = {
         xAxis: {
           data: chartData.value.map(item =>
             dayjs(Number(item.date)).format('YYYY-MM-DD HH:mm:ss')
@@ -567,11 +578,15 @@ const updateChartData = (newData: ChartDataItem) => {
             name: kpi?.title || kpiId,
           };
         }),
-      });
+      };
+      chart.setOption(option);
     });
+  }catch (error){
+    console.error('Failed to update chart:', error);
   }
 };
 
+
 // groupedKPIs 计算属性，使用 TARGET_KPI_IDS 来分组过滤
 const groupedKPIs = computed(() => {
   const groups: Record<string, KPIColumn[]> = {};