fix: 仪表板过滤组件首次加载失效

frontend/src/components/canvas/components/Editor/ComponentWrapper.vue

@@ -32,6 +32,7 @@
       :search-count="searchCount"
       :h="config.style.height"
       :edit-mode="'preview'"
+      :filters="filters"
       :terminal="terminal"
     />
   </div>
@@ -74,6 +75,10 @@ export default {
     terminal: {
       type: String,
       default: 'pc'
+    },
+    filters: {
+      type: Array,
+      default: () => []
     }
   },
   data() {

frontend/src/components/canvas/components/Editor/Preview.vue

@@ -20,6 +20,7 @@
           :search-count="searchCount"
           :in-screen="inScreen"
           :terminal="terminal"
+          :filters="filterMap[item.propValue && item.propValue.viewId]"
         />
         <!--视图详情-->
         <el-dialog
@@ -65,7 +66,7 @@ import UserViewDialog from '@/components/canvas/custom-component/UserViewDialog'
 import CanvasOptBar from '@/components/canvas/components/Editor/CanvasOptBar'
 import UserViewMobileDialog from '@/components/canvas/custom-component/UserViewMobileDialog'
 import bus from '@/utils/bus'
-
+import { buildFilterMap } from '@/utils/conditionUtil'
 export default {
   components: { UserViewMobileDialog, ComponentWrapper, UserViewDialog, CanvasOptBar },
   model: {
@@ -193,7 +194,11 @@ export default {
       'componentData',
       'canvasStyleData',
       'componentGap'
-    ])
+    ]),
+    filterMap() {
+      const map = buildFilterMap(this.componentData)
+      return map
+    }
   },
   watch: {
     componentData: {

frontend/src/components/canvas/components/Editor/index.vue

@@ -101,6 +101,7 @@
         :id="'component' + item.id"
         ref="wrapperChild"
         class="component"
+        :filters="filterMap[item.propValue.viewId]"
         :style="getComponentStyleDefault(item.style)"
         :prop-value="item.propValue"
         :element="item"
@@ -191,7 +192,7 @@ import CanvasOptBar from '@/components/canvas/components/Editor/CanvasOptBar'
 import DragShadow from '@/components/DeDrag/shadow'
 import bus from '@/utils/bus'
 import LinkJumpSet from '@/views/panel/LinkJumpSet'
-
+import { buildFilterMap } from '@/utils/conditionUtil'
 // 挤占式画布
 import _ from 'lodash'
 import $ from 'jquery'
@@ -930,6 +931,7 @@ export default {
     dragComponentInfo() {
       return this.$store.state.dragComponentInfo
     },
+
     ...mapState([
       'componentData',
       'curComponent',
@@ -941,7 +943,10 @@ export default {
       'componentGap',
       'mobileLayoutStatus',
       'curCanvasScale'
-    ])
+    ]),
+    filterMap() {
+      return buildFilterMap(this.componentData)
+    }
   },
   watch: {
     customStyle: {

frontend/src/components/canvas/custom-component/UserView.vue

@@ -114,11 +114,15 @@ export default {
     terminal: {
       type: String,
       default: 'pc'
+    },
+    filters: {
+      type: Array,
+      default: () => []
     }
   },
   data() {
     return {
-      filterInit: false, // 标记是否已经通过watch.filters 进行初始化，如果filterInit=true 则create放弃数据初始化防止数据覆盖
+      isFirstLoad: true, // 是否是第一次加载
       refId: null,
       chart: BASE_CHART_STRING,
       requestStatus: 'success',
@@ -179,7 +183,7 @@ export default {
     },
     filter() {
       const filter = {}
-      filter.filter = this.element.filters
+      filter.filter = this.isFirstLoad ? this.filters : this.cfilters
       filter.linkageFilters = this.element.linkageFilters
       filter.drill = this.drillClickDimensionList
       filter.resultCount = this.resultCount
@@ -187,7 +191,7 @@ export default {
       filter.queryFrom = 'panel'
       return filter
     },
-    filters() {
+    cfilters() {
       // 必要 勿删勿该  watch数组，哪怕发生变化 oldValue等于newValue ，深拷贝解决
       if (!this.element.filters) return []
       return JSON.parse(JSON.stringify(this.element.filters))
@@ -242,12 +246,14 @@ export default {
   },
 
   watch: {
-    'filters': function(val1, val2) {
-      if (isChange(val1, val2)) {
-        this.filterInit = true
+    'cfilters': {
+      handler: function(val1, val2) {
+        if (isChange(val1, val2) && !this.isFirstLoad) {
           this.getData(this.element.propValue.viewId)
         }
       },
+      deep: true
+    },
     linkageFilters: {
       handler(newVal, oldVal) {
         if (isChange(newVal, oldVal)) {
@@ -318,7 +324,8 @@ export default {
     this.refId = uuid.v1
     if (this.element && this.element.propValue && this.element.propValue.viewId) {
       // 如果watch.filters 已经进行数据初始化时候，此处放弃数据初始化
-      !this.filterInit && this.getData(this.element.propValue.viewId, false)
+
+      this.getData(this.element.propValue.viewId, false)
     }
   },
   methods: {
@@ -399,6 +406,7 @@ export default {
             this.requestStatus = 'error'
             this.message = response.message
           }
+          this.isFirstLoad = false
           return true
         }).catch(err => {
           this.requestStatus = 'error'
@@ -413,6 +421,7 @@ export default {
               this.message = err
             }
           }
+          this.isFirstLoad = false
           return true
         })
       }

frontend/src/components/widget/serviceImpl/NumberRangeServiceImpl.js

@@ -67,6 +67,39 @@ class NumberRangeServiceImpl extends WidgetService {
       return field['deType'] === 2 || field['deType'] === 3
     })
   }
+
+  getParam(element) {
+    if (element.options.value && element.options.value.length > 0) {
+      const values = this.element.options.value
+      const min = values[0]
+      let max = null
+      if (values.length > 1) {
+        max = values[1]
+      }
+      const param = {
+        component: element,
+        value: [min, max],
+        operator: 'between'
+      }
+      if (min && max) {
+        return param
+      }
+      if (!min && !max) {
+        param.value = []
+        return param
+      }
+      if (min) {
+        param.value = [min]
+        param.operator = 'ge'
+        return param
+      }
+      if (max) {
+        param.value = [max]
+        param.operator = 'le'
+        return param
+      }
+    }
+  }
 }
 const numberRangeServiceImpl = new NumberRangeServiceImpl()
 export default numberRangeServiceImpl

frontend/src/components/widget/serviceImpl/NumberSelectGridServiceImpl.js

@@ -81,6 +81,15 @@ class NumberSelectGridServiceImpl extends WidgetService {
       }
     })
   }
+  getParam(element) {
+    const value = element.options.value
+    const param = {
+      component: element,
+      value: !value ? [] : Array.isArray(value) ? value : value.toString().split(','),
+      operator: element.options.attrs.multiple ? 'in' : 'eq'
+    }
+    return param
+  }
 }
 const numberSelectGridServiceImpl = new NumberSelectGridServiceImpl()
 export default numberSelectGridServiceImpl

frontend/src/components/widget/serviceImpl/NumberSelectServiceImpl.js

@@ -82,6 +82,15 @@ class NumberSelectServiceImpl extends WidgetService {
       }
     })
   }
+  getParam(element) {
+    const value = element.options.value
+    const param = {
+      component: element,
+      value: !value ? [] : Array.isArray(value) ? value : value.toString().split(','),
+      operator: element.options.attrs.multiple ? 'in' : 'eq'
+    }
+    return param
+  }
 }
 const numberSelectServiceImpl = new NumberSelectServiceImpl()
 export default numberSelectServiceImpl

