public/dataease
1
0
Fork 0
mirror of https://github.com/dataease/dataease.git synced 2026-05-20 19:48:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(视图): 视图编辑保存，横纵维度指标，EChart展示

Browse Source
This commit is contained in:
junjie
2021-03-01 18:03:11 +08:00
parent 8fca61aeb0
commit b6117d658a
22 changed files with 1965 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/business/components/chart/chart/chart.js Normal file
View File

@@ -0,0 +1,20 @@
export const BASE_BAR = {
title: {
text: ''
},
tooltip: {},
legend: {
data: []
},
xAxis: {
data: []
},
yAxis: {
type: 'value'
},
series: []
};
export default {
BASE_BAR,
}

46
frontend/src/business/components/chart/group/Group.vue
View File

@@ -139,7 +139,7 @@
</el-form-item>
</el-form>
</el-row>
<span>{{sceneData}}</span>
<span v-show="false">{{sceneData}}</span>
<el-tree
:data="chartData"
node-key="id"
@@ -152,7 +152,7 @@
</span>
<span>
<span @click.stop style="margin-left: 12px;">
<el-dropdown trigger="click" @command="clickMore">
<el-dropdown trigger="click" @command="clickMore" size="small">
<span class="el-dropdown-link">
<el-button
icon="el-icon-more"
@@ -175,7 +175,7 @@
</el-tree>
<!--rename chart-->
<el-dialog :title="$t('chart.table')" :visible="editTable" :show-close="false" width="30%">
<el-dialog :title="$t('chart.chart')" :visible="editTable" :show-close="false" width="30%">
<el-form :model="tableForm" :rules="tableFormRules" ref="tableForm">
<el-form-item :label="$t('commons.name')" prop="name">
<el-input v-model="tableForm.name"></el-input>
@@ -247,7 +247,7 @@ export default {
computed: {
sceneData: function () {
this.chartTree();
return this.$store.state.chart.sceneData;
return this.$store.state.chart.chartSceneData;
}
},
mounted() {
@@ -340,10 +340,10 @@ export default {
});
},
saveTable(table) {
saveTable(view) {
this.$refs['tableForm'].validate((valid) => {
if (valid) {
this.$post("/chart/table/update", table, response => {
this.$post("/chart/view/save", view, response => {
this.closeTable();
this.$message({
message: this.$t('commons.save_success'),
@@ -389,7 +389,7 @@ export default {
cancelButtonText: this.$t('chart.cancel'),
type: 'warning'
}).then(() => {
this.$post("/chart/table/delete/" + data.id, null, response => {
this.$post("/chart/view/delete/" + data.id, null, response => {
this.$message({
type: 'success',
message: this.$t('chart.delete_success'),
@@ -431,8 +431,8 @@ export default {
chartTree() {
this.chartData = [];
if (this.currGroup) {
this.$post('/chart/table/list', {
sort: 'type asc,create_time desc,name asc',
this.$post('/chart/view/list', {
sort: 'create_time desc,name asc',
sceneId: this.currGroup.id
}, response => {
this.chartData = response.data;
@@ -444,6 +444,7 @@ export default {
if (data.type === 'scene') {
this.sceneMode = true;
this.currGroup = data;
this.$store.commit("setSceneId", this.currGroup.id);
}
if (node.expanded) {
this.expandedArray.push(data.id);
@@ -476,13 +477,10 @@ export default {
},
sceneClick(data, node) {
// this.$store.commit('setChart', data.id);
// this.$router.push({
// name: 'ChartGroup',
// params: {
// table: data
// }
// });
this.$store.commit('setViewId', null);
this.$store.commit('setViewId', data.id);
this.$store.commit('setTableId', data.tableId);
this.$router.push("/chart/chart-edit");
},
selectTable() {
@@ -491,10 +489,18 @@ export default {
createChart() {
console.log(this.table);
this.selectTableFlag = false;
this.$store.commit("setTableId", null);
this.$store.commit("setTableId", this.table.id);
this.$router.push("/chart/chart-edit");
let view = {};
view.name = this.table.name;
view.sceneId = this.currGroup.id;
view.tableId = this.table.id;
this.$post('/chart/view/save', view, response => {
this.selectTableFlag = false;
this.$store.commit("setTableId", null);
this.$store.commit("setTableId", this.table.id);
this.$router.push("/chart/chart-edit");
this.$store.commit("setViewId", response.data.id);
this.chartTree();
})
},
getTable(table) {

340
frontend/src/business/components/chart/view/ChartEdit.vue
View File

@@ -2,33 +2,41 @@
<!--TODO 慢慢完善，写个DEMO-->
<el-row style="height: 100%;overflow-y: hidden;width: 100%;">
<span v-show="false">{{tableId}}</span>
<el-row style="height: 30px;">
<span>{{tableId}}</span>
<span style="float: right;">
<span v-show="false">{{sceneId}}</span>
<span v-show="false">{{vId}}</span>
<el-row style="height: 40px;" class="padding-lr">
<span style="line-height: 40px;">{{view.name}}</span>
<span style="float: right;line-height: 40px;">
<el-button size="mini">
取消
{{$t('chart.cancel')}}
</el-button>
<el-button type="primary" size="mini">
确认
<el-button type="primary" size="mini" @click="save">
{{$t('chart.confirm')}}
</el-button>
</span>
</el-row>
<el-row style="display: flex;height: 100%">
<el-col style="height: 100%;width: 20%;min-width: 180px;max-width:220px;border: 1px solid #E6E6E6;">
<div style="height: 50%;border-bottom: 1px solid #E6E6E6;overflow:auto">
纬度
<draggable v-model="arr1" @end="end1" :options="{group:{name: 'itxst',pull:'clone'},sort: true}" animation="300"
:move="onMove">
<el-col
style="height: 100%;width: 20%;min-width: 180px;max-width:220px;border: 1px solid #E6E6E6;border-left: 0 solid;">
<div style="height: 45%;border-bottom: 1px solid #E6E6E6;" class="padding-lr">
<span>{{$t('chart.dimension')}}</span>
<draggable v-model="dimension" @end="end1" :options="{group:{name: 'itxst',pull:'clone'},sort: true}"
animation="300"
:move="onMove"
style="height: 90%;overflow:auto">
<transition-group>
<div class="item" v-for="item in arr1" :key="item.id">{{item.name}}</div>
<div class="item" v-for="item in dimension" :key="item.id" @click="click1(item)">{{item.name}}</div>
</transition-group>
</draggable>
</div>
<div style="height: 50%;overflow:auto">
指标
<draggable v-model="arr2" @end="end2" group="itxst" animation="300" :move="onMove">
<div style="height: 45%;" class="padding-lr">
<span>{{$t('chart.quota')}}</span>
<draggable v-model="quota" @end="end2" :options="{group:{name: 'itxst',pull:'clone'},sort: true}"
animation="300"
:move="onMove"
style="height: 90%;overflow:auto">
<transition-group>
<div class="item" v-for="item in arr2" :key="item.id">{{item.name}}</div>
<div class="item" v-for="item in quota" :key="item.id" @click="click2(item)">{{item.name}}</div>
</transition-group>
</draggable>
</div>
@@ -36,56 +44,80 @@
<el-col
style="height: 100%;width: 25%;min-width: 200px;max-width:240px;border: 1px solid #E6E6E6;border-left: 0 solid;">
<div style="border-bottom: 1px solid #E6E6E6;overflow-y:hidden;">
<div style="border-bottom: 1px solid #E6E6E6;overflow-y:hidden;" class="padding-lr">
<el-row>
<span>标题</span>
<el-checkbox v-model="checked" style="float: right;">显示</el-checkbox>
<span>{{$t('chart.title')}}</span>
<el-checkbox v-model="view.show" style="float: right;">{{$t('chart.show')}}</el-checkbox>
</el-row>
<el-form>
<el-form-item class="form-item">
<el-input
size="mini"
placeholder="标题"
:placeholder="$t('chart.title')"
prefix-icon="el-icon-search"
v-model="title"
v-model="view.title"
clearable>
</el-input>
</el-form-item>
</el-form>
</div>
<div style="height: 30%;overflow:auto">
<span>图表类型</span>
<div style="height: 25%;overflow:auto" class="padding-lr">
<span>{{$t('chart.chart_type')}}</span>
<el-row>
<div class="chart-type">
<el-radio v-model="radio1" label="1">折线图</el-radio>
<el-radio v-model="radio1" label="2">柱状图</el-radio>
<!--TODO 这里要替换好看点的图标-->
<el-radio v-model="view.type" label="line">折线图</el-radio>
<el-radio v-model="view.type" label="bar">柱状图</el-radio>
</div>
</el-row>
</div>
<div style="height: 40%;overflow:auto;border-top: 1px solid #e6e6e6">
<div style="height: 45%;overflow:auto;border-top: 1px solid #e6e6e6">
<el-tabs type="card">
<el-tab-pane label="图形属性">图形属性</el-tab-pane>
<el-tab-pane label="组件样式">组件样式</el-tab-pane>
<el-tab-pane :label="$t('chart.shape_attr')" class="padding-lr">TODO</el-tab-pane>
<el-tab-pane :label="$t('chart.module_style')" class="padding-lr">TODO</el-tab-pane>
</el-tabs>
</div>
<div style="height: 30%;overflow:auto;border-top: 1px solid #e6e6e6">
<span>结果过滤器</span>
<div style="height: 30%;overflow:auto;border-top: 1px solid #e6e6e6" class="padding-lr">
<span>{{$t('chart.result_filter')}}</span>
<div>TODO</div>
</div>
</el-col>
<el-col style="height: 100%;min-width: 500px;border-top: 1px solid #E6E6E6;">
<el-row style="width: 100%;height: 100%;">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="横轴">
<el-input v-model="form.x_axis" size="mini"></el-input>
</el-form-item>
<el-form-item label="纵轴">
<el-input v-model="form.y_axis" size="mini"></el-input>
</el-form-item>
</el-form>
<div class="Echarts" style="height: 100%;display: flex;">
<div id="echart" style="width: 100%;height: 80%">
<el-row style="width: 100%;height: 100%;" class="padding-lr">
<el-row style="margin-top: 10px;">
<el-row style="display:flex;height: 30px;">
<span style="line-height: 30px;width: 60px;text-align: right;">{{$t('chart.x_axis')}}</span>
<draggable v-model="view.xaxis" @end="end3" group="itxst"
animation="300"
:move="onMove"
style="width:100%;margin:0 10px;border-radius: 4px;border: 1px solid #DCDFE6;">
<transition-group>
<el-tag size="mini" class="item" v-for="(item,index) in view.xaxis" :key="index" closable
@close="clear1(index)">
{{item.name}}
</el-tag>
</transition-group>
</draggable>
</el-row>
<el-row style="display:flex;height: 30px;margin-top: 10px;">
<span style="line-height: 30px;width: 60px;text-align: right;">{{$t('chart.y_axis')}}</span>
<draggable v-model="view.yaxis" @end="end4" group="itxst"
animation="300"
:move="onMove"
style="width:100%;margin:0 10px;border-radius: 4px;border: 1px solid #DCDFE6;">
<transition-group>
<el-tag size="mini" class="item" v-for="(item,index) in view.yaxis" :key="index" closable
@close="clear2(index)">
{{item.name}}
</el-tag>
</transition-group>
</draggable>
</el-row>
</el-row>
<div class="Echarts" style="height: 100%;display: flex;margin-top: 10px;">
<div id="echart" style="width: 100%;height: 80vh;">
</div>
</div>
@@ -97,19 +129,23 @@
<script>
import draggable from "vuedraggable";
import {BASE_BAR} from "../chart/chart";
export default {
name: "ChartEdit",
components: {draggable},
data() {
return {
form: {
x_axis: '',
y_axis: ''
table: {},
dimension: [],
quota: [],
view: {
xaxis: [],
yaxis: [],
show: true,
type: 'bar',
title: '',
},
checked: true,
radio1: '2',
title: '',
//定义要被拖拽对象的数组
arr1: [
{id: 1, name: 'id'},
@@ -125,77 +161,171 @@ export default {
}
},
created() {
// this.get(this.$store.state.chart.viewId);
},
mounted() {
this.myEcharts();
// this.get(this.$store.state.chart.viewId);
this.getData(this.$store.state.chart.viewId);
// this.myEcharts();
},
activated() {
},
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;
},
},
methods: {
initTableData(id) {
if (id != null) {
this.$post('/dataset/table/get/' + id, null, response => {
this.table = response.data;
this.initTableField(id);
})
}
},
initTableField(id) {
this.$post('/dataset/table/getFieldsFromDE', this.table, response => {
this.dimension = response.data.dimension;
this.quota = response.data.quota;
})
},
click1(item) {
// console.log(item);
let c = this.view.xaxis.filter(function (ele) {
return ele.id === item.id;
});
// console.log(c);
if (c && c.length === 0) {
this.view.xaxis.push(item);
}
},
click2(item) {
// console.log(item);
let c = this.view.yaxis.filter(function (ele) {
return ele.id === item.id;
});
// console.log(c);
if (c && c.length === 0) {
this.view.yaxis.push(item);
}
},
clear1(index) {
this.view.xaxis.splice(this.view.xaxis.indexOf(index), 1);
},
clear2(index) {
this.view.yaxis.splice(this.view.yaxis.indexOf(index), 1);
},
get(id) {
if (id) {
this.$post('/chart/view/get/' + id, null, 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() {
let view = JSON.parse(JSON.stringify(this.view));
view.id = this.view.id;
view.sceneId = this.sceneId;
view.name = this.table.name;
view.tableId = this.$store.state.chart.tableId;
view.xaxis = JSON.stringify(view.xaxis);
view.yaxis = JSON.stringify(view.yaxis);
this.$post('/chart/view/save', view, response => {
// this.get(response.data.id);
this.getData(response.data.id);
this.$store.commit("setChartSceneData", null);
this.$store.commit("setChartSceneData", this.sceneId);
})
},
getData(id) {
if (id) {
this.$post('/chart/view/getData/' + id, null, 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) : [];
let chart = response.data;
let chart_option = JSON.parse(JSON.stringify(BASE_BAR));
// console.log(chart_option);
if (chart.data) {
chart_option.title.text = chart.title;
chart_option.xAxis.data = chart.data.x;
chart.data.series.forEach(function (y) {
chart_option.legend.data.push(y.name);
chart_option.series.push(y);
});
}
// console.log(chart_option);
this.myEcharts(chart_option);
});
} else {
this.view = {};
}
},
//左边往右边拖动时的事件
end1(e) {
console.log(e)
var that = this;
var items = this.arr2.filter(function (m) {
return m.id == that.moveId
})
//如果左边
if (items.length < 2) return;
this.arr2.splice(e.newDraggableIndex, 1)
// console.log(e)
// var that = this;
// var items = this.arr2.filter(function (m) {
// return m.id == that.moveId
// })
// //如果左边
// if (items.length < 2) return;
// this.arr2.splice(e.newDraggableIndex, 1)
},
//右边往左边拖动时的事件
end2(e) {
console.log(e)
var that = this;
var items = this.arr1.filter(function (m) {
return m.id == that.moveId
})
//如果左边
if (items.length < 2) return;
this.arr1.splice(e.newDraggableIndex, 1)
// console.log(e)
// var that = this;
// var items = this.yAxisData.filter(function (m) {
// return m.id == that.moveId
// })
// //如果左边
// if (items.length < 2) return;
// this.yAxisData.splice(e.newDraggableIndex, 1)
},
end3(e) {
},
end4(e) {
},
//move回调方法
onMove(e, originalEvent) {
console.log('onmove');
this.moveId = e.relatedContext.element.id;
//不允许停靠
if (e.relatedContext.element.id == 1) return false;
//不允许拖拽
if (e.draggedContext.element.id == 4) return false;
if (e.draggedContext.element.id == 11) return false;
console.log(e);
// this.moveId = e.relatedContext.element.id;
// //不允许停靠
// if (e.relatedContext.element.id == 1) return false;
// //不允许拖拽
// if (e.draggedContext.element.id == 4) return false;
// if (e.draggedContext.element.id == 11) return false;
return true;
},
myEcharts() {
myEcharts(option) {
// 基于准备好的dom，初始化echarts实例
var myChart = this.$echarts.init(document.getElementById('echart'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
myChart.setOption(option);
myChart.setOption(option, true);
window.onresize = function () {
myChart.resize();
}
@@ -206,6 +336,10 @@ export default {
</script>
<style scoped>
.padding-lr {
padding: 0 6px;
}
.itxst {
margin: 10px;
text-align: left;
@@ -226,7 +360,7 @@ export default {
.item {
padding: 2px 12px;
margin: 3px 10px 0px 10px;
margin: 3px 3px 0 3px;
border: solid 1px #eee;
background-color: #f1f1f1;
text-align: left;
@@ -242,24 +376,6 @@ export default {
cursor: pointer;
}
.item2 {
padding: 6px 12px;
margin: 0px 10px 0px 10px;
border: solid 1px #eee;
background-color: pink;
text-align: left;
}
.item2 + .item2 {
border-top: none;
margin-top: 6px;
}
.item2:hover {
outline: solid 1px #ddd;
cursor: move;
}
.el-form-item {
margin-bottom: 0;
}

10
frontend/src/business/store.js
View File

@@ -22,7 +22,9 @@ const Chart = {
state: {
chartSceneData: "",
chart: "",
tableId: ""
tableId: "",
sceneId: "",
viewId: ""
},
mutations: {
setChartSceneData(state, chartSceneData) {
@@ -33,6 +35,12 @@ const Chart = {
},
setTableId(state, tableId) {
state.tableId = tableId;
},
setSceneId(state, sceneId) {
state.sceneId = sceneId;
},
setViewId(state, viewId) {
state.viewId = viewId;
}
}
}

33
frontend/src/i18n/en-US.js
View File

@@ -1549,7 +1549,18 @@ export default {
table: '表',
edit: '編輯',
create_view: '創建試圖',
data_preview: '數據預覽'
data_preview: '數據預覽',
dimension: 'Dimension',
quota: 'Quota',
title: 'Title',
show: 'Show',
chart_type: 'Chart Type',
shape_attr: 'Attribute',
module_style: 'Style',
result_filter: 'Filter',
x_axis: 'X-Axis',
y_axis: 'Y-Axis',
chart: 'Chart'
},
dataset: {
datalist: 'Data List',
@@ -1574,18 +1585,18 @@ export default {
sql_data: 'SQL Data',
excel_data: 'Excel Data',
custom_data: 'Custom Data',
pls_slc_tbl_left:'Please select table from left',
add_db_table:'Add Table',
pls_slc_data_source:'Select Data Source',
table:'Table',
pls_slc_tbl_left: 'Please select table from left',
add_db_table: 'Add Table',
pls_slc_data_source: 'Select Data Source',
table: 'Table',
edit: 'Edit',
create_view: 'Create View',
data_preview:'Data Preview',
field_type:'Field Type',
field_name:'Field Name',
field_origin_name:'Origin Name',
field_check:'Checked',
update_info:'Update Info',
data_preview: 'Data Preview',
field_type: 'Field Type',
field_name: 'Field Name',
field_origin_name: 'Origin Name',
field_check: 'Checked',
update_info: 'Update Info',
join_view: 'Relation View',
text: 'Text',
time: 'Time',

29
frontend/src/i18n/zh-CN.js
View File

@@ -1,6 +1,6 @@
export default {
commons: {
upload:'上传',
upload: '上传',
cover: '覆盖',
not_cover: '不覆盖',
import_mode: '导入模式',
@@ -220,8 +220,8 @@ export default {
loginImage: '登陆页面右侧图片',
loginTitle: '登陆页面提示信息',
pageTitle: '页面 Title',
favicon:"Favicon（浏览器Tab页上的小图标）",
advice_size:"建议图片大小",
favicon: "Favicon（浏览器Tab页上的小图标）",
advice_size: "建议图片大小",
},
system_config: {
base_config: '基本配置',
@@ -229,12 +229,12 @@ export default {
url: '当前站点URL',
url_tip: '例如：http://localhost:8081',
logo: "系统LOGO（显示在系统主页左上角的LOGO）",
advice_size:"建议图片大小",
title:"Title（浏览器Tab页上的显示的文字）",
favicon:"Favicon（浏览器Tab页上的小图标）",
system_name:"系统名称（显示在系统主页左上角的系统名称）",
advice_size: "建议图片大小",
title: "Title（浏览器Tab页上的显示的文字）",
favicon: "Favicon（浏览器Tab页上的小图标）",
system_name: "系统名称（显示在系统主页左上角的系统名称）",
login_image: "登录页图片（登录页中显示的图片）",
login_name:"登录页显示的系统名称"
login_name: "登录页显示的系统名称"
}
},
workspace: {
@@ -1570,7 +1570,18 @@ export default {
table: '表',
edit: '编辑',
create_view: '创建试图',
data_preview:'数据预览'
data_preview: '数据预览',
dimension: '维度',
quota: '指标',
title: '标题',
show: '显示',
chart_type: '图表类型',
shape_attr: '图形属性',
module_style: '组件样式',
result_filter: '结果过滤器',
x_axis: '横轴',
y_axis: '纵轴',
chart:'视图'
},
dataset: {
datalist: '数据列表',

13
frontend/src/i18n/zh-TW.js
View File

@@ -1550,7 +1550,18 @@ export default {
table: '表',
edit: '編輯',
create_view: '創建試圖',
data_preview: '數據預覽'
data_preview: '數據預覽',
dimension: '維度',
quota: '指標',
title: '標題',
show: '顯示',
chart_type: '圖表類型',
shape_attr: '圖形屬性',
module_style: '組件樣式',
result_filter: '結果過濾器',
x_axis: '橫軸',
y_axis: '縱軸',
chart:'視圖'
},
dataset: {
datalist: '數據列表',