ThbTech/gis-bi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

树组件配置

Browse Source
This commit is contained in:
jingna 2025-07-30 18:25:41 +08:00
parent 6559569a47
commit 9f530ae3b7
6 changed files with 598 additions and 563 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

646
core/core-frontend/src/custom-component/de-tree/Component.vue
View File

@ -1,14 +1,13 @@
<template>
<div>
<div v-if="element.propValue.length > 0">
<el-tree :data="element.propValue"
:props="element.defaultProps"
<div style="width: 100%;height: 100%;overflow: auto;">
<div v-if="state.data.length > 0">
<el-tree :data="state.data"
:props="state.defaultProps"
/>
</div>
<div v-else>
<span>树暂无数据11353451{{element.propValue}}{{element.defaultProps}}</span>
<span>树暂无数据</span>
</div>
<div>232</div>
</div>
</template>
@ -92,552 +91,105 @@
default: 'common'
}
})
// 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 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 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)
// })
// })
// })
// }
// 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 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 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
// )
// 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 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 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 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()
// }
// 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 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 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 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 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()
// })
// watch(
// () => element.value,
// () => {
// calcTabLength()
// },
// { deep: true }
// )
// const reShow = () => {
// state.tabShow = false
// nextTick(() => {
// state.tabShow = true
// })
// }
// 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)
// }
// }
// }
onMounted(() => {
console.log(props.view)
initview()
// 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)
const state = reactive({
data:[],
defaultProps:{ children: 'children', label: 'name' }
})
function initview(){
const initReady = ref(false)
const calcData = (view: Chart, callback) => {
const v = JSON.parse(JSON.stringify(view))
getData(v)
.then(res => {
if (res.code && res.code !== 0) {
} else {
console.log(res,6575)
const resdata:any = res
const flatData = convertToFlatData(resdata.data.fields,resdata.data.tableRow)
state.data = convertToTree(flatData)
debugger
getData(props.view).then(res => {
console.log(res,378923749234)
})
if(resdata?.drillFields.length > 0){
state.defaultProps.label = resdata.drillFields[0].originName
}
// 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
// }
// originName
// 钻取维度drillFields
// state.data = res?.data?.fields ?? []
initReady.value = true
}
callback?.()
nextTick(() => {
initReady.value = true
})
})
.catch(() => {
nextTick(() => {
initReady.value = true
})
callback?.()
})
// getData(props.view).then(res => {
// console.log(res,378923749234)
// })
nextTick(() => {
initReady.value = true
})
callback?.()
}
function convertToFlatData(fields:any, tableRow:any) {
// 查找需要的字段
const idField = fields.find(field => field.originName === 'id');
const parentIdField = fields.find(field => field.originName === 'parentid');
const orgNameField = fields.find(field => field.originName === 'orgname');
const orgTypeField = fields.find(field => field.originName === 'orgtype');
const managerField = fields.find(field => field.originName === 'manager');
// 转换数据
return tableRow.map(row => {
return {
id: row[idField.gisbiName],
parentid: row[parentIdField.gisbiName],
orgname: row[orgNameField.gisbiName],
orgtype: row[orgTypeField.gisbiName],
manager: row[managerField.gisbiName]
};
});
}
function convertToTree(data, rootId = '0') {
// 创建一个映射表，用于快速查找节点
const nodeMap = {};
// 存储根节点
const roots = [];
// 初始化所有节点，添加children属性
data.forEach(item => {
nodeMap[item.id] = { ...item, children: [] };
});
// 构建树形结构
data.forEach(item => {
const node = nodeMap[item.id];
if (item.parentid === rootId || item.parentid === '') {
// 如果是根节点，添加到根节点数组
roots.push(node);
} else {
// 如果有父节点，将其添加到父节点的children中
const parent = nodeMap[item.parentid];
if (parent) {
parent.children.push(node);
} else {
// 如果找不到父节点，也当作根节点处理
roots.push(node);
}
}
});
return roots;
}
onMounted(() => {
console.log(props.view)
})
defineExpose({
calcData
})
</script>
<style lang="less" scoped>
.title-hidde-tab {

1
core/core-frontend/src/models/chart/editor.d.ts vendored
View File

@ -34,6 +34,7 @@ declare type EditorProperty =
| 'summary-selector'
| 'bullet-graph-selector'
| 'graphic-text-selector'
| 'basic-attributes-selector'
declare type EditorPropertyInner = {
[key in EditorProperty]?: string[]
}

17
core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue
View File

@ -16,6 +16,7 @@ import { storeToRefs } from 'pinia'
import CollapseSwitchItem from '@/components/collapse-switch-item/src/CollapseSwitchItem.vue'
import { ElCollapse, ElCollapseItem } from 'element-plus-secondary'
import BasicStyleSelector from '@/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue'
import BasicAttributesSelector from '@/views/chart/components/editor/editor-style/components/BasicAttributesSelector.vue'
import SymbolicStyleSelector from '@/views/chart/components/editor/editor-style/components/SymbolicStyleSelector.vue'
import DualBasicStyleSelector from '@/views/chart/components/editor/editor-style/components/DualBasicStyleSelector.vue'
import ComponentPosition from '@/components/visualization/common/ComponentPosition.vue'
@ -273,6 +274,22 @@ watch(
>
<component-position :themes="themes" />
</el-collapse-item>
<el-collapse-item
:effect="themes"
name="basicStyle"
:title="t('chart.basic_style')"
v-if="showProperties('basic-attributes-selector')"
>
<basic-attributes-selector
:property-inner="propertyInnerAll['basic-attributes-selector']"
:themes="themes"
:chart="chart"
:allGraphcs = "props.allGraphcs"
@onBasicStyleChange="onBasicStyleChange"
@onMiscChange="onMiscChange"
/>
</el-collapse-item>
<el-collapse-item
:effect="themes"
name="basicStyle"

468
core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicAttributesSelector.vue Normal file
View File

@ -0,0 +1,468 @@
<script lang="ts" setup>
import icon_letterSpacing_outlined from '@/assets/svg/icon_letter-spacing_outlined.svg'
import icon_bold_outlined from '@/assets/svg/icon_bold_outlined.svg'
import icon_italic_outlined from '@/assets/svg/icon_italic_outlined.svg'
import icon_leftAlignment_outlined from '@/assets/svg/icon_left-alignment_outlined.svg'
import icon_centerAlignment_outlined from '@/assets/svg/icon_center-alignment_outlined.svg'
import icon_rightAlignment_outlined from '@/assets/svg/icon_right-alignment_outlined.svg'
import icon_edit_outlined from '@/assets/svg/icon_edit_outlined.svg'
import { PropType, computed, onMounted, reactive, toRefs, watch, nextTick, ref } from 'vue'
import { useAppearanceStoreWithOut } from '@/store/modules/appearance'
import { useI18n } from '@/hooks/web/useI18n'
import {
COLOR_PANEL,
CHART_FONT_FAMILY,
CHART_FONT_LETTER_SPACE,
DEFAULT_TITLE_STYLE
} from '@/views/chart/components/editor/util/chart'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { storeToRefs } from 'pinia'
import { cloneDeep, defaultsDeep } from 'lodash-es'
import { ElButton, ElIcon } from 'element-plus-secondary'
import Icon from '@/components/icon-custom/src/Icon.vue'
const dvMainStore = dvMainStoreWithOut()
const { batchOptStatus, mobileInPc } = storeToRefs(dvMainStore)
const { t } = useI18n()
const props = defineProps({
chart: {
type: Object,
required: true
},
themes: {
type: String as PropType<EditorTheme>,
default: 'dark'
},
propertyInner: {
type: Array<string>
}
})
const appearanceStore = useAppearanceStoreWithOut()
const emit = defineEmits(['onTextChange'])
const toolTip = computed(() => {
return props.themes === 'dark' ? 'light' : 'dark'
})
const predefineColors = COLOR_PANEL
const fontFamily = CHART_FONT_FAMILY.concat(
appearanceStore.fontList.map(ele => ({
name: ele.name,
value: ele.name
}))
)
const fontLetterSpace = CHART_FONT_LETTER_SPACE
const state = reactive({
titleForm: JSON.parse(JSON.stringify(DEFAULT_TITLE_STYLE))
})
const { chart } = toRefs(props)
const fontSizeList = computed(() => {
const arr = []
for (let i = 10; i <= 40; i = i + 2) {
arr.push({
name: i + '',
value: i
})
}
for (let i = 50; i <= 200; i = i + 10) {
arr.push({
name: i + '',
value: i
})
}
return arr
})
const changeTitleStyle = prop => {
emit('onTextChange', state.titleForm, prop)
}
const init = () => {
const customText = defaultsDeep(
cloneDeep(props.chart?.customStyle?.text),
cloneDeep(DEFAULT_TITLE_STYLE)
)
state.titleForm = cloneDeep(customText)
//第一次颜色可能赋值失败，单独赋值一次
nextTick(() => {
state.titleForm.color = customText.color
})
}
const showEditRemark = ref<boolean>(false)
const tempRemark = ref<string>('')
const openEditRemark = () => {
tempRemark.value = cloneDeep(state.titleForm.remark)
showEditRemark.value = true
}
const closeEditRemark = () => {
showEditRemark.value = false
tempRemark.value = ''
}
const saveEditRemark = () => {
showEditRemark.value = false
state.titleForm.remark = tempRemark.value
changeTitleStyle('remark')
}
onMounted(() => {
init()
})
watch(
() => props.chart?.customStyle?.text,
() => {
init()
},
{ deep: true }
)
</script>
<template>
<div>
<el-form ref="titleForm" :disabled="!state.titleForm.show" :model="state.titleForm" label-position="top"
size="small">
<el-form-item class="form-item" :class="'form-item-' + themes">
<el-checkbox size="small" :effect="themes" v-model="state.titleForm.remarkShow"
@change="changeTitleStyle('remarkShow')">
<!-- {{ t('chart.remark_show') }} -->
是否全部展开
</el-checkbox>
</el-form-item>
<el-form-item class="form-item" :class="'form-item-' + themes">
<el-checkbox size="small" :effect="themes" v-model="state.titleForm.remarkShow"
@change="changeTitleStyle('remarkShow')">
<!-- {{ t('chart.remark_show') }} -->
是否高亮节点
</el-checkbox>
</el-form-item>
<!-- 高亮设置 -->
<div>
<div class="formtitle">高亮样式</div>
<el-form-item label="背景色" class="form-item" :class="'form-item-' + themes" style="padding-right: 4px">
<el-color-picker :effect="themes" v-model="state.titleForm.color" class="color-picker-style"
:predefine="predefineColors" @change="changeTitleStyle('remarkShow')" is-custom />
</el-form-item>
<div class="formtitle">高亮文本</div>
<div style="display: flex">
<el-form-item class="form-item" :class="'form-item-' + themes" style="padding-right: 4px">
<el-color-picker :effect="themes" v-model="state.titleForm.color" class="color-picker-style"
:predefine="predefineColors" @change="changeTitleStyle('color')" is-custom />
</el-form-item>
<el-form-item class="form-item" :class="'form-item-' + themes" style="padding: 0 4px">
<el-tooltip :content="t('chart.font_size')" :effect="toolTip" placement="top">
<el-select style="width: 56px" :effect="themes" v-model="state.titleForm.fontSize"
:placeholder="t('chart.text_fontsize')" size="small"
@change="changeTitleStyle('fontSize')">
<el-option v-for="option in fontSizeList" :key="option.value" :label="option.name"
:value="option.value" />
</el-select>
</el-tooltip>
</el-form-item>
<el-form-item class="form-item" :class="'form-item-' + themes"
style="width: 106px; padding-left: 4px">
<el-select :effect="themes" v-model="state.titleForm.letterSpace"
:placeholder="t('chart.quota_letter_space')" @change="changeTitleStyle('letterSpace')">
<template #prefix>
<el-icon size="16">
<Icon name="icon_letter-spacing_outlined">
<icon_letterSpacing_outlined class="svg-icon" />
</Icon>
</el-icon>
</template>
<el-option v-for="option in fontLetterSpace" :key="option.value" :label="option.name"
:value="option.value" />
</el-select>
</el-form-item>
</div>
<el-space>
<el-form-item class="form-item" :class="'form-item-' + themes">
<el-checkbox :effect="themes" class="icon-checkbox" v-model="state.titleForm.isBolder"
@change="changeTitleStyle('isBolder')">
<el-tooltip :effect="toolTip" placement="top">
<template #content>
{{ t('chart.bolder') }}
</template>
<div class="icon-btn"
:class="{ dark: themes === 'dark', active: state.titleForm.isBolder }">
<el-icon>
<Icon name="icon_bold_outlined">
<icon_bold_outlined class="svg-icon" />
</Icon>
</el-icon>
</div>
</el-tooltip>
</el-checkbox>
</el-form-item>
<el-form-item class="form-item" :class="'form-item-' + themes">
<el-checkbox :effect="themes" class="icon-checkbox" v-model="state.titleForm.isItalic"
@change="changeTitleStyle('isItalic')">
<el-tooltip :effect="toolTip" placement="top">
<template #content>
{{ t('chart.italic') }}
</template>
<div class="icon-btn"
:class="{ dark: themes === 'dark', active: state.titleForm.isItalic }">
<el-icon>
<Icon name="icon_italic_outlined">
<icon_italic_outlined class="svg-icon" />
</Icon>
</el-icon>
</div>
</el-tooltip>
</el-checkbox>
</el-form-item>
</el-space>
</div>
<el-form-item class="form-item" :class="'form-item-' + themes" :effect="themes" :label="t('chart.text')">
<el-select :effect="themes" v-model="state.titleForm.fontFamily" :placeholder="t('chart.font_family')"
@change="changeTitleStyle('fontFamily')">
<el-option v-for="option in fontFamily" :key="option.value" :label="option.name"
:value="option.value" />
</el-select>
</el-form-item>
<!-- 正常节点文本设置 -->
<div style="display: flex">
<el-form-item class="form-item" :class="'form-item-' + themes" style="padding-right: 4px">
<el-color-picker :effect="themes" v-model="state.titleForm.color" class="color-picker-style"
:predefine="predefineColors" @change="changeTitleStyle('color')" is-custom />
</el-form-item>
<el-form-item class="form-item" :class="'form-item-' + themes" style="padding: 0 4px">
<el-tooltip :content="t('chart.font_size')" :effect="toolTip" placement="top">
<el-select style="width: 56px" :effect="themes" v-model="state.titleForm.fontSize"
:placeholder="t('chart.text_fontsize')" size="small" @change="changeTitleStyle('fontSize')">
<el-option v-for="option in fontSizeList" :key="option.value" :label="option.name"
:value="option.value" />
</el-select>
</el-tooltip>
</el-form-item>
<el-form-item class="form-item" :class="'form-item-' + themes" style="width: 106px; padding-left: 4px">
<el-select :effect="themes" v-model="state.titleForm.letterSpace"
:placeholder="t('chart.quota_letter_space')" @change="changeTitleStyle('letterSpace')">
<template #prefix>
<el-icon size="16">
<Icon name="icon_letter-spacing_outlined">
<icon_letterSpacing_outlined class="svg-icon" />
</Icon>
</el-icon>
</template>
<el-option v-for="option in fontLetterSpace" :key="option.value" :label="option.name"
:value="option.value" />
</el-select>
</el-form-item>
</div>
<el-space>
<el-form-item class="form-item" :class="'form-item-' + themes">
<el-checkbox :effect="themes" class="icon-checkbox" v-model="state.titleForm.isBolder"
@change="changeTitleStyle('isBolder')">
<el-tooltip :effect="toolTip" placement="top">
<template #content>
{{ t('chart.bolder') }}
</template>
<div class="icon-btn"
:class="{ dark: themes === 'dark', active: state.titleForm.isBolder }">
<el-icon>
<Icon name="icon_bold_outlined">
<icon_bold_outlined class="svg-icon" />
</Icon>
</el-icon>
</div>
</el-tooltip>
</el-checkbox>
</el-form-item>
<el-form-item class="form-item" :class="'form-item-' + themes">
<el-checkbox :effect="themes" class="icon-checkbox" v-model="state.titleForm.isItalic"
@change="changeTitleStyle('isItalic')">
<el-tooltip :effect="toolTip" placement="top">
<template #content>
{{ t('chart.italic') }}
</template>
<div class="icon-btn"
:class="{ dark: themes === 'dark', active: state.titleForm.isItalic }">
<el-icon>
<Icon name="icon_italic_outlined">
<icon_italic_outlined class="svg-icon" />
</Icon>
</el-icon>
</div>
</el-tooltip>
</el-checkbox>
</el-form-item>
</el-space>
</el-form>
</div>
</template>
<style lang="less" scoped>
:deep(.ed-input .ed-select__prefix--light) {
padding-right: 6px;
}
.formtitle{
color: #A6A6A6;
font-size: 12px;
margin-bottom: 5px;
}
.icon-btn {
font-size: 16px;
line-height: 16px;
width: 24px;
height: 24px;
text-align: center;
border-radius: 4px;
padding-top: 4px;
color: #1f2329;
cursor: pointer;
&.dark {
color: #a6a6a6;
&.active {
color: var(--ed-color-primary);
background-color: var(--ed-color-primary-1a, rgba(51, 112, 255, 0.1));
}
&:hover {
background-color: rgba(255, 255, 255, 0.1);
}
}
&.active {
color: var(--ed-color-primary);
background-color: var(--ed-color-primary-1a, rgba(51, 112, 255, 0.1));
}
&:hover {
background-color: rgba(31, 35, 41, 0.1);
}
}
.is-disabled {
.icon-btn {
color: #8f959e;
cursor: not-allowed;
&:hover {
background-color: inherit;
}
&.active {
background-color: #f5f7fa;
&:hover {
background-color: #f5f7fa;
}
}
&.dark {
color: #5f5f5f;
&.active {
background-color: #373737;
&:hover {
background-color: #373737;
}
}
}
}
}
.icon-checkbox {
:deep(.ed-checkbox__input) {
display: none;
}
:deep(.ed-checkbox__label) {
padding: 0;
}
}
.icon-radio-group {
:deep(.ed-radio) {
margin-right: 8px;
&:last-child {
margin-right: 0;
}
}
:deep(.ed-radio__input) {
display: none;
}
:deep(.ed-radio__label) {
padding: 0;
}
}
.position-divider {
width: 1px;
height: 18px;
margin-bottom: 16px;
background: rgba(31, 35, 41, 0.15);
&.position-divider--dark {
background: rgba(235, 235, 235, 0.15);
}
}
.remark-label {
color: var(--N600, #646a73);
font-family: var(--de-custom_font, 'PingFang');
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 20px;
&.remark-label--dark {
color: var(--N600-Dark, #a6a6a6);
}
}
.dialog-footer .ed-button {
color: #F2F4F5;
background-color: #212121;
border: 1px solid #434343;
}
.dialog-footer .ed-button--primary {
background-color: #0089FF;
border: 1px solid #0089FF;
}
:deep(.ed-textarea__inner) {
background-color: #252424;
box-shadow: none;
border: 1px solid #434343;
color: #fff;
}
:deep(.ed-textarea__inner:hover) {
box-shadow: none;
border: 1px solid #5f5f5f;
}
:deep(.ed-textarea__inner:focus) {
box-shadow: none;
border: 1px solid #0089ff;
}
:deep(.ed-form-item__label) {
color: #D2D2D2 !important;
}
</style>

12
core/core-frontend/src/views/chart/components/js/panel/charts/others/DeTree.ts
View File

@ -3,22 +3,24 @@ import { useI18n } from '@/hooks/web/useI18n'
const { t } = useI18n()
/**
* 富文本图表
* 树图表
*/
export class RichTextChartView extends AbstractChartView {
export class DeTreeChartView extends AbstractChartView {
properties: EditorProperty[] = [
'background-overall-component',
'border-style',
'threshold',
'function-cfg'
'function-cfg',
'linkage',
'basic-attributes-selector'
]
propertyInner: EditorPropertyInner = {
'background-overall-component': ['all'],
'border-style': ['all'],
threshold: ['tableThreshold'],
'threshold': ['tableThreshold'],
'function-cfg': ['emptyDataStrategy']
}
axis: AxisType[] = ['xAxis', 'filter']
axis: AxisType[] = ['xAxis', 'filter','drill']
axisConfig: AxisConfig = {
xAxis: {
name: `${t('chart.drag_block_table_data_column')} / ${t('chart.dimension_or_quota')}`

7
core/core-frontend/src/views/chart/components/views/index.vue
View File

@ -577,13 +577,8 @@ const queryData = (firstLoad = false) => {
}
const calcData = params => {
debugger
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({
@ -596,7 +591,7 @@ const calcData = params => {
]
})
} else {
console.log(chartComponent,'23213')
console.log(chartComponent.value,'23213')
chartComponent?.value?.calcData?.(params, () => {
loading.value = false
})