Merge branch 'dev-v2' into pr@dev-v2_dzz

core/core-frontend/src/components/data-visualization/RealTimeGroup.vue

@@ -3,7 +3,7 @@ import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
 import { layerStoreWithOut } from '@/store/modules/data-visualization/layer'
 import { storeToRefs } from 'pinia'
-import { ElCol, ElIcon, ElRow } from 'element-plus-secondary'
+import { ElIcon, ElRow } from 'element-plus-secondary'
 import Icon from '../icon-custom/src/Icon.vue'
 import { computed, nextTick, ref } from 'vue'
 import draggable from 'vuedraggable'
@@ -11,7 +11,6 @@ import { lockStoreWithOut } from '@/store/modules/data-visualization/lock'
 import ContextMenuAsideDetails from '@/components/data-visualization/canvas/ContextMenuAsideDetails.vue'
 import ComposeShow from '@/components/data-visualization/canvas/ComposeShow.vue'
 import { composeStoreWithOut } from '@/store/modules/data-visualization/compose'
-import { contextmenuStoreWithOut } from '@/store/modules/data-visualization/contextmenu'
 const dropdownMore = ref(null)
 const lockStore = lockStoreWithOut()
 
@@ -19,11 +18,13 @@ const dvMainStore = dvMainStoreWithOut()
 const snapshotStore = snapshotStoreWithOut()
 const layerStore = layerStoreWithOut()
 const composeStore = composeStoreWithOut()
-const contextmenuStore = contextmenuStoreWithOut()
 
 const { areaData, isCtrlOrCmdDown, isShiftDown, laterIndex } = storeToRefs(composeStore)
 
-const { componentData, curComponent, curComponentIndex, canvasViewInfo } = storeToRefs(dvMainStore)
+const { curComponent, canvasViewInfo } = storeToRefs(dvMainStore)
+
+const componentData = computed(() => dvMainStore.componentData)
+
 const getComponent = index => {
   return componentData.value[componentData.value.length - 1 - index]
 }
@@ -87,24 +88,6 @@ const onClick = (e, index) => {
   setCurComponent(index)
   composeStore.setLaterIndex(index)
 }
-const deleteComponent = (number: number) => {
-  setTimeout(() => {
-    dvMainStore.deleteComponentById(curComponent.value.id)
-    snapshotStore.recordSnapshotCache('renderChart')
-  })
-}
-const upComponent = (number: number) => {
-  setTimeout(() => {
-    layerStore.upComponent()
-    snapshotStore.recordSnapshotCache()
-  })
-}
-const downComponent = (number: number) => {
-  setTimeout(() => {
-    layerStore.downComponent()
-    snapshotStore.recordSnapshotCache('realTime-downComponent')
-  })
-}
 const setCurComponent = index => {
   dvMainStore.setCurComponent({ component: componentData.value[index], index })
 }
@@ -113,7 +96,9 @@ let nameEdit = ref(false)
 let editComponentId = ref('')
 let inputName = ref('')
 let nameInput = ref(null)
+let curEditComponent = null
 const editComponentName = item => {
+  curEditComponent = curComponent.value
   editComponentId.value = `#component-label-${item.id}`
   nameEdit.value = true
   inputName.value = item.name
@@ -126,15 +111,12 @@ const closeEditComponentName = () => {
   if (!inputName.value || !inputName.value.trim()) {
     return
   }
-  if (inputName.value.trim() === curComponent.value.name) {
+  if (inputName.value.trim() === curEditComponent.name) {
     return
   }
-  curComponent.value.name = inputName.value
+  curEditComponent.name = inputName.value
   inputName.value = ''
-}
+  curEditComponent = null
-
-const toggleComponentVisible = () => {
-  // do toggleComponentVisible
 }
 
 const lock = () => {
@@ -198,9 +180,6 @@ const menuAsideClose = (param, index) => {
     }, 200)
   }
 }
