Skip to content

D
dataease
Unverified 提交 6703d749 authored 作者: Junjun's avatar Junjun 提交者： GitHub
浏览文件
操作

Merge pull request #1883 from dataease/pr@dev@feat_chart_senior

feat: 视图高级设置
上级 e2ceda78 58fd0a56
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 759 行增加 和 182 行删除
backend/src/main/java/io/dataease/base/domain/ChartView.java
浏览文件 @ 6703d749
package io.dataease.base.domain;
import java.io.Serializable;
import io.swagger.annotations.ApiModelProperty;
import lombok.Data;
@Data
public class ChartView implements Serializable {
@ApiModelProperty("ID")
private String id;
@ApiModelProperty("名称")
private String name;
private String title;
private String sceneId;
@ApiModelProperty("数据集ID")
private String tableId;
@ApiModelProperty("图表类型")
private String type;
@ApiModelProperty("渲染方式")
private String render;
@ApiModelProperty("展示结果数量")
private Integer resultCount;
@ApiModelProperty("展示结果")
private String resultMode;
@ApiModelProperty("标题")
private String title;
@ApiModelProperty("场景ID")
private String sceneId;
@ApiModelProperty("创建人")
private String createBy;
@ApiModelProperty("创建时间")
private Long createTime;
@ApiModelProperty("更新时间")
private Long updateTime;
@ApiModelProperty("样式优先级")
private String stylePriority;
@ApiModelProperty("public or private")
private String chartType;
@ApiModelProperty("是否插件")
private Boolean isPlugin;
private static final long serialVersionUID = 1L;
}
\ No newline at end of file
}
backend/src/main/java/io/dataease/base/domain/ChartViewExample.java
浏览文件 @ 6703d749
......@@ -244,146 +244,6 @@ public class ChartViewExample {
return (Criteria) this;
}
public Criteria andTitleIsNull() {
addCriterion("title is null");
return (Criteria) this;
}
public Criteria andTitleIsNotNull() {
addCriterion("title is not null");
return (Criteria) this;
}
public Criteria andTitleEqualTo(String value) {
addCriterion("title =", value, "title");
return (Criteria) this;
}
public Criteria andTitleNotEqualTo(String value) {
addCriterion("title <>", value, "title");
return (Criteria) this;
}
public Criteria andTitleGreaterThan(String value) {
addCriterion("title >", value, "title");
return (Criteria) this;
}
public Criteria andTitleGreaterThanOrEqualTo(String value) {
addCriterion("title >=", value, "title");
return (Criteria) this;
}
public Criteria andTitleLessThan(String value) {
addCriterion("title <", value, "title");
return (Criteria) this;
}
public Criteria andTitleLessThanOrEqualTo(String value) {
addCriterion("title <=", value, "title");
return (Criteria) this;
}
public Criteria andTitleLike(String value) {
addCriterion("title like", value, "title");
return (Criteria) this;
}
public Criteria andTitleNotLike(String value) {
addCriterion("title not like", value, "title");
return (Criteria) this;
}
public Criteria andTitleIn(List<String> values) {
addCriterion("title in", values, "title");
return (Criteria) this;
}
public Criteria andTitleNotIn(List<String> values) {
addCriterion("title not in", values, "title");
return (Criteria) this;
}
public Criteria andTitleBetween(String value1, String value2) {
addCriterion("title between", value1, value2, "title");
return (Criteria) this;
}
public Criteria andTitleNotBetween(String value1, String value2) {
addCriterion("title not between", value1, value2, "title");
return (Criteria) this;
}
public Criteria andSceneIdIsNull() {
addCriterion("scene_id is null");
return (Criteria) this;
}
public Criteria andSceneIdIsNotNull() {
addCriterion("scene_id is not null");
return (Criteria) this;
}
public Criteria andSceneIdEqualTo(String value) {
addCriterion("scene_id =", value, "sceneId");
return (Criteria) this;
}
public Criteria andSceneIdNotEqualTo(String value) {
addCriterion("scene_id <>", value, "sceneId");
return (Criteria) this;
}
public Criteria andSceneIdGreaterThan(String value) {
addCriterion("scene_id >", value, "sceneId");
return (Criteria) this;
}
public Criteria andSceneIdGreaterThanOrEqualTo(String value) {
addCriterion("scene_id >=", value, "sceneId");
return (Criteria) this;
}
public Criteria andSceneIdLessThan(String value) {
addCriterion("scene_id <", value, "sceneId");
return (Criteria) this;
}
public Criteria andSceneIdLessThanOrEqualTo(String value) {
addCriterion("scene_id <=", value, "sceneId");
return (Criteria) this;
}
public Criteria andSceneIdLike(String value) {
addCriterion("scene_id like", value, "sceneId");
return (Criteria) this;
}
public Criteria andSceneIdNotLike(String value) {
addCriterion("scene_id not like", value, "sceneId");
return (Criteria) this;
}
public Criteria andSceneIdIn(List<String> values) {
addCriterion("scene_id in", values, "sceneId");
return (Criteria) this;
}
public Criteria andSceneIdNotIn(List<String> values) {
addCriterion("scene_id not in", values, "sceneId");
return (Criteria) this;
}
public Criteria andSceneIdBetween(String value1, String value2) {
addCriterion("scene_id between", value1, value2, "sceneId");
return (Criteria) this;
}
public Criteria andSceneIdNotBetween(String value1, String value2) {
addCriterion("scene_id not between", value1, value2, "sceneId");
return (Criteria) this;
}
public Criteria andTableIdIsNull() {
addCriterion("table_id is null");
return (Criteria) this;
......@@ -724,6 +584,146 @@ public class ChartViewExample {
return (Criteria) this;
}
public Criteria andTitleIsNull() {
addCriterion("title is null");
return (Criteria) this;
}
public Criteria andTitleIsNotNull() {
addCriterion("title is not null");
return (Criteria) this;
}
public Criteria andTitleEqualTo(String value) {
addCriterion("title =", value, "title");
return (Criteria) this;
}
public Criteria andTitleNotEqualTo(String value) {
addCriterion("title <>", value, "title");
return (Criteria) this;
}
public Criteria andTitleGreaterThan(String value) {
addCriterion("title >", value, "title");
return (Criteria) this;
}
public Criteria andTitleGreaterThanOrEqualTo(String value) {
addCriterion("title >=", value, "title");
return (Criteria) this;
}
public Criteria andTitleLessThan(String value) {
addCriterion("title <", value, "title");
return (Criteria) this;
}
public Criteria andTitleLessThanOrEqualTo(String value) {
addCriterion("title <=", value, "title");
return (Criteria) this;
}
public Criteria andTitleLike(String value) {
addCriterion("title like", value, "title");
return (Criteria) this;
}
public Criteria andTitleNotLike(String value) {
addCriterion("title not like", value, "title");
return (Criteria) this;
}
public Criteria andTitleIn(List<String> values) {
addCriterion("title in", values, "title");
return (Criteria) this;
}
public Criteria andTitleNotIn(List<String> values) {
addCriterion("title not in", values, "title");
return (Criteria) this;
}
public Criteria andTitleBetween(String value1, String value2) {
addCriterion("title between", value1, value2, "title");
return (Criteria) this;
}
public Criteria andTitleNotBetween(String value1, String value2) {
addCriterion("title not between", value1, value2, "title");
return (Criteria) this;
}
public Criteria andSceneIdIsNull() {
addCriterion("scene_id is null");
return (Criteria) this;
}
public Criteria andSceneIdIsNotNull() {
addCriterion("scene_id is not null");
return (Criteria) this;
}
public Criteria andSceneIdEqualTo(String value) {
addCriterion("scene_id =", value, "sceneId");
return (Criteria) this;
}
public Criteria andSceneIdNotEqualTo(String value) {
addCriterion("scene_id <>", value, "sceneId");
return (Criteria) this;
}
public Criteria andSceneIdGreaterThan(String value) {
addCriterion("scene_id >", value, "sceneId");
return (Criteria) this;
}
public Criteria andSceneIdGreaterThanOrEqualTo(String value) {
addCriterion("scene_id >=", value, "sceneId");
return (Criteria) this;
}
public Criteria andSceneIdLessThan(String value) {
addCriterion("scene_id <", value, "sceneId");
return (Criteria) this;
}
public Criteria andSceneIdLessThanOrEqualTo(String value) {
addCriterion("scene_id <=", value, "sceneId");
return (Criteria) this;
}
public Criteria andSceneIdLike(String value) {
addCriterion("scene_id like", value, "sceneId");
return (Criteria) this;
}
public Criteria andSceneIdNotLike(String value) {
addCriterion("scene_id not like", value, "sceneId");
return (Criteria) this;
}
public Criteria andSceneIdIn(List<String> values) {
addCriterion("scene_id in", values, "sceneId");
return (Criteria) this;
}
public Criteria andSceneIdNotIn(List<String> values) {
addCriterion("scene_id not in", values, "sceneId");
return (Criteria) this;
}
public Criteria andSceneIdBetween(String value1, String value2) {
addCriterion("scene_id between", value1, value2, "sceneId");
return (Criteria) this;
}
public Criteria andSceneIdNotBetween(String value1, String value2) {
addCriterion("scene_id not between", value1, value2, "sceneId");
return (Criteria) this;
}
public Criteria andCreateByIsNull() {
addCriterion("create_by is null");
return (Criteria) this;
......@@ -1207,4 +1207,4 @@ public class ChartViewExample {
this(condition, value, secondValue, null);
}
}
}
\ No newline at end of file
}
backend/src/main/java/io/dataease/base/domain/ChartViewWithBLOBs.java
浏览文件 @ 6703d749
package io.dataease.base.domain;
import java.io.Serializable;
import io.swagger.annotations.ApiModelProperty;
import lombok.Data;
import lombok.EqualsAndHashCode;
import lombok.ToString;
......@@ -9,27 +11,30 @@ import lombok.ToString;
@EqualsAndHashCode(callSuper = true)
@ToString(callSuper = true)
public class ChartViewWithBLOBs extends ChartView implements Serializable {
@ApiModelProperty("x轴")
private String xAxis;
@ApiModelProperty("x副轴")
private String xAxisExt;
@ApiModelProperty("y轴")
private String yAxis;
@ApiModelProperty("y副轴")
private String yAxisExt;
@ApiModelProperty("堆叠字段")
private String extStack;
@ApiModelProperty("气泡大小字段")
private String extBubble;
@ApiModelProperty("图形属性")
private String customAttr;
@ApiModelProperty("组件样式")
private String customStyle;
@ApiModelProperty("过滤器字段")
private String customFilter;
@ApiModelProperty("下钻字段")
private String drillFields;
@ApiModelProperty("高级设置")
private String senior;
@ApiModelProperty("视图截图快照")
private String snapshot;
private static final long serialVersionUID = 1L;
}
\ No newline at end of file
}
backend/src/main/resources/db/migration/V33__1.9.sql 0 → 100644
浏览文件 @ 6703d749
ALTER TABLE `chart_view` ADD COLUMN `senior` LONGTEXT COMMENT '高级' AFTER `drill_fields`;
UPDATE `chart_view` SET `senior` = '{}';
backend/src/main/resources/generatorConfig.xml
浏览文件 @ 6703d749
......@@ -60,8 +60,8 @@
</javaClientGenerator>
<!--要生成的数据库表 -->
<table tableName="dataease_code_version"/>
<!-- <table tableName="chart_view"/>-->
<!-- <table tableName="dataease_code_version"/>-->
<table tableName="chart_view"/>
<!-- <table tableName="panel_view"/>-->
<!-- <table tableName="panel_link_jump"/>-->
<!-- <table tableName="panel_link_jump_info"/>-->
......
frontend/src/lang/en.js
浏览文件 @ 6703d749
......@@ -1029,7 +1029,17 @@ export default {
table_item_align: 'Body Align',
table_align_left: 'Left',
table_align_center: 'Center',
table_align_right: 'Right'
table_align_right: 'Right',
senior: 'Senior',
senior_cfg: 'Senior Config',
function_cfg: 'Function Config',
analyse_cfg: 'Analyse',
slider: 'Slider',
slider_range: 'Range',
chart_no_senior: 'This chart type not support senior config,please look forward to.',
assist_line: 'Assist Line',
field_fixed: 'Fixed',
line_type_dotted: 'Dotted'
},
dataset: {
sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default',
......
frontend/src/lang/tw.js
浏览文件 @ 6703d749
......@@ -1029,7 +1029,17 @@ export default {
table_item_align: '表格對齊方式',
table_align_left: '左對齊',
table_align_center: '居中',
table_align_right: '右對齊'
table_align_right: '右對齊',
senior: '高級',
senior_cfg: '高級設置',
function_cfg: '功能設置',
analyse_cfg: '分析預警',
slider: '縮略軸',
slider_range: '默認範圍',
chart_no_senior: '當前圖表類型暫無高級配置，敬請期待',
assist_line: '輔助線',
field_fixed: '固定值',
line_type_dotted: '點'
},
dataset: {
sheet_warn: '有多個 Sheet 頁，默認抽取第一個',
......
frontend/src/lang/zh.js
浏览文件 @ 6703d749
......@@ -1032,7 +1032,17 @@ export default {
table_item_align: '表格对齐方式',
table_align_left: '左对齐',
table_align_center: '居中',
table_align_right: '右对齐'
table_align_right: '右对齐',
senior: '高级',
senior_cfg: '高级设置',
function_cfg: '功能设置',
analyse_cfg: '分析预警',
slider: '缩略轴',
slider_range: '默认范围',
chart_no_senior: '当前图表类型暂无高级配置，敬请期待',
assist_line: '辅助线',
field_fixed: '固定值',
line_type_dotted: '点'
},
dataset: {
sheet_warn: '有多个 Sheet 页，默认抽取第一个',
......
frontend/src/views/chart/chart/bar/bar_antv.js
浏览文件 @ 6703d749
import { Column, Bar } from '@antv/g2plot'
import { getTheme, getLabel, getTooltip, getLegend, getXAxis, getYAxis, getPadding } from '@/views/chart/chart/common/common_antv'
import { getTheme, getLabel, getTooltip, getLegend, getXAxis, getYAxis, getPadding, getSlider } from '@/views/chart/chart/common/common_antv'
export function baseBarOptionAntV(plot, container, chart, action, isGroup, isStack) {
// theme
......@@ -13,6 +13,8 @@ export function baseBarOptionAntV(plot, container, chart, action, isGroup, isSta
const yAxis = getYAxis(chart)
// data
const data = chart.data.datas
// config
const slider = getSlider(chart)
// options
const options = {
theme: theme,
......@@ -26,6 +28,7 @@ export function baseBarOptionAntV(plot, container, chart, action, isGroup, isSta
legend: legend,
xAxis: xAxis,
yAxis: yAxis,
slider: slider,
interactions: [
{
type: 'element-active', cfg: {
......@@ -108,6 +111,8 @@ export function hBaseBarOptionAntV(plot, container, chart, action, isGroup, isSt
const yAxis = getYAxis(chart)
// data
const data = chart.data.datas
// config
const slider = getSlider(chart)
// options
const options = {
theme: theme,
......@@ -121,6 +126,7 @@ export function hBaseBarOptionAntV(plot, container, chart, action, isGroup, isSt
legend: legend,
xAxis: xAxis,
yAxis: yAxis,
slider: slider,
interactions: [
{
type: 'element-active', cfg: {
......
frontend/src/views/chart/chart/chart.js
浏览文件 @ 6703d749
......@@ -240,6 +240,10 @@ export const DEFAULT_SPLIT = {
show: true
}
}
export const DEFAULT_FUNCTION_CFG = {
sliderShow: false,
sliderRange: [0, 10]
}
// chart config
export const BASE_BAR = {
title: {
......
frontend/src/views/chart/chart/common/common_antv.js
浏览文件 @ 6703d749
......@@ -435,3 +435,20 @@ function transAxisPosition(chart, axis) {
return axis.position
}
}
export function getSlider(chart) {
let senior = {}
let cfg = false
if (chart.senior) {
senior = JSON.parse(chart.senior)
if (senior.functionCfg) {
if (senior.functionCfg.sliderShow) {
cfg = {
start: parseInt(senior.functionCfg.sliderRange[0]) / 100,
end: parseInt(senior.functionCfg.sliderRange[1]) / 100
}
}
}
}
return cfg
}
frontend/src/views/chart/chart/line/line_antv.js
浏览文件 @ 6703d749
import { Line, Area } from '@antv/g2plot'
import { getTheme, getLabel, getTooltip, getLegend, getXAxis, getYAxis, getPadding } from '@/views/chart/chart/common/common_antv'
import {
getTheme,
getLabel,
getTooltip,
getLegend,
getXAxis,
getYAxis,
getPadding,
getSlider
} from '@/views/chart/chart/common/common_antv'
export function baseLineOptionAntV(plot, container, chart, action) {
// theme
......@@ -13,6 +22,8 @@ export function baseLineOptionAntV(plot, container, chart, action) {
const yAxis = getYAxis(chart)
// data
const data = chart.data.datas
// config
const slider = getSlider(chart)
// options
const options = {
point: {},
......@@ -27,6 +38,7 @@ export function baseLineOptionAntV(plot, container, chart, action) {
legend: legend,
xAxis: xAxis,
yAxis: yAxis,
slider: slider,
interactions: [
{
type: 'element-active', cfg: {
......@@ -100,6 +112,8 @@ export function baseAreaOptionAntV(plot, container, chart, action) {
const yAxis = getYAxis(chart)
// data
const data = chart.data.datas
// config
const slider = getSlider(chart)
// options
const options = {
point: {},
......@@ -114,6 +128,7 @@ export function baseAreaOptionAntV(plot, container, chart, action) {
legend: legend,
xAxis: xAxis,
yAxis: yAxis,
slider: slider,
interactions: [
{
type: 'element-active', cfg: {
......
frontend/src/views/chart/chart/scatter/scatter_antv.js
浏览文件 @ 6703d749
import { getTheme, getLabel, getTooltip, getLegend, getXAxis, getYAxis, getPadding } from '@/views/chart/chart/common/common_antv'
import {
getTheme,
getLabel,
getTooltip,
getLegend,
getXAxis,
getYAxis,
getPadding,
getSlider
} from '@/views/chart/chart/common/common_antv'
import { Scatter } from '@antv/g2plot'
......@@ -14,6 +23,8 @@ export function baseScatterOptionAntV(plot, container, chart, action) {
const yAxis = getYAxis(chart)
// data
const data = chart.data.datas
// config
const slider = getSlider(chart)
// options
const options = {
theme: theme,
......@@ -27,6 +38,7 @@ export function baseScatterOptionAntV(plot, container, chart, action) {
legend: legend,
xAxis: xAxis,
yAxis: yAxis,
slider: slider,
pieStyle: {
lineWidth: 0
},
......
frontend/src/views/chart/components/senior/AssistLine.vue 0 → 100644
浏览文件 @ 6703d749
<template>
<div style="width: 100%;padding: 0 18px;">
<el-col>
<el-button
:title="$t('chart.edit')"
icon="el-icon-edit"
type="text"
size="small"
style="width: 24px;margin-left: 4px;"
@click="editLine"
/>
<el-col>
<el-row v-for="(item,index) in assistLine" :key="index" class="line-style">
<el-col :span="8">
<span :title="item.name">{{ item.name }}</span>
</el-col>
<el-col :span="8">
<span v-if="item.field === '0'" :title="$t('chart.field_fixed')">{{ $t('chart.field_fixed') }}</span>
</el-col>
<el-col :span="8">
<span :title="item.value">{{ item.value }}</span>
</el-col>
</el-row>
</el-col>
</el-col>
<!--编辑辅助线-->
<el-dialog
v-if="editLineDialog"
v-dialogDrag
:title="$t('chart.assist_line')"
:visible="editLineDialog"
:show-close="false"
width="70%"
class="dialog-css"
>
<assist-line-edit :line="assistLine" @onAssistLineChange="lineChange" />
<div slot="footer" class="dialog-footer">
<el-button size="mini" @click="closeEditLine">{{ $t('chart.cancel') }}</el-button>
<el-button type="primary" size="mini" @click="changeLine">{{ $t('chart.confirm') }}</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import AssistLineEdit from '@/views/chart/components/senior/dialog/AssistLineEdit'
export default {
name: 'AssistLine',
components: { AssistLineEdit },
props: {
chart: {
type: Object,
required: true
}
},
data() {
return {
assistLine: [],
editLineDialog: false,
lineArr: []
}
},
watch: {
'chart': {
handler: function() {
this.initData()
}
}
},
mounted() {
this.initData()
},
methods: {
initData() {
const chart = JSON.parse(JSON.stringify(this.chart))
if (chart.senior) {
let senior = null
if (Object.prototype.toString.call(chart.senior) === '[object Object]') {
senior = JSON.parse(JSON.stringify(chart.senior))
} else {
senior = JSON.parse(chart.senior)
}
if (senior.assistLine) {
this.assistLine = senior.assistLine
} else {
this.assistLine = []
}
}
},
changeAssistLine() {
this.$emit('onAssistLineChange', this.assistLine)
},
lineChange(val) {
this.lineArr = val
},
editLine() {
this.editLineDialog = true
},
closeEditLine() {
this.editLineDialog = false
},
changeLine() {
this.assistLine = JSON.parse(JSON.stringify(this.lineArr))
this.changeAssistLine()
this.closeEditLine()
}
}
}
</script>
<style scoped>
.shape-item{
padding: 6px;
border: none;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.form-item-slider>>>.el-form-item__label{
font-size: 12px;
line-height: 38px;
}
.form-item>>>.el-form-item__label{
font-size: 12px;
}
.el-select-dropdown__item{
padding: 0 20px;
}
span{
font-size: 12px
}
.el-form-item{
margin-bottom: 6px;
}
.switch-style{
position: absolute;
right: 10px;
margin-top: -4px;
}
.color-picker-style{
cursor: pointer;
z-index: 1003;
}
.line-style{
}
.line-style >>> span{
display: inline-block;
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
padding: 0 10px;
}
.dialog-css >>> .el-dialog__title {
font-size: 14px;
}
.dialog-css >>> .el-dialog__header {
padding: 20px 20px 0;
}
.dialog-css >>> .el-dialog__body {
padding: 10px 20px 20px;
}
</style>
frontend/src/views/chart/components/senior/FunctionCfg.vue 0 → 100644
浏览文件 @ 6703d749
<template>
<div style="width: 100%">
<el-col>
<el-form ref="functionForm" :model="functionForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.slider')" class="form-item">
<el-checkbox v-model="functionForm.sliderShow" @change="changeFunctionCfg">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<el-form-item v-show="functionForm.sliderShow" :label="$t('chart.slider_range')+'(%)'" class="form-item form-item-slider">
<el-slider v-model="functionForm.sliderRange" :min="0" :max="100" input-size="mini" range @change="changeFunctionCfg" />
</el-form-item>
</el-form>
</el-col>
</div>
</template>
<script>
import { DEFAULT_FUNCTION_CFG } from '../../chart/chart'
export default {
name: 'FunctionCfg',
props: {
chart: {
type: Object,
required: true
}
},
data() {
return {
functionForm: JSON.parse(JSON.stringify(DEFAULT_FUNCTION_CFG))
}
},
watch: {
'chart': {
handler: function() {
this.initData()
}
}
},
mounted() {
this.initData()
},
methods: {
initData() {
const chart = JSON.parse(JSON.stringify(this.chart))
if (chart.senior) {
let senior = null
if (Object.prototype.toString.call(chart.senior) === '[object Object]') {
senior = JSON.parse(JSON.stringify(chart.senior))
} else {
senior = JSON.parse(chart.senior)
}
if (senior.functionCfg) {
this.functionForm = senior.functionCfg
} else {
this.functionForm = JSON.parse(JSON.stringify(DEFAULT_FUNCTION_CFG))
}
}
},
changeFunctionCfg() {
this.$emit('onFunctionCfgChange', this.functionForm)
}
}
}
</script>
<style scoped>
.shape-item{
padding: 6px;
border: none;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.form-item-slider>>>.el-form-item__label{
font-size: 12px;
line-height: 38px;
}
.form-item>>>.el-form-item__label{
font-size: 12px;
}
.el-select-dropdown__item{
padding: 0 20px;
}
span{
font-size: 12px
}
.el-form-item{
margin-bottom: 6px;
}
.switch-style{
position: absolute;
right: 10px;
margin-top: -4px;
}
.color-picker-style{
cursor: pointer;
z-index: 1003;
}
</style>
frontend/src/views/chart/components/senior/dialog/AssistLineEdit.vue 0 → 100644
浏览文件 @ 6703d749
<template>
<el-col>
<el-button icon="el-icon-plus" circle size="mini" style="margin-bottom: 10px;" @click="addLine" />
<div style="max-height: 50vh;overflow-y: auto;">
<el-row v-for="(item,index) in lineArr" :key="index" class="line-item">
<el-col :span="6">
<el-input v-model="item.name" class="value-item" :placeholder="$t('chart.name')" size="mini" clearable @change="changeAssistLine" />
</el-col>
<el-col :span="4">
<el-select v-model="item.field" size="mini" class="select-item" @change="changeAssistLine">
<el-option
v-for="opt in fieldOptions"
:key="opt.value"
:label="opt.label"
:value="opt.value"
/>
</el-select>
</el-col>
<el-col :span="6">
<el-input v-model="item.value" class="value-item" :placeholder="$t('chart.drag_block_label_value')" size="mini" clearable @change="changeAssistLine" />
</el-col>
<el-col :span="4">
<el-select v-model="item.lineType" size="mini" class="select-item" @change="changeAssistLine">
<el-option
v-for="opt in lineOptions"
:key="opt.value"
:label="opt.label"
:value="opt.value"
/>
</el-select>
</el-col>
<el-col :span="2" style="text-align: center;">
<el-color-picker v-model="item.color" class="color-picker-style" :predefine="predefineColors" @change="changeAssistLine" />
</el-col>
<el-col :span="2">
<el-button type="text" icon="el-icon-delete" circle style="float: right" @click="removeLine(index)" />
</el-col>
</el-row>
</div>
</el-col>
</template>
<script>
import { COLOR_PANEL } from '@/views/chart/chart/chart'
export default {
name: 'AssistLineEdit',
props: {
line: {
type: Array,
required: true
}
},
data() {
return {
lineArr: [],
lineObj: {
name: '辅助线',
field: '0', // 固定值
axis: 'y', // 主轴
value: 0,
lineType: 'solid',
color: '#ff0000'
},
fieldOptions: [
{ label: this.$t('chart.field_fixed'), value: '0' }
],
lineOptions: [
{ label: this.$t('chart.line_type_solid'), value: 'solid' },
{ label: this.$t('chart.line_type_dashed'), value: 'dashed' },
{ label: this.$t('chart.line_type_dotted'), value: 'dotted' }
],
predefineColors: COLOR_PANEL
}
},
mounted() {
this.init()
},
methods: {
init() {
this.lineArr = JSON.parse(JSON.stringify(this.line))
},
addLine() {
this.lineArr.push(this.lineObj)
this.changeAssistLine()
},
removeLine(index) {
this.lineArr.splice(index, 1)
this.changeAssistLine()
},
changeAssistLine() {
this.$emit('onAssistLineChange', this.lineArr)
}
}
}
</script>
<style scoped>
.line-item {
width: 100%;
border-radius: 4px;
border: 1px solid #DCDFE6;
padding: 4px 14px;
margin-bottom: 10px;
display: flex;
justify-content: left;
align-items: center;
}
.form-item >>> .el-form-item__label {
font-size: 12px;
}
span {
font-size: 12px;
}
.value-item {
position: relative;
display: inline-block;
width: 120px !important;
}
.select-item {
position: relative;
display: inline-block;
width: 100px !important;
}
.el-select-dropdown__item {
padding: 0 20px;
font-size: 12px;
}
.color-picker-style{
cursor: pointer;
z-index: 1003;
width: 28px;
height: 28px;
margin-top: 6px;
}
.color-picker-style >>> .el-color-picker__trigger{
width: 28px;
height: 28px;
}
</style>
frontend/src/views/chart/group/Group.vue
浏览文件 @ 6703d749
......@@ -308,7 +308,8 @@ import {
DEFAULT_YAXIS_STYLE,
DEFAULT_YAXIS_EXT_STYLE,
DEFAULT_BACKGROUND_COLOR,
DEFAULT_SPLIT
DEFAULT_SPLIT,
DEFAULT_FUNCTION_CFG
} from '../chart/chart'
export default {
......@@ -764,6 +765,10 @@ export default {
background: DEFAULT_BACKGROUND_COLOR,
split: DEFAULT_SPLIT
})
view.senior = JSON.stringify({
functionCfg: DEFAULT_FUNCTION_CFG,
assistLine: []
})
view.stylePriority = 'view' // 默认样式优先级视图
view.xaxis = JSON.stringify([])
view.xaxisExt = JSON.stringify([])
......
frontend/src/views/chart/view/ChartEdit.vue
浏览文件 @ 6703d749
......@@ -810,6 +810,35 @@
</div>
</el-row>
</el-tab-pane>
<el-tab-pane :label="$t('chart.senior')" class="padding-tab" style="width: 360px;">
<el-row class="view-panel">
<div
v-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('mix'))"
style="overflow:auto;border-right: 1px solid #e6e6e6;height: 100%;width: 100%;"
class="attr-style theme-border-class"
>
<el-row>
<span class="padding-lr">{{ $t('chart.senior_cfg') }}</span>
<el-collapse v-model="attrActiveNames" class="style-collapse">
<el-collapse-item name="function" :title="$t('chart.function_cfg')">
<function-cfg :param="param" class="attr-selector" :chart="chart" @onFunctionCfgChange="onFunctionCfgChange" />
</el-collapse-item>
</el-collapse>
</el-row>
<el-row>
<span class="padding-lr">{{ $t('chart.analyse_cfg') }}</span>
<el-collapse v-model="styleActiveNames" class="style-collapse">
<el-collapse-item name="analyse" :title="$t('chart.assist_line')">
<assist-line :param="param" class="attr-selector" :chart="chart" @onAssistLineChange="onAssistLineChange" />
</el-collapse-item>
</el-collapse>
</el-row>
</div>
<div v-else class="no-senior">
{{ $t('chart.chart_no_senior') }}
</div>
</el-row>
</el-tab-pane>
</el-tabs>
<el-col style="height: 100%;min-width: 500px;border-top: 1px solid #E6E6E6;">
......@@ -1006,6 +1035,7 @@ import DatasetChartDetail from '../../dataset/common/DatasetChartDetail'
import {
DEFAULT_BACKGROUND_COLOR,
DEFAULT_COLOR_CASE,
DEFAULT_FUNCTION_CFG,
DEFAULT_LABEL,
DEFAULT_LEGEND_STYLE,
DEFAULT_SIZE,
......@@ -1052,9 +1082,13 @@ import { compareItem } from '@/views/chart/chart/compare'
import ChartComponentS2 from '@/views/chart/components/ChartComponentS2'
import DimensionExtItem from '@/views/chart/components/drag-item/DimensionExtItem'
import PluginCom from '@/views/system/plugin/PluginCom'
import FunctionCfg from '@/views/chart/components/senior/FunctionCfg'
import AssistLine from '@/views/chart/components/senior/AssistLine'
export default {
name: 'ChartEdit',
components: {
AssistLine,
FunctionCfg,
DimensionExtItem,
ChartComponentS2,
CompareEdit,
......@@ -1138,6 +1172,10 @@ export default {
background: DEFAULT_BACKGROUND_COLOR,
split: DEFAULT_SPLIT
},
senior: {
functionCfg: DEFAULT_FUNCTION_CFG,
assistLine: []
},
customFilter: [],
render: 'antv',
isPlugin: false
......@@ -1446,6 +1484,7 @@ export default {
view.extStack = JSON.stringify(view.extStack)
view.drillFields = JSON.stringify(view.drillFields)
view.extBubble = JSON.stringify(view.extBubble)
view.senior = JSON.stringify(view.senior)
delete view.data
return view
},
......@@ -1471,6 +1510,7 @@ export default {
this.view.customAttr = view.customAttr ? JSON.parse(view.customAttr) : {}
this.view.customStyle = view.customStyle ? JSON.parse(view.customStyle) : {}
this.view.customFilter = view.customFilter ? JSON.parse(view.customFilter) : {}
this.view.senior = view.senior ? JSON.parse(view.senior) : {}
// 将视图传入echart组件
this.chart = response.data
this.data = response.data.data
......@@ -1505,6 +1545,7 @@ export default {
view.customAttr = JSON.stringify(this.view.customAttr)
view.customStyle = JSON.stringify(this.view.customStyle)
view.customFilter = JSON.stringify(this.view.customFilter)
view.senior = JSON.stringify(this.view.senior)
view.data = this.data
this.chart = view
},
......@@ -1556,6 +1597,7 @@ export default {
this.view.customAttr = this.view.customAttr ? JSON.parse(this.view.customAttr) : {}
this.view.customStyle = this.view.customStyle ? JSON.parse(this.view.customStyle) : {}
this.view.customFilter = this.view.customFilter ? JSON.parse(this.view.customFilter) : {}
this.view.senior = this.view.senior ? JSON.parse(this.view.senior) : {}
// 将视图传入echart组件
this.chart = response.data
this.data = response.data.data
......@@ -1600,6 +1642,7 @@ export default {
this.view.customAttr = this.view.customAttr ? JSON.parse(this.view.customAttr) : {}
this.view.customStyle = this.view.customStyle ? JSON.parse(this.view.customStyle) : {}
this.view.customFilter = this.view.customFilter ? JSON.parse(this.view.customFilter) : {}
this.view.senior = this.view.senior ? JSON.parse(this.view.senior) : {}
// 将视图传入echart组件
this.chart = response.data
......@@ -1703,6 +1746,16 @@ export default {
this.calcStyle()
},
onFunctionCfgChange(val) {
this.view.senior.functionCfg = val
this.calcStyle()
},
onAssistLineChange(val) {
this.view.senior.assistLine = val
this.calcStyle()
},
showDimensionEditFilter(item) {
this.dimensionItem = JSON.parse(JSON.stringify(item))
this.dimensionFilterEdit = true
......@@ -2379,7 +2432,7 @@ export default {
.tab-header > > > .el-tabs__item {
font-size: 12px;
padding: 0 60px!important;
padding: 0 40px!important;
}
.blackTheme .tab-header > > > .el-tabs__item {
......@@ -2576,4 +2629,11 @@ export default {
margin-left: 4px;
}
.no-senior {
width: 100%;
text-align: center;
font-size: 12px;
margin-top: 40px;
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论