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-31 18:30:32 +08:00
parent 9f530ae3b7
commit ab46a5dbc5
8 changed files with 536 additions and 358 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,75 +1,50 @@
<template>
<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>树暂无数据</span>
</div>
<div v-loading="loading" style="width: 100%;height: 100%;">
<div v-if="state.data.length > 0" style="width: 100%;height: 100%;overflow: auto;">
<!-- <el-tree
ref="treeRef"
:data="state.data"
:props="state.defaultProps"
:default-expand-all="state.treeBasicStyle.defaultExpandAll"
/> -->
<TreeView v-if="showTree" :data="state.data"
:defaultProps="state.defaultProps"
:treeBasicStyle ="state.treeBasicStyle" />
</div>
</template>
<div v-else style="width: 100%;height: 100%;text-align: center;">
<div style="margin-top: 60px;">暂无数据</div>
</div>
</div>
</template>
<script setup lang="ts">
import {
computed,
getCurrentInstance,
nextTick,
onBeforeMount,
onBeforeUnmount,
onMounted,
reactive,
ref,
toRefs,
watch
} from 'vue'
import DeCanvas from '@/views/canvas/DeCanvas.vue'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { storeToRefs } from 'pinia'
import { guid } from '@/views/visualized/data/dataset/form/util'
import eventBus from '@/utils/eventBus'
import { canvasChangeAdaptor, findComponentIndexById, isDashboard } from '@/utils/canvasUtils'
import DeCustomTab from '@/custom-component/de-tabs/DeCustomTab.vue'
import DePreview from '@/components/data-visualization/canvas/DePreview.vue'
import { getPanelAllLinkageInfo } from '@/api/visualization/linkage'
import { dataVTabComponentAdd, groupSizeStyleAdaptor } from '@/utils/style'
import { deepCopyTabItemHelper } from '@/store/modules/data-visualization/copy'
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
import { useI18n } from '@/hooks/web/useI18n'
import { imgUrlTrans } from '@/utils/imgUtils'
import Board from '@/components/de-board/Board.vue'
import ChartCarouselTooltip from '@/views/chart/components/js/g2plot_tooltip_carousel'
import { getData } from '@/api/chart'
const dvMainStore = dvMainStoreWithOut()
const snapshotStore = snapshotStoreWithOut()
const { tabMoveInActiveId, bashMatrixInfo, editMode, mobileInPc } = storeToRefs(dvMainStore)
const tabComponentRef = ref(null)
let carouselTimer = null
const { t } = useI18n()
<script setup lang="ts">
import {
computed,
getCurrentInstance,
nextTick,
onBeforeMount,
onBeforeUnmount,
onMounted,
reactive,
ref,
toRefs,
watch
} from 'vue'
// 新增treeRef定义
import TreeView from '@/custom-component/de-tree/tree.vue'
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
import { useI18n } from '@/hooks/web/useI18n'
import { getData } from '@/api/chart'
const snapshotStore = snapshotStoreWithOut()
const { t } = useI18n()
const props = defineProps({
scale: {
type: Number,
required: false,
default: 1
},
const props = defineProps({
element: {
type: Object
},
view: {
type: Object,
},
editMode: {
type: String,
require: false,
default: 'edit'
},
active: {
type: Boolean,
require: false,
default: false
},
// 是否禁用
disabled: {
type: Boolean,
@ -90,67 +65,131 @@
required: false,
default: 'common'
}
})
const state = reactive({
data:[],
defaultProps:{ children: 'children', label: 'name' }
})
const initReady = ref(false)
const calcData = (view: Chart, callback) => {
})
const state = reactive({
data:[],
defaultProps:{ children: 'children', label: 'orgname' }, // 默认使用orgname作为标签
treeBasicStyle:{
defaultExpandAll: true,
highlightCurrent: false,
fontSize: 16,
isItalic: false,
isBolder: false,
fontFamily: '',
color: '#ffffff',
letterSpace:0,
highlightAttr:{
backgroundColor: '#ffffff',
color: '#ffffff',
fontSize: 16,
isItalic: false,
isBolder: false,
letterSpace:0
}
},
view:{}
})
const showTree = ref(false)
const initReady = ref(false)
const calcData = (view: Chart, callback) => {
state.treeBasicStyle = view.customStyle.treeBasicStyle
showTree.value = false
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)
.then(res => {
console.log(view,res)
if (res.code && res.code !== 0) {
} else {
const resdata: any = res
if(resdata.data){
const flatData = convertToFlatData(resdata.data.fields, resdata.data.tableRow)
state.data = convertToTree(flatData)
debugger
if(resdata?.drillFields.length > 0){
state.defaultProps.label = resdata.drillFields[0].originName
}
// originName
// 钻取维度drillFields
// state.data = res?.data?.fields ?? []
initReady.value = true
if (resdata?.drillFields.length > 0) {
state.defaultProps.label = resdata.drillFields[0].originName
} else {
// 默认使用orgname作为标签
state.defaultProps.label = 'name'
}
callback?.()
nextTick(() => {
initReady.value = true
})
showTree.value = true
}else{
state.data = []
showTree.value = false
}
// originName
// 钻取维度drillFields
// state.data = res?.data?.fields ?? []
initReady.value = true
}
callback?.()
nextTick(() => {
initReady.value = true
})
.catch(() => {
nextTick(() => {
initReady.value = true
})
callback?.()
})
.catch(() => {
nextTick(() => {
initReady.value = true
})
// getData(props.view).then(res => {
// console.log(res,378923749234)
// })
callback?.()
})
nextTick(() => {
initReady.value = true
})
callback?.()
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');
const loading = ref(false)
const renderChart = viewInfo => {
if(!viewInfo){
return
}
showTree.value = false
loading.value = true
state.treeBasicStyle = viewInfo.customStyle.treeBasicStyle
initTree(viewInfo)
}
const trackMenu = computed(() => {
})
function initTree(view:any){
const v = JSON.parse(JSON.stringify(view))
getData(v)
.then(res => {
if (res.code && res.code !== 0) {
loading.value = false
} else {
const resdata: any = res
const flatData = convertToFlatData(resdata.data.fields, resdata.data.tableRow)
state.data = convertToTree(flatData)
if (resdata?.drillFields.length > 0) {
state.defaultProps.label = resdata.drillFields[0].originName
} else {
// 默认使用orgname作为标签
state.defaultProps.label = 'name'
}
snapshotStore.recordSnapshotCache('renderChart', view.id)
loading.value = false
showTree.value = true
}
})
.catch(() => {
loading.value = false
})
}
function convertToFlatData(fields: any, tableRow: any) {
// 创建一个映射，将originName映射到字段对象
const fieldMap = {};
fields.forEach(field => {
fieldMap[field.originName] = field;
});
// 转换数据
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]
};
const result = {};
fields.forEach(field => {
result[field.originName] = row[field.gisbiName];
});
return result;
});
}
function convertToTree(data, rootId = '0') {
@ -158,7 +197,6 @@ function convertToTree(data, rootId = '0') {
const nodeMap = {};
// 存储根节点
const roots = [];
// 初始化所有节点，添加children属性
data.forEach(item => {
nodeMap[item.id] = { ...item, children: [] };
@ -185,90 +223,99 @@ function convertToTree(data, rootId = '0') {
return roots;
}
onMounted(() => {
console.log(props.view)
})
defineExpose({
calcData
})
</script>
<style lang="less" scoped>
.title-hidde-tab {
:deep(.ed-tabs__content) {
height: 100% !important;
}
defineExpose({
calcData,
renderChart,
trackMenu
})
</script>
<style lang="less" scoped>
.title-hidde-tab {
:deep(.ed-tabs__content) {
height: 100% !important;
}
}
.title-show-tab {
:deep(.ed-tabs__content) {
height: calc(100% - 46px) !important;
}
.title-show-tab {
:deep(.ed-tabs__content) {
height: calc(100% - 46px) !important;
}
:deep(.ed-tabs__item) {
font-family: inherit;
padding-right: 0 !important;
}
:deep(.ed-tabs__item) {
font-family: inherit;
padding-right: 0 !important;
}
}
.ed-tabs-dark {
:deep(.ed-tabs__new-tab) {
margin-right: 25px;
color: #fff;
}
:deep(.el-dropdown-link) {
color: #fff;
}
}
.ed-tabs-light {
:deep(.ed-tabs__new-tab) {
margin-right: 25px;
background-color: #fff;
}
}
.el-tab-pane-custom {
width: 100%;
}
.canvas-move-in {
border: 2px dotted transparent;
border-color: blueviolet;
}
.tab-head-left :deep(.ed-tabs__nav-scroll) {
display: flex;
justify-content: flex-start;
}
.tab-head-right :deep(.ed-tabs__nav-scroll) {
display: flex;
justify-content: flex-end;
}
.tab-head-center :deep(.ed-tabs__nav-scroll) {
display: flex;
justify-content: center;
}
.switch-hidden {
opacity: 0;
z-index: -1;
}
.tab-content-custom {
position: absolute;
width: 100%;
height: 100%;
}
.custom-tab-title {
.title-inner {
position: relative;
background-size: 100% 100% !important;
}
:deep(.ed-dropdown) {
vertical-align: middle !important;
}
}
</style>
<style lang="less"">
.ed-tree-node__label{
.ed-tabs-dark {
:deep(.ed-tabs__new-tab) {
margin-right: 25px;
color: #fff;
}
</style>
:deep(.el-dropdown-link) {
color: #fff;
}
}
.ed-tabs-light {
:deep(.ed-tabs__new-tab) {
margin-right: 25px;
background-color: #fff;
}
}
.el-tab-pane-custom {
width: 100%;
}
.canvas-move-in {
border: 2px dotted transparent;
border-color: blueviolet;
}
.tab-head-left :deep(.ed-tabs__nav-scroll) {
display: flex;
justify-content: flex-start;
}
.tab-head-right :deep(.ed-tabs__nav-scroll) {
display: flex;
justify-content: flex-end;
}
.tab-head-center :deep(.ed-tabs__nav-scroll) {
display: flex;
justify-content: center;
}
.switch-hidden {
opacity: 0;
z-index: -1;
}
.tab-content-custom {
position: absolute;
width: 100%;
height: 100%;
}
.custom-tab-title {
.title-inner {
position: relative;
background-size: 100% 100% !important;
}
:deep(.ed-dropdown) {
vertical-align: middle !important;
}
}
</style>
<style lang="less"">
.ed-tree-node__label {
color: #fff;
}
</style>

79
core/core-frontend/src/custom-component/de-tree/tree.vue Normal file
View File

@ -0,0 +1,79 @@
<template>
<div class="customtree" v-loading="loading" style="width: 100%;height: 100%;overflow: auto;">
<el-tree
ref="treeRef"
:data="treeData"
:props="props.defaultProps"
:default-expand-all="props.treeBasicStyle.defaultExpandAll"
:highlight-current="props.treeBasicStyle.highlightCurrent"
:expand-on-click-node = props.treeBasicStyle.expandOnClickNode
/>
</div>
</template>
<script setup lang="ts">
import {
computed,
onMounted,
ref,
} from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
const { t } = useI18n()
const props = defineProps({
data: {
type: Object,
default:[]
},
defaultProps: {
type: Object,
},
treeBasicStyle: {
type: Object,
},
})
const loading = ref(false)
const treeData:any = ref([])
const defaultProps:any = ref({
children: 'children',
label: 'name'
})
const treeAttr:any = ref({})
onMounted(() => {
treeData.value = props.data
})
const labelColor = computed(() => props.treeBasicStyle?.color || '#ffffff')
const labelFontSize = computed(() => props.treeBasicStyle?.fontSize || '14px')
const labelFontWeight = computed(() => props.treeBasicStyle?.isBolder ? 'bold' : 'normal' )
const labelFontStyle = computed(() => props.treeBasicStyle?.isItalic ? 'italic' : 'normal' )
const labelFontFamily = computed(() => props.treeBasicStyle?.fontFamily == ''? 'props.treeBasicStyle?.fontFamily' : props.treeBasicStyle?.fontFamily )
const labelLetterSpace = computed(() => props.treeBasicStyle?.letterSpace + 'px')
const highlightBackground = computed(() => props.treeBasicStyle?.highlightAttr.backgroundColor)
const highlightColor = computed(() => props.treeBasicStyle?.highlightAttr.color)
const highlightFontSize = computed(() => props.treeBasicStyle?.highlightAttr.fontSize || '14px')
const highlightFontWeight = computed(() => props.treeBasicStyle?.highlightAttr.isBolder ? 'bold' : 'normal' )
const highlightFontStyle = computed(() => props.treeBasicStyle?.highlightAttr.isItalic ? 'italic' : 'normal' )
const highlightLetterSpace = computed(() => props.treeBasicStyle?.highlightAttr.letterSpace + 'px')
</script>
<style lang="less" scoped>
.customtree :deep(.ed-tree-node__label){
color: v-bind(labelColor);
font-size: v-bind(labelFontSize);
font-weight: v-bind(labelFontWeight);
font-style: v-bind(labelFontStyle);
font-family: v-bind(labelFontFamily);
letter-spacing: v-bind(labelLetterSpace);
}
.customtree:deep(.ed-tree--highlight-current .ed-tree-node.is-current > .ed-tree-node__content){
background-color: v-bind(highlightBackground);
}
.customtree:deep(.ed-tree--highlight-current .ed-tree-node.is-current >.ed-tree-node__content .ed-tree-node__label){
color: v-bind(highlightColor);
font-size: v-bind(highlightFontSize);
font-weight: v-bind(highlightFontWeight);
font-style: v-bind(highlightFontStyle);
font-family: v-bind(labelFontFamily);
letter-spacing: v-bind(highlightLetterSpace);
}
</style>

34
core/core-frontend/src/models/chart/chart-style.d.ts vendored
View File

@ -2,7 +2,8 @@
* 图表样式设置
*/
declare interface ChartStyle {
graphicText: any
treeBasicStyle:ChartTreeBasicStyle
graphicText: ChartGraphicTextStyle
/**
* 标题样式设置
*/
@ -130,6 +131,37 @@ declare interface ChartGraphicTextStyle {
}
]
}
/**
* 树基础属性配置
*/
declare interface ChartTreeBasicStyle {
/**
* 是否节点全部展开
*/
defaultExpandAll: boolean
/**
* 是否高亮节点
*/
highlightCurrent: boolean
expandOnClickNode:boolean
fontSize: number
isItalic: boolean
isBolder: boolean
fontFamily: string
color: string
letterSpace: number
/**
* 高亮节点配置
*/
highlightAttr:{
backgroundColor: string
color: string
fontSize: number
isItalic: boolean
isBolder: boolean
letterSpace: number
}
}
/**
* 图例设置
*/

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

@ -123,6 +123,7 @@ const emit = defineEmits([
'onChangeYAxisExtForm',
'onTextChange',
'onGraphicTextChange',
'onTreeBasicChange',
'onLegendChange',
'onBasicStyleChange',
'onBackgroundChange',
@ -179,6 +180,10 @@ const onChangeYAxisExtForm = (val, prop) => {
const onTextChange = (val, prop) => {
state.initReady && emit('onTextChange', val, prop)
}
const onTreeBasicChange = (val, prop) => {
console.log(val,prop,'树属性')
state.initReady && emit('onTreeBasicChange', val, prop)
}
const onGraphicTextChange = (val, prop) => {
state.initReady && emit('onGraphicTextChange', val, prop)
}
@ -286,8 +291,7 @@ watch(
:themes="themes"
:chart="chart"
:allGraphcs = "props.allGraphcs"
@onBasicStyleChange="onBasicStyleChange"
@onMiscChange="onMiscChange"
@onTreeBasicChange="onTreeBasicChange"
/>
</el-collapse-item>
<el-collapse-item

289
core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicAttributesSelector.vue
View File

@ -13,7 +13,7 @@ import {
COLOR_PANEL,
CHART_FONT_FAMILY,
CHART_FONT_LETTER_SPACE,
DEFAULT_TITLE_STYLE
DEFAULT_TREE_BASIC_STYLE
} from '@/views/chart/components/editor/util/chart'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { storeToRefs } from 'pinia'
@ -39,7 +39,7 @@ const props = defineProps({
}
})
const appearanceStore = useAppearanceStoreWithOut()
const emit = defineEmits(['onTextChange'])
const emit = defineEmits(['onTreeBasicChange'])
const toolTip = computed(() => {
return props.themes === 'dark' ? 'light' : 'dark'
})
@ -53,7 +53,7 @@ const fontFamily = CHART_FONT_FAMILY.concat(
const fontLetterSpace = CHART_FONT_LETTER_SPACE
const state = reactive({
titleForm: JSON.parse(JSON.stringify(DEFAULT_TITLE_STYLE))
treeForm: JSON.parse(JSON.stringify(DEFAULT_TREE_BASIC_STYLE))
})
const { chart } = toRefs(props)
@ -75,49 +75,31 @@ const fontSizeList = computed(() => {
return arr
})
const changeTitleStyle = prop => {
emit('onTextChange', state.titleForm, prop)
const changeTreeStyle = prop => {
emit('onTreeBasicChange', state.treeForm, prop)
}
const init = () => {
const customText = defaultsDeep(
cloneDeep(props.chart?.customStyle?.text),
cloneDeep(DEFAULT_TITLE_STYLE)
cloneDeep(props.chart?.customStyle?.treeBasicStyle),
cloneDeep(DEFAULT_TREE_BASIC_STYLE)
)
state.titleForm = cloneDeep(customText)
state.treeForm = cloneDeep(customText)
//第一次颜色可能赋值失败，单独赋值一次
nextTick(() => {
state.titleForm.color = customText.color
state.treeForm.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,
() => props.chart?.customStyle?.treeBasicStyle,
() => {
init()
},
@ -127,119 +109,24 @@ watch(
<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 ref="treeForm" :model="state.treeForm" label-position="top" size="small">
<el-form-item class="form-item" :class="'form-item-' + themes" :effect="themes"
:label="'节点文本'">
<el-select :effect="themes" v-model="state.treeForm.fontFamily"
:placeholder="t('chart.font_family')" @change="changeTreeStyle('fontFamily')">
<el-option v-for="option in fontFamily" :key="option.value" :label="option.name"
:value="option.value" />
</el-select>
</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-color-picker :effect="themes" v-model="state.treeForm.color" class="color-picker-style"
:predefine="predefineColors" @change="changeTreeStyle('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-select style="width: 56px" :effect="themes" v-model="state.treeForm.fontSize"
:placeholder="t('chart.text_fontsize')" size="small" @change="changeTreeStyle('fontSize')">
<el-option v-for="option in fontSizeList" :key="option.value" :label="option.name"
:value="option.value" />
</el-select>
@ -247,8 +134,8 @@ watch(
</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')">
<el-select :effect="themes" v-model="state.treeForm.letterSpace"
:placeholder="t('chart.quota_letter_space')" @change="changeTreeStyle('letterSpace')">
<template #prefix>
<el-icon size="16">
<Icon name="icon_letter-spacing_outlined">
@ -264,14 +151,13 @@ watch(
<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-checkbox :effect="themes" class="icon-checkbox" v-model="state.treeForm.isBolder"
@change="changeTreeStyle('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 }">
<div class="icon-btn" :class="{ dark: themes === 'dark', active: state.treeForm.isBolder }">
<el-icon>
<Icon name="icon_bold_outlined">
<icon_bold_outlined class="svg-icon" />
@ -283,14 +169,13 @@ watch(
</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-checkbox :effect="themes" class="icon-checkbox" v-model="state.treeForm.isItalic"
@change="changeTreeStyle('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 }">
<div class="icon-btn" :class="{ dark: themes === 'dark', active: state.treeForm.isItalic }">
<el-icon>
<Icon name="icon_italic_outlined">
<icon_italic_outlined class="svg-icon" />
@ -301,6 +186,116 @@ watch(
</el-checkbox>
</el-form-item>
</el-space>
<el-form-item class="form-item" :class="'form-item-' + themes">
<el-checkbox size="small" :effect="themes" v-model="state.treeForm.defaultExpandAll"
@change="changeTreeStyle('defaultExpandAll')">
是否全部展开
</el-checkbox>
</el-form-item>
<el-form-item class="form-item" :class="'form-item-' + themes">
<el-checkbox size="small" :effect="themes" v-model="state.treeForm.expandOnClickNode"
@change="changeTreeStyle('expandOnClickNode')">
是否点击节点展开或收起
</el-checkbox>
</el-form-item>
<el-form-item class="form-item" :class="'form-item-' + themes">
<el-checkbox size="small" :effect="themes" v-model="state.treeForm.highlightCurrent"
@change="changeTreeStyle('highlightCurrent')">
是否高亮节点
</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" :disabled="!state.treeForm.highlightCurrent"
v-model="state.treeForm.highlightAttr.backgroundColor" class="color-picker-style"
:predefine="predefineColors" @change="changeTreeStyle('highlightAttr')" 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.treeForm.highlightAttr.color"
class="color-picker-style" :disabled="!state.treeForm.highlightCurrent"
:predefine="predefineColors" @change="changeTreeStyle('highlightAttr')" 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.treeForm.highlightAttr.fontSize" :placeholder="t('chart.text_fontsize')"
size="small" @change="changeTreeStyle('highlightAttr')"
:disabled="!state.treeForm.highlightCurrent">
<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.treeForm.highlightAttr.letterSpace"
:disabled="!state.treeForm.highlightCurrent" :placeholder="t('chart.quota_letter_space')"
@change="changeTreeStyle('highlightAttr')">
<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" :disabled="!state.treeForm.highlightCurrent"
v-model="state.treeForm.highlightAttr.isBolder" @change="changeTreeStyle('highlightAttr')">
<el-tooltip :effect="toolTip" placement="top">
<template #content>
{{ t('chart.bolder') }}
</template>
<div class="icon-btn"
:class="{ dark: themes === 'dark', active: state.treeForm.highlightAttr.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.treeForm.highlightAttr.isItalic" :disabled="!state.treeForm.highlightCurrent"
@change="changeTreeStyle('highlightAttr')">
<el-tooltip :effect="toolTip" placement="top">
<template #content>
{{ t('chart.italic') }}
</template>
<div class="icon-btn"
:class="{ dark: themes === 'dark', active: state.treeForm.highlightAttr.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.treeForm.highlightAttr.fontFamily" :placeholder="t('chart.font_family')"
@change="changeTreeStyle('fontFamily')">
<el-option v-for="option in fontFamily" :key="option.value" :label="option.name"
:value="option.value" />
</el-select>
</el-form-item> -->
<!-- 正常节点文本设置 -->
</el-form>
</div>
@ -310,11 +305,13 @@ watch(
:deep(.ed-input .ed-select__prefix--light) {
padding-right: 6px;
}
.formtitle{
.formtitle {
color: #A6A6A6;
font-size: 12px;
margin-bottom: 5px;
}
.icon-btn {
font-size: 16px;
line-height: 16px;

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

@ -370,7 +370,6 @@ watch(
} else {
mapSelect.value =JSON.parse(JSON.stringify(mapServer.value.find(server => server.status === true)));
}
// debugger
if (showAxis('area')) {
if (!state.worldTree?.length) {
getWorldTree().then(async res => {
@ -954,7 +953,6 @@ const onAxisChange = (e, axis: AxisType) => {
}
const calcData = (view, resetDrill = false, updateQuery = '') => {
debugger
if (
view.refreshTime === '' ||
parseFloat(view.refreshTime).toString() === 'NaN' ||
@ -1271,6 +1269,10 @@ const onGraphicTextChange = val => {
view.value.customStyle.graphicText = val
renderChart(view.value)
}
const onTreeBasicChange = val => {
view.value.customStyle.treeBasicStyle = val
renderChart(view.value)
}
const onLegendChange = val => {
view.value.customStyle.legend = val
renderChart(view.value)
@ -2152,8 +2154,8 @@ const tabchange = (val: any) => {
<el-tabs v-else v-model="tabActive" class="tab-header" :class="{ dark: themes === 'dark' }" @tab-click="tabchange">
<el-tab-pane name="data" :label="t('chart.chart_data')" class="padding-tab">
<el-container direction="vertical">
<el-scrollbar class="has-footer drag_main_area attr-style theme-border-class" style="padding-top:10px;" >
<!-- <el-row
<el-scrollbar class="has-footer drag_main_area attr-style theme-border-class">
<el-row
v-if="!['rich-text', 'DeTree' ,'Picture', 'picture-group'].includes(view.type)"
class="drag-data padding-lr"
>
@ -2183,7 +2185,7 @@ const tabchange = (val: any) => {
</template>
</el-popover>
</el-row> -->
</el-row>
<template v-if="view.plugin?.isPlugin">
<plugin-component :jsname="view.plugin.staticMap['editor-data']" :view="view"
@ -2795,7 +2797,7 @@ const tabchange = (val: any) => {
</el-footer>
</el-container>
</el-tab-pane>
<el-tab-pane v-if="view.type.includes('map') && view.type != 'map' && view.type != 'bubble-map' " name="base" :label="t('chart.chart_base')"
<el-tab-pane v-if="view.type.includes('map')" name="base" :label="t('chart.chart_base')"
class="padding-tab">
<el-row class="drag-data padding-lr" style="width: 100%;">
<span class="data-area-label">{{ t('chart.switch_base') }}</span>
@ -2845,7 +2847,7 @@ const tabchange = (val: any) => {
@onChangeXAxisForm="onChangeXAxisForm" @onChangeYAxisForm="onChangeYAxisForm"
@onChangeYAxisExtForm="onChangeYAxisExtForm" @onTextChange="onTextChange"
@onIndicatorChange="onIndicatorChange" @onIndicatorNameChange="onIndicatorNameChange"
@onLegendChange="onLegendChange" @onGraphicTextChange="onGraphicTextChange" @onBackgroundChange="onBackgroundChange"
@onLegendChange="onLegendChange" @onGraphicTextChange="onGraphicTextChange" @onTreeBasicChange="onTreeBasicChange" @onBackgroundChange="onBackgroundChange"
@onStyleAttrChange="onStyleAttrChange" @onBasicStyleChange="onBasicStyleChange"
@onTableHeaderChange="onTableHeaderChange" @onTableCellChange="onTableCellChange"
@onTableTotalChange="onTableTotalChange" @onChangeMiscStyleForm="onChangeMiscStyleForm"

20
core/core-frontend/src/views/chart/components/editor/util/chart.ts
View File

@ -547,6 +547,25 @@ export const DEFAULT_GRAPHIC_TEXT_STYLE: ChartGraphicTextStyle = {
}
]
}
export const DEFAULT_TREE_BASIC_STYLE: ChartTreeBasicStyle = {
defaultExpandAll: true,
highlightCurrent: false,
expandOnClickNode:false,
fontSize: 16,
isItalic: false,
isBolder: false,
fontFamily: '',
color: '#ffffff',
letterSpace:0,
highlightAttr:{
backgroundColor: '#4F4E4E',
color: '#ffffff',
fontSize: 16,
isItalic: false,
isBolder: false,
letterSpace:0
}
}
export const DEFAULT_INDICATOR_STYLE: ChartIndicatorStyle = {
show: true,
fontSize: 20,
@ -1822,6 +1841,7 @@ export const BASE_VIEW_CONFIG = {
}
},
customStyle: {
treeBasicStyle:DEFAULT_TREE_BASIC_STYLE,
graphicText:DEFAULT_GRAPHIC_TEXT_STYLE,
text: DEFAULT_TITLE_STYLE,
legend: DEFAULT_LEGEND_STYLE,

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

@ -154,7 +154,7 @@ const dynamicAreaId = ref('')
const { view, showPosition, element, active, searchCount, scale, suffixId } = toRefs(props)
const titleShow = computed(() => {
return (
!['rich-text','DeTree', 'picture-group'].includes(element.value.innerType) &&
!['rich-text', 'picture-group'].includes(element.value.innerType) &&
state.title_show &&
showPosition.value !== 'viewDialog'
)
@ -1208,14 +1208,11 @@ const clearG2Tooltip = () => {
<de-tree-view
v-else-if="showChartView(ChartLibraryType.DETREE)"
:view="view"
:scale="scale"
:themes="canvasStyleData.dashboard.themeColor"
ref="chartComponent"
:element="element"
:disabled="!['canvas', 'canvasDataV'].includes(showPosition) || disabled"
:active="active"
:show-position="showPosition"
:edit-mode="editMode"
:suffixId="suffixId"
/>
<de-indicator