fix:日期选择器属性弃用修复

This commit is contained in:
zhongzm
2024-11-20 17:00:22 +08:00
parent 67349e24d8
commit 5a8ab1343f

View File

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