Skip to content

D
datax-cloud
Commit e879d4fb by yuwei
Options

项目初始化

parent e03e90ed
Showing with 160 additions and 90 deletions
datax-modules/data-visual-service-parent/data-visual-service/src/main/java/cn/datax/service/data/visual/controller/DataSetController.java
...@@ -66,6 +66,7 @@ public class DataSetController extends BaseController { ...@@ -66,6 +66,7 @@ public class DataSetController extends BaseController {
public R getVisualDataSetList() { public R getVisualDataSetList() {
QueryWrapper<DataSetEntity> queryWrapper = new QueryWrapper<>(); QueryWrapper<DataSetEntity> queryWrapper = new QueryWrapper<>();
queryWrapper.eq("status", DataConstant.EnableState.ENABLE.getKey()); queryWrapper.eq("status", DataConstant.EnableState.ENABLE.getKey());
queryWrapper.select("id", "set_name");
List<DataSetEntity> list = dataSetService.list(queryWrapper); List<DataSetEntity> list = dataSetService.list(queryWrapper);
List<DataSetVo> collect = list.stream().map(dataSetMapper::toVO).collect(Collectors.toList()); List<DataSetVo> collect = list.stream().map(dataSetMapper::toVO).collect(Collectors.toList());
return R.ok().setData(collect); return R.ok().setData(collect);
......
datax-modules/data-visual-service-parent/data-visual-service/src/main/java/cn/datax/service/data/visual/dao/DataSetDao.java
...@@ -9,7 +9,6 @@ import org.apache.ibatis.annotations.Mapper; ...@@ -9,7 +9,6 @@ import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param; import org.apache.ibatis.annotations.Param;
import java.io.Serializable; import java.io.Serializable;
import java.util.List;
/** /**
* <p> * <p>
...@@ -26,8 +25,5 @@ public interface DataSetDao extends BaseDao<DataSetEntity> { ...@@ -26,8 +25,5 @@ public interface DataSetDao extends BaseDao<DataSetEntity> {
DataSetEntity selectById(Serializable id); DataSetEntity selectById(Serializable id);
@Override @Override
List<DataSetEntity> selectList(@Param(Constants.WRAPPER) Wrapper<DataSetEntity> queryWrapper);
@Override
<E extends IPage<DataSetEntity>> E selectPage(E page, @Param(Constants.WRAPPER) Wrapper<DataSetEntity> queryWrapper); <E extends IPage<DataSetEntity>> E selectPage(E page, @Param(Constants.WRAPPER) Wrapper<DataSetEntity> queryWrapper);
} }
datax-modules/data-visual-service-parent/data-visual-service/src/main/resources/mapper/DataSetMapper.xml
...@@ -53,13 +53,6 @@ ...@@ -53,13 +53,6 @@
WHERE 1=1 AND id = #{id} WHERE 1=1 AND id = #{id}
</select> </select>
<select id="selectList" resultMap="BaseResultMap">
SELECT
<include refid="Base_Column_List"></include>
FROM visual_data_set
${ew.customSqlSegment}
</select>
<select id="selectPage" resultMap="BaseResultMap"> <select id="selectPage" resultMap="BaseResultMap">
SELECT SELECT
<include refid="Base_Column_List"></include> <include refid="Base_Column_List"></include>
......
datax-ui/src/utils/image-compress.js deleted 100644 → 0
/**
* @param img 压缩图片
* @param width：压缩后宽度
* @param height：压缩后高度
* @param rate：压缩比率,0~1，越小压缩比率越大
* @returns {string} 返回base64
*/
export function compressImg(img, width, height, rate) {
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
canvas.width = width
canvas.height = height
ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, width, height)
return canvas.toDataURL('image/png', rate)
}
datax-ui/src/views/visual/databoard/DataBoardBuild.vue
...@@ -13,22 +13,25 @@ ...@@ -13,22 +13,25 @@
</ul> </ul>
</div> </div>
</div> </div>
<div class="widget-right-container"> <div class="widget-center-container">
<div class="widget-right-header"> <div class="widget-center-header">
<el-button icon="el-icon-view" type="text" @click="handlePreview"> <div class="widget-center-header-collapse" @click="drawer = true"><i class="el-icon-info"></i></div>
预览 <div class="widget-center-header-button">
</el-button> <el-button icon="el-icon-view" type="text" @click="handlePreview">
<el-button icon="el-icon-delete" type="text" @click="handleReset"> 预览
重置 </el-button>
</el-button> <el-button icon="el-icon-delete" type="text" @click="handleReset">
<el-button icon="el-icon-plus" type="text" @click="handleSubmit"> 重置
保存 </el-button>
</el-button> <el-button icon="el-icon-plus" type="text" @click="handleSubmit">
<el-button icon="el-icon-close" type="text" @click="handleCancel"> 保存
取消 </el-button>
</el-button> <el-button icon="el-icon-close" type="text" @click="handleCancel">
取消
</el-button>
</div>
</div> </div>
<div class="widget-right-wrapper" id="boardWrapper"> <div class="widget-center-wrapper" id="boardWrapper">
<grid-layout <grid-layout
:layout.sync="layout" :layout.sync="layout"
:col-num="24" :col-num="24"
...@@ -51,8 +54,8 @@ ...@@ -51,8 +54,8 @@
:i="item.i" :i="item.i"
@resized="handleResize" @resized="handleResize"
> >
<el-card v-loading="getChartItem(item.i).loading" class="widget-right-card" body-style="padding: 10px;"> <el-card v-loading="getChartItem(item.i).loading" class="widget-center-card" body-style="padding: 10px;">
<div slot="header" class="widget-right-card-header"> <div slot="header" class="widget-center-card-header">
<div> <div>
<span>{{ getChartItem(item.i).chartName }}</span> <span>{{ getChartItem(item.i).chartName }}</span>
</div> </div>
...@@ -66,6 +69,26 @@ ...@@ -66,6 +69,26 @@
</grid-layout> </grid-layout>
</div> </div>
</div> </div>
<el-drawer
size="300px"
:visible.sync="drawer"
:with-header="false">
<div class="widget-board-form">
<el-form size="mini" label-position="top">
<el-form-item label="看板名称">
<el-input v-model="dataBoard.boardName" size="mini" :disabled="true" />
</el-form-item>
<el-form-item label="缩略图">
<el-button type="primary" size="mini" plain style="margin-bottom: 10px;" @click="generatorImage">点击生成</el-button>
<el-image :src="dataBoard.boardThumbnail ? dataBoard.boardThumbnail : ''">
<div slot="error" class="image-slot">
<i class="el-icon-picture-outline" />
</div>
</el-image>
</el-form-item>
</el-form>
</div>
</el-drawer>
</div> </div>
</template> </template>
...@@ -75,7 +98,6 @@ import { listDataChart, getDataChart, dataParser } from '@/api/visual/datachart' ...@@ -75,7 +98,6 @@ import { listDataChart, getDataChart, dataParser } from '@/api/visual/datachart'
import VueGridLayout from 'vue-grid-layout' import VueGridLayout from 'vue-grid-layout'
import ChartPanel from '../datachart/components/ChartPanel' import ChartPanel from '../datachart/components/ChartPanel'
import html2canvas from 'html2canvas' import html2canvas from 'html2canvas'
import { compressImg } from '@/utils/image-compress'
export default { export default {
name: 'DataBoardBuild', name: 'DataBoardBuild',
...@@ -89,7 +111,8 @@ export default { ...@@ -89,7 +111,8 @@ export default {
dataBoard: {}, dataBoard: {},
dataChartList: [], dataChartList: [],
layout: [], layout: [],
charts: [] charts: [],
drawer: false
} }
}, },
created() { created() {
...@@ -98,17 +121,15 @@ export default { ...@@ -98,17 +121,15 @@ export default {
}, },
methods: { methods: {
getDataBoard(id) { getDataBoard(id) {
const _this = this
getDataBoard(id).then(response => { getDataBoard(id).then(response => {
if (response.success) { if (response.success) {
this.dataBoard = response.data this.dataBoard = response.data
this.layout = this.dataBoard.boardConfig ? JSON.parse(JSON.stringify(this.dataBoard.boardConfig.layout)) : [] this.layout = this.dataBoard.boardConfig ? JSON.parse(JSON.stringify(this.dataBoard.boardConfig.layout)) : []
const charts = this.dataBoard.charts const charts = this.dataBoard.charts ? JSON.parse(JSON.stringify(this.dataBoard.charts)) : []
charts.forEach(function(item, index, arr) { charts.forEach((item, index, arr) => {
_this.parserChart(item) this.parserChart(item)
}) })
this.dataBoard.charts = JSON.parse(JSON.stringify(charts)) this.charts = charts
this.charts = JSON.parse(JSON.stringify(charts))
} }
}) })
}, },
...@@ -166,9 +187,17 @@ export default { ...@@ -166,9 +187,17 @@ export default {
}, },
handleReset() { handleReset() {
this.layout = this.dataBoard.boardConfig ? JSON.parse(JSON.stringify(this.dataBoard.boardConfig.layout)) : [] this.layout = this.dataBoard.boardConfig ? JSON.parse(JSON.stringify(this.dataBoard.boardConfig.layout)) : []
this.charts = JSON.parse(JSON.stringify(this.dataBoard.charts)) const charts = this.dataBoard.charts ? JSON.parse(JSON.stringify(this.dataBoard.charts)) : []
this.dataChartList.forEach(function(item, index, arr) { charts.forEach((item, index, arr) => {
this.$set(item, 'disabled', false) this.parserChart(item)
})
this.charts = charts
this.dataChartList.forEach((item, index, arr) => {
if (charts.findIndex(chart => chart.id === item.id) === -1) {
this.$set(item, 'disabled', false)
} else {
this.$set(item, 'disabled', true)
}
}) })
}, },
handleSubmit() { handleSubmit() {
...@@ -194,9 +223,7 @@ export default { ...@@ -194,9 +223,7 @@ export default {
}, },
generatorImage() { generatorImage() {
html2canvas(document.getElementById('boardWrapper')).then(canvas => { html2canvas(document.getElementById('boardWrapper')).then(canvas => {
const image = new Image() const dataURL = canvas.toDataURL('image/png')
image.src = canvas.toDataURL('image/png')
const dataURL = compressImg(image, 250, 150, 0.5)
this.$set(this.dataBoard, 'boardThumbnail', dataURL) this.$set(this.dataBoard, 'boardThumbnail', dataURL)
}) })
} }
...@@ -246,7 +273,6 @@ export default { ...@@ -246,7 +273,6 @@ export default {
padding: 0; padding: 0;
margin: 0; margin: 0;
.list-group-item { .list-group-item {
display: block;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
height: 30px; height: 30px;
...@@ -265,28 +291,36 @@ export default { ...@@ -265,28 +291,36 @@ export default {
} }
} }
} }
.widget-right-container { .widget-center-container {
width: calc(100% - 250px); width: calc(100% - 550px);
flex: 1; flex: 1;
flex-basis: auto; flex-basis: auto;
box-sizing: border-box; box-sizing: border-box;
border-left: 1px solid #e4e7ed; border-left: 1px solid #e4e7ed;
.widget-right-header { border-right: 1px solid #e4e7ed;
.widget-center-header {
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
text-align: right; .widget-center-header-collapse {
padding: 0 20px; float: right;
padding-right: 20px;
}
.widget-center-header-button {
float: right;
text-align: right;
padding-right: 20px;
}
} }
.widget-right-wrapper { .widget-center-wrapper {
height: calc(100% - 40px); height: calc(100% - 40px);
padding: 10px; padding: 10px;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
border-top: 1px solid #e4e7ed; border-top: 1px solid #e4e7ed;
.widget-right-card { .widget-center-card {
::v-deep .el-card__header { ::v-deep .el-card__header {
padding: 0; padding: 0;
.widget-right-card-header { .widget-center-card-header {
font-size: 14px; font-size: 14px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -303,5 +337,22 @@ export default { ...@@ -303,5 +337,22 @@ export default {
} }
} }
} }
.widget-board-form {
padding: 20px;
.el-image{
width: 250px;
height: 150px;
::v-deep .image-slot {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background: #f5f7fa;
color: #909399;
font-size: 30px;
}
}
}
} }
</style> </style>
datax-ui/src/views/visual/databoard/DataBoardList.vue
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
<el-col v-for="(item, index) in tableDataList" :key="item.id" :span="6"> <el-col v-for="(item, index) in tableDataList" :key="item.id" :span="6">
<el-card :body-style="{ padding: '0px' }" class="box-card-item"> <el-card :body-style="{ padding: '0px' }" class="box-card-item">
<div class="box-card-item-body" @mouseenter="mouseEnter(item)" @mouseleave="mouseLeave(item)"> <div class="box-card-item-body" @mouseenter="mouseEnter(item)" @mouseleave="mouseLeave(item)">
<el-image :src="item.boardThumbnail ? ('data:image/png;base64,' + item.boardThumbnail) : ''"> <el-image :src="item.boardThumbnail ? item.boardThumbnail : ''">
<div slot="error" class="image-slot"> <div slot="error" class="image-slot">
<i class="el-icon-picture-outline" /> <i class="el-icon-picture-outline" />
</div> </div>
......
datax-ui/src/views/visual/databoard/DataBoardView.vue
...@@ -25,8 +25,8 @@ ...@@ -25,8 +25,8 @@
:h="item.h" :h="item.h"
:i="item.i" :i="item.i"
> >
<el-card v-loading="getChartItem(item.i).loading" class="widget-right-card" body-style="padding: 10px;"> <el-card v-loading="getChartItem(item.i).loading" class="board-wrapper-card" body-style="padding: 10px;">
<div slot="header" class="widget-right-card-header"> <div slot="header" class="board-wrapper-card-header">
<div> <div>
<span>{{ getChartItem(item.i).chartName }}</span> <span>{{ getChartItem(item.i).chartName }}</span>
</div> </div>
...@@ -64,14 +64,13 @@ export default { ...@@ -64,14 +64,13 @@ export default {
}, },
methods: { methods: {
getDataBoard(id) { getDataBoard(id) {
const _this = this
getDataBoard(id).then(response => { getDataBoard(id).then(response => {
if (response.success) { if (response.success) {
this.dataBoard = response.data this.dataBoard = response.data
this.layout = this.dataBoard.boardConfig ? JSON.parse(JSON.stringify(this.dataBoard.boardConfig.layout)) : [] this.layout = this.dataBoard.boardConfig ? JSON.parse(JSON.stringify(this.dataBoard.boardConfig.layout)) : []
const charts = this.dataBoard.charts const charts = this.dataBoard.charts
charts.forEach(function(item, index, arr) { charts.forEach((item, index, arr) => {
_this.parserChart(item) this.parserChart(item)
}) })
this.charts = charts this.charts = charts
} }
......
datax-ui/src/views/visual/datachart/DataChartBuild.vue
...@@ -27,18 +27,21 @@ ...@@ -27,18 +27,21 @@
</div> </div>
<div class="widget-center-container"> <div class="widget-center-container">
<div class="widget-center-header"> <div class="widget-center-header">
<el-button icon="el-icon-view" type="text" @click="handlePreview"> <div class="widget-center-header-collapse" @click="handleCollapse"><i :class="{'is-active': isCollapse}" class="el-icon-d-arrow-right"></i></div>
预览 <div class="widget-center-header-button">
</el-button> <el-button icon="el-icon-view" type="text" @click="handlePreview">
<el-button icon="el-icon-delete" type="text" @click="handleReset"> 预览
重置 </el-button>
</el-button> <el-button icon="el-icon-delete" type="text" @click="handleReset">
<el-button icon="el-icon-plus" type="text" @click="handleSubmit"> 重置
保存 </el-button>
</el-button> <el-button icon="el-icon-plus" type="text" @click="handleSubmit">
<el-button icon="el-icon-close" type="text" @click="handleCancel"> 保存
取消 </el-button>
</el-button> <el-button icon="el-icon-close" type="text" @click="handleCancel">
取消
</el-button>
</div>
</div> </div>
<div class="widget-center-content"> <div class="widget-center-content">
<div class="widget-center-draggable-wrapper"> <div class="widget-center-draggable-wrapper">
...@@ -96,7 +99,7 @@ ...@@ -96,7 +99,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="widget-right-container"> <div class="widget-right-container" :class="{hideRightContainer: isCollapse}">
<el-tabs type="border-card" stretch class="widget-right-tab"> <el-tabs type="border-card" stretch class="widget-right-tab">
<el-tab-pane label="图表属性"> <el-tab-pane label="图表属性">
<div class="widget-right-pane-form"> <div class="widget-right-pane-form">
...@@ -139,7 +142,6 @@ import draggable from 'vuedraggable' ...@@ -139,7 +142,6 @@ import draggable from 'vuedraggable'
import chartTypes from '@/utils/visual-chart' import chartTypes from '@/utils/visual-chart'
import ChartPanel from './components/ChartPanel' import ChartPanel from './components/ChartPanel'
import html2canvas from 'html2canvas' import html2canvas from 'html2canvas'
import { compressImg } from '@/utils/image-compress'
export default { export default {
name: 'DataChartBuild', name: 'DataChartBuild',
...@@ -169,7 +171,8 @@ export default { ...@@ -169,7 +171,8 @@ export default {
chartData: { chartData: {
data: [], data: [],
sql: '' sql: ''
} },
isCollapse: false
} }
}, },
created() { created() {
...@@ -181,6 +184,21 @@ export default { ...@@ -181,6 +184,21 @@ export default {
getDataChart(id).then(response => { getDataChart(id).then(response => {
if (response.success) { if (response.success) {
this.dataChart = response.data this.dataChart = response.data
if (this.dataChart.chartConfig) {
const chartConfig = JSON.parse(JSON.stringify(this.dataChart.chartConfig))
getDataSet(chartConfig.dataSetId).then(response => {
if (response.success) {
this.dataSet = response.data
this.dimensions = this.dataSet.schemaConfig.dimensions.filter(x => [...chartConfig.rows, ...chartConfig.columns].every(y => y.col !== x.col))
this.measures = this.dataSet.schemaConfig.measures.filter(x => chartConfig.measures.every(y => y.col !== x.col))
}
})
this.widget.dataSetId = chartConfig.dataSetId
this.widget.chartType = chartConfig.chartType
this.widget.rows = chartConfig.rows || []
this.widget.columns = chartConfig.columns || []
this.widget.measures = chartConfig.measures || []
}
} }
}) })
}, },
...@@ -218,6 +236,9 @@ export default { ...@@ -218,6 +236,9 @@ export default {
tag.aggregateType = '' tag.aggregateType = ''
this.measures.push(tag) this.measures.push(tag)
}, },
handleCollapse() {
this.isCollapse = !this.isCollapse
},
handlePreview() { handlePreview() {
dataParser(this.widget).then(response => { dataParser(this.widget).then(response => {
if (response.success) { if (response.success) {
...@@ -234,6 +255,8 @@ export default { ...@@ -234,6 +255,8 @@ export default {
this.widget.rows = [] this.widget.rows = []
this.widget.columns = [] this.widget.columns = []
this.widget.measures = [] this.widget.measures = []
this.chartData.data = []
this.chartData.sql = ''
}, },
handleSubmit() { handleSubmit() {
const data = { const data = {
...@@ -258,9 +281,17 @@ export default { ...@@ -258,9 +281,17 @@ export default {
html2canvas(document.getElementById('chartPanel')).then(canvas => { html2canvas(document.getElementById('chartPanel')).then(canvas => {
const image = new Image() const image = new Image()
image.src = canvas.toDataURL('image/png') image.src = canvas.toDataURL('image/png')
const dataURL = compressImg(image, 250, 150, 0.5) const dataURL = this.compressImg(image, 250, 150, 0.5)
this.$set(this.dataChart, 'chartThumbnail', dataURL) this.$set(this.dataChart, 'chartThumbnail', dataURL)
}) })
},
compressImg(img, width, height, rate) {
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
canvas.width = width
canvas.height = height
ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, width, height)
return canvas.toDataURL('image/png', rate)
} }
} }
} }
...@@ -354,9 +385,19 @@ export default { ...@@ -354,9 +385,19 @@ export default {
.widget-center-header { .widget-center-header {
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
text-align: right;
padding: 0 20px;
border-bottom: 1px solid #e4e7ed; border-bottom: 1px solid #e4e7ed;
.widget-center-header-collapse {
float: right;
background-color: #f0f8ff;
.is-active {
transform: rotate(180deg);
}
}
.widget-center-header-button {
text-align: right;
padding-right: 20px;
float: right;
}
} }
.widget-center-content { .widget-center-content {
height: 100%; height: 100%;
...@@ -420,6 +461,10 @@ export default { ...@@ -420,6 +461,10 @@ export default {
.widget-right-container { .widget-right-container {
width: 300px; width: 300px;
box-sizing: border-box; box-sizing: border-box;
// 折叠
&.hideRightContainer{
width: 0px;
}
.widget-right-pane-form { .widget-right-pane-form {
height: calc(100vh - 40px); height: calc(100vh - 40px);
overflow-x: hidden; overflow-x: hidden;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment