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

Merge branch 'dev' into pr@dev@excel

Browse Source
This commit is contained in:
taojinlong 2021-07-21 15:09:48 +08:00
commit 403350e3b9
17 changed files with 865 additions and 538 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
backend/src/main/java/io/dataease/dto/chart/ChartCustomFilterItemDTO.java Normal file
View File

@ -0,0 +1,18 @@
package io.dataease.dto.chart;
import lombok.Getter;
import lombok.Setter;
import java.io.Serializable;
/**
* @Author gin
* @Date 2021/7/20 11:34 上午
*/
@Getter
@Setter
public class ChartCustomFilterItemDTO implements Serializable {
private String fieldId;
private String term;
private String value;
}

18
backend/src/main/java/io/dataease/dto/chart/ChartFieldCustomFilterDTO.java Normal file
View File

@ -0,0 +1,18 @@
package io.dataease.dto.chart;
import io.dataease.base.domain.DatasetTableField;
import lombok.Getter;
import lombok.Setter;
import java.io.Serializable;
import java.util.List;
/**
* @Author gin
* @Date 2021/7/20 11:43 上午
*/
@Getter
@Setter
public class ChartFieldCustomFilterDTO implements Serializable {
private List<ChartCustomFilterItemDTO> filter;
}

44
backend/src/main/java/io/dataease/service/chart/ChartViewService.java
View File

