center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

feat: 视图下钻

Browse Source
This commit is contained in:
junjie 2021-08-04 18:07:06 +08:00
parent d0e18a54d7
commit 2d9b13570d
2 changed files with 146 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

129
frontend/src/views/chart/components/drag-item/DrillItem.vue Normal file
View File

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

20
frontend/src/views/chart/view/ChartEdit.vue
View File

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