Skip to content

D
datax-cloud
Commit 58cf2faa by yuwei
Options

项目初始化

parent fb208eba
Showing with 108 additions and 88 deletions
datax-ui/src/views/chartboard/chart/make.vue
......@@ -17,11 +17,11 @@
<div style="margin: -20px;">
<div class="field-widget-cate"><i class="icon iconfont icon-weidu"></i><span>维度列</span></div>
<draggable v-model="dimensions" tag="ul" :options="{sort: false, ghostClass: 'ghost', group: {name: 'dimensions', pull: true, put: false}}">
<li v-for="(item, index) in dimensions" :key="index" class="field-widget-label"><div>{{ item.label ? item.label + '(' + item.tag + ')' : item.tag }}</div></li>
<li v-for="(item, index) in dimensions" :key="index" class="field-widget-label"><div>{{ item.alias ? item.alias + '(' + item.col + ')' : item.col }}</div></li>
</draggable>
<div class="field-widget-cate"><i class="icon iconfont icon-zhibiao"></i><span>指标列</span></div>
<draggable v-model="measures" tag="ul" :options="{sort: false, ghostClass: 'ghost', group: {name: 'measures', pull: true, put: false}}">
<li v-for="(item, index) in measures" :key="index" class="field-widget-label"><div>{{ item.label ? item.label + '(' + item.tag + ')' : item.tag }}</div></li>
<li v-for="(item, index) in measures" :key="index" class="field-widget-label"><div>{{ item.alias ? item.alias + '(' + item.col + ')' : item.col }}</div></li>
</draggable>
</div>
</el-card>
......@@ -46,9 +46,9 @@
<el-divider content-position="left">行维</el-divider>
<el-col>
<div class="draggable-wrapper">
<draggable :options="{sort: false, ghostClass: 'ghost', group: {name: 'dimensions'}}" v-model="form.rows">
<el-tag v-for="(item, index) in form.rows" :key="index" class="draggable-item" closable @close="handleRowTagClose(index, item)">
{{ item.label ? item.label : item.tag }}
<draggable :options="{sort: false, ghostClass: 'ghost', group: {name: 'dimensions'}}" v-model="form.keys">
<el-tag v-for="(item, index) in form.keys" :key="index" class="draggable-item" closable @close="handleKeyTagClose(index, item)">
{{ item.alias ? item.alias : item.col }}
</el-tag>
</draggable>
</div>
......@@ -58,9 +58,9 @@
<el-divider content-position="left">列维</el-divider>
<el-col>
<div class="draggable-wrapper">
<draggable :options="{sort: false, ghostClass: 'ghost', group: {name: 'dimensions'}}" v-model="form.cols">
<el-tag v-for="(item, index) in form.cols" :key="index" class="draggable-item" closable @close="handleColTagClose(index, item)">
{{ item.label ? item.label : item.tag }}
<draggable :options="{sort: false, ghostClass: 'ghost', group: {name: 'dimensions'}}" v-model="form.groups">
<el-tag v-for="(item, index) in form.groups" :key="index" class="draggable-item" closable @close="handleGroupTagClose(index, item)">
{{ item.alias ? item.alias : item.col }}
</el-tag>
</draggable>
</div>
......@@ -70,11 +70,21 @@
<el-divider content-position="left">指标</el-divider>
<el-col>
<div class="draggable-wrapper">
<draggable :options="{sort: false, ghostClass: 'ghost', group: {name: 'measures'}}" v-model="form.vals">
<div v-for="(item, index) in form.vals" :key="index" class="draggable-item">
<el-tag>{{ item.label ? item.label : item.tag }}</el-tag>
<span class="draggable-item-handle"><i class="el-icon-edit-outline"></i></span>
<span class="draggable-item-handle" @click="handleValTagClose(index, item)"><i class="el-icon-delete"></i></span>
<draggable :options="{sort: false, ghostClass: 'ghost', group: {name: 'measures'}}" v-model="form.values" @change="handleValueDragChange">
<div v-for="(item, index) in form.values" :key="index" class="draggable-item">
<!-- <el-tag>{{ item.alias ? item.alias : item.col }}</el-tag>-->
<el-tag>{{ item.alias ? item.aggregate_type + '(' + item.col + ') -> ' + item.alias : item.aggregate_type + '(' + item.col + ')' }}</el-tag>
<span class="draggable-item-handle" v-if="item.radio">
<el-radio-group size="mini" v-model="item.aggregate_type" @change="((label)=>{handleValueChangeTagType(label, index, item)})">
<el-radio :label="sum">求和</el-radio>
<el-radio :label="count">计数</el-radio>
<el-radio :label="avg">平均值</el-radio>
<el-radio :label="max">最大值</el-radio>
<el-radio :label="min">最小值</el-radio>
</el-radio-group>
</span>
<span class="draggable-item-handle" v-else @click="handleValueTagType(index, item)"><i class="el-icon-edit-outline"></i></span>
<span class="draggable-item-handle" @click="handleValueTagClose(index, item)"><i class="el-icon-delete"></i></span>
</div>
</draggable>
</div>
......@@ -122,54 +132,66 @@ import draggable from 'vuedraggable'
export default {
name: 'ChartMake',
components: {
draggable
draggable
},
data () {
return {
form: {
rows: [],
cols: [],
vals: []
},
dataset: {},
datasetOptions : [],
dimensions: [],
measures: []
}
return {
form: {
keys: [],
groups: [],
values: []
},
dataset: {},
datasetOptions : [],
dimensions: [],
measures: []
}
},
created () {
this.getDataSetList()
this.getDataSetList()
},
methods: {
getDataSetList () {
listDataSet().then(response => {
if (response.success) {
this.datasetOptions = response.data
}
})
},
handleCommand (command) {
getDataSet(command).then(response => {
if (response.success) {
this.dataset = response.data
console.log(this.dataset)
this.dimensions = this.dataset.schemaConfig.dimensions
this.measures = this.dataset.schemaConfig.measures
}
})
},
handleRowTagClose (index, tag) {
this.form.rows.splice(index, 1)
this.dimensions.push(tag)
},
handleColTagClose (index, tag) {
this.form.cols.splice(index, 1)
this.dimensions.push(tag)
},
handleValTagClose (index, tag) {
this.form.vals.splice(index, 1)
this.measures.push(tag)
getDataSetList () {
listDataSet().then(response => {
if (response.success) {
this.datasetOptions = response.data
}
})
},
handleCommand (command) {
getDataSet(command).then(response => {
if (response.success) {
this.dataset = response.data
this.dimensions = this.dataset.schemaConfig.dimensions
this.measures = this.dataset.schemaConfig.measures
}
})
},
handleKeyTagClose (index, tag) {
this.form.keys.splice(index, 1)
this.dimensions.push(tag)
},
handleGroupTagClose (index, tag) {
this.form.groups.splice(index, 1)
this.dimensions.push(tag)
},
handleValueDragChange (tag) {
if (tag.added) {
this.$set(tag, 'aggregate_type', 'sum')
}
},
handleValueChangeTagType (label, index, tag) {
this.$delete(tag, 'radio')
},
handleValueTagType (index, tag) {
this.$set(this.measures, index, Object.assign({}, tag, { radio: true }))
// this.$set(this.measures, index, Object.assign({}, tag, { radio: true, aggregate_type: 'sum' }))
},
handleValueTagClose (index, tag) {
this.form.values.splice(index, 1)
tag.aggregate_type = ''
this.measures.push(tag)
}
}
}
</script>
......
datax-ui/src/views/factory/dataset/DataSetAdd.vue
......@@ -45,8 +45,8 @@
<el-col :span="12" style="border: 1px dashed #999;height: 100%;">
<div class="tag-group" >
<draggable v-model="columnList" :options="{sort: false, group: {name: 'col', pull:'clone', put: false}}">
<el-tag v-for="(col, index) in columnList" :key="index" class="draggable-tag">
{{ col.tag }}
<el-tag v-for="(item, index) in columnList" :key="index" class="draggable-tag">
{{ item.col }}
</el-tag>
</draggable>
</div>
......@@ -58,9 +58,9 @@
<div style="height: 90px; border: 1px dashed #999; margin: 0 10px;">
<draggable group="col" :list="dimensionList">
<div v-for="(item, index) in dimensionList" :key="index" class="draggable-item">
<el-tag>{{ item.label ? item.label + '(' + item.tag + ')' : item.tag }}</el-tag>
<el-tag>{{ item.alias ? item.alias + '(' + item.col + ')' : item.col }}</el-tag>
<span class="draggable-item-handle" v-if="item.input">
<el-input size="mini" placeholder="请输入内容" v-model="item.label" @blur="handleDimensionDelTagLabel(index, item)">
<el-input size="mini" placeholder="请输入内容" v-model="item.alias" @blur="handleDelTagLabel(index, item)">
</el-input>
</span>
<span class="draggable-item-handle" v-else @click="handleDimensionTagLabel(index, item)"><i class="el-icon-edit-outline"></i></span>
......@@ -76,9 +76,9 @@
<div style="height: 90px; border: 1px dashed #999; margin: 0 10px;">
<draggable group="col" :list="measureList">
<div v-for="(item, index) in measureList" :key="index" class="draggable-item">
<el-tag>{{ item.label ? item.label + '(' + item.tag + ')' : item.tag }}</el-tag>
<el-tag>{{ item.alias ? item.alias + '(' + item.col + ')' : item.col }}</el-tag>
<span class="draggable-item-handle" v-if="item.input">
<el-input size="mini" placeholder="请输入内容" v-model="item.label" @blur="handleMeasureDelTagLabel(index, item)">
<el-input size="mini" placeholder="请输入内容" v-model="item.alias" @blur="handleDelTagLabel(index, item)">
</el-input>
</span>
<span class="draggable-item-handle" v-else @click="handleMeasureTagLabel(index, item)"><i class="el-icon-edit-outline"></i></span>
......@@ -258,8 +258,8 @@ export default {
this.columns = response.data
this.columnList = this.columns.map(function (item) {
let json = {}
json.tag = item
json.label = ''
json.col = item
json.alias = ''
return json
})
this.dimensionList = []
......@@ -269,22 +269,21 @@ export default {
},
handleDimensionTagClose (index, tag) {
this.dimensionList.splice(index, 1)
tag.alias = ''
this.columnList.push(tag)
},
handleMeasureTagClose (index, tag) {
this.measureList.splice(index, 1)
tag.alias = ''
this.columnList.push(tag)
},
handleDimensionTagLabel (index, tag) {
this.$set(this.dimensionList, index, Object.assign({}, tag, { input: true }))
},
handleDimensionDelTagLabel (index, tag) {
this.$delete(tag, 'input')
},
handleMeasureTagLabel (index, tag) {
this.$set(this.measureList, index, Object.assign({}, tag, { input: true }))
},
handleMeasureDelTagLabel (index, tag) {
handleDelTagLabel (index, tag) {
this.$delete(tag, 'input')
},
dataPreview () {
......
datax-ui/src/views/factory/dataset/DataSetDetail.vue
......@@ -40,7 +40,7 @@
<el-col :span="12" style="border: 1px dashed #999;height: 100%;">
<div class="tag-group" >
<el-tag v-for="(item, index) in columnList" :key="index" class="draggable-tag">
{{ item.tag }}
{{ item.col }}
</el-tag>
</div>
</el-col>
......@@ -50,7 +50,7 @@
<el-col>
<div style="height: 90px; border: 1px dashed #999; margin: 0 10px;">
<el-tag v-for="(item, index) in dimensionList" :key="index" class="draggable-item">
{{ item.label ? item.label + '(' + item.tag + ')' : item.tag }}
{{ item.alias ? item.alias + '(' + item.col + ')' : item.col }}
</el-tag>
</div>
</el-col>
......@@ -60,7 +60,7 @@
<el-col>
<div style="height: 90px; border: 1px dashed #999; margin: 0 10px;">
<el-tag v-for="(item, index) in measureList" :key="index" class="draggable-item">
{{ item.label ? item.label + '(' + item.tag + ')' : item.tag }}
{{ item.alias ? item.alias + '(' + item.col + ')' : item.col }}
</el-tag>
</div>
</el-col>
......@@ -203,10 +203,10 @@ export default {
if (this.columns && this.columns.length > 0) {
this.dimensionList = this.form.schemaConfig.dimensions || []
this.measureList = this.form.schemaConfig.measures || []
this.columnList = this.columns.filter(x => [...this.dimensionList, ...this.measureList].every(y => y.tag !== x)).map(function (item) {
this.columnList = this.columns.filter(x => [...this.dimensionList, ...this.measureList].every(y => y.col !== x)).map(function (item) {
let json = {}
json.tag = item
json.label = ''
json.col = item
json.alias = ''
return json
})
}
......
datax-ui/src/views/factory/dataset/DataSetEdit.vue
......@@ -45,8 +45,8 @@
<el-col :span="12" style="border: 1px dashed #999;height: 100%;">
<div class="tag-group" >
<draggable v-model="columnList" :options="{sort: false, group: {name: 'col', pull: true, put: false}}">
<el-tag v-for="(col, index) in columnList" :key="index" class="draggable-tag">
{{ col.tag }}
<el-tag v-for="(item, index) in columnList" :key="index" class="draggable-tag">
{{ item.col }}
</el-tag>
</draggable>
</div>
......@@ -58,9 +58,9 @@
<div style="height: 90px; border: 1px dashed #999; margin: 0 10px;">
<draggable group="col" :list="dimensionList">
<div v-for="(item, index) in dimensionList" :key="index" class="draggable-item">
<el-tag>{{ item.label ? item.label + '(' + item.tag + ')' : item.tag }}</el-tag>
<el-tag>{{ item.alias ? item.alias + '(' + item.col + ')' : item.col }}</el-tag>
<span class="draggable-item-handle" v-if="item.input">
<el-input size="mini" placeholder="请输入内容" v-model="item.label" @blur="handleDimensionDelTagLabel(index, item)">
<el-input size="mini" placeholder="请输入内容" v-model="item.alias" @blur="handleDelTagLabel(index, item)">
</el-input>
</span>
<span class="draggable-item-handle" v-else @click="handleDimensionTagLabel(index, item)"><i class="el-icon-edit-outline"></i></span>
......@@ -76,9 +76,9 @@
<div style="height: 90px; border: 1px dashed #999; margin: 0 10px;">
<draggable group="col" :list="measureList">
<div v-for="(item, index) in measureList" :key="index" class="draggable-item">
<el-tag>{{ item.label ? item.label + '(' + item.tag + ')' : item.tag }}</el-tag>
<el-tag>{{ item.alias ? item.alias + '(' + item.col + ')' : item.col }}</el-tag>
<span class="draggable-item-handle" v-if="item.input">
<el-input size="mini" placeholder="请输入内容" v-model="item.label" @blur="handleMeasureDelTagLabel(index, item)">
<el-input size="mini" placeholder="请输入内容" v-model="item.alias" @blur="handleDelTagLabel(index, item)">
</el-input>
</span>
<span class="draggable-item-handle" v-else @click="handleMeasureTagLabel(index, item)"><i class="el-icon-edit-outline"></i></span>
......@@ -244,10 +244,10 @@ export default {
if (this.columns && this.columns.length > 0) {
this.dimensionList = this.form.schemaConfig.dimensions || []
this.measureList = this.form.schemaConfig.measures || []
this.columnList = this.columns.filter(x => [...this.dimensionList, ...this.measureList].every(y => y.tag !== x)).map(function (item) {
this.columnList = this.columns.filter(x => [...this.dimensionList, ...this.measureList].every(y => y.col !== x)).map(function (item) {
let json = {}
json.tag = item
json.label = ''
json.col = item
json.alias = ''
return json
})
}
......@@ -273,8 +273,8 @@ export default {
this.columns = response.data
this.columnList = this.columns.map(function (item) {
let json = {}
json.tag = item
json.label = ''
json.col = item
json.alias = ''
return json
})
this.dimensionList = []
......@@ -284,23 +284,22 @@ export default {
},
handleDimensionTagClose (index, tag) {
this.dimensionList.splice(index, 1)
tag.alias = ''
this.columnList.push(tag)
},
handleMeasureTagClose (index, tag) {
this.measureList.splice(index, 1)
tag.alias = ''
this.columnList.push(tag)
},
handleDimensionTagLabel (index, tag) {
this.$set(this.dimensionList, index, Object.assign({}, tag, { input: true }))
},
handleDimensionDelTagLabel (index, tag) {
this.$delete(tag, 'input')
},
handleMeasureTagLabel (index, tag) {
this.$set(this.measureList, index, Object.assign({}, tag, { input: true }))
},
handleMeasureDelTagLabel (index, tag) {
this.$delete(tag, 'input')
handleDelTagLabel (index, tag) {
this.$delete(tag, 'input')
},
dataPreview () {
if (!this.form.sourceId) {
......
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