-const rename = item => {
-  editComponentName(item)
-}
 
 const handleContextMenu = e => {
   e.preventDefault()
@@ -248,12 +227,15 @@ const handleContextMenu = e => {
                   areaData.components.includes(getComponent(index))
               }"
               @click="onClick($event, transformIndex(index))"
-              @dblclick="editComponentName(getComponent(index))"
             >
               <el-icon class="component-icon">
                 <Icon :name="getIconName(getComponent(index))"></Icon>
               </el-icon>
-              <span :id="`component-label-${getComponent(index)?.id}`" class="component-label">
+              <span
+                :id="`component-label-${getComponent(index)?.id}`"
+                class="component-label"
+                @dblclick="editComponentName(getComponent(index))"
+              >
                 {{ getComponent(index)?.name }}
               </span>
               <div
@@ -293,7 +275,7 @@ const handleContextMenu = e => {
                   trigger="click"
                   placement="bottom-start"
                   effect="dark"
-                  hide-timeout="0"
+                  :hide-timeout="0"
                 >
                   <span :class="'dropdownMore-' + index" @click="onClick(transformIndex(index))">
                     <el-icon class="component-base">
@@ -313,7 +295,7 @@ const handleContextMenu = e => {
                 trigger="contextmenu"
                 placement="bottom-start"
                 effect="dark"
-                hide-timeout="0"
+                :hide-timeout="0"
               >
                 <compose-show
                   :show-border="false"

core/core-frontend/src/components/data-visualization/RealTimeListTree.vue

@@ -0,0 +1,481 @@
+<script lang="ts" setup>
+import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
+import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
+import { layerStoreWithOut } from '@/store/modules/data-visualization/layer'
+import { storeToRefs } from 'pinia'
+import { ElIcon, ElRow } from 'element-plus-secondary'
+import Icon from '../icon-custom/src/Icon.vue'
+import { nextTick, ref } from 'vue'
+import draggable from 'vuedraggable'
+import { lockStoreWithOut } from '@/store/modules/data-visualization/lock'
+import ContextMenuAsideDetails from '@/components/data-visualization/canvas/ContextMenuAsideDetails.vue'
+import ComposeShow from '@/components/data-visualization/canvas/ComposeShow.vue'
+import { composeStoreWithOut } from '@/store/modules/data-visualization/compose'
+import RealTimeGroup from '@/components/data-visualization/RealTimeGroup.vue'
+const dropdownMore = ref(null)
+const lockStore = lockStoreWithOut()
+
+const dvMainStore = dvMainStoreWithOut()
+const snapshotStore = snapshotStoreWithOut()
+const layerStore = layerStoreWithOut()
+const composeStore = composeStoreWithOut()
+
+const { areaData, isCtrlOrCmdDown, isShiftDown, laterIndex } = storeToRefs(composeStore)
+
+const { componentData, curComponent, canvasViewInfo } = storeToRefs(dvMainStore)
+const getComponent = index => {
+  return componentData.value[componentData.value.length - 1 - index]
+}
+const transformIndex = index => {
+  return componentData.value.length - 1 - index
+}
+const areaDataPush = component => {
+  if (component && !component.isLock && component.isShow) {
+    areaData.value.components.push(component)
+  }
+}
+// shift 选择算法逻辑
+// 1.记录上次点击的laterIndex（初始状态laterIndex=0）;
+// 2.获取当前index curClickIndex;
+// 3.比较laterIndex 和 curClickIndex之间的大小;
+// 4.将[laterIndex,curClickIndex] 或者 [curClickIndex,laterIndex]区域的图层加入areaData.value.components(已包含的不再重复加入);
+const shiftDataPush = curClickIndex => {
+  const areaDataIdArray = areaData.value.components.map(com => com.id)
+  let indexBegin, indexEnd
+  const laterIndexTrans = laterIndex.value === null ? componentData.value.length : laterIndex.value
+  if (laterIndexTrans < curClickIndex) {
+    indexBegin = laterIndexTrans
+    indexEnd = curClickIndex
+  } else {
+    indexBegin = curClickIndex
+    indexEnd = laterIndexTrans
+  }
+  const shiftAreaComponents = componentData.value
+    .slice(indexBegin, indexEnd + 1)
+    .filter(
+      component => !areaDataIdArray.includes(component.id) && !component.isLock && component.isShow
+    )
+  areaData.value.components.push(...shiftAreaComponents)
+  dvMainStore.setCurComponent({ component: null, index: null })
+}
+
+const onClick = (e, index) => {
+  // 初始化点击是 laterIndex=0
+  if (!curComponent.value) {
+    composeStore.setLaterIndex(null)
+  }
+  // ctrl or command 按下时 鼠标点击为选择需要组合的组件(取消需要组合的组件在ComposeShow组件中)
+  if (isCtrlOrCmdDown.value && !areaData.value.components.includes(componentData.value[index])) {
+    areaDataPush(componentData.value[index])
+    if (curComponent.value && curComponent.value.id !== componentData.value[index].id) {
+      areaDataPush(curComponent.value)
+    }
+    dvMainStore.setCurComponent({ component: null, index: null })
+    e.stopPropagation()
+    composeStore.setLaterIndex(index)
+    return
+  }
+  //shift操作逻辑
+  if (isShiftDown.value) {
+    shiftDataPush(index)
+    return
+  }
+
+  //其他情况点击清理选择区域
+  areaData.value.components.splice(0, areaData.value.components.length)
+  setCurComponent(index)
+  composeStore.setLaterIndex(index)
+}
+const setCurComponent = index => {
+  dvMainStore.setCurComponent({ component: componentData.value[index], index })
+}
+
+let nameEdit = ref(false)
+let editComponentId = ref('')
+let inputName = ref('')
+let nameInput = ref(null)
+let curEditComponent = null
+const editComponentName = item => {
+  curEditComponent = curComponent.value
+  editComponentId.value = `#component-label-${item.id}`
+  nameEdit.value = true
+  inputName.value = item.name
+  nextTick(() => {
+    nameInput.value.focus()
+  })
+}
+const closeEditComponentName = () => {
+  nameEdit.value = false
+  if (!inputName.value || !inputName.value.trim()) {
+    return
+  }
+  if (inputName.value.trim() === curEditComponent.name) {
+    return
+  }
+  curEditComponent.name = inputName.value
+  inputName.value = ''
+  curEditComponent = null
+}
+
+const lock = () => {
+  setTimeout(() => {
+    lockStore.lock()
+    snapshotStore.recordSnapshotCache('realTime-lock')
+  })
+}
+
+const unlock = () => {
+  setTimeout(() => {
+    lockStore.unlock()
+    snapshotStore.recordSnapshotCache('realTime-unlock')
+  })
+}
+
+const hideComponent = () => {
+  setTimeout(() => {
+    layerStore.hideComponent()
+    snapshotStore.recordSnapshotCache('realTime-hideComponent')
+  })
+}
+
+const showComponent = () => {
+  setTimeout(() => {
+    layerStore.showComponent()
+    snapshotStore.recordSnapshotCache()
+  })
+}
+
+const dragOnEnd = ({ oldIndex, newIndex }) => {
+  const source = componentData.value[newIndex]
+  const comLength = componentData.value.length
+  // 还原数组
+  componentData.value.splice(newIndex, 1)
+  componentData.value.splice(oldIndex, 0, source)
+  const target = componentData.value[comLength - 1 - oldIndex]
+  // 反向移动数组
+  componentData.value.splice(comLength - 1 - oldIndex, 1)
+  componentData.value.splice(comLength - 1 - newIndex, 0, target)
+  dvMainStore.setCurComponent({ component: target, index: transformIndex(comLength - oldIndex) })
+}
+
+const getIconName = item => {
+  if (item.component === 'UserView') {
+    const viewInfo = canvasViewInfo.value[item.id]
+    return `${viewInfo.type}-origin`
+  } else {
+    return item.icon
+  }
+}
+
+const menuAsideClose = (param, index) => {
+  const iconDom = document.getElementById('close-button')
+  if (iconDom) {
+    iconDom.click()
+  }
+  if (param.opt === 'rename') {
+    setTimeout(() => {
+      editComponentName(getComponent(index))
+    }, 200)
+  }
+}
+
+const handleContextMenu = e => {
+  e.preventDefault()
+  // 获取鼠标点击位置
+  const x = e.clientX
+  const y = e.clientY
+  const customContextMenu = document.createElement('div')
+  customContextMenu.style.position = 'fixed'
+  customContextMenu.style.left = x + 'px'
+  customContextMenu.style.top = y + 'px'
+
+  // 将自定义菜单添加到页面
+  document.body.appendChild(customContextMenu)
+
+  // 为自定义菜单添加事件监听器，例如，点击菜单项后执行的操作
+  customContextMenu.addEventListener('click', () => {
+    // 在这里执行菜单项点击后的操作
+    // 例如，关闭菜单
+    document.body.removeChild(customContextMenu)
+  })
+}
+</script>
+
+<template>
+  <!--为了保持图层视觉上的一致性 这里进行数组的倒序排列 相应的展示和移动按照倒序处理-->
+  <div class="real-time-component-list">
+    <button hidden="true" id="close-button"></button>
+    <el-row class="list-wrap">
+      <div class="list-container" @contextmenu="handleContextMenu">
+        <draggable
+          @end="dragOnEnd"
+          :list="componentData"
+          animation="100"
+          class="drag-list"
+          item-key="id"
+        >
+          <template #item="{ index }">
+            <div>
+              <div
+                :title="getComponent(index)?.name"
+                class="component-item"
+                :class="{
+                  'container-item-not-show': !getComponent(index)?.isShow,
+                  activated:
+                    (curComponent && curComponent?.id === getComponent(index)?.id) ||
+                    areaData.components.includes(getComponent(index))
+                }"
+                @click="onClick($event, transformIndex(index))"
+              >
+                <el-icon class="component-icon">
+                  <Icon :name="getIconName(getComponent(index))"></Icon>
+                </el-icon>
+                <span
+                  :id="`component-label-${getComponent(index)?.id}`"
+                  class="component-label"
+                  @dblclick="editComponentName(getComponent(index))"
+                >
+                  {{ getComponent(index)?.name }}
+                </span>
+                <div
+                  v-show="!nameEdit || (nameEdit && curComponent?.id !== getComponent(index)?.id)"
+                  class="icon-container"
+                  :class="{
+                    'icon-container-lock':
+                      getComponent(index)?.isLock && getComponent(index)?.isShow,
+                    'icon-container-show': !getComponent(index)?.isShow
+                  }"
+                >
+                  <el-icon
+                    class="component-base component-icon-display"
+                    v-show="!getComponent(index).isShow"
+                    @click="showComponent"
+                  >
+                    <Icon name="dv-eye-close" class="opt-icon"></Icon>
+                  </el-icon>
+                  <el-icon
+                    class="component-base"
+                    v-show="getComponent(index)?.isShow"
+                    @click="hideComponent"
+                  >
+                    <Icon name="dv-show" class="opt-icon"></Icon>
+                  </el-icon>
+                  <el-icon
+                    v-show="!getComponent(index)?.isLock"
+                    class="component-base"
+                    @click="lock"
+                  >
+                    <Icon class="opt-icon" name="dv-unlock"></Icon>
+                  </el-icon>
+                  <el-icon
+                    class="component-base component-icon-display"
+                    v-show="getComponent(index)?.isLock"
+                    @click="unlock"
+                  >
+                    <Icon name="dv-lock" class="opt-icon"></Icon>
+                  </el-icon>
+                  <el-dropdown
+                    ref="dropdownMore"
+                    trigger="click"
+                    placement="bottom-start"
+                    effect="dark"
+                    :hide-timeout="0"
+                  >
+                    <span :class="'dropdownMore-' + index" @click="onClick(transformIndex(index))">
+                      <el-icon class="component-base">
+                        <Icon name="dv-more" class="opt-icon"></Icon>
+                      </el-icon>
+                    </span>
+                    <template #dropdown>
+                      <context-menu-aside-details
+                        :element="getComponent(index)"
+                        @close="menuAsideClose($event, index)"
+                      ></context-menu-aside-details>
+                    </template>
+                  </el-dropdown>
+                </div>
+                <el-dropdown
+                  class="compose-dropdown"
+                  trigger="contextmenu"
+                  placement="bottom-start"
+                  effect="dark"
+                  :hide-timeout="0"
+                >
+                  <compose-show
+                    :show-border="false"
+                    :element-index="transformIndex(index)"
+                    :element="getComponent(index)"
+                  ></compose-show>
+                  <template #dropdown>
+                    <context-menu-aside-details
+                      :element="getComponent(index)"
+                      @close="menuAsideClose($event, index)"
+                    ></context-menu-aside-details>
+                  </template>
+                </el-dropdown>
+              </div>
+            </div>
+          </template>
+        </draggable>
+        <el-row style="width: 100%; height: 150px"></el-row>
+      </div>
+    </el-row>
+    <Teleport v-if="editComponentId && nameEdit" :to="editComponentId">
+      <input
+        @keydown.stop
+        @keyup.stop
+        ref="nameInput"
+        v-model="inputName"
+        @blur="closeEditComponentName"
+      />
+    </Teleport>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.real-time-component-list {
+  white-space: nowrap;
+  .list-wrap {
+    max-height: calc(100% - @component-toolbar-height);
+    overflow-y: auto;
+    width: 100%;
+    .list-container {
+      width: 100%;
+      .component-item {
+        position: relative;
+        height: 30px;
+        width: 100%;
+        cursor: grab;
+        color: @dv-canvas-main-font-color;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        font-size: 12px;
+        padding: 0 2px 0 22px;
+        user-select: none;
+
+        .component-icon {
+          color: #a6a6a6;
+          font-size: 14px;
+        }
+        .component-label {
+          color: #ebebeb;
+        }
+
+        > span.component-label {
+          font-size: 12px;
+          margin-left: 10px;
+          position: relative;
+          min-width: 65px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          input {
+            position: absolute;
+            left: 0;
+            width: 100%;
+            background-color: white;
+            outline: none;
+            border: none;
+            border-radius: 2px;
+            padding: 0 4px;
+            height: 100%;
+          }
+        }
+
+        &:active {
+          cursor: grabbing;
+        }
+
+        &:hover {
+          background-color: rgba(235, 235, 235, 0.1);
+
+          .icon-container {
+            .component-base {
+              opacity: 1;
+            }
+            width: 70px !important;
+          }
+        }
+
+        .icon-container {
+          .component-base {
+            opacity: 0;
+          }
+          width: 0px;
+          display: flex;
+          justify-content: flex-end;
+          align-items: center;
+          flex-grow: 1;
+          cursor: none;
+          i {
+            font-size: 16px;
+            cursor: pointer;
+          }
+        }
+      }
+      .activated {
+        background-color: rgba(51, 112, 255, 0.1) !important;
+        :deep(.component-icon) {
+          color: #3370ff;
+        }
+        :deep(.component-label) {
+          color: #3370ff;
+        }
+      }
+    }
+  }
+}
+
+.real-time-component-list :deep(.ed-popper) {
+  background: #303133 !important;
+}
+
+.component-base {
+  cursor: pointer;
+  height: 22px !important;
+  width: 22px !important;
+  border-radius: 4px;
+  padding: 0 4px;
+
+  .opt-icon {
+    font-size: 14px;
+  }
+
+  &:hover {
+    background: rgba(235, 235, 235, 0.1);
+  }
+
+  &:active {
+    background: rgba(235, 235, 235, 0.1);
+  }
+}
+
+.component-icon-display {
+  opacity: 1 !important;
+}
+
+.icon-container-show {
+  width: 70px !important;
+}
+
+.icon-container-lock {
+  width: 45px !important;
+}
+
+.container-item-not-show {
+  color: #5f5f5f !important;
+  :deep(.component-icon) {
+    color: #5f5f5f !important;
+  }
+  :deep(.component-label) {
+    color: #5f5f5f !important;
+  }
+}
+</style>
+
+<style lang="less">
+.compose-dropdown {
+  position: initial !important;
+}
+</style>

core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue

@@ -137,6 +137,11 @@ const props = defineProps({
     default() {
       return {}
     }
+  },
+  scale: {
+    type: Number,
+    required: false,
+    default: 1
   }
 })
 