frontend/src/components/widget/serviceImpl/TextInputServiceImpl.js

@@ -67,6 +67,15 @@ class TextInputServiceImpl extends WidgetService {
       return field['deType'] === 0
     })
   }
+  getParam(element) {
+    const value = element.options.value
+    const param = {
+      component: element,
+      value: !value ? [] : Array.isArray(value) ? value : [value],
+      operator: 'like'
+    }
+    return param
+  }
 }
 const textInputServiceImpl = new TextInputServiceImpl()
 export default textInputServiceImpl

frontend/src/components/widget/serviceImpl/TextSelectGridServiceImpl.js

@@ -81,6 +81,15 @@ class TextSelectGridServiceImpl extends WidgetService {
       }
     })
   }
+  getParam(element) {
+    const value = element.options.value
+    const param = {
+      component: element,
+      value: !value ? [] : Array.isArray(value) ? value : value.toString().split(','),
+      operator: element.options.attrs.multiple ? 'in' : 'eq'
+    }
+    return param
+  }
 }
 const textSelectGridServiceImpl = new TextSelectGridServiceImpl()
 export default textSelectGridServiceImpl

frontend/src/components/widget/serviceImpl/TextSelectServiceImpl.js

 
 import { WidgetService } from '../service/WidgetService'
-
 const leftPanel = {
   icon: 'iconfont icon-xialakuang',
   label: 'detextselect.label',
@@ -81,6 +80,16 @@ class TextSelectServiceImpl extends WidgetService {
       }
     })
   }
