From c5e2eac8c397cbaf6e649e54538795d04db53df8 Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Thu, 12 Sep 2024 17:09:59 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E4=BB=AA=E8=A1=A8=E6=9D=BF=E3=80=81?= =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F):=20=E5=9B=BE=E7=89=87?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=94=AF=E6=8C=81=E7=BB=91=E5=AE=9A=E6=95=B0?= =?UTF-8?q?=E6=8D=AE=E9=9B=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../component-group/MediaGroup.vue | 12 ++++---- .../src/custom-component/component-list.ts | 10 ++++++- core/core-frontend/src/utils/canvasUtils.ts | 3 ++ core/core-frontend/src/utils/components.ts | 8 +++++ .../views/chart/components/editor/index.vue | 7 +++-- .../chart/components/editor/util/chart.ts | 14 +++++++++ .../js/panel/charts/others/Picture.ts | 19 ++++++++++++ .../chart/components/js/panel/types/index.ts | 1 + .../views/chart/components/views/index.vue | 10 +++++-- .../src/views/dashboard/index.vue | 29 +++++++++++++------ 10 files changed, 93 insertions(+), 20 deletions(-) create mode 100644 core/core-frontend/src/views/chart/components/js/panel/charts/others/Picture.ts diff --git a/core/core-frontend/src/custom-component/component-group/MediaGroup.vue b/core/core-frontend/src/custom-component/component-group/MediaGroup.vue index 59caa4970d..ca374d722a 100644 --- a/core/core-frontend/src/custom-component/component-group/MediaGroup.vue +++ b/core/core-frontend/src/custom-component/component-group/MediaGroup.vue @@ -28,8 +28,8 @@ const props = defineProps({ }) const { dvModel } = toRefs(props) -const newComponent = params => { - eventBus.emit('handleNew', { componentName: params, innerType: params }) +const newComponent = (componentName, innerType) => { + eventBus.emit('handleNew', { componentName: componentName, innerType: innerType }) } const handleDragStart = e => { @@ -47,22 +47,22 @@ const handleDragEnd = e => { :themes="themes" icon="dv-picture-show" label="图片" - drag-info="Picture&Picture" - v-on:click="newComponent('Picture')" + drag-info="UserView&Picture" + v-on:click="newComponent('UserView', 'Picture')" > diff --git a/core/core-frontend/src/custom-component/component-list.ts b/core/core-frontend/src/custom-component/component-list.ts index a845956877..1b737f701d 100644 --- a/core/core-frontend/src/custom-component/component-list.ts +++ b/core/core-frontend/src/custom-component/component-list.ts @@ -306,7 +306,15 @@ const list = [ component: 'UserView', name: '图表', label: '图表', - propValue: { textValue: '' }, + propValue: { + textValue: '', + url: '', + pictureShowType: 'common', // 图片显示方式 common 正常显示 dataset 绑定数据集显示 + flip: { + horizontal: false, + vertical: false + } + }, icon: 'bar', innerType: 'bar', editing: false, diff --git a/core/core-frontend/src/utils/canvasUtils.ts b/core/core-frontend/src/utils/canvasUtils.ts index 6a1a24ffa8..06170291c5 100644 --- a/core/core-frontend/src/utils/canvasUtils.ts +++ b/core/core-frontend/src/utils/canvasUtils.ts @@ -61,6 +61,9 @@ export function findNewComponent(componentName, innerType, staticMap?) { textValue: '' } } + if (newComponent.innerType === 'Picture') { + newComponent.style['adaptation'] = 'adaptation' + } if (dvMainStore.curOriginThemes === 'light') { newComponent['commonBackground'] = cloneDeep(COMMON_COMPONENT_BACKGROUND_LIGHT) } else { diff --git a/core/core-frontend/src/utils/components.ts b/core/core-frontend/src/utils/components.ts index 5a39be73ce..077835fca1 100644 --- a/core/core-frontend/src/utils/components.ts +++ b/core/core-frontend/src/utils/components.ts @@ -78,3 +78,11 @@ export const componentsMap = { export default function findComponent(key) { return componentsMap[key] } + +export function findComponentAttr(component) { + const key = + component.component === 'UserView' && component.innerType === 'Picture' + ? 'PictureAttr' + : component.component + 'Attr' + return componentsMap[key] +} 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 3b74363174..aa7a4200c5 100644 --- a/core/core-frontend/src/views/chart/components/editor/index.vue +++ b/core/core-frontend/src/views/chart/components/editor/index.vue @@ -253,7 +253,7 @@ const getFields = (id, chartId, type) => { const chartStyleShow = computed(() => { return ( - view.value.type !== 'richText' && + !['richText', 'Picture'].includes(view.value.type) && curComponent.value && curComponent.value.component === 'UserView' ) @@ -1770,7 +1770,10 @@ const deleteChartFieldItem = id => { - + {{ t('chart.switch_chart') }} { diff --git a/core/core-frontend/src/views/chart/components/views/index.vue b/core/core-frontend/src/views/chart/components/views/index.vue index 1c9a812ba4..243fac0b3c 100644 --- a/core/core-frontend/src/views/chart/components/views/index.vue +++ b/core/core-frontend/src/views/chart/components/views/index.vue @@ -43,6 +43,7 @@ import { storeToRefs } from 'pinia' import { checkAddHttp, setIdValueTrans } from '@/utils/canvasUtils' import { Base64 } from 'js-base64' import DeRichTextView from '@/custom-component/rich-text/DeRichTextView.vue' +import DePictureV2 from '@/custom-component/picture/Component.vue' import ChartEmptyInfo from '@/views/chart/components/views/components/ChartEmptyInfo.vue' import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot' import { viewFieldTimeTrans } from '@/utils/viewUtils' @@ -120,7 +121,7 @@ const { view, showPosition, element, active, searchCount, scale } = toRefs(props const titleShow = computed( () => - element.value.innerType !== 'rich-text' && + !['rich-text', 'Picture'].includes('rich-text') && state.title_show && showPosition.value !== 'viewDialog' ) @@ -672,7 +673,7 @@ const chartAreaShow = computed(() => { return true } } - if (view.value.type === 'rich-text') { + if (['rich-text', 'Picture'].includes(view.value.type)) { return true } if (view.value?.isPlugin) { @@ -895,6 +896,11 @@ const loadPluginCategory = data => { @onJumpClick="jumpClick" @resetLoading="() => (loading = false)" /> + -import { computed, nextTick, onMounted, onUnmounted, reactive, ref, watch } from 'vue' +import { computed, nextTick, onMounted, onUnmounted, reactive, ref } from 'vue' import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain' import { storeToRefs } from 'pinia' -import findComponent from '../../utils/components' +import { findComponentAttr } from '../../utils/components' import DvSidebar from '../../components/visualization/DvSidebar.vue' import router from '@/router' import MobileConfigPanel from './MobileConfigPanel.vue' @@ -75,10 +75,25 @@ const initDataset = () => { }) } +const otherEditorShow = computed(() => { + return Boolean( + curComponent.value && + (!['UserView', 'VQuery'].includes(curComponent.value?.component) || + (curComponent.value?.component === 'UserView' && + curComponent.value?.innerType === 'Picture')) && + !batchOptStatus.value + ) +}) + +const otherEditorTitle = computed(() => { + return curComponent.value?.component === 'UserView' ? '属性' : curComponent.value?.label || '属性' +}) + const viewEditorShow = computed(() => { return Boolean( curComponent.value && ['UserView', 'VQuery'].includes(curComponent.value.component) && + curComponent.value.innerType !== 'Picture' && !batchOptStatus.value ) }) @@ -260,19 +275,15 @@ onUnmounted(() => { - +