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

perf(视图-地图): 优化地图缩放按钮样式

Browse Source
This commit is contained in:
fit2cloud-chenyw 2022-08-10 03:00:25 -04:00
parent ae434c0847
commit e948efeb0c
1 changed files with 13 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,15 +10,15 @@
<div :id="chartId" style="width: 100%;height: 100%;overflow: hidden;" :style="{ borderRadius: borderRadius}" /> <div :id="chartId" style="width: 100%;height: 100%;overflow: hidden;" :style="{ borderRadius: borderRadius}" />
<div v-if="chart.type === 'map'" class="map-zoom-box"> <div v-if="chart.type === 'map'" class="map-zoom-box">
<div style="margin-bottom: 0.5em;"> <div style="margin-bottom: 0.5em;">
<el-button size="mini" icon="el-icon-plus" circle @click="roamMap(true)" /> <el-button :style="{'background': buttonTextColor ? 'none' : '', 'opacity': buttonTextColor ? '0.75': '', 'color': buttonTextColor, 'borderColor': buttonTextColor}" size="mini" icon="el-icon-plus" circle @click="roamMap(true)" />
</div> </div>
<div style="margin-bottom: 0.5em;"> <div style="margin-bottom: 0.5em;">
<el-button size="mini" icon="el-icon-refresh" circle @click="resetZoom()" /> <el-button :style="{'background': buttonTextColor ? 'none' : '', 'opacity': buttonTextColor ? '0.75': '', 'color': buttonTextColor, 'borderColor': buttonTextColor}" size="mini" icon="el-icon-refresh" circle @click="resetZoom()" />
</div> </div>
<div> <div>
<el-button size="mini" icon="el-icon-minus" circle @click="roamMap(false)" /> <el-button :style="{'background': buttonTextColor ? 'none' : '', 'opacity': buttonTextColor ? '0.75': '', 'color': buttonTextColor, 'borderColor': buttonTextColor}" size="mini" icon="el-icon-minus" circle @click="roamMap(false)" />
</div> </div>
</div> </div>
@ -81,7 +81,7 @@ import {
geoJson geoJson
} from '@/api/map/map' } from '@/api/map/map'
import ViewTrackBar from '@/components/canvas/components/Editor/ViewTrackBar' import ViewTrackBar from '@/components/canvas/components/Editor/ViewTrackBar'
import { reverseColor } from '../chart/common/common'
export default { export default {
name: 'ChartComponent', name: 'ChartComponent',
components: { components: {
@ -140,7 +140,8 @@ export default {
dynamicAreaCode: null, dynamicAreaCode: null,
borderRadius: '0px', borderRadius: '0px',
mapCenter: null, mapCenter: null,
linkageActiveParam: null linkageActiveParam: null,
buttonTextColor: null
} }
}, },
@ -291,6 +292,13 @@ export default {
let themeStyle = null let themeStyle = null
if (this.themeStyle) { if (this.themeStyle) {
themeStyle = JSON.parse(JSON.stringify(this.themeStyle)) themeStyle = JSON.parse(JSON.stringify(this.themeStyle))
if (themeStyle && themeStyle.backgroundColorSelect) {
const panelColor = themeStyle.color
if (panelColor !== '#FFFFFF') {
const reverseValue = reverseColor(panelColor)
this.buttonTextColor = reverseValue
}
}
} }
const chart_option = baseMapOption(base_json, chart, themeStyle, curAreaCode) const chart_option = baseMapOption(base_json, chart, themeStyle, curAreaCode)
this.myEcharts(chart_option) this.myEcharts(chart_option)