@ -134,23 +134,35 @@ public class ChartViewService {
}.getType());
List<ChartViewFieldDTO> yAxis = new Gson().fromJson(view.getYAxis(), new TypeToken<List<ChartViewFieldDTO>>() {
}.getType());
List<ChartCustomFilterDTO> customFilter = new Gson().fromJson(view.getCustomFilter(), new TypeToken<List<ChartCustomFilterDTO>>() {
List<ChartFieldCustomFilterDTO> fieldCustomFilter = new Gson().fromJson(view.getCustomFilter(), new TypeToken<List<ChartFieldCustomFilterDTO>>() {
}.getType());
customFilter.forEach(ele -> ele.setField(dataSetTableFieldsService.get(ele.getFieldId())));
List<ChartCustomFilterDTO> customFilter = fieldCustomFilter.stream().map(ele -> {
ChartCustomFilterDTO dto = new ChartCustomFilterDTO();
ele.getFilter().forEach(f -> {
BeanUtils.copyBean(dto, f);
dto.setField(dataSetTableFieldsService.get(f.getFieldId()));
});
return dto;
}).collect(Collectors.toList());
if (StringUtils.equalsIgnoreCase("text", view.getType()) || StringUtils.equalsIgnoreCase("gauge", view.getType())) {
xAxis = new ArrayList<>();
if (CollectionUtils.isEmpty(yAxis)) {
ChartViewDTO dto = new ChartViewDTO();
BeanUtils.copyBean(dto, view);
return dto;
}
} else {
if (CollectionUtils.isEmpty(xAxis) || CollectionUtils.isEmpty(yAxis)) {
ChartViewDTO dto = new ChartViewDTO();
BeanUtils.copyBean(dto, view);
return dto;
}
// if (StringUtils.equalsIgnoreCase("text", view.getType()) || StringUtils.equalsIgnoreCase("gauge", view.getType())) {
// xAxis = new ArrayList<>();
// if (CollectionUtils.isEmpty(yAxis)) {
// ChartViewDTO dto = new ChartViewDTO();
// BeanUtils.copyBean(dto, view);
// return dto;
// }
// } else {
// if (CollectionUtils.isEmpty(xAxis) || CollectionUtils.isEmpty(yAxis)) {
// ChartViewDTO dto = new ChartViewDTO();
// BeanUtils.copyBean(dto, view);
// return dto;
// }
// }
if (CollectionUtils.isEmpty(xAxis) && CollectionUtils.isEmpty(yAxis)) {
ChartViewDTO dto = new ChartViewDTO();
BeanUtils.copyBean(dto, view);
return dto;
}
// 过滤来自仪表板的条件
@ -306,7 +318,7 @@ public class ChartViewService {
// table组件
List<ChartViewFieldDTO> fields = new ArrayList<>();
List<Map<String, Object>> tableRow = new ArrayList<>();
if (ObjectUtils.isNotEmpty(xAxis)) {
if (ObjectUtils.isNotEmpty(xAxis) && !StringUtils.equalsIgnoreCase("text", view.getType()) && !StringUtils.equalsIgnoreCase("gauge", view.getType())) {
fields.addAll(xAxis);
}
fields.addAll(yAxis);

1
frontend/src/api/chart/chart.js
View File

@ -15,6 +15,7 @@ export function ajaxGetData(id, data) {
method: 'post',
loading: true,
hideMsg: true,
timeout: 30000,
data
})
}

11
frontend/src/api/panel/panel.js
View File

@ -22,6 +22,7 @@ export function querySubject(data) {
url: '/panel/subject/query',
method: 'post',
loading: true,
timeout: 30000,
data
})
}
@ -30,6 +31,7 @@ export function querySubjectWithGroup(data) {
return request({
url: '/panel/subject/querySubjectWithGroup',
method: 'post',
timeout: 30000,
data
})
}
@ -56,6 +58,7 @@ export function viewData(id, data) {
return request({
url: '/chart/view/getData/' + id,
method: 'post',
timeout: 30000,
hideMsg: true,
data
})
@ -64,6 +67,7 @@ export function panelSave(data) {
return request({
url: 'panel/group/save',
method: 'post',
timeout: 30000,
loading: true,
data
})
@ -72,7 +76,8 @@ export function findOne(id) {
return request({
url: 'panel/group/findOne/' + id,
method: 'get',
loading: true
loading: true,
timeout: 30000
})
}
@ -87,6 +92,7 @@ export function getPreviewData(data) {
return request({
url: '/panel/table/getPreviewData',
method: 'post',
timeout: 30000,
data
})
}
@ -125,6 +131,7 @@ export function get(url) {
export function delGroup(groupId) {
return request({
url: '/panel/group/deleteCircle/' + groupId,
method: 'post'
method: 'post',
timeout: 30000
})
}

17
frontend/src/lang/en.js
View File

@ -598,7 +598,7 @@ export default {
chart_type: 'Chart Type',
shape_attr: 'Attribute',
module_style: 'Style',
result_filter: 'Results Filter',
result_filter: 'Filters',
x_axis: 'Horizontal axis',
y_axis: 'Longitudinal axis',
chart: 'Chart',
@ -804,7 +804,20 @@ export default {
color_energy: 'Energy',
color_red: 'Red',
color_fast: 'Fast',
color_spiritual: 'Spiritual'
color_spiritual: 'Spiritual',
chart_data: 'Data',
chart_style: 'Style',
drag_block_type_axis: 'Type Axis',
drag_block_value_axis: 'Value Axis',
drag_block_table_data_column: 'Data Column',
drag_block_pie_angel: 'Sector Angle',
drag_block_pie_label: 'Sector Label',
drag_block_gauge_angel: 'Pointer Angle',
drag_block_label_value: 'Value',
drag_block_funnel_width: 'Funnel Width',
drag_block_funnel_split: 'Funnel Split',
drag_block_radar_length: 'Branch Length',
drag_block_radar_label: 'Branch Label'
},
dataset: {
sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default',

17
frontend/src/lang/tw.js
View File

@ -598,7 +598,7 @@ export default {
chart_type: '圖表類型',
shape_attr: '圖形屬性',
module_style: '組件樣式',
result_filter: '結果過濾器',
result_filter: '過濾器',
x_axis: '橫軸',
y_axis: '縱軸',
chart: '視圖',
@ -804,7 +804,20 @@ export default {
color_fast: '輕快',
color_spiritual: '靈動',
chart_details: '视图明细',
export_details: '导出明细'
export_details: '导出明细',
chart_data: '數據',
chart_style: '樣式',
drag_block_type_axis: '類別軸',
drag_block_value_axis: '值軸',
drag_block_table_data_column: '數據列',
drag_block_pie_angel: '扇區角度',
drag_block_pie_label: '扇區標簽',
drag_block_gauge_angel: '指針角度',
drag_block_label_value: '值',
drag_block_funnel_width: '漏鬥層寬',
drag_block_funnel_split: '漏鬥分層',
drag_block_radar_length: '分支長度',
drag_block_radar_label: '分支標簽'
},
dataset: {
sheet_warn: '有多個sheet頁面，默認抽取第一個',

17
frontend/src/lang/zh.js
View File

@ -598,7 +598,7 @@ export default {
chart_type: '图表类型',
shape_attr: '图形属性',
module_style: '组件样式',
result_filter: '结果过滤器',
result_filter: '过滤器',
x_axis: '横轴',
y_axis: '纵轴',
chart: '视图',
@ -804,7 +804,20 @@ export default {
color_fast: '轻快',
color_spiritual: '灵动',
chart_details: '视图明细',
export_details: '导出明细'
export_details: '导出明细',
chart_data: '数据',
chart_style: '样式',
drag_block_type_axis: '类别轴',
drag_block_value_axis: '值轴',
drag_block_table_data_column: '数据列',
drag_block_pie_angel: '扇区角度',
drag_block_pie_label: '扇区标签',
drag_block_gauge_angel: '指针角度',
drag_block_label_value: '值',
drag_block_funnel_width: '漏斗层宽',
drag_block_funnel_split: '漏斗分层',
drag_block_radar_length: '分支长度',
drag_block_radar_label: '分支标签'
},
dataset: {
sheet_warn: '有多个 Sheet 页，默认抽取第一个',

6
frontend/src/settings.js
View File

@ -15,5 +15,9 @@ module.exports = {
* @description Whether show the logo in sidebar
*/
sidebarLogo: false,
showSettings: true
showSettings: true,
interruptTokenContineUrls: [
'/api/sys_msg/list/',
'/dataset/taskLog/list/'
]
}

6
frontend/src/utils/request.js
View File

@ -8,7 +8,7 @@ import i18n from '@/lang'
import { tryShowLoading, tryHideLoading } from './loading'
import { getLinkToken, setLinkToken } from '@/utils/auth'
// import router from '@/router'
const interruptTokenContineUrls = Config.interruptTokenContineUrls
const TokenKey = Config.TokenKey
const RefreshTokenKey = Config.RefreshTokenKey
const LinkTokenKey = Config.LinkTokenKey
@ -16,7 +16,7 @@ const LinkTokenKey = Config.LinkTokenKey
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
// withCredentials: true, // send cookies when cross-domain requests
timeout: 0 // request timeout
timeout: 10000 // request timeout
})
// request interceptor
@ -74,7 +74,7 @@ const checkAuth = response => {
})
}
// token到期后自动续命 刷新token
if (response.headers[RefreshTokenKey]) {
if (response.headers[RefreshTokenKey] && !interruptTokenContineUrls.some(item => response.config.url.indexOf(item) >= 0)) {
const refreshToken = response.headers[RefreshTokenKey]
store.dispatch('user/refreshToken', refreshToken)
}

22
frontend/src/views/chart/components/drag-item/DimensionItem.vue
View File

@ -7,7 +7,7 @@
<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" />
</span>
<span>{{ item.name }}</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">
@ -18,7 +18,8 @@
<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" />
</span>
{{ item.name }}<i class="el-icon-arrow-down el-icon--right" />
<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>
@ -38,9 +39,9 @@
</el-dropdown-menu>
</el-dropdown>
</el-dropdown-item>
<el-dropdown-item icon="el-icon-files" :command="beforeClickItem('filter')">
<span>{{ $t('chart.filter') }}...</span>
</el-dropdown-item>
<!-- <el-dropdown-item icon="el-icon-files" :command="beforeClickItem('filter')">-->
<!-- <span>{{ $t('chart.filter') }}...</span>-->
<!-- </el-dropdown-item>-->
<el-dropdown-item v-show="item.deType === 1" divided>
<el-dropdown placement="right-start" size="mini" style="width: 100%" @command="dateStyle">
@ -192,10 +193,11 @@ export default {
text-align: left;
height: 24px;
line-height: 22px;
display: inline-block;
display: flex;
border-radius: 4px;
box-sizing: border-box;
white-space: nowrap;
width: 159px;
}
.item-axis:hover {
@ -218,4 +220,12 @@ export default {
align-items: center;
width: 100%
}
.item-span-style{
display: inline-block;
width: 100px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
</style>

102
frontend/src/views/chart/components/drag-item/FilterItem.vue
View File

@ -1,13 +1,29 @@
<template>
<div>
<el-dropdown trigger="click" size="mini" @command="clickItem">
<span>
<el-tag v-if="!hasDataPermission('manage',param.privileges)" size="small" class="item-axis">
<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" />
</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">
{{ item.name }}<i class="el-icon-arrow-down el-icon--right" />
<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" />
</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-edit-outline" :command="beforeClickItem('rename')">
<span>{{ $t('chart.show_name_set') }}</span>
<el-dropdown-item icon="el-icon-files" :command="beforeClickItem('filter')">
<span>{{ $t('chart.filter') }}...</span>
</el-dropdown-item>
<el-dropdown-item icon="el-icon-delete" divided :command="beforeClickItem('remove')">
<span>{{ $t('chart.delete') }}</span>
@ -15,25 +31,17 @@
</el-dropdown-menu>
</span>
</el-dropdown>
<el-dialog :title="$t('chart.show_name_set')" :visible="renameItem" :show-close="false" width="30%">
<el-form ref="itemForm" :model="itemForm" :rules="itemFormRules">
<el-form-item :label="$t('commons.name')" prop="name">
<el-input v-model="itemForm.name" size="mini" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button size="mini" @click="closeRename()">{{ $t('chart.cancel') }}</el-button>
<el-button type="primary" size="mini" @click="saveRename(itemForm)">{{ $t('chart.confirm') }}</el-button>
</div>
</el-dialog>
</div>
</span>
</template>
<script>
export default {
name: 'FilterItem',
props: {
param: {
type: Object,
required: true
},
item: {
type: Object,
required: true
@ -45,15 +53,6 @@ export default {
},
data() {
return {
renameItem: false,
itemForm: {
name: ''
},
itemFormRules: {
name: [
{ required: true, message: this.$t('commons.input_content'), trigger: 'change' }
]
}
}
},
mounted() {
@ -64,12 +63,12 @@ export default {
return
}
switch (param.type) {
case 'rename':
this.showRename()
break
case 'remove':
this.removeItem()
break
case 'filter':
this.editFilter()
break
default:
break
}
@ -79,23 +78,9 @@ export default {
type: type
}
},
showRename() {
this.itemForm.name = this.item.name
this.renameItem = true
},
closeRename() {
this.renameItem = false
this.resetRename()
},
saveRename(param) {
this.item.name = param.name
this.$emit('onFilterItemChange', this.item)
this.closeRename()
},
resetRename() {
this.itemForm = {
name: ''
}
editFilter() {
this.item.index = this.index
this.$emit('editItemFilter', this.item)
},
removeItem() {
this.item.index = this.index
@ -112,10 +97,11 @@ export default {
text-align: left;
height: 24px;
line-height: 22px;
display: inline-block;
display: flex;
border-radius: 4px;
box-sizing: border-box;
white-space: nowrap;
width: 159px;
}
.item-axis:hover {
@ -126,4 +112,24 @@ export default {
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>

17
frontend/src/views/chart/components/drag-item/QuotaItem.vue
View File

@ -7,7 +7,7 @@
<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" />
</span>
<span>{{ item.name }}</span>
<span class="item-span-style" :title="item.name">{{ item.name }}</span>
<span v-if="item.summary" class="summary-span">{{ $t('chart.'+item.summary) }}</span>
</el-tag>
<el-dropdown v-else trigger="click" size="mini" @command="clickItem">
@ -19,9 +19,9 @@
<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" />
</span>
<span>{{ item.name }}</span>
<span class="item-span-style" :title="item.name">{{ item.name }}</span>
<span v-if="item.summary" class="summary-span">{{ $t('chart.'+item.summary) }}</span>
<i class="el-icon-arrow-down el-icon--right" />
<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>
@ -196,10 +196,11 @@ export default {
text-align: left;
height: 24px;
line-height: 22px;
display: inline-block;
display: flex;
border-radius: 4px;
box-sizing: border-box;
white-space: nowrap;
width: 159px;
}
.item-axis:hover {
@ -222,4 +223,12 @@ export default {
align-items: center;
width: 100%
}
.item-span-style{
display: inline-block;
width: 80px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
</style>

40
frontend/src/views/chart/components/filter/DimensionFilterEditor.vue
View File

@ -64,26 +64,26 @@ export default {
label: this.$t('chart.filter_not_like')
}]
},
{
label: '',
options: [{
value: 'lt',
label: this.$t('chart.filter_lt')
}, {
value: 'gt',
label: this.$t('chart.filter_gt')
}]
},
{
label: '',
options: [{
value: 'le',
label: this.$t('chart.filter_le')
}, {
value: 'ge',
label: this.$t('chart.filter_ge')
}]
},
// {
// label: '',
// options: [{
// value: 'lt',
// label: this.$t('chart.filter_lt')
// }, {
// value: 'gt',
// label: this.$t('chart.filter_gt')
// }]
// },
// {
// label: '',
// options: [{
// value: 'le',
// label: this.$t('chart.filter_le')
// }, {
// value: 'ge',
// label: this.$t('chart.filter_ge')
// }]
// },
{
label: '',
options: [{

20
frontend/src/views/chart/components/filter/QuotaFilterEditor.vue
View File

@ -54,16 +54,16 @@ export default {
label: this.$t('chart.filter_not_eq')
}]
},
{
label: '',
options: [{
value: 'like',
label: this.$t('chart.filter_like')
}, {
value: 'not like',
label: this.$t('chart.filter_not_like')
}]
},
// {
// label: '',
// options: [{
// value: 'like',
// label: this.$t('chart.filter_like')
// }, {
// value: 'not like',
// label: this.$t('chart.filter_not_like')
// }]
// },
{
label: '',
options: [{

227
frontend/src/views/chart/components/filter/ResultFilterEditor.vue
View File

@ -2,26 +2,11 @@
<el-col>
<el-button icon="el-icon-plus" circle size="mini" style="margin-bottom: 10px;" @click="addFilter" />
<div style="max-height: 50vh;overflow-y: auto;">
<el-row v-for="(f,index) in chart.customFilter" :key="index" class="filter-item">
<el-col :span="6">
<el-select v-model="f.fieldId" size="mini" filterable>
<el-option
v-for="item in fields"
:key="item.id"
:label="item.name"
:value="item.id"
>
<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" />
</span>
<span style="float: left; color: #8492a6; font-size: 12px">{{ item.name }}</span>
</el-option>
</el-select>
<el-row v-for="(f,index) in item.filter" :key="index" class="filter-item">
<el-col :span="4">
<span>{{ item.name }}</span>
</el-col>
<el-col :span="6">
<el-col :span="8">
<el-select v-model="f.term" size="mini">
<el-option-group
v-for="(group,idx) in options"
@ -49,7 +34,7 @@
</template>
<script>
import { fieldList } from '../../../../api/dataset/dataset'
// import { fieldList } from '../../../../api/dataset/dataset'
export default {
name: 'ResultFilterEditor',
@ -57,78 +42,162 @@ export default {
chart: {
type: Object,
required: true
},
item: {
type: Object,
required: true
}
},
data() {
return {
options: [{
label: '',
options: [{
value: 'eq',
label: this.$t('chart.filter_eq')
}, {
value: 'not_eq',
label: this.$t('chart.filter_not_eq')
}]
},
{
label: '',
options: [{
value: 'like',
label: this.$t('chart.filter_like')
}, {
value: 'not like',
label: this.$t('chart.filter_not_like')
}]
},
{
label: '',
options: [{
value: 'lt',
label: this.$t('chart.filter_lt')
}, {
value: 'gt',
label: this.$t('chart.filter_gt')
}]
},
{
label: '',
options: [{
value: 'le',
label: this.$t('chart.filter_le')
}, {
value: 'ge',
label: this.$t('chart.filter_ge')
}]
},
{
label: '',
options: [{
value: 'null',
label: this.$t('chart.filter_null')
}, {
value: 'not_null',
label: this.$t('chart.filter_not_null')
}]
}],
fields: []
textOptions: [
{
label: '',
options: [{
value: 'eq',
label: this.$t('chart.filter_eq')
}, {
value: 'not_eq',
label: this.$t('chart.filter_not_eq')
}]
},
{
label: '',
options: [{
value: 'like',
label: this.$t('chart.filter_like')
}, {
value: 'not like',
label: this.$t('chart.filter_not_like')
}]
},
{
label: '',
options: [{
value: 'null',
label: this.$t('chart.filter_null')
}, {
value: 'not_null',
label: this.$t('chart.filter_not_null')
}]
}
],
dateOptions: [
{
label: '',
options: [{
value: 'eq',
label: this.$t('chart.filter_eq')
}, {
value: 'not_eq',
label: this.$t('chart.filter_not_eq')
}]
},
{
label: '',
options: [{
value: 'lt',
label: this.$t('chart.filter_lt')
}, {
value: 'gt',
label: this.$t('chart.filter_gt')
}]
},
{
label: '',
options: [{
value: 'le',
label: this.$t('chart.filter_le')
}, {
value: 'ge',
label: this.$t('chart.filter_ge')
}]
},
{
label: '',
options: [{
value: 'null',
label: this.$t('chart.filter_null')
}, {
value: 'not_null',
label: this.$t('chart.filter_not_null')
}]
}
],
valueOptions: [
{
label: '',
options: [{
value: 'eq',
label: this.$t('chart.filter_eq')
}, {
value: 'not_eq',
label: this.$t('chart.filter_not_eq')
}]
},
{
label: '',
options: [{
value: 'lt',
label: this.$t('chart.filter_lt')
}, {
value: 'gt',
label: this.$t('chart.filter_gt')
}]
},
{
label: '',
options: [{
value: 'le',
label: this.$t('chart.filter_le')
}, {
value: 'ge',
label: this.$t('chart.filter_ge')
}]
},
{
label: '',
options: [{
value: 'null',
label: this.$t('chart.filter_null')
}, {
value: 'not_null',
label: this.$t('chart.filter_not_null')
}]
}
],
options: []
}
},
watch: {
'item': function() {
this.initOptions()
}
},
mounted() {
fieldList(this.chart.tableId).then(response => {
this.fields = response.data
})
this.initOptions()
},
methods: {
initOptions() {
if (this.item) {
if (this.item.deType === 0 || this.item.deType === 5) {
this.options = JSON.parse(JSON.stringify(this.textOptions))
} else if (this.item.deType === 1) {
this.options = JSON.parse(JSON.stringify(this.dateOptions))
} else {
this.options = JSON.parse(JSON.stringify(this.valueOptions))
}
}
},
addFilter() {
this.chart.customFilter.push({
fieldId: '',
this.item.filter.push({
fieldId: this.item.id,
term: 'eq',
value: ''
})
},
removeFilter(index) {
this.chart.customFilter.splice(index, 1)
this.item.filter.splice(index, 1)
}
}
}
@ -157,8 +226,4 @@ export default {
display: inline-block;
width: 80px!important;
}
.el-select-dropdown__item{
padding: 0 20px;
font-size: 12px;
}
</style>

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

@ -13,9 +13,9 @@
<span slot="reference" style="line-height: 40px;cursor: pointer;">{{ view.name }}</span>
</el-popover>
<span style="float: right;line-height: 40px;">
<el-button v-if="hasDataPermission('manage',param.privileges)" size="mini" @click="changeDs">
{{ $t('chart.change_ds') }}
</el-button>
<!-- <el-button v-if="hasDataPermission('manage',param.privileges)" size="mini" @click="changeDs">-->
<!-- {{ $t('chart.change_ds') }}-->
<!-- </el-button>-->
<el-button size="mini" @click="closeEdit">
{{ $t('commons.save') }}
</el-button>
@ -26,259 +26,303 @@
</span>
</el-row>
<el-row class="view-panel">
<el-col
style="height: 100%;width: 20%;min-width: 180px;max-width:220px;border: 1px solid #E6E6E6;border-left: 0 solid;"
>
<div style="display: flex;align-items: center;justify-content: center;padding: 6px;">
<el-input
v-model="searchField"
size="mini"
:placeholder="$t('chart.search')"
prefix-icon="el-icon-search"
clearable
/>
<el-button :disabled="!table || !hasDataPermission('manage',table.privileges)" icon="el-icon-setting" type="text" size="mini" style="float: right;width: 20px;margin-left: 6px;" @click="editField" />
</div>
<div style="border-bottom: 1px solid #E6E6E6;" class="padding-lr field-height">
<span>{{ $t('chart.dimension') }}</span>
<draggable
v-model="dimensionData"
:options="{group:{name: 'dimension',pull:'clone'},sort: true}"
animation="300"
:move="onMove"
class="drag-list"
:disabled="!hasDataPermission('manage',param.privileges)"
@end="end1"
@start="start1"
>
<transition-group>
<span v-for="item in dimensionData" :key="item.id" class="item" :title="item.name">
<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" />
{{ item.name }}
</span>
</transition-group>
</draggable>
</div>
<div class="padding-lr field-height">
<span>{{ $t('chart.quota') }}</span>
<draggable
v-model="quotaData"
:options="{group:{name: 'quota',pull:'clone'},sort: true}"
animation="300"
:move="onMove"
class="drag-list"
:disabled="!hasDataPermission('manage',param.privileges)"
@end="end1"
@start="start1"
>
<transition-group>
<span v-for="item in quotaData" :key="item.id" class="item" :title="item.name">
<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" />
<span>{{ item.name }}</span>
</span>
</transition-group>
</draggable>
</div>
</el-col>
<el-tabs type="card" :stretch="true" class="tab-header">
<el-tab-pane :label="$t('chart.chart_data')" class="padding-tab" style="width: 360px">
<el-row class="view-panel">
<el-col
style="width: 180px;border-right: 1px solid #E6E6E6;"
>
<div style="display: flex;align-items: center;justify-content: center;padding: 6px;">
<el-input
v-model="searchField"
size="mini"
:placeholder="$t('chart.search')"
prefix-icon="el-icon-search"
clearable
/>
<el-button :title="$t('dataset.edit_field')" :disabled="!table || !hasDataPermission('manage',table.privileges)" icon="el-icon-setting" type="text" size="mini" style="float: right;width: 20px;margin-left: 4px;" @click="editField" />
<el-button :title="$t('chart.change_ds')" :disabled="!hasDataPermission('manage',param.privileges)" icon="el-icon-refresh" type="text" size="mini" style="float: right;width: 20px;margin-left: 4px;" @click="changeDs" />
</div>
<div class="padding-lr field-height">
<span>{{ $t('chart.dimension') }}</span>
<draggable
v-model="dimensionData"
:options="{group:{name: 'drag',pull:'clone'},sort: true}"
animation="300"
:move="onMove"
class="drag-list"
:disabled="!hasDataPermission('manage',param.privileges)"
@add="moveToDimension"
>
<transition-group>
<span v-for="item in dimensionData" :key="item.id" class="item" :title="item.name">
<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" />
{{ item.name }}
</span>
</transition-group>
</draggable>
</div>
<div class="padding-lr field-height">
<span>{{ $t('chart.quota') }}</span>
<draggable
v-model="quotaData"
:options="{group:{name: 'drag',pull:'clone'},sort: true}"
animation="300"
:move="onMove"
class="drag-list"
:disabled="!hasDataPermission('manage',param.privileges)"
@add="moveToQuota"
>
<transition-group>
<span v-for="item in quotaData" :key="item.id" class="item" :title="item.name">
<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" />
<span>{{ item.name }}</span>
</span>
</transition-group>
</draggable>
</div>
</el-col>
<el-col
style="height: 100%;width: 30%;min-width: 200px;max-width:220px;border: 1px solid #E6E6E6;border-left: 0 solid;"
>
<!-- <div style="border-bottom: 1px solid #E6E6E6;overflow-y:hidden;height: 62px;" class="padding-lr">-->
<!-- <el-row>-->
<!-- <span>{{ $t('chart.title') }}</span>-->
<!-- <el-button style="float: right;padding: 0;margin: 8px 0 0 0;font-size: 12px;" type="text" @click="save">{{ $t('chart.confirm') }}</el-button>-->
<!-- </el-row>-->
<!-- <el-form>-->
<!-- <el-form-item class="form-item">-->
<!-- <el-input-->
<!-- v-model="view.title"-->
<!-- size="mini"-->
<!-- :placeholder="$t('chart.title')"-->
<!-- prefix-icon="el-icon-search"-->
<!-- clearable-->
<!-- />-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- </div>-->
<div style="height: 25vh;overflow:auto" class="padding-lr">
<span>{{ $t('chart.chart_type') }}</span>
<el-row>
<div class="chart-type">
<!--这里要替换好看点的图标，UI标签可以重新定义-->
<el-radio-group
v-model="view.type"
style="width: 100%"
:disabled="!hasDataPermission('manage',param.privileges)"
@change="save(true,'chart',true)"
>
<div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
<el-radio value="table-normal" label="table-normal">
<span :title="$t('chart.chart_table_normal')">
<svg-icon icon-class="table-normal" class="chart-icon" />
<el-col
style="height: 100%;width: 180px;border-right: 1px solid #E6E6E6;"
>
<!-- <div style="border-bottom: 1px solid #E6E6E6;overflow-y:hidden;height: 62px;" class="padding-lr">-->
<!-- <el-row>-->
<!-- <span>{{ $t('chart.title') }}</span>-->
<!-- <el-button style="float: right;padding: 0;margin: 8px 0 0 0;font-size: 12px;" type="text" @click="save">{{ $t('chart.confirm') }}</el-button>-->
<!-- </el-row>-->
<!-- <el-form>-->
<!-- <el-form-item class="form-item">-->
<!-- <el-input-->
<!-- v-model="view.title"-->
<!-- size="mini"-->
<!-- :placeholder="$t('chart.title')"-->
<!-- prefix-icon="el-icon-search"-->
<!-- clearable-->
<!-- />-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- </div>-->
<div style="height: 25vh;overflow:auto" class="padding-lr">
<span>{{ $t('chart.chart_type') }}</span>
<el-row>
<div class="chart-type">
<!--这里要替换好看点的图标，UI标签可以重新定义-->
<el-radio-group
v-model="view.type"
style="width: 100%"
:disabled="!hasDataPermission('manage',param.privileges)"
@change="save(true,'chart',true)"
>
<div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
<el-radio value="table-normal" label="table-normal">
<span :title="$t('chart.chart_table_normal')">
<svg-icon icon-class="table-normal" class="chart-icon" />
</span>
</el-radio>
<el-radio value="text" label="text">
<span :title="$t('chart.chart_card')">
<svg-icon icon-class="text" class="chart-icon" />
</span>
</el-radio>
<el-radio value="bar" label="bar">
<span :title="$t('chart.chart_bar')">
<svg-icon icon-class="bar" class="chart-icon" />
</span>
</el-radio>
<el-radio value="bar-stack" label="bar-stack">
<span :title="$t('chart.chart_bar_stack')">
<svg-icon icon-class="bar-stack" class="chart-icon" />
</span>
</el-radio>
<el-radio value="bar-horizontal" label="bar-horizontal">
<span :title="$t('chart.chart_bar_horizontal')">
<svg-icon icon-class="bar-horizontal" class="chart-icon" />
</span>
</el-radio>
</div>
<div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
<el-radio value="bar-stack-horizontal" label="bar-stack-horizontal">
<span :title="$t('chart.chart_bar_stack_horizontal')">
<svg-icon icon-class="bar-stack-horizontal" class="chart-icon" />
</span>
</el-radio>
<el-radio value="line" label="line">
<span :title="$t('chart.chart_line')">
<svg-icon icon-class="line" class="chart-icon" />
</span>
</el-radio>
<el-radio value="line-stack" label="line-stack">
<span :title="$t('chart.chart_line_stack')">
<svg-icon icon-class="line-stack" class="chart-icon" />
</span>
</el-radio>
<el-radio value="pie" label="pie">
<span :title="$t('chart.chart_pie')">
<svg-icon icon-class="pie" class="chart-icon" />
</span>
</el-radio>
<el-radio value="pie-rose" label="pie-rose">
<span :title="$t('chart.chart_pie_rose')">
<svg-icon icon-class="pie-rose" class="chart-icon" />
</span>
</el-radio>
</div>
<div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
<el-radio value="funnel" label="funnel">
<span :title="$t('chart.chart_funnel')">
<svg-icon icon-class="funnel" class="chart-icon" />
</span>
</el-radio>
<el-radio value="radar" label="radar">
<span :title="$t('chart.chart_radar')">
<svg-icon icon-class="radar" class="chart-icon" />
</span>
</el-radio>
<el-radio value="gauge" label="gauge">
<span :title="$t('chart.chart_gauge')">
<svg-icon icon-class="gauge" class="chart-icon" />
</span>
</el-radio>
<el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
<el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
</div>
</el-radio-group>
</div>
</el-row>
<el-row style="color: #909399;">
<span>
<span v-show="chart.type && (chart.type.includes('pie') || chart.type.includes('funnel') || chart.type.includes('text') || chart.type.includes('gauge'))">
Tips: {{ $t('chart.only_one_quota') }}
</span>
</el-radio>
<el-radio value="text" label="text">
<span :title="$t('chart.chart_card')">
<svg-icon icon-class="text" class="chart-icon" />
<!-- <span v-show="chart.type && (chart.type.includes('text'))">-->
<!-- Tips: {{ $t('chart.only_one_result') }}-->
<!-- </span>-->
<!-- <span v-show="chart.type && chart.type.includes('gauge')">-->
<!-- Tips: {{ $t('chart.only_one_quota') }},{{ $t('chart.only_one_result') }}-->
<!-- </span>-->
</span>
</el-row>
</div>
<div style="overflow:auto;border-top: 1px solid #e6e6e6" class="attr-style">
<el-row style="height: 100%;">
<el-row v-if="chart.type !=='text' && chart.type !== 'gauge'" class="padding-lr">
<span style="width: 80px;text-align: right;">
<span v-if="chart.type.includes('table')">{{ $t('chart.drag_block_table_data_column') }}</span>
<span v-else-if="chart.type.includes('bar') || chart.type.includes('line')">{{ $t('chart.drag_block_type_axis') }}</span>
<span v-else-if="chart.type.includes('pie')">{{ $t('chart.drag_block_pie_label') }}</span>
<span v-else-if="chart.type.includes('funnel')">{{ $t('chart.drag_block_funnel_split') }}</span>
<span v-else-if="chart.type.includes('radar')">{{ $t('chart.drag_block_radar_label') }}</span>
/
<span>{{ $t('chart.dimension') }}</span>
</span>
</el-radio>
<el-radio value="bar" label="bar">
<span :title="$t('chart.chart_bar')">
<svg-icon icon-class="bar" class="chart-icon" />
<draggable
v-model="view.xaxis"
:disabled="!hasDataPermission('manage',param.privileges)"
group="drag"
animation="300"
:move="onMove"
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="addXaxis"
>
<transition-group class="draggable-group">
<dimension-item v-for="(item,index) in view.xaxis" :key="item.id" :param="param" :index="index" :item="item" @onDimensionItemChange="dimensionItemChange" @onDimensionItemRemove="dimensionItemRemove" @editItemFilter="showDimensionEditFilter" @onNameEdit="showRename" />
</transition-group>
</draggable>
</el-row>
<el-row class="padding-lr" style="margin-top: 6px;">
<span style="width: 80px;text-align: right;">
<span v-if="chart.type.includes('table')">{{ $t('chart.drag_block_table_data_column') }}</span>
<span v-else-if="chart.type.includes('bar') || chart.type.includes('line')">{{ $t('chart.drag_block_value_axis') }}</span>
<span v-else-if="chart.type.includes('pie')">{{ $t('chart.drag_block_pie_angel') }}</span>
<span v-else-if="chart.type.includes('funnel')">{{ $t('chart.drag_block_funnel_width') }}</span>
<span v-else-if="chart.type.includes('radar')">{{ $t('chart.drag_block_radar_length') }}</span>
<span v-else-if="chart.type.includes('gauge')">{{ $t('chart.drag_block_gauge_angel') }}</span>
<span v-else-if="chart.type.includes('text')">{{ $t('chart.drag_block_label_value') }}</span>
/
<span>{{ $t('chart.quota') }}</span>
</span>
</el-radio>
<el-radio value="bar-stack" label="bar-stack">
<span :title="$t('chart.chart_bar_stack')">
<svg-icon icon-class="bar-stack" class="chart-icon" />
</span>
</el-radio>
<el-radio value="bar-horizontal" label="bar-horizontal">
<span :title="$t('chart.chart_bar_horizontal')">
<svg-icon icon-class="bar-horizontal" class="chart-icon" />
</span>
</el-radio>
</div>
<div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
<el-radio value="bar-stack-horizontal" label="bar-stack-horizontal">
<span :title="$t('chart.chart_bar_stack_horizontal')">
<svg-icon icon-class="bar-stack-horizontal" class="chart-icon" />
</span>
</el-radio>
<el-radio value="line" label="line">
<span :title="$t('chart.chart_line')">
<svg-icon icon-class="line" class="chart-icon" />
</span>
</el-radio>
<el-radio value="line-stack" label="line-stack">
<span :title="$t('chart.chart_line_stack')">
<svg-icon icon-class="line-stack" class="chart-icon" />
</span>
</el-radio>
<el-radio value="pie" label="pie">
<span :title="$t('chart.chart_pie')">
<svg-icon icon-class="pie" class="chart-icon" />
</span>
</el-radio>
<el-radio value="pie-rose" label="pie-rose">
<span :title="$t('chart.chart_pie_rose')">
<svg-icon icon-class="pie-rose" class="chart-icon" />
</span>
</el-radio>
</div>
<div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
<el-radio value="funnel" label="funnel">
<span :title="$t('chart.chart_funnel')">
<svg-icon icon-class="funnel" class="chart-icon" />
</span>
</el-radio>
<el-radio value="radar" label="radar">
<span :title="$t('chart.chart_radar')">
<svg-icon icon-class="radar" class="chart-icon" />
</span>
</el-radio>
<el-radio value="gauge" label="gauge">
<span :title="$t('chart.chart_gauge')">
<svg-icon icon-class="gauge" class="chart-icon" />
</span>
</el-radio>
<el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
<el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
</div>
</el-radio-group>
</div>
<draggable
v-model="view.yaxis"
:disabled="!hasDataPermission('manage',param.privileges)"
group="drag"
animation="300"
:move="onMove"
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="addYaxis"
>
<transition-group class="draggable-group">
<quota-item v-for="(item,index) in view.yaxis" :key="item.id" :param="param" :index="index" :item="item" @onQuotaItemChange="quotaItemChange" @onQuotaItemRemove="quotaItemRemove" @editItemFilter="showQuotaEditFilter" @onNameEdit="showRename" />
</transition-group>
</draggable>
</el-row>
<div class="padding-lr filter-class" style="margin-top: 6px;">
<span>{{ $t('chart.result_filter') }}</span>
<!-- <el-button :disabled="!hasDataPermission('manage',param.privileges)" size="mini" class="filter-btn-class" @click="showResultFilter">-->
<!-- {{ $t('chart.filter_condition') }}<i class="el-icon-setting el-icon&#45;&#45;right" />-->
<!-- </el-button>-->
<draggable
v-model="view.customFilter"
:disabled="!hasDataPermission('manage',param.privileges)"
group="drag"
animation="300"
:move="onMove"
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"
>
<transition-group class="draggable-group">
<filter-item v-for="(item,index) in view.customFilter" :key="item.id" :param="param" :index="index" :item="item" @onFilterItemRemove="filterItemRemove" @editItemFilter="showEditFilter" />
</transition-group>
</draggable>
</div>
</el-row>
</div>
</el-col>
</el-row>
<el-row style="color: #909399;">
<span>
<span v-show="chart.type && (chart.type.includes('pie') || chart.type.includes('funnel') || chart.type.includes('text') || chart.type.includes('gauge'))">
Tips: {{ $t('chart.only_one_quota') }}
</span>
<!-- <span v-show="chart.type && (chart.type.includes('text'))">-->
<!-- Tips: {{ $t('chart.only_one_result') }}-->
<!-- </span>-->
<!-- <span v-show="chart.type && chart.type.includes('gauge')">-->
<!-- Tips: {{ $t('chart.only_one_quota') }},{{ $t('chart.only_one_result') }}-->
<!-- </span>-->
</span>
</el-row>
</div>
<div style="overflow:auto;border-top: 1px solid #e6e6e6" class="attr-style">
<el-row class="padding-lr">
<span>{{ $t('chart.style_priority') }}</span>
<el-row>
<el-radio-group v-model="view.stylePriority" :disabled="!hasDataPermission('manage',param.privileges)" size="mini" @change="save">
<el-radio label="view"><span>{{ $t('chart.chart') }}</span></el-radio>
<el-radio label="panel"><span>{{ $t('chart.dashboard') }}</span></el-radio>
</el-radio-group>
</el-tab-pane>
<el-tab-pane :label="$t('chart.chart_style')" class="padding-tab" style="width: 360px;">
<div style="overflow:auto;border-right: 1px solid #e6e6e6;height: 100%;" class="attr-style">
<el-row class="padding-lr">
<span>{{ $t('chart.style_priority') }}</span>
<el-row>
<el-radio-group v-model="view.stylePriority" :disabled="!hasDataPermission('manage',param.privileges)" size="mini" @change="save">
<el-radio label="view"><span>{{ $t('chart.chart') }}</span></el-radio>
<el-radio label="panel"><span>{{ $t('chart.dashboard') }}</span></el-radio>
</el-radio-group>
</el-row>
</el-row>
</el-row>
<el-tabs type="card" :stretch="true" class="tab-header">
<el-tab-pane :label="$t('chart.shape_attr')" class="padding-lr">
<color-selector :param="param" class="attr-selector" :chart="chart" @onColorChange="onColorChange" />
<size-selector :param="param" class="attr-selector" :chart="chart" @onSizeChange="onSizeChange" />
<label-selector v-show="!view.type.includes('table') && !view.type.includes('text')" :param="param" class="attr-selector" :chart="chart" @onLabelChange="onLabelChange" />
<tooltip-selector v-show="!view.type.includes('table') && !view.type.includes('text')" :param="param" class="attr-selector" :chart="chart" @onTooltipChange="onTooltipChange" />
</el-tab-pane>
<el-tab-pane :label="$t('chart.module_style')" class="padding-lr">
<x-axis-selector v-show="view.type.includes('bar') || view.type.includes('line')" :param="param" class="attr-selector" :chart="chart" @onChangeXAxisForm="onChangeXAxisForm" />
<y-axis-selector v-show="view.type.includes('bar') || view.type.includes('line')" :param="param" class="attr-selector" :chart="chart" @onChangeYAxisForm="onChangeYAxisForm" />
<split-selector v-show="view.type.includes('radar')" :param="param" class="attr-selector" :chart="chart" @onChangeSplitForm="onChangeSplitForm" />
<title-selector :param="param" class="attr-selector" :chart="chart" @onTextChange="onTextChange" />
<legend-selector v-show="!view.type.includes('table') && !view.type.includes('text')" :param="param" class="attr-selector" :chart="chart" @onLegendChange="onLegendChange" />
<background-color-selector :param="param" class="attr-selector" :chart="chart" @onChangeBackgroundForm="onChangeBackgroundForm" />
</el-tab-pane>
</el-tabs>
</div>
<div style="height:60px;overflow:auto;border-top: 1px solid #e6e6e6" class="padding-lr filter-class">
<span>{{ $t('chart.result_filter') }}</span>
<el-button :disabled="!hasDataPermission('manage',param.privileges)" size="mini" class="filter-btn-class" @click="showResultFilter">
{{ $t('chart.filter_condition') }}<i class="el-icon-setting el-icon--right" />
</el-button>
</div>
</el-col>
<el-row class="padding-lr">
<span>{{ $t('chart.shape_attr') }}</span>
<el-row>
<color-selector :param="param" class="attr-selector" :chart="chart" @onColorChange="onColorChange" />
<size-selector :param="param" class="attr-selector" :chart="chart" @onSizeChange="onSizeChange" />
<label-selector v-show="!view.type.includes('table') && !view.type.includes('text')" :param="param" class="attr-selector" :chart="chart" @onLabelChange="onLabelChange" />
<tooltip-selector v-show="!view.type.includes('table') && !view.type.includes('text')" :param="param" class="attr-selector" :chart="chart" @onTooltipChange="onTooltipChange" />
</el-row>
</el-row>
<el-row class="padding-lr">
<span>{{ $t('chart.module_style') }}</span>
<el-row>
<x-axis-selector v-show="view.type.includes('bar') || view.type.includes('line')" :param="param" class="attr-selector" :chart="chart" @onChangeXAxisForm="onChangeXAxisForm" />
<y-axis-selector v-show="view.type.includes('bar') || view.type.includes('line')" :param="param" class="attr-selector" :chart="chart" @onChangeYAxisForm="onChangeYAxisForm" />
<split-selector v-show="view.type.includes('radar')" :param="param" class="attr-selector" :chart="chart" @onChangeSplitForm="onChangeSplitForm" />
<title-selector :param="param" class="attr-selector" :chart="chart" @onTextChange="onTextChange" />
<legend-selector v-show="!view.type.includes('table') && !view.type.includes('text')" :param="param" class="attr-selector" :chart="chart" @onLegendChange="onLegendChange" />
<background-color-selector :param="param" class="attr-selector" :chart="chart" @onChangeBackgroundForm="onChangeBackgroundForm" />
</el-row>
</el-row>
</div>
</el-tab-pane>
</el-tabs>
<el-col style="height: 100%;min-width: 500px;border-top: 1px solid #E6E6E6;">
<el-row style="width: 100%;height: 100%;" class="padding-lr">
<el-row style="margin-top: 10px;height: 74px;">
<el-row v-if="chart.type !=='text' && chart.type !== 'gauge'" style="display:flex;height: 32px;">
<span style="line-height: 32px;width: 80px;text-align: right;">{{ $t('chart.dimension') }}</span>
<draggable
v-model="view.xaxis"
:disabled="!hasDataPermission('manage',param.privileges)"
group="dimension"
animation="300"
:move="onMove"
style="width:100%;height: 100%;margin:0 10px;border-radius: 4px;border: 1px solid #DCDFE6;overflow-x: auto;display: flex;align-items: center;background-color: white;"
@end="end2"
>
<transition-group class="draggable-group">
<dimension-item v-for="(item,index) in view.xaxis" :key="item.id" :param="param" :index="index" :item="item" @onDimensionItemChange="dimensionItemChange" @onDimensionItemRemove="dimensionItemRemove" @editItemFilter="showDimensionEditFilter" @onNameEdit="showRename" />
</transition-group>
</draggable>
</el-row>
<el-row style="display:flex;height: 32px;margin-top: 10px;">
<span style="line-height: 32px;width: 80px;text-align: right;">{{ $t('chart.quota') }}</span>
<draggable
v-model="view.yaxis"
:disabled="!hasDataPermission('manage',param.privileges)"
group="quota"
animation="300"
:move="onMove"
style="width:100%;height: 100%;margin:0 10px;border-radius: 4px;border: 1px solid #DCDFE6;overflow-x: auto;display: flex;align-items: center;background-color: white;"
@end="end2"
>
<transition-group class="draggable-group">
<quota-item v-for="(item,index) in view.yaxis" :key="item.id" :param="param" :index="index" :item="item" @onQuotaItemChange="quotaItemChange" @onQuotaItemRemove="quotaItemRemove" @editItemFilter="showQuotaEditFilter" @onNameEdit="showRename" />
</transition-group>
</draggable>
</el-row>
</el-row>
<div ref="imageWrapper" style="height: 100%">
<chart-component v-if="httpRequest.status && chart.type && !chart.type.includes('table') && !chart.type.includes('text')" :chart-id="chart.id" :chart="chart" class="chart-class" />
<table-normal v-if="httpRequest.status && chart.type && chart.type.includes('table')" :chart="chart" class="table-class" />
@ -345,7 +389,7 @@
width="800px"
class="dialog-css"
>
<result-filter-editor :chart="chartForFilter" />
<result-filter-editor :chart="chartForFilter" :item="filterItem" />
<div slot="footer" class="dialog-footer">
<el-button size="mini" @click="closeResultFilter">{{ $t('chart.cancel') }}</el-button>
<el-button type="primary" size="mini" @click="saveResultFilter">{{ $t('chart.confirm') }}</el-button>
@ -389,6 +433,7 @@ import { ajaxGetData, post } from '@/api/chart/chart'
import draggable from 'vuedraggable'
import DimensionItem from '../components/drag-item/DimensionItem'
import QuotaItem from '../components/drag-item/QuotaItem'
import FilterItem from '../components/drag-item/FilterItem'
import ResultFilterEditor from '../components/filter/ResultFilterEditor'
import ChartComponent from '../components/ChartComponent'
import bus from '@/utils/bus'
@ -426,7 +471,31 @@ import FieldEdit from '../../dataset/data/FieldEdit'
export default {
name: 'ChartEdit',
components: { FieldEdit, SplitSelector, TableSelector, ResultFilterEditor, LabelNormal, DimensionFilterEditor, TableNormal, DatasetChartDetail, QuotaFilterEditor, BackgroundColorSelector, XAxisSelector, YAxisSelector, TooltipSelector, LabelSelector, LegendSelector, TitleSelector, SizeSelector, ColorSelector, ChartComponent, QuotaItem, DimensionItem, draggable },
components: {
FilterItem,
FieldEdit,
SplitSelector,
TableSelector,
ResultFilterEditor,
LabelNormal,
DimensionFilterEditor,
TableNormal,
DatasetChartDetail,
QuotaFilterEditor,
BackgroundColorSelector,
XAxisSelector,
YAxisSelector,
TooltipSelector,
LabelSelector,
LegendSelector,
TitleSelector,
SizeSelector,
ColorSelector,
ChartComponent,
QuotaItem,
DimensionItem,
draggable
},
props: {
param: {
type: Object,
@ -493,7 +562,8 @@ export default {
changeTable: {},
searchField: '',
editDsField: false,
changeDsTitle: ''
changeDsTitle: '',
filterItem: {}
}
},
computed: {
@ -506,7 +576,7 @@ export default {
watch: {
'param': function() {
if (this.param.optType === 'new') {
//
} else {
this.getData(this.param.id)
}
@ -608,6 +678,11 @@ export default {
if (view.type === 'line-stack' && trigger === 'chart') {
view.customAttr.size.lineArea = true
}
view.customFilter.forEach(function(ele) {
if (ele && !ele.filter) {
ele.filter = []
}
})
view.xaxis = JSON.stringify(view.xaxis)
view.yaxis = JSON.stringify(view.yaxis)
view.customAttr = JSON.stringify(view.customAttr)
@ -760,82 +835,77 @@ export default {
},
// 左边往右边拖动时的事件
start1(e) {
// console.log(e)
e.clone.className = 'item-on-move'
e.item.className = 'item-on-move'
},
end1(e) {
// console.log(e)
e.clone.className = 'item'
e.item.className = 'item'
this.refuseMove(e)
this.removeCheckedKey(e)
this.save(true)
},
// start1(e) {
// // console.log(e)
// e.clone.className = 'item'
// e.item.className = 'item'
// },
// end1(e) {
// // console.log(e)
// e.clone.className = 'item'
// e.item.className = 'item'
// this.refuseMove(e)
// this.removeCheckedKey(e)
// this.save(true)
// },
// 右边往左边拖动时的事件
start2(e) {
// console.log(e)
},
end2(e) {
// console.log(e)
this.removeDuplicateKey(e)
this.save(true)
},
removeCheckedKey(e) {
const that = this
const xItems = this.view.xaxis.filter(function(m) {
return m.id === that.moveId
})
const yItems = this.view.yaxis.filter(function(m) {
return m.id === that.moveId
})
if (xItems && xItems.length > 1) {
this.view.xaxis.splice(e.newDraggableIndex, 1)
}
if (yItems && yItems.length > 1) {
this.view.yaxis.splice(e.newDraggableIndex, 1)
}
},
refuseMove(e) {
const that = this
const xItems = this.dimension.filter(function(m) {
return m.id === that.moveId
})
const yItems = this.quota.filter(function(m) {
return m.id === that.moveId
})
if (xItems && xItems.length > 1) {
this.dimension.splice(e.newDraggableIndex, 1)
}
if (yItems && yItems.length > 1) {
this.quota.splice(e.newDraggableIndex, 1)
}
},
removeDuplicateKey(e) {
const that = this
const xItems = this.dimension.filter(function(m) {
return m.id === that.moveId
})
const yItems = this.quota.filter(function(m) {
return m.id === that.moveId
})
if (xItems && xItems.length > 1) {
this.dimension.splice(e.newDraggableIndex, 1)
}
if (yItems && yItems.length > 1) {
this.quota.splice(e.newDraggableIndex, 1)
}
},
// start2(e) {
// console.log(e)
// },
// end2(e) {
// // console.log(e)
// this.removeDuplicateKey(e)
// this.save(true)
// },
// removeCheckedKey(e) {
// const that = this
// const xItems = this.view.xaxis.filter(function(m) {
// return m.id === that.moveId
// })
// const yItems = this.view.yaxis.filter(function(m) {
// return m.id === that.moveId
// })
// if (xItems && xItems.length > 1) {
// this.view.xaxis.splice(e.newDraggableIndex, 1)
// }
// if (yItems && yItems.length > 1) {
// this.view.yaxis.splice(e.newDraggableIndex, 1)
// }
// },
// refuseMove(e) {
// const that = this
// const xItems = this.dimension.filter(function(m) {
// return m.id === that.moveId
// })
// const yItems = this.quota.filter(function(m) {
// return m.id === that.moveId
// })
// if (xItems && xItems.length > 1) {
// this.dimension.splice(e.newDraggableIndex, 1)
// }
// if (yItems && yItems.length > 1) {
// this.quota.splice(e.newDraggableIndex, 1)
// }
// },
// removeDuplicateKey(e) {
// const that = this
// const xItems = this.dimension.filter(function(m) {
// return m.id === that.moveId
// })
// const yItems = this.quota.filter(function(m) {
// return m.id === that.moveId
// })
// if (xItems && xItems.length > 1) {
// this.dimension.splice(e.newDraggableIndex, 1)
// }
// if (yItems && yItems.length > 1) {
// this.quota.splice(e.newDraggableIndex, 1)
// }
// },
// move回调方法
onMove(e, originalEvent) {
// console.log(e)
this.moveId = e.draggedContext.element.id
// //不允许停靠
// if (e.relatedContext.element.id == 1) return false;
// //不允许拖拽
// if (e.draggedContext.element.id == 4) return false;
// if (e.draggedContext.element.id == 11) return false;
return true
},
@ -962,7 +1032,12 @@ export default {
this.closeQuotaFilter()
},
showResultFilter() {
filterItemRemove(item) {
this.view.customFilter.splice(item.index, 1)
this.save(true)
},
showEditFilter(item) {
this.filterItem = JSON.parse(JSON.stringify(item))
this.chartForFilter = JSON.parse(JSON.stringify(this.view))
this.resultFilterEdit = true
},
@ -970,16 +1045,8 @@ export default {
this.resultFilterEdit = false
},
saveResultFilter() {
for (let i = 0; i < this.chartForFilter.customFilter.length; i++) {
const f = this.chartForFilter.customFilter[i]
if (!f.fieldId || f.fieldId === '') {
this.$message({
message: this.$t('chart.filter_field_can_null'),
type: 'error',
showClose: true
})
return
}
for (let i = 0; i < this.filterItem.filter.length; i++) {
const f = this.filterItem.filter[i]
if (!f.term.includes('null') && (!f.value || f.value === '')) {
this.$message({
message: this.$t('chart.filter_value_can_null'),
@ -989,7 +1056,7 @@ export default {
return
}
}
this.view.customFilter = this.chartForFilter.customFilter
this.view.customFilter[this.filterItem.index].filter = this.filterItem.filter
this.save(true)
this.closeResultFilter()
},
@ -1029,7 +1096,9 @@ export default {
},
resetView() {
this.dimension = []
this.dimensionData = []
this.quota = []
this.quotaData = []
this.view = {
xAxis: [],
yAxis: [],
@ -1046,7 +1115,8 @@ export default {
},
changeDs() {
this.changeDsTitle = this.$t('chart.change_ds') + '[' + this.table.name + ']'
const dialogTitle = (this.table && this.table.name) ? ('[' + this.table.name + ']') : ''
this.changeDsTitle = this.$t('chart.change_ds') + dialogTitle
this.selectTableFlag = true
},
@ -1079,6 +1149,58 @@ export default {
closeEditDsField() {
this.editDsField = false
this.initTableField()
},
// drag
dragCheckType(list, type) {
if (list && list.length > 0) {
for (let i = 0; i < list.length; i++) {
if (list[i].groupType !== type) {
list.splice(i, 1)
}
}
}
},
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)
}
},
addXaxis(e) {
this.dragCheckType(this.view.xaxis, 'd')
this.dragMoveDuplicate(this.view.xaxis, e)
this.save(true)
},
addYaxis(e) {
this.dragCheckType(this.view.yaxis, 'q')
this.dragMoveDuplicate(this.view.yaxis, e)
this.save(true)
},
moveToDimension(e) {
this.dragCheckType(this.dimensionData, 'd')
this.dragMoveDuplicate(this.dimensionData, e)
this.save(true)
},
moveToQuota(e) {
this.dragCheckType(this.quotaData, 'q')
this.dragMoveDuplicate(this.quotaData, e)
this.save(true)
},
addCustomFilter(e) {
// 记录数等自动生成字段不做为过滤条件
if (this.view.customFilter && this.view.customFilter.length > 0) {
for (let i = 0; i < this.view.customFilter.length; i++) {
if (this.view.customFilter[i].id === 'count') {
this.view.customFilter.splice(i, 1)
}
}
}
this.dragMoveDuplicate(this.view.customFilter, e)
this.save(true)
}
}
}
@ -1179,9 +1301,15 @@ export default {
.tab-header>>>.el-tabs__nav-scroll{
padding-left: 0!important;
}
.tab-header>>>.el-tabs__header{
margin: 0!important;
}
.tab-header>>>.el-tabs__content{
height: 100%;
}
.draggable-group {
display: inline-block;
display: block;
width: 100%;
height: calc(100% - 6px);
}
@ -1203,7 +1331,7 @@ export default {
}
.el-radio{
margin:6px;
margin:5px;
}
.el-radio>>>.el-radio__label{
@ -1211,7 +1339,7 @@ export default {
}
.attr-style{
height: calc(100vh - 56px - 25vh - 40px - 62px - 60px - 20px);
height: calc(100vh - 56px - 25vh - 40px - 40px);
}
.attr-selector{
@ -1238,11 +1366,11 @@ export default {
}
.chart-class{
height: calc(100% - 84px);
height: 100%;
padding: 10px;
}
.table-class{
height: calc(100% - 104px);
height: calc(100% - 20px);
margin: 10px;
}
@ -1266,7 +1394,7 @@ export default {
}
.chart-error-class{
text-align: center;
height: calc(100% - 84px);
height: 100%;
display: flex;
align-items: center;
justify-content: center;
@ -1274,5 +1402,15 @@ export default {
}
.field-height{
height: calc(50% - 20px);
border-top: 1px solid #E6E6E6;
}
.padding-tab{
padding: 0;
height: 100%;
}
.collapse-style>>>.el-collapse-item__header{
height: 40px;
line-height: 40px;
padding: 0 0 0 10px;
}
</style>