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

Merge pull request #2489 from dataease/pr@dev@style_panel

Browse Source 
style: 主题样式适配调整
This commit is contained in:
王嘉豪 2022-06-23 18:35:15 +08:00 committed by GitHub
commit 8873b8f64c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 70 additions and 312 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
frontend/src/components/canvas/custom-component/UserView.vue
View File

@ -206,7 +206,6 @@ export default {
changeIndex: 0,
changeScaleIndex: 0,
pre: null,
preCanvasPanel: null,
// string
sourceCustomAttrStr: null,
// obj
@ -315,6 +314,9 @@ export default {
resultCount() {
return this.canvasStyleData.panel && this.canvasStyleData.panel.resultCount || null
},
gap() {
return this.canvasStyleData.panel && this.canvasStyleData.panel.gap || null
},
innerPadding() {
return this.element.commonBackground && this.element.commonBackground.innerPadding || 0
},
@ -353,21 +355,14 @@ export default {
},
deep: true
},
// deep监听panel 如果改变 提交到 store
canvasStyleData: {
handler(newVal, oldVla) {
// this.mergeStyle()
// 如果视图结果模式模式 或者 视图结果获取数量改变 刷新视图
if (!this.preCanvasPanel || this.preCanvasPanel.resultCount !== newVal.panel.resultCount || this.preCanvasPanel.resultMode !== newVal.panel.resultMode) {
resultCount: function() {
this.getData(this.element.propValue.viewId, false)
}
// 如果gap有变化刷新
if (this.preCanvasPanel && this.preCanvasPanel.gap !== newVal.panel.gap) {
this.resizeChart()
}
this.preCanvasPanel = deepCopy(newVal.panel)
},
deep: true
resultMode: function() {
this.getData(this.element.propValue.viewId, false)
},
gap: function() {
this.resizeChart()
},
// 监听外部的样式变化 （非实时性要求）
'hw': {

3
frontend/src/components/canvas/utils/style.js
View File

@ -344,7 +344,7 @@ export function adaptCurThemeCommonStyle(component) {
}
if (isFilterComponent(component.component)) {
const filterStyle = store.state.canvasStyleData.chartInfo.filterStyle
for (const styleKey in component.style) {
for (const styleKey in filterStyle) {
component.style[styleKey] = filterStyle[styleKey]
}
}
@ -366,6 +366,7 @@ export function adaptCurThemeFilterStyleAll(styleKey) {
item.style[styleKey] = filterStyle[styleKey]
}
})
console.log('componentData=' + JSON.stringify(componentData))
}
export function isFilterComponent(component) {

2
frontend/src/components/canvas/utils/utils.js
View File

@ -8,7 +8,7 @@ import {
} from '@/utils/ApplicationContext'
import { uuid } from 'vue-uuid'
import store from '@/store'
import { AIDED_DESIGN, FILTER_COMMON_STYLE, PANEL_CHART_INFO } from '@/views/panel/panel'
import { AIDED_DESIGN, PANEL_CHART_INFO } from '@/views/panel/panel'
import html2canvas from 'html2canvasde'
export function deepCopy(target) {

6
frontend/src/views/panel/SubjectSetting/PanelStyle/ComponentStyle.vue
View File

@ -25,6 +25,7 @@
import { mapState } from 'vuex'
import { COLOR_PANEL } from '@/views/chart/chart/chart'
import bus from '@/utils/bus'
export default {
name: 'ComponentStyle',
data() {
@ -37,10 +38,11 @@ export default {
'canvasStyleData',
'componentData'
]),
watch: {
},
created() {
this.initForm()
bus.$on('onThemeColorChange', () => {
this.initForm()
})
},
methods: {
initForm() {

18
frontend/src/views/panel/SubjectSetting/PanelStyle/FilterStyleSelector.vue
View File

@ -6,14 +6,14 @@
<el-form-item :label="$t('chart.text_h_position')" class="form-item">
<el-radio-group v-model="filterForm.horizontal" size="mini" @change="themeChange('horizontal')">
<el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
<el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
<el-radio-button :disabled="filterForm.vertical === 'center'" label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
<el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('chart.text_v_position')" class="form-item">
<el-radio-group v-model="filterForm.vertical" size="mini" @change="themeChange('vertical')">
<el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
<el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
<el-radio-button :disabled="filterForm.horizontal === 'center'" label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item :label="'标题颜色'" class="form-item">
@ -25,19 +25,19 @@
边框
</el-col>
<el-col :span="4" style="padding-top: 5px">
<el-color-picker v-model="filterForm.brColor" size="mini" class="color-picker-style" @change="themeChange('brColor')" :predefine="predefineColors" />
<el-color-picker v-model="filterForm.brColor" size="mini" class="color-picker-style" :predefine="predefineColors" @change="themeChange('brColor')" />
</el-col>
<el-col :span="4" style="padding-left: 10px;padding-top: 8px">
文字
</el-col>
<el-col :span="4" style="padding-top: 5px">
<el-color-picker v-model="filterForm.wordColor" size="mini" class="color-picker-style" @change="themeChange('wordColor')" :predefine="predefineColors" />
<el-color-picker v-model="filterForm.wordColor" size="mini" class="color-picker-style" :predefine="predefineColors" @change="themeChange('wordColor')" />
</el-col>
<el-col :span="4" style="padding-left: 10px;padding-top: 8px">
背景
</el-col>
<el-col :span="4" style="padding-top: 5px">
<el-color-picker v-model="filterForm.innerBgColor" size="mini" class="color-picker-style" @change="themeChange('innerBgColor')" :predefine="predefineColors" />
<el-color-picker v-model="filterForm.innerBgColor" size="mini" class="color-picker-style" :predefine="predefineColors" @change="themeChange('innerBgColor')" />
</el-col>
</el-row>
</div>
@ -50,6 +50,7 @@
import { COLOR_PANEL } from '@/views/chart/chart/chart'
import { adaptCurThemeFilterStyleAll } from '@/components/canvas/utils/style'
import { mapState } from 'vuex'
import bus from '@/utils/bus'
export default {
name: 'FilterStyleSelector',
@ -68,10 +69,13 @@ export default {
'canvasStyleData'
])
},
watch: {
created() {
this.initForm()
bus.$on('onThemeColorChange', () => {
this.initForm()
})
},
mounted() {
this.initForm()
},
methods: {
initForm() {

29
frontend/src/views/panel/SubjectSetting/PanelStyle/OverallSetting.vue
View File

@ -16,7 +16,7 @@
</el-form-item>
<el-form-item :label="$t('panel.refresh_frequency')" class="form-item">
<el-input v-model="overallSettingForm.refreshTime" class="el-input-refresh-time" type="number" size="mini" controls-position="right" :min="1" :max="3600" @change="themeChange" />
<el-select v-model="overallSettingForm.refreshUnit" class="el-input-refresh-unit" @change="themeChange">
<el-select v-model="overallSettingForm.refreshUnit" class="el-input-refresh-unit margin-left4" @change="themeChange">
<el-option :label="$t('panel.minute')" :value="'minute'" />
<el-option :label="$t('panel.second')" :value="'second'" />
</el-select>
@ -67,6 +67,8 @@ import {
import bus from '@/utils/bus'
import { DEFAULT_COLOR_CASE_DARK, DEFAULT_TITLE_STYLE_DARK, DEFAULT_COLOR_CASE, DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
import { FILTER_COMMON_STYLE, FILTER_COMMON_STYLE_DARK } from '@/views/panel/panel'
import { deepCopy } from '@/components/canvas/utils/utils'
export default {
name: 'OverallSetting',
data() {
@ -95,17 +97,17 @@ export default {
this.canvasStyleData.chartInfo.chartCommonStyle.backgroundColorSelect = true
this.canvasStyleData.panel.backgroundType = 'color'
if (this.overallSettingForm.panel.themeColor === 'light') {
this.canvasStyleData.panel.color = LIGHT_THEME_PANEL_BACKGROUND
this.canvasStyleData.chartInfo.chartCommonStyle.color = LIGHT_THEME_COMPONENT_BACKGROUND
this.canvasStyleData.chartInfo.chartTitle = DEFAULT_TITLE_STYLE
this.canvasStyleData.chartInfo.chartColor = DEFAULT_COLOR_CASE
this.canvasStyleData.chartInfo.filterStyle = FILTER_COMMON_STYLE
this.canvasStyleData.panel.color = deepCopy(LIGHT_THEME_PANEL_BACKGROUND)
this.canvasStyleData.chartInfo.chartCommonStyle.color = deepCopy(LIGHT_THEME_COMPONENT_BACKGROUND)
this.canvasStyleData.chartInfo.chartTitle = deepCopy(DEFAULT_TITLE_STYLE)
this.canvasStyleData.chartInfo.chartColor = deepCopy(DEFAULT_COLOR_CASE)
this.canvasStyleData.chartInfo.filterStyle = deepCopy(FILTER_COMMON_STYLE)
} else {
this.canvasStyleData.panel.color = DARK_THEME_PANEL_BACKGROUND
this.canvasStyleData.chartInfo.chartCommonStyle.color = DARK_THEME_COMPONENT_BACKGROUND
this.canvasStyleData.chartInfo.chartTitle = DEFAULT_TITLE_STYLE_DARK
this.canvasStyleData.chartInfo.chartColor = DEFAULT_COLOR_CASE_DARK
this.canvasStyleData.chartInfo.filterStyle = FILTER_COMMON_STYLE_DARK
this.canvasStyleData.panel.color = deepCopy(DARK_THEME_PANEL_BACKGROUND)
this.canvasStyleData.chartInfo.chartCommonStyle.color = deepCopy(DARK_THEME_COMPONENT_BACKGROUND)
this.canvasStyleData.chartInfo.chartTitle = deepCopy(DEFAULT_TITLE_STYLE_DARK)
this.canvasStyleData.chartInfo.chartColor = deepCopy(DEFAULT_COLOR_CASE_DARK)
this.canvasStyleData.chartInfo.filterStyle = deepCopy(FILTER_COMMON_STYLE_DARK)
}
adaptCurThemeCommonStyleAll()
bus.$emit('onThemeColorChange')
@ -127,9 +129,12 @@ export default {
}
.el-input-refresh-loading{
margin-left: 5px;
margin-left: 4px;
font-size: 12px;
}
.margin-left4{
margin-left: 4px;
}
::v-deep .el-input__inner{
padding: 0px 5px!important;
}

18
frontend/src/views/panel/SubjectSetting/PanelStyle/PanelColorSelector.vue
View File

@ -82,6 +82,7 @@
<script>
import { COLOR_PANEL } from '@/views/chart/chart/chart'
import { mapState } from 'vuex'
import bus from "@/utils/bus";
export default {
name: 'ColorSelector',
@ -180,21 +181,11 @@ export default {
computed: mapState([
'canvasStyleData'
]),
watch: {
'chart.id': {
handler: function() {
this.customColor = null
this.colorIndex = 0
}
},
'chart': {
handler: function() {
this.init()
}
}
},
created() {
this.initForm()
bus.$on('onThemeColorChange', () => {
this.initForm()
})
},
mounted() {
},
@ -214,7 +205,6 @@ export default {
// reset custom color
this.colorForm.seriesColors = []
this.changeColorCase(modifyName)
},
changeColorCase(modifyName) {

106
frontend/src/views/panel/SubjectSetting/PanelStyle/PanelRefreshTime.vue
View File

@ -1,106 +0,0 @@
<template>
<div>
<div style="width: 100%;">
<el-popover
placement="right"
width="400"
trigger="click"
>
<el-col>
<el-form ref="colorForm" label-width="110px" size="mini">
<el-form-item :label="'视图加载提示'" class="form-item form-item-slider">
<el-checkbox v-model="canvasStyleData.refreshViewLoading" @change="onChangePanelStyle" />
</el-form-item>
<el-form-item :label="'刷新时间单位'" class="form-item form-item-slider">
<el-radio-group v-model="canvasStyleData.refreshUnit" @change="onChangePanelStyle">
<el-radio label="second">秒</el-radio>
<el-radio label="minute">分</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item :label="'刷新时间频率'" class="form-item form-item-slider">
<el-slider
v-model="canvasStyleData.refreshTime"
show-input
:show-input-controls="false"
input-size="mini"
:min="1"
:max="3600"
@change="onChangePanelStyle"
/>
</el-form-item>
</el-form>
</el-col>
<el-button slot="reference" size="mini" class="shape-item">{{ $t('panel.refresh_time') }} <i
class="el-icon-setting el-icon--right"
/></el-button>
</el-popover>
</div>
</div>
</template>
<script>
export default {
name: 'PanelRefreshTime',
props: {},
computed: {
canvasStyleData() {
return this.$store.state.canvasStyleData
}
},
created() {
},
methods: {
onChangePanelStyle() {
this.$store.state.styleChangeTimes++
}
}
}
</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>

135
frontend/src/views/panel/SubjectSetting/PanelStyle/PanelViewResult.vue
View File

@ -1,135 +0,0 @@
<template>
<div>
<div style="width: 100%;">
<el-popover
placement="right"
width="400"
trigger="click"
>
<el-row>
<el-col :span="16">
<el-radio-group v-model="panel.resultMode" class="radio-span" size="mini" @change="onChangePanelStyle">
<el-radio label="all"><span>{{ $t('panel.view') }}</span></el-radio>
<el-radio label="custom">
<span>{{ $t('panel.panel') }} </span>
</el-radio>
</el-radio-group>
</el-col>
<el-col :span="8" class="slider-area">
<el-slider
v-model="panel.resultCount"
:disabled="panel.resultMode==='all'"
style="margin-left: 5px"
show-input
:show-input-controls="false"
:show-tooltip="false"
input-size="mini"
:min="1"
:max="10000"
@change="onChangePanelStyle"
/>
</el-col>
</el-row>
<el-row>
<span style="color: #909399; font-size: 8px;margin-left: 3px">
Tips: {{ $t('panel.panel_view_result_tips') }}
</span>
</el-row>
<el-button slot="reference" size="mini" class="shape-item">{{ $t('panel.panel_view_result_show') }}<i
class="el-icon-setting el-icon--right"
/></el-button>
</el-popover>
</div>
</div>
</template>
<script>
export default {
name: 'PanelViewResult',
props: {},
data() {
return {
panel: null
}
},
computed: {
canvasStyleData() {
return this.$store.state.canvasStyleData
}
},
created() {
// 初始化赋值
this.panel = this.canvasStyleData.panel
},
methods: {
onChangePanelStyle() {
this.$store.state.styleChangeTimes++
}
}
}
</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;
}
.radio-span {
margin-top: 10px;
}
.radio-span >>> .el-radio__label {
margin-left: 4px;
}
.slider-area >>> .el-slider__runway {
display: none;
}
.result-count {
width: 80px;
}
</style>

29
frontend/src/views/panel/SubjectSetting/PanelStyle/ViewTitle.vue
View File

@ -39,7 +39,9 @@
</template>
<script>
import { COLOR_PANEL, DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
import { COLOR_PANEL } from '@/views/chart/chart/chart'
import { mapState } from 'vuex'
import bus from '@/utils/bus'
export default {
name: 'TitleSelector',
@ -47,26 +49,28 @@ export default {
},
data() {
return {
titleForm: JSON.parse(JSON.stringify(DEFAULT_TITLE_STYLE)),
titleForm: {},
fontSize: [],
isSetting: false,
predefineColors: COLOR_PANEL
}
},
computed: {
},
watch: {
'chart': {
handler: function() {
this.initData()
}
}
computed: mapState([
'canvasStyleData'
]),
created() {
this.initForm()
bus.$on('onThemeColorChange', () => {
this.initForm()
})
},
mounted() {
this.init()
},
methods: {
initForm() {
this.titleForm = this.canvasStyleData.chartInfo.chartTitle
},
init() {
const arr = []
for (let i = 10; i <= 60; i = i + 2) {
@ -81,9 +85,6 @@ export default {
this.titleForm['modifyName'] = modifyName
this.$emit('onTextChange', this.titleForm)
},
inputOnInput: function(e) {
this.$forceUpdate()
},
showProperty(property) {
return this.propertyInner.includes(property)
}

3
frontend/src/views/panel/edit/index.vue
View File

@ -766,7 +766,6 @@ export default {
component = deepCopy(componentTemp)
}
})
if (component.type === 'picture-add') {
this.goFile()
this.clearCurrentInfo()
@ -851,6 +850,7 @@ export default {
this.$store.commit('addComponent', { component })
this.$store.commit('recordSnapshot', 'handleDrop')
}
adaptCurThemeCommonStyle(component)
this.clearCurrentInfo()
},
clearCurrentInfo() {
@ -889,6 +889,7 @@ export default {
},
sureFilter() {
this.currentFilterCom = this.$refs['filter-setting-' + this.currentFilterCom.id].getElementInfo()
adaptCurThemeCommonStyle(this.currentFilterCom)
this.$store.commit('setComponentWithId', this.currentFilterCom)
this.$store.commit('recordSnapshot', 'sureFilter')
this.$store.commit('setCurComponent', { component: this.currentFilterCom, index: this.curComponentIndex })

6
frontend/src/views/panel/panel.js
View File

@ -5,7 +5,7 @@ import { COMMON_BACKGROUND_BASE } from '@/components/canvas/custom-component/com
export const FILTER_COMMON_STYLE = {
horizontal: 'left',
vertical: 'center',
vertical: 'top',
color: '#000000',
brColor: '',
wordColor: '',
@ -14,9 +14,9 @@ export const FILTER_COMMON_STYLE = {
export const FILTER_COMMON_STYLE_DARK = {
horizontal: 'left',
vertical: 'center',
vertical: 'top',
color: '#FFFFFF',
brColor: '',
brColor: '#4E4B4B',
wordColor: '#4E4B4B',
innerBgColor: '#131E42'
}