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

feat(frontend): 前端调整

Browse Source
This commit is contained in:
junjie 2021-03-19 16:57:52 +08:00
parent 2fc15a5a33
commit be13e864ea
5 changed files with 67 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -707,11 +707,12 @@ export default {
preview: '预览',
pls_input_name: '请输入名称',
connect_mode: '连接模式',
incremental_update_type: '增量更新方式:',
incremental_add: '增量添加:',
incremental_delete: '增量删除:',
last_update_time: '上次更新时间:',
current_update_time: '当前更新时间:'
incremental_update_type: '增量更新方式',
incremental_add: '增量添加',
incremental_delete: '增量删除',
last_update_time: '上次更新时间',
current_update_time: '当前更新时间',
param: '参数'
},
datasource: {
create: '新建数据连接',

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

@ -30,7 +30,6 @@ export default {
},
watch: {
chart() {
debugger
this.drawEcharts()
},
resize() {
@ -44,7 +43,6 @@ export default {
},
methods: {
drawEcharts() {
debugger
const chart = this.chart
let chart_option = {}
// todo type

17
frontend/src/views/chart/components/ChartComponentView.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="Echarts" style="height: 100%;display: flex;margin-top: 10px;">
<div id="echart" style="width: 100%;height: 100%;" />
<div :id="chartId" style="width: 100%;height: 100%;" />
</div>
</template>
@ -17,6 +17,10 @@ export default {
chart: {
type: Object,
required: true
},
chartId: {
type: String,
required: false
}
},
data() {
@ -27,11 +31,15 @@ export default {
watch: {
chart() {
this.drawEcharts()
},
resize() {
this.drawEcharts()
}
},
mounted() {
// 基于准备好的dom，初始化echarts实例
this.myChart = this.$echarts.init(document.getElementById('echart'))
this.myChart = this.$echarts.init(document.getElementById(this.chartId))
this.drawEcharts()
},
methods: {
drawEcharts() {
@ -63,6 +71,11 @@ export default {
window.onresize = function() {
chart.resize()
}
},
chartResize() {
// 指定图表的配置项和数据
const chart = this.myChart
chart.resize()
}
}
}

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

@ -141,7 +141,7 @@
</el-row>
</el-row>
<chart-component-view :chart="chart" style="height: 80%" />
<chart-component :chart-id="chart.id" :chart="chart" style="height: 80%" />
</el-row>
</el-col>
</el-row>
@ -153,7 +153,7 @@ import { post } from '@/api/dataset/dataset'
import draggable from 'vuedraggable'
import DimensionItem from '../components/DimensionItem'
import QuotaItem from '../components/QuotaItem'
import ChartComponentView from '../components/ChartComponentView'
import ChartComponent from '../components/ChartComponent'
// shape attr
import { DEFAULT_COLOR_CASE, DEFAULT_SIZE } from '../chart/chart'
import ColorSelector from '../components/shape_attr/ColorSelector'
@ -161,7 +161,7 @@ import SizeSelector from '../components/shape_attr/SizeSelector'
export default {
name: 'ChartEdit',
components: { SizeSelector, ColorSelector, ChartComponentView, QuotaItem, DimensionItem, draggable },
components: { SizeSelector, ColorSelector, ChartComponent, QuotaItem, DimensionItem, draggable },
data() {
return {
table: {},
@ -190,7 +190,9 @@ export default {
{ id: 11, name: '容量' }
],
moveId: -1,
chart: {}
chart: {
id: 'echart'
}
}
},
computed: {

75
frontend/src/views/dataset/data/UpdateInfo.vue
View File

@ -66,7 +66,7 @@
append-to-body
>
<el-col>
<el-form :form="taskForm" label-width="80px">
<el-form :form="taskForm" label-width="80px" size="mini">
<el-form-item :label="$t('dataset.task_name')" prop="name">
<el-input
v-model="taskForm.name"
@ -96,7 +96,7 @@
/>
</el-form-item>
<el-form-item :label="$t('dataset.execute_rate')" prop="rate">
<el-select v-model="taskForm.rate" @change="onRateChange">
<el-select v-model="taskForm.rate" size="mini" @change="onRateChange">
<el-option
:label="$t('dataset.execute_once')"
value="SIMPLE"
@ -151,7 +151,7 @@
size="mini"
:data="taskData"
style="width: 100%"
height="300"
height="240"
>
<el-table-column
prop="name"
@ -195,11 +195,11 @@
<el-row style="height: 26px;">
<el-row>
<el-col :span="6"><div>{{ $t('dataset.incremental_update_type') }}</div></el-col>
<el-col :span="6"><div>{{ $t('dataset.incremental_update_type') }}:</div></el-col>
<el-col :span="18">
<el-radio-group v-model="incrementalUpdateType" size="small" @change="incrementalUpdateTypeChange">
<el-radio label="incrementalAdd" >{{ $t('dataset.incremental_add') }}</el-radio>
<el-radio label="incrementalDelete" >{{ $t('incremental_delete.incremental_update_type') }}</el-radio>
<el-radio label="incrementalAdd">{{ $t('dataset.incremental_add') }}</el-radio>
<el-radio label="incrementalDelete">{{ $t('dataset.incremental_delete') }}</el-radio>
</el-radio-group>
</el-col>
</el-row>
@ -207,10 +207,10 @@
<el-row style="height: 26px;">
<el-row>
<el-col :span="6" style="height: 26px;"><div style="height: 26px;">参数:</div></el-col>
<el-col :span="6" style="height: 26px;"><div style="height: 26px;">{{ $t('dataset.param') }}:</div></el-col>
<el-col :span="18">
<el-button type="text">{{ $t('dataset.last_update_time') }}</el-button>
<el-button type="text">{{ $t('dataset.current_update_time') }}</el-button>
<el-button type="text" @click="insertParamToCodeMirror('${__last_update_time__}')">{{ $t('dataset.last_update_time') }}</el-button>
<el-button type="text" @click="insertParamToCodeMirror('${__current_update_time__}')">{{ $t('dataset.current_update_time') }}</el-button>
</el-col>
</el-row>
</el-row>
@ -229,11 +229,9 @@
</el-col>
</el-row>
<div slot="footer" class="dialog-footer">
<el-button size="mini" @click="update_setting = false">{{ $t('dataset.close') }}</el-button>
<el-button size="mini" @click="saveIncrementalConfig">{{ $t('dataset.confirm') }}</el-button>
<el-button size="mini" type="primary" @click="saveIncrementalConfig">{{ $t('dataset.confirm') }}</el-button>
</div>
</el-dialog>
</el-col>
@ -327,17 +325,17 @@ export default {
incrementalConfig: {}
}
},
computed: {
codemirror() {
return this.$refs.myCm.codemirror
}
},
watch: {
table() {
this.listTask()
this.listTaskLog()
}
},
computed: {
codemirror() {
return this.$refs.myCm.codemirror
}
},
mounted() {
window.onresize = () => {
return (() => {
@ -345,29 +343,27 @@ export default {
})()
}
this.height = window.innerHeight / 2
},
methods: {
incrementalUpdateTypeChange: function (){
if(this.incrementalUpdateType === 'incrementalAdd'){
if(this.sql){
incrementalUpdateTypeChange: function() {
if (this.incrementalUpdateType === 'incrementalAdd') {
if (this.sql) {
this.incrementalConfig.incrementalDelete = this.sql
}
if(this.incrementalConfig.incrementalAdd){
if (this.incrementalConfig.incrementalAdd) {
this.sql = this.incrementalConfig.incrementalAdd
}else {
} else {
this.sql = ''
}
}
if(this.incrementalUpdateType === 'incrementalDelete'){
if(this.sql){
if (this.incrementalUpdateType === 'incrementalDelete') {
if (this.sql) {
this.incrementalConfig.incrementalAdd = this.sql
}
if(this.incrementalConfig.incrementalDelete){
this.sql = this.incrementalConfig.incrementalDelete
}else {
if (this.incrementalConfig.incrementalDelete) {
this.sql = this.incrementalConfig.incrementalDelete
} else {
this.sql = ''
}
}
@ -396,16 +392,16 @@ export default {
post('/dataset/table/incrementalConfig', { tableId: this.table.id }).then(response => {
this.incrementalConfig = response.data
this.incrementalUpdateType = 'incrementalAdd'
if(this.incrementalConfig.incrementalAdd){
if (this.incrementalConfig.incrementalAdd) {
this.sql = this.incrementalConfig.incrementalAdd
}
})
},
saveIncrementalConfig() {
this.update_setting = false
if(this.incrementalUpdateType === 'incrementalAdd'){
if (this.incrementalUpdateType === 'incrementalAdd') {
this.incrementalConfig.incrementalAdd = this.sql
}else {
} else {
this.incrementalConfig.incrementalDelete = this.sql
}
this.incrementalConfig.tableId = this.table.id
@ -483,6 +479,9 @@ export default {
end: '0'
}
},
showSQL(val) {
this.sql = val || ''
},
onCmReady(cm) {
this.codemirror.setSize('-webkit-fill-available', 'auto')
},
@ -490,11 +489,17 @@ export default {
// console.log('the editor is focus!', cm)
},
onCmCodeChange(newCode) {
console.log(newCode)
// console.log(newCode)
this.sql = newCode
this.$emit('codeChange', this.sql)
},
insertParamToCodeMirror(param) {
const pos1 = this.$refs.myCm.codemirror.getCursor()
const pos2 = {}
pos2.line = pos1.line
pos2.ch = pos1.ch
this.$refs.myCm.codemirror.replaceRange(param, pos2)
}
}
}
</script>
@ -513,7 +518,7 @@ export default {
}
.codemirror {
height: 160px;
height: 100px;
overflow-y: auto;
}
.codemirror >>> .CodeMirror-scroll {