dongjunchuan/de
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(过滤组件): 日期筛选组件可设置查询的起始日期 #6005

Browse Source
This commit is contained in:
dataeaseShu 2024-03-20 10:05:18 +08:00
parent ab4fd10ebf
commit 35d57fe48c
4 changed files with 80 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
core/frontend/src/lang/en.js
View File

@ -43,7 +43,7 @@ export default {
}, },
time: { time: {
set_time_filtering_range: 'Set time filtering range', set_time_filtering_range: 'Set time filtering range',
filter_range: 'The default value must be within the time filtering range', filter_range: 'The default value is outside the date filtering range, please reset it!',
interval_type: 'Interval type', interval_type: 'Interval type',
fixed_time: 'Fixed time', fixed_time: 'Fixed time',
dynamic_time: 'Dynamic time', dynamic_time: 'Dynamic time',
@ -52,7 +52,7 @@ export default {
end_time: 'End time', end_time: 'End time',
preview: 'preview', preview: 'preview',
maximum_single_query: 'Maximum single query', maximum_single_query: 'Maximum single query',
day: 'day', day_s: 'day',
dynamic_query_time_window: 'Dynamic query time window', dynamic_query_time_window: 'Dynamic query time window',
nothing: 'nothing', nothing: 'nothing',
starting_from: 'Starting from', starting_from: 'Starting from',

4
core/frontend/src/lang/tw.js
View File

@ -43,7 +43,7 @@ export default {
}, },
time: { time: {
set_time_filtering_range: '設定時間篩選範圍', set_time_filtering_range: '設定時間篩選範圍',
filter_range: '預設值必須在時間篩選範圍', filter_range: '預設值超出日期篩選範圍內，請重新設定！',
interval_type: '區間類型', interval_type: '區間類型',
fixed_time: '固定時間', fixed_time: '固定時間',
dynamic_time: '動態時間', dynamic_time: '動態時間',
@ -52,7 +52,7 @@ export default {
end_time: '結束時間', end_time: '結束時間',
preview: '預覽', preview: '預覽',
maximum_single_query: '單次査詢最多', maximum_single_query: '單次査詢最多',
day: '天', day_s: '天',
dynamic_query_time_window: '動態査詢時間視窗', dynamic_query_time_window: '動態査詢時間視窗',
nothing: '無', nothing: '無',
starting_from: '開始於', starting_from: '開始於',

4
core/frontend/src/lang/zh.js
View File

@ -47,7 +47,7 @@ export default {
}, },
time: { time: {
set_time_filtering_range: '设置时间筛选范围', set_time_filtering_range: '设置时间筛选范围',
filter_range: '默认值必须在时间筛选范围', filter_range: '默认值超出日期筛选范围内，请重新设置!',
interval_type: '区间类型', interval_type: '区间类型',
fixed_time: '固定时间', fixed_time: '固定时间',
dynamic_time: '动态时间', dynamic_time: '动态时间',
@ -56,7 +56,7 @@ export default {
end_time: '结束时间', end_time: '结束时间',
preview: '预览', preview: '预览',
maximum_single_query: '单次查询最多', maximum_single_query: '单次查询最多',
day: '天', day_s: '天',
dynamic_query_time_window: '动态查询时间窗口', dynamic_query_time_window: '动态查询时间窗口',
nothing: '无', nothing: '无',
starting_from: '开始于', starting_from: '开始于',

129
core/frontend/src/views/panel/filter/filterMain/RangeFilterTime.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<div class="set-time-filtering-range"> <div class="set-time-filtering-range">
<div class="title">{{ $t('time.set_time_filtering_range') }}</div> <div class="title">{{ $t("time.set_time_filtering_range") }}</div>
<div class="list-item"> <div class="list-item">
<div class="label">{{ $t('time.interval_type') }}</div> <div class="label">{{ $t("time.interval_type") }}</div>
<div class="setting-content"> <div class="setting-content">
<div class="setting"> <div class="setting">
<el-radio-group v-model="timeRange.intervalType"> <el-radio-group v-model="timeRange.intervalType">
@ -17,21 +17,23 @@
</div> </div>
</div> </div>
<div class="list-item" v-if="timeRange.intervalType !== 'none'"> <div class="list-item" v-if="timeRange.intervalType !== 'none'">
<div class="label">{{ regularOrTrendsTitle }}</div> <div class="label">{{ $t(`time.${regularOrTrendsTitle}`) }}</div>
<div class="setting-content"> <div class="setting-content">
<div class="setting"> <div class="setting">
<el-radio-group v-model="timeRange.regularOrTrends"> <el-radio-group v-model="timeRange.regularOrTrends">
<el-radio label="fixed">{{ $t('time.fixed_time') }}</el-radio> <el-radio label="fixed">{{ $t("time.fixed_time") }}</el-radio>
<el-radio label="dynamic">{{ $t('time.dynamic_time') }}</el-radio> <el-radio label="dynamic">{{ $t("time.dynamic_time") }}</el-radio>
</el-radio-group> </el-radio-group>
</div> </div>
<template <template
v-if="dynamicTime && timeRange.intervalType !== 'timeInterval'" v-if="dynamicTime && timeRange.intervalType !== 'timeInterval'"
> >
<div class="setting"> <div class="setting">
<div class="setting-label">{{ $t('time.relative_to_current') }}</div> <div class="setting-label">
{{ $t("time.relative_to_current") }}
</div>
<div class="setting-value select"> <div class="setting-value select">
<el-select v-model="timeRange.relativeToCurrent"> <el-select size="small" v-model="timeRange.relativeToCurrent">
<el-option <el-option
v-for="item in relativeToCurrentList" v-for="item in relativeToCurrentList"
:key="item.value" :key="item.value"
@ -49,7 +51,7 @@
:min="0" :min="0"
controls-position="right" controls-position="right"
/> />
<el-select v-model="timeRange.relativeToCurrentType"> <el-select size="small" v-model="timeRange.relativeToCurrentType">
<el-option <el-option
v-for="item in relativeToCurrentTypeList" v-for="item in relativeToCurrentTypeList"
:key="item.value" :key="item.value"
@ -57,7 +59,7 @@
:value="item.value" :value="item.value"
/> />
</el-select> </el-select>
<el-select v-model="timeRange.around"> <el-select size="small" v-model="timeRange.around">
<el-option <el-option
v-for="item in aroundList" v-for="item in aroundList"
:key="item.value" :key="item.value"
@ -72,7 +74,7 @@
v-else-if="dynamicTime && timeRange.intervalType === 'timeInterval'" v-else-if="dynamicTime && timeRange.intervalType === 'timeInterval'"
> >
<div class="setting"> <div class="setting">
<div class="setting-label">{{ $t('time.start_time') }}</div> <div class="setting-label">{{ $t("time.start_time") }}</div>
<div class="setting-input range"> <div class="setting-input range">
<el-input-number <el-input-number
v-model="timeRange.timeNum" v-model="timeRange.timeNum"
@ -80,7 +82,7 @@
:min="0" :min="0"
controls-position="right" controls-position="right"
/> />
<el-select v-model="timeRange.relativeToCurrentType"> <el-select size="small" v-model="timeRange.relativeToCurrentType">
<el-option <el-option
v-for="item in relativeToCurrentTypeList" v-for="item in relativeToCurrentTypeList"
:key="item.value" :key="item.value"
@ -88,7 +90,7 @@
:value="item.value" :value="item.value"
/> />
</el-select> </el-select>
<el-select v-model="timeRange.around"> <el-select size="small" v-model="timeRange.around">
<el-option <el-option
v-for="item in aroundList" v-for="item in aroundList"
:key="item.value" :key="item.value"
@ -99,7 +101,7 @@
</div> </div>
</div> </div>
<div class="setting"> <div class="setting">
<div class="setting-label">{{ $t('time.end_time') }}</div> <div class="setting-label">{{ $t("time.end_time") }}</div>
<div class="setting-input range"> <div class="setting-input range">
<el-input-number <el-input-number
v-model="timeRange.timeNumRange" v-model="timeRange.timeNumRange"
@ -107,7 +109,7 @@
:min="0" :min="0"
controls-position="right" controls-position="right"
/> />
<el-select v-model="timeRange.relativeToCurrentTypeRange"> <el-select size="small" v-model="timeRange.relativeToCurrentTypeRange">
<el-option <el-option
v-for="item in relativeToCurrentTypeList" v-for="item in relativeToCurrentTypeList"
:key="item.value" :key="item.value"
@ -115,7 +117,7 @@
:value="item.value" :value="item.value"
/> />
</el-select> </el-select>
<el-select v-model="timeRange.aroundRange"> <el-select size="small" v-model="timeRange.aroundRange">
<el-option <el-option
v-for="item in aroundList" v-for="item in aroundList"
:key="item.value" :key="item.value"
@ -128,13 +130,16 @@
</template> </template>
</div> </div>
<div class="parameters" :class="dynamicTime && 'setting'"> <div class="parameters" :class="dynamicTime && 'setting'">
<div class="setting-label" v-if="dynamicTime">{{ $t('time.preview') }}</div> <div class="setting-label" v-if="dynamicTime">
{{ $t("time.preview") }}
</div>
<div :class="dynamicTime ? 'setting-value' : 'w100'"> <div :class="dynamicTime ? 'setting-value' : 'w100'">
<el-date-picker <el-date-picker
:disabled="timeRange.regularOrTrends !== 'fixed'" :disabled="timeRange.regularOrTrends !== 'fixed'"
v-model="timeRange.regularOrTrendsValue" v-model="timeRange.regularOrTrendsValue"
:key="timeInterval" :key="timeInterval"
:type="timeInterval" :type="timeInterval"
size="small"
:start-placeholder="$t('dataset.start_time')" :start-placeholder="$t('dataset.start_time')"
:end-placeholder="$t('dataset.end_time')" :end-placeholder="$t('dataset.end_time')"
/> />
@ -152,37 +157,31 @@
v-if="timeRange.dynamicWindow" v-if="timeRange.dynamicWindow"
class="setting-content maximum-single-query" class="setting-content maximum-single-query"
> >
{{ $t('time.maximum_single_query') }} {{ $t("time.maximum_single_query") }}
<el-input-number <el-input-number
v-model="timeRange.maximumSingleQuery" v-model="timeRange.maximumSingleQuery"
:min="1" :min="1"
size="small" size="small"
controls-position="right" controls-position="right"
/> />
{{ $t('time.day') }} {{ $t("time.day_s") }}
</div> </div>
</div> </div>
<div class="popover-foot"> <div class="popover-foot">
<de-btn <de-btn secondary @click="closeFilter">{{ $t("chart.cancel") }} </de-btn>
secondary <de-btn type="primary" @click="changeFilter"
@click="closeFilter" >{{ $t("chart.confirm") }}
>{{ $t('chart.cancel') }} </de-btn>
</de-btn>
<de-btn
type="primary"
@click="changeFilter"
>{{ $t('chart.confirm') }}
</de-btn>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { getThisStart, getLastStart, getAround } from "./time-format-dayjs"; import { getThisStart, getLastStart, getAround } from "./time-format-dayjs";
import { cloneDeep } from 'lodash-es' import { cloneDeep } from "lodash-es";
const intervalTypeList = [ const intervalTypeList = [
{ {
label: "day", label: "nothing",
value: "none", value: "none",
}, },
{ {
@ -247,24 +246,24 @@ const relativeToCurrentList = [
]; ];
const defaultObj = { const defaultObj = {
intervalType: "none", intervalType: "none",
dynamicWindow: false, dynamicWindow: false,
maximumSingleQuery: 0, maximumSingleQuery: 0,
regularOrTrends: "fixed", regularOrTrends: "fixed",
regularOrTrendsValue: "", regularOrTrendsValue: "",
relativeToCurrent: "custom", relativeToCurrent: "custom",
timeNum: 0, timeNum: 0,
relativeToCurrentType: "year", relativeToCurrentType: "year",
around: "f", around: "f",
timeNumRange: 0, timeNumRange: 0,
relativeToCurrentTypeRange: "year", relativeToCurrentTypeRange: "year",
aroundRange: "f", aroundRange: "f",
} };
export default { export default {
props: { props: {
timeRangeData: { timeRangeData: {
type: Object, type: Object,
defalut: () => (defaultObj), defalut: () => defaultObj,
}, },
}, },
data() { data() {
@ -291,7 +290,7 @@ export default {
}, },
created() { created() {
this.timeRange = cloneDeep(this.timeRangeData); this.timeRange = cloneDeep(this.timeRangeData);
this.init() this.init();
}, },
computed: { computed: {
timeConfig() { timeConfig() {
@ -350,10 +349,23 @@ export default {
aroundRange, aroundRange,
regularOrTrends, regularOrTrends,
} = this.timeRange; } = this.timeRange;
if (regularOrTrends === 'fixed') { if (regularOrTrends === "fixed") {
if (!!regularOrTrendsValue) return if (intervalType === "timeInterval") {
this.timeRange.regularOrTrendsValue = new Date() if (
return Array.isArray(regularOrTrendsValue) &&
!!regularOrTrendsValue.length
)
return;
this.timeRange.regularOrTrendsValue = [
getAround(relativeToCurrentType, "add", 0),
getAround(relativeToCurrentType, "add", 1),
];
return;
}
if (!Array.isArray(regularOrTrendsValue) && !!regularOrTrendsValue)
return;
this.timeRange.regularOrTrendsValue = new Date();
return;
} }
if (intervalType === "timeInterval") { if (intervalType === "timeInterval") {
const startTime = getAround( const startTime = getAround(
@ -408,18 +420,18 @@ export default {
} }
}, },
closeFilter() { closeFilter() {
this.timeRange = cloneDeep(defaultObj) this.timeRange = cloneDeep(defaultObj);
this.$emit('changeData', null) this.$emit("changeData", null);
}, },
changeFilter() { changeFilter() {
this.$emit('changeData', cloneDeep(this.timeRange)) this.$emit("changeData", cloneDeep(this.timeRange));
} },
}, },
}; };
</script> </script>
<style lang="less"> <style lang="less">
.set-time-filtering-range { .set-time-filtering-range {
color: #1F2329; color: #1f2329;
.el-radio, .el-radio,
.el-checkbox.el-checkbox--default { .el-checkbox.el-checkbox--default {
height: 22px; height: 22px;
@ -433,7 +445,7 @@ export default {
padding: 16px; padding: 16px;
width: calc(100% + 24px); width: calc(100% + 24px);
margin: 0 0 -12px -12px; margin: 0 0 -12px -12px;
border-top: 1px solid #1F232926; border-top: 1px solid #1f232926;
} }
.title { .title {
font-size: 14px; font-size: 14px;
@ -577,6 +589,13 @@ export default {
& > div + div { & > div + div {
margin-left: 8px; margin-left: 8px;
} }
.el-select {
width: 97px;
}
.el-input-number {
width: 98px;
}
} }
&.is-year-month-range { &.is-year-month-range {