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

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>

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
     }
   },
 

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)
     }
   }
 }

frontend/src/layout/components/Topbar.vue

 <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

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
       }

frontend/src/utils/conditionUtil.js

+
+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
+}

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">

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')// 记录快照

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)