feat: 仪表板过滤局部刷新基本功能完善

2021-06-08 16:03:49 +08:00 · 2021-06-08 16:03:49 +08:00 · 880a26cd0a
commit 880a26cd0a
parent 2591b037ad
9 changed files with 93 additions and 40 deletions
--- a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
+++ b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
@ -17,7 +17,6 @@
      :style="getStyle(config.style)"
      :prop-value="config.propValue"
      :element="config"
-      :filter="config.filters"
    />
  </div>
 </template>
--- a/frontend/src/components/canvas/components/Editor/index.vue
+++ b/frontend/src/components/canvas/components/Editor/index.vue
@ -40,7 +40,6 @@
        :style="getComponentStyle(item.style)"
        :prop-value="item.propValue"
        :element="item"
-        :filter="item.filters"
        :out-style="getShapeStyleInt(item.style)"
      />
      <component
@ -172,6 +171,12 @@ export default {
        this.changeScale()
      },
      deep: true
+    },
+    componentData: {
+      handler(newVal, oldVla) {
+        console.log('11111')
+      },
+      deep: true
    }
  },

--- a/frontend/src/components/canvas/custom-component/UserView.vue
+++ b/frontend/src/components/canvas/custom-component/UserView.vue
@ -22,7 +22,7 @@ import LabelNormal from '../../../views/chart/components/normal/LabelNormal'
 import { uuid } from 'vue-uuid'

 import { mapState } from 'vuex'
-
+import { isChange } from '@/utils/conditionUtil'
 import {
  DEFAULT_COLOR_CASE,
  DEFAULT_SIZE,
@ -43,15 +43,11 @@ export default {
      type: Object,
      default: null
    },
-    filter: {
-      type: Object,
-      required: false,
-      default: function() {
-        return {
-          filter: []
-        }
-      }
-    },
+    // filters: {
+    //   type: Array,
+    //   required: false,
+    //   default: null
+    // },
    outStyle: {
      type: Object,
      required: false,
@ -89,12 +85,25 @@ export default {
      message: null
    }
  },
-  computed: mapState([
-    'canvasStyleData'
-  ]),
+  computed: {
+    filter() {
+      const filter = {}
+      filter.filter = this.element.filters
+      return filter
+    },
+    filters() {
+      // 必要 勿删勿该  watch数组，哪怕发生变化 oldValue等于newValue ，深拷贝解决
+      return JSON.parse(JSON.stringify(this.element.filters))
+    },
+    ...mapState([
+      'canvasStyleData'
+    ])
+  },
+
  watch: {
-    filter(val) {
-      this.getData(this.element.propValue.viewId)
+    'filters': function(val1, val2) {
+      // this.getData(this.element.propValue.viewId)
+      isChange(val1, val2) && this.getData(this.element.propValue.viewId)
    },
    // deep监听panel 如果改变 提交到 store
    canvasStyleData: {
@ -169,6 +178,9 @@ export default {
          return true
        })
      }
+    },
+    viewIdMatch(viewIds, viewId) {
+      return !viewIds || viewIds.length === 0 || viewIds.includes(viewId)
    }
  }
 }
--- a/frontend/src/layout/components/Topbar.vue
+++ b/frontend/src/layout/components/Topbar.vue
@ -1,8 +1,8 @@
 <template>
  <div class="top-nav" :style="{'background-color': '#f1f3f8'}">
    <div class="log">
-<!--      <img      v-if="!logoUrl" src="@/assets/DataEase-color.png" width="140" alt="" style="padding-top: 10px;">-->
-      <svg-icon v-if="!logoUrl" icon-class="DataEase"  custom-class="top-nav-logo-icon"/>
+      <!--      <img      v-if="!logoUrl" src="@/assets/DataEase-color.png" width="140" alt="" style="padding-top: 10px;">-->
+      <svg-icon v-if="!logoUrl" icon-class="DataEase" custom-class="top-nav-logo-icon" />
      <img v-else :src="logoUrl" width="140" alt="" style="padding-top: 10px;">
    </div>
    <el-menu
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@ -19,23 +19,13 @@ import event from '@/components/canvas/store/event'
 import layer from '@/components/canvas/store/layer'
 import snapshot from '@/components/canvas/store/snapshot'
 import lock from '@/components/canvas/store/lock'
-import { Condition } from '@/components/widget/bean/Condition'
+import { valueValid, formatCondition } from '@/utils/conditionUtil'
 import {
  DEFAULT_COMMON_CANVAS_STYLE
 } from '@/views/panel/panel'

 Vue.use(Vuex)
-const valueValid = condition => {
-  return condition && condition.value && condition.value.length > 0 && condition.value[0]
-}

