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-05 22:14:23 +08:00
parent f91661e7fe
commit 2cd2365770
36 changed files with 668 additions and 289 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -63,7 +63,6 @@ export default {
closeSidebar(evt) {
const parent = evt.target.closest('.rightPanel')
if (!parent) {
debugger
this.show = false
window.removeEventListener('click', this.closeSidebar)
}

2
frontend/src/components/canvas/components/Editor/ContextMenu.vue
View File

@ -47,7 +47,7 @@ export default {
if (this.curComponent.component === 'user-view') {
this.$store.dispatch('chart/setViewId', null)
this.$store.dispatch('chart/setViewId', this.curComponent.propValue.viewId)
bus.$emit('PanelSwitchComponent', { name: 'ChartEdit' })
bus.$emit('PanelSwitchComponent', { name: 'ChartEdit', param: { 'id': this.curComponent.propValue.viewId }})
}
if (this.curComponent.type === 'custom') {
bus.$emit('component-dialog-edit')

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

@ -81,9 +81,11 @@ export default {
this.handleScaleChange()
},
resetID(data) {
data.forEach(item => {
item.id = uuid.v1()
})
if( data ) {
data.forEach(item => {
item.id = uuid.v1()
})
}
return data
},
format(value, scale) {

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

@ -96,9 +96,11 @@ export default {
})
},
resetID(data) {
data.forEach(item => {
item.id = uuid.v1()
})
if( data ) {
data.forEach(item => {
item.id = uuid.v1()
})
}
return data
},

33
frontend/src/components/canvas/components/Editor/index.vue
View File

@ -3,10 +3,7 @@
id="editor"
class="editor"
:class="{ edit: isEdit }"
:style="{
width: changeStyleWithScale(canvasStyleData.width) + 'px',
height: changeStyleWithScale(canvasStyleData.height) + 'px',
}"
:style="customStyle"
@contextmenu="handleContextMenu"
@mousedown="handleMouseDown"
>
@ -58,8 +55,8 @@
</Shape>
<!-- 右击菜单 -->
<ContextMenu />
<!-- 标线 -->
<MarkLine />
<!-- 标线 (临时去掉标线 吸附等功能)-->
<!-- <MarkLine />-->
<!-- 选中区域 -->
<Area v-show="isShowArea" :start="start" :width="width" :height="height" />
</div>
@ -106,6 +103,29 @@ export default {
}
},
computed: {
customStyle() {
let style = {
width: this.changeStyleWithScale(this.canvasStyleData.width) + 'px',
height: this.changeStyleWithScale(this.canvasStyleData.height) + 'px'
}
if (this.canvasStyleData.openCommonStyle) {
if (this.canvasStyleData.panel.backgroundType === 'image') {
style = {
width: this.changeStyleWithScale(this.canvasStyleData.width) + 'px',
height: this.changeStyleWithScale(this.canvasStyleData.height) + 'px',
background: `url(${this.canvasStyleData.panel.imageUrl}) no-repeat`
}
} else {
style = {
width: this.changeStyleWithScale(this.canvasStyleData.width) + 'px',
height: this.changeStyleWithScale(this.canvasStyleData.height) + 'px',
background: this.canvasStyleData.panel.color
}
}
}
return style
},
panelInfo() {
return this.$store.state.panel.panelInfo
},
@ -355,6 +375,7 @@ export default {
position: relative;
background: #fff;
margin: auto;
background-size:100% 100% !important;
.lock {
opacity: .5;

1
frontend/src/components/canvas/components/Toolbar.vue
View File

@ -205,6 +205,7 @@ export default {
panelStyle: JSON.stringify(this.canvasStyleData),
panelData: JSON.stringify(this.componentData)
}
debugger
post('panel/group/save', requestInfo, () => {})
this.$message.success('保存成功')
},

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

@ -8,6 +8,20 @@
import { post } from '@/api/panel/panel'
import ChartComponent from '@/views/chart/components/ChartComponent.vue'
import { mapState } from 'vuex'
import { deepCopy } from '@/components/canvas/utils/utils'
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'
export default {
name: 'UserView',
@ -29,11 +43,61 @@ export default {
watch: {
filter(val) {
this.getData(this.element.propValue.viewId)
},
// deep监听panel 如果改变 提交到 store
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
}
}
},
deep: true
}
},
computed: mapState([
'canvasStyleData'
]),
// computed: mapState({
// canvasStyleData: function(state) {
// debugger
// // this.chart.viewFirst == false 优先使用仪表盘样式
// if (!this.chart.viewFirst) {
// this.chart.customAttr = state.canvasStyleData.chart.customAttr
// this.chart.customStyle = state.canvasStyleData.chart.customStyle
// }
// }
//
// }),
data() {
return {
chart: {}
chart: {
viewFirst: false,
xaxis: [],
yaxis: [],
show: true,
type: 'panel',
title: '',
customAttr: {
color: DEFAULT_COLOR_CASE,
size: DEFAULT_SIZE,
label: DEFAULT_LABEL,
tooltip: DEFAULT_TOOLTIP
},
customStyle: {
text: DEFAULT_TITLE_STYLE,
legend: DEFAULT_LEGEND_STYLE,
xAxis: DEFAULT_XAXIS_STYLE,
yAxis: DEFAULT_YAXIS_STYLE,
background: DEFAULT_BACKGROUND_COLOR
},
customFilter: []
}
}
},
created() {

8
frontend/src/components/canvas/index.vue
View File

@ -69,9 +69,11 @@ export default {
},
resetID(data) {
data.forEach(item => {
item.id = generateID()
})
if( data ) {
data.forEach(item => {
item.id = uuid.v1()
})
}
return data
},

14
frontend/src/store/index.js
View File

@ -20,6 +20,10 @@ import layer from '@/components/canvas/store/layer'
import snapshot from '@/components/canvas/store/snapshot'
import lock from '@/components/canvas/store/lock'
import {
DEFAULT_COMMON_CANVAS_STYLE
} from '@/views/panel/panel'
Vue.use(Vuex)
const data = {
@ -34,17 +38,14 @@ const data = {
...lock.state,
editMode: 'edit', // 编辑器模式 edit preview
canvasStyleData: { // 页面全局数据
width: 1200,
height: 740,
scale: 100
},
canvasStyleData: DEFAULT_COMMON_CANVAS_STYLE, // 页面全局数据 //扩展公共样式 公共的仪表盘样式，用来实时响应样式的变化
componentData: [], // 画布组件数据
curComponent: null,
curComponentIndex: null,
// 点击画布时是否点中组件，主要用于取消选中组件用。
// 如果没点中组件，并且在画布空白处弹起鼠标，则取消当前组件的选中状态
isClickComponent: false
isClickComponent: false,
canvasCommonStyleData: DEFAULT_COMMON_CANVAS_STYLE
},
mutations: {
...animation.mutations,
@ -121,7 +122,6 @@ const data = {
if (index === undefined) {
index = state.curComponentIndex
}
state.componentData.splice(index, 1)
}
},

34
frontend/src/views/chart/components/ChartComponent.vue
View File

@ -36,25 +36,20 @@ export default {
}
},
watch: {
chart() {
this.drawEcharts()
chart: {
handler(newVal, oldVla) {
debugger
console.log('chart,watch')
this.preDraw()
},
deep: true
},
resize() {
this.drawEcharts()
}
},
mounted() {
// 基于准备好的dom，初始化echarts实例
console.log('chartId:' + this.chartId)
// 渲染echart等待dom加载完毕,渲染之前先尝试销毁具有相同id的echart 放置多次切换仪表盘有重复id情况
new Promise((resolve) => { resolve() }).then(() => {
// 此dom为echarts图标展示dom
this.myChart = this.$echarts.getInstanceByDom(document.getElementById(this.chartId))
if (!this.myChart) {
this.myChart = this.$echarts.init(document.getElementById(this.chartId))
}
this.drawEcharts()
})
this.preDraw()
// 监听元素变动事件
eventBus.$on('resizing', (componentId) => {
@ -62,6 +57,19 @@ export default {
})
},
methods: {
preDraw() {
// 基于准备好的dom，初始化echarts实例
console.log('chartId:' + this.chartId)
// 渲染echart等待dom加载完毕,渲染之前先尝试销毁具有相同id的echart 放置多次切换仪表盘有重复id情况
new Promise((resolve) => { resolve() }).then(() => {
// 此dom为echarts图标展示dom
this.myChart = this.$echarts.getInstanceByDom(document.getElementById(this.chartId))
if (!this.myChart) {
this.myChart = this.$echarts.init(document.getElementById(this.chartId))
}
this.drawEcharts()
})
},
drawEcharts() {
const chart = this.chart
let chart_option = {}

7
frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue
View File

@ -44,7 +44,12 @@ export default {
handler: function() {
const chart = JSON.parse(JSON.stringify(this.chart))
if (chart.customStyle) {
const customStyle = JSON.parse(chart.customStyle)
let customStyle = null
if (Object.prototype.toString.call(chart.customStyle) === '[object Object]') {
customStyle = JSON.parse(JSON.stringify(chart.customStyle))
} else {
customStyle = JSON.parse(chart.customStyle)
}
if (customStyle.background) {
this.colorForm = customStyle.background
}

7
frontend/src/views/chart/components/component-style/LegendSelector.vue
View File

@ -88,7 +88,12 @@ export default {
handler: function() {
const chart = JSON.parse(JSON.stringify(this.chart))
if (chart.customStyle) {
const customStyle = JSON.parse(chart.customStyle)
let customStyle = null
if (Object.prototype.toString.call(chart.customStyle) === '[object Object]') {
customStyle = JSON.parse(JSON.stringify(chart.customStyle))
} else {
customStyle = JSON.parse(chart.customStyle)
}
if (customStyle.legend) {
this.legendForm = customStyle.legend
}

15
frontend/src/views/chart/components/component-style/TitleSelector.vue
View File

@ -67,14 +67,23 @@ export default {
handler: function() {
const chart = JSON.parse(JSON.stringify(this.chart))
if (chart.customStyle) {
const customStyle = JSON.parse(chart.customStyle)
if (customStyle.text) {
this.titleForm = customStyle.text
let customStyle = null
if (Object.prototype.toString.call(chart.customStyle) === '[object Object]') {
customStyle = JSON.parse(JSON.stringify(chart.customStyle))
} else {
customStyle = JSON.parse(chart.customStyle)
}
if (customStyle.background) {
this.colorForm = customStyle.background
}
}
}
}
},
created() {
debugger
console.log(JSON.stringify(this.chart))
},
mounted() {
this.init()
},

7
frontend/src/views/chart/components/component-style/XAxisSelector.vue
View File

@ -56,7 +56,12 @@ export default {
handler: function() {
const chart = JSON.parse(JSON.stringify(this.chart))
if (chart.customStyle) {
const customStyle = JSON.parse(chart.customStyle)
let customStyle = null
if (Object.prototype.toString.call(chart.customStyle) === '[object Object]') {
customStyle = JSON.parse(JSON.stringify(chart.customStyle))
} else {
customStyle = JSON.parse(chart.customStyle)
}
if (customStyle.xAxis) {
this.axisForm = customStyle.xAxis
}

7
frontend/src/views/chart/components/component-style/YAxisSelector.vue
View File

@ -56,7 +56,12 @@ export default {
handler: function() {
const chart = JSON.parse(JSON.stringify(this.chart))
if (chart.customStyle) {
const customStyle = JSON.parse(chart.customStyle)
let customStyle = null
if (Object.prototype.toString.call(chart.customStyle) === '[object Object]') {
customStyle = JSON.parse(JSON.stringify(chart.customStyle))
} else {
customStyle = JSON.parse(chart.customStyle)
}
if (customStyle.yAxis) {
this.axisForm = customStyle.yAxis
}

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

@ -112,7 +112,12 @@ export default {
handler: function() {
const chart = JSON.parse(JSON.stringify(this.chart))
if (chart.customAttr) {
const customAttr = JSON.parse(chart.customAttr)
let customAttr = null
if (Object.prototype.toString.call(chart.customAttr) === '[object Object]') {
customAttr = JSON.parse(JSON.stringify(chart.customAttr))
} else {
customAttr = JSON.parse(chart.customAttr)
}
if (customAttr.color) {
this.colorForm = customAttr.color
}

7
frontend/src/views/chart/components/shape-attr/LabelSelector.vue
View File

@ -73,7 +73,12 @@ export default {
handler: function() {
const chart = JSON.parse(JSON.stringify(this.chart))
if (chart.customAttr) {
const customAttr = JSON.parse(chart.customAttr)
let customAttr = null
if (Object.prototype.toString.call(chart.customAttr) === '[object Object]') {
customAttr = JSON.parse(JSON.stringify(chart.customAttr))
} else {
customAttr = JSON.parse(chart.customAttr)
}
if (customAttr.label) {
this.labelForm = customAttr.label
}

7
frontend/src/views/chart/components/shape-attr/SizeSelector.vue
View File

@ -138,7 +138,12 @@ export default {
handler: function() {
const chart = JSON.parse(JSON.stringify(this.chart))
if (chart.customAttr) {
const customAttr = JSON.parse(chart.customAttr)
let customAttr = null
if (Object.prototype.toString.call(chart.customAttr) === '[object Object]') {
customAttr = JSON.parse(JSON.stringify(chart.customAttr))
} else {
customAttr = JSON.parse(chart.customAttr)
}
if (customAttr.size) {
this.sizeForm = customAttr.size
}

7
frontend/src/views/chart/components/shape-attr/TooltipSelector.vue
View File

@ -82,7 +82,12 @@ export default {
handler: function() {
const chart = JSON.parse(JSON.stringify(this.chart))
if (chart.customAttr) {
const customAttr = JSON.parse(chart.customAttr)
let customAttr = null
if (Object.prototype.toString.call(chart.customAttr) === '[object Object]') {
customAttr = JSON.parse(JSON.stringify(chart.customAttr))
} else {
customAttr = JSON.parse(chart.customAttr)
}
if (customAttr.tooltip) {
this.tooltipForm = customAttr.tooltip
}

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

@ -441,6 +441,7 @@ export default {
this.view.customFilter = this.view.customFilter ? JSON.parse(this.view.customFilter) : {}
// 将视图传入echart组件
this.chart = response.data
console.log(JSON.stringify(this.chart))
})
} else {
this.view = {}

8
frontend/src/views/link/view/index.vue
View File

@ -36,9 +36,11 @@ export default {
})
},
resetID(data) {
data.forEach(item => {
item.id = uuid.v1()
})
if( data ) {
data.forEach(item => {
item.id = uuid.v1()
})
}
return data
}

8
frontend/src/views/panel/GrantAuth/shareTree.vue
View File

@ -51,9 +51,11 @@ export default {
})
},
resetID(data) {
data.forEach(item => {
item.id = uuid.v1()
})
if( data ) {
data.forEach(item => {
item.id = uuid.v1()
})
}
return data
}

183
frontend/src/views/panel/SubjectSetting/BackgroundSelector.vue
View File

@ -1,183 +0,0 @@
<template>
<div>
<div style="width: 100%;">
<el-popover
placement="right"
width="250"
trigger="click"
>
<el-col>
<el-row>
<el-col :span="6">
<el-radio v-model="backgroundForm.backgroundType" label="color">颜色</el-radio>
</el-col>
<el-col :span="18">
<colorPicker v-model="backgroundForm.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeBackgroundStyle" />
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-radio v-model="backgroundForm.backgroundType" label="image">图片</el-radio>
</el-col>
<el-col :span="18">
<el-upload
v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
class="avatar-uploader"
action=""
accept=".jpeg,.jpg,.png,.gif"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:on-exceed="handleExceed"
:on-error="handleError"
:http-request="handleAvatarSuccess"
:on-change="onChange"
>
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon" />
</el-upload>
</el-col>
</el-row>
</el-col>
<el-button slot="reference" size="mini" class="shape-item">背景<i class="el-icon-setting el-icon--right" /></el-button>
</el-popover>
</div>
</div>
</template>
<script>
import { DEFAULT_BACKGROUND_COLOR } from '@/views/panel/panel'
export default {
name: 'BackgroundSelector',
props: {
},
data() {
return {
backgroundForm: JSON.parse(JSON.stringify(DEFAULT_BACKGROUND_COLOR)),
systemParams: [],
filesTmp: [],
suffixes: new Set(['png', 'jpg', 'gif', 'jpeg']),
files: [],
imageUrl: ''
}
},
watch: {
},
mounted() {
},
methods: {
handleAvatarSuccess(file) {
console.log('file.name')
// var _this = this
// var event = event || window.event
// file = event.target.files[0]
// var reader = new FileReader()
// // 转base64
// reader.onload = function(e) {
// _this.imageUrl = e.target.result // 将图片路径赋值给src
// _this.guideImage = e.target.result // 将图片路径赋值给src
// }
// reader.readAsDataURL(file)
},
onChange(file, fileList) {
var _this = this
const reader = new FileReader()
reader.onload = function() {
_this.imageUrl = reader.result
}
reader.readAsDataURL(file.raw)
},
changeBackgroundStyle() {
this.$emit('onChangeBackgroundForm', this.backgroundForm)
},
handleExceed(files, fileList) {
this.$warning(this.$t('test_track.case.import.upload_limit_count'))
},
handleError(e) {
this.$warning('error' + JSON.stringify(e))
},
uploadValidate(file) {
const suffix = file.name.substring(file.name.lastIndexOf('.') + 1)
if (!this.suffixes.has(suffix)) {
this.$warning(this.$t('test_track.case.import.upload_limit_format'))
return false
}
if (file.size / 1024 / 1024 > 5) {
this.$warning(this.$t('test_track.case.import.upload_limit_size'))
return false
}
this.errList = []
return true
},
upload(file) {
this.imageUrl = file.url
const reader = new FileReader()
reader.onload = (res) => {
this.imageUrl.src = res.target.result
}
reader.readAsDataURL(file)
},
removeValue(paramKey) {
this.systemParams.forEach((systemParam) => {
if (systemParam.paramKey === paramKey) {
systemParam.fileName = null
systemParam.file = null
}
})
}
}
}
</script>
<style scoped>
.avatar-uploader>>>.el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader>>>.el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 100px;
height: 60px;
line-height: 60px;
text-align: center;
}
.avatar {
width: 100px;
height: 60px;
display: block;
}
.shape-item{
padding: 6px;
border: none;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.form-item-slider>>>.el-form-item__label{
font-size: 12px;
line-height: 38px;
}
.form-item>>>.el-form-item__label{
font-size: 12px;
}
.el-select-dropdown__item{
padding: 0 20px;
}
span{
font-size: 12px
}
.el-form-item{
margin-bottom: 6px;
}
</style>

149
frontend/src/views/panel/SubjectSetting/PanelStyle/BackgroundSelector.vue Normal file
View File

@ -0,0 +1,149 @@
<template>
<div>
<div style="width: 100%;">
<el-popover
placement="right"
width="250"
trigger="click"
>
<el-col>
<el-row>
<el-col :span="6">
<el-radio v-model="panel.backgroundType" label="color">颜色</el-radio>
</el-col>
<el-col :span="18">
<colorPicker v-model="panel.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" />
</el-col>
</el-row>
<el-row style="height: 60px;margin-top:10px;overflow: hidden">
<el-col :span="6">
<el-radio v-model="panel.backgroundType" label="image">图片</el-radio>
</el-col>
<el-col :span="18">
<el-upload
action=""
accept=".jpeg,.jpg,.png,.gif"
class="avatar-uploader"
list-type="picture-card"
:class="{disabled:uploadDisabled}"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:http-request="upload"
:file-list="filesTmp"
:on-change="onChange"
>
<i class="el-icon-plus" />
</el-upload>
<el-dialog top="25vh" width="600px" :modal-append-to-body="false" :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</el-col>
</el-row>
</el-col>
<el-button slot="reference" size="mini" class="shape-item">背景<i class="el-icon-setting el-icon--right" /></el-button>
</el-popover>
</div>
</div>
</template>
<script>
import { mapState } from 'vuex'
import { deepCopy } from '@/components/canvas/utils/utils'
export default {
name: 'BackgroundSelector',
data() {
return {
filesTmp: [],
imageUrl: '',
dialogImageUrl: '',
dialogVisible: false,
uploadDisabled: false,
panel: null
}
},
computed: mapState([
'canvasStyleData'
]),
watch: {
// deep监听panel 如果改变 提交到 store
panel: {
handler(newVal, oldVla) {
debugger
const canvasStyleData = deepCopy(this.canvasStyleData)
canvasStyleData.panel = this.panel
this.$store.commit('setCanvasStyle', canvasStyleData)
},
deep: true
}
},
created() {
// 初始化赋值
this.panel = this.canvasStyleData.panel
},
methods: {
handleRemove(file, fileList) {
this.uploadDisabled = false
this.panel.imageUrl = null
console.log(file, fileList)
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url
this.dialogVisible = true
},
onChange(file, fileList) {
debugger
var _this = this
_this.uploadDisabled = true
const reader = new FileReader()
reader.onload = function() {
_this.panel.imageUrl = reader.result
}
reader.readAsDataURL(file.raw)
},
upload(file) {
console.log('this is upload')
}
}
}
</script>
<style scoped>
.avatar-uploader>>>.el-upload {
width: 100px;
height: 60px;
line-height: 70px;
}
.avatar-uploader>>>.el-upload-list li{
width: 100px !important;
height: 60px !important;
}
.disabled>>>.el-upload--picture-card {
display: none;
}
.shape-item{
padding: 6px;
border: none;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.form-item-slider>>>.el-form-item__label{
font-size: 12px;
line-height: 38px;
}
.form-item>>>.el-form-item__label{
font-size: 12px;
}
.el-select-dropdown__item{
padding: 0 20px;
}
span{
font-size: 12px
}
.el-form-item{
margin-bottom: 6px;
}
</style>

75
frontend/src/views/panel/SubjectSetting/PanelStyle/ComponentGap.vue Normal file
View File

@ -0,0 +1,75 @@
<template>
<div>
<div style="width: 100%;">
<el-popover
placement="right"
width="250"
trigger="click"
>
<el-col>
<el-radio v-model="panelStyleForm.gap" label="yes" @change="onChangePanelStyle">有间隙</el-radio>
<el-radio v-model="panelStyleForm.gap" label="no" @change="onChangePanelStyle">无间隙</el-radio>
</el-col>
<el-button slot="reference" size="mini" class="shape-item">组件间隙<i class="el-icon-setting el-icon--right" /></el-button>
</el-popover>
</div>
</div>
</template>
<script>
import { DEFAULT_PANEL_STYLE } from '@/views/panel/panel'
export default {
name: 'BackgroundSelector',
props: {
},
data() {
return {
panelStyleForm: JSON.parse(JSON.stringify(DEFAULT_PANEL_STYLE))
}
},
methods: {
onChangePanelStyle() {
this.$emit('onChangePanelStyle', this.panelStyleForm)
}
}
}
</script>
<style scoped>
.avatar-uploader>>>.el-upload {
width: 100px;
height: 60px;
line-height: 70px;
}
.avatar-uploader>>>.el-upload-list li{
width: 100px !important;
height: 60px !important;
}
.disabled>>>.el-upload--picture-card {
display: none;
}
.shape-item{
padding: 6px;
border: none;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.form-item-slider>>>.el-form-item__label{
font-size: 12px;
line-height: 38px;
}
.form-item>>>.el-form-item__label{
font-size: 12px;
}
.el-select-dropdown__item{
padding: 0 20px;
}
span{
font-size: 12px
}
.el-form-item{
margin-bottom: 6px;
}
</style>

0
frontend/src/views/panel/SubjectSetting/Slider.vue → frontend/src/views/panel/SubjectSetting/PreSubject/Slider.vue
View File

0
frontend/src/views/panel/SubjectSetting/SubjectTemplateItem.vue → frontend/src/views/panel/SubjectSetting/PreSubject/SubjectTemplateItem.vue
View File

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

@ -10,24 +10,37 @@
<el-collapse v-model="activeNames" @change="handleChange">
<el-collapse-item title="仪表盘" name="panel">
<el-row style="background-color: #f7f8fa; margin: 5px">
<background-selector class="attr-selector" @changeBackgroundStyle="changeBackgroundStyle" />
<background-selector class="attr-selector" @changeBackgroundStyle="changeBackgroundStyle" />
<background-selector class="attr-selector" @changeBackgroundStyle="changeBackgroundStyle" />
<background-selector class="attr-selector" @changeBackgroundStyle="changeBackgroundStyle" />
<background-selector class="attr-selector" />
<component-gap class="attr-selector" />
</el-row>
</el-collapse-item>
<el-collapse-item title="视图" name="view">
<div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
<div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
<el-collapse-item title="组件样式" name="component" @click="testClick">
<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" />
</el-row>
</el-collapse-item>
<el-collapse-item title="表格" name="table">
<div>简化流程：设计简洁直观的操作流程；</div>
<div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
<div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
<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="4">
<div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
<div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
<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>
@ -35,31 +48,166 @@
</template>
<script>
import slider from './Slider'
import BackgroundSelector from './BackgroundSelector'
import slider from './PreSubject/Slider'
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'
export default {
components: {
slider,
BackgroundSelector
BackgroundSelector,
ComponentGap,
ColorSelector,
SizeSelector,
LabelSelector,
TitleSelector,
LegendSelector,
TooltipSelector,
XAxisSelector,
YAxisSelector,
BackgroundColorSelector,
QuotaFilterEditor,
DimensionFilterEditor,
TableNormal
},
data() {
return {
panelInfo: this.$store.state.panel.panelInfo,
activeNames: ['1'],
backgroundType: 'color'
activeNames: ['panel'],
chart: null
}
},
computed: mapState([
'canvasStyleData'
]),
watch: {
// deep监听panel 如果改变 提交到 store
chart: {
handler(newVal, oldVla) {
debugger
const canvasStyleData = deepCopy(this.canvasStyleData)
const chart = deepCopy(this.chart)
chart.xaxis = JSON.stringify(this.chart.xaxis)
chart.yaxis = JSON.stringify(this.chart.yaxis)
chart.customAttr = JSON.stringify(this.chart.customAttr)
chart.customStyle = JSON.stringify(this.chart.customStyle)
chart.customFilter = JSON.stringify(this.chart.customFilter)
canvasStyleData.chart = chart
this.$store.commit('setCanvasStyle', canvasStyleData)
},
deep: true
}
},
created() {
debugger
// 初始化赋值
const chart = deepCopy(this.canvasStyleData.chart)
chart.xaxis = JSON.parse(chart.xaxis)
chart.yaxis = JSON.parse(chart.yaxis)
chart.customAttr = JSON.parse(chart.customAttr)
chart.customStyle = JSON.parse(chart.customStyle)
chart.customFilter = JSON.parse(chart.customFilter)
this.chart = chart
},
methods: {
testClick(val) {
debugger
console.log(JSON.stringify(this.chart))
console.log('message+>')
},
handleChange(val) {
console.log(val)
},
changeBackgroundStyle() {
console.log('changeBackgroundStyle')
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) {
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()
},
save() {
console.log('save')
}
}
}

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

@ -47,9 +47,9 @@
<div v-show="show" class="leftPanel">
<div class="leftPanel-items">
<view-select v-if=" showIndex===0" />
<filter-group v-if="showIndex===1" />
<subject-setting v-if="showIndex===2" />
<view-select v-show=" showIndex===0" />
<filter-group v-show="showIndex===1" />
<subject-setting v-show="showIndex===2" />
</div>
</div>
</div>
@ -195,7 +195,6 @@ export default {
mounted() {
this.insertToBody()
bus.$on('component-on-drag', () => {
debugger
this.show = false
})
@ -217,8 +216,10 @@ export default {
this.$store.commit('setCanvasStyle', JSON.parse(canvasStyleDataTemp))
} else if (panelId) {
get('panel/group/findOne/' + panelId).then(response => {
debugger
this.$store.commit('setComponentData', this.resetID(JSON.parse(response.data.panelData)))
this.$store.commit('setCanvasStyle', JSON.parse(response.data.panelStyle))
const panelStyle = JSON.parse(response.data.panelStyle)
this.$store.commit('setCanvasStyle', panelStyle)
})
}
},
@ -229,7 +230,6 @@ export default {
this.$router.replace('/panel/index')
},
showPanel(type) {
debugger
this.show = !this.show
this.showIndex = type
},
@ -242,7 +242,6 @@ export default {
// 点击样式按钮 排除
const stick = evt.target.closest('.el-icon-magic-stick')
if (!parent && !self && !stick) {
debugger
this.show = false
window.removeEventListener('click', this.closeSidebar)
this.showIndex = -1
@ -257,10 +256,11 @@ export default {
},
resetID(data) {
data.forEach(item => {
item.id = uuid.v1()
})
if (data) {
data.forEach(item => {
item.id = uuid.v1()
})
}
return data
},
handleDrop(e) {
@ -291,7 +291,6 @@ export default {
this.currentFilterCom.style.left = e.offsetX
this.currentFilterCom.id = newComponentId
if (this.currentWidget.filterDialog) {
debugger
this.show = false
this.openFilterDiolog()
return

8
frontend/src/views/panel/enshrine/index.vue
View File

@ -52,9 +52,11 @@ export default {
})
},
resetID(data) {
data.forEach(item => {
item.id = uuid.v1()
})
if( data ) {
data.forEach(item => {
item.id = uuid.v1()
})
}
return data
},

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

@ -111,7 +111,6 @@ export default {
})
},
handleFileChange(e) {
debugger
const file = e.target.files[0]
const reader = new FileReader()
reader.onload = (res) => {

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

@ -284,7 +284,6 @@ export default {
},
clickMore(param) {
debugger
switch (param.optType) {
case 'rename':
this.showEditPanel(param)
@ -448,9 +447,11 @@ export default {
this.linkResourceId = null
},
resetID(data) {
data.forEach(item => {
item.id = uuid.v1()
})
if( data ) {
data.forEach(item => {
item.id = uuid.v1()
})
}
return data
}

3
frontend/src/views/panel/list/PanelViewShow.vue
View File

@ -102,7 +102,6 @@ export default {
saveToTemplate() {
this.templateSaveShow = true
html2canvas(this.$refs.imageWrapper).then(canvas => {
debugger
const snapshot = canvas.toDataURL('image/jpeg', 0.2) // 0.2是图片质量
if (snapshot !== '') {
this.templateInfo = {
@ -121,7 +120,6 @@ export default {
},
downloadToTemplate() {
html2canvas(this.$refs.imageWrapper).then(canvas => {
debugger
const snapshot = canvas.toDataURL('image/jpeg', 0.2) // 0.2是图片质量
if (snapshot !== '') {
this.templateInfo = {
@ -140,7 +138,6 @@ export default {
refreshTemplateInfo() {
this.templateInfo = ''
html2canvas(this.$refs.imageWrapper).then(canvas => {
debugger
const snapshot = canvas.toDataURL('image/jpeg', 0.2) // 0.2是图片质量
if (snapshot !== '') {
this.templateInfo = {

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

@ -1,6 +1,47 @@
export const DEFAULT_BACKGROUND_COLOR = {
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'
export const DEFAULT_PANEL_STYLE = {
color: '#ffffff',
image: null,
imageName: null,
backgroundType: 'color'
imageUrl: null,
backgroundType: 'image',
gap: 'no'
}
export const DEFAULT_COMMON_CANVAS_STYLE = {
width: 1200,
height: 740,
scale: 100,
openCommonStyle: true,
panel: DEFAULT_PANEL_STYLE,
chart: {
xaxis: [],
yaxis: [],
show: true,
type: 'panel',
title: '',
customAttr: {
color: DEFAULT_COLOR_CASE,
size: DEFAULT_SIZE,
label: DEFAULT_LABEL,
tooltip: DEFAULT_TOOLTIP
},
customStyle: {
text: DEFAULT_TITLE_STYLE,
legend: DEFAULT_LEGEND_STYLE,
xAxis: DEFAULT_XAXIS_STYLE,
yAxis: DEFAULT_YAXIS_STYLE,
background: DEFAULT_BACKGROUND_COLOR
},
customFilter: []
}
}

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

@ -106,7 +106,6 @@ export default {
this.showTemplateEditDialog('edit', templateInfo)
},
saveTemplateEdit(templateEditForm) {
debugger
post('/template/save', templateEditForm).then(response => {
this.$message({
message: '保存成功',

1
frontend/src/views/system/systemParamSettings/UiSetting.vue
View File

@ -219,7 +219,6 @@ export default {
},
methods: {
query() {
debugger
get('/system/ui/info').then(res => {
this.systemParams = res.data
})