diff --git a/core/core-frontend/src/views/chart/components/editor/editor-senior/Senior.vue b/core/core-frontend/src/views/chart/components/editor/editor-senior/Senior.vue index 61be726c9a..36870c6f88 100644 --- a/core/core-frontend/src/views/chart/components/editor/editor-senior/Senior.vue +++ b/core/core-frontend/src/views/chart/components/editor/editor-senior/Senior.vue @@ -4,6 +4,7 @@ import FunctionCfg from '@/views/chart/components/editor/editor-senior/component import ScrollCfg from '@/views/chart/components/editor/editor-senior/components/ScrollCfg.vue' import AssistLine from '@/views/chart/components/editor/editor-senior/components/AssistLine.vue' import Threshold from '@/views/chart/components/editor/editor-senior/components/Threshold.vue' +import MapMapping from '@/views/chart/components/editor/editor-senior/components/MapMapping.vue' import CollapseSwitchItem from '@/components/collapse-switch-item/src/CollapseSwitchItem.vue' import { useAppStoreWithOut } from '@/store/modules/app' import { computed, PropType, ref, toRefs, watch } from 'vue' @@ -35,7 +36,8 @@ const emit = defineEmits([ 'onFunctionCfgChange', 'onAssistLineChange', 'onScrollCfgChange', - 'onThresholdChange' + 'onThresholdChange', + 'onMapMappingChange' ]) const props = defineProps({ @@ -113,6 +115,10 @@ const onThresholdChange = val => { emit('onThresholdChange', val) } +const onMapMappingChange = val => { + emit('onMapMappingChange', val) +} + const showProperties = (prop: EditorProperty) => { return properties?.value?.includes(prop) } @@ -196,6 +202,21 @@ const isDataEaseBi = computed(() => appStore.getIsDataEaseBi) /> + + + + +import { computed, nextTick, onMounted, PropType, reactive, ref, watch } from 'vue' +import { useI18n } from '@/hooks/web/useI18n' +import { getGeoJsonFile, parseJson } from '../../../js/util' +import { forEach, debounce } from 'lodash-es' +import { EmptyBackground } from '@/components/empty-background' + +const props = defineProps({ + chart: { + type: Object as PropType, + required: true + }, + themes: { + type: String, + default: 'dark' + } +}) + +const emit = defineEmits(['onMapMappingChange']) +const { chart, themes } = props +watch( + [() => props.chart.senior.areaMapping, () => chart.customAttr.map.id], + () => { + init() + }, + { deep: true } +) +const editAreaId = ref('body') +const curMappedName = ref('') +const curOriginName = ref('') +const isEdit = ref(false) +const search = ref('') +const areaNameInput = ref(null) +const areaData = reactive([]) +const dynamicAreaId = computed(() => { + return chart.customAttr.map.id +}) +const state = reactive({ + mappingForm: {}, + currentData: [] +}) +const pageInfo = reactive({ + pageSize: 10, + total: 100, + currentPage: 1 +}) +const init = async () => { + const chartObj = JSON.parse(JSON.stringify(chart)) + if (chartObj.senior) { + let senior = parseJson(chartObj.senior) + state.mappingForm = senior.areaMapping + let curAreaMapping = state.mappingForm?.[dynamicAreaId.value] + if (!curAreaMapping) { + curAreaMapping = await getAreaMapping(dynamicAreaId.value) + } + const tmp = [] + forEach(curAreaMapping, (val, key) => { + tmp.push({ + originName: key, + mappedName: val + }) + }) + state.currentData.splice(0, state.currentData.length, ...tmp) + pageInfo.total = state.currentData.length + updateAreaData() + } +} + +const getAreaMapping = async areaId => { + if (!areaId) { + return {} + } + const geoJson = await getGeoJsonFile(areaId) + return geoJson.features.reduce((p, n) => { + p[n.properties.name] = n.properties.name + return p + }, {}) +} +const triggerEdit = scope => { + editAreaId.value = `#area-${scope.$index}-input` + curOriginName.value = scope.row.originName + curMappedName.value = scope.row.mappedName + isEdit.value = true + nextTick(areaNameInput.value?.focus) +} +const finishEdit = () => { + editAreaId.value = 'body' + isEdit.value = false + let areaNameMap = state.mappingForm[dynamicAreaId.value] + if (!areaNameMap) { + areaNameMap = state.currentData.reduce((p, n) => { + p[n.originName] = n.mappedName + return p + }, {}) + } + const oldMappedName = areaNameMap[curOriginName.value] + if (oldMappedName === curMappedName.value) { + return + } + areaNameMap[curOriginName.value] = curMappedName.value + if (!state.mappingForm[dynamicAreaId.value]) { + state.mappingForm[dynamicAreaId.value] = areaNameMap + } + onMapMappingChange() +} +const updateAreaData = debounce(() => { + const filteredData = state.currentData.filter(item => { + if (!search.value?.trim()) { + return true + } + return item.mappedName?.includes(search.value) + }) + const start = (pageInfo.currentPage - 1) * pageInfo.pageSize + const end = start + pageInfo.pageSize + areaData.splice(0, areaData.length, ...filteredData.slice(start, end)) + pageInfo.total = filteredData.length +}, 300) +const onMapMappingChange = () => { + emit('onMapMappingChange', state.mappingForm) +} +const mergeCellMethod = ({ columnIndex }) => { + if (columnIndex === 1) { + return [1, 2] + } + if (columnIndex === 2) { + return [0, 0] + } +} +onMounted(() => { + init() +}) + + + diff --git a/core/core-frontend/src/views/chart/components/editor/index.vue b/core/core-frontend/src/views/chart/components/editor/index.vue index 6434e2c98b..7702210f1f 100644 --- a/core/core-frontend/src/views/chart/components/editor/index.vue +++ b/core/core-frontend/src/views/chart/components/editor/index.vue @@ -787,6 +787,11 @@ const onThresholdChange = val => { renderChart(view.value) } +const onMapMappingChange = val => { + view.value.senior.areaMapping = val + renderChart(view.value) +} + const onScrollCfgChange = val => { view.value.senior.scrollCfg = val renderChart(view.value) @@ -1828,6 +1833,7 @@ const onRefreshChange = val => { @onAssistLineChange="onAssistLineChange" @onScrollCfgChange="onScrollCfgChange" @onThresholdChange="onThresholdChange" + @onMapMappingChange="onMapMappingChange" /> diff --git a/core/core-frontend/src/views/chart/components/editor/util/chart.ts b/core/core-frontend/src/views/chart/components/editor/util/chart.ts index 589a241cfb..e8a74c6839 100644 --- a/core/core-frontend/src/views/chart/components/editor/util/chart.ts +++ b/core/core-frontend/src/views/chart/components/editor/util/chart.ts @@ -1410,7 +1410,8 @@ export const BASE_VIEW_CONFIG = { functionCfg: DEFAULT_FUNCTION_CFG, assistLineCfg: DEFAULT_ASSIST_LINE_CFG, threshold: DEFAULT_THRESHOLD, - scrollCfg: DEFAULT_SCROLL + scrollCfg: DEFAULT_SCROLL, + areaMapping: {} } } diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/map/common.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/map/common.ts index e9c87be3fd..2b41943744 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/map/common.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/map/common.ts @@ -35,7 +35,8 @@ export const MAP_EDITOR_PROPERTY_INNER: EditorPropertyInner = { 'showQuota' ], 'tooltip-selector': ['color', 'fontSize', 'backgroundColor', 'tooltipFormatter'], - 'function-cfg': ['emptyDataStrategy'] + 'function-cfg': ['emptyDataStrategy'], + 'map-mapping': [''] } export const MAP_AXIS_TYPE: AxisType[] = [