fix(仪表板): 图表过滤器动态日期类型,样式与设计不符

This commit is contained in:
dataeaseShu 2024-08-08 17:57:13 +08:00
parent d1ccab466e
commit afaf9626bb
3 changed files with 59 additions and 6 deletions

View File

@ -127,9 +127,17 @@ onBeforeMount(() => {
<template> <template>
<el-date-picker <el-date-picker
disabled disabled
class="date-editor_granularity"
:key="config.timeGranularity" :key="config.timeGranularity"
v-model="selectValue" v-model="selectValue"
:type="config.timeGranularity" :type="config.timeGranularity"
:placeholder="$t('commons.date.select_date_time')" :placeholder="$t('commons.date.select_date_time')"
/> />
</template> </template>
<style lang="less">
.date-editor_granularity .ed-input__wrapper {
width: 325px;
margin-top: 0;
}
</style>

View File

@ -231,7 +231,7 @@ defineExpose({
/> />
</el-select> </el-select>
<el-time-picker <el-time-picker
style="width: 146px; margin-left: 8px" style="width: 108px; margin-left: 8px"
v-if="curComponent.timeGranularity === 'datetime'" v-if="curComponent.timeGranularity === 'datetime'"
v-model="curComponent.arbitraryTime" v-model="curComponent.arbitraryTime"
/> />
@ -239,8 +239,8 @@ defineExpose({
</div> </div>
<div class="setting"> <div class="setting">
<div class="setting-label">预览</div> <div class="setting-label">预览</div>
<div class="setting-value"> <div class="setting-value" style="width: 325px">
<component :config="curComponent" isConfig ref="inputCom" :is="DynamicTime"></component> <DynamicTime style="width: 100%" :config="curComponent" isConfig></DynamicTime>
</div> </div>
</div> </div>
</div> </div>
@ -280,7 +280,7 @@ defineExpose({
.setting-input { .setting-input {
display: flex; display: flex;
padding-left: 86px; padding-left: 126px;
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
&.range { &.range {

View File

@ -197,14 +197,59 @@ const relativeToCurrentTypeMap = {
const confirmTimeSelect = () => { const confirmTimeSelect = () => {
item.value.dynamicTimeSetting = { ...timeDialog.value.curComponent } item.value.dynamicTimeSetting = { ...timeDialog.value.curComponent }
const { timeGranularity, timeNum, relativeToCurrentType, around, arbitraryTime } = const {
item.value.dynamicTimeSetting timeGranularity,
timeNum,
relativeToCurrentType,
around,
arbitraryTime,
relativeToCurrent
} = item.value.dynamicTimeSetting
if (relativeToCurrent !== 'custom') {
item.value.timeValue = [
{
label: '今年',
value: 'thisYear'
},
{
label: '去年',
value: 'lastYear'
},
{
label: '本月',
value: 'thisMonth'
},
{
label: '上月',
value: 'lastMonth'
},
{
label: '今天',
value: 'today'
},
{
label: '昨天',
value: 'yesterday'
},
{
label: '月初',
value: 'monthBeginning'
},
{
label: '年初',
value: 'yearBeginning'
}
].find(ele => ele.value === relativeToCurrent).label
dialogVisible.value = false
return
}
item.value.timeValue = `${timeNum}${relativeToCurrentTypeMap[relativeToCurrentType]}${ item.value.timeValue = `${timeNum}${relativeToCurrentTypeMap[relativeToCurrentType]}${
around === 'f' ? '前' : '后' around === 'f' ? '前' : '后'
}` }`
if (timeGranularity === 'datetime') { if (timeGranularity === 'datetime') {
item.value.timeValue += new Date(arbitraryTime).toLocaleString().split(' ')[1] item.value.timeValue += new Date(arbitraryTime).toLocaleString().split(' ')[1]
} }
dialogVisible.value = false dialogVisible.value = false
} }