Merge pull request #13659 from dataease/pr@dev-v2@chart-map-color-style

fix(图表): 修复地图配色方案样式出现两个滚动条的问题

core/core-frontend/src/components/dashboard/DbToolbar.vue

@@ -139,8 +139,7 @@ const previewOuter = () => {
   }
   canvasSave(() => {
     const url = '#/preview?dvId=' + dvInfo.value.id + '&ignoreParams=true'
-    const openType = wsCache.get('open-backend') === '1' ? '_self' : '_blank'
-    const newWindow = window.open(url, openType)
+    const newWindow = window.open(url, '_blank')
     initOpenHandler(newWindow)
   })
 }

core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/OverallSetting.vue

@@ -195,7 +195,11 @@
         :disabled="canvasStyleData.dashboard.resultMode === 'all'"
       />
     </el-form-item>
-    <el-form-item style="margin-top: 16px; margin-bottom: 8px" :class="'form-item-' + themes">
+    <el-form-item
+      v-show="dvInfo.type === 'dashboard'"
+      style="margin-top: 16px; margin-bottom: 8px"
+      :class="'form-item-' + themes"
+    >
       <el-checkbox
         :effect="themes"
         size="small"
@@ -215,7 +219,11 @@
         </span>
       </el-checkbox>
     </el-form-item>
-    <el-form-item class="form-item" :class="'form-item-' + themes">
+    <el-form-item
+      v-show="dvInfo.type === 'dashboard'"
+      class="form-item"
+      :class="'form-item-' + themes"
+    >
       <el-checkbox
         :effect="themes"
         size="small"

core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/SeniorStyleSetting.vue

@@ -13,7 +13,7 @@
               <el-color-picker
                 :effect="themes"
                 v-model="seniorStyleSetting.linkageIconColor"
-                :trigger-width="197"
+                :trigger-width="100"
                 is-custom
                 :predefine="state.predefineColors"
                 @change="themeChange"
@@ -30,7 +30,7 @@
               <el-color-picker
                 v-model="seniorStyleSetting.drillLayerColor"
                 :effect="themes"
-                :trigger-width="197"
+                :trigger-width="100"
                 is-custom
                 :predefine="state.predefineColors"
                 @change="themeChange"

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

@@ -10,7 +10,7 @@
         <path
           :d="smallGridPathD"
           fill="none"
-          stroke="rgba(207, 207, 207, 0.3)"
+          stroke="rgba(207, 207, 207, 0.4)"
           stroke-width="0.8"
         />
       </pattern>
@@ -21,11 +21,11 @@
         patternUnits="userSpaceOnUse"
       >
         <rect :width="middleGridW" :height="middleGridH" fill="url(#smallGrid)" />
-        <path :d="middleGridPathD" fill="none" stroke="rgba(207, 207, 207, 0.3)" stroke-width="1" />
+        <path :d="middleGridPathD" fill="none" stroke="rgba(207, 207, 207, 0.4)" stroke-width="1" />
       </pattern>
       <pattern id="grid" :width="gridW" :height="gridH" patternUnits="userSpaceOnUse">
         <rect :width="gridW" :height="gridH" fill="url(#middleGrid)" />
-        <path :d="pathD" fill="none" stroke="rgba(207, 207, 207, 0.3)" stroke-width="1.2" />
+        <path :d="pathD" fill="none" stroke="rgba(207, 207, 207, 0.4)" stroke-width="1.2" />
       </pattern>
     </defs>
     <rect width="100%" height="100%" fill="url(#grid)" />

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

@@ -3,7 +3,7 @@
     <defs>
       <pattern id="grid" :width="gridW" :height="gridH" patternUnits="userSpaceOnUse">
         <rect :width="gridW" :height="gridH" fill="url(#middleGrid)" />
-        <path :d="pathD" fill="none" stroke="rgba(207, 207, 207, 0.2)" stroke-width="0.5" />
+        <path :d="pathD" fill="none" stroke="rgba(207, 207, 207, 0.4)" stroke-width="0.7" />
       </pattern>
       <pattern
         id="middleGrid"
