Merge pull request #525 from dataease/pr@dev@feat_视图下钻

feat: 视图下钻

frontend/src/views/chart/components/drag-item/DrillItem.vue

@@ -0,0 +1,129 @@
+<template>
+  <span>
+    <el-tag v-if="!hasDataPermission('manage',param.privileges)" size="small" class="item-axis" :type="item.groupType === 'q'?'success':''">
+      <span style="float: left">
+        <svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
+        <svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
+        <svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
+        <svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
+        <svg-icon v-if="item.sort === 'asc'" icon-class="sort-asc" class-name="field-icon-sort" />
+        <svg-icon v-if="item.sort === 'desc'" icon-class="sort-desc" class-name="field-icon-sort" />
+      </span>
+      <span class="item-span-style" :title="item.name">{{ item.name }}</span>
+    </el-tag>
+    <el-dropdown v-else trigger="click" size="mini" @command="clickItem">
+      <span class="el-dropdown-link">
+        <el-tag size="small" class="item-axis" :type="item.groupType === 'q'?'success':''">
+          <span style="float: left">
+            <svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
+            <svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
+            <svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
+            <svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
+            <svg-icon v-if="item.sort === 'asc'" icon-class="sort-asc" class-name="field-icon-sort" />
+            <svg-icon v-if="item.sort === 'desc'" icon-class="sort-desc" class-name="field-icon-sort" />
+          </span>
+          <span class="item-span-style" :title="item.name">{{ item.name }}</span>
+          <i class="el-icon-arrow-down el-icon--right" style="position: absolute;top: 6px;right: 10px;" />
+        </el-tag>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item icon="el-icon-delete" :command="beforeClickItem('remove')">
+            <span>{{ $t('chart.delete') }}</span>
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </span>
+    </el-dropdown>
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'DrillItem',
+  props: {
+    param: {
+      type: Object,
+      required: true
+    },
+    item: {
+      type: Object,
+      required: true
+    },
+    index: {
+      type: Number,
+      required: true
+    }
+  },
+  data() {
+    return {
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    clickItem(param) {
+      if (!param) {
+        return
+      }
+      switch (param.type) {
+        case 'remove':
+          this.removeItem()
+          break
+        default:
+          break
+      }
+    },
+    beforeClickItem(type) {
+      return {
+        type: type
+      }
+    },
+    removeItem() {
+      this.item.index = this.index
+      this.$emit('onDimensionItemRemove', this.item)
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .item-axis {
+    padding: 1px 6px;
+    margin: 0 3px 2px 3px;
+    text-align: left;
+    height: 24px;
+    line-height: 22px;
+    display: flex;
+    border-radius: 4px;
+    box-sizing: border-box;
+    white-space: nowrap;
+    width: 159px;
+  }
+
+  .item-axis:hover {
+    background-color: #fdfdfd;
+    cursor: pointer;
+  }
+
+  span {
+    font-size: 12px;
+  }
+
+  .summary-span{
+    margin-left: 4px;
+    color: #878d9f;;
+  }
+
+  .inner-dropdown-menu{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%
+  }
+
+  .item-span-style{
+    display: inline-block;
+    width: 100px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+</style>

frontend/src/views/chart/view/ChartEdit.vue

@@ -246,10 +246,10 @@
                       animation="300"
                       :move="onMove"
                       class="drag-block-style"
-                      @add="addXaxis"
+                      @add="addDrill"
                     >
                       <transition-group class="draggable-group">
-                        <dimension-item v-for="(item,index) in view.drillFields" :key="item.id" :param="param" :index="index" :item="item" @onDimensionItemChange="dimensionItemChange" @onDimensionItemRemove="dimensionItemRemove" @editItemFilter="showDimensionEditFilter" @onNameEdit="showRename" />
+                        <drill-item v-for="(item,index) in view.drillFields" :key="item.id" :param="param" :index="index" :item="item" @onDimensionItemChange="dillItemChange" @onDimensionItemRemove="drillItemRemove" />
                       </transition-group>
                     </draggable>
                     <div v-if="!view.drillFields || view.drillFields.length === 0" class="drag-placeholder-style">
@@ -555,6 +555,7 @@ import DimensionItem from '../components/drag-item/DimensionItem'
 import QuotaItem from '../components/drag-item/QuotaItem'
 import FilterItem from '../components/drag-item/FilterItem'
 import ChartDragItem from '../components/drag-item/ChartDragItem'
+import DrillItem from '../components/drag-item/DrillItem'
 import ResultFilterEditor from '../components/filter/ResultFilterEditor'
 import ChartComponent from '../components/ChartComponent'
 import bus from '@/utils/bus'
@@ -616,7 +617,8 @@ export default {
     QuotaItem,
     DimensionItem,
     draggable,
-    ChartDragItem
+    ChartDragItem,
+    DrillItem
   },
   props: {
     param: {
@@ -1391,6 +1393,18 @@ export default {
     stackItemRemove(item) {
       this.view.extStack.splice(item.index, 1)
       this.save(true)
+    },
+    dillItemChange(item) {
+      this.save(true)
+    },
+    drillItemRemove(item) {
+      this.view.drillFields.splice(item.index, 1)
+      this.save(true)
+    },
+    addDrill(e) {
+      this.dragCheckType(this.view.drillFields, 'd')
+      this.dragMoveDuplicate(this.view.drillFields, e)
+      this.save(true)
     }
   }
 }