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