+
+  getParam(element) {
+    const value = element.options.value
+    const param = {
+      component: element,
+      value: !value ? [] : Array.isArray(value) ? value : value.toString().split(','),
+      operator: element.options.attrs.multiple ? 'in' : 'eq'
+    }
+    return param
+  }
 }
 const textSelectServiceImpl = new TextSelectServiceImpl()
 export default textSelectServiceImpl

frontend/src/components/widget/serviceImpl/TimeDateRangeServiceImpl.js

 import {
   WidgetService
 } from '../service/WidgetService'
-
+import {
+  timeSection
+} from '@/utils'
 const leftPanel = {
   icon: 'iconfont icon-riqi',
   label: 'dedaterange.label',
@@ -222,6 +224,64 @@ class TimeDateRangeServiceImpl extends WidgetService {
       return false
     }
   }
+  getParam(element) {
+    let timeArr = []
+    if (element.options.attrs.default.isDynamic) {
+      let value = this.dynamicDateFormNow(element)
+      value = this.formatFilterValue(value)
+      timeArr = this.formatValues(value, element)
+    } else {
+      let value = this.fillValueDerfault(element)
+      value = this.formatFilterValue(value)
+      timeArr = this.formatValues(value, element)
+    }
+    const param = {
+      component: element,
+      value: timeArr,
+      operator: 'between'
+    }
+    return param
+  }
+  fillValueDerfault(element) {
+    const defaultV = element.options.value === null ? '' : element.options.value.toString()
+    if (element.options.attrs.type === 'daterange') {
+      if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV ===
+          '[object Object]') {
+        return []
+      }
+      return defaultV.split(',').map(item => parseFloat(item))
+    } else {
+      if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV ===
+          '[object Object]') {
+        return null
+      }
+      return parseFloat(defaultV.split(',')[0])
+    }
+  }
+  formatFilterValue(values) {
+    if (values === null) return []
+    if (Array.isArray(values)) return values
+    return [values]
+  }
+  formatValues(values, element) {
+    if (!values || values.length === 0) {
+      return []
+    }
+    if (element.options.attrs.type === 'daterange') {
+      if (values.length !== 2) {
+        return null
+      }
+      let start = values[0]
+      let end = values[1]
+      start = timeSection(start, 'date')[0]
+      end = timeSection(end, 'date')[1]
+      const results = [start, end]
+      return results
+    } else {
+      const value = values[0]
+      return timeSection(parseFloat(value), element.options.attrs.type)
+    }
+  }
 }
 const timeDateRangeServiceImpl = new TimeDateRangeServiceImpl()
 export default timeDateRangeServiceImpl

frontend/src/components/widget/serviceImpl/TimeDateServiceImpl.js

 import {
   WidgetService
 } from '../service/WidgetService'
