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

feat:样式修改

Browse Source
This commit is contained in:
wangjiahao 2021-05-06 23:40:34 +08:00
parent 33320f6f14
commit 53b021bbf7
20 changed files with 461 additions and 297 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
backend/src/main/java/io/dataease/base/domain/ChartView.java
View File

@ -23,5 +23,7 @@ public class ChartView implements Serializable {
private Long updateTime; private Long updateTime;
private String stylePriority;
private static final long serialVersionUID = 1L; private static final long serialVersionUID = 1L;
} }

70
backend/src/main/java/io/dataease/base/domain/ChartViewExample.java
View File

@ -713,6 +713,76 @@ public class ChartViewExample {
addCriterion("update_time not between", value1, value2, "updateTime"); addCriterion("update_time not between", value1, value2, "updateTime");
return (Criteria) this; return (Criteria) this;
} }
public Criteria andStylePriorityIsNull() {
addCriterion("style_priority is null");
return (Criteria) this;
}
public Criteria andStylePriorityIsNotNull() {
addCriterion("style_priority is not null");
return (Criteria) this;
}
public Criteria andStylePriorityEqualTo(String value) {
addCriterion("style_priority =", value, "stylePriority");
return (Criteria) this;
}
public Criteria andStylePriorityNotEqualTo(String value) {
addCriterion("style_priority <>", value, "stylePriority");
return (Criteria) this;
}
public Criteria andStylePriorityGreaterThan(String value) {
addCriterion("style_priority >", value, "stylePriority");
return (Criteria) this;
}
public Criteria andStylePriorityGreaterThanOrEqualTo(String value) {
addCriterion("style_priority >=", value, "stylePriority");
return (Criteria) this;
}
public Criteria andStylePriorityLessThan(String value) {
addCriterion("style_priority <", value, "stylePriority");
return (Criteria) this;
}
public Criteria andStylePriorityLessThanOrEqualTo(String value) {
addCriterion("style_priority <=", value, "stylePriority");
return (Criteria) this;
}
public Criteria andStylePriorityLike(String value) {
addCriterion("style_priority like", value, "stylePriority");
return (Criteria) this;
}
public Criteria andStylePriorityNotLike(String value) {
addCriterion("style_priority not like", value, "stylePriority");
return (Criteria) this;
}
public Criteria andStylePriorityIn(List<String> values) {
addCriterion("style_priority in", values, "stylePriority");
return (Criteria) this;
}
public Criteria andStylePriorityNotIn(List<String> values) {
addCriterion("style_priority not in", values, "stylePriority");
return (Criteria) this;
}
public Criteria andStylePriorityBetween(String value1, String value2) {
addCriterion("style_priority between", value1, value2, "stylePriority");
return (Criteria) this;
}
public Criteria andStylePriorityNotBetween(String value1, String value2) {
addCriterion("style_priority not between", value1, value2, "stylePriority");
return (Criteria) this;
}
} }
public static class Criteria extends GeneratedCriteria { public static class Criteria extends GeneratedCriteria {

2
backend/src/main/java/io/dataease/base/domain/ChartViewWithBLOBs.java
View File

@ -19,5 +19,7 @@ public class ChartViewWithBLOBs extends ChartView implements Serializable {
private String customFilter; private String customFilter;
private String snapshot;
private static final long serialVersionUID = 1L; private static final long serialVersionUID = 1L;
} }

55
backend/src/main/java/io/dataease/base/mapper/ChartViewMapper.xml
View File

@ -11,6 +11,7 @@
<result column="create_by" jdbcType="VARCHAR" property="createBy" /> <result column="create_by" jdbcType="VARCHAR" property="createBy" />
<result column="create_time" jdbcType="BIGINT" property="createTime" /> <result column="create_time" jdbcType="BIGINT" property="createTime" />
<result column="update_time" jdbcType="BIGINT" property="updateTime" /> <result column="update_time" jdbcType="BIGINT" property="updateTime" />
<result column="style_priority" jdbcType="VARCHAR" property="stylePriority" />
</resultMap> </resultMap>
<resultMap extends="BaseResultMap" id="ResultMapWithBLOBs" type="io.dataease.base.domain.ChartViewWithBLOBs"> <resultMap extends="BaseResultMap" id="ResultMapWithBLOBs" type="io.dataease.base.domain.ChartViewWithBLOBs">
<result column="x_axis" jdbcType="LONGVARCHAR" property="xAxis" /> <result column="x_axis" jdbcType="LONGVARCHAR" property="xAxis" />
@ -18,6 +19,7 @@
<result column="custom_attr" jdbcType="LONGVARCHAR" property="customAttr" /> <result column="custom_attr" jdbcType="LONGVARCHAR" property="customAttr" />
<result column="custom_style" jdbcType="LONGVARCHAR" property="customStyle" /> <result column="custom_style" jdbcType="LONGVARCHAR" property="customStyle" />
<result column="custom_filter" jdbcType="LONGVARCHAR" property="customFilter" /> <result column="custom_filter" jdbcType="LONGVARCHAR" property="customFilter" />
<result column="snapshot" jdbcType="LONGVARCHAR" property="snapshot" />
</resultMap> </resultMap>
<sql id="Example_Where_Clause"> <sql id="Example_Where_Clause">
<where> <where>
@ -78,10 +80,11 @@
</where> </where>
</sql> </sql>
<sql id="Base_Column_List"> <sql id="Base_Column_List">
id, `name`, scene_id, table_id, `type`, title, create_by, create_time, update_time id, `name`, scene_id, table_id, `type`, title, create_by, create_time, update_time,
style_priority
</sql> </sql>
<sql id="Blob_Column_List"> <sql id="Blob_Column_List">
x_axis, y_axis, custom_attr, custom_style, custom_filter x_axis, y_axis, custom_attr, custom_style, custom_filter, snapshot
</sql> </sql>
<select id="selectByExampleWithBLOBs" parameterType="io.dataease.base.domain.ChartViewExample" resultMap="ResultMapWithBLOBs"> <select id="selectByExampleWithBLOBs" parameterType="io.dataease.base.domain.ChartViewExample" resultMap="ResultMapWithBLOBs">
select select
@ -135,13 +138,15 @@
insert into chart_view (id, `name`, scene_id, insert into chart_view (id, `name`, scene_id,
table_id, `type`, title, table_id, `type`, title,
create_by, create_time, update_time, create_by, create_time, update_time,
x_axis, y_axis, custom_attr, style_priority, x_axis, y_axis,
custom_style, custom_filter) custom_attr, custom_style, custom_filter,
snapshot)
values (#{id,jdbcType=VARCHAR}, #{name,jdbcType=VARCHAR}, #{sceneId,jdbcType=VARCHAR}, values (#{id,jdbcType=VARCHAR}, #{name,jdbcType=VARCHAR}, #{sceneId,jdbcType=VARCHAR},
#{tableId,jdbcType=VARCHAR}, #{type,jdbcType=VARCHAR}, #{title,jdbcType=VARCHAR}, #{tableId,jdbcType=VARCHAR}, #{type,jdbcType=VARCHAR}, #{title,jdbcType=VARCHAR},
#{createBy,jdbcType=VARCHAR}, #{createTime,jdbcType=BIGINT}, #{updateTime,jdbcType=BIGINT}, #{createBy,jdbcType=VARCHAR}, #{createTime,jdbcType=BIGINT}, #{updateTime,jdbcType=BIGINT},
#{xAxis,jdbcType=LONGVARCHAR}, #{yAxis,jdbcType=LONGVARCHAR}, #{customAttr,jdbcType=LONGVARCHAR}, #{stylePriority,jdbcType=VARCHAR}, #{xAxis,jdbcType=LONGVARCHAR}, #{yAxis,jdbcType=LONGVARCHAR},
#{customStyle,jdbcType=LONGVARCHAR}, #{customFilter,jdbcType=LONGVARCHAR}) #{customAttr,jdbcType=LONGVARCHAR}, #{customStyle,jdbcType=LONGVARCHAR}, #{customFilter,jdbcType=LONGVARCHAR},
#{snapshot,jdbcType=LONGVARCHAR})
</insert> </insert>
<insert id="insertSelective" parameterType="io.dataease.base.domain.ChartViewWithBLOBs"> <insert id="insertSelective" parameterType="io.dataease.base.domain.ChartViewWithBLOBs">
insert into chart_view insert into chart_view
@ -173,6 +178,9 @@
<if test="updateTime != null"> <if test="updateTime != null">
update_time, update_time,
</if> </if>
<if test="stylePriority != null">
style_priority,
</if>
<if test="xAxis != null"> <if test="xAxis != null">
x_axis, x_axis,
</if> </if>
@ -188,6 +196,9 @@
<if test="customFilter != null"> <if test="customFilter != null">
custom_filter, custom_filter,
</if> </if>
<if test="snapshot != null">
snapshot,
</if>
</trim> </trim>
<trim prefix="values (" suffix=")" suffixOverrides=","> <trim prefix="values (" suffix=")" suffixOverrides=",">
<if test="id != null"> <if test="id != null">
@ -217,6 +228,9 @@
<if test="updateTime != null"> <if test="updateTime != null">
#{updateTime,jdbcType=BIGINT}, #{updateTime,jdbcType=BIGINT},
</if> </if>
<if test="stylePriority != null">
#{stylePriority,jdbcType=VARCHAR},
</if>
<if test="xAxis != null"> <if test="xAxis != null">
#{xAxis,jdbcType=LONGVARCHAR}, #{xAxis,jdbcType=LONGVARCHAR},
</if> </if>
@ -232,6 +246,9 @@
<if test="customFilter != null"> <if test="customFilter != null">
#{customFilter,jdbcType=LONGVARCHAR}, #{customFilter,jdbcType=LONGVARCHAR},
</if> </if>
<if test="snapshot != null">
#{snapshot,jdbcType=LONGVARCHAR},
</if>
</trim> </trim>
</insert> </insert>
<select id="countByExample" parameterType="io.dataease.base.domain.ChartViewExample" resultType="java.lang.Long"> <select id="countByExample" parameterType="io.dataease.base.domain.ChartViewExample" resultType="java.lang.Long">
@ -270,6 +287,9 @@
<if test="record.updateTime != null"> <if test="record.updateTime != null">
update_time = #{record.updateTime,jdbcType=BIGINT}, update_time = #{record.updateTime,jdbcType=BIGINT},
</if> </if>
<if test="record.stylePriority != null">
style_priority = #{record.stylePriority,jdbcType=VARCHAR},
</if>
<if test="record.xAxis != null"> <if test="record.xAxis != null">
x_axis = #{record.xAxis,jdbcType=LONGVARCHAR}, x_axis = #{record.xAxis,jdbcType=LONGVARCHAR},
</if> </if>
@ -285,6 +305,9 @@
<if test="record.customFilter != null"> <if test="record.customFilter != null">
custom_filter = #{record.customFilter,jdbcType=LONGVARCHAR}, custom_filter = #{record.customFilter,jdbcType=LONGVARCHAR},
</if> </if>
<if test="record.snapshot != null">
snapshot = #{record.snapshot,jdbcType=LONGVARCHAR},
</if>
</set> </set>
<if test="_parameter != null"> <if test="_parameter != null">
<include refid="Update_By_Example_Where_Clause" /> <include refid="Update_By_Example_Where_Clause" />
@ -301,11 +324,13 @@
create_by = #{record.createBy,jdbcType=VARCHAR}, create_by = #{record.createBy,jdbcType=VARCHAR},
create_time = #{record.createTime,jdbcType=BIGINT}, create_time = #{record.createTime,jdbcType=BIGINT},
update_time = #{record.updateTime,jdbcType=BIGINT}, update_time = #{record.updateTime,jdbcType=BIGINT},
style_priority = #{record.stylePriority,jdbcType=VARCHAR},
x_axis = #{record.xAxis,jdbcType=LONGVARCHAR}, x_axis = #{record.xAxis,jdbcType=LONGVARCHAR},
y_axis = #{record.yAxis,jdbcType=LONGVARCHAR}, y_axis = #{record.yAxis,jdbcType=LONGVARCHAR},
custom_attr = #{record.customAttr,jdbcType=LONGVARCHAR}, custom_attr = #{record.customAttr,jdbcType=LONGVARCHAR},
custom_style = #{record.customStyle,jdbcType=LONGVARCHAR}, custom_style = #{record.customStyle,jdbcType=LONGVARCHAR},
custom_filter = #{record.customFilter,jdbcType=LONGVARCHAR} custom_filter = #{record.customFilter,jdbcType=LONGVARCHAR},
snapshot = #{record.snapshot,jdbcType=LONGVARCHAR}
<if test="_parameter != null"> <if test="_parameter != null">
<include refid="Update_By_Example_Where_Clause" /> <include refid="Update_By_Example_Where_Clause" />
</if> </if>
@ -320,7 +345,8 @@
title = #{record.title,jdbcType=VARCHAR}, title = #{record.title,jdbcType=VARCHAR},
create_by = #{record.createBy,jdbcType=VARCHAR}, create_by = #{record.createBy,jdbcType=VARCHAR},
create_time = #{record.createTime,jdbcType=BIGINT}, create_time = #{record.createTime,jdbcType=BIGINT},
update_time = #{record.updateTime,jdbcType=BIGINT} update_time = #{record.updateTime,jdbcType=BIGINT},
style_priority = #{record.stylePriority,jdbcType=VARCHAR}
<if test="_parameter != null"> <if test="_parameter != null">
<include refid="Update_By_Example_Where_Clause" /> <include refid="Update_By_Example_Where_Clause" />
</if> </if>
@ -352,6 +378,9 @@
<if test="updateTime != null"> <if test="updateTime != null">
update_time = #{updateTime,jdbcType=BIGINT}, update_time = #{updateTime,jdbcType=BIGINT},
</if> </if>
<if test="stylePriority != null">
style_priority = #{stylePriority,jdbcType=VARCHAR},
</if>
<if test="xAxis != null"> <if test="xAxis != null">
x_axis = #{xAxis,jdbcType=LONGVARCHAR}, x_axis = #{xAxis,jdbcType=LONGVARCHAR},
</if> </if>
@ -367,6 +396,9 @@
<if test="customFilter != null"> <if test="customFilter != null">
custom_filter = #{customFilter,jdbcType=LONGVARCHAR}, custom_filter = #{customFilter,jdbcType=LONGVARCHAR},
</if> </if>
<if test="snapshot != null">
snapshot = #{snapshot,jdbcType=LONGVARCHAR},
</if>
</set> </set>
where id = #{id,jdbcType=VARCHAR} where id = #{id,jdbcType=VARCHAR}
</update> </update>
@ -380,11 +412,13 @@
create_by = #{createBy,jdbcType=VARCHAR}, create_by = #{createBy,jdbcType=VARCHAR},
create_time = #{createTime,jdbcType=BIGINT}, create_time = #{createTime,jdbcType=BIGINT},
update_time = #{updateTime,jdbcType=BIGINT}, update_time = #{updateTime,jdbcType=BIGINT},
style_priority = #{stylePriority,jdbcType=VARCHAR},
x_axis = #{xAxis,jdbcType=LONGVARCHAR}, x_axis = #{xAxis,jdbcType=LONGVARCHAR},
y_axis = #{yAxis,jdbcType=LONGVARCHAR}, y_axis = #{yAxis,jdbcType=LONGVARCHAR},
custom_attr = #{customAttr,jdbcType=LONGVARCHAR}, custom_attr = #{customAttr,jdbcType=LONGVARCHAR},
custom_style = #{customStyle,jdbcType=LONGVARCHAR}, custom_style = #{customStyle,jdbcType=LONGVARCHAR},
custom_filter = #{customFilter,jdbcType=LONGVARCHAR} custom_filter = #{customFilter,jdbcType=LONGVARCHAR},
snapshot = #{snapshot,jdbcType=LONGVARCHAR}
where id = #{id,jdbcType=VARCHAR} where id = #{id,jdbcType=VARCHAR}
</update> </update>
<update id="updateByPrimaryKey" parameterType="io.dataease.base.domain.ChartView"> <update id="updateByPrimaryKey" parameterType="io.dataease.base.domain.ChartView">
@ -396,7 +430,8 @@
title = #{title,jdbcType=VARCHAR}, title = #{title,jdbcType=VARCHAR},
create_by = #{createBy,jdbcType=VARCHAR}, create_by = #{createBy,jdbcType=VARCHAR},
create_time = #{createTime,jdbcType=BIGINT}, create_time = #{createTime,jdbcType=BIGINT},
update_time = #{updateTime,jdbcType=BIGINT} update_time = #{updateTime,jdbcType=BIGINT},
style_priority = #{stylePriority,jdbcType=VARCHAR}
where id = #{id,jdbcType=VARCHAR} where id = #{id,jdbcType=VARCHAR}
</update> </update>
</mapper> </mapper>

2
backend/src/main/resources/generatorConfig.xml
View File

@ -67,7 +67,7 @@
<!-- <table tableName="datasource"/>--> <!-- <table tableName="datasource"/>-->
<!-- <table tableName="sys_dict"/>--> <!-- <table tableName="sys_dict"/>-->
<!-- <table tableName="sys_dict_item"/>--> <!-- <table tableName="sys_dict_item"/>-->
<table tableName="sys_dept"/> <table tableName="chart_view"/>
<!-- <table tableName="panel_design"/>--> <!-- <table tableName="panel_design"/>-->

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

@ -18,10 +18,19 @@ export function groupTree(data) {
}) })
} }
export function loadTable(data) { export function viewData(id, data) {
return request({ return request({
url: '/panel/table/list', url: '/chart/view/getData/' + id,
method: 'post', method: 'post',
hideMsg: true,
data
})
}
export function panelSave(data) {
return request({
url: 'panel/group/save',
method: 'post',
loading: true,
data data
}) })
} }
@ -104,6 +113,7 @@ export function post(url, data) {
return request({ return request({
url: url, url: url,
method: 'post', method: 'post',
loading: true,
data data
}) })
} }
@ -115,4 +125,4 @@ export function get(url) {
}) })
} }
export default { post, get, groupTree, defaultTree } export default { post, get, groupTree, defaultTree, viewData ,panelSave}

