树组件配置

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

@@ -1,18 +1,24 @@
 <template>
-    <div style="width: 100%;height: 100%;overflow: auto;"> 
+  <div v-loading="loading" style="width: 100%;height: 100%;">
-       <div v-if="state.data.length > 0">
+    <div v-if="state.data.length > 0" style="width: 100%;height: 100%;overflow: auto;">
-        <el-tree :data="state.data"
+      <!-- <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>
-       <div v-else>
+    <div v-else style="width: 100%;height: 100%;text-align: center;">
-          <span>树暂无数据</span>
+      <div style="margin-top: 60px;">暂无数据</div>
     </div>
   </div>
-  </template>
+</template>
 
-  <script setup lang="ts">
+<script setup lang="ts">
-  import {
+import {
   computed,
   getCurrentInstance,
   nextTick,
@@ -23,53 +29,22 @@
   ref,
   toRefs,
   watch
-  } from 'vue'
+} from 'vue'
-  import DeCanvas from '@/views/canvas/DeCanvas.vue'
+// 新增treeRef定义
-  import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
+import TreeView from '@/custom-component/de-tree/tree.vue'
-  import { storeToRefs } from 'pinia'
+import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
-  import { guid } from '@/views/visualized/data/dataset/form/util'
+import { useI18n } from '@/hooks/web/useI18n'
-  import eventBus from '@/utils/eventBus'
+import { getData } from '@/api/chart'
-  import { canvasChangeAdaptor, findComponentIndexById, isDashboard } from '@/utils/canvasUtils'
+const snapshotStore = snapshotStoreWithOut()
-  import DeCustomTab from '@/custom-component/de-tabs/DeCustomTab.vue'
+const { t } = useI18n()
-  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()
 
-  const props = defineProps({
+const props = defineProps({
-    scale: {
-    type: Number,
-    required: false,
-    default: 1
-  },
   element: {
     type: Object
   },
   view: {
     type: Object,
   },
-  editMode: {
-    type: String,
-    require: false,
-    default: 'edit'
-  },
-  active: {
-    type: Boolean,
-    require: false,
-    default: false
-  },
   // 是否禁用
   disabled: {
     type: Boolean,
@@ -90,26 +65,58 @@
     required: false,
     default: 'common'
   }
-  })
+})
-  const state = reactive({
+const state = reactive({
   data:[],
-    defaultProps:{ children: 'children', label: 'name' }
+  defaultProps:{ children: 'children', label: 'orgname' }, // 默认使用orgname作为标签
-  })
+  treeBasicStyle:{
-  const initReady = ref(false)
+    defaultExpandAll: true,
-  const calcData = (view: Chart, callback) => {
+    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 => {
+      console.log(view,res)
       if (res.code && res.code !== 0) {
       } else {
-          console.log(res,6575)
+        const resdata: any = res
-          const resdata:any = res
+        if(resdata.data){
-          const flatData = convertToFlatData(resdata.data.fields,resdata.data.tableRow)
+          const flatData = convertToFlatData(resdata.data.fields, resdata.data.tableRow)
           state.data = convertToTree(flatData)
-          debugger
+          if (resdata?.drillFields.length > 0) {
-          if(resdata?.drillFields.length > 0){
           state.defaultProps.label = resdata.drillFields[0].originName
+        } else {
+          // 默认使用orgname作为标签
+          state.defaultProps.label = 'name'
         }
+          showTree.value = true
+        }else{
+          state.data = []
+          showTree.value = false
+        }
+        
+        
         // originName
         // 钻取维度drillFields
         // state.data = res?.data?.fields ?? []
@@ -126,31 +133,63 @@
       })
       callback?.()
     })
-  // getData(props.view).then(res => {
-  //     console.log(res,378923749234)
-  //   })
   nextTick(() => {
     initReady.value = true
   })
   callback?.()
 }
-function convertToFlatData(fields:any, tableRow:any) {
+const loading = ref(false)
-  // 查找需要的字段
+const renderChart = viewInfo => {
-  const idField = fields.find(field => field.originName === 'id');
+  if(!viewInfo){
-  const parentIdField = fields.find(field => field.originName === 'parentid');
+    return
-  const orgNameField = fields.find(field => field.originName === 'orgname');
+  }
-  const orgTypeField = fields.find(field => field.originName === 'orgtype');
+  showTree.value = false
-  const managerField = fields.find(field => field.originName === 'manager');
+  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 {
+    const result = {};
-      id: row[idField.gisbiName],
+    fields.forEach(field => {
-      parentid: row[parentIdField.gisbiName],
+      result[field.originName] = row[field.gisbiName];
-      orgname: row[orgNameField.gisbiName],
+    });
-      orgtype: row[orgTypeField.gisbiName],
+    return result;
-      manager: row[managerField.gisbiName]
-    };
   });
 }
 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>
+defineExpose({
-  <style lang="less" scoped>
+  calcData,
-  .title-hidde-tab {
+  renderChart,
+  trackMenu
+})
+</script>
+<style lang="less" scoped>
+.title-hidde-tab {
   :deep(.ed-tabs__content) {
     height: 100% !important;
   }
-  }
+}
 
-  .title-show-tab {
+.title-show-tab {
   :deep(.ed-tabs__content) {
     height: calc(100% - 46px) !important;
   }
+
   :deep(.ed-tabs__item) {
     font-family: inherit;
     padding-right: 0 !important;
   }
-  }
+}
 
-  .ed-tabs-dark {
+.ed-tabs-dark {
   :deep(.ed-tabs__new-tab) {
     margin-right: 25px;
     color: #fff;
   }
+
   :deep(.el-dropdown-link) {
     color: #fff;
   }
-  }
+}
-  .ed-tabs-light {
+
+.ed-tabs-light {
   :deep(.ed-tabs__new-tab) {
     margin-right: 25px;
     background-color: #fff;
   }
-  }
+}
-  .el-tab-pane-custom {
+
+.el-tab-pane-custom {
   width: 100%;
-  }
+}
-  .canvas-move-in {
+
+.canvas-move-in {
   border: 2px dotted transparent;
   border-color: blueviolet;
-  }
+}
 
-  .tab-head-left :deep(.ed-tabs__nav-scroll) {
+.tab-head-left :deep(.ed-tabs__nav-scroll) {
   display: flex;
   justify-content: flex-start;
-  }
+}
 
-  .tab-head-right :deep(.ed-tabs__nav-scroll) {
+.tab-head-right :deep(.ed-tabs__nav-scroll) {
   display: flex;
   justify-content: flex-end;
-  }
+}
 
-  .tab-head-center :deep(.ed-tabs__nav-scroll) {
+.tab-head-center :deep(.ed-tabs__nav-scroll) {
   display: flex;
   justify-content: center;
-  }
+}
 
-  .switch-hidden {
+.switch-hidden {
   opacity: 0;
   z-index: -1;
-  }
+}
 
-  .tab-content-custom {
+.tab-content-custom {
   position: absolute;
   width: 100%;
   height: 100%;
-  }
+}
-  .custom-tab-title {
+
+.custom-tab-title {
   .title-inner {
     position: relative;
     background-size: 100% 100% !important;
   }
+
   :deep(.ed-dropdown) {
     vertical-align: middle !important;
   }
-  }
+}
-  </style>
+</style>
-  <style lang="less"">
+<style lang="less"">
-  .ed-tree-node__label{
+.ed-tree-node__label {
   color: #fff;
-  }
+}
-  </style>
+</style>
   

core/core-frontend/src/custom-component/de-tree/tree.vue

@@ -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>
+    

core/core-frontend/src/models/chart/chart-style.d.ts

@@ -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
+  }
+}
 /**
  * 图例设置
  */

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

