Merge pull request #2691 from dataease/pr@dev@perf_filter_button

perf(仪表板): 优化仪表板查询按钮
This commit is contained in:
fit2cloud-chenyw 2022-07-26 10:12:00 +08:00 committed by GitHub
commit 0faf625908
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 116 additions and 23 deletions

View File

@ -15,6 +15,8 @@
:style="getComponentStyleDefault(config.style)"
style="overflow: hidden"
:out-style="config.style"
:is-relation="isRelation"
ref="deOutWidget"
:element="config"
:in-screen="inScreen"
:edit-mode="'preview'"
@ -103,6 +105,10 @@ export default {
type: String,
required: false,
default: 'NotProvided'
},
isRelation: {
type: Boolean,
default: false
}
},
data() {
@ -247,6 +253,13 @@ export default {
},
closePreview() {
this.previewVisible = false
},
getCondition() {
if(this.$refs.deOutWidget && this.$refs.deOutWidget.getCondition) {
return this.$refs.deOutWidget.getCondition()
}else {
return null
}
}
}
}

View File

@ -25,9 +25,11 @@
v-for="(item, index) in componentDataInfo"
:key="index"
:config="item"
ref="viewWrapperChild"
:search-count="searchCount"
:in-screen="inScreen"
:terminal="terminal"
:is-relation="relationFilterIds.includes(item.id)"
:filters="filterMap[item.propValue && item.propValue.viewId]"
:screen-shot="screenShot"
:canvas-style-data="canvasStyleData"
@ -259,6 +261,17 @@ export default {
filterMap() {
const map = this.buttonFilterMap || buildFilterMap(this.componentData)
return map
},
searchButtonInfo() {
const result = this.buildButtonFilterMap(this.componentData)
return result
},
buttonExist() {
return this.searchButtonInfo && this.searchButtonInfo.buttonExist
},
relationFilterIds() {
return this.buttonExist && this.searchButtonInfo.relationFilterIds || []
}
},
watch: {
@ -295,7 +308,9 @@ export default {
},
methods: {
triggerSearchButton() {
this.buttonFilterMap = this.buildButtonFilterMap(this.componentData)
const result = this.buildButtonFilterMap(this.componentData)
this.searchButtonInfo.filterMap = result.filterMap
this.buttonFilterMap = this.searchButtonInfo.filterMap
},
buildButtonFilterMap(panelItems) {
const result = {
@ -331,13 +346,18 @@ export default {
},
buildViewKeyFilters(panelItems, result) {
const refs = this.$refs
panelItems.forEach((element, index) => {
if(!this.$refs['viewWrapperChild'] || !this.$refs['viewWrapperChild'].length) return result
panelItems.forEach((element) => {
if (element.type !== 'custom') {
return true
}
const index = this.getComponentIndex(element.id)
if(index < 0) {
return true
}
let param = null
const wrapperChild = refs['wrapperChild'][index]
const wrapperChild = refs['viewWrapperChild'][index]
param = wrapperChild.getCondition && wrapperChild.getCondition()
const condition = formatCondition(param)
const vValid = valueValid(condition)
@ -357,6 +377,13 @@ export default {
})
return result
},
getComponentIndex(id) {
for (let index = 0; index < this.componentData.length; index++) {
const item = this.componentData[index]
if(item.id === id) return index
}
return -1
},
_isMobile() {
const flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
this.terminal = flag ? 'mobile' : 'pc'

View File

@ -68,6 +68,7 @@
:style="getComponentStyleDefault(item.style)"
:prop-value="item.propValue"
:element="item"
:is-relation="relationFilterIds.includes(item.id)"
:out-style="getShapeStyleInt(item.style)"
:active="item === curComponent"
:h="getShapeStyleIntDeDrag(item.style,'height')"
@ -1006,6 +1007,17 @@ export default {
]),
filterMap() {
return this.buttonFilterMap || buildFilterMap(this.componentData)
},
searchButtonInfo() {
const result = this.buildButtonFilterMap(this.componentData)
return result
},
buttonExist() {
return this.searchButtonInfo && this.searchButtonInfo.buttonExist
},
relationFilterIds() {
return this.buttonExist && this.searchButtonInfo.relationFilterIds || []
}
},
watch: {
@ -1075,8 +1087,9 @@ export default {
created() {
},
methods: {
triggerSearchButton() {
this.buttonFilterMap = this.buildButtonFilterMap(this.componentData)
this.buttonFilterMap = this.searchButtonInfo.filterMap
},
buildButtonFilterMap(panelItems) {
const result = {
@ -1112,12 +1125,16 @@ export default {
},
buildViewKeyFilters(panelItems, result) {
const refs = this.$refs
panelItems.forEach((element, index) => {
panelItems.forEach((element) => {
if (element.type !== 'custom') {
return true
}
let param = null
const index = this.getComponentIndex(element.id)
if(index < 0) {
return true
}
const wrapperChild = refs['wrapperChild'][index]
param = wrapperChild.getCondition && wrapperChild.getCondition()
const condition = formatCondition(param)
@ -1138,6 +1155,13 @@ export default {
})
return result
},
getComponentIndex(id) {
for (let index = 0; index < this.componentData.length; index++) {
const item = this.componentData[index]
if(item.id === id) return index
}
return -1
},
pluginEditHandler({ e, id }) {
let index = -1
for (let i = 0; i < this.componentData.length; i++) {

View File

@ -27,9 +27,10 @@
:is="element.component"
v-if="element.type==='custom'"
:id="'component' + element.id"
ref="filter-ref"
ref="deOutWidget"
class="component-custom"
:out-style="element.style"
:is-relation="isRelation"
:element="element"
:in-draw="inDraw"
:in-screen="inScreen"
@ -72,6 +73,10 @@ export default {
type: String,
require: false,
default: 'edit'
},
isRelation: {
type: Boolean,
default: false
}
},
data() {
@ -154,8 +159,8 @@ export default {
}
},
getCondition() {
if (this.$refs && this.$refs['filter-ref'] && this.$refs['filter-ref'].getCondition) {
return this.$refs['filter-ref'].getCondition()
if (this.$refs && this.$refs['deOutWidget'] && this.$refs['deOutWidget'].getCondition) {
return this.$refs['deOutWidget'].getCondition()
}
return null
}

View File

@ -46,7 +46,11 @@ export default {
required: false,
default: true
},
size: String
size: String,
isRelation: {
type: Boolean,
default: false
}
},
data() {
return {
@ -181,7 +185,7 @@ export default {
},
setCondition() {
const param = this.getCondition()
this.inDraw && this.$store.commit('addViewFilter', param)
!this.isRelation && this.inDraw && this.$store.commit('addViewFilter', param)
},
dateChange(value) {
if (!this.inDraw) {

View File

@ -31,7 +31,11 @@ export default {
type: Boolean,
default: true
},
size: String
size: String,
isRelation: {
type: Boolean,
default: false
}
},
data() {
return {
@ -101,7 +105,7 @@ export default {
},
setCondition() {
const param = this.getCondition()
this.inDraw && this.$store.commit('addViewFilter', param)
!this.isRelation && this.inDraw && this.$store.commit('addViewFilter', param)
},
setEdit() {
this.canEdit = true

View File

@ -29,7 +29,11 @@ export default {
type: Boolean,
default: true
},
size: String
size: String,
isRelation: {
type: Boolean,
default: false
}
},
data() {
@ -223,24 +227,24 @@ export default {
const param = this.getCondition()
if (this.form.min && this.form.max) {
this.inDraw && this.$store.commit('addViewFilter', param)
!this.isRelation && this.inDraw && this.$store.commit('addViewFilter', param)
return
}
if (!this.form.min && !this.form.max) {
param.value = []
this.inDraw && this.$store.commit('addViewFilter', param)
!this.isRelation && this.inDraw && this.$store.commit('addViewFilter', param)
return
}
if (this.form.min) {
param.value = [this.form.min]
param.operator = 'ge'
this.inDraw && this.$store.commit('addViewFilter', param)
!this.isRelation && this.inDraw && this.$store.commit('addViewFilter', param)
return
}
if (this.form.max) {
param.value = [this.form.max]
param.operator = 'le'
this.inDraw && this.$store.commit('addViewFilter', param)
!this.isRelation && this.inDraw && this.$store.commit('addViewFilter', param)
return
}
},

View File

@ -58,7 +58,11 @@ export default {
required: false,
default: true
},
size: String
size: String,
isRelation: {
type: Boolean,
default: false
}
},
data() {
return {
@ -286,7 +290,7 @@ export default {
},
setCondition() {
const param = this.getCondition()
this.inDraw && this.$store.commit('addViewFilter', param)
!this.isRelation && this.inDraw && this.$store.commit('addViewFilter', param)
},
formatFilterValue() {
if (this.value === null) return []

View File

@ -58,7 +58,11 @@ export default {
required: false,
default: true
},
size: String
size: String,
isRelation: {
type: Boolean,
default: false
}
},
data() {
return {
@ -283,7 +287,7 @@ export default {
},
setCondition() {
const param = this.getCondition()
this.inDraw && this.$store.commit('addViewFilter', param)
!this.isRelation && this.inDraw && this.$store.commit('addViewFilter', param)
},
formatFilterValue() {
if (this.value === null) return []

View File

@ -47,7 +47,11 @@ export default {
required: false,
default: true
},
size: String
size: String,
isRelation: {
type: Boolean,
default: false
}
},
data() {
return {
@ -293,7 +297,7 @@ export default {
setCondition() {
const param = this.getCondition()
this.inDraw && this.$store.commit('addViewFilter', param)
!this.isRelation && this.inDraw && this.$store.commit('addViewFilter', param)
},
formatFilterValue() {
const SEPARATOR = '-de-'