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

refactor:重构仪表板主题设置组件，适配视图样式设置相关变化

Browse Source
This commit is contained in:
wangjiahao 2021-07-27 16:23:06 +08:00
parent 5146930ed9
commit 27328e9f45
4 changed files with 159 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/views/panel/SubjectSetting/PanelStyle/BackgroundSelector.vue
View File

@ -12,7 +12,7 @@
<el-radio v-model="panel.backgroundType" label="color" @change="onChangeType">{{ $t('chart.color') }}</el-radio>
</el-col>
<el-col :span="18">
<el-color-picker v-model="panel.color" style="cursor: pointer;z-index: 1004;" />
<el-color-picker v-model="panel.color" size="mini" style="cursor: pointer;z-index: 1004;" />
</el-col>
</el-row>
<el-row style="height: 60px;margin-top:10px;overflow: hidden">

73
frontend/src/views/panel/SubjectSetting/PanelStyle/PanelBackgroundColorSelector.vue Normal file
View File

@ -0,0 +1,73 @@
<template>
<div>
<div style="width: 100%;">
<el-popover
placement="right"
width="400"
trigger="click"
>
<background-color-selector :chart="chart" @onChangeBackgroundForm="onChangeBackgroundForm" />
<el-button slot="reference" size="mini" class="shape-item">{{ $t('chart.background') }}<i class="el-icon-setting el-icon--right" /></el-button>
</el-popover>
</div>
</div>
</template>
<script>
import BackgroundColorSelector from '@/views/chart/components/component-style/BackgroundColorSelector'
export default {
components: { BackgroundColorSelector },
props: {
chart: {
type: Object,
required: true
}
},
methods: {
onChangeBackgroundForm(colorForm) {
this.$emit('onChangeBackgroundForm', colorForm)
}
}
}
</script>
<style scoped>
.avatar-uploader>>>.el-upload {
width: 100px;
height: 60px;
line-height: 70px;
}
.avatar-uploader>>>.el-upload-list li{
width: 100px !important;
height: 60px !important;
}
.disabled>>>.el-upload--picture-card {
display: none;
}
.shape-item{
padding: 6px;
border: none;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.form-item-slider>>>.el-form-item__label{
font-size: 12px;
line-height: 38px;
}
.form-item>>>.el-form-item__label{
font-size: 12px;
}
.el-select-dropdown__item{
padding: 0 20px;
}
span{
font-size: 12px
}
.el-form-item{
margin-bottom: 6px;
}
</style>

78
frontend/src/views/panel/SubjectSetting/PanelStyle/PanelColorSelector.vue Normal file
View File

@ -0,0 +1,78 @@
<template>
<div>
<div style="width: 100%;">
<el-popover
placement="right"
width="400"
trigger="click"
>
<color-selector :source-type="sourceType" :chart="chart" @onColorChange="onColorChange" />
<el-button slot="reference" size="mini" class="shape-item">{{ $t('chart.color') }}<i class="el-icon-setting el-icon--right" /></el-button>
</el-popover>
</div>
</div>
</template>
<script>
import ColorSelector from '@/views/chart/components/shape-attr/ColorSelector'
export default {
components: { ColorSelector },
props: {
chart: {
type: Object,
required: true
},
sourceType: {
type: String,
default: 'view',
required: false
}
},
methods: {
onColorChange(colorForm) {
this.$emit('onColorChange', colorForm)
}
}
}
</script>
<style scoped>
.avatar-uploader>>>.el-upload {
width: 100px;
height: 60px;
line-height: 70px;
}
.avatar-uploader>>>.el-upload-list li{
width: 100px !important;
height: 60px !important;
}
.disabled>>>.el-upload--picture-card {
display: none;
}
.shape-item{
padding: 6px;
border: none;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.form-item-slider>>>.el-form-item__label{
font-size: 12px;
line-height: 38px;
}
.form-item>>>.el-form-item__label{
font-size: 12px;
}
.el-select-dropdown__item{
padding: 0 20px;
}
span{
font-size: 12px
}
.el-form-item{
margin-bottom: 6px;
}
</style>

14
frontend/src/views/panel/SubjectSetting/index.vue
View File

@ -17,17 +17,17 @@
<el-collapse-item :title="$t('chart.module_style')" name="component">
<el-row style="background-color: #f7f8fa; margin: 5px">
<!-- <title-selector class="attr-selector" :chart="chart" @onTextChange="onTextChange" />-->
<background-color-selector v-if="chart" class="attr-selector" :chart="chart" @onChangeBackgroundForm="onChangeBackgroundForm" />
<panel-background-color-selector v-if="chart" class="attr-selector" :chart="chart" @onChangeBackgroundForm="onChangeBackgroundForm" />
</el-row>
</el-collapse-item>
<el-collapse-item :title="$t('chart.shape_attr')" name="graphical">
<el-row style="background-color: #f7f8fa; margin: 5px">
<color-selector :source-type="'panelEchart'" class="attr-selector" :chart="chart" @onColorChange="onColorChange" />
<panel-color-selector :source-type="'panelEchart'" class="attr-selector" :chart="chart" @onColorChange="onColorChange" />
</el-row>
</el-collapse-item>
<el-collapse-item :title="$t('panel.table')" name="table">
<el-row style="background-color: #f7f8fa; margin: 5px">
<color-selector index="10002" :source-type="'panelTable'" class="attr-selector" :chart="tableChart" @onColorChange="onTableColorChange" />
<panel-color-selector index="10002" :source-type="'panelTable'" class="attr-selector" :chart="tableChart" @onColorChange="onTableColorChange" />
</el-row>
</el-collapse-item>
</el-collapse>
@ -38,10 +38,10 @@
<script>
import slider from './PreSubject/Slider'
import BackgroundSelector from './PanelStyle/BackgroundSelector'
import PanelBackgroundColorSelector from './PanelStyle/PanelBackgroundColorSelector'
import PanelColorSelector from './PanelStyle/PanelColorSelector'
import ComponentGap from './PanelStyle/ComponentGap'
import ColorSelector from '@/views/chart/components/shape-attr/ColorSelector'
import BackgroundColorSelector from '@/views/chart/components/component-style/BackgroundColorSelector'
import { mapState } from 'vuex'
import { deepCopy } from '@/components/canvas/utils/utils'
import bus from '@/utils/bus'
@ -51,8 +51,8 @@ export default {
slider,
BackgroundSelector,
ComponentGap,
ColorSelector,
BackgroundColorSelector
PanelColorSelector,
PanelBackgroundColorSelector
},
data() {
return {