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

Merge remote-tracking branch 'origin/main' into main

Browse Source
This commit is contained in:
fit2cloud-chenyw 2021-03-17 18:38:40 +08:00
commit cdbc7ea9ee
11 changed files with 208 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
backend/src/main/resources/db/migration/V12__panel_table.sql
View File

@ -90,8 +90,7 @@ CREATE TABLE `panel_share` (
`create_time` bigint(13) DEFAULT NULL COMMENT '创建日期',
PRIMARY KEY (`share_id`) USING BTREE,
UNIQUE KEY `UK_share_user_id` (`user_id`) USING BTREE,
UNIQUE KEY `UK_share_panel_group_id` (`panel_group_id`) USING BTREE,
UNIQUE KEY `UK_share_panel_group_id` (`panel_group_id`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8 ROW_FORMAT=COMPACT COMMENT='仪表板分享';

9
frontend/src/components/vue-drag-resize-rotate/index.vue
View File

@ -69,6 +69,10 @@ export default {
replace: true,
name: 'VueDragResizeRotate',
props: {
viewId: {
type: String,
default: ''
},
className: {
type: String,
default: 'vdr'
@ -596,6 +600,11 @@ export default {
},
methods: {
removeView(){
debugger
console.log(this.viewId);
this.$emit('removeView',this.viewId)
},
// 重置边界和鼠标状态
resetBoundsAndMouseState() {
this.mouseClickPosition = { mouseX: 0, mouseY: 0, x: 0, y: 0, w: 0, h: 0 }

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

@ -602,7 +602,19 @@ export default {
std: '标准差',
var_samp: '方差',
quick_calc: '快速计算',
show_name_set: '显示名设置'
show_name_set: '显示名设置',
color: '颜色',
color_case: '配色方案',
pls_slc_color_case: '请选择配色方案',
color_default: '默认',
color_retro: '复古',
color_future: '未来',
color_gradual: '渐变',
color_business: '商务',
color_gentle: '柔和',
color_elegant: '淡雅',
color_technology: '科技',
color_simple: '简洁'
},
dataset: {
datalist: '数据集',

13
frontend/src/store/modules/panel.js
View File

@ -1,7 +1,10 @@
const getDefaultState = () => {
return {
panelName: ''
panelName: '',
panelInfo:{
name:''
}
}
}
@ -10,12 +13,20 @@ const state = getDefaultState()
const mutations = {
setPanelName: (state, panelName) => {
state.panelName = panelName
},
setPanelInfo: (state, panelInfo) => {
debugger
state.panelInfo = panelInfo
}
}
const actions = {
setPanelName({ commit }, panelName) {
commit('setPanelName', panelName)
},
setPanelInfo({ commit }, panelInfo) {
debugger
commit('setPanelInfo', panelInfo)
}
}

6
frontend/src/views/chart/chart/chart.js
View File

@ -1,3 +1,7 @@
export const DEFAULT_COLOR_CASE = {
value: 'default',
colors: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
}
export const BASE_BAR = {
title: {
text: ''
@ -33,5 +37,5 @@ export const BASE_LINE = {
}
export default {
BASE_BAR, BASE_LINE
BASE_BAR, BASE_LINE, DEFAULT_COLOR_CASE
}

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

@ -40,6 +40,7 @@ export default {
chart_option = JSON.parse(JSON.stringify(BASE_LINE))
}
// console.log(chart_option);
// 处理data
if (chart.data) {
chart_option.title.text = chart.title
chart_option.xAxis.data = chart.data.x
@ -49,6 +50,12 @@ export default {
})
}
// console.log(chart_option);
// 处理shape attr
if (chart.customAttr) {
if (chart.customAttr.color) {
chart_option.color = chart.customAttr.color.colors
}
}
this.myEcharts(chart_option)
},
myEcharts(option) {

130
frontend/src/views/chart/components/ColorSelector.vue Normal file
View File

@ -0,0 +1,130 @@
<template>
<div>
<div style="width:100%;height: 32px;margin:0;padding:0 4px;border-radius: 4px;border: 1px solid #DCDFE6;display: flex;align-items: center;">
<el-popover
placement="right"
width="400"
trigger="click"
>
<el-col>
<el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.color_case')" class="form-item">
<el-select v-model="colorForm.colorCase" :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>
</el-form>
</el-col>
<el-button slot="reference" size="mini" class="shape-item">{{ $t('chart.color') }}<i class="el-icon-setting el-icon--right" /></el-button>
</el-popover>
<!--todo other color attr-->
</div>
</div>
</template>
<script>
export default {
name: 'ColorSelector',
props: {
chart: {
type: Object,
required: true
}
},
data() {
return {
colorCases: [
{
name: this.$t('chart.color_default'),
value: 'default',
colors: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
},
{
name: this.$t('chart.color_retro'),
value: 'retro',
colors: ['#0780cf', '#765005', '#fa6d1d', '#0e2c82', '#b6b51f', '#da1f18', '#701866', '#f47a75', '#009db2']
},
{
name: this.$t('chart.color_elegant'),
value: 'elegant',
colors: ['#95a2ff', '#fa8080', '#ffc076', '#fae768', '#87e885', '#3cb9fc', '#73abf5', '#cb9bff', '#434348']
},
{
name: this.$t('chart.color_future'),
value: 'future',
colors: ['#63b2ee', '#76da91', '#f8cb7f', '#f89588', '#7cd6cf', '#9192ab', '#7898e1', '#efa666', '#eddd86']
},
{
name: this.$t('chart.color_gradual'),
value: 'gradual',
colors: ['#71ae46', '#96b744', '#c4cc38', '#ebe12a', '#eab026', '#e3852b', '#d85d2a', '#ce2626', '#ac2026']
},
{
name: this.$t('chart.color_simple'),
value: 'simple',
colors: ['#929fff', '#9de0ff', '#ffa897', '#af87fe', '#7dc3fe', '#bb60b2', '#433e7c', '#f47a75', '#009db2']
},
{
name: this.$t('chart.color_business'),
value: 'business',
colors: ['#194f97', '#555555', '#bd6b08', '#00686b', '#c82d31', '#625ba1', '#898989', '#9c9800', '#007f54']
},
{
name: this.$t('chart.color_gentle'),
value: 'gentle',
colors: ['#5b9bd5', '#ed7d31', '#70ad47', '#ffc000', '#4472c4', '#91d024', '#b235e6', '#02ae75', '#5b9bd5']
},
{
name: this.$t('chart.color_technology'),
value: 'technology',
colors: ['#05f8d6', '#0082fc', '#fdd845', '#22ed7c', '#09b0d3', '#1d27c9', '#f9e264', '#f47a75', '#009db2']
}
],
colorForm: {
colorCase: 'default'
}
}
},
watch: {
'chart': {
handler: function() {
const chart = JSON.parse(JSON.stringify(this.chart))
this.colorForm.colorCase = chart.customAttr.color.value
}
}
},
mounted() {
},
methods: {
changeColorCase() {
const that = this
const items = this.colorCases.filter(ele => {
return ele.value === that.colorForm.colorCase
})
this.$emit('onColorChange', {
value: items[0].value,
colors: items[0].colors
})
}
}
}
</script>
<style scoped lang="scss">
.shape-item{
padding: 6px;
border: none;
}
.form-item>>>.el-form-item__label{
font-size: 12px;
}
.el-select-dropdown__item{
padding: 0 20px;
}
span{font-size: 12px}
</style>

5
frontend/src/views/chart/group/Group.vue
View File

@ -211,6 +211,7 @@
<script>
import { post } from '@/api/chart/chart'
import TableSelector from '../view/TableSelector'
import { DEFAULT_COLOR_CASE } from '../chart/chart'
export default {
name: 'Group',
@ -503,6 +504,10 @@ export default {
view.name = this.table.name
view.sceneId = this.currGroup.id
view.tableId = this.table.id
view.type = 'bar'
view.customAttr = JSON.stringify({
color: DEFAULT_COLOR_CASE
})
post('/chart/view/save', view).then(response => {
this.selectTableFlag = false
this.$store.dispatch('chart/setTableId', null)

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

@ -79,14 +79,16 @@
<el-row>
<div class="chart-type">
<!--TODO 这里要替换好看点的图标-->
<el-radio v-model="view.type" label="bar"><i class="el-icon-platform-eleme" style="font-size: 20px"/></el-radio>
<el-radio v-model="view.type" label="bar"><i class="el-icon-platform-eleme" style="font-size: 20px" /></el-radio>
<el-radio v-model="view.type" label="line">折线图</el-radio>
</div>
</el-row>
</div>
<div style="height: 45%;overflow:auto;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">TODO</el-tab-pane>
<el-tab-pane :label="$t('chart.shape_attr')" class="padding-lr">
<color-selector :chart="chart" @onColorChange="onColorChange" />
</el-tab-pane>
<el-tab-pane :label="$t('chart.module_style')" class="padding-lr">TODO</el-tab-pane>
</el-tabs>
</div>
@ -144,10 +146,13 @@ import draggable from 'vuedraggable'
import DimensionItem from '../components/DimensionItem'
import QuotaItem from '../components/QuotaItem'
import ChartComponent from '../components/ChartComponent'
// shape attr
import { DEFAULT_COLOR_CASE } from '../chart/chart'
import ColorSelector from '../components/ColorSelector'
export default {
name: 'ChartEdit',
components: { ChartComponent, QuotaItem, DimensionItem, draggable },
components: { ColorSelector, ChartComponent, QuotaItem, DimensionItem, draggable },
data() {
return {
table: {},
@ -158,7 +163,10 @@ export default {
yaxis: [],
show: true,
type: 'bar',
title: ''
title: '',
customAttr: {
color: DEFAULT_COLOR_CASE
}
},
// 定义要被拖拽对象的数组
arr1: [
@ -224,17 +232,6 @@ export default {
this.quota = response.data.quota
})
},
get(id) {
if (id) {
post('/chart/view/get/' + id, null).then(response => {
this.view = response.data
this.view.xaxis = this.view.xaxis ? JSON.parse(this.view.xaxis) : []
this.view.yaxis = this.view.yaxis ? JSON.parse(this.view.yaxis) : []
})
} else {
this.view = {}
}
},
save() {
const view = JSON.parse(JSON.stringify(this.view))
view.id = this.view.id
@ -253,6 +250,7 @@ export default {
})
view.xaxis = JSON.stringify(view.xaxis)
view.yaxis = JSON.stringify(view.yaxis)
view.customAttr = JSON.stringify(view.customAttr)
post('/chart/view/save', view).then(response => {
// this.get(response.data.id);
this.getData(response.data.id)
@ -269,6 +267,7 @@ export default {
this.view = response.data
this.view.xaxis = this.view.xaxis ? JSON.parse(this.view.xaxis) : []
this.view.yaxis = this.view.yaxis ? JSON.parse(this.view.yaxis) : []
this.view.customAttr = this.view.customAttr ? JSON.parse(this.view.customAttr) : {}
// 将视图传入echart组件
this.chart = response.data
})
@ -365,6 +364,11 @@ export default {
// }
// })
this.save()
},
onColorChange(val) {
this.view.customAttr.color = val
this.save()
}
}
}
@ -399,6 +403,7 @@ export default {
border: solid 1px #eee;
text-align: left;
color: #606266;
background-color: rgba(35,46,64,.05);
display: block;
}
@ -408,6 +413,7 @@ export default {
border: solid 1px #eee;
text-align: left;
color: #606266;
background-color: rgba(35,46,64,.05);
}
.item + .item {

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

@ -393,12 +393,9 @@ export default {
},
nodeClick(data, node) {
// console.log(data);
// console.log(node);
if (data.nodeType === 'panel') {
this.sceneMode = true
this.currGroup = data
this.$store.dispatch('dataset/setSceneData', this.currGroup.id)
this.$store.dispatch('panel/setPanelInfo', data)
}
if (node.expanded) {
this.expandedArray.push(data.id)
@ -481,7 +478,7 @@ export default {
panelDefaultClick(data, node) {
console.log(data)
console.log(node)
this.$store.dispatch('panel/setPanelName', data.name)
this.$store.dispatch('panel/setPanelInfo', data)
// 切换view
this.$emit('switchComponent', { name: 'PanelView' })
},

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

@ -34,6 +34,7 @@
<el-col class="panel-design">
<!--TODO 仪表盘设计公共设置区域-->
<el-row class="panel-design-head">
<span style="float: left;line-height: 40px; color: gray">名称：{{panelInfo.name}}</span>
<span style="float: right;line-height: 40px;">
<el-button size="mini">
背景图
@ -126,19 +127,8 @@ export default {
}
},
computed: {
tableId() {
// console.log(this.$store.state.chart.tableId);
this.initTableData(this.$store.state.chart.tableId)
return this.$store.state.chart.tableId
},
sceneId() {
// console.log(this.$store.state.chart.sceneId);
return this.$store.state.chart.sceneId
},
vId() {
// console.log(this.$store.state.chart.viewId);
this.getData(this.$store.state.chart.viewId)
return this.$store.state.chart.viewId
panelInfo() {
return this.$store.state.panel.panelInfo
}
},