@@ -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"
+              @onTreeBasicChange="onTreeBasicChange"
-              @onMiscChange="onMiscChange"
             />
           </el-collapse-item>
           <el-collapse-item

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

@@ -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 => {
+const changeTreeStyle = prop => {
-    emit('onTextChange', state.titleForm, prop)
+    emit('onTreeBasicChange', state.treeForm, prop)
 }
 
 const init = () => {
     const customText = defaultsDeep(
-        cloneDeep(props.chart?.customStyle?.text),
+        cloneDeep(props.chart?.customStyle?.treeBasicStyle),
-        cloneDeep(DEFAULT_TITLE_STYLE)
+        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"
+        <el-form ref="treeForm" :model="state.treeForm" label-position="top" size="small">
-            size="small">
+            <el-form-item class="form-item" :class="'form-item-' + themes" :effect="themes"
-            <el-form-item class="form-item" :class="'form-item-' + themes">
+                    :label="'节点文本'">
-                <el-checkbox size="small" :effect="themes" v-model="state.titleForm.remarkShow"
+                    <el-select :effect="themes" v-model="state.treeForm.fontFamily"
-                    @change="changeTitleStyle('remarkShow')">
+                        :placeholder="t('chart.font_family')" @change="changeTreeStyle('fontFamily')">
-                    <!-- {{ 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"
+                    <el-color-picker :effect="themes" v-model="state.treeForm.color" class="color-picker-style"
-                        :predefine="predefineColors" @change="changeTitleStyle('color')" is-custom />
+                        :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"
+                        <el-select style="width: 56px" :effect="themes" v-model="state.treeForm.fontSize"
-                            :placeholder="t('chart.text_fontsize')" size="small" @change="changeTitleStyle('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"
+                    <el-select :effect="themes" v-model="state.treeForm.letterSpace"
-                        :placeholder="t('chart.quota_letter_space')" @change="changeTitleStyle('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"
+                    <el-checkbox :effect="themes" class="icon-checkbox" v-model="state.treeForm.isBolder"
-                        @change="changeTitleStyle('isBolder')">
+                        @change="changeTreeStyle('isBolder')">
                         <el-tooltip :effect="toolTip" placement="top">
                             <template #content>
                                 {{ t('chart.bolder') }}
                             </template>
-                            <div class="icon-btn"
+                            <div class="icon-btn" :class="{ dark: themes === 'dark', active: state.treeForm.isBolder }">
-                                :class="{ dark: themes === 'dark', active: state.titleForm.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"
+                    <el-checkbox :effect="themes" class="icon-checkbox" v-model="state.treeForm.isItalic"
-                        @change="changeTitleStyle('isItalic')">
+                        @change="changeTreeStyle('isItalic')">
                         <el-tooltip :effect="toolTip" placement="top">
                             <template #content>
                                 {{ t('chart.italic') }}
                             </template>
-                            <div class="icon-btn"
+                            <div class="icon-btn" :class="{ dark: themes === 'dark', active: state.treeForm.isItalic }">
-                                :class="{ dark: themes === 'dark', active: state.titleForm.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;

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

@@ -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-scrollbar class="has-footer drag_main_area attr-style theme-border-class">
-                      <!-- <el-row
+                      <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"

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

@@ -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,

core/core-frontend/src/views/chart/components/views/index.vue

@@ -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