-const formatCondition = obj => {
-  const { component, value, operator } = obj
-  const fieldId = component.options.attrs.fieldId
-  const viewIds = component.options.attrs.viewIds
-  const condition = new Condition(component.id, fieldId, operator, value, viewIds)
-  return condition
-}
 const data = {
  state: {
    ...animation.state,
@ -137,19 +127,21 @@ const data = {
        const vidMatch = viewIdMatch(condition.viewIds, element.propValue.viewId)

        let j = currentFilters.length
-        let filterExist = false
+        // let filterExist = false
        while (j--) {
          const filter = currentFilters[j]
          if (filter.componentId === filterComponentId) {
-            filterExist = true
+            // filterExist = true
            // 已存在该条件 且 条件值有效 直接替换原体检
-            vidMatch && vValid && (currentFilters[j] = condition)
+            // vidMatch && vValid && (currentFilters[j] = condition)
            // 已存在该条件 且 条件值无效 直接删除原条件
-            vidMatch && !vValid && (currentFilters.splice(j, 1))
+            // vidMatch && !vValid && (currentFilters.splice(j, 1))
+            currentFilters.splice(j, 1)
          }
        }
        // 不存在该条件 且 条件有效 直接保存该条件
-        !filterExist && vValid && currentFilters.push(condition)
+        // !filterExist && vValid && currentFilters.push(condition)
+        vidMatch && vValid && currentFilters.push(condition)
        element.filters = currentFilters
        state.componentData[index] = element
      }
--- a/frontend/src/utils/conditionUtil.js
+++ b/frontend/src/utils/conditionUtil.js
@ -0,0 +1,32 @@
+
+import { Condition } from '@/components/widget/bean/Condition'
+/**
+ * 判断两个conditions数组是否相同
+ * @param {*} conditions1
+ * @param {*} conditions2
+ * @returns
+ */
+export const isChange = (conditions1, conditions2) => {
+  // 两个都null
+  if (!conditions1 && !conditions2) return false
+  if (!conditions1 || !conditions2) return true
+  // 数组长度不一样 肯定发生了改变
+  if (conditions1.length !== conditions2.length) return true
+  let arr1 = JSON.parse(JSON.stringify(conditions1))
+  let arr2 = JSON.parse(JSON.stringify(conditions2))
+  arr1 = arr1.sort((s1, s2) => s1.componentId > s2.componentId)
+  arr2 = arr2.sort((s1, s2) => s1.componentId > s2.componentId)
+  return JSON.stringify(arr1) !== JSON.stringify(arr2)
+}
+
+export const valueValid = condition => {
+  return condition && condition.value && condition.value.length > 0 && condition.value[0]
+}
+
+export const formatCondition = obj => {
+  const { component, value, operator } = obj
+  const fieldId = component.options.attrs.fieldId
+  const viewIds = component.options.attrs.viewIds
+  const condition = new Condition(component.id, fieldId, operator, value, viewIds)
+  return condition
+}
--- a/frontend/src/views/login/index.vue
+++ b/frontend/src/views/login/index.vue
@ -5,7 +5,7 @@
        <el-col :span="12">
          <el-form ref="loginForm" :model="loginForm" :rules="loginRules" size="default">
            <div class="login-logo">
-              <svg-icon v-if="!loginLogoUrl" icon-class="DataEase"  custom-class="login-logo-icon"/>
+              <svg-icon v-if="!loginLogoUrl" icon-class="DataEase" custom-class="login-logo-icon" />
              <img v-else :src="loginLogoUrl" alt="">
            </div>
            <div class="login-welcome">
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@ -233,7 +233,6 @@ export default {
      return this.$store.state.panel.panelInfo
    },
    ...mapState([
-      'componentData',
      'curComponent',
      'isClickComponent',
      'canvasStyleData',
@ -294,14 +293,24 @@ export default {
      const componentDataTemp = this.$store.state.panel.componentDataTemp
      const canvasStyleDataTemp = this.$store.state.panel.canvasStyleDataTemp
      if (componentDataTemp && canvasStyleDataTemp) {
-        this.$store.commit('setComponentData', this.resetID(JSON.parse(componentDataTemp)))
+        const componentDatas = JSON.parse(componentDataTemp)
+        componentDatas.forEach(item => {
+          item.filters = (item.filters || [])
+        })
+        this.$store.commit('setComponentData', this.resetID(componentDatas))
+        // this.$store.commit('setComponentData', this.resetID(JSON.parse(componentDataTemp)))
        this.$store.commit('setCanvasStyle', JSON.parse(canvasStyleDataTemp))
        // 清空临时画布数据
        this.$store.dispatch('panel/setComponentDataTemp', null)
        this.$store.dispatch('panel/setCanvasStyleDataTemp', null)
      } else if (panelId) {
        findOne(panelId).then(response => {
-          this.$store.commit('setComponentData', this.resetID(JSON.parse(response.data.panelData)))
+          const componentDatas = JSON.parse(response.data.panelData)
+          componentDatas.forEach(item => {
+            item.filters = (item.filters || [])
+          })
+          this.$store.commit('setComponentData', this.resetID(componentDatas))
+          //   this.$store.commit('setComponentData', this.resetID(JSON.parse(response.data.panelData)))
          const panelStyle = JSON.parse(response.data.panelStyle)
          this.$store.commit('setCanvasStyle', panelStyle)
          this.$store.commit('recordSnapshot')// 记录快照
--- a/frontend/src/views/panel/list/PanelList.vue
+++ b/frontend/src/views/panel/list/PanelList.vue
@ -574,7 +574,11 @@ export default {
      if (data.nodeType === 'panel') {
        // 加载视图数据
        findOne(data.id).then(response => {
-          this.$store.commit('setComponentData', this.resetID(JSON.parse(response.data.panelData)))
+          const componentDatas = JSON.parse(response.data.panelData)
+          componentDatas.forEach(item => {
+            item.filters = (item.filters || [])
+          })
+          this.$store.commit('setComponentData', this.resetID(componentDatas))
          //   this.$store.commit('setComponentData', sourceInfo.type === 'custom' ? sourceInfo : this.resetID(sourceInfo))
          const temp = JSON.parse(response.data.panelStyle)
          this.$store.commit('setCanvasStyle', temp)