@@ -191,7 +196,7 @@ const curComponentId = computed(() => {
 const { emitter } = useEmitt()
 
 const curScale = computed(() => {
-  return canvasStyleData.value.scale
+  return canvasStyleData.value.scale / 100
 })
 
 const pointShadowShow = computed(() => {
@@ -1269,6 +1274,7 @@ defineExpose({
       v-for="(item, index) in componentData"
       v-show="item.isShow"
       :canvas-id="canvasId"
+      :scale="curScale"
       :key="item.id"
       :default-style="item.style"
       :style="getShapeItemShowStyle(item)"

core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue

@@ -164,6 +164,8 @@ const commonBackgroundSvgInner = computed(() => {
     return null
   }
 })
+
+const deepScale = computed(() => scale.value / 100)
 </script>
 
 <template>
@@ -210,7 +212,7 @@ const commonBackgroundSvgInner = computed(() => {
           :linkage="config?.linkage"
           :show-position="showPosition"
           :search-count="searchCount"
-          :scale="scale"
+          :scale="deepScale"
           :disabled="true"
         />
       </div>

core/core-frontend/src/components/data-visualization/canvas/Shape.vue

@@ -204,10 +204,16 @@ const props = defineProps({
   canvasId: {
     type: String,
     default: 'canvas-main'
+  },
+  scale: {
+    type: Number,
+    required: false,
+    default: 1
   }
 })
 
-const { element, defaultStyle, baseCellInfo, index, isTabMoveCheck, canvasId } = toRefs(props)
+const { element, defaultStyle, baseCellInfo, index, isTabMoveCheck, canvasId, scale } =
+  toRefs(props)
 const domId = ref('shape-id-' + element.value.id)
 const pointList = ['lt', 't', 'rt', 'r', 'rb', 'b', 'lb', 'l']
 const pointList2 = ['r', 'l']
@@ -645,7 +651,7 @@ const componentBackgroundStyle = computed(() => {
       innerPadding,
       borderRadius
     } = element.value.commonBackground
-    const style = { padding: innerPadding + 'px', borderRadius: borderRadius + 'px' }
+    const style = { padding: innerPadding * scale.value + 'px', borderRadius: borderRadius + 'px' }
     let colorRGBA = ''
     if (backgroundColorSelect && backgroundColor) {
       colorRGBA = backgroundColor

core/core-frontend/src/custom-component/user-view/Component.vue

@@ -42,7 +42,7 @@ const props = defineProps({
   scale: {
     type: Number,
     required: false,
-    default: 100
+    default: 1
   },
   dvType: {
     type: String,
@@ -58,15 +58,14 @@ const props = defineProps({
 
 const { element, view, active, searchCount, scale } = toRefs(props)
 const autoStyle = computed(() => {
-  if (element.value.innerType === 'richText') {
+  if (element.value.innerType === 'rich-text') {
-    const curScale = scale.value / 100
     return {
       position: 'absolute',
-      height: 100 / curScale + '%!important',
+      height: 100 / scale.value + '%!important',
-      width: 100 / curScale + '%!important',
+      width: 100 / scale.value + '%!important',
-      left: 50 * (1 - 1 / curScale) + '%', // 放大余量 除以 2
+      left: 50 * (1 - 1 / scale.value) + '%', // 放大余量 除以 2
-      top: 50 * (1 - 1 / curScale) + '%', // 放大余量 除以 2
+      top: 50 * (1 - 1 / scale.value) + '%', // 放大余量 除以 2
-      transform: 'scale(' + curScale + ')'
+      transform: 'scale(' + scale.value + ')'
     } as CSSProperties
   } else {
     return {}

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

@@ -13,6 +13,7 @@ import { defaultsDeep, cloneDeep } from 'lodash-es'
 import ChartError from '@/views/chart/components/views/components/ChartError.vue'
 import { BASE_VIEW_CONFIG } from '../../editor/util/chart'
 import { customAttrTrans, customStyleTrans, recursionTransObj } from '@/utils/canvasStyle'
+import { deepCopy } from '@/utils/utils'
 
 const dvMainStore = dvMainStoreWithOut()
 const { nowPanelTrackInfo, nowPanelJumpInfo } = storeToRefs(dvMainStore)
@@ -34,7 +35,7 @@ const props = defineProps({
   scale: {
     type: Number,
     required: false,
-    default: 100
+    default: 1
   },
   terminal: {
     type: String,
@@ -113,11 +114,13 @@ const renderChart = async view => {
   curView = view
   // view 为引用对象 需要存库 view.data 直接赋值会导致保存不必要的数据
   // 与默认视图对象合并，方便增加配置项
-  const chart = { ...defaultsDeep(view, cloneDeep(BASE_VIEW_CONFIG)), data: chartData.value }
+  const chart = deepCopy({
+    ...defaultsDeep(view, cloneDeep(BASE_VIEW_CONFIG)),
+    data: chartData.value
+  })
   const chartView = chartViewManager.getChartView(view.render, view.type)
-  console.log('scale=' + scale.value)
+  recursionTransObj(customAttrTrans, chart.customAttr, scale.value, terminal.value)
-  recursionTransObj(customAttrTrans, chart.customAttr, scale.value / 100, terminal.value)
+  recursionTransObj(customStyleTrans, chart.customStyle, scale.value, terminal.value)
-  recursionTransObj(customStyleTrans, chart.customStyle, scale.value / 100, terminal.value)
   switch (chartView.library) {
     case ChartLibraryType.L7_PLOT:
       renderL7Plot(chart, chartView as L7PlotChartView<any, any>)

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

@@ -10,7 +10,8 @@ import {
   shallowRef,
   ShallowRef,
   toRaw,
-  toRefs
+  toRefs,
+  watch
 } from 'vue'
 import { getData } from '@/api/chart'
 import chartViewManager from '@/views/chart/components/js/panel'
@@ -22,6 +23,8 @@ import { ElPagination } from 'element-plus-secondary'
 import ChartError from '@/views/chart/components/views/components/ChartError.vue'
 import { defaultsDeep, cloneDeep } from 'lodash-es'
 import { BASE_VIEW_CONFIG } from '../../editor/util/chart'
+import { customAttrTrans, customStyleTrans, recursionTransObj } from '@/utils/canvasStyle'
+import { deepCopy } from '@/utils/utils'
 
 const dvMainStore = dvMainStoreWithOut()
 const { nowPanelTrackInfo, nowPanelJumpInfo } = storeToRefs(dvMainStore)
@@ -39,12 +42,21 @@ const props = defineProps({
     type: String,
     required: false,
     default: 'canvas'
+  },
+  scale: {
+    type: Number,
+    required: false,
+    default: 1
+  },
+  terminal: {
+    type: String,
+    default: 'pc'
   }
 })
 
 const emit = defineEmits(['onChartClick', 'onDrillFilters', 'onJumpClick'])
 
-const { view, showPosition } = toRefs(props)
+const { view, showPosition, scale, terminal } = toRefs(props)
 
 const isError = ref(false)
 const errMsg = ref('')
@@ -113,10 +125,14 @@ const renderChart = (viewInfo: Chart, resetPageInfo: boolean) => {
     return
   }
   // view 为引用对象 需要存库 view.data 直接赋值会导致保存不必要的数据
-  const chart = {
+  const chart = deepCopy({
     ...defaultsDeep(viewInfo, cloneDeep(BASE_VIEW_CONFIG)),
     data: chartData.value
-  } as ChartObj
+  } as ChartObj)
+
+  recursionTransObj(customAttrTrans, chart.customAttr, scale.value, terminal.value)
+  recursionTransObj(customStyleTrans, chart.customStyle, scale.value, terminal.value)
+
   setupPage(chart, resetPageInfo)
   myChart?.destroy()
   const chartView = chartViewManager.getChartView(
@@ -157,7 +173,7 @@ const setupPage = (chart: ChartObj, resetPageInfo?: boolean) => {
   }
 }
 
-let scrollTimer
+let scrollTimer: number
 let scrollTop = 0
 const initScroll = () => {
   clearInterval(scrollTimer)
@@ -201,7 +217,7 @@ const showPage = computed(() => {
 
 const handleCurrentChange = pageNum => {
   let extReq = { goPage: pageNum }
-  if (chartExtRequest) {
+  if (chartExtRequest.value) {
     extReq = { ...extReq, ...chartExtRequest.value }
   }
   const chart = { ...view.value, chartExtRequest: extReq }
@@ -302,7 +318,7 @@ const resize = (width, height) => {
 }
 const preSize = [0, 0]
 const TOLERANCE = 1
-let resizeObserver
+let resizeObserver: ResizeObserver
 onMounted(() => {
   isDataEaseBi.value = !!window.DataEaseBi
   resizeObserver = new ResizeObserver(([entry] = []) => {

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

@@ -93,11 +93,11 @@ const props = defineProps({
   scale: {
     type: Number,
     required: false,
-    default: 100
+    default: 1
   }
 })
 const dynamicAreaId = ref('')
-const { view, showPosition, element, active, searchCount } = toRefs(props)
+const { view, showPosition, element, active, searchCount, scale } = toRefs(props)
 
 const titleShow = computed(
   () =>
@@ -201,6 +201,10 @@ watch(
   { deep: true }
 )
 
+watch([() => scale.value], () => {
+  initTitle()
+})
+
 watch([() => searchCount.value], () => {
   // 内部计时器启动 忽略外部计时器
   if (!innerRefreshTimer) {
@@ -216,6 +220,12 @@ watch([() => resultMode.value], () => {
   queryData()
 })
 
+watch([() => scale.value], () => {
+  nextTick(() => {
+    chartComponent?.value?.renderChart(view.value)
+  })
+})
+
 watch([() => curComponent.value], () => {
   if (curComponent.value && curComponent.value.id === view.value.id) {
     state.initReady = false
@@ -233,7 +243,7 @@ const initTitle = () => {
     const customStyle = view.value.customStyle
     if (customStyle.text) {
       state.title_show = customStyle.text.show
-      state.title_class.fontSize = customStyle.text.fontSize + 'px'
+      state.title_class.fontSize = customStyle.text.fontSize * scale.value + 'px'
       state.title_class.color = customStyle.text.color
       state.title_class.textAlign = customStyle.text.hPosition
       state.title_class.fontStyle = customStyle.text.isItalic ? 'italic' : 'normal'
@@ -260,8 +270,8 @@ const initTitle = () => {
   }
 }
 
-const drillJump = index => {
+const drillJump = (index: number) => {
-  state.drillClickDimensionList = state.drillClickDimensionList.slice(0, index)
+  state.drillClickDimensionList.splice(index)
   view.value.chartExtRequest = filter()
   calcData(view.value)
 }
@@ -634,6 +644,7 @@ const toolTip = computed(() => {
       />
       <chart-component-s2
         :view="view"
+        :scale="scale"
         :show-position="showPosition"
         v-else-if="showChartView(ChartLibraryType.S2)"
         ref="chartComponent"

core/core-frontend/src/views/data-visualization/index.vue

@@ -25,6 +25,7 @@ import { changeComponentSizeWithScale } from '@/utils/changeComponentsSizeWithSc
 import { useEmitt } from '@/hooks/web/useEmitt'
 import { check, compareStorage } from '@/utils/CrossPermission'
 import { useCache } from '@/hooks/web/useCache'
+import RealTimeListTree from '@/components/data-visualization/RealTimeListTree.vue'
 const { wsCache } = useCache()
 const eventCheck = e => {
   if (e.key === 'screen-weight' && !compareStorage(e.oldValue, e.newValue)) {
@@ -253,7 +254,7 @@ eventBus.on('handleNew', handleNew)
         id="dv-main-left-sidebar"
         :class="{ 'preview-aside': previewStatus }"
       >
-        <RealTimeComponentList />
+        <real-time-list-tree />
       </dv-sidebar>
       <!-- 中间画布 -->
       <main id="dv-main-center" class="center" ref="canvasCenterRef">