Merge pull request #591 from dataease/pr@dev@feat_panel-drill

feat:仪表板视图钻取和联动同时存在时，弹框由用户选择
2021-08-11 17:50:36 +08:00 · 2021-08-11 17:50:36 +08:00 · 5c0f84854f
commit 5c0f84854f
parent c877ed4acf e11d6ff7d9
7 changed files with 265 additions and 112 deletions
--- a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
+++ b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
@ -7,7 +7,6 @@
    @mousedown="elementMouseDown"
  >
    <edit-bar v-if="config === curComponent" :element="config" @showViewDetails="showViewDetails" />
-<!--    <view-track-bar v-if="config === curComponent" :element="config" />-->
    <de-out-widget
      v-if="config.type==='custom'"
      :id="'component' + config.id"
@ -38,10 +37,9 @@ import { mixins } from '@/components/canvas/utils/events'
 import { mapState } from 'vuex'
 import DeOutWidget from '@/components/dataease/DeOutWidget'
 import EditBar from '@/components/canvas/components/Editor/EditBar'
-import ViewTrackBar from '@/components/canvas/components/Editor/ViewTrackBar'

 export default {
-  components: { DeOutWidget, EditBar, ViewTrackBar },
+  components: { DeOutWidget, EditBar },
  mixins: [mixins],
  props: {
    config: {
--- a/frontend/src/components/canvas/components/Editor/SettingMenuTest.vue
+++ b/frontend/src/components/canvas/components/Editor/SettingMenuTest.vue
@ -0,0 +1,181 @@
+<template>
+  <div>
+    <div style="width: 100%;">
+      <el-dropdown trigger="click" @mouseup="handleMouseUp">
+        <el-button ref="trackButton" class="icon iconfont icon-shezhi">TEST</el-button>
+        <el-dropdown-menu>
+          <el-dropdown-item icon="el-icon-document-copy" @click.native="copy">{{ $t('panel.copy') }}</el-dropdown-item>
+          <el-dropdown-item icon="el-icon-delete" @click.native="deleteComponent">{{ $t('panel.delete') }}</el-dropdown-item>
+          <el-dropdown-item icon="el-icon-upload2" @click.native="topComponent">{{ $t('panel.topComponent') }}</el-dropdown-item>
+          <el-dropdown-item icon="el-icon-download" @click.native="bottomComponent">{{ $t('panel.bottomComponent') }}</el-dropdown-item>
+          <el-dropdown-item icon="el-icon-arrow-up" @click.native="upComponent">{{ $t('panel.upComponent') }}</el-dropdown-item>
+          <el-dropdown-item icon="el-icon-arrow-down" @click.native="downComponent">{{ $t('panel.downComponent') }}</el-dropdown-item>
+          <el-dropdown-item icon="el-icon-link" @click.native="linkageSetting">联动设置</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import bus from '@/utils/bus'
+import { getViewLinkageGather } from '@/api/panel/linkage'
+
+export default {
+  data() {
+    return {
+      copyData: null,
+      editFilter: [
+        'view',
+        'custom'
+      ]
+    }
+  },
+  computed: mapState([
+    'menuTop',
+    'menuLeft',
+    'menuShow',
+    'curComponent',
+    'componentData',
+    'canvasStyleData'
+  ]),
+  methods: {
+    trackButtonClick() {
+      this.$refs.trackButton.click()
+      this.$refs.trackButton.$el.click()
+    },
+    edit() {
+      // 编辑时临时保存 当前修改的画布
+      this.$store.dispatch('panel/setComponentDataTemp', JSON.stringify(this.componentData))
+      this.$store.dispatch('panel/setCanvasStyleDataTemp', JSON.stringify(this.canvasStyleData))
+      if (this.curComponent.type === 'view') {
+        this.$store.dispatch('chart/setViewId', null)
+        this.$store.dispatch('chart/setViewId', this.curComponent.propValue.viewId)
+        bus.$emit('PanelSwitchComponent', { name: 'ChartEdit', param: { 'id': this.curComponent.propValue.viewId, 'optType': 'edit' }})
+      }
+      if (this.curComponent.type === 'custom') {
+        bus.$emit('component-dialog-edit')
+      }
+
+      // 编辑样式组件
+
+      if (this.curComponent.type === 'v-text' || this.curComponent.type === 'rect-shape') {
+        bus.$emit('component-dialog-style')
+      }
+    },
+    lock() {
+      this.$store.commit('lock')
+    },
+
+    unlock() {
+      this.$store.commit('unlock')
+    },
+
+    // 点击菜单时不取消当前组件的选中状态
+    handleMouseUp() {
+      this.$store.commit('setClickComponentStatus', true)
+    },
+
+    cut() {
+      this.deleteCurCondition()
+      this.$store.commit('cut')
+    },
+
+    copy() {
+      this.$store.commit('copy')
+      this.paste()
+    },
+
+    paste() {
+      this.$store.commit('paste', true)
+      this.$store.commit('recordSnapshot')
+    },
+
+    deleteComponent() {
+      this.deleteCurCondition()
+      this.$store.commit('deleteComponent')
+      this.$store.commit('recordSnapshot')
+      this.$store.commit('setCurComponent', { component: null, index: null })
+    },
+
+    deleteCurCondition() {
+      if (this.curComponent.type === 'custom') {
+        this.$store.commit('removeViewFilter', this.curComponent.id)
+        bus.$emit('delete-condition', { componentId: this.curComponent.id })
+      }
+    },
+
+    upComponent() {
+      this.$store.commit('upComponent')
+      this.$store.commit('recordSnapshot')
+    },
+
+    downComponent() {
+      this.$store.commit('downComponent')
+      this.$store.commit('recordSnapshot')
+    },
+
+    topComponent() {
+      this.$store.commit('topComponent')
+      this.$store.commit('recordSnapshot')
+    },
+
+    bottomComponent() {
+      this.$store.commit('bottomComponent')
+      this.$store.commit('recordSnapshot')
+    },
+    linkageSetting() {
+      debugger
+      // sourceViewId 也加入查询
+      const targetViewIds = this.componentData.filter(item => item.type === 'view' && item.propValue && item.propValue.viewId)
+        .map(item => item.propValue.viewId)
+
+      // 获取当前仪表板当前视图联动信息
+      const requestInfo = {
+        'panelId': this.$store.state.panel.panelInfo.id,
+        'sourceViewId': this.curComponent.propValue.viewId,
+        'targetViewIds': targetViewIds
+      }
+      getViewLinkageGather(requestInfo).then(rsp => {
+        this.$store.commit('setLinkageInfo', rsp.data)
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .contextmenu {
+    position: absolute;
+    z-index: 1000;
+
+    ul {
+      border: 1px solid #e4e7ed;
+      border-radius: 4px;
+      background-color: #fff;
+      box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+      box-sizing: border-box;
+      margin: 5px 0;
+      padding: 6px 0;
+
+      li {
+        font-size: 14px;
+        padding: 0 20px;
+        position: relative;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        color: #606266;
+        height: 34px;
+        line-height: 34px;
+        box-sizing: border-box;
+        cursor: pointer;
+
+        &:hover {
+          background-color: #f5f7fa;
+        }
+      }
+    }
+  }
+</style>
--- a/frontend/src/components/canvas/components/Editor/ViewTrackBar.vue
+++ b/frontend/src/components/canvas/components/Editor/ViewTrackBar.vue
@ -1,124 +1,55 @@
 <template>
-  <div class="bar-main-left">
-    <div>
-      <!--上钻-->
-      <i
-        class="icon iconfont "
-        :class="[
-          {
-            ['icon-shangzuan i-active']: drillUpStatus ,
-            ['icon-quxiaoshangzuan i-on-active']: !drillUpStatus
-          }
-        ]"
-        @click.stop="drillUpChange"
-      />
-      <!--下钻-->
-      <i
-        class="icon iconfont "
-        :class="[
-          {
-            ['icon-xiazuan i-active']: drillDownStatus ,
-            ['icon-quxiaoxiazuan i-on-active']: !drillDownStatus
-          }
-        ]"
-        @click.stop="drillDownChange"
-      />
-      <!--上卷-->
-      <i
-        class="icon iconfont "
-        :class="[
-          {
-            ['icon-linkage i-active']: linkageStatus ,
-            ['icon-quxiaoliandong i-on-active']: !linkageStatus
-          }
-        ]"
-        @click.stop="linkageChange"
-      />
-    </div>
-
+  <div>
+    <el-dropdown trigger="click">
+      <input id="input" ref="trackButton" type="button" hidden>
+      <el-dropdown-menu class="track-menu" :append-to-body="false">
+        <el-dropdown-item v-for="(item, key) in trackMenu" :key="key" @click.native="trackMenuClick(item)"><span class="menu-item">{{ i18n_map[item] }}</span></el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
  </div>
 </template>

 <script>
-import { mapState } from 'vuex'

 export default {
-
  props: {
-    element: {
-      type: Object,
+    trackMenu: {
+      type: Array,
      required: true
-    },
-    active: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    // 当前模式 preview 预览 edit 编辑，
-    activeModel: {
-      type: String,
-      required: false,
-      default: 'preview'
    }
  },
  data() {
    return {
-      drillUpStatus: false,
-      drillDownStatus: false,
-      linkageStatus: false
+      i18n_map: {
+        drill: this.$t('panel.drill'),
+        linkage: this.$t('panel.linkage')
+      }
    }
  },
  computed: {
-    linkageInfo() {
-      return this.targetLinkageInfo[this.element.propValue.viewId]
-    },
-    ...mapState([
-      'menuTop',
-      'menuLeft',
-      'menuShow',
-      'curComponent',
-      'componentData',
-      'canvasStyleData',
-      'linkageSettingStatus',
-      'targetLinkageInfo',
-      'curLinkageView'
-    ])
  },
  methods: {
-    drillUpChange() {
-      this.drillUpStatus = !this.drillUpStatus
+    trackButtonClick() {
+      this.$refs.trackButton.click()
    },
-    drillDownChange() {
-      this.drillDownStatus = !this.drillDownStatus
-    },
-    linkageChange() {
-      this.linkageStatus = !this.linkageStatus
+    trackMenuClick(menu) {
+      this.$emit('trackClick', menu)
    }
  }
 }
 </script>

 <style lang="scss" scoped>
-  .bar-main-left{
-    position: absolute;
-    left: 0px;
-    float:right;
-    z-index: 2;
-    border-radius:2px;
-    padding-left: 5px;
-    padding-right: 2px;
-    cursor:pointer!important;
-    background-color: #0a7be0;
-  }
-  .i-on-active{
-    color: whitesmoke;
-    float: right;
-    margin-right: 3px;
+  .menu-item {
+    font-size: 12px;
  }

-  .i-active{
-    color: yellow;
-    float: right;
-    margin-right: 3px;
+  ::v-deep ul {
+    width: 80px;
  }
+
+  .track-menu {
+    border: #3a8ee6 1px solid;
+  }
+
 </style>
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@ -1179,7 +1179,9 @@ export default {
    panel_save_tips: 'Do you want to save the changes you made to.',
    panel_save_warn_tips: "Your changes will be lost if you don't save them！",
    do_not_save: "Don't Save",
-    save_and_close: 'Save'
+    save_and_close: 'Save',
+    drill: 'drill',
+    linkage: 'linkage'
  },
  plugin: {
    local_install: 'Local installation',
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@ -1179,7 +1179,9 @@ export default {
    panel_save_tips: '仪表板已变动，是否保存？',
    panel_save_warn_tips: '如果未保存，你对仪表板做的变更将会丢失！',
    do_not_save: '不保存',
-    save: '保存'
+    save: '保存',
+    drill: '下钻',
+    linkage: '联动'
  },
  plugin: {
    local_install: '本地安裝',
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@ -1181,7 +1181,9 @@ export default {
    panel_save_tips: '仪表板已变动，是否保存？',
    panel_save_warn_tips: '如果未保存，你对仪表板做的变更将会丢失！',
    do_not_save: '不保存',
-    save: '保存'
+    save: '保存',
+    drill: '下钻',
+    linkage: '联动'
  },
  plugin: {
    local_install: '本地安装',
--- a/frontend/src/views/chart/components/ChartComponent.vue
+++ b/frontend/src/views/chart/components/ChartComponent.vue
@ -1,5 +1,6 @@
 <template>
  <div style="display: flex;">
+    <view-track-bar ref="viewTrack" :track-menu="trackMenu" class="track-bar" :style="trackBarStyleTime" @trackClick="trackClick" />
    <div :id="chartId" style="width: 100%;height: 100%;" />
  </div>
 </template>
@ -18,9 +19,11 @@ import { baseTreemapOption } from '../chart/treemap/treemap'
 // import eventBus from '@/components/canvas/utils/eventBus'
 import { uuid } from 'vue-uuid'
 import { geoJson } from '@/api/map/map'
+import ViewTrackBar from '@/components/canvas/components/Editor/ViewTrackBar'

 export default {
  name: 'ChartComponent',
+  components: { ViewTrackBar },
  props: {
    chart: {
      type: Object,
@ -32,13 +35,33 @@ export default {
      default: function() {
        return {}
      }
+    },
+    trackMenu: {
+      type: Array,
+      required: false,
+      default: function() {
+        return ['drill', 'linkage']
+      }
    }
  },
  data() {
    return {
      myChart: {},
      chartId: uuid.v1(),
-      currentGeoJson: null
+      currentGeoJson: null,
+      showTrackBar: true,
+      trackBarStyle: {
+        position: 'absolute',
+        left: '0px',
+        top: '0px'
+      },
+      pointParam: null
+    }
+  },
+
+  computed: {
+    trackBarStyleTime() {
+      return this.trackBarStyle
    }
  },
  watch: {
@ -60,8 +83,6 @@ export default {
  },
  methods: {
    preDraw() {
-      const viewId = this.chart.id
-      const _store = this.$store
      // 基于准备好的dom，初始化echarts实例
      // 渲染echart等待dom加载完毕,渲染之前先尝试销毁具有相同id的echart 放置多次切换仪表板有重复id情况
      const that = this
@ -75,15 +96,14 @@ export default {

        this.myChart.off('click')
        this.myChart.on('click', function(param) {
-          console.log(JSON.stringify(param.data))
-          const trackFilter = {
-            viewId: viewId,
-            dimensionList: param.data.dimensionList,
-            quotaList: param.data.quotaList
+          that.pointParam = param
+          if (that.trackMenu.length === 1) { // 只有一个事件直接调用
+            that.trackClick(that.trackMenu[0])
+          } else { // 视图关联多个事件
+            that.trackBarStyle.left = param.event.offsetX + 'px'
+            that.trackBarStyle.top = (param.event.offsetY - 15) + 'px'
+            that.$refs.viewTrack.trackButtonClick()
          }
-          _store.commit('addViewTrackFilter', trackFilter)
-
-          that.$emit('onChartClick', param)
        })
      })
    },
@ -169,6 +189,23 @@ export default {
      // 指定图表的配置项和数据
      const chart = this.myChart
      chart.resize()
+    },
+    trackClick(trackAction) {
+      const linkageParam = {
+        viewId: this.chart.id,
+        dimensionList: this.pointParam.data.dimensionList,
+        quotaList: this.pointParam.data.quotaList
+      }
+      switch (trackAction) {
+        case 'drill':
+          this.$emit('onChartClick', this.pointParam)
+          break
+        case 'linkage':
+          this.$store.commit('addViewTrackFilter', linkageParam)
+          break
+        default:
+          break
+      }
    }
  }
 }