feat: 维度/指标多选拖拽
This commit is contained in:
wisonic-s
parent
cf9849ffdc
commit
7f25d8d535
@ -1584,7 +1584,8 @@ export default {
|
||||
map_line_theta_offset: 'Radian',
|
||||
gauge_axis_label: 'Axis Label',
|
||||
word_size_range: 'Word Size Range',
|
||||
word_spacing: 'Word Spacing'
|
||||
word_spacing: 'Word Spacing',
|
||||
axis_multi_select_tip: 'Hold down the Ctrl or Shift key and click to select more than one'
|
||||
},
|
||||
dataset: {
|
||||
scope_edit: 'Effective only when editing',
|
||||
|
||||
@ -1576,7 +1576,8 @@ export default {
|
||||
map_line_theta_offset: '弧度',
|
||||
gauge_axis_label: '刻度標籤',
|
||||
word_size_range: '字號區間',
|
||||
word_spacing: '文字間隔'
|
||||
word_spacing: '文字間隔',
|
||||
axis_multi_select_tip: '按住 Ctrl 鍵或者 Shift 鍵再點擊可多選'
|
||||
},
|
||||
dataset: {
|
||||
scope_edit: '僅編輯時生效',
|
||||
|
||||
@ -1576,7 +1576,8 @@ export default {
|
||||
map_line_theta_offset: '弧度',
|
||||
gauge_axis_label: '刻度标签',
|
||||
word_size_range: '字号区间',
|
||||
word_spacing: '文字间隔'
|
||||
word_spacing: '文字间隔',
|
||||
axis_multi_select_tip: '按住 Ctrl 键或者 Shift 键再点击可多选'
|
||||
},
|
||||
dataset: {
|
||||
scope_edit: '仅编辑时生效',
|
||||
|
||||
@ -244,7 +244,7 @@ export default {
|
||||
beforeDestroy() {
|
||||
clearInterval(this.scrollTimer)
|
||||
window.removeEventListener('resize', this.onResize)
|
||||
this.myChart.destroy()
|
||||
this.myChart?.destroy?.()
|
||||
this.myChart = null
|
||||
},
|
||||
methods: {
|
||||
|
||||
@ -326,7 +326,7 @@ export default {
|
||||
data = []
|
||||
this.resetPage()
|
||||
}
|
||||
if (this.chart.data.detailFields?.length) {
|
||||
if (this.chart.data?.detailFields?.length) {
|
||||
let result = []
|
||||
let groupRowIndex = 0
|
||||
data.forEach(item => {
|
||||
|
||||
@ -148,23 +148,42 @@
|
||||
direction="vertical"
|
||||
>
|
||||
<template #top>
|
||||
<div class="padding-lr field-height">
|
||||
<div
|
||||
class="padding-lr field-height"
|
||||
:style="dimensionDragStyle"
|
||||
>
|
||||
<span>{{ $t('chart.dimension') }}</span>
|
||||
<el-tooltip
|
||||
class="item"
|
||||
effect="dark"
|
||||
placement="bottom"
|
||||
>
|
||||
<span slot="content">{{ $t('chart.axis_multi_select_tip') }}</span>
|
||||
<i
|
||||
class="el-icon-info"
|
||||
style="cursor: pointer;color: #606266;margin-left: 4px; font-size: 12px"
|
||||
/>
|
||||
</el-tooltip>
|
||||
<draggable
|
||||
v-if="table && hasDataPermission('use',table.privileges)"
|
||||
v-model="dimensionData"
|
||||
:options="{group:{name: 'drag',pull:'clone'},sort: true}"
|
||||
animation="300"
|
||||
:move="onMove"
|
||||
class="drag-list"
|
||||
drag-class="drag-class"
|
||||
:options="{group:{name: 'drag',pull:'clone'},sort: true}"
|
||||
:move="onMove"
|
||||
@add="moveToDimension"
|
||||
>
|
||||
<transition-group>
|
||||
<span
|
||||
v-for="item in dimensionData"
|
||||
v-for="(item, index) in dimensionData"
|
||||
:key="item.id"
|
||||
class="item-dimension father"
|
||||
:title="item.name"
|
||||
:class="{ 'selected-item': selectedDimension.findIndex(i => i.id === item.id) !== -1 }"
|
||||
class="item-dimension father group-dimension"
|
||||
@click.exact="singleSelect(index, dimensionData, selectedDimension, 'lastDimensionIndex')"
|
||||
@click.ctrl="multiSelect(index, dimensionData, selectedDimension, 'lastDimensionIndex')"
|
||||
@click.shift="rangeSelect(index, dimensionData, selectedDimension, 'lastDimensionIndex')"
|
||||
>
|
||||
<svg-icon
|
||||
v-if="item.deType === 0"
|
||||
@ -221,24 +240,32 @@
|
||||
</div>
|
||||
</template>
|
||||
<template #bottom>
|
||||
<div class="padding-lr field-height">
|
||||
<div
|
||||
class="padding-lr field-height"
|
||||
:style="quotaDragStyle"
|
||||
>
|
||||
<span>{{ $t('chart.quota') }}</span>
|
||||
<draggable
|
||||
v-if="table && hasDataPermission('use',table.privileges)"
|
||||
v-model="quotaData"
|
||||
:options="{group:{name: 'drag',pull:'clone'},sort: true}"
|
||||
animation="300"
|
||||
:move="onMove"
|
||||
animation="300"
|
||||
drag-class="drag-class"
|
||||
class="drag-list"
|
||||
@add="moveToQuota"
|
||||
>
|
||||
<transition-group>
|
||||
<span
|
||||
v-for="item in quotaData"
|
||||
v-for="(item, index) in quotaData"
|
||||
v-show="chart.type && (chart.type !== 'table-info' || (chart.type === 'table-info' && item.id !=='count'))"
|
||||
:key="item.id"
|
||||
class="item-quota father"
|
||||
:title="item.name"
|
||||
:class="{ 'selected-item': selectedQuota.findIndex(i => i.id === item.id) !== -1 }"
|
||||
class="item-quota father group-quota"
|
||||
@click.exact="singleSelect(index, quotaData, selectedQuota, 'lastQuotaIndex')"
|
||||
@click.ctrl="multiSelect(index, quotaData, selectedQuota, 'lastQuotaIndex')"
|
||||
@click.shift="rangeSelect(index, quotaData, selectedQuota, 'lastQuotaIndex')"
|
||||
>
|
||||
<svg-icon
|
||||
v-if="item.deType === 0"
|
||||
@ -476,7 +503,7 @@
|
||||
<plugin-com
|
||||
v-if="view.isPlugin"
|
||||
:component-name="view.type + '-data'"
|
||||
:obj="{view, param, chart, dimension, dimensionData, quota, quotaData}"
|
||||
:obj="obj"
|
||||
:bus="bus"
|
||||
/>
|
||||
<div v-else>
|
||||
@ -2030,10 +2057,27 @@ export default {
|
||||
fieldShow: false,
|
||||
tabActive: 'data',
|
||||
currentAreaCode: '',
|
||||
showStackCustomSort: false
|
||||
showStackCustomSort: false,
|
||||
lastDimensionIndex: 0,
|
||||
lastQuotaIndex: 0,
|
||||
selectedDimension: [],
|
||||
selectedQuota: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
obj() {
|
||||
return {
|
||||
view: this.view,
|
||||
param: this.param,
|
||||
chart: this.chart,
|
||||
dimension: this.dimension,
|
||||
dimensionData: this.dimensionData,
|
||||
quota: this.quota,
|
||||
quotaData: this.quotaData,
|
||||
selectedDimension: this.selectedDimension,
|
||||
selectedQuota: this.selectedQuota
|
||||
}
|
||||
},
|
||||
chartConfig() {
|
||||
const _this = this
|
||||
if (_this.chart && _this.chart.render) {
|
||||
@ -2110,6 +2154,26 @@ export default {
|
||||
const id = this.chart.id
|
||||
return { type, render, isPlugin, id }
|
||||
},
|
||||
dimensionDragStyle() {
|
||||
const style = {
|
||||
'--dragDisplay': 'none'
|
||||
}
|
||||
if (this.selectedDimension.length > 1) {
|
||||
style['--dragDisplay'] = 'inline-block'
|
||||
style['--dragContent'] = `"+${this.selectedDimension.length}"`
|
||||
}
|
||||
return style
|
||||
},
|
||||
quotaDragStyle() {
|
||||
const style = {
|
||||
'--dragDisplay': 'none'
|
||||
}
|
||||
if (this.selectedQuota.length > 1) {
|
||||
style['--dragDisplay'] = 'inline-block'
|
||||
style['--dragContent'] = `"+${this.selectedQuota.length}"`
|
||||
}
|
||||
return style
|
||||
},
|
||||
...mapState([
|
||||
'curComponent',
|
||||
'panelViewEditInfo',
|
||||
@ -2765,13 +2829,11 @@ export default {
|
||||
this.view = {}
|
||||
}
|
||||
},
|
||||
|
||||
// move回调方法
|
||||
onMove(e, originalEvent) {
|
||||
this.moveId = e.draggedContext.element.id
|
||||
return true
|
||||
},
|
||||
|
||||
onCustomSort(item) {
|
||||
this.customSortField = this.view.xaxis[item.index]
|
||||
this.customSort()
|
||||
@ -3186,27 +3248,46 @@ export default {
|
||||
if (mode === 'ds') {
|
||||
list.splice(e.newDraggableIndex, 1)
|
||||
} else {
|
||||
const that = this
|
||||
const dup = list.filter(function(m) {
|
||||
return m.id === that.moveId
|
||||
})
|
||||
if (dup && dup.length > 1) {
|
||||
list.splice(e.newDraggableIndex, 1)
|
||||
let newItems = [list[e.newDraggableIndex]]
|
||||
if (e.item.classList.contains('selected-item')) {
|
||||
const groupDie = e.item.classList.contains('group-dimension')
|
||||
newItems = groupDie ? this.selectedDimension : this.selectedQuota
|
||||
}
|
||||
const preIds = list
|
||||
.filter((_, i) => i < e.newDraggableIndex || i >= e.newDraggableIndex + newItems.length)
|
||||
.map(i => i.id)
|
||||
// 倒序删除
|
||||
for (let i = e.newDraggableIndex + newItems.length - 1; i >= e.newDraggableIndex; i--) {
|
||||
if (preIds.includes(list[i].id)) {
|
||||
list.splice(i, 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
dragRemoveChartField(list, e) {
|
||||
const that = this
|
||||
const dup = list.filter(function(m) {
|
||||
return m.id === that.moveId
|
||||
})
|
||||
if (dup && dup.length > 0) {
|
||||
if (dup[0].chartId) {
|
||||
list.splice(e.newDraggableIndex, 1)
|
||||
for (let i = list.length - 1; i >= 0; i--) {
|
||||
if (list[i].chartId) {
|
||||
list.splice(i, 1)
|
||||
}
|
||||
}
|
||||
},
|
||||
multiAdd(e, itemList) {
|
||||
// 只处理原始字段拖拽
|
||||
if (!e.item.classList.contains('selected-item')) {
|
||||
return
|
||||
}
|
||||
const groupDie = e.item.classList.contains('group-dimension')
|
||||
const sourceList = groupDie ? this.selectedDimension : this.selectedQuota
|
||||
const multiAdd = sourceList.length > 1 && sourceList.findIndex(i => i.id === this.moveId) !== -1
|
||||
if (multiAdd) {
|
||||
const qdList = groupDie ? this.dimensionData : this.quotaData
|
||||
const sourceIds = sourceList.map(i => i.id)
|
||||
const sortedList = qdList.filter(i => sourceIds.includes(i.id))
|
||||
itemList.splice(e.newIndex, 1, ...sortedList)
|
||||
}
|
||||
},
|
||||
addXaxis(e) {
|
||||
this.multiAdd(e, this.view.xaxis)
|
||||
this.dragMoveDuplicate(this.view.xaxis, e)
|
||||
if (this.view.type === 'scatter' && this.view.render === 'antv' && this.view.xaxis[0] && this.view.xaxis[0].groupType === 'q') {
|
||||
this.view.xaxis = [this.view.xaxis[0]]
|
||||
@ -3219,26 +3300,29 @@ export default {
|
||||
this.calcData(true)
|
||||
},
|
||||
addXaxisExt(e) {
|
||||
this.multiAdd(e, this.view.xaxisExt)
|
||||
this.dragMoveDuplicate(this.view.xaxisExt, e)
|
||||
if (this.view.type !== 'table-info') {
|
||||
this.dragCheckType(this.view.xaxisExt, 'd')
|
||||
}
|
||||
this.dragMoveDuplicate(this.view.xaxisExt, e)
|
||||
if ((this.view.type === 'map' || this.view.type === 'word-cloud' || this.view.type === 'scatter') && this.view.xaxisExt.length > 1) {
|
||||
this.view.xaxisExt = [this.view.xaxisExt[0]]
|
||||
}
|
||||
this.calcData(true)
|
||||
},
|
||||
addYaxis(e) {
|
||||
this.dragCheckType(this.view.yaxis, 'q')
|
||||
this.multiAdd(e, this.view.yaxis)
|
||||
this.dragMoveDuplicate(this.view.yaxis, e)
|
||||
this.dragCheckType(this.view.yaxis, 'q')
|
||||
if ((equalsAny(this.view.type, 'waterfall', 'word-cloud', 'bidirectional-bar') || this.view.type.includes('group')) && this.view.yaxis.length > 1) {
|
||||
this.view.yaxis = [this.view.yaxis[0]]
|
||||
}
|
||||
this.calcData(true)
|
||||
},
|
||||
addYaxisExt(e) {
|
||||
this.dragCheckType(this.view.yaxisExt, 'q')
|
||||
this.multiAdd(e, this.view.yaxisExt)
|
||||
this.dragMoveDuplicate(this.view.yaxisExt, e)
|
||||
this.dragCheckType(this.view.yaxisExt, 'q')
|
||||
if (equalsAny(this.view.type, 'map', 'bidirectional-bar') && this.view.yaxisExt.length > 1) {
|
||||
this.view.yaxisExt = [this.view.yaxisExt[0]]
|
||||
}
|
||||
@ -3253,6 +3337,8 @@ export default {
|
||||
this.calcData(true)
|
||||
},
|
||||
addCustomFilter(e) {
|
||||
this.multiAdd(e, this.view.customFilter)
|
||||
this.dragMoveDuplicate(this.view.customFilter, e)
|
||||
// 记录数等自动生成字段不做为过滤条件
|
||||
if (this.view.customFilter && this.view.customFilter.length > 0) {
|
||||
for (let i = 0; i < this.view.customFilter.length; i++) {
|
||||
@ -3262,7 +3348,6 @@ export default {
|
||||
}
|
||||
}
|
||||
this.view.customFilter[e.newDraggableIndex].filter = []
|
||||
this.dragMoveDuplicate(this.view.customFilter, e)
|
||||
this.dragRemoveChartField(this.view.customFilter, e)
|
||||
this.calcData(true)
|
||||
},
|
||||
@ -3288,6 +3373,7 @@ export default {
|
||||
return resultNode
|
||||
},
|
||||
addStack(e) {
|
||||
this.multiAdd(e, this.view.extStack)
|
||||
this.dragCheckType(this.view.extStack, 'd')
|
||||
if (this.view.extStack && this.view.extStack.length > 1) {
|
||||
this.view.extStack = [this.view.extStack[0]]
|
||||
@ -3302,7 +3388,6 @@ export default {
|
||||
this.calcData(true)
|
||||
},
|
||||
stackItemCustomSort(item) {
|
||||
console.log(item, this.view.extStack[item.index])
|
||||
this.customSortField = this.view.extStack[item.index]
|
||||
this.stackCustomSort()
|
||||
},
|
||||
@ -3315,13 +3400,15 @@ export default {
|
||||
this.calcData(true)
|
||||
},
|
||||
addDrill(e) {
|
||||
this.dragCheckType(this.view.drillFields, 'd')
|
||||
this.multiAdd(e, this.view.drillFields)
|
||||
this.dragMoveDuplicate(this.view.drillFields, e)
|
||||
this.dragCheckType(this.view.drillFields, 'd')
|
||||
this.dragRemoveChartField(this.view.drillFields, e)
|
||||
this.calcData(true)
|
||||
},
|
||||
|
||||
addBubble(e) {
|
||||
this.multiAdd(e, this.view.extBubble)
|
||||
this.dragCheckType(this.view.extBubble, 'q')
|
||||
if (this.view.extBubble && this.view.extBubble.length > 1) {
|
||||
this.view.extBubble = [this.view.extBubble[0]]
|
||||
@ -3666,6 +3753,35 @@ export default {
|
||||
clearData(data) {
|
||||
this.view[data] = []
|
||||
this.calcData(true)
|
||||
},
|
||||
singleSelect(index, itemList, targetList, lastIndexProp) {
|
||||
targetList.splice(0)
|
||||
targetList.push(itemList[index])
|
||||
this[lastIndexProp] = index
|
||||
},
|
||||
multiSelect(index, itemList, targetList, lastIndexProp) {
|
||||
const item = itemList[index]
|
||||
const curIndex = targetList.findIndex(i => i.id === item.id)
|
||||
if (curIndex === -1) {
|
||||
targetList.push(item)
|
||||
} else {
|
||||
targetList.splice(curIndex, 1)
|
||||
}
|
||||
this[lastIndexProp] = index
|
||||
},
|
||||
rangeSelect(index, itemList, targetList, lastIndexProp) {
|
||||
targetList.splice(0)
|
||||
let start, end
|
||||
if (index > this[lastIndexProp]) {
|
||||
start = this[lastIndexProp]
|
||||
end = index
|
||||
} else {
|
||||
start = index
|
||||
end = this[lastIndexProp]
|
||||
}
|
||||
for (let i = start; i <= end; i++) {
|
||||
targetList.push(itemList[i])
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -4144,4 +4260,22 @@ span {
|
||||
margin-left: 4px;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
.selected-item.item-dimension {
|
||||
color: #1890ff;
|
||||
background: #e8f4ff;
|
||||
border-color: #a3d3ff;
|
||||
}
|
||||
.selected-item.item-quota {
|
||||
color: #67c23a;
|
||||
background: #f0f9eb;
|
||||
border-color: #b2d3a3;
|
||||
}
|
||||
|
||||
.drag-class.selected-item::after {
|
||||
color:inherit;
|
||||
content: var(--dragContent);
|
||||
display: var(--dragDisplay);
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -5,22 +5,31 @@
|
||||
<span style="width: 80px;text-align: right;">
|
||||
<span>{{ $t('plugin_view_chartmix.source') }}</span>/<span>{{ $t('chart.dimension') }}</span>
|
||||
</span>
|
||||
<draggable v-model="view.xaxis" group="drag" animation="300" :move="onMove" class="drag-block-style"
|
||||
@add="addXaxis" @update="calcData(true)">
|
||||
<draggable
|
||||
v-model="view.xaxis"
|
||||
:move="onMove"
|
||||
animation="300"
|
||||
class="drag-block-style"
|
||||
group="drag"
|
||||
@add="addXaxis"
|
||||
@update="calcData(true)"
|
||||
>
|
||||
<transition-group class="draggable-group">
|
||||
<dimension-item v-for="(item,index) in view.xaxis" :key="index"
|
||||
:param="param"
|
||||
:index="0"
|
||||
:item="item"
|
||||
:dimension-data="dimension"
|
||||
:quota-data="quotaData"
|
||||
:chart="chart"
|
||||
@onDimensionItemChange="dimensionItemChange"
|
||||
@onDimensionItemRemove="dimensionItemRemove"
|
||||
@editItemFilter="showDimensionEditFilter"
|
||||
@onNameEdit="showRename"
|
||||
dimension-name="dimension"
|
||||
:bus="bus"
|
||||
<dimension-item
|
||||
v-for="(item,index) in view.xaxis"
|
||||
:key="index"
|
||||
:bus="bus"
|
||||
:chart="chart"
|
||||
:dimension-data="dimension"
|
||||
:index="0"
|
||||
:item="item"
|
||||
:param="param"
|
||||
:quota-data="quotaData"
|
||||
dimension-name="dimension"
|
||||
@editItemFilter="showDimensionEditFilter"
|
||||
@onDimensionItemChange="dimensionItemChange"
|
||||
@onDimensionItemRemove="dimensionItemRemove"
|
||||
@onNameEdit="showRename"
|
||||
/>
|
||||
</transition-group>
|
||||
</draggable>
|
||||
@ -33,17 +42,30 @@
|
||||
<span style="width: 80px;text-align: right;">
|
||||
<span>{{ $t('plugin_view_chartmix.mark_size') }}</span>/<span>{{ $t('chart.quota') }}</span>
|
||||
</span>
|
||||
<draggable v-model="view.yaxis" group="drag" animation="300" :move="onMove" class="drag-block-style"
|
||||
@add="addYaxis" @update="calcData(true)">
|
||||
<draggable
|
||||
v-model="view.yaxis"
|
||||
:move="onMove"
|
||||
animation="300"
|
||||
class="drag-block-style"
|
||||
group="drag"
|
||||
@add="addYaxis"
|
||||
@update="calcData(true)"
|
||||
>
|
||||
<transition-group class="draggable-group">
|
||||
<quota-item v-for="(item,index) in view.yaxis" :key="item.id" :param="param" :index="index" :item="item"
|
||||
:chart="chart" :dimension-data="dimension" :quota-data="quota"
|
||||
@onQuotaItemChange="quotaItemChange"
|
||||
@onQuotaItemRemove="quotaItemRemove"
|
||||
@editItemFilter="showQuotaEditFilter"
|
||||
@valueFormatter="valueFormatter"
|
||||
@onNameEdit="showRename"
|
||||
@editItemCompare="showQuotaEditCompare"/>
|
||||
<quota-item
|
||||
v-for="(item,index) in view.yaxis"
|
||||
:key="item.id"
|
||||
:chart="chart"
|
||||
:dimension-data="dimension"
|
||||
:index="index"
|
||||
:item="item" :param="param" :quota-data="quota"
|
||||
@editItemCompare="showQuotaEditCompare"
|
||||
@editItemFilter="showQuotaEditFilter"
|
||||
@onNameEdit="showRename"
|
||||
@onQuotaItemChange="quotaItemChange"
|
||||
@onQuotaItemRemove="quotaItemRemove"
|
||||
@valueFormatter="valueFormatter"
|
||||
/>
|
||||
</transition-group>
|
||||
</draggable>
|
||||
<div v-if="!view.yaxis || view.yaxis.length === 0" class="drag-placeholder-style">
|
||||
@ -55,18 +77,30 @@
|
||||
<span style="width: 80px;text-align: right;">
|
||||
<span>{{ $t('plugin_view_chartmix.mark_size') }}</span>/<span>{{ $t('chart.quota') }}</span>
|
||||
</span>
|
||||
<draggable v-model="view.yaxisExt" group="drag" animation="300" :move="onMove" class="drag-block-style"
|
||||
@add="addYaxisExt" @update="calcData(true)">
|
||||
<draggable
|
||||
v-model="view.yaxisExt"
|
||||
:move="onMove"
|
||||
animation="300"
|
||||
class="drag-block-style"
|
||||
group="drag"
|
||||
@add="addYaxisExt"
|
||||
@update="calcData(true)"
|
||||
>
|
||||
<transition-group class="draggable-group">
|
||||
<quota-ext-item v-for="(item,index) in view.yaxisExt" :key="item.id" :param="param" :index="index"
|
||||
:item="item"
|
||||
:chart="chart" :dimension-data="dimension" :quota-data="quota"
|
||||
@onQuotaItemChange="quotaItemChange"
|
||||
@onQuotaItemRemove="quotaItemRemove"
|
||||
@editItemFilter="showQuotaEditFilter"
|
||||
@valueFormatter="valueFormatter"
|
||||
@onNameEdit="showRename"
|
||||
@editItemCompare="showQuotaEditCompare"/>
|
||||
<quota-ext-item
|
||||
v-for="(item,index) in view.yaxisExt"
|
||||
:key="item.id"
|
||||
:chart="chart"
|
||||
:dimension-data="dimension"
|
||||
:index="index"
|
||||
:item="item" :param="param" :quota-data="quota"
|
||||
@editItemCompare="showQuotaEditCompare"
|
||||
@editItemFilter="showQuotaEditFilter"
|
||||
@onNameEdit="showRename"
|
||||
@onQuotaItemChange="quotaItemChange"
|
||||
@onQuotaItemRemove="quotaItemRemove"
|
||||
@valueFormatter="valueFormatter"
|
||||
/>
|
||||
</transition-group>
|
||||
</draggable>
|
||||
<div v-if="!view.yaxisExt || view.yaxisExt.length === 0" class="drag-placeholder-style">
|
||||
@ -79,14 +113,29 @@
|
||||
<el-row class="padding-lr" style="margin-top: 6px;">
|
||||
<span>{{ $t('chart.result_filter') }}</span>
|
||||
|
||||
<draggable v-model="view.customFilter" group="drag" animation="300" :move="onMove" class="theme-item-class"
|
||||
style="padding:2px 0 0 0;width:100%;min-height: 32px;border-radius: 4px;border: 1px solid #DCDFE6;overflow-x: auto;display: flex;align-items: center;background-color: white;"
|
||||
@add="addCustomFilter" @update="calcData(true)">
|
||||
<draggable
|
||||
v-model="view.customFilter"
|
||||
:move="onMove"
|
||||
animation="300"
|
||||
class="theme-item-class"
|
||||
group="drag"
|
||||
style="padding:2px 0 0 0;width:100%;min-height: 32px;border-radius: 4px;border: 1px solid #DCDFE6;overflow-x: auto;display: flex;align-items: center;background-color: white;"
|
||||
@add="addCustomFilter"
|
||||
@update="calcData(true)"
|
||||
>
|
||||
<transition-group class="draggable-group">
|
||||
<filter-item v-for="(item,index) in view.customFilter" :key="item.id" :param="param" :index="index"
|
||||
:item="item" :dimension-data="dimension" :quota-data="quota" :bus="bus"
|
||||
@onFilterItemRemove="filterItemRemove"
|
||||
@editItemFilter="showEditFilter"/>
|
||||
<filter-item
|
||||
v-for="(item,index) in view.customFilter"
|
||||
:key="item.id"
|
||||
:bus="bus"
|
||||
:dimension-data="dimension"
|
||||
:index="index"
|
||||
:item="item"
|
||||
:param="param"
|
||||
:quota-data="quota"
|
||||
@editItemFilter="showEditFilter"
|
||||
@onFilterItemRemove="filterItemRemove"
|
||||
/>
|
||||
</transition-group>
|
||||
</draggable>
|
||||
<div v-if="!view.customFilter || view.customFilter.length === 0" class="drag-placeholder-style">
|
||||
@ -115,7 +164,7 @@ export default {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: null
|
||||
},
|
||||
}
|
||||
},
|
||||
components: {
|
||||
DimensionItem,
|
||||
@ -138,7 +187,7 @@ export default {
|
||||
value: 'line',
|
||||
label: '线'
|
||||
}
|
||||
],
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -164,20 +213,26 @@ export default {
|
||||
return this.obj.quotaData
|
||||
},
|
||||
listenLists() {
|
||||
if (!this.view) return [0, 0];
|
||||
if (!this.view) return [0, 0]
|
||||
return [
|
||||
this.view.yaxis ? this.view.yaxis.length : 0,
|
||||
this.view.yaxisExt ? this.view.yaxisExt.length : 0
|
||||
]
|
||||
},
|
||||
selectedDimension() {
|
||||
return this.obj.selectedDimension
|
||||
},
|
||||
selectedQuota() {
|
||||
return this.obj.selectedQuota
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$emit('on-add-languages', messages)
|
||||
},
|
||||
watch: {
|
||||
listenLists: function (val) {
|
||||
listenLists: function(val) {
|
||||
if (this.listenLists[0] <= 1 && this.listenLists[1] <= 1) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
if (this.view.yaxis.length > 1) {
|
||||
this.dragCheckType(this.view.yaxis, 'q')
|
||||
@ -188,7 +243,7 @@ export default {
|
||||
this.view.yaxisExt = [this.view.yaxisExt[0]]
|
||||
}
|
||||
this.calcData(true)
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
executeAxios(url, type, data, callBack) {
|
||||
@ -212,38 +267,31 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
onMove(e, originalEvent) {
|
||||
this.moveId = e.draggedContext.element.id
|
||||
return true
|
||||
},
|
||||
|
||||
addXaxis(e) {
|
||||
this.multiAdd(e, this.view.xaxis)
|
||||
this.dragMoveDuplicate(this.view.xaxis, e)
|
||||
if (this.view.type !== 'table-info') {
|
||||
this.dragCheckType(this.view.xaxis, 'd')
|
||||
}
|
||||
this.dragMoveDuplicate(this.view.xaxis, e)
|
||||
/*if (this.view.xaxis.length > 1) {
|
||||
this.view.xaxis = [this.view.xaxis[0]]
|
||||
}*/
|
||||
this.calcData(true)
|
||||
},
|
||||
addYaxis(e) {
|
||||
this.dragCheckType(this.view.yaxis, 'q')
|
||||
this.multiAdd(e, this.view.yaxis)
|
||||
this.dragMoveDuplicate(this.view.yaxis, e)
|
||||
/*if ( this.view.yaxis.length > 1) {
|
||||
this.view.yaxis = [this.view.yaxis[0]]
|
||||
}*/
|
||||
this.dragCheckType(this.view.yaxis, 'q')
|
||||
if (this.view.yaxis.length <= 1) {
|
||||
this.calcData(true)
|
||||
}
|
||||
},
|
||||
addYaxisExt(e) {
|
||||
this.dragCheckType(this.view.yaxisExt, 'q')
|
||||
this.multiAdd(e, this.view.yaxisExt)
|
||||
this.dragMoveDuplicate(this.view.yaxisExt, e)
|
||||
/*if (equalsAny(this.view.type, 'map', 'bidirectional-bar') && this.view.yaxisExt.length > 1) {
|
||||
this.view.yaxisExt = [this.view.yaxisExt[0]]
|
||||
}*/
|
||||
this.dragCheckType(this.view.yaxisExt, 'q')
|
||||
if (this.view.yaxisExt.length <= 1) {
|
||||
this.calcData(true)
|
||||
}
|
||||
@ -261,7 +309,6 @@ export default {
|
||||
},
|
||||
|
||||
showDimensionEditFilter(item) {
|
||||
|
||||
this.$emit('plugin-call-back', {
|
||||
eventName: 'show-dimension-edit-filter',
|
||||
eventParam: item
|
||||
@ -279,14 +326,12 @@ export default {
|
||||
this.calcData(true)
|
||||
},
|
||||
showRename(item) {
|
||||
|
||||
this.$emit('plugin-call-back', {
|
||||
eventName: 'show-rename',
|
||||
eventParam: item
|
||||
})
|
||||
},
|
||||
valueFormatter(item) {
|
||||
|
||||
this.$emit('plugin-call-back', {
|
||||
eventName: 'show-edit-formatter',
|
||||
eventParam: item
|
||||
@ -305,14 +350,12 @@ export default {
|
||||
this.calcData(true)
|
||||
},
|
||||
showQuotaEditFilter(item) {
|
||||
|
||||
this.$emit('plugin-call-back', {
|
||||
eventName: 'show-quota-edit-filter',
|
||||
eventParam: item
|
||||
})
|
||||
},
|
||||
showQuotaEditCompare(item) {
|
||||
|
||||
this.$emit('plugin-call-back', {
|
||||
eventName: 'show-quota-edit-compare',
|
||||
eventParam: item
|
||||
@ -327,16 +370,39 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
multiAdd(e, itemList) {
|
||||
// 只处理原始字段拖拽
|
||||
if (!e.item.classList.contains('selected-item')) {
|
||||
return
|
||||
}
|
||||
const groupDie = e.item.classList.contains('group-dimension')
|
||||
const sourceList = groupDie ? this.selectedDimension : this.selectedQuota
|
||||
if (sourceList.length > 1) {
|
||||
const qdList = groupDie ? this.dimensionData : this.quotaData
|
||||
const sourceIds = sourceList.map(i => i.id)
|
||||
const sortedList = qdList.filter(i => sourceIds.includes(i.id))
|
||||
itemList.splice(e.newIndex, 1, ...sortedList)
|
||||
}
|
||||
},
|
||||
dragMoveDuplicate(list, e) {
|
||||
const that = this
|
||||
const dup = list.filter(function (m) {
|
||||
return m.id === that.moveId
|
||||
})
|
||||
if (dup && dup.length > 1) {
|
||||
list.splice(e.newDraggableIndex, 1)
|
||||
let newItems = [list[e.newDraggableIndex]]
|
||||
if (e.item.classList.contains('selected-item')) {
|
||||
const groupDie = e.item.classList.contains('group-dimension')
|
||||
newItems = groupDie ? this.selectedDimension : this.selectedQuota
|
||||
}
|
||||
const preIds = list
|
||||
.filter((_, i) => i < e.newDraggableIndex || i >= e.newDraggableIndex + newItems.length)
|
||||
.map(i => i.id)
|
||||
// 倒序删除
|
||||
for (let i = e.newDraggableIndex + newItems.length - 1; i >= e.newDraggableIndex; i--) {
|
||||
if (preIds.includes(list[i].id)) {
|
||||
list.splice(i, 1)
|
||||
}
|
||||
}
|
||||
},
|
||||
addCustomFilter(e) {
|
||||
this.multiAdd(e, this.view.customFilter)
|
||||
this.dragMoveDuplicate(this.view.customFilter, e)
|
||||
// 记录数等自动生成字段不做为过滤条件
|
||||
if (this.view.customFilter && this.view.customFilter.length > 0) {
|
||||
for (let i = 0; i < this.view.customFilter.length; i++) {
|
||||
@ -345,7 +411,6 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
this.dragMoveDuplicate(this.view.customFilter, e)
|
||||
this.calcData(true)
|
||||
},
|
||||
filterItemRemove(item) {
|
||||
|
||||
@ -5,22 +5,31 @@
|
||||
<span style="width: 80px;text-align: right;">
|
||||
<span>{{ $t('plugin_view_racebar.source') }}</span>/<span>{{ $t('chart.dimension') }}</span>
|
||||
</span>
|
||||
<draggable v-model="view.xaxis" group="drag" animation="300" :move="onMove" class="drag-block-style"
|
||||
@add="addXaxis" @update="calcData(true)">
|
||||
<draggable
|
||||
v-model="view.xaxis"
|
||||
:move="onMove"
|
||||
animation="300"
|
||||
class="drag-block-style"
|
||||
group="drag"
|
||||
@add="addXaxis"
|
||||
@update="calcData(true)"
|
||||
>
|
||||
<transition-group class="draggable-group">
|
||||
<dimension-item v-for="(item,index) in view.xaxis" :key="index"
|
||||
:param="param"
|
||||
:index="0"
|
||||
:item="item"
|
||||
:dimension-data="dimension"
|
||||
:quota-data="quotaData"
|
||||
:chart="chart"
|
||||
@onDimensionItemChange="dimensionItemChange"
|
||||
@onDimensionItemRemove="dimensionItemRemove"
|
||||
@editItemFilter="showDimensionEditFilter"
|
||||
@onNameEdit="showRename"
|
||||
dimension-name="dimension"
|
||||
:bus="bus"
|
||||
<dimension-item
|
||||
v-for="(item,index) in view.xaxis"
|
||||
:key="index"
|
||||
:bus="bus"
|
||||
:chart="chart"
|
||||
:dimension-data="dimension"
|
||||
:index="0"
|
||||
:item="item"
|
||||
:param="param"
|
||||
:quota-data="quotaData"
|
||||
dimension-name="dimension"
|
||||
@editItemFilter="showDimensionEditFilter"
|
||||
@onDimensionItemChange="dimensionItemChange"
|
||||
@onDimensionItemRemove="dimensionItemRemove"
|
||||
@onNameEdit="showRename"
|
||||
/>
|
||||
</transition-group>
|
||||
</draggable>
|
||||
@ -35,10 +44,10 @@
|
||||
</span>
|
||||
<draggable
|
||||
v-model="view.xaxisExt"
|
||||
group="drag"
|
||||
animation="300"
|
||||
:move="onMove"
|
||||
animation="300"
|
||||
class="drag-block-style"
|
||||
group="drag"
|
||||
@add="addXaxisExt"
|
||||
@update="calcData(true)"
|
||||
>
|
||||
@ -46,17 +55,17 @@
|
||||
<dimension-ext-item
|
||||
v-for="(item,index) in view.xaxisExt"
|
||||
:key="item.id"
|
||||
:param="param"
|
||||
:bus="bus"
|
||||
:chart="chart"
|
||||
:dimension-data="dimension"
|
||||
:index="index"
|
||||
:item="item"
|
||||
:dimension-data="dimension"
|
||||
:param="param"
|
||||
:quota-data="quotaData"
|
||||
:chart="chart"
|
||||
@editItemFilter="showDimensionEditFilter"
|
||||
@onDimensionItemChange="dimensionItemChange"
|
||||
@onDimensionItemRemove="dimensionItemRemove"
|
||||
@editItemFilter="showDimensionEditFilter"
|
||||
@onNameEdit="showRename"
|
||||
:bus="bus"
|
||||
/>
|
||||
</transition-group>
|
||||
</draggable>
|
||||
@ -69,17 +78,32 @@
|
||||
<span style="width: 80px;text-align: right;">
|
||||
<span>{{ $t('plugin_view_racebar.mark_size') }}</span>/<span>{{ $t('chart.quota') }}</span>
|
||||
</span>
|
||||
<draggable v-model="view.yaxis" group="drag" animation="300" :move="onMove" class="drag-block-style"
|
||||
@add="addYaxis" @update="calcData(true)">
|
||||
<draggable
|
||||
v-model="view.yaxis"
|
||||
:move="onMove"
|
||||
animation="300"
|
||||
class="drag-block-style"
|
||||
group="drag"
|
||||
@add="addYaxis"
|
||||
@update="calcData(true)"
|
||||
>
|
||||
<transition-group class="draggable-group">
|
||||
<quota-item v-for="(item,index) in view.yaxis" :key="item.id" :param="param" :index="index" :item="item"
|
||||
:chart="chart" :dimension-data="dimension" :quota-data="quota"
|
||||
@onQuotaItemChange="quotaItemChange"
|
||||
@onQuotaItemRemove="quotaItemRemove"
|
||||
@editItemFilter="showQuotaEditFilter"
|
||||
@valueFormatter="valueFormatter"
|
||||
@onNameEdit="showRename"
|
||||
@editItemCompare="showQuotaEditCompare"/>
|
||||
<quota-item
|
||||
v-for="(item,index) in view.yaxis"
|
||||
:key="item.id"
|
||||
:chart="chart"
|
||||
:dimension-data="dimension"
|
||||
:index="index"
|
||||
:item="item"
|
||||
:param="param"
|
||||
:quota-data="quota"
|
||||
@editItemCompare="showQuotaEditCompare"
|
||||
@editItemFilter="showQuotaEditFilter"
|
||||
@onNameEdit="showRename"
|
||||
@onQuotaItemChange="quotaItemChange"
|
||||
@onQuotaItemRemove="quotaItemRemove"
|
||||
@valueFormatter="valueFormatter"
|
||||
/>
|
||||
</transition-group>
|
||||
</draggable>
|
||||
<div v-if="!view.yaxis || view.yaxis.length === 0" class="drag-placeholder-style">
|
||||
@ -92,14 +116,29 @@
|
||||
<el-row class="padding-lr" style="margin-top: 6px;">
|
||||
<span>{{ $t('chart.result_filter') }}</span>
|
||||
|
||||
<draggable v-model="view.customFilter" group="drag" animation="300" :move="onMove" class="theme-item-class"
|
||||
style="padding:2px 0 0 0;width:100%;min-height: 32px;border-radius: 4px;border: 1px solid #DCDFE6;overflow-x: auto;display: flex;align-items: center;background-color: white;"
|
||||
@add="addCustomFilter" @update="calcData(true)">
|
||||
<draggable
|
||||
v-model="view.customFilter"
|
||||
:move="onMove"
|
||||
animation="300"
|
||||
class="theme-item-class"
|
||||
group="drag"
|
||||
style="padding:2px 0 0 0;width:100%;min-height: 32px;border-radius: 4px;border: 1px solid #DCDFE6;overflow-x: auto;display: flex;align-items: center;background-color: white;"
|
||||
@add="addCustomFilter"
|
||||
@update="calcData(true)"
|
||||
>
|
||||
<transition-group class="draggable-group">
|
||||
<filter-item v-for="(item,index) in view.customFilter" :key="item.id" :param="param" :index="index"
|
||||
:item="item" :dimension-data="dimension" :quota-data="quota" :bus="bus"
|
||||
@onFilterItemRemove="filterItemRemove"
|
||||
@editItemFilter="showEditFilter"/>
|
||||
<filter-item
|
||||
v-for="(item,index) in view.customFilter"
|
||||
:key="item.id"
|
||||
:bus="bus"
|
||||
:dimension-data="dimension"
|
||||
:index="index"
|
||||
:item="item"
|
||||
:param="param"
|
||||
:quota-data="quota"
|
||||
@editItemFilter="showEditFilter"
|
||||
@onFilterItemRemove="filterItemRemove"
|
||||
/>
|
||||
</transition-group>
|
||||
</draggable>
|
||||
<div v-if="!view.customFilter || view.customFilter.length === 0" class="drag-placeholder-style">
|
||||
@ -128,7 +167,7 @@ export default {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: null
|
||||
},
|
||||
}
|
||||
},
|
||||
components: {
|
||||
DimensionItem,
|
||||
@ -151,7 +190,7 @@ export default {
|
||||
value: 'line',
|
||||
label: '线'
|
||||
}
|
||||
],
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -177,12 +216,18 @@ export default {
|
||||
return this.obj.quotaData
|
||||
},
|
||||
listenLists() {
|
||||
if (!this.view) return [0, 0, 0];
|
||||
if (!this.view) return [0, 0, 0]
|
||||
return [
|
||||
this.view.xaxis ? this.view.xaxis.length : 0,
|
||||
this.view.xaxisExt ? this.view.xaxisExt.length : 0,
|
||||
this.view.yaxis ? this.view.yaxis.length : 0
|
||||
]
|
||||
},
|
||||
selectedDimension() {
|
||||
return this.obj.selectedDimension
|
||||
},
|
||||
selectedQuota() {
|
||||
return this.obj.selectedQuota
|
||||
}
|
||||
},
|
||||
created() {
|
||||
@ -191,9 +236,9 @@ export default {
|
||||
mounted() {
|
||||
},
|
||||
watch: {
|
||||
listenLists: function (val) {
|
||||
listenLists: function(val) {
|
||||
if (this.listenLists[0] <= 1 && this.listenLists[1] <= 1 && this.listenLists[2] <= 1) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
if (this.view.xaxis.length > 1) {
|
||||
this.dragCheckType(this.view.xaxis, 'd')
|
||||
@ -208,7 +253,7 @@ export default {
|
||||
this.view.yaxis = [this.view.yaxis[0]]
|
||||
}
|
||||
this.calcData(true)
|
||||
},
|
||||
}
|
||||
|
||||
},
|
||||
methods: {
|
||||
@ -233,17 +278,17 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
onMove(e, originalEvent) {
|
||||
this.moveId = e.draggedContext.element.id
|
||||
return true
|
||||
},
|
||||
|
||||
addXaxis(e) {
|
||||
this.multiAdd(e, this.view.xaxis)
|
||||
this.dragMoveDuplicate(this.view.xaxis, e)
|
||||
if (this.view.type !== 'table-info') {
|
||||
this.dragCheckType(this.view.xaxis, 'd')
|
||||
}
|
||||
this.dragMoveDuplicate(this.view.xaxis, e)
|
||||
if (this.view.xaxis.length > 1) {
|
||||
//this.view.xaxis = [this.view.xaxis[0]]
|
||||
} else {
|
||||
@ -251,10 +296,11 @@ export default {
|
||||
}
|
||||
},
|
||||
addXaxisExt(e) {
|
||||
this.multiAdd(e, this.view.xaxisExt)
|
||||
this.dragMoveDuplicate(this.view.xaxisExt, e)
|
||||
if (this.view.type !== 'table-info') {
|
||||
this.dragCheckType(this.view.xaxisExt, 'd')
|
||||
}
|
||||
this.dragMoveDuplicate(this.view.xaxisExt, e)
|
||||
if (this.view.xaxisExt.length > 1) {
|
||||
//this.view.xaxisExt = [this.view.xaxisExt[0]]
|
||||
} else {
|
||||
@ -262,8 +308,9 @@ export default {
|
||||
}
|
||||
},
|
||||
addYaxis(e) {
|
||||
this.dragCheckType(this.view.yaxis, 'q')
|
||||
this.multiAdd(e, this.view.yaxis)
|
||||
this.dragMoveDuplicate(this.view.yaxis, e)
|
||||
this.dragCheckType(this.view.yaxis, 'q')
|
||||
if (this.view.yaxis.length > 1) {
|
||||
//this.view.yaxis = [this.view.yaxis[0]]
|
||||
} else {
|
||||
@ -350,16 +397,39 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
multiAdd(e, itemList) {
|
||||
// 只处理原始字段拖拽
|
||||
if (!e.item.classList.contains('selected-item')) {
|
||||
return
|
||||
}
|
||||
const groupDie = e.item.classList.contains('group-dimension')
|
||||
const sourceList = groupDie ? this.selectedDimension : this.selectedQuota
|
||||
if (sourceList.length > 1) {
|
||||
const qdList = groupDie ? this.dimensionData : this.quotaData
|
||||
const sourceIds = sourceList.map(i => i.id)
|
||||
const sortedList = qdList.filter(i => sourceIds.includes(i.id))
|
||||
itemList.splice(e.newIndex, 1, ...sortedList)
|
||||
}
|
||||
},
|
||||
dragMoveDuplicate(list, e) {
|
||||
const that = this
|
||||
const dup = list.filter(function (m) {
|
||||
return m.id === that.moveId
|
||||
})
|
||||
if (dup && dup.length > 1) {
|
||||
list.splice(e.newDraggableIndex, 1)
|
||||
let newItems = [list[e.newDraggableIndex]]
|
||||
if (e.item.classList.contains('selected-item')) {
|
||||
const groupDie = e.item.classList.contains('group-dimension')
|
||||
newItems = groupDie ? this.selectedDimension : this.selectedQuota
|
||||
}
|
||||
const preIds = list
|
||||
.filter((_, i) => i < e.newDraggableIndex || i >= e.newDraggableIndex + newItems.length)
|
||||
.map(i => i.id)
|
||||
// 倒序删除
|
||||
for (let i = e.newDraggableIndex + newItems.length - 1; i >= e.newDraggableIndex; i--) {
|
||||
if (preIds.includes(list[i].id)) {
|
||||
list.splice(i, 1)
|
||||
}
|
||||
}
|
||||
},
|
||||
addCustomFilter(e) {
|
||||
this.multiAdd(e, this.view.customFilter)
|
||||
this.dragMoveDuplicate(this.view.customFilter, e)
|
||||
// 记录数等自动生成字段不做为过滤条件
|
||||
if (this.view.customFilter && this.view.customFilter.length > 0) {
|
||||
for (let i = 0; i < this.view.customFilter.length; i++) {
|
||||
@ -368,7 +438,6 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
this.dragMoveDuplicate(this.view.customFilter, e)
|
||||
this.calcData(true)
|
||||
},
|
||||
filterItemRemove(item) {
|
||||
|
||||
@ -5,21 +5,30 @@
|
||||
<span style="width: 80px;text-align: right;">
|
||||
<span>{{ $t('plugin_view_sankey.source') }}</span>/<span>{{ $t('chart.dimension') }}</span>
|
||||
</span>
|
||||
<draggable v-model="source" group="drag" animation="300" :move="onMove" class="drag-block-style"
|
||||
@add="addSource" @update="calcData(true)">
|
||||
<draggable
|
||||
v-model="source"
|
||||
:move="onMove"
|
||||
animation="300"
|
||||
class="drag-block-style"
|
||||
group="drag"
|
||||
@add="addSource"
|
||||
@update="calcData(true)"
|
||||
>
|
||||
<transition-group class="draggable-group">
|
||||
<sankey-dimension-item v-for="(item,index) in source" :key="index"
|
||||
:param="param"
|
||||
:index="0"
|
||||
:item="item"
|
||||
:dimension-data="dimension"
|
||||
:quota-data="quotaData"
|
||||
:chart="chart"
|
||||
@onDimensionItemRemove="locationItemRemove"
|
||||
@onDimensionItemChange="dimensionItemChange"
|
||||
@onNameEdit="showRename"
|
||||
dimension-name="source"
|
||||
:bus="bus"
|
||||
<sankey-dimension-item
|
||||
v-for="(item,index) in source"
|
||||
:key="index"
|
||||
:bus="bus"
|
||||
:chart="chart"
|
||||
:dimension-data="dimension"
|
||||
:index="0"
|
||||
:item="item"
|
||||
:param="param"
|
||||
:quota-data="quotaData"
|
||||
dimension-name="source"
|
||||
@onDimensionItemChange="dimensionItemChange"
|
||||
@onDimensionItemRemove="locationItemRemove"
|
||||
@onNameEdit="showRename"
|
||||
/>
|
||||
</transition-group>
|
||||
</draggable>
|
||||
@ -33,20 +42,29 @@
|
||||
<span style="width: 80px;text-align: right;">
|
||||
<span>{{ $t('plugin_view_sankey.target') }}</span>/<span>{{ $t('chart.dimension') }}</span>
|
||||
</span>
|
||||
<draggable v-model="target" group="drag" animation="300" :move="onMove" class="drag-block-style"
|
||||
@add="addTarget" @update="calcData(true)">
|
||||
<draggable
|
||||
v-model="target"
|
||||
:move="onMove"
|
||||
animation="300"
|
||||
class="drag-block-style"
|
||||
group="drag"
|
||||
@add="addTarget"
|
||||
@update="calcData(true)"
|
||||
>
|
||||
<transition-group class="draggable-group">
|
||||
<sankey-dimension-item v-for="(item,index) in target" :key="index"
|
||||
:param="param"
|
||||
:index="1"
|
||||
:item="item"
|
||||
:dimension-data="dimension"
|
||||
:quota-data="quotaData"
|
||||
:chart="chart"
|
||||
@onDimensionItemRemove="locationItemRemove"
|
||||
@onNameEdit="showRename"
|
||||
dimension-name="target"
|
||||
:bus="bus"
|
||||
<sankey-dimension-item
|
||||
v-for="(item,index) in target"
|
||||
:key="index"
|
||||
:bus="bus"
|
||||
:chart="chart"
|
||||
:dimension-data="dimension"
|
||||
:index="1"
|
||||
:item="item"
|
||||
:param="param"
|
||||
:quota-data="quotaData"
|
||||
dimension-name="target"
|
||||
@onDimensionItemRemove="locationItemRemove"
|
||||
@onNameEdit="showRename"
|
||||
/>
|
||||
</transition-group>
|
||||
</draggable>
|
||||
@ -59,22 +77,32 @@
|
||||
<el-row class="padding-lr" style="margin-top: 6px;">
|
||||
<span style="width: 80px;text-align: right;">
|
||||
<span>{{ $t('plugin_view_sankey.mark_size') }}</span>/<span>{{ $t('chart.quota') }}</span>
|
||||
<!-- <el-tooltip class="item" effect="dark" placement="bottom">
|
||||
<div slot="content">
|
||||
{{ $t('plugin_view_sankey.mark_size_tip') }}
|
||||
</div>
|
||||
<i class="el-icon-info" style="cursor: pointer;color: #606266;"/>
|
||||
</el-tooltip>-->
|
||||
</span>
|
||||
<draggable v-model="view.yaxis" group="drag" animation="300" :move="onMove" class="drag-block-style"
|
||||
@add="addYaxis" @update="calcData(true)">
|
||||
<draggable
|
||||
v-model="view.yaxis"
|
||||
:move="onMove"
|
||||
animation="300"
|
||||
class="drag-block-style"
|
||||
group="drag"
|
||||
@add="addYaxis"
|
||||
@update="calcData(true)"
|
||||
>
|
||||
<transition-group class="draggable-group">
|
||||
<sankey-quota-item v-for="(item,index) in view.yaxis" :key="item.id" :param="param" :index="index" :item="item"
|
||||
:chart="chart" :dimension-data="dimension" :quota-data="quota"
|
||||
@onQuotaItemChange="quotaItemChange"
|
||||
@onQuotaItemRemove="quotaItemRemove" @editItemFilter="showQuotaEditFilter"
|
||||
@onNameEdit="showRename"
|
||||
@editItemCompare="showQuotaEditCompare"/>
|
||||
<sankey-quota-item
|
||||
v-for="(item,index) in view.yaxis"
|
||||
:key="item.id"
|
||||
:chart="chart"
|
||||
:dimension-data="dimension"
|
||||
:index="index"
|
||||
:item="item"
|
||||
:param="param"
|
||||
:quota-data="quota"
|
||||
@editItemCompare="showQuotaEditCompare"
|
||||
@editItemFilter="showQuotaEditFilter"
|
||||
@onNameEdit="showRename"
|
||||
@onQuotaItemChange="quotaItemChange"
|
||||
@onQuotaItemRemove="quotaItemRemove"
|
||||
/>
|
||||
</transition-group>
|
||||
</draggable>
|
||||
<div v-if="!view.yaxis || view.yaxis.length === 0" class="drag-placeholder-style">
|
||||
@ -86,14 +114,28 @@
|
||||
<el-row class="padding-lr" style="margin-top: 6px;">
|
||||
<span>{{ $t('chart.result_filter') }}</span>
|
||||
|
||||
<draggable v-model="view.customFilter" group="drag" animation="300" :move="onMove" class="theme-item-class"
|
||||
style="padding:2px 0 0 0;width:100%;min-height: 32px;border-radius: 4px;border: 1px solid #DCDFE6;overflow-x: auto;display: flex;align-items: center;background-color: white;"
|
||||
@add="addCustomFilter" @update="calcData(true)">
|
||||
<draggable
|
||||
v-model="view.customFilter"
|
||||
:move="onMove"
|
||||
animation="300"
|
||||
class="theme-item-class"
|
||||
group="drag"
|
||||
style="padding:2px 0 0 0;width:100%;min-height: 32px;border-radius: 4px;border: 1px solid #DCDFE6;overflow-x: auto;display: flex;align-items: center;background-color: white;"
|
||||
@add="addCustomFilter"
|
||||
@update="calcData(true)"
|
||||
>
|
||||
<transition-group class="draggable-group">
|
||||
<filter-item v-for="(item,index) in view.customFilter" :key="item.id" :param="param" :index="index"
|
||||
:item="item" :dimension-data="dimension" :quota-data="quota"
|
||||
@onFilterItemRemove="filterItemRemove"
|
||||
@editItemFilter="showEditFilter"/>
|
||||
<filter-item
|
||||
v-for="(item,index) in view.customFilter"
|
||||
:key="item.id"
|
||||
:dimension-data="dimension"
|
||||
:index="index"
|
||||
:item="item"
|
||||
:param="param"
|
||||
:quota-data="quota"
|
||||
@editItemFilter="showEditFilter"
|
||||
@onFilterItemRemove="filterItemRemove"
|
||||
/>
|
||||
</transition-group>
|
||||
</draggable>
|
||||
<div v-if="!view.customFilter || view.customFilter.length === 0" class="drag-placeholder-style">
|
||||
@ -121,7 +163,7 @@ export default {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: null
|
||||
},
|
||||
}
|
||||
},
|
||||
components: {
|
||||
SankeyDimensionItem,
|
||||
@ -169,26 +211,12 @@ export default {
|
||||
quotaData() {
|
||||
return this.obj.quotaData
|
||||
},
|
||||
/*source: {
|
||||
// getter
|
||||
get: function () {
|
||||
return this.view.xaxis && this.view.xaxis.length && [this.view.xaxis[0]] ? [this.view.xaxis[0]] : [];
|
||||
},
|
||||
// setter
|
||||
set: function (newValue) {
|
||||
this.view.xaxis = [...newValue, ...this.target]
|
||||
}
|
||||
selectedDimension() {
|
||||
return this.obj.selectedDimension
|
||||
},
|
||||
target: {
|
||||
// getter
|
||||
get: function () {
|
||||
return this.view.xaxis && this.view.xaxis.length && [this.view.xaxis[1]] ? [this.view.xaxis[1]] : [];
|
||||
},
|
||||
// setter
|
||||
set: function (newValue) {
|
||||
this.view.xaxis = [...this.source, ...newValue]
|
||||
}
|
||||
}*/
|
||||
selectedQuota() {
|
||||
return this.obj.selectedQuota
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.source = this.view.xaxis && this.view.xaxis.length && [this.view.xaxis[0]] || []
|
||||
@ -202,13 +230,13 @@ export default {
|
||||
target(val) {
|
||||
this.view.xaxis = [...this.source, ...this.target]
|
||||
},
|
||||
'view.xaxis': function (val, oldVal) {
|
||||
'view.xaxis': function(val, oldVal) {
|
||||
if (val) {
|
||||
if (val[0] && this.source[0]) {
|
||||
this.source[0].name = val[0].name;
|
||||
this.source[0].name = val[0].name
|
||||
}
|
||||
if (val[1] && this.target[0]) {
|
||||
this.target[0].name = val[1].name;
|
||||
this.target[0].name = val[1].name
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -239,45 +267,33 @@ export default {
|
||||
this.calcData(true)
|
||||
},
|
||||
|
||||
|
||||
onMove(e, originalEvent) {
|
||||
this.moveId = e.draggedContext.element.id
|
||||
return true
|
||||
},
|
||||
|
||||
addSource(e) {
|
||||
this.dragCheckType(this.source, 'd')
|
||||
this.multiAdd(e, this.source)
|
||||
this.dragMoveDuplicate(this.source, e)
|
||||
this.dragCheckType(this.source, 'd')
|
||||
if (this.source.length > 1) {
|
||||
this.source = [this.source[0]]
|
||||
}
|
||||
this.calcData(true)
|
||||
},
|
||||
addTarget(e) {
|
||||
this.dragCheckType(this.target, 'd')
|
||||
this.multiAdd(e, this.target)
|
||||
this.dragMoveDuplicate(this.target, e)
|
||||
this.dragCheckType(this.target, 'd')
|
||||
if (this.target.length > 1) {
|
||||
this.target = [this.target[0]]
|
||||
}
|
||||
this.calcData(true)
|
||||
},
|
||||
/* addLabelItems(e) {
|
||||
this.dragMoveDuplicate(this.labelItems, e)
|
||||
if (this.labelItems.length > 1) {
|
||||
this.labelItems = [this.labelItems[0]]
|
||||
}
|
||||
this.calcData(true)
|
||||
},
|
||||
addTooltipItems(e) {
|
||||
this.dragMoveDuplicate(this.tooltipItems, e)
|
||||
if (this.tooltipItems.length > 1) {
|
||||
this.tooltipItems = [this.tooltipItems[0]]
|
||||
}
|
||||
this.calcData(true)
|
||||
}, */
|
||||
addYaxis(e) {
|
||||
this.dragCheckType(this.view.yaxis, 'q')
|
||||
this.multiAdd(e, this.view.yaxis)
|
||||
this.dragMoveDuplicate(this.view.yaxis, e)
|
||||
this.dragCheckType(this.view.yaxis, 'q')
|
||||
if (this.view.yaxis.length > 1) {
|
||||
this.view.yaxis = [this.view.yaxis[0]]
|
||||
}
|
||||
@ -353,16 +369,39 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
multiAdd(e, itemList) {
|
||||
// 只处理原始字段拖拽
|
||||
if (!e.item.classList.contains('selected-item')) {
|
||||
return
|
||||
}
|
||||
const groupDie = e.item.classList.contains('group-dimension')
|
||||
const sourceList = groupDie ? this.selectedDimension : this.selectedQuota
|
||||
if (sourceList.length > 1) {
|
||||
const qdList = groupDie ? this.dimensionData : this.quotaData
|
||||
const sourceIds = sourceList.map(i => i.id)
|
||||
const sortedList = qdList.filter(i => sourceIds.includes(i.id))
|
||||
itemList.splice(e.newIndex, 1, ...sortedList)
|
||||
}
|
||||
},
|
||||
dragMoveDuplicate(list, e) {
|
||||
const that = this
|
||||
const dup = list.filter(function (m) {
|
||||
return m.id === that.moveId
|
||||
})
|
||||
if (dup && dup.length > 1) {
|
||||
list.splice(e.newDraggableIndex, 1)
|
||||
let newItems = [list[e.newDraggableIndex]]
|
||||
if (e.item.classList.contains('selected-item')) {
|
||||
const groupDie = e.item.classList.contains('group-dimension')
|
||||
newItems = groupDie ? this.selectedDimension : this.selectedQuota
|
||||
}
|
||||
const preIds = list
|
||||
.filter((_, i) => i < e.newDraggableIndex || i >= e.newDraggableIndex + newItems.length)
|
||||
.map(i => i.id)
|
||||
// 倒序删除
|
||||
for (let i = e.newDraggableIndex + newItems.length - 1; i >= e.newDraggableIndex; i--) {
|
||||
if (preIds.includes(list[i].id)) {
|
||||
list.splice(i, 1)
|
||||
}
|
||||
}
|
||||
},
|
||||
addCustomFilter(e) {
|
||||
this.multiAdd(e, this.view.customFilter)
|
||||
this.dragMoveDuplicate(this.view.customFilter, e)
|
||||
// 记录数等自动生成字段不做为过滤条件
|
||||
if (this.view.customFilter && this.view.customFilter.length > 0) {
|
||||
for (let i = 0; i < this.view.customFilter.length; i++) {
|
||||
@ -371,7 +410,6 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
this.dragMoveDuplicate(this.view.customFilter, e)
|
||||
this.calcData(true)
|
||||
},
|
||||
filterItemRemove(item) {
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user