forked from github/dataease
feat(视图): 同环比前端UI
This commit is contained in:
junjie
parent
6ec3ef8d13
commit
dfb83b4a43
@ -973,7 +973,26 @@ export default {
|
||||
next: 'Next',
|
||||
select_dataset: 'Select Dataset',
|
||||
select_chart_type: 'Select Chart Type',
|
||||
recover: 'Reset'
|
||||
recover: 'Reset',
|
||||
yoy_label: 'YOY/MOM',
|
||||
yoy_setting: 'Setting',
|
||||
pls_select_field: 'Select Field',
|
||||
compare_date: 'Compare Date',
|
||||
compare_type: 'Compare Type',
|
||||
compare_data: 'Data Setting',
|
||||
year_yoy: 'Year yoy',
|
||||
month_yoy: 'Month yoy',
|
||||
quarter_yoy: 'Quarter yoy',
|
||||
week_yoy: 'Week yoy',
|
||||
day_yoy: 'Day yoy',
|
||||
year_mom: 'Year mom',
|
||||
month_mom: 'Month mom',
|
||||
quarter_mom: 'Quarter mom',
|
||||
week_mom: 'Week mom',
|
||||
day_mom: 'Day mom',
|
||||
data_sub: 'Sub',
|
||||
data_percent: 'Percent',
|
||||
compare_calc_expression: 'Expression'
|
||||
},
|
||||
dataset: {
|
||||
sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default',
|
||||
|
||||
@ -973,8 +973,26 @@ export default {
|
||||
preview: '上一步',
|
||||
next: '下一步',
|
||||
select_dataset: '選擇數據集',
|
||||
select_chart_type: '選擇圖表類型',
|
||||
recover: '重置'
|
||||
recover: '重置',
|
||||
yoy_label: '同比/環比',
|
||||
yoy_setting: '同環比設置',
|
||||
pls_select_field: '請選擇字段',
|
||||
compare_date: '對比日期',
|
||||
compare_type: '對比類型',
|
||||
compare_data: '數據設置',
|
||||
year_yoy: '年同比',
|
||||
month_yoy: '月同比',
|
||||
quarter_yoy: '季同比',
|
||||
week_yoy: '周同比',
|
||||
day_yoy: '日同比',
|
||||
year_mom: '年環比',
|
||||
month_mom: '月環比',
|
||||
quarter_mom: '季環比',
|
||||
week_mom: '周環比',
|
||||
day_mom: '日環比',
|
||||
data_sub: '對比差值',
|
||||
data_percent: '差值百分比',
|
||||
compare_calc_expression: '計算公式'
|
||||
},
|
||||
dataset: {
|
||||
sheet_warn: '有多個 Sheet 頁，默認抽取第一個',
|
||||
|
||||
@ -976,7 +976,26 @@ export default {
|
||||
next: '下一步',
|
||||
select_dataset: '选择数据集',
|
||||
select_chart_type: '选择图表类型',
|
||||
recover: '重置'
|
||||
recover: '重置',
|
||||
yoy_label: '同比/环比',
|
||||
yoy_setting: '同环比设置',
|
||||
pls_select_field: '请选择字段',
|
||||
compare_date: '对比日期',
|
||||
compare_type: '对比类型',
|
||||
compare_data: '数据设置',
|
||||
year_yoy: '年同比',
|
||||
month_yoy: '月同比',
|
||||
quarter_yoy: '季同比',
|
||||
week_yoy: '周同比',
|
||||
day_yoy: '日同比',
|
||||
year_mom: '年环比',
|
||||
month_mom: '月环比',
|
||||
quarter_mom: '季环比',
|
||||
week_mom: '周环比',
|
||||
day_mom: '日环比',
|
||||
data_sub: '对比差值',
|
||||
data_percent: '差值百分比',
|
||||
compare_calc_expression: '计算公式'
|
||||
},
|
||||
dataset: {
|
||||
sheet_warn: '有多个 Sheet 页，默认抽取第一个',
|
||||
|
||||
29
frontend/src/views/chart/chart/compare.js
Normal file
29
frontend/src/views/chart/chart/compare.js
Normal file
@ -0,0 +1,29 @@
|
||||
export const compareItem = {
|
||||
type: 'none', // year-yoy/month-yoy等
|
||||
resultData: 'percent', // 对比差sub，百分比percent等
|
||||
field: '',
|
||||
custom: {
|
||||
field: '',
|
||||
calcType: '0', // 0-增长值，1-增长率
|
||||
timeType: '0', // 0-固定日期，1-日期区间
|
||||
currentTime: '',
|
||||
compareTime: '',
|
||||
currentTimeRange: [],
|
||||
compareTimeRange: []
|
||||
}
|
||||
}
|
||||
|
||||
export const compareYearList = [
|
||||
{ name: 'year_mom', value: 'year_mom' }
|
||||
]
|
||||
|
||||
export const compareMonthList = [
|
||||
{ name: 'month_mom', value: 'month_mom' },
|
||||
{ name: 'year_yoy', value: 'year_yoy' }
|
||||
]
|
||||
|
||||
export const compareDayList = [
|
||||
{ name: 'day_mom', value: 'day_mom' },
|
||||
{ name: 'month_yoy', value: 'month_yoy' },
|
||||
{ name: 'year_yoy', value: 'year_yoy' }
|
||||
]
|
||||
123
frontend/src/views/chart/components/compare/CompareEdit.vue
Normal file
123
frontend/src/views/chart/components/compare/CompareEdit.vue
Normal file
@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form ref="form" :model="compareItem.compareCalc" label-width="80px" size="mini" class="compare-form">
|
||||
<el-form-item :label="$t('chart.compare_date')">
|
||||
<el-select v-model="compareItem.compareCalc.field" :placeholder="$t('chart.pls_select_field')" size="mini" @change="initCompareType">
|
||||
<el-option v-for="field in fieldList" :key="field.id" :label="field.name + '(' + $t('chart.' + field.dateStyle) + ')'" :value="field.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :label="$t('chart.compare_type')">
|
||||
<el-radio-group v-model="compareItem.compareCalc.type">
|
||||
<el-radio v-for="radio in compareList" :key="radio.value" :label="radio.value">{{ $t('chart.' + radio.value) }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :label="$t('chart.compare_data')">
|
||||
<el-radio-group v-model="compareItem.compareCalc.resultData">
|
||||
<el-radio label="sub">{{ $t('chart.data_sub') }}</el-radio>
|
||||
<el-radio label="percent">{{ $t('chart.data_percent') }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :label="$t('chart.compare_calc_expression')">
|
||||
<span v-if="compareItem.compareCalc.resultData === 'sub'" class="exp-style">本期数据 - 上期数据</span>
|
||||
<span v-else-if="compareItem.compareCalc.resultData === 'percent'" class="exp-style">(本期数据 / 上期数据 - 1) * 100%</span>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { compareDayList, compareMonthList, compareYearList } from '@/views/chart/chart/compare'
|
||||
|
||||
export default {
|
||||
name: 'CompareEdit',
|
||||
props: {
|
||||
compareItem: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
chart: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fieldList: [],
|
||||
compareList: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'chart': function() {
|
||||
this.initFieldList()
|
||||
this.initCompareType()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initFieldList()
|
||||
this.initCompareType()
|
||||
},
|
||||
methods: {
|
||||
// 过滤xaxis，extStack所有日期字段
|
||||
initFieldList() {
|
||||
const xAxis = JSON.parse(this.chart.xaxis)
|
||||
const extStack = JSON.parse(this.chart.extStack)
|
||||
const t1 = xAxis.filter(ele => { return ele.deType === 1 })
|
||||
const t2 = extStack.filter(ele => { return ele.deType === 1 })
|
||||
this.fieldList = t1.concat(t2)
|
||||
// 如果没有选中字段，则默认选中第一个
|
||||
if ((!this.compareItem.compareCalc.field || this.compareItem.compareCalc.field === '') && this.fieldList.length > 0) {
|
||||
this.compareItem.compareCalc.field = this.fieldList[0].id
|
||||
}
|
||||
},
|
||||
// 获得不同字段格式对应能计算的同环比列表
|
||||
initCompareType() {
|
||||
const checkedField = this.fieldList.filter(ele => ele.id === this.compareItem.compareCalc.field)
|
||||
if (checkedField && checkedField.length > 0) {
|
||||
switch (checkedField[0].dateStyle) {
|
||||
case 'y':
|
||||
this.compareList = compareYearList
|
||||
break
|
||||
case 'y_M':
|
||||
this.compareList = compareMonthList
|
||||
break
|
||||
case 'y_M_d':
|
||||
this.compareList = compareDayList
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
} else {
|
||||
this.compareList = []
|
||||
}
|
||||
// 如果没有选中一个同环比类型，则默认选中第一个
|
||||
if ((!this.compareItem.compareCalc.type || this.compareItem.compareCalc.type === '' || this.compareItem.compareCalc.type === 'none') && this.compareList.length > 0) {
|
||||
this.compareItem.compareCalc.type = this.compareList[0].value
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-form-item{
|
||||
margin-bottom: 10px!important;
|
||||
}
|
||||
.compare-form >>> .el-form-item__label{
|
||||
font-size: 12px!important;
|
||||
font-weight: 400!important;
|
||||
}
|
||||
.compare-form >>> .el-radio__label{
|
||||
font-size: 12px!important;
|
||||
font-weight: 400!important;
|
||||
}
|
||||
.el-select-dropdown__item >>> span{
|
||||
font-size: 12px!important;
|
||||
}
|
||||
.exp-style{
|
||||
color: #C0C4CC;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
@ -61,7 +61,7 @@
|
||||
<el-dropdown-item :command="beforeDateStyle('y')">{{ $t('chart.y') }}</el-dropdown-item>
|
||||
<el-dropdown-item :command="beforeDateStyle('y_M')">{{ $t('chart.y_M') }}</el-dropdown-item>
|
||||
<el-dropdown-item :command="beforeDateStyle('y_M_d')">{{ $t('chart.y_M_d') }}</el-dropdown-item>
|
||||
<el-dropdown-item :command="beforeDateStyle('H_m_s')">{{ $t('chart.H_m_s') }}</el-dropdown-item>
|
||||
<el-dropdown-item :command="beforeDateStyle('H_m_s')" divided>{{ $t('chart.H_m_s') }}</el-dropdown-item>
|
||||
<el-dropdown-item :command="beforeDateStyle('y_M_d_H_m')">{{ $t('chart.y_M_d_H_m') }}</el-dropdown-item>
|
||||
<el-dropdown-item :command="beforeDateStyle('y_M_d_H_m_s')">{{ $t('chart.y_M_d_H_m_s') }}</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
|
||||
@ -13,7 +13,9 @@
|
||||
<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>
|
||||
<span v-if="chart.type !== 'table-info' && item.summary" class="summary-span">{{ $t('chart.'+item.summary) }}</span>
|
||||
<span v-if="chart.type !== 'table-info' && item.summary" class="summary-span">
|
||||
{{ $t('chart.' + item.summary) }}<span v-if="item.compareCalc.type && item.compareCalc.type !== '' && item.compareCalc.type !== 'none'">-{{ $t('chart.' + item.compareCalc.type) }}</span>
|
||||
</span>
|
||||
</el-tag>
|
||||
<el-dropdown v-else trigger="click" size="mini" @command="clickItem">
|
||||
<span class="el-dropdown-link">
|
||||
@ -30,7 +32,9 @@
|
||||
<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>
|
||||
<span v-if="chart.type !== 'table-info' && item.summary" class="summary-span">{{ $t('chart.'+item.summary) }}</span>
|
||||
<span v-if="chart.type !== 'table-info' && item.summary" class="summary-span">
|
||||
{{ $t('chart.' + item.summary) }}<span v-if="item.compareCalc.type && item.compareCalc.type !== '' && item.compareCalc.type !== 'none'">-{{ $t('chart.' + item.compareCalc.type) }}</span>
|
||||
</span>
|
||||
<i class="el-icon-arrow-down el-icon--right" style="position: absolute;top: 6px;right: 10px;" />
|
||||
</el-tag>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
@ -87,6 +91,25 @@
|
||||
<!-- </el-dropdown-menu>-->
|
||||
<!-- </el-dropdown>-->
|
||||
<!-- </el-dropdown-item>-->
|
||||
|
||||
<!--同比/环比-->
|
||||
<el-dropdown-item v-show="chart.type !== 'table-info'">
|
||||
<el-dropdown placement="right-start" size="mini" style="width: 100%" @command="quickCalc">
|
||||
<span class="el-dropdown-link inner-dropdown-menu">
|
||||
<span>
|
||||
<i class="el-icon-crop" />
|
||||
<span>{{ $t('chart.yoy_label') }}</span>
|
||||
<span class="summary-span-item">({{ !item.compareCalc ? $t('chart.none') : $t('chart.' + item.compareCalc.type) }})</span>
|
||||
</span>
|
||||
<i class="el-icon-arrow-right el-icon--right" />
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item :command="beforeQuickCalc('none')">{{ $t('chart.none') }}</el-dropdown-item>
|
||||
<el-dropdown-item :disabled="disableEditCompare" :command="beforeQuickCalc('setting')">{{ $t('commons.setting') }}...</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</el-dropdown-item>
|
||||
|
||||
<el-dropdown-item :divided="chart.type !== 'table-info'">
|
||||
<el-dropdown placement="right-start" size="mini" style="width: 100%" @command="sort">
|
||||
<span class="el-dropdown-link inner-dropdown-menu">
|
||||
@ -120,6 +143,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { compareItem } from '@/views/chart/chart/compare'
|
||||
|
||||
export default {
|
||||
name: 'QuotaExtItem',
|
||||
props: {
|
||||
@ -142,12 +167,43 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
compareItem: compareItem,
|
||||
disableEditCompare: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'chart.xaxis': function() {
|
||||
this.isEnableCompare()
|
||||
},
|
||||
'chart.extStack': function() {
|
||||
this.isEnableCompare()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
this.init()
|
||||
this.isEnableCompare()
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
if (!this.item.compareCalc) {
|
||||
this.item.compareCalc = JSON.parse(JSON.stringify(this.compareItem))
|
||||
}
|
||||
},
|
||||
isEnableCompare() {
|
||||
const xAxis = JSON.parse(this.chart.xaxis)
|
||||
const extStack = JSON.parse(this.chart.extStack)
|
||||
const t1 = xAxis.filter(ele => {
|
||||
return ele.deType === 1
|
||||
})
|
||||
const t2 = extStack.filter(ele => {
|
||||
return ele.deType === 1
|
||||
})
|
||||
if (t1.length > 0 || t2.length > 0) {
|
||||
this.disableEditCompare = false
|
||||
} else {
|
||||
this.disableEditCompare = true
|
||||
}
|
||||
},
|
||||
clickItem(param) {
|
||||
if (!param) {
|
||||
return
|
||||
@ -195,7 +251,17 @@ export default {
|
||||
},
|
||||
|
||||
quickCalc(param) {
|
||||
|
||||
switch (param.type) {
|
||||
case 'none':
|
||||
this.item.compareCalc.type = 'none'
|
||||
this.$emit('onQuotaItemChange', this.item)
|
||||
break
|
||||
case 'setting':
|
||||
this.editCompare()
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
},
|
||||
beforeQuickCalc(type) {
|
||||
return {
|
||||
@ -227,6 +293,12 @@ export default {
|
||||
this.item.index = this.index
|
||||
this.item.filterType = 'quotaExt'
|
||||
this.$emit('editItemFilter', this.item)
|
||||
},
|
||||
|
||||
editCompare() {
|
||||
this.item.index = this.index
|
||||
this.item.calcType = 'quotaExt'
|
||||
this.$emit('editItemCompare', this.item)
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -264,7 +336,7 @@ export default {
|
||||
margin-left: 4px;
|
||||
color: #878d9f;
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
right: 25px;
|
||||
}
|
||||
|
||||
.inner-dropdown-menu{
|
||||
@ -276,7 +348,7 @@ export default {
|
||||
|
||||
.item-span-style{
|
||||
display: inline-block;
|
||||
width: 70px;
|
||||
width: 50px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
|
||||
@ -13,7 +13,9 @@
|
||||
<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>
|
||||
<span v-if="chart.type !== 'table-info' && item.summary" class="summary-span">{{ $t('chart.'+item.summary) }}</span>
|
||||
<span v-if="chart.type !== 'table-info' && item.summary" class="summary-span">
|
||||
{{ $t('chart.' + item.summary) }}<span v-if="item.compareCalc.type && item.compareCalc.type !== '' && item.compareCalc.type !== 'none'">-{{ $t('chart.' + item.compareCalc.type) }}</span>
|
||||
</span>
|
||||
</el-tag>
|
||||
<el-dropdown v-else trigger="click" size="mini" @command="clickItem">
|
||||
<span class="el-dropdown-link">
|
||||
@ -30,7 +32,9 @@
|
||||
<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>
|
||||
<span v-if="chart.type !== 'table-info' && item.summary" class="summary-span">{{ $t('chart.'+item.summary) }}</span>
|
||||
<span v-if="chart.type !== 'table-info' && item.summary" class="summary-span">
|
||||
{{ $t('chart.' + item.summary) }}<span v-if="item.compareCalc.type && item.compareCalc.type !== '' && item.compareCalc.type !== 'none'">-{{ $t('chart.' + item.compareCalc.type) }}</span>
|
||||
</span>
|
||||
<i class="el-icon-arrow-down el-icon--right" style="position: absolute;top: 6px;right: 10px;" />
|
||||
</el-tag>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
@ -87,6 +91,25 @@
|
||||
<!-- </el-dropdown-menu>-->
|
||||
<!-- </el-dropdown>-->
|
||||
<!-- </el-dropdown-item>-->
|
||||
|
||||
<!--同比/环比-->
|
||||
<el-dropdown-item v-show="chart.type !== 'table-info'">
|
||||
<el-dropdown placement="right-start" size="mini" style="width: 100%" @command="quickCalc">
|
||||
<span class="el-dropdown-link inner-dropdown-menu">
|
||||
<span>
|
||||
<i class="el-icon-crop" />
|
||||
<span>{{ $t('chart.yoy_label') }}</span>
|
||||
<span class="summary-span-item">({{ !item.compareCalc ? $t('chart.none') : $t('chart.' + item.compareCalc.type) }})</span>
|
||||
</span>
|
||||
<i class="el-icon-arrow-right el-icon--right" />
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item :command="beforeQuickCalc('none')">{{ $t('chart.none') }}</el-dropdown-item>
|
||||
<el-dropdown-item :disabled="disableEditCompare" :command="beforeQuickCalc('setting')">{{ $t('commons.setting') }}...</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</el-dropdown-item>
|
||||
|
||||
<el-dropdown-item :divided="chart.type !== 'table-info'">
|
||||
<el-dropdown placement="right-start" size="mini" style="width: 100%" @command="sort">
|
||||
<span class="el-dropdown-link inner-dropdown-menu">
|
||||
@ -120,6 +143,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { compareItem } from '@/views/chart/chart/compare'
|
||||
|
||||
export default {
|
||||
name: 'QuotaItem',
|
||||
props: {
|
||||
@ -142,12 +167,43 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
compareItem: compareItem,
|
||||
disableEditCompare: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'chart.xaxis': function() {
|
||||
this.isEnableCompare()
|
||||
},
|
||||
'chart.extStack': function() {
|
||||
this.isEnableCompare()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
this.init()
|
||||
this.isEnableCompare()
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
if (!this.item.compareCalc) {
|
||||
this.item.compareCalc = JSON.parse(JSON.stringify(this.compareItem))
|
||||
}
|
||||
},
|
||||
isEnableCompare() {
|
||||
const xAxis = JSON.parse(this.chart.xaxis)
|
||||
const extStack = JSON.parse(this.chart.extStack)
|
||||
const t1 = xAxis.filter(ele => {
|
||||
return ele.deType === 1
|
||||
})
|
||||
const t2 = extStack.filter(ele => {
|
||||
return ele.deType === 1
|
||||
})
|
||||
if (t1.length > 0 || t2.length > 0) {
|
||||
this.disableEditCompare = false
|
||||
} else {
|
||||
this.disableEditCompare = true
|
||||
}
|
||||
},
|
||||
clickItem(param) {
|
||||
if (!param) {
|
||||
return
|
||||
@ -195,7 +251,17 @@ export default {
|
||||
},
|
||||
|
||||
quickCalc(param) {
|
||||
|
||||
switch (param.type) {
|
||||
case 'none':
|
||||
this.item.compareCalc.type = 'none'
|
||||
this.$emit('onQuotaItemChange', this.item)
|
||||
break
|
||||
case 'setting':
|
||||
this.editCompare()
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
},
|
||||
beforeQuickCalc(type) {
|
||||
return {
|
||||
@ -227,6 +293,12 @@ export default {
|
||||
this.item.index = this.index
|
||||
this.item.filterType = 'quota'
|
||||
this.$emit('editItemFilter', this.item)
|
||||
},
|
||||
|
||||
editCompare() {
|
||||
this.item.index = this.index
|
||||
this.item.calcType = 'quota'
|
||||
this.$emit('editItemCompare', this.item)
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -264,7 +336,7 @@ export default {
|
||||
margin-left: 4px;
|
||||
color: #878d9f;
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
right: 25px;
|
||||
}
|
||||
|
||||
.inner-dropdown-menu{
|
||||
@ -276,7 +348,7 @@ export default {
|
||||
|
||||
.item-span-style{
|
||||
display: inline-block;
|
||||
width: 70px;
|
||||
width: 50px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
|
||||
@ -330,6 +330,7 @@
|
||||
@onQuotaItemRemove="quotaItemRemove"
|
||||
@editItemFilter="showQuotaEditFilter"
|
||||
@onNameEdit="showRename"
|
||||
@editItemCompare="showQuotaEditCompare"
|
||||
/>
|
||||
</transition-group>
|
||||
</draggable>
|
||||
@ -365,6 +366,7 @@
|
||||
@onQuotaItemRemove="quotaItemRemove"
|
||||
@editItemFilter="showQuotaEditFilter"
|
||||
@onNameEdit="showRename"
|
||||
@editItemCompare="showQuotaEditCompare"
|
||||
/>
|
||||
</transition-group>
|
||||
</draggable>
|
||||
@ -858,8 +860,8 @@
|
||||
<p style="margin-top: 10px;color:#F56C6C;font-size: 12px;">{{ $t('chart.change_ds_tip') }}</p>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="closeChangeChart">{{ $t('chart.cancel') }}</el-button>
|
||||
<el-button type="primary" size="mini" :disabled="!changeTable || !changeTable.id" @click="changeChart">{{
|
||||
$t('chart.confirm') }}
|
||||
<el-button type="primary" size="mini" :disabled="!changeTable || !changeTable.id" @click="changeChart">
|
||||
{{ $t('chart.confirm') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
@ -881,11 +883,27 @@
|
||||
<el-button size="mini" style="float: right;" @click="closeEditDsField">{{ $t('chart.close') }}</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog
|
||||
v-if="showEditQuotaCompare"
|
||||
v-dialogDrag
|
||||
:title="$t('chart.yoy_setting')"
|
||||
:visible="showEditQuotaCompare"
|
||||
:show-close="false"
|
||||
width="600px"
|
||||
class="dialog-css"
|
||||
>
|
||||
<compare-edit :compare-item="quotaItemCompare" :chart="chart" />
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="closeQuotaEditCompare">{{ $t('chart.cancel') }}</el-button>
|
||||
<el-button type="primary" size="mini" @click="saveQuotaEditCompare">{{ $t('chart.confirm') }}</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ajaxGetData, ajaxGetDataOnly, post } from '@/api/chart/chart'
|
||||
import { ajaxGetDataOnly, post } from '@/api/chart/chart'
|
||||
import draggable from 'vuedraggable'
|
||||
import DimensionItem from '../components/drag-item/DimensionItem'
|
||||
import QuotaItem from '../components/drag-item/QuotaItem'
|
||||
@ -904,12 +922,12 @@ import {
|
||||
DEFAULT_LABEL,
|
||||
DEFAULT_LEGEND_STYLE,
|
||||
DEFAULT_SIZE,
|
||||
DEFAULT_SPLIT,
|
||||
DEFAULT_TITLE_STYLE,
|
||||
DEFAULT_TOOLTIP,
|
||||
DEFAULT_XAXIS_STYLE,
|
||||
DEFAULT_YAXIS_STYLE,
|
||||
DEFAULT_SPLIT,
|
||||
DEFAULT_YAXIS_EXT_STYLE
|
||||
DEFAULT_YAXIS_EXT_STYLE,
|
||||
DEFAULT_YAXIS_STYLE
|
||||
} from '../chart/chart'
|
||||
import ColorSelector from '../components/shape-attr/ColorSelector'
|
||||
import SizeSelector from '../components/shape-attr/SizeSelector'
|
||||
@ -942,10 +960,13 @@ import YAxisSelectorAntV from '@/views/chart/components/component-style/YAxisSel
|
||||
import YAxisExtSelectorAntV from '@/views/chart/components/component-style/YAxisExtSelectorAntV'
|
||||
import SizeSelectorAntV from '@/views/chart/components/shape-attr/SizeSelectorAntV'
|
||||
import SplitSelectorAntV from '@/views/chart/components/component-style/SplitSelectorAntV'
|
||||
import CompareEdit from '@/views/chart/components/compare/CompareEdit'
|
||||
import { compareItem } from '@/views/chart/chart/compare'
|
||||
|
||||
export default {
|
||||
name: 'ChartEdit',
|
||||
components: {
|
||||
CompareEdit,
|
||||
SplitSelectorAntV,
|
||||
SizeSelectorAntV,
|
||||
YAxisExtSelectorAntV,
|
||||
@ -1071,7 +1092,9 @@ export default {
|
||||
{ name: 'ECharts', value: 'echarts' }
|
||||
],
|
||||
drill: false,
|
||||
hasEdit: false
|
||||
hasEdit: false,
|
||||
quotaItemCompare: {},
|
||||
showEditQuotaCompare: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -1217,6 +1240,9 @@ export default {
|
||||
if (!ele.filter) {
|
||||
ele.filter = []
|
||||
}
|
||||
if (!ele.compareCalc) {
|
||||
ele.compareCalc = compareItem
|
||||
}
|
||||
})
|
||||
if (view.type === 'chart-mix') {
|
||||
view.yaxisExt.forEach(function(ele) {
|
||||
@ -1489,12 +1515,6 @@ export default {
|
||||
},
|
||||
|
||||
quotaItemChange(item) {
|
||||
// 更新item
|
||||
// this.view.yaxis.forEach(function(ele) {
|
||||
// if (ele.id === item.id) {
|
||||
// ele.summary = item.summary
|
||||
// }
|
||||
// })
|
||||
this.calcData(true)
|
||||
},
|
||||
|
||||
@ -1673,6 +1693,24 @@ export default {
|
||||
// this.itemForm = {}
|
||||
},
|
||||
|
||||
showQuotaEditCompare(item) {
|
||||
this.quotaItemCompare = JSON.parse(JSON.stringify(item))
|
||||
this.showEditQuotaCompare = true
|
||||
},
|
||||
closeQuotaEditCompare() {
|
||||
this.showEditQuotaCompare = false
|
||||
},
|
||||
saveQuotaEditCompare() {
|
||||
// 更新指标
|
||||
if (this.quotaItemCompare.calcType === 'quota') {
|
||||
this.view.yaxis[this.quotaItemCompare.index].compareCalc = this.quotaItemCompare.compareCalc
|
||||
} else if (this.quotaItemCompare.calcType === 'quotaExt') {
|
||||
this.view.yaxisExt[this.quotaItemCompare.index].compareCalc = this.quotaItemCompare.compareCalc
|
||||
}
|
||||
this.calcData(true)
|
||||
this.closeQuotaEditCompare()
|
||||
},
|
||||
|
||||
showTab() {
|
||||
this.tabStatus = true
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user