center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

feat: 选择日期解析格式

Browse Source
This commit is contained in:
dataeaseShu 2022-11-22 15:11:39 +08:00
parent d89ebba748
commit bbea8ecef8
5 changed files with 87 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/lang/en.js
View File

@ -918,6 +918,7 @@ export default {
layer_controller: 'Quota switch',
suspension: 'Suspension',
chart_background: 'Component background',
date_format: 'Select date resolution format',
solid_color: 'Solid color',
split_gradient: 'Split gradient',
continuous_gradient: 'Continuous gradient',

1
frontend/src/lang/tw.js
View File

@ -918,6 +918,7 @@ export default {
layer_controller: '指標切換',
suspension: '懸浮',
chart_background: '組件背景',
date_format: '選擇日期解析格式',
solid_color: '純色',
split_gradient: '分離漸變',
continuous_gradient: '連續漸變',

1
frontend/src/lang/zh.js
View File

@ -917,6 +917,7 @@ export default {
layer_controller: '指标切换',
suspension: '悬浮',
chart_background: '组件背景',
date_format: '请选择日期解析格式',
solid_color: '纯色',
split_gradient: '分离渐变',
continuous_gradient: '连续渐变',

2
frontend/src/views/chart/view/ChartEdit.vue
View File

@ -1655,14 +1655,12 @@ import ScrollCfg from '@/views/chart/components/senior/ScrollCfg'
import ChartFieldEdit from '@/views/chart/view/ChartFieldEdit'
import CalcChartFieldEdit from '@/views/chart/view/CalcChartFieldEdit'
import { equalsAny } from '@/utils/StringUtils'
import MarginSelector from '@/views/chart/components/componentStyle/MarginSelector'
import PositionAdjust from '@/views/chart/view/PositionAdjust'
export default {
name: 'ChartEdit',
components: {
PositionAdjust,
MarginSelector,
ScrollCfg,
CalcChartFieldEdit,
ChartFieldEdit,

135
frontend/src/views/dataset/data/FieldEdit.vue
View File

@ -141,46 +141,49 @@
min-width="200"
>
<template slot-scope="scope">
<el-select
<el-cascader
v-model="scope.row.deType"
size="small"
class="select-type"
popper-class="select-date-resolution-format"
:disabled="!hasDataPermission('manage', param.privileges)"
class="select-type"
:options="fields"
@visible-change="getPopPosition"
@change="saveEdit(scope.row)"
>
<el-option
v-for="item in fields"
:key="item.value"
:label="item.label"
:value="item.value"
>
<span style="float: left">
<template slot-scope="{ node, data }">
<span
v-if="node.level === 2 && node.label === '%Y-%m-%d'"
class="format-title"
:style="popPosition"
>{{ $t('chart.date_format') }}</span>
<span>
<svg-icon
v-if="item.value === 0"
v-if="data.value === 0"
icon-class="field_text"
class="field-icon-text field-icon-dimension"
/>
<svg-icon
v-if="item.value === 1"
v-if="data.value === 1"
icon-class="field_time"
class="field-icon-time field-icon-dimension"
/>
<svg-icon
v-if="item.value === 2 || item.value === 3"
v-if="data.value === 2 || data.value === 3"
icon-class="field_value"
class="field-icon-value field-icon-dimension"
/>
<svg-icon
v-if="item.value === 5"
v-if="data.value === 5"
icon-class="field_location"
class="field-icon-location field-icon-dimension"
/>
</span>
<span style="float: left; color: #8492a6; font-size: 12px">{{
item.label
<span style="color: #8492a6; font-size: 12px">{{
data.label
}}</span>
</el-option>
</el-select>
</template>
</el-cascader>
<span class="select-svg-icon">
<span v-if="scope.row.deType === 0 || scope.row.deType === 6">
<svg-icon
@ -478,46 +481,49 @@
min-width="200"
>
<template slot-scope="scope">
<el-select
<el-cascader
v-model="scope.row.deType"
size="small"
class="select-type"
popper-class="select-date-resolution-format"
:disabled="!hasDataPermission('manage', param.privileges)"
class="select-type"
:options="fields"
@visible-change="getPopPosition"
@change="saveEdit(scope.row)"
>
<el-option
v-for="item in fields"
:key="item.value"
:label="item.label"
:value="item.value"
>
<span style="float: left">
<template slot-scope="{ node, data }">
<span
v-if="node.level === 2 && node.label === '%Y-%m-%d'"
class="format-title"
:style="popPosition"
>{{ $t('chart.date_format') }}</span>
<span>
<svg-icon
v-if="item.value === 0"
v-if="data.value === 0"
icon-class="field_text"
class="field-icon-text field-icon-quota"
class="field-icon-text field-icon-dimension"
/>
<svg-icon
v-if="item.value === 1"
v-if="data.value === 1"
icon-class="field_time"
class="field-icon-time field-icon-quota"
class="field-icon-time field-icon-dimension"
/>
<svg-icon
v-if="item.value === 2 || item.value === 3"
v-if="data.value === 2 || data.value === 3"
icon-class="field_value"
class="field-icon-value field-icon-quota"
class="field-icon-value field-icon-dimension"
/>
<svg-icon
v-if="item.value === 5"
v-if="data.value === 5"
icon-class="field_location"
class="field-icon-location field-icon-quota"
class="field-icon-location field-icon-dimension"
/>
</span>
<span style="float: left; color: #8492a6; font-size: 12px">{{
item.label
<span style="color: #8492a6; font-size: 12px">{{
data.label
}}</span>
</el-option>
</el-select>
</template>
</el-cascader>
<span class="select-svg-icon">
<span v-if="scope.row.deType === 0">
<svg-icon
@ -757,7 +763,6 @@ export default {
},
data() {
return {
dateFormats: [],
maxHeight: 'auto',
tableFields: {
dimensionList: [],
@ -765,17 +770,8 @@ export default {
dimensionListData: [],
quotaListData: []
},
fields: [
{ label: this.$t('dataset.text'), value: 0 },
{ label: this.$t('dataset.time'), value: 1 },
{ label: this.$t('dataset.value'), value: 2 },
{
label:
this.$t('dataset.value') + '(' + this.$t('dataset.float') + ')',
value: 3
},
{ label: this.$t('dataset.location'), value: 5 }
],
popPosition: {},
fields: [],
fieldActiveNames: ['d', 'q'],
searchField: '',
editCalcField: false,
@ -811,6 +807,18 @@ export default {
that.maxHeight = currentHeight - 56 - 30 - 35 - 26 - 10 - 10 + 'px'
}, 10)
},
getPopPosition(val) {
if (!val) return
// setTimeout(() => {
// }, 50)
this.$nextTick(() => {
const list = document.querySelectorAll('body > .select-date-resolution-format')
const ele = list[list.length - 1]
const { top, left } = ele?.style
this.popPosition = { top: parseInt(top) - 18 + 'px', left: parseInt(left) + 181 + 'px', position: 'fixed' }
})
},
initField() {
fieldListDQ(this.param.id).then((response) => {
this.tableFields = response.data
@ -825,7 +833,19 @@ export default {
this.quotaChange()
})
dateformats(this.param.id).then((response) => {
this.dateFormats = response.data
const children = (response?.data || []).map(ele => ({ label: ele.dateformat, value: ele.dateformat }))
children.push({ label: '自定义', value: 'custom' })
this.fields = [
{ label: this.$t('dataset.text'), value: 0 },
{ label: this.$t('dataset.time'), value: 1, children },
{ label: this.$t('dataset.value'), value: 2 },
{
label:
this.$t('dataset.value') + '(' + this.$t('dataset.float') + ')',
value: 3
},
{ label: this.$t('dataset.location'), value: 5 }
]
})
},
saveEdit(item) {
@ -1153,3 +1173,16 @@ span {
border-bottom: 0 solid #e6ebf5 !important;
}
</style>
<style lang="scss">
.select-date-resolution-format {
.format-title {
position: fixed;
display: inline-block;
height: 30px;
background: #dfe6ec;
width: 192px;
padding-left: 30px;
}
}
</style>