-
+import {
+  timeSection
+} from '@/utils'
 const leftPanel = {
   icon: 'iconfont icon-ri',
   label: 'dedate.label',
@@ -153,6 +155,64 @@ class TimeDateServiceImpl extends WidgetService {
       }
     }
   }
+  getParam(element) {
+    let timeArr = []
+    if (element.options.attrs.default.isDynamic) {
+      let value = this.dynamicDateFormNow(element)
+      value = this.formatFilterValue(value)
+      timeArr = this.formatValues(value, element)
+    } else {
+      let value = this.fillValueDerfault(element)
+      value = this.formatFilterValue(value)
+      timeArr = this.formatValues(value, element)
+    }
+    const param = {
+      component: element,
+      value: timeArr,
+      operator: 'between'
+    }
+    return param
+  }
+  fillValueDerfault(element) {
+    const defaultV = element.options.value === null ? '' : element.options.value.toString()
+    if (element.options.attrs.type === 'daterange') {
+      if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV ===
+          '[object Object]') {
+        return []
+      }
+      return defaultV.split(',').map(item => parseFloat(item))
+    } else {
+      if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV ===
+          '[object Object]') {
+        return null
+      }
+      return parseFloat(defaultV.split(',')[0])
+    }
+  }
+  formatFilterValue(values) {
+    if (values === null) return []
+    if (Array.isArray(values)) return values
+    return [values]
+  }
+  formatValues(values, element) {
+    if (!values || values.length === 0) {
+      return []
+    }
+    if (element.options.attrs.type === 'daterange') {
+      if (values.length !== 2) {
+        return null
+      }
+      let start = values[0]
+      let end = values[1]
+      start = timeSection(start, 'date')[0]
+      end = timeSection(end, 'date')[1]
+      const results = [start, end]
+      return results
+    } else {
+      const value = values[0]
+      return timeSection(parseFloat(value), element.options.attrs.type)
+    }
+  }
 }
 const timeDateServiceImpl = new TimeDateServiceImpl({
   name: 'timeDateWidget'

frontend/src/components/widget/serviceImpl/TimeMonthServiceImpl.js

 import { WidgetService } from '../service/WidgetService'
-
+import {
+  timeSection
+} from '@/utils'
 const leftPanel = {
   icon: 'iconfont icon-yue',
   label: 'deyearmonth.label',
@@ -119,6 +121,64 @@ class TimeMonthServiceImpl extends WidgetService {
       }
     }
   }
+  getParam(element) {
+    let timeArr = []
+    if (element.options.attrs.default.isDynamic) {
+      let value = this.dynamicDateFormNow(element)
+      value = this.formatFilterValue(value)
+      timeArr = this.formatValues(value, element)
+    } else {
+      let value = this.fillValueDerfault(element)
+      value = this.formatFilterValue(value)
+      timeArr = this.formatValues(value, element)
+    }
+    const param = {
+      component: element,
+      value: timeArr,
+      operator: 'between'
+    }
+    return param
+  }
+  fillValueDerfault(element) {
+    const defaultV = element.options.value === null ? '' : element.options.value.toString()
+    if (element.options.attrs.type === 'daterange') {
+      if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV ===
+          '[object Object]') {
+        return []
+      }
+      return defaultV.split(',').map(item => parseFloat(item))
+    } else {
+      if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV ===
+          '[object Object]') {
+        return null
+      }
+      return parseFloat(defaultV.split(',')[0])
+    }
+  }
+  formatFilterValue(values) {
+    if (values === null) return []
+    if (Array.isArray(values)) return values
+    return [values]
+  }
+  formatValues(values, element) {
+    if (!values || values.length === 0) {
+      return []
+    }
+    if (element.options.attrs.type === 'daterange') {
+      if (values.length !== 2) {
+        return null
+      }
+      let start = values[0]
+      let end = values[1]
+      start = timeSection(start, 'date')[0]
+      end = timeSection(end, 'date')[1]
+      const results = [start, end]
+      return results
+    } else {
+      const value = values[0]
+      return timeSection(parseFloat(value), element.options.attrs.type)
+    }
+  }
 }
 const timeMonthServiceImpl = new TimeMonthServiceImpl()
 export default timeMonthServiceImpl