@@ -15,7 +15,7 @@
         <path
           :d="middleGridPathD"
           fill="none"
-          stroke="rgba(207, 207, 207, 0.2)"
+          stroke="rgba(207, 207, 207, 0.4)"
           stroke-width="0.3"
         />
       </pattern>

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

@@ -74,14 +74,6 @@ const closeEditComponentName = () => {
 
 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.setCurTabName(source.title)
   eventBus.emit('onTabSortChange-' + tabElement.value?.id)
   snapshotStore.recordSnapshotCache()

core/core-frontend/src/components/visualization/ComponentEditBar.vue

@@ -453,7 +453,7 @@ const exportAsExcel = () => {
   const viewDataInfo = dvMainStore.getViewDataDetails(element.value.id)
   const chartExtRequest = dvMainStore.getLastViewRequestInfo(element.value.id)
   const viewInfo = dvMainStore.getViewDetails(element.value.id)
-  const chart = { ...viewInfo, chartExtRequest, data: viewDataInfo }
+  const chart = { ...viewInfo, chartExtRequest, data: viewDataInfo, busiFlag: dvInfo.value.type }
   exportExcelDownload(chart, () => {
     openMessageLoading(callbackExport)
   })

core/core-frontend/src/custom-component/rich-text/DeRichTextView.vue

@@ -225,7 +225,7 @@ const init = ref({
           // 显示原始手柄并移除克隆手柄
           originalHandle.style.display = ''
           if (cloneHandle) {
-            cloneHandle.parentNode.removeChild(cloneHandle) // 获取原手柄的父元素
+            cloneHandle.parentNode?.removeChild(cloneHandle) // 获取原手柄的父元素
           }
           cloneHandle = null
           originalHandle = null
@@ -539,6 +539,9 @@ const calcData = (view: Chart, callback) => {
   updateEmptyValue(view)
   if (view.tableId || view['dataFrom'] === 'template') {
     const v = JSON.parse(JSON.stringify(view))
+    v.type = 'table-info'
+    v.render = 'antv'
+    v.resultCount = 1
     getData(v)
       .then(res => {
         if (res.code && res.code !== 0) {
@@ -546,6 +549,8 @@ const calcData = (view: Chart, callback) => {
           errMsg.value = res.msg
         } else {
           state.data = res?.data
+          res.type = 'rich-text'
+          res.render = 'custom'
           state.viewDataInfo = res
           state.totalItems = res?.totalItems
           const curViewInfo = canvasViewInfo.value[element.value.id]

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

@@ -187,16 +187,16 @@ function move(keyCode) {
     const scale = dvMainStore.canvasStyleData.scale / 100
     if (keyCode === leftKey) {
       curComponent.value.style.left = curComponent.value.style.left - scale
-      groupAreaAdaptor(-1, 0)
+      groupAreaAdaptor(-scale, 0)
     } else if (keyCode === rightKey) {
       curComponent.value.style.left = curComponent.value.style.left + scale
-      groupAreaAdaptor(1, 0)
+      groupAreaAdaptor(scale, 0)
     } else if (keyCode === upKey) {
       curComponent.value.style.top = curComponent.value.style.top - scale
-      groupAreaAdaptor(0, -1)
+      groupAreaAdaptor(0, -scale)
     } else if (keyCode === downKey) {
       curComponent.value.style.top = curComponent.value.style.top + scale
-      groupAreaAdaptor(0, 1)
+      groupAreaAdaptor(0, scale)
     }
     snapshotStore.recordSnapshotCache('key-move')
   }
@@ -212,6 +212,11 @@ function groupAreaAdaptor(leftOffset = 0, topOffset = 0) {
       width: parentNode.offsetWidth,
       height: parentNode.offsetHeight
     })
+  } else if (curComponent.value.component === 'GroupArea' && areaData.value.components.length > 0) {
+    areaData.value.components.forEach(component => {
+      component.style.top = component.style.top + topOffset
+      component.style.left = component.style.left + leftOffset
+    })
   }
 }
 

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

@@ -282,8 +282,7 @@ onMounted(() => {
 
   :deep(.ed-tabs__content) {
     height: calc(100% - 35px);
-    overflow-y: auto;
-    overflow-x: hidden;
+    overflow: hidden;
   }
 }
 .padding-tab {

core/core-frontend/src/views/chart/components/js/panel/charts/table/table-info.ts

@@ -4,6 +4,7 @@ import {
   S2Event,
   S2Options,
   S2Theme,
+  ScrollbarPositionType,
   TableColCell,
   TableSheet,
   ViewMeta
@@ -22,7 +23,8 @@ import {
   calculateHeaderHeight,
   SortTooltip,
   configSummaryRow,
-  summaryRowStyle
+  summaryRowStyle,
+  configEmptyDataStyle
 } from '@/views/chart/components/js/panel/common/common_table'
 
 const { t } = useI18n()
@@ -167,7 +169,10 @@ export class TableInfo extends S2ChartView<TableSheet> {
         renderTooltip: sheet => new SortTooltip(sheet)
       },
       interaction: {
-        hoverHighlight: !(basicStyle.showHoverStyle === false)
+        hoverHighlight: !(basicStyle.showHoverStyle === false),
+        scrollbarPosition: newData.length
+          ? ScrollbarPositionType.CONTENT
+          : ScrollbarPositionType.CANVAS
       }
     }
     s2Options.style = this.configStyle(chart, s2DataConfig)
@@ -335,6 +340,8 @@ export class TableInfo extends S2ChartView<TableSheet> {
         ev.colsHierarchy.width = containerWidth
       })
     }
+    // 空数据时表格样式
+    configEmptyDataStyle(newChart, basicStyle, newData, container)
     // click
     newChart.on(S2Event.DATA_CELL_CLICK, ev => {
       const cell = newChart.getCell(ev.target)

core/core-frontend/src/views/chart/components/js/panel/charts/table/table-normal.ts

@@ -1,6 +1,7 @@
 import { useI18n } from '@/hooks/web/useI18n'
 import { formatterItem, valueFormatter } from '@/views/chart/components/js/formatter'
 import {
+  configEmptyDataStyle,
   configSummaryRow,
   copyContent,
   SortTooltip,
@@ -13,6 +14,7 @@ import {
   S2DataConfig,
   S2Event,
   S2Options,
+  ScrollbarPositionType,
   TableColCell,
   TableSheet,
   ViewMeta
@@ -145,7 +147,10 @@ export class TableNormal extends S2ChartView<TableSheet> {
         renderTooltip: sheet => new SortTooltip(sheet)
       },
       interaction: {
-        hoverHighlight: !(basicStyle.showHoverStyle === false)
+        hoverHighlight: !(basicStyle.showHoverStyle === false),
+        scrollbarPosition: newData.length
+          ? ScrollbarPositionType.CONTENT
+          : ScrollbarPositionType.CANVAS
       }
     }
     // 列宽设置
@@ -242,6 +247,7 @@ export class TableNormal extends S2ChartView<TableSheet> {
         ev.colsHierarchy.width = containerWidth
       })
     }
+    configEmptyDataStyle(newChart, basicStyle, newData, container)
     // click
     newChart.on(S2Event.DATA_CELL_CLICK, ev => {
       const cell = newChart.getCell(ev.target)

core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts

@@ -1671,6 +1671,7 @@ const drawTextShape = (cell, isHeader) => {
  * @param layoutResult
  */
 export const calculateHeaderHeight = (info, newChart, tableHeader, basicStyle, layoutResult) => {
+  if (tableHeader.showTableHeader === false ) return
   const ev = layoutResult || newChart.facet.layoutResult
   const maxLines = basicStyle.maxLines ?? 1
   const textStyle = { ...newChart.theme.cornerCell.text }
@@ -1763,7 +1764,7 @@ const getWrapTextHeight = (wrapText, textStyle, spreadsheet, maxLines) => {
  * @param showSummary
  */
 export const configSummaryRow = (chart, s2Options, newData, tableHeader, basicStyle, showSummary) =>{
-  if (!showSummary) return
+  if (!showSummary || !newData.length) return
   // 设置汇总行高度和表头一致
   const heightByField = {}
   heightByField[newData.length] = tableHeader.tableTitleHeight
@@ -1821,10 +1822,13 @@ export const configSummaryRow = (chart, s2Options, newData, tableHeader, basicSt
  * @param showSummary
  */
 export const summaryRowStyle = (newChart, newData, tableCell, tableHeader, showSummary) => {
-  if (!showSummary) return
+  if (!showSummary || !newData.length) return
   newChart.on(S2Event.LAYOUT_BEFORE_RENDER, () => {
+    const showHeader = tableHeader.showTableHeader === true
+    // 不显示表头时，减少一个表头的高度
+    const headerAndSummaryHeight = showHeader ? 2 : 1
     const totalHeight =
-      tableHeader.tableTitleHeight * 2 + tableCell.tableItemHeight * (newData.length - 1)
+      tableHeader.tableTitleHeight * headerAndSummaryHeight + tableCell.tableItemHeight * (newData.length - 1)
     if (totalHeight < newChart.options.height) {
       // 6 是阴影高度
       newChart.options.height =
@@ -1844,3 +1848,41 @@ export class SummaryCell extends CustomDataCell {
     return { backgroundColor, backgroundColorOpacity }
   }
 }
+
+/**
+ * 配置空数据样式
+ * @param newChart
+ * @param basicStyle
+ * @param newData
+ * @param container
+ */
+export const configEmptyDataStyle = (newChart, basicStyle, newData, container) => {
+  /**
+   * 辅助函数：移除空数据dom
+   */
+  const removeEmptyDom = () => {
+    const emptyElement = document.getElementById(container + '_empty')
+    if (emptyElement) {
+      emptyElement.parentElement.removeChild(emptyElement)
+    }
+  }
+  removeEmptyDom()
+  if (newData.length) return
+  newChart.on(S2Event.LAYOUT_AFTER_HEADER_LAYOUT, (ev) => {
+    removeEmptyDom()
+    if (!newData.length) {
+      const emptyDom = document.createElement('div')
+      const left = Math.min(newChart.options.width, ev.colsHierarchy.width) / 2 - 32
+      emptyDom.id = container + '_empty'
+      emptyDom.textContent = t('data_set.no_data')
+      emptyDom.setAttribute(
+        'style',
+        `position: absolute;
+        left: ${left}px;
+        top: 50%;`
+      )
+      const parent = document.getElementById(container)
+      parent.insertBefore(emptyDom, parent.firstChild)
+    }
+  })
+}

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

@@ -34,7 +34,7 @@ const favorited = ref(false)
 const preview = () => {
   const baseUrl = isDataEaseBi.value ? embeddedStore.baseUrl : ''
   const url = baseUrl + '#/preview?dvId=' + dvInfo.value.id + '&ignoreParams=true'
-  const newWindow = window.open(url, openType)
+  const newWindow = window.open(url, '_blank')
   initOpenHandler(newWindow)
 }
 const isDataEaseBi = computed(() => appStore.getIsDataEaseBi)

de-xpack

@@ -1 +1 @@
-Subproject commit a081d74e3ce5b6cb32097a53c058178220c724d1
+Subproject commit 13ecdfab148086cf6e66fed2bcb41d88fdd5efab

installer/dectl

@@ -371,6 +371,7 @@ function restore() {
          mkdir -p $DE_RUNNING_BASE
       fi
       echo "恢复备份 $target"
+      rm -rf $DE_RUNNING_BASE/data/mysql/*
       tar -zxf $target --directory=$DE_RUNNING_BASE
       service dataease start
    else