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 String stylePriority;
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");
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 {

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

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

@ -67,7 +67,7 @@
<!-- <table tableName="datasource"/>-->
<!-- <table tableName="sys_dict"/>-->
<!-- <table tableName="sys_dict_item"/>-->
<table tableName="sys_dept"/>
<table tableName="chart_view"/>
<!-- <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({
url: '/panel/table/list',
url: '/chart/view/getData/' + id,
method: 'post',
hideMsg: true,
data
})
}
export function panelSave(data) {
return request({
url: 'panel/group/save',
method: 'post',
loading: true,
data
})
}
@ -104,6 +113,7 @@ export function post(url, data) {
return request({
url: url,
method: 'post',
loading: true,
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 {
overflow: hidden;
position: relative;
width: calc(100% - 15px);
width:100%;
}
</style>

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

@ -1,26 +1,26 @@
<template>
<svg class="grid" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="smallGrid" width="7.236328125" height="7.236328125" patternUnits="userSpaceOnUse">
<path
d="M 7.236328125 0 L 0 0 0 7.236328125"
fill="none"
stroke="rgba(207, 207, 207, 0.3)"
stroke-width="1">
</path>
</pattern>
<pattern id="grid" width="36.181640625" height="36.181640625" patternUnits="userSpaceOnUse">
<rect width="36.181640625" height="36.181640625" fill="url(#smallGrid)"></rect>
<path
d="M 36.181640625 0 L 0 0 0 36.181640625"
fill="none"
stroke="rgba(186, 186, 186, 0.5)"
stroke-width="1">
</path>
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#grid)"></rect>
</svg>
<svg class="grid" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="smallGrid" width="7.236328125" height="7.236328125" patternUnits="userSpaceOnUse">
<path
d="M 7.236328125 0 L 0 0 0 7.236328125"
fill="none"
stroke="rgba(207, 207, 207, 0.3)"
stroke-width="1"
/>
</pattern>
<pattern id="grid" width="36.181640625" height="36.181640625" patternUnits="userSpaceOnUse">
<rect width="36.181640625" height="36.181640625" fill="url(#smallGrid)" />
<path
d="M 36.181640625 0 L 0 0 0 36.181640625"
fill="none"
stroke="rgba(186, 186, 186, 0.5)"
stroke-width="1"
/>
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#grid)" />
</svg>
</template>
<style lang="scss" scoped>
@ -29,4 +29,4 @@
top: 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
},
handleScaleChange() {
const componentData = deepCopy(this.componentData)
componentData.forEach(component => {
Object.keys(component.style).forEach(key => {
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.componentData) {
const componentData = deepCopy(this.componentData)
componentData.forEach(component => {
Object.keys(component.style).forEach(key => {
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)
}
})
})
})
this.componentDataShow = componentData
this.$nextTick(() => (eventBus.$emit('resizing', '')))
this.componentDataShow = componentData
this.$nextTick(() => (eventBus.$emit('resizing', '')))
}
}
}
}
@ -136,7 +138,7 @@ export default {
width: 100%;
height: 100%;
border: 1px solid #E6E6E6;
background-size: 100% !important;
background-size: 100% 100% !important;
.canvas-container {
width: 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]
// 加载视图数据
get('panel/group/findOne/' + this.panelId).then(response => {
debugger
this.componentDataSource = this.resetID(JSON.parse(response.data.panelData))
this.canvasStyleData = JSON.parse(response.data.panelStyle)
this.resize()
@ -148,7 +149,7 @@ export default {
min-height: 600px;
width: 100%;
height: 100%;
background-size: 100% !important;
background-size: 100% 100% !important;
overflow: auto;
position: relative;
margin: 0;

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

@ -1,5 +1,5 @@
<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 style="font-size: 12px; color: #9ea6b2;">
获取数据出错 请联系管理员<br>
@ -8,18 +8,16 @@
</div>
<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" />
</div>
</template>
<script>
import { post } from '@/api/panel/panel'
import { viewData } from '@/api/panel/panel'
import ChartComponent from '@/views/chart/components/ChartComponent.vue'
import TableNormal from '@/views/chart/components/table/TableNormal'
import { mapState } from 'vuex'
import { deepCopy } from '@/components/canvas/utils/utils'
import {
DEFAULT_COLOR_CASE,
@ -58,14 +56,8 @@ export default {
canvasStyleData: {
handler(newVal, oldVla) {
debugger
// this.chart.viewFirst == false 优先使用仪表盘样式
if (!this.chart.viewFirst) {
this.chart = {
...this.chart,
customAttr: this.canvasStyleData.chart.customAttr,
customStyle: this.canvasStyleData.chart.customStyle
}
}
// this.chart.stylePriority == panel 优先使用仪表盘样式
this.mergeStyle()
},
deep: true
}
@ -76,26 +68,26 @@ export default {
data() {
return {
chart: {
viewFirst: false,
xaxis: [],
yaxis: [],
stylePriority: 'panel',
xaxis: '[]',
yaxis: '[]',
show: true,
type: 'panel',
title: '',
customAttr: {
customAttr: JSON.stringify({
color: DEFAULT_COLOR_CASE,
size: DEFAULT_SIZE,
label: DEFAULT_LABEL,
tooltip: DEFAULT_TOOLTIP
},
customStyle: {
}),
customStyle: JSON.stringify({
text: DEFAULT_TITLE_STYLE,
legend: DEFAULT_LEGEND_STYLE,
xAxis: DEFAULT_XAXIS_STYLE,
yAxis: DEFAULT_YAXIS_STYLE,
background: DEFAULT_BACKGROUND_COLOR
},
customFilter: []
}),
customFilter: '[]'
},
requestStatus: 'waiting',
message: null
@ -108,15 +100,39 @@ export default {
},
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) {
if (id) {
this.requestStatus = 'waiting'
this.message = null
post('/chart/view/getData/' + id, this.filter).then(response => {
viewData(id, this.filter).then(response => {
// 将视图传入echart组件
debugger
if (response.success) {
this.chart = response.data
this.requestStatus = 'merging'
this.mergeStyle()
this.requestStatus = 'success'
} else {
this.requestStatus = 'error'

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

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

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

@ -8,31 +8,34 @@
>
<el-col>
<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">
<el-select v-model="colorForm.value" :placeholder="$t('chart.pls_slc_color_case')" size="mini" @change="changeColorCase">
<el-option v-for="option in colorCases" :key="option.value" :label="option.name" :value="option.value" style="display: flex;align-items: center;">
<div style="float: left">
<span v-for="(c,index) in option.colors" :key="index" :style="{width: '20px',height: '20px',float: 'left',backgroundColor: c}" />
</div>
<span style="margin-left: 4px;">{{ option.name }}</span>
</el-option>
</el-select>
</el-form-item>
<div v-if="sourceType==='view' || sourceType==='panelEchart'">
<el-form-item v-show="chart.type && !chart.type.includes('table')" :label="$t('chart.color_case')" class="form-item">
<el-select v-model="colorForm.value" :placeholder="$t('chart.pls_slc_color_case')" size="mini" @change="changeColorCase">
<el-option v-for="option in colorCases" :key="option.value" :label="option.name" :value="option.value" style="display: flex;align-items: center;">
<div style="float: left">
<span v-for="(c,index) in option.colors" :key="index" :style="{width: '20px',height: '20px',float: 'left',backgroundColor: c}" />
</div>
<span style="margin-left: 4px;">{{ option.name }}</span>
</el-option>
</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">
<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-form-item v-if="sourceType==='view'" :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-form-item>
</el-form>
@ -53,6 +56,11 @@ export default {
chart: {
type: Object,
required: true
},
sourceType: {
type: String,
default: 'view',
required: false
}
},
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">
<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-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-form>
<el-form-item class="form-item">
@ -125,21 +125,30 @@
</el-row>
</div>
<div style="height: 40%;overflow:hidden;border-top: 1px solid #e6e6e6">
<el-tabs type="card" :stretch="true" class="tab-header">
<el-tab-pane :label="$t('chart.shape_attr')" class="padding-lr">
<color-selector class="attr-selector" :chart="chart" @onColorChange="onColorChange" />
<size-selector class="attr-selector" :chart="chart" @onSizeChange="onSizeChange" />
<label-selector v-show="!view.type.includes('table')" class="attr-selector" :chart="chart" @onLabelChange="onLabelChange" />
<tooltip-selector v-show="!view.type.includes('table')" class="attr-selector" :chart="chart" @onTooltipChange="onTooltipChange" />
</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 class="padding-lr">
<span>样式优先级</span>
<el-radio-group v-model="view.stylePriority" size="mini" @change="save">
<el-radio style="margin-left: 20px" label="view"><span>视图</span></el-radio>
<el-radio label="panel"><span>仪表盘</span></el-radio>
</el-radio-group>
</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 class="attr-selector" :chart="chart" @onColorChange="onColorChange" />
<size-selector class="attr-selector" :chart="chart" @onSizeChange="onSizeChange" />
<label-selector v-show="!view.type.includes('table')" class="attr-selector" :chart="chart" @onLabelChange="onLabelChange" />
<tooltip-selector v-show="!view.type.includes('table')" class="attr-selector" :chart="chart" @onTooltipChange="onTooltipChange" />
</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 v-if="false" style="overflow:auto;border-top: 1px solid #e6e6e6" class="padding-lr filter-class">
<span>{{ $t('chart.result_filter') }}</span>
@ -195,8 +204,10 @@
</el-row>
</el-row>
<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 ref="imageWrapper" style="height: 100%">
<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-col>
</el-row>
@ -253,6 +264,7 @@ import FilterItem from '../components/drag-item/FilterItem'
import ChartComponent from '../components/ChartComponent'
import bus from '@/utils/bus'
import DatasetChartDetail from '../../dataset/common/DatasetChartDetail'
import html2canvas from 'html2canvas'
// shape attr,component style
import {
@ -294,6 +306,7 @@ export default {
dimension: [],
quota: [],
view: {
stylePriority: 'panel',
xaxis: [],
yaxis: [],
show: true,
@ -373,7 +386,10 @@ export default {
this.quota = response.data.quota
})
},
save() {
saveWithSnapshot(){
this.save('true')
},
save(withSnapshot) {
const view = JSON.parse(JSON.stringify(this.view))
view.id = this.view.id
view.sceneId = this.view.sceneId
@ -415,12 +431,29 @@ export default {
view.customAttr = JSON.stringify(view.customAttr)
view.customStyle = JSON.stringify(view.customStyle)
view.customFilter = JSON.stringify(view.customFilter)
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)
})
debugger
if (withSnapshot==='true') {
html2canvas(this.$refs.imageWrapper).then(canvas => {
const snapshot = canvas.toDataURL('image/jpeg', 0.2) // 0.2是图片质量
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() {
// 从仪表盘入口关闭

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

@ -14,34 +14,28 @@
<component-gap class="attr-selector" />
</el-row>
</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">
<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" />
</el-row>
</el-collapse-item>
<el-collapse-item title="图形属性" name="graphical">
<el-row style="background-color: #f7f8fa; margin: 5px">
<color-selector 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" />
<color-selector :source-type="'panelEchart'" class="attr-selector" :chart="chart" @onColorChange="onColorChange" />
</el-row>
</el-collapse-item>
<el-collapse-item title="表格" name="table">
<el-row style="background-color: #f7f8fa; margin: 5px">
<label-selector class="attr-selector" :chart="chart" @onLabelChange="onLabelChange" />
<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" />
<color-selector :source-type="'panelTable'" class="attr-selector" :chart="chart" @onColorChange="onColorChange" />
</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-collapse-item>-->
</el-collapse>
</div>
</el-row>
@ -53,17 +47,8 @@ import BackgroundSelector from './PanelStyle/BackgroundSelector'
import ComponentGap from './PanelStyle/ComponentGap'
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 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 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 { deepCopy } from '@/components/canvas/utils/utils'
@ -73,17 +58,8 @@ export default {
BackgroundSelector,
ComponentGap,
ColorSelector,
SizeSelector,
LabelSelector,
TitleSelector,
LegendSelector,
TooltipSelector,
XAxisSelector,
YAxisSelector,
BackgroundColorSelector,
QuotaFilterEditor,
DimensionFilterEditor,
TableNormal
BackgroundColorSelector
},
data() {
return {
@ -118,8 +94,12 @@ export default {
debugger
// 初始化赋值
const chart = deepCopy(this.canvasStyleData.chart)
chart.xaxis = JSON.parse(chart.xaxis)
chart.yaxis = JSON.parse(chart.yaxis)
if (chart.xaxis) {
chart.xaxis = JSON.parse(chart.xaxis)
}
if (chart.yaxis) {
chart.yaxis = JSON.parse(chart.yaxis)
}
chart.customAttr = JSON.parse(chart.customAttr)
chart.customStyle = JSON.parse(chart.customStyle)
chart.customFilter = JSON.parse(chart.customFilter)
@ -127,81 +107,21 @@ export default {
},
methods: {
testClick(val) {
debugger
console.log(JSON.stringify(this.chart))
console.log('message+>')
},
handleChange(val) {
console.log(val)
},
onChangePanelStyle(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) {
this.chart.customAttr.color = val
this.save()
},
onSizeChange(val) {
this.chart.customAttr.size = val
this.save()
},
onTextChange(val) {
debugger
this.chart.customStyle.text = val
// 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) {
this.chart.customStyle.background = val
this.save()

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

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

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

@ -1,73 +1,73 @@
<template>
<el-container>
<el-header class="de-header">
<el-row class="panel-design-head">
<span style="float: left;line-height: 35px; color: gray">
名称：{{ panelInfo.name || '测试仪表板' }}
</span>
<!--横向工具栏-->
<Toolbar @showPanel="showPanel" />
</el-row>
</el-header>
<de-container>
<de-aside-container class="ms-aside-container">
<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 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)" />
</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;">
视图
<el-row>
<el-row class="de-header">
<span style="float: left;line-height: 35px; color: gray">
名称：{{ panelInfo.name || '测试仪表板' }}
</span>
<!--横向工具栏-->
<Toolbar @showPanel="showPanel" />
</el-row>
<el-row>
<de-container>
<de-aside-container class="ms-aside-container">
<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 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)" />
</div>
</div>
<!-- 视图分割线 -->
<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 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 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 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 ref="leftPanel" :class="{show:show}" class="leftPanel-container">
<div />
<div v-show="show" class="leftPanel">
<div ref="leftPanel" :class="{show:show}" class="leftPanel-container">
<div />
<div v-show="show" class="leftPanel">
<div class="leftPanel-items">
<view-select v-show=" showIndex===0" />
<filter-group v-show="showIndex===1" />
<subject-setting v-show="showIndex===2" />
<div style="height:100%;overflow-y: auto">
<view-select v-show=" showIndex===0" />
<filter-group v-show="showIndex===1" />
<subject-setting v-show="showIndex===2" />
</div>
</div>
</div>
</div>
</de-aside-container>
</de-aside-container>
<!--画布区域-->
<de-main-container class="ms-main-container">
<div
class="content"
@drop="handleDrop"
@dragover="handleDragOver"
@mousedown="handleMouseDown"
@mouseup="deselectCurComponent"
>
<Editor />
</div>
</de-main-container>
</de-container>
<!--画布区域-->
<de-main-container>
<div
class="content"
@drop="handleDrop"
@dragover="handleDragOver"
@mousedown="handleMouseDown"
@mouseup="deselectCurComponent"
>
<Editor />
</div>
</de-main-container>
</de-container>
</el-row>
<el-dialog
v-if="filterVisible && panelInfo.id"
@ -103,7 +103,7 @@
</div>
</el-dialog>
</el-container>
</el-row>
</template>
<script>
@ -365,16 +365,11 @@ export default {
<style scoped>
.ms-aside-container {
height: calc(100vh - 91px);
padding: 15px;
min-width: 60px;
min-width: 40px;
max-width: 60px;
border: none;
}
.ms-main-container {
height: calc(100vh - 91px);
}
.de-header {
height: 35px !important;
border-bottom: 1px solid #E6E6E6;
@ -383,7 +378,7 @@ export default {
.showLeftPanel {
overflow: hidden;
position: relative;
width: calc(100% - 15px);
width: 100%;
}
</style>

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

@ -32,7 +32,7 @@
</template>
<script>
import { post } from '@/api/panel/panel'
import { post, panelSave } from '@/api/panel/panel'
import TemplateAllList from './TemplateAllList'
export default {
@ -101,7 +101,8 @@ export default {
this.$warning('名称不能为空')
return false
}
post('/panel/group/save', this.editPanel.panelInfo).then(response => {
panelSave(this.editPanel.panelInfo).then(response => {
debugger
this.$message({
message: '保存成功',
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 EditPanel from './EditPanel'
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 {
name: 'PanelList',
@ -168,8 +181,34 @@ export default {
level: null,
nodeType: null,
panelType: null,
panelStyle: null,
panelDate: null
panelStyle: JSON.stringify({
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: {
@ -183,8 +222,34 @@ export default {
level: null,
nodeType: null,
panelType: null,
panelStyle: null,
panelDate: null
panelStyle: JSON.stringify({
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: '链接分享',
@ -247,6 +312,7 @@ export default {
this.tree(this.groupForm)
},
showEditPanel(param) {
debugger
this.editPanel = JSON.parse(JSON.stringify(this.editPanelModel))
this.editPanel.optType = param.optType
this.editPanel.panelInfo.nodeType = param.type
@ -399,8 +465,10 @@ export default {
if (data.nodeType === 'panel') {
// 加载视图数据
get('panel/group/findOne/' + data.id).then(response => {
debugger
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.currGroup = data
})
@ -447,7 +515,7 @@ export default {
this.linkResourceId = null
},
resetID(data) {
if( data ) {
if (data) {
data.forEach(item => {
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 = {
width: 1200,
height: 740,
width: 1680,
height: 1050,
scale: 100,
openCommonStyle: true,
panel: DEFAULT_PANEL_STYLE,