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

Merge pull request #2632 from dataease/pr@dev@perf_date_filter

Browse Source 
perf(仪表板): 日期过滤组件增加时间精度配置
This commit is contained in:
fit2cloud-chenyw 2022-07-13 16:19:13 +08:00 committed by GitHub
commit b630561943
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 175 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/components/canvas/utils/utils.js
View File

@ -86,13 +86,17 @@ export function panelDataPrepare(componentData, componentStyle, callback) {
componentStyle.panel.themeColor = (componentStyle.panel.themeColor || 'light')
componentData.forEach((item, index) => {
if (item.component && item.component === 'de-date') {
const widget = ApplicationContext.getService(item.serviceName)
if (item.options.attrs &&
(!item.options.attrs.default || (item.serviceName === 'timeYearWidget' && item.options.attrs.default.dynamicInfill !== 'year') || (item.serviceName === 'timeMonthWidget' && item.options.attrs.default.dynamicInfill !== 'month'))) {
const widget = ApplicationContext.getService(item.serviceName)
if (widget && widget.defaultSetting) {
item.options.attrs.default = widget.defaultSetting()
}
}
if (item.options.attrs && widget.isTimeWidget && widget.isTimeWidget() && !item.options.attrs.hasOwnProperty('showTime')) {
item.options.attrs.showTime = false
item.options.attrs.accuracy = 'HH:mm'
}
}
if (item.type === 'custom') {
item.options.manualModify = false

25
frontend/src/components/widget/DeWidget/DeDate.vue
View File

@ -4,13 +4,14 @@
ref="dateRef"
v-model="values"
popper-class="coustom-date-picker"
:type="element.options.attrs.type"
:type="componentType"
:range-separator="$t(element.options.attrs.rangeSeparator)"
:start-placeholder="$t(element.options.attrs.startPlaceholder)"
:end-placeholder="$t(element.options.attrs.endPlaceholder)"
:placeholder="$t(element.options.attrs.placeholder)"
:append-to-body="inScreen"
value-format="timestamp"
:format="labelFormat"
:size="size"
:editable="false"
@change="dateChange"
@ -52,7 +53,6 @@ export default {
operator: 'between',
values: null,
onFocus: false
}
},
computed: {
@ -70,7 +70,26 @@ export default {
},
manualModify() {
return !!this.element.options.manualModify
},
isTimeWidget() {
const widget = ApplicationContext.getService(this.element.serviceName)
return widget.isTimeWidget && widget.isTimeWidget()
},
componentType() {
let result = 'date'
if (this.isTimeWidget && this.element.options.attrs.showTime) {
result = 'datetime'
}
return result
},
labelFormat() {
const result = 'yyyy-MM-dd'
if (this.isTimeWidget && this.element.options.attrs.showTime && this.element.options.attrs.accuracy) {
return result + ' ' + this.element.options.attrs.accuracy
}
return result
}
},
watch: {
'viewIds': function(value, old) {
@ -194,7 +213,7 @@ export default {
return results
} else {
const value = values[0]
return timeSection(parseFloat(value), this.element.options.attrs.type)
return timeSection(parseFloat(value), this.componentType || this.element.options.attrs.type, this.labelFormat)
}
},
fillValueDerfault() {

16
frontend/src/components/widget/serviceImpl/TimeDateServiceImpl.js
View File

@ -40,7 +40,10 @@ const dialogPanel = {
],
limits: [1, 12]
}
}
},
showTime: false,
accuracy: 'HH:mm'
},
value: '',
manualModify: false
@ -209,9 +212,18 @@ class TimeDateServiceImpl extends WidgetService {
return results
} else {
const value = values[0]
return timeSection(parseFloat(value), element.options.attrs.type)
const componentType = element.options.attrs.showTime ? 'datetime' : 'date'
let labelFormat = 'yyyy-MM-dd'
if (element.options.attrs.showTime && element.options.attrs.accuracy) {
labelFormat = labelFormat + ' ' + element.options.attrs.accuracy
}
return timeSection(parseFloat(value), componentType || element.options.attrs.type, labelFormat)
}
}
isTimeWidget() {
return true
}
}
const timeDateServiceImpl = new TimeDateServiceImpl({
name: 'timeDateWidget'

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

@ -1631,6 +1631,7 @@ export default {
component_list: 'Component list',
custom_scope: 'Target',
multiple_choice: 'Multiple choice',
show_time: 'Show time',
single_choice: 'Single choice',
field: 'Field',
unshared_people: 'Unshared people',

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

@ -1632,6 +1632,7 @@ export default {
component_list: '組件列錶',
custom_scope: '控製範圍',
multiple_choice: '多選',
show_time: '顯示時間',
single_choice: '單選',
field: '字段',
unshared_people: '未分享人員',

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

@ -1641,6 +1641,7 @@ export default {
custom_scope: '控制范围',
binding_parameters: '参数',
multiple_choice: '多选',
show_time: '显示时间',
single_choice: '单选',
field: '字段',
unshared_people: '未分享人员',

37
frontend/src/utils/index.js
View File

@ -1,5 +1,5 @@
import Cookies from 'js-cookie'
export function timeSection(date, type) {
export function timeSection(date, type, labelFormat = 'yyyy-MM-dd') {
if (!date) {
return null
}
@ -8,10 +8,20 @@ export function timeSection(date, type) {
}
const timeRanger = new Array(2)
date.setHours(0)
date.setMinutes(0)
date.setSeconds(0)
date.setMilliseconds(0)
const formatArr = labelFormat ? labelFormat.split(' ') : []
const methods = ['setHours', 'setMinutes', 'setSeconds', 'setMilliseconds']
let methodsLen = methods.length
if (type === 'datetime' && formatArr.length > 1) {
const childArr = formatArr[1] ? formatArr[1].split(':') : []
const childArrLength = childArr ? childArr.length : 0
while (--methodsLen >= childArrLength) {
date[methods[methodsLen]](0)
}
} else {
methods.forEach(m => date[m](0))
}
const end = new Date(date)
if (type === 'year') {
date.setDate(1)
@ -38,6 +48,23 @@ export function timeSection(date, type) {
end.setMilliseconds(999)
timeRanger[1] = end.getTime()
}
if (type === 'datetime') {
methodsLen = methods.length
if (formatArr.length > 1) {
const childArr = formatArr[1] ? formatArr[1].split(':') : []
const childArrLength = childArr ? childArr.length : 0
while (--methodsLen >= childArrLength) {
end[methods[methodsLen]](methodsLen === 0 ? 23 : methodsLen === 3 ? 999 : 59)
}
} else {
while (--methodsLen >= 0) {
end[methods[methodsLen]](methodsLen === 0 ? 23 : methodsLen === 3 ? 999 : 59)
}
}
timeRanger[1] = end.getTime()
}
timeRanger[0] = date.getTime()
return timeRanger

22
frontend/src/views/panel/filter/defaultValue/DeDateDefault.vue
View File

@ -8,6 +8,7 @@
<el-radio
v-for="(item, index) in defaultSetting.radioOptions"
:key="index"
:disabled="isTimeWidget && element.options.attrs.showTime && item.value"
:label="item.value"
>
{{ $t(item.text) }}
@ -94,7 +95,8 @@
<el-form-item v-if="element.options.attrs.default.isDynamic" :label="$t('dynamic_time.preview')">
<el-date-picker
v-model="dval"
:type="element.options.attrs.type"
:type="componentType"
:format="labelFormat"
disabled
placeholder=""
class="relative-time"
@ -139,6 +141,24 @@ export default {
const widget = ApplicationContext.getService(this.element.serviceName)
const setting = widget.defaultSetting()
return setting
},
isTimeWidget() {
const widget = ApplicationContext.getService(this.element.serviceName)
return widget.isTimeWidget && widget.isTimeWidget()
},
componentType() {
let result = 'date'
if (this.isTimeWidget && this.element.options.attrs.showTime) {
result = 'datetime'
}
return result
},
labelFormat() {
const result = 'yyyy-MM-dd'
if (this.isTimeWidget && this.element.options.attrs.showTime && this.element.options.attrs.accuracy) {
return result + ' ' + this.element.options.attrs.accuracy
}
return result
}
},
created() {

79
frontend/src/views/panel/filter/filterMain/FilterControl.vue
View File

@ -9,6 +9,37 @@
@change="multipleChange"
/>
<span v-if="widget.isTimeWidget && widget.isTimeWidget()" style="padding-left: 10px;">
<el-checkbox v-model="attrs.showTime" @change="showTimeChange">
<span>{{ $t('panel.show_time') }} </span>
</el-checkbox>
<el-popover v-model="timePopovervisible" placement="bottom-end" :disabled="!attrs.showTime" width="140">
<div style="width: 100%;overflow-y: auto;overflow-x: hidden;word-break: break-all;position: relative;">
<ul class="de-ul">
<li
v-for="(node, i) in accuracyOptions"
:key="node.id"
:index="i"
class="de-sort-field-span"
:class="attrs.accuracy === node.id ? 'de-active-li': ''"
@click="attrs.accuracy = node.id"
>
<span>{{ node.name }}</span>
</li>
</ul>
</div>
<i
slot="reference"
:class="{'i-filter-active': attrs.showTime, 'i-filter-inactive': !attrs.showTime}"
class="el-icon-setting i-filter"
/>
</el-popover>
</span>
</div>
</el-col>
@ -126,7 +157,14 @@ export default {
attrs: null,
titlePopovervisible: false,
popovervisible: false,
parametersVisible: false
parametersVisible: false,
timePopovervisible: false,
accuracyOptions: [
{ id: 'HH', name: 'HH' },
{ id: 'HH:mm', name: 'HH:mm' },
{ id: 'HH:mm:ss', name: 'HH:mm:ss' }
]
}
},
@ -141,6 +179,11 @@ export default {
multipleChange(value) {
this.fillAttrs2Filter()
},
showTimeChange(value) {
this.attrs.accuracy = this.accuracyOptions[1].id
this.attrs.default.isDynamic = false
this.fillAttrs2Filter()
},
checkedViewsChange(values) {
this.fillAttrs2Filter()
},
@ -226,4 +269,38 @@ export default {
overflow: hidden;
}
.de-ul li {
margin: 5px 2px;
cursor: pointer;
&:hover {
color: #409EFF;
border-color: rgb(198, 226, 255);
background-color: rgb(236, 245, 255);
}
&:before {
content: "";
width: 6px;
height: 6px;
display: inline-block;
border-radius: 50%;
vertical-align: middle;
margin-right: 5px;
}
}
.de-active-li {
&:before {
background: #409EFF;
}
}
.de-sort-field-span {
display: inline-flexbox;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>