dongjunchuan/de
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(视图): 下钻区域以及地图缩放文字跟随视图背景改变

Browse Source
This commit is contained in:
fit2cloud-chenyw 2022-09-20 16:24:50 +08:00
parent e9e9d27456
commit 7eac3fa0a6
4 changed files with 70 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -109,7 +109,7 @@
@onJumpClick="jumpClick"
/>
<div style="position: absolute;left: 8px;bottom:8px;">
<drill-path :drill-filters="drillFilters" @onDrillJump="drillJump" />
<drill-path :drill-filters="drillFilters" :theme-style="element.commonBackground" @onDrillJump="drillJump" />
</div>
</div>
</template>
@ -582,14 +582,14 @@ export default {
this.chart['position'] = this.inTab ? 'tab' : 'panel'
// 记录当前数据
this.panelViewDetailsInfo[id] = JSON.stringify(this.chart)
if(this.element.needAdaptor){
if (this.element.needAdaptor) {
const customStyleObj = JSON.parse(this.chart.customStyle)
const customAttrObj = JSON.parse(this.chart.customAttr)
adaptCurTheme(customStyleObj, customAttrObj)
this.chart.customStyle = JSON.stringify(customStyleObj)
this.chart.customAttr = JSON.stringify(customAttrObj)
viewEditSave(this.panelInfo.id,{ id: this.chart.id, customStyle: this.chart.customStyle, customAttr: this.chart.customAttr })
this.$store.commit('adaptorStatusDisable',this.element.id)
viewEditSave(this.panelInfo.id, { id: this.chart.id, customStyle: this.chart.customStyle, customAttr: this.chart.customAttr })
this.$store.commit('adaptorStatusDisable', this.element.id)
}
this.sourceCustomAttrStr = this.chart.customAttr
this.sourceCustomStyleStr = this.chart.customStyle

4
frontend/src/views/background/index.vue
View File

@ -80,7 +80,7 @@
</el-col>
<el-col :span="20" class="main-row">
<el-row v-for="(value, key) in BackgroundShowMap" :key="key">
<!-- <el-col :span="24"><span>{{ key }}</span> </el-col>-->
<el-col
v-for="item in value"
:key="item.id"
@ -132,7 +132,7 @@
import { queryBackground } from '@/api/background/background'
import BackgroundItem from '@/views/background/BackgroundItem'
import { mapState } from 'vuex'
import {deepCopy, imgUrlTrans} from '@/components/canvas/utils/utils'
import { deepCopy, imgUrlTrans } from '@/components/canvas/utils/utils'
import { COLOR_PANEL } from '@/views/chart/chart/chart'
import { uploadFileResult } from '@/api/staticResource/staticResource'
import { COMMON_BACKGROUND_NONE } from '@/components/canvas/custom-component/component-list'

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

@ -220,6 +220,15 @@ export default {
let themeStyle = null
if (this.themeStyle) {
themeStyle = JSON.parse(JSON.stringify(this.themeStyle))
if (themeStyle && themeStyle.commonBackground) {
const viewBGColor = themeStyle.commonBackground.color
if (viewBGColor !== '#FFFFFF') {
const reverseValue = reverseColor(viewBGColor)
this.buttonTextColor = reverseValue
} else {
this.buttonTextColor = null
}
}
if (themeStyle && themeStyle.backgroundColorSelect) {
const panelColor = themeStyle.color
if (panelColor !== '#FFFFFF') {
@ -310,6 +319,15 @@ export default {
let themeStyle = null
if (this.themeStyle) {
themeStyle = JSON.parse(JSON.stringify(this.themeStyle))
if (themeStyle && themeStyle.commonBackground) {
const viewBGColor = themeStyle.commonBackground.color
if (viewBGColor !== '#FFFFFF') {
const reverseValue = reverseColor(viewBGColor)
this.buttonTextColor = reverseValue
} else {
this.buttonTextColor = null
}
}
if (themeStyle && themeStyle.backgroundColorSelect) {
const panelColor = themeStyle.color
if (panelColor !== '#FFFFFF') {

48
frontend/src/views/chart/view/DrillPath.vue
View File

@ -1,34 +1,78 @@
<template>
<div v-if="drillFilters && drillFilters.length > 0">
<el-breadcrumb separator-class="el-icon-arrow-right" class="drill-style">
<el-breadcrumb-item class="drill-item" @click.native="drillJump(0)">{{ $t('commons.all') }}</el-breadcrumb-item>
<el-breadcrumb-item v-for="(filter,index) in drillFilters" :key="index" class="drill-item" @click.native="drillJump(index + 1)">{{ filter.value[0] }}</el-breadcrumb-item>
<el-breadcrumb-item class="drill-item" @click.native="drillJump(0)">
<span :style="{'color': textColor}">{{ $t('commons.all') }}</span>
</el-breadcrumb-item>
<el-breadcrumb-item v-for="(filter,index) in drillFilters" :key="index" class="drill-item" @click.native="drillJump(index + 1)">
<span :style="{'color': textColor}">{{ filter.value[0] }}</span>
</el-breadcrumb-item>
</el-breadcrumb>
</div>
</template>
<script>
import { reverseColor } from '@/views/chart/chart/common/common'
export default {
name: 'DrillPath',
props: {
drillFilters: {
type: Array,
default: () => []
},
themeStyle: {
type: Object,
required: false,
default: null
}
},
data() {
return {
textColor: null
}
},
watch: {
'themeStyle.commonBackground.color'() {
this.loadThemeStyle()
},
'themeStyle.color'() {
this.loadThemeStyle()
}
},
mounted() {
},
created() {
this.loadThemeStyle()
},
methods: {
drillJump(index) {
if (index < this.drillFilters.length) {
this.$emit('onDrillJump', index)
}
},
loadThemeStyle() {
let themeStyle = null
if (this.themeStyle) {
themeStyle = JSON.parse(JSON.stringify(this.themeStyle))
if (themeStyle && themeStyle.commonBackground) {
const viewBGColor = themeStyle.commonBackground.color
if (viewBGColor !== '#FFFFFF') {
const reverseValue = reverseColor(viewBGColor)
this.textColor = reverseValue
} else {
this.textColor = null
}
}
if (themeStyle && themeStyle.backgroundColorSelect) {
const panelColor = themeStyle.color
if (panelColor !== '#FFFFFF') {
const reverseValue = reverseColor(panelColor)
this.textColor = reverseValue
} else {
this.textColor = null
}
}
}
}
}
}