dongjunchuan/de
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'dev' of github.com:dataease/dataease into dev

Browse Source
This commit is contained in:
taojinlong 2021-11-15 15:57:13 +08:00
commit 6c6fb924c5
15 changed files with 108 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@ -13,7 +13,7 @@ DataEase 是开源的数据可视化分析工具，帮助用户快速分析数
### DataEase 的功能：
- 图表展示：支持 PC 端、移动端及大屏;
- 图表制作：支持丰富的图表类型(基于 Apache ECharts 实现)、支持拖拉拽方式快速制作仪表板;
- 图表制作：支持丰富的图表类型(Apache ECharts / AntV)、支持拖拉拽方式快速制作仪表板;
- 数据引擎：支持直连模式、本地模式(基于 Apache Doris / Kettle 实现);
- 数据连接：支持关系型数据库、Excel 等文件、Hadoop 等大数据平台、NoSQL 等各种数据源。
@ -35,6 +35,8 @@ DataEase 是开源的数据可视化分析工具，帮助用户快速分析数
- MariaDB
- Apache Doris
- ClickHouse
- MongoDB
- Amazon Redshift
> 更多数据源支持持续增加中...
@ -73,7 +75,7 @@ curl -sSL https://github.com/dataease/dataease/releases/latest/download/quick_st
## 技术栈
- 后端：[Spring Boot](https://spring.io/projects/spring-boot)
- 前端：[Vue.js](https://vuejs.org/)、[Element](https://element.eleme.cn/)
- 前端：[Vue.js](https://vuejs.org/)、[Element](https://element.eleme.cn/)、[Apache ECharts](https://github.com/apache/echarts)、[AntV](https://antv.vision/zh)
- 中间件：[MySQL](https://www.mysql.com/)
- 数据处理：[Kettle](https://github.com/pentaho/pentaho-kettle)、[Apache Doris](https://github.com/apache/incubator-doris/)
- 基础设施：[Docker](https://www.docker.com/)

15
frontend/src/components/DeDrag/index.vue
View File

@ -444,7 +444,7 @@ export default {
style() {
// console.log('style-top:' + this.y + '--' + this.top)
return {
padding: (this.canvasStyleData.panel.gap === 'yes' ? this.componentGap : 0) + 'px',
padding: this.curGap + 'px',
transform: `translate(${this.left}px, ${this.top}px) rotate(${this.rotate}deg)`,
width: this.computedWidth,
height: this.computedHeight,
@ -487,7 +487,6 @@ export default {
// 根据left right 算出元素的宽度
computedMainSlotWidth() {
const gap = (this.canvasStyleData.panel.gap === 'yes' ? this.componentGap : 0) * 2
if (this.w === 'auto') {
if (!this.widthTouched) {
return 'auto'
@ -495,14 +494,13 @@ export default {
}
if (this.element.auxiliaryMatrix) {
const width = Math.round(this.width / this.curCanvasScale.matrixStyleWidth) * this.curCanvasScale.matrixStyleWidth
return (width - gap) + 'px'
return (width - this.curGap * 2) + 'px'
} else {
return (this.width - gap) + 'px'
return (this.width - this.curGap * 2) + 'px'
}
},
// 根据top bottom 算出元素的宽度
computedMainSlotHeight() {
const gap = (this.canvasStyleData.panel.gap === 'yes' ? this.componentGap : 0) * 2
if (this.h === 'auto') {
if (!this.heightTouched) {
return 'auto'
@ -510,9 +508,9 @@ export default {
}
if (this.element.auxiliaryMatrix) {
const height = Math.round(this.height / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight
return (height - gap) + 'px'
return (height - this.curGap * 2) + 'px'
} else {
return (this.height - gap) + 'px'
return (this.height - this.curGap * 2) + 'px'
}
},
@ -528,6 +526,9 @@ export default {
curComponent() {
return this.$store.state.curComponent
},
curGap() {
return this.canvasStyleData.panel.gap === 'yes' && this.element.auxiliaryMatrix ? this.componentGap : 0
},
...mapState([
'editor',
'curCanvasScale',

11
frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
View File

@ -1,7 +1,6 @@
<template>
<div
:style="getOutStyleDefault(config.style)"
:class="{'gap_class':canvasStyleData.panel.gap==='yes'}"
class="component"
@click="handleClick"
@mousedown="elementMouseDown"
@ -66,9 +65,13 @@ export default {
}
},
computed: {
curGap() {
return this.canvasStyleData.panel.gap === 'yes' && this.config.auxiliaryMatrix ? this.componentGap : 0
},
...mapState([
'canvasStyleData',
'curComponent'
'curComponent',
'componentGap'
])
},
mounted() {
@ -101,7 +104,9 @@ export default {
return value * scale / 100
},
getOutStyleDefault(style) {
const result = {};
const result = {
padding: this.curGap + 'px'
};
['width', 'left'].forEach(attr => {
result[attr] = style[attr] + 'px'
});

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

@ -1,6 +1,6 @@
<template>
<div id="canvasInfoMain" ref="canvasInfoMain" class="main-class">
<div id="canvasInfoTemp" ref="canvasInfoTemp" :style="customStyle" class="bg" @mouseup="deselectCurComponent" @mousedown="handleMouseDown">
<div id="canvasInfoMain" ref="canvasInfoMain" :style="customStyle" class="bg">
<div id="canvasInfoTemp" ref="canvasInfoTemp" class="main-class" @mouseup="deselectCurComponent" @mousedown="handleMouseDown">
<el-row v-if="componentDataShow.length===0" style="height: 100%;" class="custom-position">
{{ $t('panel.panelNull') }}
</el-row>
@ -95,9 +95,7 @@ export default {
computed: {
customStyle() {
let style = {
margin: 'auto',
width: this.mainWidth,
height: this.mainHeight
padding: this.componentGap + 'px'
}
if (this.canvasStyleData.openCommonStyle) {
if (this.canvasStyleData.panel.backgroundType === 'image' && this.canvasStyleData.panel.imageUrl) {
@ -132,7 +130,8 @@ export default {
'isClickComponent',
'curComponent',
'componentData',
'canvasStyleData'
'canvasStyleData',
'componentGap'
])
},
watch: {
@ -192,15 +191,6 @@ export default {
const canvasWidth = document.getElementById('canvasInfoMain').offsetWidth
this.scaleWidth = canvasWidth * 100 / parseInt(this.canvasStyleData.width)// 获取宽度比
this.scaleHeight = canvasHeight * 100 / parseInt(this.canvasStyleData.height)// 获取高度比
// console.log('scaleHeight:' + this.scaleHeight + ';ch:' + this.canvasStyleData.height)
// this.scaleHeight = this.scaleWidth
// this.mainHeight = this.canvasStyleData.height * this.scaleHeight / 100 + 'px'
// if (this.showType === 'width') {
// this.scaleHeight = this.scaleWidth
// this.mainHeight = this.canvasStyleData.height * this.scaleHeight / 100 + 'px'
// }
this.handleScaleChange()
},
resetID(data) {

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

@ -982,7 +982,8 @@ export default {
'editor',
'linkageSettingStatus',
'curLinkageView',
'doSnapshotIndex'
'doSnapshotIndex',
'componentGap'
])
},
watch: {

12
frontend/src/components/canvas/components/TextAttr.vue
View File

@ -108,7 +108,7 @@
<i class="icon iconfont icon-zimua" @click="goColor" />
</el-tooltip>
<div :style="letterDivColor" />
<el-color-picker ref="colorPicker" v-model="styleInfo.color" style="margin-top: 7px;height: 0px" size="mini" @change="styleChange" />
<el-color-picker ref="colorPicker" v-model="styleInfo.color" style="margin-top: 7px;height: 0px" size="mini" :predefine="predefineColors" @change="styleChange" />
</div>
</div>
<div v-if="attrShow('borderColor')" style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
@ -117,7 +117,7 @@
<i class="iconfont icon-huabi" @click="goBoardColor" />
</el-tooltip>
<div :style="boardDivColor" />
<el-color-picker ref="boardColorPicker" v-model="styleInfo.borderColor" style="margin-top: 7px;height: 0px" size="mini" @change="styleChange" />
<el-color-picker ref="boardColorPicker" v-model="styleInfo.borderColor" style="margin-top: 7px;height: 0px" size="mini" :predefine="predefineColors" @change="styleChange" />
</div>
</div>
@ -127,7 +127,7 @@
<i class="iconfont icon-beijingse1" @click="goBackgroundColor" />
</el-tooltip>
<div :style="backgroundDivColor" />
<el-color-picker ref="backgroundColorPicker" v-model="styleInfo.backgroundColor" style="margin-top: 7px;height: 0px" size="mini" @change="styleChange" />
<el-color-picker ref="backgroundColorPicker" v-model="styleInfo.backgroundColor" style="margin-top: 7px;height: 0px" :predefine="predefineColors" size="mini" @change="styleChange" />
</div>
</div>
@ -157,6 +157,7 @@ import { mapState } from 'vuex'
import Hyperlinks from '@/components/canvas/components/Editor/Hyperlinks'
import VideoLinks from '@/components/canvas/components/Editor/VideoLinks'
import DateFormat from '@/components/canvas/components/Editor/DateFormat'
import { COLOR_PANEL } from '@/views/chart/chart/chart'
export default {
components: { Hyperlinks, DateFormat, VideoLinks },
@ -172,6 +173,7 @@ export default {
},
data() {
return {
predefineColors: COLOR_PANEL,
showMain: true,
innerOpacity: 0,
textAlignOptions: [
@ -431,4 +433,8 @@ export default {
padding: 5px!important;
width: 30px!important;
}
::v-deep .el-color-dropdown__link-btn {
display: inline!important;
}
</style>

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

@ -12,33 +12,6 @@
</span>
</div>
<div v-else class="toolbar">
<!-- <div class="canvas-config" style="margin-right: 10px">-->
<!-- <span>{{ $t('panel.new_element_distribution') }}:</span>-->
<!-- <el-switch-->
<!-- v-model="canvasStyleData.auxiliaryMatrix"-->
<!-- :width="35"-->
<!-- active-color="#13ce66"-->
<!-- inactive-color="#ff4949"-->
<!-- :active-text="$t('panel.matrix')"-->
<!-- :inactive-text="$t('panel.suspension')"-->
<!-- />-->
<!-- </div>-->
<!-- <div class="canvas-config" style="margin-right: 10px" @click.stop="auxiliaryMatrixChange">-->
<!-- <span>{{ $t('panel.new_element_distribution.matrix_design') }}:</span>-->
<!-- <span v-if="curComponent.auxiliaryMatrix">-->
<!-- <i class="icon iconfont icon-shujujuzhen" />-->
<!-- {{ $t('panel.matrix_design') }}-->
<!-- </span>-->
<!-- <span v-if="!curComponent.auxiliaryMatrix">-->
<!-- <i class="icon iconfont icon-xuanfuanniu" />-->
<!-- {{ $t('panel.suspension') }}-->
<!-- </span>-->
<!-- </div>-->
<!-- <div class="canvas-config" style="margin-right: 10px">-->
<!-- <span> {{ $t('panel.canvas_scale') }} </span>-->
<!-- <input v-model="scale" @input="handleScaleChange"> %-->
<!-- </div>-->
<el-tooltip v-if="!canvasStyleData.auxiliaryMatrix" :content="$t('panel.new_element_distribution')+':'+$t('panel.suspension')">
<el-button class="icon iconfont-tb icon-xuanfuanniu" size="mini" circle @click="auxiliaryMatrixChange" />
</el-tooltip>
@ -65,13 +38,9 @@
<el-tooltip :content="$t('panel.redo') ">
<el-button class="el-icon-refresh-left" size="mini" circle @click="redo" />
</el-tooltip>
<!-- <el-tooltip :content="$t('panel.insert_picture') ">-->
<!-- <el-button class="el-icon-upload" size="mini" circle @click="goFile" />-->
<!-- </el-tooltip>-->
<el-tooltip :content="$t('panel.clean_canvas')">
<el-button class="el-icon-document-delete" size="mini" circle @click="clearCanvas" />
</el-tooltip>
<!-- <input id="input" ref="files" type="file" hidden @change="handleFileChange">-->
<el-tooltip :content="$t('panel.fullscreen_preview')">
<el-button class="el-icon-view" size="mini" circle @click="clickPreview" />
</el-tooltip>

35
frontend/src/layout/index.vue
View File

@ -1,14 +1,14 @@
<template>
<div :class="classObj" class="app-wrapper">
<licbar />
<topbar />
<topbar v-if="componentName!=='PanelEdit'" />
<de-container style="padding-top: 56px;">
<de-container :style="mainStyle">
<de-aside-container v-if="!sidebar.hide" class="le-aside-container">
<sidebar class="sidebar-container" />
</de-aside-container>
<de-main-container class="la-main-container">
<de-main-container class="la-main-container" :class="{'full-height':fullHeightFlag}">
<app-main />
</de-main-container>
</de-container>
@ -29,6 +29,8 @@ import ResizeMixin from './mixin/ResizeHandler'
import DeMainContainer from '@/components/dataease/DeMainContainer'
import DeContainer from '@/components/dataease/DeContainer'
import DeAsideContainer from '@/components/dataease/DeAsideContainer'
import bus from '@/utils/bus'
export default {
name: 'Layout',
components: {
@ -41,6 +43,11 @@ export default {
DeAsideContainer
},
mixins: [ResizeMixin],
data() {
return {
componentName: 'PanelMain'
}
},
computed: {
sidebar() {
return this.$store.state.app.sidebar
@ -54,6 +61,20 @@ export default {
showSettings() {
return this.$store.state.settings.showSettings
},
fullHeightFlag() {
return this.componentName === 'PanelEdit'
},
mainStyle() {
if (this.fullHeightFlag) {
return {
'height': '100vh!important'
}
} else {
return {
'paddingTop': '56px'
}
}
},
classObj() {
return {
// hideSidebar: !this.sidebar.opened,
@ -63,6 +84,11 @@ export default {
}
}
},
mounted() {
bus.$on('PanelSwitchComponent', (c) => {
this.componentName = c.name
})
},
methods: {
handleClickOutside() {
this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
@ -127,4 +153,7 @@ export default {
background-color: var(--SiderBG) !important;
}
}
.full-height {
height: 100vh !important;
}
</style>

6
frontend/src/styles/index.scss
View File

@ -692,4 +692,10 @@ div:focus {
padding-left: 0!important;
}
.el-color-predefine__color-selector{
border: 1px solid #999999!important;
margin: 0 0 6px 6px!important;
}

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

@ -864,6 +864,6 @@ export const COLOR_PANEL = [
'#1e90ff',
'#c71585',
'#999999',
'#00008b',
'#000000'
'#000000',
'#FFFFFF'
]

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

@ -1497,7 +1497,7 @@ export default {
}
},
addXaxis(e) {
if (this.view.type === 'map' && this.view.xaxis.length > 1) {
if ((this.view.type === 'map' || this.view.type === 'word-cloud') && this.view.xaxis.length > 1) {
this.view.xaxis = [this.view.xaxis[0]]
}
if (this.view.type !== 'table-info') {
@ -1507,7 +1507,7 @@ export default {
this.calcData(true)
},
addYaxis(e) {
if ((this.view.type === 'map' || this.view.type === 'waterfall') && this.view.yaxis.length > 1) {
if ((this.view.type === 'map' || this.view.type === 'waterfall' || this.view.type === 'word-cloud') && this.view.yaxis.length > 1) {
this.view.yaxis = [this.view.yaxis[0]]
}
this.dragCheckType(this.view.yaxis, 'q')

9
frontend/src/views/panel/SubjectSetting/PanelStyle/BackgroundSelector.vue
View File

@ -12,7 +12,7 @@
<el-radio v-model="panel.backgroundType" label="color" @change="onChangeType">{{ $t('chart.color') }}</el-radio>
</el-col>
<el-col :span="18">
<el-color-picker v-model="panel.color" size="mini" style="cursor: pointer;z-index: 1004;" @change="onChangeType"/>
<el-color-picker v-model="panel.color" :predefine="predefineColors" size="mini" style="cursor: pointer;z-index: 1004;" @change="onChangeType" />
</el-col>
</el-row>
<el-row style="height: 60px;margin-top:10px;overflow: hidden">
@ -50,6 +50,7 @@
import { mapState } from 'vuex'
import { deepCopy } from '@/components/canvas/utils/utils'
import { COLOR_PANEL } from '@/views/chart/chart/chart'
export default {
name: 'BackgroundSelector',
@ -59,7 +60,9 @@ export default {
dialogImageUrl: '',
dialogVisible: false,
uploadDisabled: false,
panel: null
panel: null,
predefineColors: COLOR_PANEL
}
},
computed: mapState([
@ -80,7 +83,7 @@ export default {
const canvasStyleData = deepCopy(this.canvasStyleData)
canvasStyleData.panel = this.panel
this.$store.commit('setCanvasStyle', canvasStyleData)
this.$store.commit('recordSnapshot','commitStyle')
this.$store.commit('recordSnapshot', 'commitStyle')
},
onChangeType() {
this.commitStyle()

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

@ -310,7 +310,9 @@ export default {
}
},
customCanvasStyle() {
let style = {}
let style = {
padding: this.componentGap + 'px'
}
if (this.canvasStyleData.openCommonStyle) {
if (this.canvasStyleData.panel.backgroundType === 'image' && this.canvasStyleData.panel.imageUrl) {
@ -340,7 +342,8 @@ export default {
'curComponentIndex',
'componentData',
'linkageSettingStatus',
'dragComponentInfo'
'dragComponentInfo',
'componentGap'
])
},
@ -680,9 +683,9 @@ export default {
this.$nextTick(() => {
const canvasHeight = document.getElementById('canvasInfo').offsetHeight
const canvasWidth = document.getElementById('canvasInfo').offsetWidth
this.outStyle.height = canvasHeight
this.outStyle.height = canvasHeight - (this.componentGap * 2)
// 临时处理 确保每次restore 有会更新
this.outStyle.width = canvasWidth + (Math.random() * 0.000001)
this.outStyle.width = canvasWidth - (this.componentGap * 2) + (Math.random() * 0.000001)
// console.log(canvasHeight + '--' + canvasWidth)
})
}
@ -847,14 +850,14 @@ export default {
<style scoped>
.ms-aside-container {
height: calc(100vh - 91px);
height: calc(100vh - 35px);
max-width: 60px;
border: none;
width: 60px;
}
.ms-main-container {
height: calc(100vh - 91px);
height: calc(100vh - 35px);
}
.de-header {
@ -888,7 +891,7 @@ export default {
.leftPanel {
width: 100%;
max-width: 300px;
height: calc(100vh - 91px);
height: calc(100vh - 35px);
position: fixed;
top: 91px;
left: 60px;
@ -915,14 +918,13 @@ export default {
}
.this_canvas{
height: calc(100vh - 91px);
height: calc(100vh - 35px);
overflow-x: hidden;
overflow-y: auto;
background-size:100% 100% !important;
}
.el-main{
height: calc(100vh - 91px);
height: calc(100vh - 35px);
padding: 0!important;
overflow: auto;
position: relative;

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

@ -1,6 +1,6 @@
<template>
<de-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]" style="background-color: #f7f8fa">
<de-main-container>
<de-main-container :class="{'full-height':componentName==='PanelEdit'}">
<panel-main v-show="componentName==='PanelMain'" ref="panel_main" />
<chart-edit v-if="componentName==='ChartEdit'" :param="param" />
<panel-edit v-if="componentName==='PanelEdit'" />
@ -103,4 +103,7 @@ export default {
padding: 0;
}
.full-height {
height: 100vh !important;
}
</style>

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

@ -23,6 +23,12 @@
<span v-if="panelInfo.sourcePanelName" style="color: green;font-size: 12px">({{ $t('panel.source_panel_name') }}:{{ panelInfo.sourcePanelName }})</span>
</el-col>
<el-col :span="12">
<span v-if="hasDataPermission('edit',panelInfo.privileges)&&activeTab==='PanelList'" style="float: right;margin-right: 10px">
<el-button size="mini" type="primary" @click="editPanel">
{{ $t('commons.edit') }}
</el-button>
</span>
<span v-if="hasDataPermission('export',panelInfo.privileges)" style="float: right;margin-right: 10px">
<el-tooltip :content="$t('panel.save_to_panel')">
<el-button class="el-icon-folder-checked" size="mini" circle @click="saveToTemplate" />
@ -61,11 +67,7 @@
<el-button class="el-icon-star-on" size="mini" circle @click="unstar" />
</el-tooltip>
</span>
<span v-if="hasDataPermission('edit',panelInfo.privileges)&&activeTab==='PanelList'" style="float: right;margin-right: 10px">
<el-tooltip :content="$t('commons.edit')">
<el-button class="el-icon-edit" size="mini" circle @click="editPanel" />
</el-tooltip>
</span>
</el-col>
</div>
</el-row>
@ -340,7 +342,7 @@ export default {
min-height: 400px;
height: 100%;
min-width: 500px;
overflow-y: auto;
overflow-y: hidden;
border-top: 1px solid #E6E6E6;
}