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-04-06 11:43:29 +08:00
parent ea7efe5608
commit e6d662afcf
3 changed files with 63 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
frontend/src/views/chart/components/shape-attr/TooltipSelector.vue
View File

@ -25,7 +25,30 @@
<el-form-item :label="$t('chart.text_color')" class="form-item">
<colorPicker v-model="tooltipForm.textStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 999;border: solid 1px black" @change="changeTooltipAttr" />
</el-form-item>
<el-form-item :label="$t('chart.content_formatter')" class="form-item">
<el-form-item class="form-item">
<span slot="label">
<span class="span-box">
<span>{{ $t('chart.content_formatter') }}</span>
<el-tooltip class="item" effect="dark" placement="bottom">
<div slot="content">
模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。
<br>
在 trigger 为 'axis' 的时候，会有多个系列的数据，此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。
<br>
不同图表类型下的 {a}，{b}，{c}，{d} 含义不一样。 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为：
<br><br>
折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
<br>
散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）
<br>
地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
<br>
饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
</div>
<i class="el-icon-info" style="cursor: pointer;" />
</el-tooltip>
</span>
</span>
<el-input v-model="tooltipForm.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" :placeholder="$t('chart.formatter_plc')" @blur="changeTooltipAttr" />
</el-form-item>
</el-form>

2
frontend/src/views/chart/view/TableSelector.vue
View File

@ -47,7 +47,7 @@ export default {
.ms-aside-container {
height: 50vh;
min-width: 180px;
max-width: 300px;
max-width: 280px;
}
.ms-main-container {

53
frontend/src/views/dataset/common/DatasetGroupSelector.vue
View File

@ -9,19 +9,19 @@
</el-row>
<el-divider />
<el-row>
<el-form>
<el-form-item class="form-item">
<el-input
v-model="search"
size="mini"
:placeholder="$t('dataset.search')"
prefix-icon="el-icon-search"
clearable
/>
</el-form-item>
</el-form>
</el-row>
<!-- <el-row>-->
<!-- <el-form>-->
<!-- <el-form-item class="form-item">-->
<!-- <el-input-->
<!-- v-model="search"-->
<!-- size="mini"-->
<!-- :placeholder="$t('dataset.search')"-->
<!-- prefix-icon="el-icon-search"-->
<!-- clearable-->
<!-- />-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- </el-row>-->
<el-col class="custom-tree-container">
<div class="block">
@ -77,9 +77,10 @@
:data="tableData"
node-key="id"
:expand-on-click-node="true"
class="tree-list"
@node-click="sceneClick"
>
<span slot-scope="{ node, data }" class="custom-tree-node">
<span slot-scope="{ node, data }" class="custom-tree-node-list">
<span>
<span>
({{ data.type }})
@ -107,6 +108,7 @@ export default {
search: '',
data: [],
tableData: [],
tables: [],
currGroup: null,
expandedArray: [],
groupForm: {
@ -129,6 +131,13 @@ export default {
// this.groupForm.name = val;
// this.tree(this.groupForm);
// }
search(val) {
if (val && val !== '') {
this.tableData = JSON.parse(JSON.stringify(this.tables.filter(ele => { return ele.name.includes(val) })))
} else {
this.tableData = JSON.parse(JSON.stringify(this.tables))
}
}
},
mounted() {
this.tree(this.groupForm)
@ -171,7 +180,8 @@ export default {
sort: 'type asc,create_time desc,name asc',
sceneId: this.currGroup.id
}).then(response => {
this.tableData = response.data
this.tables = response.data
this.tableData = JSON.parse(JSON.stringify(this.tables))
})
}
},
@ -216,6 +226,10 @@ export default {
padding: 12px 0;
}
.tree-list>>>.el-tree-node__expand-icon.is-leaf{
display: none;
}
.custom-tree-node {
flex: 1;
display: flex;
@ -225,6 +239,15 @@ export default {
padding-right: 8px;
}
.custom-tree-node-list {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding:0 8px;
}
.custom-position {
flex: 1;
display: flex;