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

fix(数据大屏): 修复流向地图配置好线条颜色后，修改大屏主题颜色，流线颜色未适配的问题

Browse Source
This commit is contained in:
jianneng-fit2cloud 2024-07-02 20:59:09 +08:00
parent b2c6531e52
commit 0cbdb08c88
3 changed files with 45 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
core/core-frontend/src/components/data-visualization/CanvasAttr.vue
View File

@ -5,7 +5,7 @@ import { storeToRefs } from 'pinia'
import { nextTick, onMounted, ref } from 'vue'
import { ElFormItem } from 'element-plus-secondary'
import { merge } from 'lodash-es'
import { merge, cloneDeep } from 'lodash-es'
import { useEmitt } from '@/hooks/web/useEmitt'
import ComponentColorSelector from '@/components/dashboard/subject-setting/dashboard-style/ComponentColorSelector.vue'
import OverallSetting from '@/components/dashboard/subject-setting/dashboard-style/OverallSetting.vue'
@ -38,7 +38,19 @@ const themeAttrChange = (custom, property, value) => {
try {
const viewInfo = canvasViewInfo.value[viewId]
if (custom === 'customAttr') {
if (viewInfo.type === 'flow-map') {
const { customAttr } = viewInfo
const tmpValue = cloneDeep(value)
const miscObj = cloneDeep(customAttr.misc)
for (const key in miscObj) {
if (miscObj.hasOwnProperty(key) && tmpValue.misc?.[key] !== undefined) {
tmpValue.misc[key] = miscObj[key]
}
}
merge(viewInfo['customAttr'], tmpValue)
} else {
merge(viewInfo['customAttr'], value)
}
} else {
Object.keys(value).forEach(function (key) {
if (viewInfo[custom][property][key] !== undefined) {

20
core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue
View File

@ -55,6 +55,16 @@ watch(
)
const emit = defineEmits(['onBasicStyleChange', 'onMiscChange'])
const changeBasicStyle = (prop?: string, requestData = false) => {
const mapLineColorStyle = prop?.split('@')
if (mapLineColorStyle.length === 2) {
if (mapLineColorStyle[1].toLowerCase() === 'SourceColor'.toLowerCase()) {
state.basicStyleForm.colors[0] = state.miscForm.mapLineSourceColor
}
if (mapLineColorStyle[1].toLowerCase() === 'TargetColor'.toLowerCase()) {
state.basicStyleForm.colors[1] = state.miscForm.mapLineTargetColor
}
changeMisc(state.basicStyleForm.colors[0] + state.basicStyleForm.colors[1])
}
emit('onBasicStyleChange', { data: state.basicStyleForm, requestData }, prop)
}
const onAlphaChange = v => {
@ -82,6 +92,10 @@ const init = () => {
configCompat(basicStyle)
state.basicStyleForm = defaultsDeep(basicStyle, cloneDeep(DEFAULT_BASIC_STYLE)) as ChartBasicStyle
state.miscForm = defaultsDeep(miscStyle, cloneDeep(DEFAULT_MISC)) as ChartMiscAttr
if (props.chart.type === 'flow-map') {
state.miscForm.mapLineSourceColor = state.basicStyleForm.colors[0]
state.miscForm.mapLineTargetColor = state.basicStyleForm.colors[1]
}
if (!state.customColor) {
state.customColor = state.basicStyleForm.colors[0]
state.colorIndex = 0
@ -467,7 +481,7 @@ onMounted(() => {
:effect="themes"
:trigger-width="108"
:predefine="predefineColors"
@change="changeMisc('mapLineSourceColor')"
@change="changeBasicStyle('mapLine@SourceColor')"
/>
</el-form-item>
</el-col>
@ -485,7 +499,7 @@ onMounted(() => {
:effect="themes"
:trigger-width="108"
:predefine="predefineColors"
@change="changeMisc('mapLineTargetColor')"
@change="changeBasicStyle('mapLine@TargetColor')"
/>
</el-form-item>
</el-col>
@ -507,7 +521,7 @@ onMounted(() => {
:effect="themes"
:trigger-width="108"
:predefine="predefineColors"
@change="changeMisc('mapLineSourceColor')"
@change="changeBasicStyle('mapLine@SourceColor')"
/>
</el-form-item>
</el-col>

29
core/core-frontend/src/views/chart/components/js/panel/charts/map/flow-map.ts
View File

@ -6,7 +6,7 @@ import {
L7Wrapper
} from '@/views/chart/components/js/panel/types/impl/l7'
import { MAP_EDITOR_PROPERTY_INNER } from '@/views/chart/components/js/panel/charts/map/common'
import { flow, parseJson } from '@/views/chart/components/js/util'
import { flow, hexColorToRGBA, parseJson } from '@/views/chart/components/js/util'
import { deepCopy } from '@/utils/utils'
import { GaodeMap } from '@antv/l7-maps'
import { Scene } from '@antv/l7-scene'
@ -49,22 +49,21 @@ export class FlowMap extends L7ChartView<Scene, L7Config> {
const { chart, container } = drawOption
const xAxis = deepCopy(chart.xAxis)
const xAxisExt = deepCopy(chart.xAxisExt)
let basicStyle
let miscStyle
if (chart.customAttr) {
basicStyle = parseJson(chart.customAttr).basicStyle
miscStyle = parseJson(chart.customAttr).misc
}
const { basicStyle, misc } = deepCopy(parseJson(chart.customAttr))
const flowLineStyle = {
type: miscStyle.mapLineType,
size: miscStyle.mapLineType === 'line' ? miscStyle.mapLineWidth / 2 : miscStyle.mapLineWidth,
animate: miscStyle.mapLineAnimate,
animateDuration: miscStyle.mapLineAnimateDuration,
gradient: miscStyle.mapLineGradient,
sourceColor: miscStyle.mapLineSourceColor,
targetColor: miscStyle.mapLineTargetColor,
type: misc.mapLineType,
size: misc.mapLineType === 'line' ? misc.mapLineWidth / 2 : misc.mapLineWidth,
animate: misc.mapLineAnimate,
animateDuration: misc.mapLineAnimateDuration,
gradient: misc.mapLineGradient,
sourceColor: misc.mapLineSourceColor,
targetColor: misc.mapLineTargetColor,
alpha: basicStyle.alpha
}
const colorsWithAlpha = basicStyle.colors.map(color => hexColorToRGBA(color, basicStyle.alpha))
flowLineStyle.sourceColor = colorsWithAlpha[0]
flowLineStyle.targetColor = colorsWithAlpha[1]
const mapStyle = `amap://styles/${basicStyle.mapStyle ? basicStyle.mapStyle : 'normal'}`
const key = await this.getMapKey()
// 底层
@ -74,7 +73,7 @@ export class FlowMap extends L7ChartView<Scene, L7Config> {
map: new GaodeMap({
token: key ?? undefined,
style: mapStyle,
pitch: miscStyle.mapPitch,
pitch: misc.mapPitch,
zoom: 2.5
})
})