From eaa45752eb5f70cce64f7dec07bf8d7236b33cf8 Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Wed, 19 Mar 2025 18:33:53 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E5=9B=BE=E8=A1=A8):=20=E6=8C=87=E6=A0=87?= =?UTF-8?q?=E5=8D=A1=E6=94=AF=E6=8C=81=E8=81=94=E5=8A=A8=E5=B9=B6=E6=94=AF?= =?UTF-8?q?=E6=8C=81=E5=9C=A8=E5=B5=8C=E5=85=A5=E6=97=B6=E5=B0=86=E8=BF=87?= =?UTF-8?q?=E6=BB=A4=E5=8F=82=E6=95=B0=E5=90=91=E5=A4=96=E4=BC=A0=E9=80=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/visualization/LinkageSet.vue | 31 ++- .../indicator/DeIndicator.vue | 181 +++++++++++++++++- core/core-frontend/src/locales/en.ts | 1 + core/core-frontend/src/locales/tw.ts | 1 + core/core-frontend/src/locales/zh-CN.ts | 1 + .../js/panel/charts/others/indicator.ts | 3 +- .../views/chart/components/views/index.vue | 5 + 7 files changed, 209 insertions(+), 14 deletions(-) diff --git a/core/core-frontend/src/components/visualization/LinkageSet.vue b/core/core-frontend/src/components/visualization/LinkageSet.vue index 8e37a157d9..7fa96f45fe 100644 --- a/core/core-frontend/src/components/visualization/LinkageSet.vue +++ b/core/core-frontend/src/components/visualization/LinkageSet.vue @@ -158,7 +158,23 @@ {{ t('visualization.linkage_setting_tips1') }} - + + + + {{ t('visualization.indicator_linkage') }} + +
{{ t('visualization.current_chart_source_field') }}
@@ -367,7 +383,10 @@ const sameDsShow = computed( ) const diffDsShow = computed( - () => curLinkageTargetViewsInfoDiffDs.value && curLinkageTargetViewsInfoDiffDs.value.length > 0 + () => + curLinkageTargetViewsInfoDiffDs.value && + curLinkageTargetViewsInfoDiffDs.value.length > 0 && + curComponent.value.innerType !== 'indicator' ) const dialogInit = viewItem => { @@ -557,6 +576,9 @@ const linkageFieldAdaptor = async data => { JSON.stringify(state.curLinkageViewInfo.extStack) + (state.curLinkageViewInfo.type.includes('chart-mix') ? JSON.stringify(state.curLinkageViewInfo.extBubble) + : '') + + (['indicator'].includes(state.curLinkageViewInfo.type) + ? JSON.stringify(state.curLinkageViewInfo.yAxis) : '') const targetCheckAllAxisStr = JSON.stringify(targetChartDetails.xAxis) + @@ -564,6 +586,9 @@ const linkageFieldAdaptor = async data => { JSON.stringify(state.curLinkageViewInfo.extStack) + (targetChartDetails.type.includes('chart-mix') ? JSON.stringify(targetChartDetails.extBubble) + : '') + + (['indicator'].includes(state.curLinkageViewInfo.type) + ? JSON.stringify(state.curLinkageViewInfo.yAxis) : '') state.sourceLinkageInfo.targetViewFields.forEach(item => { if ( @@ -592,7 +617,7 @@ const sourceLinkageInfoFilter = computed(() => { (state.curLinkageViewInfo.type.includes('chart-mix') ? JSON.stringify(state.curLinkageViewInfo.extBubble) : '') + - (state.curLinkageViewInfo.type.includes('table-normal') + (['table-normal', 'indicator'].includes(state.curLinkageViewInfo.type) ? JSON.stringify(state.curLinkageViewInfo.yAxis) : '') return state.sourceLinkageInfo.targetViewFields.filter(item => diff --git a/core/core-frontend/src/custom-component/indicator/DeIndicator.vue b/core/core-frontend/src/custom-component/indicator/DeIndicator.vue index 888f3cb7c7..f03c1d6b30 100644 --- a/core/core-frontend/src/custom-component/indicator/DeIndicator.vue +++ b/core/core-frontend/src/custom-component/indicator/DeIndicator.vue @@ -3,7 +3,7 @@ import { getData } from '@/api/chart' import { ref, reactive, shallowRef, computed, CSSProperties, toRefs, PropType } from 'vue' import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain' import { customAttrTrans, customStyleTrans, recursionTransObj } from '@/utils/canvasStyle' -import { deepCopy } from '@/utils/utils' +import { deepCopy, isMobile } from '@/utils/utils' import { cloneDeep, defaultsDeep, defaultTo } from 'lodash-es' import { BASE_VIEW_CONFIG, @@ -13,8 +13,18 @@ import { } from '@/views/chart/components/editor/util/chart' import { valueFormatter } from '@/views/chart/components/js/formatter' import { storeToRefs } from 'pinia' +import { isDashboard, trackBarStyleCheck } from '@/utils/canvasUtils' +import ViewTrackBar from '@/components/visualization/ViewTrackBar.vue' const props = defineProps({ + element: { + type: Object, + default() { + return { + propValue: null + } + } + }, view: { type: Object as PropType, default() { @@ -50,18 +60,25 @@ const props = defineProps({ } }) -const { view, scale, terminal } = toRefs(props) +const { view, scale, terminal, showPosition } = toRefs(props) const dvMainStore = dvMainStoreWithOut() - -const { batchOptStatus } = storeToRefs(dvMainStore) - +const dataVMobile = !isDashboard() && isMobile() +const { embeddedCallBack, nowPanelTrackInfo, nowPanelJumpInfo, mobileInPc, inMobile } = + storeToRefs(dvMainStore) +const viewTrack = ref(null) const errMsg = ref('') const isError = ref(false) const state = reactive({ + pointParam: null, data: null, loading: false, - totalItems: 0 + totalItems: 0, + trackBarStyle: { + position: 'absolute', + left: '50px', + top: '50px' + } }) const chartData = shallowRef>({ @@ -101,7 +118,6 @@ const result = computed(() => { }) const indicatorColor = ref(DEFAULT_INDICATOR_STYLE.color) - const thresholdColor = computed(() => { let color: string = indicatorColor.value let backgroundColor: string = DEFAULT_INDICATOR_STYLE.backgroundColor @@ -184,8 +200,7 @@ const formattedResult = computed(() => { return _result }) -const emit = defineEmits(['onChartClick', 'onDrillFilters', 'onJumpClick']) - +const emit = defineEmits(['onPointClick', 'onChartClick', 'onDrillFilters', 'onJumpClick']) const contentStyle = ref({ display: 'flex', 'flex-direction': 'column', @@ -375,6 +390,143 @@ const calcData = (view, callback) => { } } +const trackClick = trackAction => { + const param = state.pointParam + if (!param?.data?.dimensionList) { + return + } + const linkageParam = { + option: 'linkage', + name: state.pointParam.data.name, + viewId: view.value.id, + dimensionList: state.pointParam.data.dimensionList, + quotaList: state.pointParam.data.quotaList + } + const jumpParam = { + option: 'jump', + name: state.pointParam.data.name, + viewId: view.value.id, + dimensionList: state.pointParam.data.dimensionList, + quotaList: state.pointParam.data.quotaList, + sourceType: state.pointParam.data.sourceType + } + + const clickParams = { + option: 'pointClick', + name: state.pointParam.data.name, + viewId: view.value.id, + dimensionList: state.pointParam.data.dimensionList, + quotaList: state.pointParam.data.quotaList + } + + switch (trackAction) { + case 'pointClick': + emit('onPointClick', clickParams) + break + case 'linkageAndDrill': + dvMainStore.addViewTrackFilter(linkageParam) + emit('onChartClick', param) + break + case 'drill': + emit('onChartClick', param) + break + case 'linkage': + dvMainStore.addViewTrackFilter(linkageParam) + break + case 'jump': + if (mobileInPc.value && !inMobile.value) return + emit('onJumpClick', jumpParam) + break + default: + break + } +} + +const trackMenu = computed(() => { + let trackMenuInfo = [] + if (showPosition.value === 'viewDialog') { + return trackMenuInfo + } + let linkageCount = 0 + let jumpCount = 0 + chartData.value?.fields?.forEach(item => { + const sourceInfo = view.value.id + '#' + item.id + if (nowPanelTrackInfo.value[sourceInfo]) { + linkageCount++ + } + if (nowPanelJumpInfo.value[sourceInfo]) { + jumpCount++ + } + }) + jumpCount && + view.value?.jumpActive && + (!mobileInPc.value || inMobile.value) && + trackMenuInfo.push('jump') + linkageCount && view.value?.linkageActive && trackMenuInfo.push('linkage') + view.value.drillFields.length && trackMenuInfo.push('drill') + // 如果同时配置jump linkage drill 切配置联动时同时下钻 在实际只显示两个 '跳转' '联动和下钻' + if (trackMenuInfo.length === 3 && props.element.actionSelection.linkageActive === 'auto') { + trackMenuInfo = ['jump', 'linkageAndDrill'] + } else if ( + trackMenuInfo.length === 2 && + props.element.actionSelection.linkageActive === 'auto' && + !trackMenuInfo.includes('jump') + ) { + trackMenuInfo = ['linkageAndDrill'] + } + return trackMenuInfo +}) + +const pointClickTrans = () => { + if (embeddedCallBack.value === 'yes') { + trackClick('pointClick') + } +} + +const action = param => { + state.pointParam = param + // 点击 + pointClickTrans() + // 联动 跳转 + if (trackMenu.value.length < 2) { + // 只有一个事件直接调用 + trackClick(trackMenu.value[0]) + } else { + // 图表关联多个事件 + const barStyleTemp = { + left: param.x - 50, + top: param.y + 10 + } + trackBarStyleCheck(props.element, barStyleTemp, props.scale, trackMenu.value.length) + if (dataVMobile) { + state.trackBarStyle.left = barStyleTemp.left + 40 + 'px' + state.trackBarStyle.top = barStyleTemp.top + 70 + 'px' + } else { + state.trackBarStyle.left = barStyleTemp.left + 'px' + state.trackBarStyle.top = barStyleTemp.top + 'px' + } + + viewTrack.value.trackButtonClick() + } +} + +const onPointClick = () => { + if (view.value?.yAxis?.length) { + const axis = view.value.yAxis[0] + // 模拟点击 + const params = { + data: { + data: { + name: axis.name, + dimensionList: [], + quotaList: view.value.yAxis + } + } + } + action(params) + } +} + defineExpose({ calcData, renderChart @@ -382,7 +534,16 @@ defineExpose({