From 140027f0fdb633583d622403e473e7346167a513 Mon Sep 17 00:00:00 2001 From: jingna <1264204245@qq.com> Date: Mon, 28 Jul 2025 15:20:07 +0800 Subject: [PATCH] =?UTF-8?q?=E6=A0=91=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../component-group/TreeGroup.vue | 22 +- .../src/custom-component/component-list.ts | 40 - .../custom-component/de-tree/Component.vue | 1040 +++++++++-------- core/core-frontend/src/utils/canvasUtils.ts | 9 +- core/core-frontend/src/utils/components.ts | 4 - .../views/chart/components/editor/index.vue | 2 +- .../chart/components/editor/util/chart.ts | 9 +- .../js/panel/charts/others/DeTree.ts | 38 + .../chart/components/js/panel/types/index.ts | 1 + .../views/chart/components/views/index.vue | 23 +- 10 files changed, 636 insertions(+), 552 deletions(-) create mode 100644 core/core-frontend/src/views/chart/components/js/panel/charts/others/DeTree.ts diff --git a/core/core-frontend/src/custom-component/component-group/TreeGroup.vue b/core/core-frontend/src/custom-component/component-group/TreeGroup.vue index 4cb18f4..8cfa35a 100644 --- a/core/core-frontend/src/custom-component/component-group/TreeGroup.vue +++ b/core/core-frontend/src/custom-component/component-group/TreeGroup.vue @@ -1,5 +1,5 @@ diff --git a/core/core-frontend/src/custom-component/component-list.ts b/core/core-frontend/src/custom-component/component-list.ts index c0f1c3b..d85120f 100644 --- a/core/core-frontend/src/custom-component/component-list.ts +++ b/core/core-frontend/src/custom-component/component-list.ts @@ -579,42 +579,6 @@ const list = [ textDecoration: 'none' } }, - { - component: 'DeTree', - name: t('树'), - label: t('树'), - propValue: [ - { - name: 'tab', - title: t('visualization.new_tab'), - componentData: [], - closable: true - } - ], - icon: 'dv-tab', - innerType: '', - editing: false, - canvasActive: false, - x: 1, - y: 1, - sizeX: 36, - sizeY: 14, - style: { - width: 600, - height: 300, - fontSize: 16, - activeFontSize: 18, - headHorizontalPosition: 'left', - headFontColor: '#000000', - headFontActiveColor: '#000000', - titleHide: false, - showTabTitle: true, - // #13540 - fontWeight: 'normal', - fontStyle: 'normal', - textDecoration: 'none' - } - }, { component: 'ScrollText', name: t('visualization.scroll_text'), @@ -667,10 +631,6 @@ export function findNewComponentFromList( newComponent.propValue[0].name = guid() newComponent['titleBackground'] = deepCopy(COMMON_TAB_TITLE_BACKGROUND) } - if (comp.component === 'DeTree') { - newComponent.propValue[0].name = guid() - newComponent['titleBackground'] = deepCopy(COMMON_TAB_TITLE_BACKGROUND) - } } }) diff --git a/core/core-frontend/src/custom-component/de-tree/Component.vue b/core/core-frontend/src/custom-component/de-tree/Component.vue index 044247e..e7f64dd 100644 --- a/core/core-frontend/src/custom-component/de-tree/Component.vue +++ b/core/core-frontend/src/custom-component/de-tree/Component.vue @@ -1,6 +1,14 @@ @@ -41,528 +49,583 @@ const { t } = useI18n() const props = defineProps({ - canvasStyleData: { - type: Object, - required: true - }, - canvasViewInfo: { - type: Object, - required: true - }, - dvInfo: { - type: Object, - required: true - }, - element: { - type: Object, - default() { - return { - propValue: [] - } - } - }, - isEdit: { - type: Boolean, - default: false - }, - showPosition: { - type: String, - required: false, - default: 'canvas' - }, scale: { - type: Number, - required: false, - default: 1 - }, - // 仪表板刷新计时器 - searchCount: { - type: Number, - required: false, - default: 0 - }, - // 仪表板字体 - fontFamily: { - type: String, - required: false, - default: 'inherit' - } + type: Number, + required: false, + default: 1 + }, + element: { + type: Object + }, + editMode: { + type: String, + require: false, + default: 'edit' + }, + active: { + type: Boolean, + require: false, + default: false + }, + // 是否禁用 + disabled: { + type: Boolean, + default: false + }, + showPosition: { + type: String, + required: false, + default: 'preview' + }, + themes: { + type: String as PropType, + default: 'dark' + }, + //图表渲染id后缀 + suffixId: { + type: String, + required: false, + default: 'common' + } }) - const { - element, - isEdit, - showPosition, - canvasStyleData, - canvasViewInfo, - dvInfo, - scale, - searchCount - } = toRefs(props) +// const { +// element, +// isEdit, +// showPosition, +// canvasStyleData, +// canvasViewInfo, +// dvInfo, +// scale, +// searchCount +// } = toRefs(props) +// const defaultProps = { +// children: 'children', +// label: 'label', +// } +// const data = [ +// { +// label: 'Level one 1', +// children: [ +// { +// label: 'Level two 1-1', +// children: [ +// { +// label: 'Level three 1-1-1', +// }, +// ], +// }, +// ], +// }, +// { +// label: 'Level one 2', +// children: [ +// { +// label: 'Level two 2-1', +// children: [ +// { +// label: 'Level three 2-1-1', +// }, +// ], +// }, +// { +// label: 'Level two 2-2', +// children: [ +// { +// label: 'Level three 2-2-1', +// }, +// ], +// }, +// ], +// }, +// { +// label: 'Level one 3', +// children: [ +// { +// label: 'Level two 3-1', +// children: [ +// { +// label: 'Level three 3-1-1', +// }, +// ], +// }, +// { +// label: 'Level two 3-2', +// children: [ +// { +// label: 'Level three 3-2-1', +// }, +// ], +// }, +// ], +// }, +// ] + +// const titleBackgroundActiveSvgInner = computed(() => { +// return element.value.titleBackground.active.innerImage.replace('board/', '').replace('.svg', '') +// }) - const titleBackgroundActiveSvgInner = computed(() => { - return element.value.titleBackground.active.innerImage.replace('board/', '').replace('.svg', '') - }) +// const titleBackgroundInActiveSvgInner = computed(() => { +// return element.value.titleBackground.inActive.innerImage.replace('board/', '').replace('.svg', '') +// }) - const titleBackgroundInActiveSvgInner = computed(() => { - return element.value.titleBackground.inActive.innerImage.replace('board/', '').replace('.svg', '') - }) +// const svgInnerInActiveEnable = itemName => { +// const { backgroundImageEnable, backgroundType, innerImage } = +// element.value.titleBackground.inActive +// return ( +// editableTabsValue.value !== itemName && +// !element.value.titleBackground.multiply && +// element.value.titleBackground?.enable && +// backgroundImageEnable && +// backgroundType === 'innerImage' && +// typeof innerImage === 'string' +// ) +// } - const svgInnerInActiveEnable = itemName => { - const { backgroundImageEnable, backgroundType, innerImage } = - element.value.titleBackground.inActive - return ( - editableTabsValue.value !== itemName && - !element.value.titleBackground.multiply && - element.value.titleBackground?.enable && - backgroundImageEnable && - backgroundType === 'innerImage' && - typeof innerImage === 'string' - ) - } +// const svgInnerActiveEnable = itemName => { +// const { backgroundImageEnable, backgroundType, innerImage } = element.value.titleBackground.active +// return ( +// (editableTabsValue.value === itemName || element.value.titleBackground.multiply) && +// element.value.titleBackground?.enable && +// backgroundImageEnable && +// backgroundType === 'innerImage' && +// typeof innerImage === 'string' +// ) +// } - const svgInnerActiveEnable = itemName => { - const { backgroundImageEnable, backgroundType, innerImage } = element.value.titleBackground.active - return ( - (editableTabsValue.value === itemName || element.value.titleBackground.multiply) && - element.value.titleBackground?.enable && - backgroundImageEnable && - backgroundType === 'innerImage' && - typeof innerImage === 'string' - ) - } +// // tooltips 轮播会影响tab 展示 +// const viewToolTipsChange = () => { +// element.value.propValue?.forEach(tabItem => { +// const tMethod = +// editableTabsValue.value === tabItem.name +// ? ChartCarouselTooltip.resume +// : ChartCarouselTooltip.paused +// tabItem.componentData?.forEach(componentItem => { +// tMethod(componentItem.id) +// if (componentItem.component === 'Group') +// componentItem.propValue.forEach(groupItem => { +// tMethod(groupItem.id) +// }) +// }) +// }) +// } - // tooltips 轮播会影响tab 展示 - const viewToolTipsChange = () => { - element.value.propValue?.forEach(tabItem => { - const tMethod = - editableTabsValue.value === tabItem.name - ? ChartCarouselTooltip.resume - : ChartCarouselTooltip.paused - tabItem.componentData?.forEach(componentItem => { - tMethod(componentItem.id) - if (componentItem.component === 'Group') - componentItem.propValue.forEach(groupItem => { - tMethod(groupItem.id) - }) - }) - }) - } +// const handleMouseEnter = () => { +// state.hoverFlag = true +// } - const handleMouseEnter = () => { - state.hoverFlag = true - } +// const handleMouseLeave = () => { +// state.hoverFlag = false +// } +// const state = reactive({ +// activeTabName: '', +// curItem: {}, +// textarea: '', +// dialogVisible: false, +// tabShow: true, +// hoverFlag: false +// }) +// const tabsAreaScroll = ref(false) +// const editableTabsValue = ref(null) - const handleMouseLeave = () => { - state.hoverFlag = false - } - const state = reactive({ - activeTabName: '', - curItem: {}, - textarea: '', - dialogVisible: false, - tabShow: true, - hoverFlag: false - }) - const tabsAreaScroll = ref(false) - const editableTabsValue = ref(null) +// // 无边框 +// const noBorderColor = ref('none') +// let currentInstance - // 无边框 - const noBorderColor = ref('none') - let currentInstance +// const showTabTitleFlag = computed(() => { +// debugger +// if (element.value && element.value.style && element.value.style?.showTabTitle === false) { +// return false +// } else { +// return element.value.style?.showTabTitle +// } +// }) - const showTabTitleFlag = computed(() => { - if (element.value && element.value.style && element.value.style?.showTabTitle === false) { - return false - } else { - return element.value.style?.showTabTitle - } - }) +// const isEditMode = computed(() => editMode.value === 'edit' && isEdit.value && !mobileInPc.value) +// const curThemes = isDashboard() ? 'light' : 'dark' +// const calcTabLength = () => { +// setTimeout(() => { +// if (element.value.propValue.length > 1) { +// const containerDom = document.getElementById( +// 'tab-' + element.value.propValue[element.value.propValue.length - 1].name +// ) +// tabsAreaScroll.value = +// containerDom.parentNode.clientWidth > tabComponentRef.value.clientWidth - 100 +// } else { +// tabsAreaScroll.value = false +// } +// }) +// } - const isEditMode = computed(() => editMode.value === 'edit' && isEdit.value && !mobileInPc.value) - const curThemes = isDashboard() ? 'light' : 'dark' - const calcTabLength = () => { - setTimeout(() => { - if (element.value.propValue.length > 1) { - const containerDom = document.getElementById( - 'tab-' + element.value.propValue[element.value.propValue.length - 1].name - ) - tabsAreaScroll.value = - containerDom.parentNode.clientWidth > tabComponentRef.value.clientWidth - 100 - } else { - tabsAreaScroll.value = false - } - }) - } +// const beforeHandleCommand = (item, param) => { +// return { +// command: item, +// param: param +// } +// } +// const curPreviewGap = computed(() => +// dvInfo.value.type === 'dashboard' && canvasStyleData.value['dashboard'].gap === 'yes' +// ? canvasStyleData.value['dashboard'].gapSize +// : 0 +// ) - const beforeHandleCommand = (item, param) => { - return { - command: item, - param: param - } - } - const curPreviewGap = computed(() => - dvInfo.value.type === 'dashboard' && canvasStyleData.value['dashboard'].gap === 'yes' - ? canvasStyleData.value['dashboard'].gapSize - : 0 - ) +// function sureCurTitle() { +// state.curItem.title = state.textarea +// state.dialogVisible = false +// snapshotStore.recordSnapshotCache('sureCurTitle') +// } - function sureCurTitle() { - state.curItem.title = state.textarea - state.dialogVisible = false - snapshotStore.recordSnapshotCache('sureCurTitle') - } +// function addTab() { +// const newName = guid() +// const newTab = { +// name: newName, +// title: t('visualization.new_tab'), +// componentData: [], +// closable: true +// } +// element.value.propValue.push(newTab) +// editableTabsValue.value = newTab.name +// snapshotStore.recordSnapshotCache('addTab') +// } - function addTab() { - const newName = guid() - const newTab = { - name: newName, - title: t('visualization.new_tab'), - componentData: [], - closable: true - } - element.value.propValue.push(newTab) - editableTabsValue.value = newTab.name - snapshotStore.recordSnapshotCache('addTab') - } +// function deleteCur(param) { +// state.curItem = param +// let len = element.value.propValue.length +// while (len--) { +// if (element.value.propValue[len].name === param.name) { +// element.value.propValue.splice(len, 1) +// const activeIndex = +// (len - 1 + element.value.propValue.length) % element.value.propValue.length +// editableTabsValue.value = element.value.propValue[activeIndex].name +// state.tabShow = false +// nextTick(() => { +// state.tabShow = true +// }) +// } +// } +// } +// function copyCur(param) { +// addTab() +// const newTabItem = element.value.propValue[element.value.propValue.length - 1] +// const idMap = {} +// const newCanvasId = element.value.id + '--' + newTabItem.name +// newTabItem.componentData = deepCopyTabItemHelper(newCanvasId, param.componentData, idMap) +// dvMainStore.updateCopyCanvasView(idMap) +// } - function deleteCur(param) { - state.curItem = param - let len = element.value.propValue.length - while (len--) { - if (element.value.propValue[len].name === param.name) { - element.value.propValue.splice(len, 1) - const activeIndex = - (len - 1 + element.value.propValue.length) % element.value.propValue.length - editableTabsValue.value = element.value.propValue[activeIndex].name - state.tabShow = false - nextTick(() => { - state.tabShow = true - }) - } - } - } - function copyCur(param) { - addTab() - const newTabItem = element.value.propValue[element.value.propValue.length - 1] - const idMap = {} - const newCanvasId = element.value.id + '--' + newTabItem.name - newTabItem.componentData = deepCopyTabItemHelper(newCanvasId, param.componentData, idMap) - dvMainStore.updateCopyCanvasView(idMap) - } +// function editCurTitle(param) { +// state.activeTabName = param.name +// state.curItem = param +// state.textarea = param.title +// state.dialogVisible = true +// } - function editCurTitle(param) { - state.activeTabName = param.name - state.curItem = param - state.textarea = param.title - state.dialogVisible = true - } +// function handleCommand(command) { +// switch (command.command) { +// case 'editTitle': +// editCurTitle(command.param) +// break +// case 'deleteCur': +// deleteCur(command.param) +// snapshotStore.recordSnapshotCache('deleteCur') +// break +// case 'copyCur': +// copyCur(command.param) +// snapshotStore.recordSnapshotCache('copyCur') +// break +// } +// } - function handleCommand(command) { - switch (command.command) { - case 'editTitle': - editCurTitle(command.param) - break - case 'deleteCur': - deleteCur(command.param) - snapshotStore.recordSnapshotCache('deleteCur') - break - case 'copyCur': - copyCur(command.param) - snapshotStore.recordSnapshotCache('copyCur') - break - } - } +// const reloadLinkage = () => { +// // 刷新联动信息 +// if (dvInfo.value.id) { +// const resourceTable = ['canvas', 'canvasDataV', 'edit'].includes(showPosition.value) +// ? 'snapshot' +// : 'core' +// getPanelAllLinkageInfo(dvInfo.value.id, resourceTable).then(rsp => { +// dvMainStore.setNowPanelTrackInfo(rsp.data) +// }) +// } +// } - const reloadLinkage = () => { - // 刷新联动信息 - if (dvInfo.value.id) { - const resourceTable = ['canvas', 'canvasDataV', 'edit'].includes(showPosition.value) - ? 'snapshot' - : 'core' - getPanelAllLinkageInfo(dvInfo.value.id, resourceTable).then(rsp => { - dvMainStore.setNowPanelTrackInfo(rsp.data) - }) - } - } +// const componentMoveIn = component => { +// element.value.propValue.forEach((tabItem, index) => { +// if (editableTabsValue.value === tabItem.name) { +// //获取主画布当前组件的index +// if (isDashboard()) { +// eventBus.emit('removeMatrixItemById-canvas-main', component.id) +// dvMainStore.setCurComponent({ component: null, index: null }) +// component.canvasId = element.value.id + '--' + tabItem.name +// const refInstance = currentInstance.refs['tabCanvas_' + index][0] +// if (refInstance) { +// const matrixBase = refInstance.getBaseMatrixSize() //矩阵基础大小 +// canvasChangeAdaptor(component, matrixBase) +// component.x = 1 +// component.y = 200 +// component.style.left = 0 +// component.style.top = 0 +// tabItem.componentData.push(component) +// refInstance.addItemBox(component) //在适当的时候初始化布局组件 +// nextTick(() => { +// refInstance.canvasInitImmediately() +// }) +// } +// } else { +// const curIndex = findComponentIndexById(component.id) +// // 从主画布删除 +// dvMainStore.deleteComponent(curIndex) +// dvMainStore.setCurComponent({ component: null, index: null }) +// component.canvasId = element.value.id + '--' + tabItem.name +// dataVTabComponentAdd(component, element.value) +// tabItem.componentData.push(component) +// } +// } +// }) - const componentMoveIn = component => { - element.value.propValue.forEach((tabItem, index) => { - if (editableTabsValue.value === tabItem.name) { - //获取主画布当前组件的index - if (isDashboard()) { - eventBus.emit('removeMatrixItemById-canvas-main', component.id) - dvMainStore.setCurComponent({ component: null, index: null }) - component.canvasId = element.value.id + '--' + tabItem.name - const refInstance = currentInstance.refs['tabCanvas_' + index][0] - if (refInstance) { - const matrixBase = refInstance.getBaseMatrixSize() //矩阵基础大小 - canvasChangeAdaptor(component, matrixBase) - component.x = 1 - component.y = 200 - component.style.left = 0 - component.style.top = 0 - tabItem.componentData.push(component) - refInstance.addItemBox(component) //在适当的时候初始化布局组件 - nextTick(() => { - refInstance.canvasInitImmediately() - }) - } - } else { - const curIndex = findComponentIndexById(component.id) - // 从主画布删除 - dvMainStore.deleteComponent(curIndex) - dvMainStore.setCurComponent({ component: null, index: null }) - component.canvasId = element.value.id + '--' + tabItem.name - dataVTabComponentAdd(component, element.value) - tabItem.componentData.push(component) - } - } - }) +// reloadLinkage() +// } - reloadLinkage() - } +// const componentMoveOut = component => { +// if (isDashboard()) { +// canvasChangeAdaptor(component, bashMatrixInfo.value, true) +// } +// // 从Tab画布中移除 +// eventBus.emit('removeMatrixItemById-' + component.canvasId, component.id) +// dvMainStore.setCurComponent({ component: null, index: null }) +// // 主画布中添加 +// if (isDashboard()) { +// eventBus.emit('moveOutFromTab-canvas-main', component) +// } else { +// addToMain(component) +// } +// reloadLinkage() +// } - const componentMoveOut = component => { - if (isDashboard()) { - canvasChangeAdaptor(component, bashMatrixInfo.value, true) - } - // 从Tab画布中移除 - eventBus.emit('removeMatrixItemById-' + component.canvasId, component.id) - dvMainStore.setCurComponent({ component: null, index: null }) - // 主画布中添加 - if (isDashboard()) { - eventBus.emit('moveOutFromTab-canvas-main', component) - } else { - addToMain(component) - } - reloadLinkage() - } +// const addToMain = component => { +// const { left, top } = element.value.style +// component.style.left = component.style.left + left +// component.style.top = component.style.top + top +// component.canvasId = 'canvas-main' +// dvMainStore.addComponent({ +// component, +// index: undefined, +// isFromGroup: true +// }) +// } - const addToMain = component => { - const { left, top } = element.value.style - component.style.left = component.style.left + left - component.style.top = component.style.top + top - component.canvasId = 'canvas-main' - dvMainStore.addComponent({ - component, - index: undefined, - isFromGroup: true - }) - } +// const moveActive = computed(() => { +// return tabMoveInActiveId.value && tabMoveInActiveId.value === element.value.id +// }) - const moveActive = computed(() => { - return tabMoveInActiveId.value && tabMoveInActiveId.value === element.value.id - }) +// const headClass = computed(() => { +// if (tabsAreaScroll.value) { +// return 'tab-head-left' +// } else { +// return 'tab-head-' + element.value.style.headHorizontalPosition +// } +// }) - const headClass = computed(() => { - if (tabsAreaScroll.value) { - return 'tab-head-left' - } else { - return 'tab-head-' + element.value.style.headHorizontalPosition - } - }) +// const backgroundStyle = backgroundParams => { +// if (backgroundParams) { +// const { +// backdropFilterEnable, +// backdropFilter, +// backgroundColorSelect, +// backgroundColor, +// backgroundImageEnable, +// backgroundType, +// outerImage, +// innerPadding, +// borderRadius +// } = backgroundParams +// let style = { +// padding: innerPadding * scale.value + 'px', +// borderRadius: borderRadius + 'px' +// } +// let colorRGBA = '' +// if (backgroundColorSelect && backgroundColor) { +// colorRGBA = backgroundColor +// } +// if (backgroundImageEnable) { +// if (backgroundType === 'outerImage' && typeof outerImage === 'string') { +// style['background'] = `url(${imgUrlTrans(outerImage)}) no-repeat ${colorRGBA}` +// } else { +// style['background-color'] = colorRGBA +// } +// } else { +// style['background-color'] = colorRGBA +// } +// if (backdropFilterEnable) { +// style['backdrop-filter'] = 'blur(' + backdropFilter + 'px)' +// } +// return style +// } +// return {} +// } - const backgroundStyle = backgroundParams => { - if (backgroundParams) { - const { - backdropFilterEnable, - backdropFilter, - backgroundColorSelect, - backgroundColor, - backgroundImageEnable, - backgroundType, - outerImage, - innerPadding, - borderRadius - } = backgroundParams - let style = { - padding: innerPadding * scale.value + 'px', - borderRadius: borderRadius + 'px' - } - let colorRGBA = '' - if (backgroundColorSelect && backgroundColor) { - colorRGBA = backgroundColor - } - if (backgroundImageEnable) { - if (backgroundType === 'outerImage' && typeof outerImage === 'string') { - style['background'] = `url(${imgUrlTrans(outerImage)}) no-repeat ${colorRGBA}` - } else { - style['background-color'] = colorRGBA - } - } else { - style['background-color'] = colorRGBA - } - if (backdropFilterEnable) { - style['backdrop-filter'] = 'blur(' + backdropFilter + 'px)' - } - return style - } - return {} - } +// const titleStyle = itemName => { +// let style = {} +// if (editableTabsValue.value === itemName) { +// style = { +// textDecoration: element.value.style.textDecoration, +// fontStyle: element.value.style.fontStyle, +// fontWeight: element.value.style.fontWeight, +// fontSize: (element.value.style.activeFontSize || 18) + 'px', +// lineHeight: (element.value.style.activeFontSize || 18) + 'px' +// } +// if (element.value.titleBackground?.enable) { +// style = { +// ...style, +// ...backgroundStyle(element.value.titleBackground.active) +// } +// } +// } else { +// style = { +// textDecoration: element.value.style.textDecoration, +// fontStyle: element.value.style.fontStyle, +// fontWeight: element.value.style.fontWeight, +// fontSize: (element.value.style.fontSize || 16) + 'px', +// lineHeight: (element.value.style.fontSize || 16) + 'px' +// } +// if (element.value.titleBackground?.enable) { +// style = { +// ...style, +// ...backgroundStyle( +// element.value.titleBackground.multiply +// ? element.value.titleBackground.active +// : element.value.titleBackground.inActive +// ) +// } +// } +// } +// return style +// } - const titleStyle = itemName => { - let style = {} - if (editableTabsValue.value === itemName) { - style = { - textDecoration: element.value.style.textDecoration, - fontStyle: element.value.style.fontStyle, - fontWeight: element.value.style.fontWeight, - fontSize: (element.value.style.activeFontSize || 18) + 'px', - lineHeight: (element.value.style.activeFontSize || 18) + 'px' - } - if (element.value.titleBackground?.enable) { - style = { - ...style, - ...backgroundStyle(element.value.titleBackground.active) - } - } - } else { - style = { - textDecoration: element.value.style.textDecoration, - fontStyle: element.value.style.fontStyle, - fontWeight: element.value.style.fontWeight, - fontSize: (element.value.style.fontSize || 16) + 'px', - lineHeight: (element.value.style.fontSize || 16) + 'px' - } - if (element.value.titleBackground?.enable) { - style = { - ...style, - ...backgroundStyle( - element.value.titleBackground.multiply - ? element.value.titleBackground.active - : element.value.titleBackground.inActive - ) - } - } - } - return style - } +// const fontColor = computed(() => { +// if ( +// element.value && +// element.value.style && +// element.value.style.headFontColor && +// typeof element.value.style.headFontColor === 'string' +// ) { +// return element.value.style.headFontColor +// } else { +// return 'none' +// } +// }) - const fontColor = computed(() => { - if ( - element.value && - element.value.style && - element.value.style.headFontColor && - typeof element.value.style.headFontColor === 'string' - ) { - return element.value.style.headFontColor - } else { - return 'none' - } - }) +// const activeColor = computed(() => { +// if ( +// element.value && +// element.value.style && +// element.value.style.headFontActiveColor && +// typeof element.value.style.headFontActiveColor === 'string' +// ) { +// return element.value.style.headFontActiveColor +// } else { +// return 'none' +// } +// }) - const activeColor = computed(() => { - if ( - element.value && - element.value.style && - element.value.style.headFontActiveColor && - typeof element.value.style.headFontActiveColor === 'string' - ) { - return element.value.style.headFontActiveColor - } else { - return 'none' - } - }) +// const borderActiveColor = computed(() => { +// if ( +// element.value && +// element.value.style && +// element.value.style.headBorderActiveColor && +// typeof element.value.style.headBorderActiveColor === 'string' +// ) { +// return element.value.style.headBorderActiveColor +// } else { +// return 'none' +// } +// }) - const borderActiveColor = computed(() => { - if ( - element.value && - element.value.style && - element.value.style.headBorderActiveColor && - typeof element.value.style.headBorderActiveColor === 'string' - ) { - return element.value.style.headBorderActiveColor - } else { - return 'none' - } - }) +// const titleValid = computed(() => { +// return !!state.textarea && !!state.textarea.trim() +// }) - const titleValid = computed(() => { - return !!state.textarea && !!state.textarea.trim() - }) +// watch( +// () => element.value, +// () => { +// calcTabLength() +// }, +// { deep: true } +// ) - watch( - () => element.value, - () => { - calcTabLength() - }, - { deep: true } - ) +// const reShow = () => { +// state.tabShow = false +// nextTick(() => { +// state.tabShow = true +// }) +// } - const reShow = () => { - state.tabShow = false - nextTick(() => { - state.tabShow = true - }) - } +// watch( +// () => isEditMode.value, +// () => { +// initCarousel() +// } +// ) - watch( - () => isEditMode.value, - () => { - initCarousel() - } - ) - - watch( - () => editableTabsValue.value, - () => { - viewToolTipsChange() - } - ) - const initCarousel = () => { - carouselTimer && clearInterval(carouselTimer) - carouselTimer = null - if (!isEditMode.value) { - if (element.value.carousel?.enable) { - const switchTime = (element.value.carousel.time || 5) * 1000 - let switchCount = 1 - // 轮播定时器 - carouselTimer = setInterval(() => { - // 鼠标移入时 停止轮播 - if (!state.hoverFlag) { - const nowIndex = switchCount % element.value.propValue.length - switchCount++ - nextTick(() => { - editableTabsValue.value = element.value.propValue[nowIndex].name - }) - } - }, switchTime) - } - } - } +// watch( +// () => editableTabsValue.value, +// () => { +// viewToolTipsChange() +// } +// ) +// const initCarousel = () => { +// carouselTimer && clearInterval(carouselTimer) +// carouselTimer = null +// if (!isEditMode.value) { +// if (element.value.carousel?.enable) { +// const switchTime = (element.value.carousel.time || 5) * 1000 +// let switchCount = 1 +// // 轮播定时器 +// carouselTimer = setInterval(() => { +// // 鼠标移入时 停止轮播 +// if (!state.hoverFlag) { +// const nowIndex = switchCount % element.value.propValue.length +// switchCount++ +// nextTick(() => { +// editableTabsValue.value = element.value.propValue[nowIndex].name +// }) +// } +// }, switchTime) +// } +// } +// } onMounted(() => { - if (element.value.propValue.length > 0) { - editableTabsValue.value = element.value.propValue[0].name - } - calcTabLength() - if (['canvas', 'canvasDataV', 'edit'].includes(showPosition.value) && !mobileInPc.value) { - eventBus.on('onTabMoveIn-' + element.value.id, componentMoveIn) - eventBus.on('onTabMoveOut-' + element.value.id, componentMoveOut) - eventBus.on('onTabSortChange-' + element.value.id, reShow) - } - currentInstance = getCurrentInstance() - initCarousel() - nextTick(() => { - groupSizeStyleAdaptor(element.value) - }) - setTimeout(() => { - viewToolTipsChange() - }, 1000) - }) - onBeforeUnmount(() => { - if (['canvas', 'canvasDataV', 'edit'].includes(showPosition.value) && !mobileInPc.value) { - eventBus.off('onTabMoveIn-' + element.value.id, componentMoveIn) - eventBus.off('onTabMoveOut-' + element.value.id, componentMoveOut) - eventBus.off('onTabSortChange-' + element.value.id, reShow) - } - }) - onBeforeMount(() => { - if (carouselTimer) { - clearInterval(carouselTimer) - carouselTimer = null - } + // if (element.value.propValue.length > 0) { + // editableTabsValue.value = element.value.propValue[0].name + // } + // calcTabLength() + // if (['canvas', 'canvasDataV', 'edit'].includes(showPosition.value) && !mobileInPc.value) { + // eventBus.on('onTabMoveIn-' + element.value.id, componentMoveIn) + // eventBus.on('onTabMoveOut-' + element.value.id, componentMoveOut) + // eventBus.on('onTabSortChange-' + element.value.id, reShow) + // } + // currentInstance = getCurrentInstance() + // initCarousel() + // nextTick(() => { + // groupSizeStyleAdaptor(element.value) + // }) + // setTimeout(() => { + // viewToolTipsChange() + // }, 1000) }) + + // onBeforeUnmount(() => { + // if (['canvas', 'canvasDataV', 'edit'].includes(showPosition.value) && !mobileInPc.value) { + // eventBus.off('onTabMoveIn-' + element.value.id, componentMoveIn) + // eventBus.off('onTabMoveOut-' + element.value.id, componentMoveOut) + // eventBus.off('onTabSortChange-' + element.value.id, reShow) + // } + // }) + // onBeforeMount(() => { + // if (carouselTimer) { + // clearInterval(carouselTimer) + // carouselTimer = null + // } + // }) + \ No newline at end of file diff --git a/core/core-frontend/src/utils/canvasUtils.ts b/core/core-frontend/src/utils/canvasUtils.ts index 1a98727..b6e06be 100644 --- a/core/core-frontend/src/utils/canvasUtils.ts +++ b/core/core-frontend/src/utils/canvasUtils.ts @@ -66,6 +66,7 @@ export function findDragComponent(componentInfo) { } export function findNewComponent(componentName, innerType, staticMap?) { + debugger let newComponent componentList.forEach(comp => { if (comp.component === componentName || comp.component === innerType) { @@ -74,16 +75,16 @@ export function findNewComponent(componentName, innerType, staticMap?) { newComponent.propValue[0].name = guid() newComponent['titleBackground'] = deepCopy(COMMON_TAB_TITLE_BACKGROUND) } - if (newComponent.component === 'DeTree') { - newComponent.propValue[0].name = guid() - newComponent['titleBackground'] = deepCopy(COMMON_TAB_TITLE_BACKGROUND) - } newComponent.innerType = innerType if (newComponent.innerType === 'richText') { newComponent.propValue = { textValue: '' } } + if (newComponent.innerType === 'DeTree') { + newComponent.propValue = [] + // newComponent['titleBackground'] = deepCopy(COMMON_TAB_TITLE_BACKGROUND) + } 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 e836825..e12329c 100644 --- a/core/core-frontend/src/utils/components.ts +++ b/core/core-frontend/src/utils/components.ts @@ -13,8 +13,6 @@ import CanvasIcon from '@/custom-component/canvas-icon/Component.vue' import CanvasIconAttr from '@/custom-component/canvas-icon/Attr.vue' import DeTabs from '@/custom-component/de-tabs/Component.vue' import DeTabsAttr from '@/custom-component/de-tabs/Attr.vue' -import DeTree from '@/custom-component/de-tree/Component.vue' -import DeTreeAttr from '@/custom-component/de-tree/Attr.vue' import DeGraphical from '@/custom-component/de-graphical/Component.vue' import DeGraphicalAttr from '@/custom-component/de-graphical/Attr.vue' import CircleShape from '@/custom-component/circle-shape/Component.vue' @@ -55,8 +53,6 @@ export const componentsMap = { CanvasIconAttr: CanvasIconAttr, DeTabs: DeTabs, DeTabsAttr: DeTabsAttr, - DeTree: DeTree, - DeTreeAttr: DeTreeAttr, DeGraphical: DeGraphical, DeGraphicalAttr: DeGraphicalAttr, CircleShape: CircleShape, 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 5ee8489..bc08bb2 100644 --- a/core/core-frontend/src/views/chart/components/editor/index.vue +++ b/core/core-frontend/src/views/chart/components/editor/index.vue @@ -2110,7 +2110,7 @@ const deleteChartFieldItem = id => { {{ t('chart.switch_chart') }} 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 e62be3f..6f368ca 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 @@ -1679,7 +1679,14 @@ export const CHART_TYPE_CONFIGS = [ value: 'picture-group', title: t('visualization.picture_group'), icon: 'picture-group' - } + }, + { + render: 'custom', + category: 'quota', + value: 'DeTree', + title: '树', + icon: 'rich-text' + }, ] } ] diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/others/DeTree.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/others/DeTree.ts new file mode 100644 index 0000000..53f2c59 --- /dev/null +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/others/DeTree.ts @@ -0,0 +1,38 @@ +import { AbstractChartView, ChartLibraryType, ChartRenderType } from '../../types' +import { useI18n } from '@/hooks/web/useI18n' + +const { t } = useI18n() +/** + * 富文本图表 + */ +export class RichTextChartView extends AbstractChartView { + properties: EditorProperty[] = [ + 'background-overall-component', + 'border-style', + 'threshold', + 'function-cfg' + ] + propertyInner: EditorPropertyInner = { + 'background-overall-component': ['all'], + 'border-style': ['all'], + threshold: ['tableThreshold'], + 'function-cfg': ['emptyDataStrategy'] + } + debugger + axis: AxisType[] = ['xAxis', 'yAxis', 'filter'] + axisConfig: AxisConfig = { + xAxis: { + name: `${t('chart.dimension')}`, + type: 'd', + allowEmpty: true + }, + yAxis: { + name: `${t('chart.quota')}`, + type: 'q', + allowEmpty: true + } + } + constructor() { + super(ChartRenderType.CUSTOM, ChartLibraryType.DETREE, 'DeTree') + } +} \ No newline at end of file diff --git a/core/core-frontend/src/views/chart/components/js/panel/types/index.ts b/core/core-frontend/src/views/chart/components/js/panel/types/index.ts index fcc6efb..5ddc40d 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/types/index.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/types/index.ts @@ -16,6 +16,7 @@ export enum ChartLibraryType { ECHARTS = 'echarts', S2 = 's2', RICH_TEXT = 'rich-text', + DETREE = 'DeTree', PICTURE_GROUP = 'picture-group', INDICATOR = 'indicator' } 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 02a9152..c934de1 100644 --- a/core/core-frontend/src/views/chart/components/views/index.vue +++ b/core/core-frontend/src/views/chart/components/views/index.vue @@ -45,6 +45,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 DeTreeView from '@/custom-component/de-tree/Component.vue' import DePictureGroup from '@/custom-component/picture-group/Component.vue' import ChartEmptyInfo from '@/views/chart/components/views/components/ChartEmptyInfo.vue' import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot' @@ -153,7 +154,7 @@ const dynamicAreaId = ref('') const { view, showPosition, element, active, searchCount, scale, suffixId } = toRefs(props) const titleShow = computed(() => { return ( - !['rich-text', 'picture-group'].includes(element.value.innerType) && + !['rich-text','DeTree', 'picture-group'].includes(element.value.innerType) && state.title_show && showPosition.value !== 'viewDialog' ) @@ -578,6 +579,10 @@ const queryData = (firstLoad = false) => { const calcData = params => { dvMainStore.setLastViewRequestInfo(params.id, params.chartExtRequest) if (chartComponent?.value) { + if (['DeTree'].includes(view.value.type)) { + loading.value = false + return + } loading.value = true if (view.value.isPlugin) { chartComponent?.value?.invokeMethod({ @@ -868,7 +873,7 @@ const chartAreaShow = computed(() => { return true } } - if (['rich-text', 'picture-group'].includes(view.value.type)) { + if (['rich-text', 'picture-group','DeTree'].includes(view.value.type)) { return true } if (view.value?.isPlugin) { @@ -1049,7 +1054,7 @@ const loadPluginCategory = data => { } const allEmptyCheck = computed(() => { - return ['rich-text', 'picture-group','three-map'].includes(element.value.innerType) + return ['rich-text','DeTree', 'picture-group','three-map'].includes(element.value.innerType) }) /** * 标题提示的最大宽度 @@ -1203,6 +1208,18 @@ const clearG2Tooltip = () => { :edit-mode="editMode" :suffixId="suffixId" /> +