2
frontend/src/components/RightPanel/index.vue
View File

@ -80,7 +80,7 @@ export default {
.showRightPanel { .showRightPanel {
overflow: hidden; overflow: hidden;
position: relative; position: relative;
width: calc(100% - 15px); width:100%;
} }
</style> </style>

46
frontend/src/components/canvas/components/Editor/Grid.vue
View File

@ -1,26 +1,26 @@
<template> <template>
<svg class="grid" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"> <svg class="grid" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<defs> <defs>
<pattern id="smallGrid" width="7.236328125" height="7.236328125" patternUnits="userSpaceOnUse"> <pattern id="smallGrid" width="7.236328125" height="7.236328125" patternUnits="userSpaceOnUse">
<path <path
d="M 7.236328125 0 L 0 0 0 7.236328125" d="M 7.236328125 0 L 0 0 0 7.236328125"
fill="none" fill="none"
stroke="rgba(207, 207, 207, 0.3)" stroke="rgba(207, 207, 207, 0.3)"
stroke-width="1"> stroke-width="1"
</path> />
</pattern> </pattern>
<pattern id="grid" width="36.181640625" height="36.181640625" patternUnits="userSpaceOnUse"> <pattern id="grid" width="36.181640625" height="36.181640625" patternUnits="userSpaceOnUse">
<rect width="36.181640625" height="36.181640625" fill="url(#smallGrid)"></rect> <rect width="36.181640625" height="36.181640625" fill="url(#smallGrid)" />
<path <path
d="M 36.181640625 0 L 0 0 0 36.181640625" d="M 36.181640625 0 L 0 0 0 36.181640625"
fill="none" fill="none"
stroke="rgba(186, 186, 186, 0.5)" stroke="rgba(186, 186, 186, 0.5)"
stroke-width="1"> stroke-width="1"
</path> />
</pattern> </pattern>
</defs> </defs>
<rect width="100%" height="100%" fill="url(#grid)"></rect> <rect width="100%" height="100%" fill="url(#grid)" />
</svg> </svg>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -29,4 +29,4 @@
top: 0; top: 0;
left: 0; left: 0;
} }
</style> </style>

