树组件

core/core-frontend/src/custom-component/component-group/TreeGroup.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import dvTabShow from '@/assets/svg/dv-tab-show.svg'
+import dvRichText from '@/assets/svg/dv-richText.svg'
 import { toRefs } from 'vue'
 import eventBus from '@/utils/eventBus'
 import DragComponent from '@/custom-component/component-group/DragComponent.vue'
@@ -12,7 +12,7 @@ const props = defineProps({
   },
   dvModel: {
     type: String,
-    default: 'dv'
+    default: 'dataV'
   },
   element: {
     type: Object,
@@ -29,8 +29,8 @@ const props = defineProps({
 })
 
 const { dvModel } = toRefs(props)
-const newComponent = () => {
+const newComponent = (componentName, innerType) => {
-  eventBus.emit('handleNew', { componentName: 'DeTree', innerType: 'DeTree' })
+  eventBus.emit('handleNew', { componentName: componentName, innerType: innerType })
 }
 
 const handleDragStart = e => {
@@ -43,17 +43,13 @@ const handleDragEnd = e => {
 </script>
 
 <template>
-  <div
+  <div class="group" @dragstart="handleDragStart" @dragend="handleDragEnd">
-    class="group"
-    @dragstart="handleDragStart"
-    @dragend="handleDragEnd"
-    v-on:click="newComponent"
-  >
     <drag-component
       :themes="themes"
-      :icon="dvTabShow"
+      :icon="dvRichText"
-      label="树"
+      :label="'树'"
-      drag-info="DeTree&DeTree"
+      drag-info="UserView&DeTree"
+      v-on:click="newComponent('UserView', 'DeTree')"
     ></drag-component>
   </div>
 </template>

core/core-frontend/src/custom-component/component-list.ts

@@ -579,42 +579,6 @@ const list = [
       textDecoration: 'none'
     }
   },
-  {
-    component: 'DeTree',
-    name: t('树'),
-    label: t('树'),
-    propValue: [
-      {
-        name: 'tab',
-        title: t('visualization.new_tab'),
-        componentData: [],
-        closable: true
-      }
-    ],
-    icon: 'dv-tab',
-    innerType: '',
-    editing: false,
-    canvasActive: false,
-    x: 1,
-    y: 1,
-    sizeX: 36,
-    sizeY: 14,
-    style: {
-      width: 600,
-      height: 300,
-      fontSize: 16,
-      activeFontSize: 18,
-      headHorizontalPosition: 'left',
-      headFontColor: '#000000',
-      headFontActiveColor: '#000000',
-      titleHide: false,
-      showTabTitle: true,
-      // #13540
-      fontWeight: 'normal',
-      fontStyle: 'normal',
-      textDecoration: 'none'
-    }
-  },
   {
     component: 'ScrollText',
     name: t('visualization.scroll_text'),
@@ -667,10 +631,6 @@ export function findNewComponentFromList(
         newComponent.propValue[0].name = guid()
         newComponent['titleBackground'] = deepCopy(COMMON_TAB_TITLE_BACKGROUND)
       }
-      if (comp.component === 'DeTree') {
-        newComponent.propValue[0].name = guid()
-        newComponent['titleBackground'] = deepCopy(COMMON_TAB_TITLE_BACKGROUND)
-      }
     }
   })
 

core/core-frontend/src/utils/canvasUtils.ts

@@ -66,6 +66,7 @@ export function findDragComponent(componentInfo) {
 }
 
 export function findNewComponent(componentName, innerType, staticMap?) {
+  debugger
   let newComponent
   componentList.forEach(comp => {
     if (comp.component === componentName || comp.component === innerType) {
@@ -74,16 +75,16 @@ export function findNewComponent(componentName, innerType, staticMap?) {
         newComponent.propValue[0].name = guid()
         newComponent['titleBackground'] = deepCopy(COMMON_TAB_TITLE_BACKGROUND)
       }
-      if (newComponent.component === 'DeTree') {
-        newComponent.propValue[0].name = guid()
-        newComponent['titleBackground'] = deepCopy(COMMON_TAB_TITLE_BACKGROUND)
-      }
       newComponent.innerType = innerType
       if (newComponent.innerType === 'richText') {
         newComponent.propValue = {
           textValue: ''
         }
       }
+      if (newComponent.innerType === 'DeTree') {
+        newComponent.propValue = []
+        // newComponent['titleBackground'] = deepCopy(COMMON_TAB_TITLE_BACKGROUND)
+      }
       if (dvMainStore.curOriginThemes === 'light') {
         newComponent['commonBackground'] = cloneDeep(COMMON_COMPONENT_BACKGROUND_LIGHT)
       } else {

core/core-frontend/src/utils/components.ts

@@ -13,8 +13,6 @@ import CanvasIcon from '@/custom-component/canvas-icon/Component.vue'
 import CanvasIconAttr from '@/custom-component/canvas-icon/Attr.vue'
 import DeTabs from '@/custom-component/de-tabs/Component.vue'
 import DeTabsAttr from '@/custom-component/de-tabs/Attr.vue'
-import DeTree from '@/custom-component/de-tree/Component.vue'
-import DeTreeAttr from '@/custom-component/de-tree/Attr.vue'
 import DeGraphical from '@/custom-component/de-graphical/Component.vue'
 import DeGraphicalAttr from '@/custom-component/de-graphical/Attr.vue'
 import CircleShape from '@/custom-component/circle-shape/Component.vue'
@@ -55,8 +53,6 @@ export const componentsMap = {
   CanvasIconAttr: CanvasIconAttr,
   DeTabs: DeTabs,
   DeTabsAttr: DeTabsAttr,
-  DeTree: DeTree,
-  DeTreeAttr: DeTreeAttr,
   DeGraphical: DeGraphical,
   DeGraphicalAttr: DeGraphicalAttr,
   CircleShape: CircleShape,

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

@@ -2110,7 +2110,7 @@ const deleteChartFieldItem = id => {
                   <el-container direction="vertical">
                     <el-scrollbar class="has-footer drag_main_area attr-style theme-border-class">
                       <el-row
-                        v-if="!['rich-text', 'Picture', 'picture-group'].includes(view.type)"
+                        v-if="!['rich-text', 'DeTree' ,'Picture', 'picture-group'].includes(view.type)"
                         class="drag-data padding-lr"
                       >
                         <span class="data-area-label">{{ t('chart.switch_chart') }}</span>

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

@@ -1679,7 +1679,14 @@ export const CHART_TYPE_CONFIGS = [
         value: 'picture-group',
         title: t('visualization.picture_group'),
         icon: 'picture-group'
-      }
+      },
+      {
+        render: 'custom',
+        category: 'quota',
+        value: 'DeTree',
+        title: '树',
+        icon: 'rich-text'
+      },
     ]
   }
 ]

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

@@ -0,0 +1,38 @@
+import { AbstractChartView, ChartLibraryType, ChartRenderType } from '../../types'
+import { useI18n } from '@/hooks/web/useI18n'
+
+const { t } = useI18n()
+/**
+ * 富文本图表
+ */
+export class RichTextChartView extends AbstractChartView {
+  properties: EditorProperty[] = [
+    'background-overall-component',
+    'border-style',
+    'threshold',
+    'function-cfg'
+  ]
+  propertyInner: EditorPropertyInner = {
+    'background-overall-component': ['all'],
+    'border-style': ['all'],
+    threshold: ['tableThreshold'],
+    'function-cfg': ['emptyDataStrategy']
+  }
+  debugger
+  axis: AxisType[] = ['xAxis', 'yAxis', 'filter']
+  axisConfig: AxisConfig = {
+    xAxis: {
+      name: `${t('chart.dimension')}`,
+      type: 'd',
+      allowEmpty: true
+    },
+    yAxis: {
+      name: `${t('chart.quota')}`,
+      type: 'q',
+      allowEmpty: true
+    }
+  }
+  constructor() {
+    super(ChartRenderType.CUSTOM, ChartLibraryType.DETREE, 'DeTree')
+  }
+}

core/core-frontend/src/views/chart/components/js/panel/types/index.ts

@@ -16,6 +16,7 @@ export enum ChartLibraryType {
   ECHARTS = 'echarts',
   S2 = 's2',
   RICH_TEXT = 'rich-text',
+  DETREE = 'DeTree',
   PICTURE_GROUP = 'picture-group',
   INDICATOR = 'indicator'
 }

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

@@ -45,6 +45,7 @@ import { storeToRefs } from 'pinia'
 import { checkAddHttp, setIdValueTrans } from '@/utils/canvasUtils'
 import { Base64 } from 'js-base64'
 import DeRichTextView from '@/custom-component/rich-text/DeRichTextView.vue'
+import DeTreeView from '@/custom-component/de-tree/Component.vue'
 import DePictureGroup from '@/custom-component/picture-group/Component.vue'
 import ChartEmptyInfo from '@/views/chart/components/views/components/ChartEmptyInfo.vue'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
@@ -153,7 +154,7 @@ const dynamicAreaId = ref('')
 const { view, showPosition, element, active, searchCount, scale, suffixId } = toRefs(props)
 const titleShow = computed(() => {
   return (
-    !['rich-text', 'picture-group'].includes(element.value.innerType) &&
+    !['rich-text','DeTree', 'picture-group'].includes(element.value.innerType) &&
     state.title_show &&
     showPosition.value !== 'viewDialog'
   )
@@ -578,6 +579,10 @@ const queryData = (firstLoad = false) => {
 const calcData = params => {
   dvMainStore.setLastViewRequestInfo(params.id, params.chartExtRequest)
   if (chartComponent?.value) {
+    if (['DeTree'].includes(view.value.type)) {
+      loading.value = false
+      return
+    }
     loading.value = true
     if (view.value.isPlugin) {
       chartComponent?.value?.invokeMethod({
@@ -868,7 +873,7 @@ const chartAreaShow = computed(() => {
       return true
     }
   }
-  if (['rich-text', 'picture-group'].includes(view.value.type)) {
+  if (['rich-text', 'picture-group','DeTree'].includes(view.value.type)) {
     return true
   }
   if (view.value?.isPlugin) {
@@ -1049,7 +1054,7 @@ const loadPluginCategory = data => {
 }
 
 const allEmptyCheck = computed(() => {
-  return ['rich-text', 'picture-group','three-map'].includes(element.value.innerType)
+  return ['rich-text','DeTree', 'picture-group','three-map'].includes(element.value.innerType)
 })
 /**
  * 标题提示的最大宽度
@@ -1203,6 +1208,18 @@ const clearG2Tooltip = () => {
         :edit-mode="editMode"
         :suffixId="suffixId"
       />
+      <de-tree-view
+        v-else-if="showChartView(ChartLibraryType.DETREE)"
+        :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
         :scale="scale"
         v-else-if="showChartView(ChartLibraryType.INDICATOR)"