frontend/src/components/widget/serviceImpl/TimeYearServiceImpl.js

 import { WidgetService } from '../service/WidgetService'
-
+import {
+  timeSection
+} from '@/utils'
 const leftPanel = {
   icon: 'iconfont icon-nian',
   label: 'deyear.label',
@@ -110,6 +112,64 @@ class TimeYearServiceImpl extends WidgetService {
       return new Date(dynamicSuffix === 'before' ? (nowYear - dynamicPrefix) : (nowYear + dynamicPrefix), 0, 1).getTime()
     }
   }
+  getParam(element) {
+    let timeArr = []
+    if (element.options.attrs.default.isDynamic) {
+      let value = this.dynamicDateFormNow(element)
+      value = this.formatFilterValue(value)
+      timeArr = this.formatValues(value, element)
+    } else {
+      let value = this.fillValueDerfault(element)
+      value = this.formatFilterValue(value)
+      timeArr = this.formatValues(value, element)
+    }
+    const param = {
+      component: element,
+      value: timeArr,
+      operator: 'between'
+    }
+    return param
+  }
+  fillValueDerfault(element) {
+    const defaultV = element.options.value === null ? '' : element.options.value.toString()
+    if (element.options.attrs.type === 'daterange') {
+      if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV ===
+          '[object Object]') {
+        return []
+      }
+      return defaultV.split(',').map(item => parseFloat(item))
+    } else {
+      if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV ===
+          '[object Object]') {
+        return null
+      }
+      return parseFloat(defaultV.split(',')[0])
+    }
+  }
+  formatFilterValue(values) {
+    if (values === null) return []
+    if (Array.isArray(values)) return values
+    return [values]
+  }
+  formatValues(values, element) {
+    if (!values || values.length === 0) {
+      return []
+    }
+    if (element.options.attrs.type === 'daterange') {
+      if (values.length !== 2) {
+        return null
+      }
+      let start = values[0]
+      let end = values[1]
+      start = timeSection(start, 'date')[0]
+      end = timeSection(end, 'date')[1]
+      const results = [start, end]
+      return results
+    } else {
+      const value = values[0]
+      return timeSection(parseFloat(value), element.options.attrs.type)
+    }
+  }
 }
 const timeYearServiceImpl = new TimeYearServiceImpl()
 export default timeYearServiceImpl

frontend/src/utils/conditionUtil.js

 
 import { Condition } from '@/components/widget/bean/Condition'
+import { ApplicationContext } from '@/utils/ApplicationContext'
+
 /**
  * 判断两个conditions数组是否相同
  * @param {*} conditions1
@@ -36,3 +38,36 @@ export const formatLinkageCondition = obj => {
   const condition = new Condition(null, fieldId, operator, value, viewIds)
   return condition
 }
+
+export const buildFilterMap = panelItems => {
+  const viewIdMatch = (viewIds, viewId) => !viewIds || viewIds.length === 0 || viewIds.includes(viewId)
+  const result = {}
+  panelItems.forEach(element => {
+    if (element.type === 'view') {
+      result[element.propValue.viewId] = []
+    }
+  })
+  panelItems.forEach(element => {
+    if (element.type !== 'custom') {
+      return true
+    }
+    const widget = ApplicationContext.getService(element.serviceName)
+    const param = widget.getParam(element)
+    const condition = formatCondition(param)
+    const vValid = valueValid(condition)
+    const filterComponentId = condition.componentId
+    Object.keys(result).forEach(viewId => {
+      const vidMatch = viewIdMatch(condition.viewIds, viewId)
+      const viewFilters = result[viewId]
+      let j = viewFilters.length
+      while (j--) {
+        const filter = viewFilters[j]
+        if (filter.componentId === filterComponentId) {
+          viewFilters.splice(j, 1)
+        }
+      }
+      vidMatch && vValid && viewFilters.push(condition)
+    })
+  })
+  return result
+}