28
frontend/src/components/canvas/components/Editor/Preview.vue
View File

@ -111,19 +111,21 @@ export default {
return value * parseInt(scale) / 100 return value * parseInt(scale) / 100
}, },
handleScaleChange() { handleScaleChange() {
const componentData = deepCopy(this.componentData) if (this.componentData) {
componentData.forEach(component => { const componentData = deepCopy(this.componentData)
Object.keys(component.style).forEach(key => { componentData.forEach(component => {
if (this.needToChangeHeight.includes(key)) { Object.keys(component.style).forEach(key => {
component.style[key] = this.format(component.style[key], this.scaleHeight) if (this.needToChangeHeight.includes(key)) {
} component.style[key] = this.format(component.style[key], this.scaleHeight)
if (this.needToChangeWidth.includes(key)) { }
component.style[key] = this.format(component.style[key], this.scaleWidth) if (this.needToChangeWidth.includes(key)) {
} component.style[key] = this.format(component.style[key], this.scaleWidth)
}
})
}) })
}) this.componentDataShow = componentData
this.componentDataShow = componentData this.$nextTick(() => (eventBus.$emit('resizing', '')))
this.$nextTick(() => (eventBus.$emit('resizing', ''))) }
} }
} }
} }
@ -136,7 +138,7 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
border: 1px solid #E6E6E6; border: 1px solid #E6E6E6;
background-size: 100% !important; background-size: 100% 100% !important;
.canvas-container { .canvas-container {
width: 100%; width: 100%;
height: 100%; height: 100%;

3
frontend/src/components/canvas/components/Editor/PreviewEject.vue
View File

@ -106,6 +106,7 @@ export default {
this.panelId = this.$route.path.split('/')[2] this.panelId = this.$route.path.split('/')[2]
// 加载视图数据 // 加载视图数据
get('panel/group/findOne/' + this.panelId).then(response => { get('panel/group/findOne/' + this.panelId).then(response => {
debugger
this.componentDataSource = this.resetID(JSON.parse(response.data.panelData)) this.componentDataSource = this.resetID(JSON.parse(response.data.panelData))
this.canvasStyleData = JSON.parse(response.data.panelStyle) this.canvasStyleData = JSON.parse(response.data.panelStyle)
this.resize() this.resize()
@ -148,7 +149,7 @@ export default {
min-height: 600px; min-height: 600px;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-size: 100% !important; background-size: 100% 100% !important;
overflow: auto; overflow: auto;
position: relative; position: relative;
margin: 0; margin: 0;

60
frontend/src/components/canvas/custom-component/UserView.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div v-loading="$store.getters.loadingMap[$store.getters.currentPath]" class="rect-shape"> <div v-loading="requestStatus==='waiting'" class="rect-shape">
<div v-if="requestStatus==='error'" style=";width: 100%;height: 100%;background-color: #ece7e7; text-align: center"> <div v-if="requestStatus==='error'" style=";width: 100%;height: 100%;background-color: #ece7e7; text-align: center">
<div style="font-size: 12px; color: #9ea6b2;"> <div style="font-size: 12px; color: #9ea6b2;">
获取数据出错 请联系管理员<br> 获取数据出错 请联系管理员<br>
@ -8,18 +8,16 @@
</div> </div>
<chart-component v-if="requestStatus==='success'&&chart.type && !chart.type.includes('table')" :ref="element.propValue.id" class="chart-class" :chart="chart" /> <chart-component v-if="requestStatus==='success'&&chart.type && !chart.type.includes('table')" :ref="element.propValue.id" class="chart-class" :chart="chart" />
<table-normal v-if="requestStatus==='success'&&chart.type && chart.type.includes('table')" :chart="chart" class="table-class" /> <table-normal v-if="requestStatus==='success'&&chart.type && chart.type.includes('table')" :chart="chart" class="table-class" />
</div> </div>
</template> </template>
<script> <script>
import { post } from '@/api/panel/panel' import { viewData } from '@/api/panel/panel'
import ChartComponent from '@/views/chart/components/ChartComponent.vue' import ChartComponent from '@/views/chart/components/ChartComponent.vue'
import TableNormal from '@/views/chart/components/table/TableNormal' import TableNormal from '@/views/chart/components/table/TableNormal'
import { mapState } from 'vuex' import { mapState } from 'vuex'
import { deepCopy } from '@/components/canvas/utils/utils'
import { import {
DEFAULT_COLOR_CASE, DEFAULT_COLOR_CASE,
@ -58,14 +56,8 @@ export default {
canvasStyleData: { canvasStyleData: {
handler(newVal, oldVla) { handler(newVal, oldVla) {
debugger debugger
// this.chart.viewFirst == false 优先使用仪表盘样式 // this.chart.stylePriority == panel 优先使用仪表盘样式
if (!this.chart.viewFirst) { this.mergeStyle()
this.chart = {
...this.chart,
customAttr: this.canvasStyleData.chart.customAttr,
customStyle: this.canvasStyleData.chart.customStyle
}
}
}, },
deep: true deep: true
} }
@ -76,26 +68,26 @@ export default {
data() { data() {
return { return {
chart: { chart: {
viewFirst: false, stylePriority: 'panel',
xaxis: [], xaxis: '[]',
yaxis: [], yaxis: '[]',
show: true, show: true,
type: 'panel', type: 'panel',
title: '', title: '',
customAttr: { customAttr: JSON.stringify({
color: DEFAULT_COLOR_CASE, color: DEFAULT_COLOR_CASE,
size: DEFAULT_SIZE, size: DEFAULT_SIZE,
label: DEFAULT_LABEL, label: DEFAULT_LABEL,
tooltip: DEFAULT_TOOLTIP tooltip: DEFAULT_TOOLTIP
}, }),
customStyle: { customStyle: JSON.stringify({
text: DEFAULT_TITLE_STYLE, text: DEFAULT_TITLE_STYLE,
legend: DEFAULT_LEGEND_STYLE, legend: DEFAULT_LEGEND_STYLE,
xAxis: DEFAULT_XAXIS_STYLE, xAxis: DEFAULT_XAXIS_STYLE,
yAxis: DEFAULT_YAXIS_STYLE, yAxis: DEFAULT_YAXIS_STYLE,
background: DEFAULT_BACKGROUND_COLOR background: DEFAULT_BACKGROUND_COLOR
}, }),
customFilter: [] customFilter: '[]'
}, },
requestStatus: 'waiting', requestStatus: 'waiting',
message: null message: null
@ -108,15 +100,39 @@ export default {
}, },
methods: { methods: {
mergeStyle() {
// this.chart.stylePriority == panel 优先使用仪表盘样式
if ((this.requestStatus === 'success' || this.requestStatus === 'merging') && this.chart.stylePriority === 'panel' && this.canvasStyleData.chart) {
const customAttrChart = JSON.parse(this.chart.customAttr)
const customStyleChart = JSON.parse(this.chart.customStyle)
const customAttrPanel = JSON.parse(this.canvasStyleData.chart.customAttr)
const customStylePanel = JSON.parse(this.canvasStyleData.chart.customStyle)
// 组件样式-标题设置
customStyleChart.text = customAttrPanel.text
// 组件样式-背景设置
customStyleChart.background = customAttrPanel.background
// 图形属性-颜色设置
customAttrChart.color = customStylePanel.color
this.chart = {
...this.chart,
customAttr: JSON.stringify(customAttrChart),
customStyle: JSON.stringify(customAttrChart)
}
}
},
getData(id) { getData(id) {
if (id) { if (id) {
this.requestStatus = 'waiting' this.requestStatus = 'waiting'
this.message = null this.message = null
post('/chart/view/getData/' + id, this.filter).then(response => { viewData(id, this.filter).then(response => {
// 将视图传入echart组件 // 将视图传入echart组件
debugger
if (response.success) { if (response.success) {
this.chart = response.data this.chart = response.data
this.requestStatus = 'merging'
this.mergeStyle()
this.requestStatus = 'success' this.requestStatus = 'success'
} else { } else {
this.requestStatus = 'error' this.requestStatus = 'error'

2
frontend/src/components/dataease/DeMainContainer.vue
View File

@ -14,7 +14,7 @@ export default {
.ms-main-container { .ms-main-container {
padding: 15px; padding: 15px;
height: calc(100vh - 80px); height: 100vh;
} }
</style> </style>

56
frontend/src/views/chart/components/shape-attr/ColorSelector.vue
View File

@ -8,31 +8,34 @@
> >
<el-col> <el-col>
<el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini"> <el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini">
<el-form-item v-show="chart.type && !chart.type.includes('table')" :label="$t('chart.color_case')" class="form-item"> <div v-if="sourceType==='view' || sourceType==='panelEchart'">
<el-select v-model="colorForm.value" :placeholder="$t('chart.pls_slc_color_case')" size="mini" @change="changeColorCase"> <el-form-item v-show="chart.type && !chart.type.includes('table')" :label="$t('chart.color_case')" class="form-item">
<el-option v-for="option in colorCases" :key="option.value" :label="option.name" :value="option.value" style="display: flex;align-items: center;"> <el-select v-model="colorForm.value" :placeholder="$t('chart.pls_slc_color_case')" size="mini" @change="changeColorCase">
<div style="float: left"> <el-option v-for="option in colorCases" :key="option.value" :label="option.name" :value="option.value" style="display: flex;align-items: center;">
<span v-for="(c,index) in option.colors" :key="index" :style="{width: '20px',height: '20px',float: 'left',backgroundColor: c}" /> <div style="float: left">
</div> <span v-for="(c,index) in option.colors" :key="index" :style="{width: '20px',height: '20px',float: 'left',backgroundColor: c}" />
<span style="margin-left: 4px;">{{ option.name }}</span> </div>
</el-option> <span style="margin-left: 4px;">{{ option.name }}</span>
</el-select> </el-option>
</el-form-item> </el-select>
</el-form-item>
</div>
<div v-if="sourceType==='view' || sourceType==='panelTable'">
<el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_header_bg')" class="form-item">
<colorPicker v-model="colorForm.tableHeaderBgColor" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeColorCase" />
</el-form-item>
<el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_item_bg')" class="form-item">
<colorPicker v-model="colorForm.tableItemBgColor" style="margin-top: 6px;cursor: pointer;z-index: 1003;border: solid 1px black" @change="changeColorCase" />
</el-form-item>
<el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_item_font_color')" class="form-item">
<colorPicker v-model="colorForm.tableFontColor" style="margin-top: 6px;cursor: pointer;z-index: 1002;border: solid 1px black" @change="changeColorCase" />
</el-form-item>
<el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.stripe')" class="form-item">
<el-checkbox v-model="colorForm.tableStripe" @change="changeColorCase">{{ $t('chart.stripe') }}</el-checkbox>
</el-form-item>
</div>
<el-form-item v-show="chart.type && chart.type.includes('table')" :label="$t('chart.table_header_bg')" class="form-item"> <el-form-item v-if="sourceType==='view'" :label="$t('chart.not_alpha')" class="form-item form-item-slider">
<colorPicker v-model="colorForm.tableHeaderBgColor" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeColorCase" />
</el-form-item>
<el-form-item v-show="chart.type && chart.type.includes('table')" :label="$t('chart.table_item_bg')" class="form-item">
<colorPicker v-model="colorForm.tableItemBgColor" style="margin-top: 6px;cursor: pointer;z-index: 1003;border: solid 1px black" @change="changeColorCase" />
</el-form-item>
<el-form-item v-show="chart.type && chart.type.includes('table')" :label="$t('chart.table_item_font_color')" class="form-item">
<colorPicker v-model="colorForm.tableFontColor" style="margin-top: 6px;cursor: pointer;z-index: 1002;border: solid 1px black" @change="changeColorCase" />
</el-form-item>
<el-form-item v-show="chart.type && chart.type.includes('table')" :label="$t('chart.stripe')" class="form-item">
<el-checkbox v-model="colorForm.tableStripe" @change="changeColorCase">{{ $t('chart.stripe') }}</el-checkbox>
</el-form-item>
<el-form-item :label="$t('chart.not_alpha')" class="form-item form-item-slider">
<el-slider v-model="colorForm.alpha" show-input :show-input-controls="false" input-size="mini" @change="changeColorCase" /> <el-slider v-model="colorForm.alpha" show-input :show-input-controls="false" input-size="mini" @change="changeColorCase" />
</el-form-item> </el-form-item>
</el-form> </el-form>
@ -53,6 +56,11 @@ export default {
chart: { chart: {
type: Object, type: Object,
required: true required: true
},
sourceType: {
type: String,
default: 'view',
required: false
} }
}, },
data() { data() {

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

@ -75,7 +75,7 @@
<div style="border-bottom: 1px solid #E6E6E6;overflow-y:hidden;height: 62px;" class="padding-lr"> <div style="border-bottom: 1px solid #E6E6E6;overflow-y:hidden;height: 62px;" class="padding-lr">
<el-row> <el-row>
<span>{{ $t('chart.title') }}</span> <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-button style="float: right;padding: 0;margin: 8px 0 0 0;font-size: 12px;" type="text" @click="saveWithSnapshot()">{{ $t('chart.confirm') }}</el-button>
</el-row> </el-row>
<el-form> <el-form>
<el-form-item class="form-item"> <el-form-item class="form-item">
@ -125,21 +125,30 @@
</el-row> </el-row>
</div> </div>
<div style="height: 40%;overflow:hidden;border-top: 1px solid #e6e6e6"> <div style="height: 40%;overflow:hidden;border-top: 1px solid #e6e6e6">
<el-tabs type="card" :stretch="true" class="tab-header"> <el-row class="padding-lr">
<el-tab-pane :label="$t('chart.shape_attr')" class="padding-lr"> <span>样式优先级</span>
<color-selector class="attr-selector" :chart="chart" @onColorChange="onColorChange" /> <el-radio-group v-model="view.stylePriority" size="mini" @change="save">
<size-selector class="attr-selector" :chart="chart" @onSizeChange="onSizeChange" /> <el-radio style="margin-left: 20px" label="view"><span>视图</span></el-radio>
<label-selector v-show="!view.type.includes('table')" class="attr-selector" :chart="chart" @onLabelChange="onLabelChange" /> <el-radio label="panel"><span>仪表盘</span></el-radio>
<tooltip-selector v-show="!view.type.includes('table')" class="attr-selector" :chart="chart" @onTooltipChange="onTooltipChange" /> </el-radio-group>
</el-tab-pane> </el-row>
<el-tab-pane :label="$t('chart.module_style')" class="padding-lr"> <el-row>
<title-selector class="attr-selector" :chart="chart" @onTextChange="onTextChange" /> <el-tabs type="card" :stretch="true" class="tab-header">
<legend-selector v-show="!view.type.includes('table')" class="attr-selector" :chart="chart" @onLegendChange="onLegendChange" /> <el-tab-pane :label="$t('chart.shape_attr')" class="padding-lr">
<x-axis-selector v-show="view.type.includes('bar') || view.type.includes('line')" class="attr-selector" :chart="chart" @onChangeXAxisForm="onChangeXAxisForm" /> <color-selector class="attr-selector" :chart="chart" @onColorChange="onColorChange" />
<y-axis-selector v-show="view.type.includes('bar') || view.type.includes('line')" class="attr-selector" :chart="chart" @onChangeYAxisForm="onChangeYAxisForm" /> <size-selector class="attr-selector" :chart="chart" @onSizeChange="onSizeChange" />
<background-color-selector class="attr-selector" :chart="chart" @onChangeBackgroundForm="onChangeBackgroundForm" /> <label-selector v-show="!view.type.includes('table')" class="attr-selector" :chart="chart" @onLabelChange="onLabelChange" />
</el-tab-pane> <tooltip-selector v-show="!view.type.includes('table')" class="attr-selector" :chart="chart" @onTooltipChange="onTooltipChange" />
</el-tabs> </el-tab-pane>
<el-tab-pane :label="$t('chart.module_style')" class="padding-lr">
<title-selector class="attr-selector" :chart="chart" @onTextChange="onTextChange" />
<legend-selector v-show="!view.type.includes('table')" class="attr-selector" :chart="chart" @onLegendChange="onLegendChange" />
<x-axis-selector v-show="view.type.includes('bar') || view.type.includes('line')" class="attr-selector" :chart="chart" @onChangeXAxisForm="onChangeXAxisForm" />
<y-axis-selector v-show="view.type.includes('bar') || view.type.includes('line')" class="attr-selector" :chart="chart" @onChangeYAxisForm="onChangeYAxisForm" />
<background-color-selector class="attr-selector" :chart="chart" @onChangeBackgroundForm="onChangeBackgroundForm" />
</el-tab-pane>
</el-tabs>
</el-row>
</div> </div>
<div v-if="false" style="overflow:auto;border-top: 1px solid #e6e6e6" class="padding-lr filter-class"> <div v-if="false" style="overflow:auto;border-top: 1px solid #e6e6e6" class="padding-lr filter-class">
<span>{{ $t('chart.result_filter') }}</span> <span>{{ $t('chart.result_filter') }}</span>
@ -195,8 +204,10 @@
</el-row> </el-row>
</el-row> </el-row>
<chart-component v-if="chart.type && !chart.type.includes('table')" :chart-id="chart.id" :chart="chart" class="chart-class" /> <div ref="imageWrapper" style="height: 100%">
<table-normal v-if="chart.type && chart.type.includes('table')" :chart="chart" class="table-class" /> <chart-component v-if="chart.type && !chart.type.includes('table')" :chart-id="chart.id" :chart="chart" class="chart-class" />
<table-normal v-if="chart.type && chart.type.includes('table')" :chart="chart" class="table-class" />
</div>
</el-row> </el-row>
</el-col> </el-col>
</el-row> </el-row>
@ -253,6 +264,7 @@ import FilterItem from '../components/drag-item/FilterItem'
import ChartComponent from '../components/ChartComponent' import ChartComponent from '../components/ChartComponent'
import bus from '@/utils/bus' import bus from '@/utils/bus'
import DatasetChartDetail from '../../dataset/common/DatasetChartDetail' import DatasetChartDetail from '../../dataset/common/DatasetChartDetail'
import html2canvas from 'html2canvas'
// shape attr,component style // shape attr,component style
import { import {
@ -294,6 +306,7 @@ export default {
dimension: [], dimension: [],
quota: [], quota: [],
view: { view: {
stylePriority: 'panel',
xaxis: [], xaxis: [],
yaxis: [], yaxis: [],
show: true, show: true,
@ -373,7 +386,10 @@ export default {
this.quota = response.data.quota this.quota = response.data.quota
}) })
}, },
save() { saveWithSnapshot(){
this.save('true')
},
save(withSnapshot) {
const view = JSON.parse(JSON.stringify(this.view)) const view = JSON.parse(JSON.stringify(this.view))
view.id = this.view.id view.id = this.view.id
view.sceneId = this.view.sceneId view.sceneId = this.view.sceneId
@ -415,12 +431,29 @@ export default {
view.customAttr = JSON.stringify(view.customAttr) view.customAttr = JSON.stringify(view.customAttr)
view.customStyle = JSON.stringify(view.customStyle) view.customStyle = JSON.stringify(view.customStyle)
view.customFilter = JSON.stringify(view.customFilter) view.customFilter = JSON.stringify(view.customFilter)
post('/chart/view/save', view).then(response => { debugger
// this.get(response.data.id); if (withSnapshot==='true') {
this.getData(response.data.id) html2canvas(this.$refs.imageWrapper).then(canvas => {
this.$store.dispatch('chart/setChartSceneData', null) const snapshot = canvas.toDataURL('image/jpeg', 0.2) // 0.2是图片质量
this.$store.dispatch('chart/setChartSceneData', response.data) if (snapshot !== '') {
}) view.snapshot = snapshot
debugger
post('/chart/view/save', view).then(response => {
// this.get(response.data.id);
this.getData(response.data.id)
this.$store.dispatch('chart/setChartSceneData', null)
this.$store.dispatch('chart/setChartSceneData', response.data)
})
}
})
} else {
post('/chart/view/save', view).then(response => {
// this.get(response.data.id);
this.getData(response.data.id)
this.$store.dispatch('chart/setChartSceneData', null)
this.$store.dispatch('chart/setChartSceneData', response.data)
})
}
}, },
closeEdit() { closeEdit() {
// 从仪表盘入口关闭 // 从仪表盘入口关闭

114
frontend/src/views/panel/SubjectSetting/index.vue
View File

@ -14,34 +14,28 @@
<component-gap class="attr-selector" /> <component-gap class="attr-selector" />
</el-row> </el-row>
</el-collapse-item> </el-collapse-item>
<el-collapse-item title="组件样式" name="component" @click="testClick"> <el-collapse-item title="组件样式" name="component">
<el-row style="background-color: #f7f8fa; margin: 5px"> <el-row style="background-color: #f7f8fa; margin: 5px">
<title-selector class="attr-selector" :chart="chart" @onTextChange="onTextChange" /> <title-selector class="attr-selector" :chart="chart" @onTextChange="onTextChange" />
<legend-selector class="attr-selector" :chart="chart" @onLegendChange="onLegendChange" />
<x-axis-selector class="attr-selector" :chart="chart" @onChangeXAxisForm="onChangeXAxisForm" />
<y-axis-selector class="attr-selector" :chart="chart" @onChangeYAxisForm="onChangeYAxisForm" />
<background-color-selector class="attr-selector" :chart="chart" @onChangeBackgroundForm="onChangeBackgroundForm" /> <background-color-selector class="attr-selector" :chart="chart" @onChangeBackgroundForm="onChangeBackgroundForm" />
</el-row> </el-row>
</el-collapse-item> </el-collapse-item>
<el-collapse-item title="图形属性" name="graphical"> <el-collapse-item title="图形属性" name="graphical">
<el-row style="background-color: #f7f8fa; margin: 5px"> <el-row style="background-color: #f7f8fa; margin: 5px">
<color-selector class="attr-selector" :chart="chart" @onColorChange="onColorChange" /> <color-selector :source-type="'panelEchart'" class="attr-selector" :chart="chart" @onColorChange="onColorChange" />
<label-selector class="attr-selector" :chart="chart" @onLabelChange="onLabelChange" />
<tooltip-selector class="attr-selector" :chart="chart" @onTooltipChange="onTooltipChange" />
</el-row> </el-row>
</el-collapse-item> </el-collapse-item>
<el-collapse-item title="表格" name="table"> <el-collapse-item title="表格" name="table">
<el-row style="background-color: #f7f8fa; margin: 5px"> <el-row style="background-color: #f7f8fa; margin: 5px">
<label-selector class="attr-selector" :chart="chart" @onLabelChange="onLabelChange" /> <color-selector :source-type="'panelTable'" class="attr-selector" :chart="chart" @onColorChange="onColorChange" />
<tooltip-selector class="attr-selector" :chart="chart" @onTooltipChange="onTooltipChange" />
</el-row>
</el-collapse-item>
<el-collapse-item title="过滤组件" name="filter">
<el-row style="background-color: #f7f8fa; margin: 5px">
<background-selector class="attr-selector" @onChangePanelStyle="onChangePanelStyle" />
<component-gap class="attr-selector" @onChangePanelStyle="onChangePanelStyle" />
</el-row> </el-row>
</el-collapse-item> </el-collapse-item>
<!-- <el-collapse-item title="过滤组件" name="filter">-->
<!-- <el-row style="background-color: #f7f8fa; margin: 5px">-->
<!-- <background-selector class="attr-selector" @onChangePanelStyle="onChangePanelStyle" />-->
<!-- <component-gap class="attr-selector" @onChangePanelStyle="onChangePanelStyle" />-->
<!-- </el-row>-->
<!-- </el-collapse-item>-->
</el-collapse> </el-collapse>
</div> </div>
</el-row> </el-row>
@ -53,17 +47,8 @@ import BackgroundSelector from './PanelStyle/BackgroundSelector'
import ComponentGap from './PanelStyle/ComponentGap' import ComponentGap from './PanelStyle/ComponentGap'
import ColorSelector from '@/views/chart/components/shape-attr/ColorSelector' import ColorSelector from '@/views/chart/components/shape-attr/ColorSelector'
import SizeSelector from '@/views/chart/components/shape-attr/SizeSelector'
import LabelSelector from '@/views/chart/components/shape-attr/LabelSelector'
import TitleSelector from '@/views/chart/components/component-style/TitleSelector' import TitleSelector from '@/views/chart/components/component-style/TitleSelector'
import LegendSelector from '@/views/chart/components/component-style/LegendSelector'
import TooltipSelector from '@/views/chart/components/shape-attr/TooltipSelector'
import XAxisSelector from '@/views/chart/components/component-style/XAxisSelector'
import YAxisSelector from '@/views/chart/components/component-style/YAxisSelector'
import BackgroundColorSelector from '@/views/chart/components/component-style/BackgroundColorSelector' import BackgroundColorSelector from '@/views/chart/components/component-style/BackgroundColorSelector'
import QuotaFilterEditor from '@/views/chart/components/filter/QuotaFilterEditor'
import DimensionFilterEditor from '@/views/chart/components/filter/DimensionFilterEditor'
import TableNormal from '@/views/chart/components/table/TableNormal'
import { mapState } from 'vuex' import { mapState } from 'vuex'
import { deepCopy } from '@/components/canvas/utils/utils' import { deepCopy } from '@/components/canvas/utils/utils'
@ -73,17 +58,8 @@ export default {
BackgroundSelector, BackgroundSelector,
ComponentGap, ComponentGap,
ColorSelector, ColorSelector,
SizeSelector,
LabelSelector,
TitleSelector, TitleSelector,
LegendSelector, BackgroundColorSelector
TooltipSelector,
XAxisSelector,
YAxisSelector,
BackgroundColorSelector,
QuotaFilterEditor,
DimensionFilterEditor,
TableNormal
}, },
data() { data() {
return { return {
@ -118,8 +94,12 @@ export default {
debugger debugger
// 初始化赋值 // 初始化赋值
const chart = deepCopy(this.canvasStyleData.chart) const chart = deepCopy(this.canvasStyleData.chart)
chart.xaxis = JSON.parse(chart.xaxis) if (chart.xaxis) {
chart.yaxis = JSON.parse(chart.yaxis) chart.xaxis = JSON.parse(chart.xaxis)
}
if (chart.yaxis) {
chart.yaxis = JSON.parse(chart.yaxis)
}
chart.customAttr = JSON.parse(chart.customAttr) chart.customAttr = JSON.parse(chart.customAttr)
chart.customStyle = JSON.parse(chart.customStyle) chart.customStyle = JSON.parse(chart.customStyle)
chart.customFilter = JSON.parse(chart.customFilter) chart.customFilter = JSON.parse(chart.customFilter)
@ -127,81 +107,21 @@ export default {
}, },
methods: { methods: {
testClick(val) {
debugger
console.log(JSON.stringify(this.chart))
console.log('message+>')
},
handleChange(val) { handleChange(val) {
console.log(val) console.log(val)
}, },
onChangePanelStyle(parma) { onChangePanelStyle(parma) {
console.log('parma:' + JSON.stringify(parma)) console.log('parma:' + JSON.stringify(parma))
}, },
dimensionItemChange(item) {
this.save()
},
dimensionItemRemove(item) {
this.chart.xaxis.splice(item.index, 1)
this.save()
},
quotaItemChange(item) {
// 更新item
// this.view.yaxis.forEach(function(ele) {
// if (ele.id === item.id) {
// ele.summary = item.summary
// }
// })
this.save()
},
quotaItemRemove(item) {
this.chart.yaxis.splice(item.index, 1)
this.save()
},
onColorChange(val) { onColorChange(val) {
this.chart.customAttr.color = val this.chart.customAttr.color = val
this.save() this.save()
}, },
onSizeChange(val) {
this.chart.customAttr.size = val
this.save()
},
onTextChange(val) { onTextChange(val) {
debugger
this.chart.customStyle.text = val this.chart.customStyle.text = val
// this.save() // this.save()
}, },
onLegendChange(val) {
this.chart.customStyle.legend = val
this.save()
},
onLabelChange(val) {
this.chart.customAttr.label = val
this.save()
},
onTooltipChange(val) {
this.chart.customAttr.tooltip = val
this.save()
},
onChangeXAxisForm(val) {
this.chart.customStyle.xAxis = val
this.save()
},
onChangeYAxisForm(val) {
this.chart.customStyle.yAxis = val
this.save()
},
onChangeBackgroundForm(val) { onChangeBackgroundForm(val) {
this.chart.customStyle.background = val this.chart.customStyle.background = val
this.save() this.save()

1
frontend/src/views/panel/ViewSelect/index.vue
View File

@ -14,6 +14,7 @@
draggable draggable
:allow-drop="allowDrop" :allow-drop="allowDrop"
:allow-drag="allowDrag" :allow-drag="allowDrag"
:filter-node-method="filterNode"
@node-drag-start="handleDragStart" @node-drag-start="handleDragStart"
/> />
</div> </div>

127
frontend/src/views/panel/edit/index.vue
View File

@ -1,73 +1,73 @@
<template> <template>
<el-container> <el-row>
<el-header class="de-header"> <el-row class="de-header">
<el-row class="panel-design-head"> <span style="float: left;line-height: 35px; color: gray">
<span style="float: left;line-height: 35px; color: gray"> 名称：{{ panelInfo.name || '测试仪表板' }}
名称：{{ panelInfo.name || '测试仪表板' }} </span>
</span> <!--横向工具栏-->
<!--横向工具栏--> <Toolbar @showPanel="showPanel" />
<Toolbar @showPanel="showPanel" /> </el-row>
</el-row> <el-row>
</el-header> <de-container>
<de-container> <de-aside-container class="ms-aside-container">
<de-aside-container class="ms-aside-container"> <div style="width: 60px; left: 0px; top: 0px; bottom: 0px; position: absolute">
<div style="width: 60px; left: 0px; top: 0px; bottom: 0px; position: absolute"> <div style="width: 60px;height: 100%;overflow: hidden auto;position: relative;margin: 0px auto;">
<div style="width: 60px;height: 100%;overflow: hidden auto;position: relative;margin: 0px auto;"> <!-- 视图图表 -->
<!-- 视图图表 --> <div class="button-div-class" style=" width: 24px;height: 24px;text-align: center;line-height: 1;position: relative;margin: 32px auto 0px;font-size:150%;">
<div class="button-div-class" style=" width: 24px;height: 24px;text-align: center;line-height: 1;position: relative;margin: 32px auto 0px;font-size:150%;"> <el-button circle class="el-icon-circle-plus-outline" size="mini" @click="showPanel(0)" />
<el-button circle class="el-icon-circle-plus-outline" size="mini" @click="showPanel(0)" />
</div>
<!-- 视图文字 -->
<div style="position: relative; margin: 18px auto 30px">
<div style="max-width: 100%;text-align: center;white-space: nowrap;text-overflow: ellipsis;position: relative;flex-shrink: 0;">
视图
</div> </div>
</div> <!-- 视图文字 -->
<!-- 视图分割线 --> <div style="position: relative; margin: 18px auto 30px">
<div style="height: 1px; position: relative; margin: 0px auto;background-color:#E6E6E6;"> <div style="max-width: 100%;text-align: center;white-space: nowrap;text-overflow: ellipsis;position: relative;flex-shrink: 0;">
<div style="width: 60px;height: 1px;line-height: 1px;text-align: center;white-space: pre;text-overflow: ellipsis;position: relative;flex-shrink: 0;" /> 视图
</div>
<!-- 过滤组件 -->
<div tabindex="-1" style="position: relative; margin: 20px auto">
<div style="height: 60px; position: relative">
<div class="button-div-class" style=" text-align: center;line-height: 1;position: absolute;inset: 0px 0px 45px; ">
<el-button circle class="el-icon-s-tools" size="mini" @click="showPanel(1)" />
</div> </div>
<div style=" position: absolute;left: 0px;right: 0px;bottom: 10px; height: 16px;"> </div>
<div style=" max-width: 100%;text-align: center;white-space: nowrap;text-overflow: ellipsis;position: relative;flex-shrink: 0;"> <!-- 视图分割线 -->
组件 <div style="height: 1px; position: relative; margin: 0px auto;background-color:#E6E6E6;">
<div style="width: 60px;height: 1px;line-height: 1px;text-align: center;white-space: pre;text-overflow: ellipsis;position: relative;flex-shrink: 0;" />
</div>
<!-- 过滤组件 -->
<div tabindex="-1" style="position: relative; margin: 20px auto">
<div style="height: 60px; position: relative">
<div class="button-div-class" style=" text-align: center;line-height: 1;position: absolute;inset: 0px 0px 45px; ">
<el-button circle class="el-icon-s-tools" size="mini" @click="showPanel(1)" />
</div>
<div style=" position: absolute;left: 0px;right: 0px;bottom: 10px; height: 16px;">
<div style=" max-width: 100%;text-align: center;white-space: nowrap;text-overflow: ellipsis;position: relative;flex-shrink: 0;">
组件
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <div ref="leftPanel" :class="{show:show}" class="leftPanel-container">
<div ref="leftPanel" :class="{show:show}" class="leftPanel-container"> <div />
<div /> <div v-show="show" class="leftPanel">
<div v-show="show" class="leftPanel">
<div class="leftPanel-items"> <div style="height:100%;overflow-y: auto">
<view-select v-show=" showIndex===0" /> <view-select v-show=" showIndex===0" />
<filter-group v-show="showIndex===1" /> <filter-group v-show="showIndex===1" />
<subject-setting v-show="showIndex===2" /> <subject-setting v-show="showIndex===2" />
</div>
</div> </div>
</div> </div>
</div> </de-aside-container>
</de-aside-container>
<!--画布区域--> <!--画布区域-->
<de-main-container class="ms-main-container"> <de-main-container>
<div <div
class="content" class="content"
@drop="handleDrop" @drop="handleDrop"
@dragover="handleDragOver" @dragover="handleDragOver"
@mousedown="handleMouseDown" @mousedown="handleMouseDown"
@mouseup="deselectCurComponent" @mouseup="deselectCurComponent"
> >
<Editor /> <Editor />
</div> </div>
</de-main-container> </de-main-container>
</de-container> </de-container>
</el-row>
<el-dialog <el-dialog
v-if="filterVisible && panelInfo.id" v-if="filterVisible && panelInfo.id"
@ -103,7 +103,7 @@
</div> </div>
</el-dialog> </el-dialog>
</el-container> </el-row>
</template> </template>
<script> <script>
@ -365,16 +365,11 @@ export default {
<style scoped> <style scoped>
.ms-aside-container { .ms-aside-container {
height: calc(100vh - 91px); height: calc(100vh - 91px);
padding: 15px; min-width: 40px;
min-width: 60px;
max-width: 60px; max-width: 60px;
border: none; border: none;
} }
.ms-main-container {
height: calc(100vh - 91px);
}
.de-header { .de-header {
height: 35px !important; height: 35px !important;
border-bottom: 1px solid #E6E6E6; border-bottom: 1px solid #E6E6E6;
@ -383,7 +378,7 @@ export default {
.showLeftPanel { .showLeftPanel {
overflow: hidden; overflow: hidden;
position: relative; position: relative;
width: calc(100% - 15px); width: 100%;
} }
</style> </style>

5
frontend/src/views/panel/list/EditPanel/index.vue
View File

@ -32,7 +32,7 @@
</template> </template>
<script> <script>
import { post } from '@/api/panel/panel' import { post, panelSave } from '@/api/panel/panel'
import TemplateAllList from './TemplateAllList' import TemplateAllList from './TemplateAllList'
export default { export default {
@ -101,7 +101,8 @@ export default {
this.$warning('名称不能为空') this.$warning('名称不能为空')
return false return false
} }
post('/panel/group/save', this.editPanel.panelInfo).then(response => { panelSave(this.editPanel.panelInfo).then(response => {
debugger
this.$message({ this.$message({
message: '保存成功', message: '保存成功',
type: 'success', type: 'success',

80
frontend/src/views/panel/list/PanelList.vue
View File

@ -151,6 +151,19 @@ import { uuid } from 'vue-uuid'
import bus from '@/utils/bus' import bus from '@/utils/bus'
import EditPanel from './EditPanel' import EditPanel from './EditPanel'
import { addGroup, delGroup, groupTree, defaultTree, get } from '@/api/panel/panel' import { addGroup, delGroup, groupTree, defaultTree, get } from '@/api/panel/panel'
import {
DEFAULT_COLOR_CASE,
DEFAULT_SIZE,
DEFAULT_TITLE_STYLE,
DEFAULT_LEGEND_STYLE,
DEFAULT_LABEL,
DEFAULT_TOOLTIP,
DEFAULT_XAXIS_STYLE,
DEFAULT_YAXIS_STYLE,
DEFAULT_BACKGROUND_COLOR
} from '@/views/chart/chart/chart'
import { DEFAULT_PANEL_STYLE } from '@/views/panel/panel'
export default { export default {
name: 'PanelList', name: 'PanelList',
@ -168,8 +181,34 @@ export default {
level: null, level: null,
nodeType: null, nodeType: null,
panelType: null, panelType: null,
panelStyle: null, panelStyle: JSON.stringify({
panelDate: null width: 1680,
height: 1050,
scale: 100,
openCommonStyle: true,
panel: DEFAULT_PANEL_STYLE,
chart: {
xaxis: '[]',
yaxis: '[]',
show: true,
type: 'panel',
title: '',
customAttr: JSON.stringify({
color: DEFAULT_COLOR_CASE,
size: DEFAULT_SIZE,
label: DEFAULT_LABEL,
tooltip: DEFAULT_TOOLTIP
}),
customStyle: JSON.stringify({
text: DEFAULT_TITLE_STYLE,
legend: DEFAULT_LEGEND_STYLE,
xAxis: DEFAULT_XAXIS_STYLE,
yAxis: DEFAULT_YAXIS_STYLE,
background: DEFAULT_BACKGROUND_COLOR
}),
customFilter: '[]'
}}),
panelData: '[]'
} }
}, },
editPanel: { editPanel: {
@ -183,8 +222,34 @@ export default {
level: null, level: null,
nodeType: null, nodeType: null,
panelType: null, panelType: null,
panelStyle: null, panelStyle: JSON.stringify({
panelDate: null width: 1680,
height: 1050,
scale: 100,
openCommonStyle: true,
panel: DEFAULT_PANEL_STYLE,
chart: {
xaxis: '[]',
yaxis: '[]',
show: true,
type: 'panel',
title: '',
customAttr: JSON.stringify({
color: DEFAULT_COLOR_CASE,
size: DEFAULT_SIZE,
label: DEFAULT_LABEL,
tooltip: DEFAULT_TOOLTIP
}),
customStyle: JSON.stringify({
text: DEFAULT_TITLE_STYLE,
legend: DEFAULT_LEGEND_STYLE,
xAxis: DEFAULT_XAXIS_STYLE,
yAxis: DEFAULT_YAXIS_STYLE,
background: DEFAULT_BACKGROUND_COLOR
}),
customFilter: '[]'
}}),
panelData: '[]'
} }
}, },
linkTitle: '链接分享', linkTitle: '链接分享',
@ -247,6 +312,7 @@ export default {
this.tree(this.groupForm) this.tree(this.groupForm)
}, },
showEditPanel(param) { showEditPanel(param) {
debugger
this.editPanel = JSON.parse(JSON.stringify(this.editPanelModel)) this.editPanel = JSON.parse(JSON.stringify(this.editPanelModel))
this.editPanel.optType = param.optType this.editPanel.optType = param.optType
this.editPanel.panelInfo.nodeType = param.type this.editPanel.panelInfo.nodeType = param.type
@ -399,8 +465,10 @@ export default {
if (data.nodeType === 'panel') { if (data.nodeType === 'panel') {
// 加载视图数据 // 加载视图数据
get('panel/group/findOne/' + data.id).then(response => { get('panel/group/findOne/' + data.id).then(response => {
debugger
this.$store.commit('setComponentData', this.resetID(JSON.parse(response.data.panelData))) this.$store.commit('setComponentData', this.resetID(JSON.parse(response.data.panelData)))
this.$store.commit('setCanvasStyle', JSON.parse(response.data.panelStyle)) const temp = JSON.parse(response.data.panelStyle)
this.$store.commit('setCanvasStyle', temp)
this.$store.dispatch('panel/setPanelInfo', data) this.$store.dispatch('panel/setPanelInfo', data)
this.currGroup = data this.currGroup = data
}) })
@ -447,7 +515,7 @@ export default {
this.linkResourceId = null this.linkResourceId = null
}, },
resetID(data) { resetID(data) {
if( data ) { if (data) {
data.forEach(item => { data.forEach(item => {
item.id = uuid.v1() item.id = uuid.v1()
}) })

4
frontend/src/views/panel/panel.js
View File

@ -18,8 +18,8 @@ export const DEFAULT_PANEL_STYLE = {
} }
export const DEFAULT_COMMON_CANVAS_STYLE = { export const DEFAULT_COMMON_CANVAS_STYLE = {
width: 1200, width: 1680,
height: 740, height: 1050,
scale: 100, scale: 100,
openCommonStyle: true, openCommonStyle: true,
panel: DEFAULT_PANEL_STYLE, panel: DEFAULT_PANEL_STYLE,