Ver Fonte

✨ feat(设备监控): 增加时间区间确认操作

- 分离时间区间输入值与实际生效值,避免输入过程中立即刷新图表
- 新增独立确定按钮,点击后重新加载对应时间窗口的数据
- 重置图表时同步恢复已生效的时间区间
- 统一确定按钮与页面操作区的尺寸和视觉样式
Zimo há 2 dias atrás
pai
commit
be7ea422a5
1 ficheiros alterados com 16 adições e 5 exclusões
  1. 16 5
      src/views/oli-connection/monitoring/detail.vue

+ 16 - 5
src/views/oli-connection/monitoring/detail.vue

@@ -81,6 +81,7 @@ const DEFAULT_CHART_WINDOW_MINUTES = 10
 const MIN_CHART_WINDOW_MINUTES = 1
 const MAX_CHART_WINDOW_MINUTES = 120
 const chartWindowMinutes = ref(DEFAULT_CHART_WINDOW_MINUTES)
+const chartWindowMinutesDraft = ref(DEFAULT_CHART_WINDOW_MINUTES)
 const chartWindowMs = computed(() => chartWindowMinutes.value * 60 * 1000)
 
 function normalizeChartWindowMinutes(value?: number | null) {
@@ -926,6 +927,7 @@ async function initPage(load = true) {
 async function resetChart() {
   chartLoadVersion += 1
   chartRealtimeMode.value = true
+  chartWindowMinutesDraft.value = chartWindowMinutes.value
   selectedDate.value = getInitialDateRange()
   await cancelAllRequests()
   destroy()
@@ -940,10 +942,12 @@ function getSelectedDateEnd() {
   return end.isValid() ? end : dayjs()
 }
 
-async function handleChartWindowMinutesChange(value?: number) {
+async function handleChartWindowMinutesConfirm() {
   const realtime = chartRealtimeMode.value
+  const normalizedValue = normalizeChartWindowMinutes(chartWindowMinutesDraft.value)
 
-  chartWindowMinutes.value = normalizeChartWindowMinutes(value)
+  chartWindowMinutes.value = normalizedValue
+  chartWindowMinutesDraft.value = normalizedValue
   selectedDate.value = getDateRangeByWindow(realtime ? dayjs() : getSelectedDateEnd())
 
   chartLoadVersion += 1
@@ -1375,17 +1379,24 @@ onUnmounted(() => {
           <div class="chart-window-control">
             <span>时间区间</span>
             <el-input-number
-              v-model="chartWindowMinutes"
+              v-model="chartWindowMinutesDraft"
               :min="MIN_CHART_WINDOW_MINUTES"
               :max="MAX_CHART_WINDOW_MINUTES"
               :precision="0"
               :step="1"
               controls-position="right"
               size="default"
-              class="chart-window-control__input"
-              @change="handleChartWindowMinutesChange" />
+              class="chart-window-control__input" />
             <span>分钟</span>
           </div>
+          <el-button
+            type="primary"
+            plain
+            size="default"
+            :loading="chartLoading"
+            @click="handleChartWindowMinutesConfirm">
+            确定
+          </el-button>
           <el-button
             size="default"
             :type="isFullscreen ? 'info' : 'primary'"