Merge branch 'dev' of github.com:dataease/dataease into dev

backend/src/main/java/io/dataease/controller/panel/PanelGroupController.java

@@ -1,9 +1,12 @@
 package io.dataease.controller.panel;
 
+import com.auth0.jwt.JWT;
+import com.auth0.jwt.interfaces.DecodedJWT;
 import com.github.xiaoymin.knife4j.annotations.ApiSupport;
 import io.dataease.auth.annotation.DePermission;
 import io.dataease.auth.annotation.DePermissionProxy;
 import io.dataease.auth.annotation.DePermissions;
+import io.dataease.auth.filter.F2CLinkFilter;
 import io.dataease.auth.service.impl.ExtAuthServiceImpl;
 import io.dataease.commons.constants.DePermissionType;
 import io.dataease.commons.constants.PanelConstants;
@@ -21,9 +24,12 @@ import io.swagger.annotations.ApiOperation;
 import org.apache.shiro.authz.annotation.Logical;
 import org.pentaho.di.core.util.UUIDUtil;
 import org.springframework.web.bind.annotation.*;
+import org.springframework.web.context.request.RequestContextHolder;
+import org.springframework.web.context.request.ServletRequestAttributes;
 import springfox.documentation.annotations.ApiIgnore;
 
 import javax.annotation.Resource;
+import javax.servlet.http.HttpServletRequest;
 import javax.servlet.http.HttpServletResponse;
 import java.io.IOException;
 import java.util.List;
@@ -141,6 +147,12 @@ public class PanelGroupController {
     @PostMapping("/exportDetails")
     @I18n
     public void exportDetails(@RequestBody PanelViewDetailsRequest request, HttpServletResponse response) throws IOException {
+        HttpServletRequest httpServletRequest = ((ServletRequestAttributes) RequestContextHolder.getRequestAttributes())
+                .getRequest();
+        String linkToken = httpServletRequest.getHeader(F2CLinkFilter.LINK_TOKEN_KEY);
+        DecodedJWT jwt = JWT.decode(linkToken);
+        Long userId = jwt.getClaim("userId").asLong();
+        request.setUserId(userId);
         panelGroupService.exportPanelViewDetails(request, response);
     }
 

backend/src/main/java/io/dataease/controller/request/panel/PanelViewDetailsRequest.java

@@ -40,4 +40,6 @@ public class PanelViewDetailsRequest {
     @ApiModelProperty(hidden = true)
     private PermissionProxy proxy;
 
+    private Long userId;
+
 }

backend/src/main/java/io/dataease/service/chart/ChartViewService.java

@@ -606,7 +606,8 @@ public class ChartViewService {
         List<ChartViewFieldDTO> xAxisExt = gson.fromJson(view.getXAxisExt(), tokenType);
         if (StringUtils.equalsIgnoreCase(view.getType(), "table-pivot")
                 || StringUtils.containsIgnoreCase(view.getType(), "group")
-                || ("antv".equalsIgnoreCase(view.getRender()) && "line".equalsIgnoreCase(view.getType()))) {
+                || ("antv".equalsIgnoreCase(view.getRender()) && "line".equalsIgnoreCase(view.getType()))
+                || StringUtils.equalsIgnoreCase(view.getType(), "flow-map")) {
             xAxis.addAll(xAxisExt);
         }
         List<ChartViewFieldDTO> yAxis = gson.fromJson(view.getYAxis(), tokenType);
@@ -714,6 +715,7 @@ public class ChartViewService {
                 break;
             case "bar-group":
             case "bar-group-stack":
+            case "flow-map":
                 xAxis = xAxis.stream().filter(item -> chartViewFieldNameList.contains(item.getDataeaseName()) || (!desensitizationList.keySet().contains(item.getDataeaseName()) && dataeaseNames.contains(item.getDataeaseName()))).collect(Collectors.toList());
                 yAxis = yAxis.stream().filter(item -> chartViewFieldNameList.contains(item.getDataeaseName()) || (!desensitizationList.keySet().contains(item.getDataeaseName()) && dataeaseNames.contains(item.getDataeaseName()))).collect(Collectors.toList());
                 xAxisBase = xAxisBase.stream().filter(item -> chartViewFieldNameList.contains(item.getDataeaseName()) || (!desensitizationList.keySet().contains(item.getDataeaseName()) && dataeaseNames.contains(item.getDataeaseName()))).collect(Collectors.toList());

backend/src/main/java/io/dataease/service/panel/PanelGroupService.java

@@ -1161,6 +1161,8 @@ public class PanelGroupService {
                 componentFilterInfo.setGoPage(1l);
                 componentFilterInfo.setPageSize(1000000l);
                 componentFilterInfo.setExcelExportFlag(true);
+                componentFilterInfo.setProxy(request.getProxy());
+                componentFilterInfo.setUser(request.getUserId());
                 ChartViewDTO chartViewInfo = chartViewService.getData(request.getViewId(), componentFilterInfo);
                 List<Map> tableRow = (List) chartViewInfo.getData().get("tableRow");
                 List<Object[]> result = new ArrayList<>();

backend/src/main/resources/db/migration/V53__1.18.6.sql

@@ -0,0 +1,4 @@
+UPDATE `my_plugin`
+SET `version` = '1.18.6'
+where `plugin_id` > 0
+  and `version` = '1.18.5';

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dataease",
-  "version": "1.18.5",
+  "version": "1.18.6",
   "description": "dataease front",
   "private": true,
   "scripts": {
@@ -26,15 +26,15 @@
   },
   "dependencies": {
     "@antv/g2plot": "^2.4.9",
-    "@antv/l7": "2.8.31",
+    "@antv/l7": "2.15.0",
-    "@antv/l7-component": "2.8.31",
+    "@antv/l7-component": "2.15.0",
-    "@antv/l7-core": "2.8.31",
+    "@antv/l7-core": "2.15.0",
-    "@antv/l7-layers": "2.8.31",
+    "@antv/l7-layers": "2.15.0",
-    "@antv/l7-maps": "2.8.31",
+    "@antv/l7-maps": "2.15.0",
-    "@antv/l7-renderer": "2.8.31",
+    "@antv/l7-renderer": "2.15.0",
-    "@antv/l7-scene": "2.8.31",
+    "@antv/l7-scene": "2.15.0",
-    "@antv/l7-source": "2.8.31",
+    "@antv/l7-source": "2.15.0",
-    "@antv/l7-utils": "2.8.31",
+    "@antv/l7-utils": "2.15.0",
     "@antv/s2": "1.35.0",
     "@antv/util": "^2.0.17",
     "@riophae/vue-treeselect": "0.4.0",

frontend/src/components/canvas/components/Toolbar.vue

@@ -191,7 +191,7 @@
         @click="batchOption"
       ><span
         class="icon-font-margin"
-      >{{ $t('panel.batch_opt') }}</span></span>
+      >{{ batchOptStatus?$t('panel.cancel_batch_opt'):$t('panel.batch_opt') }}</span></span>
       <span style="float: right;margin-right: 24px">
         <el-button
           size="mini"

frontend/src/components/canvas/components/editor/Preview.vue

@@ -115,6 +115,7 @@
           v-if="showChartInfoType==='enlarge' && hasDataPermission('export',panelInfo.privileges)&& showChartInfo && showChartInfo.type !== 'symbol-map'"
           class="el-icon-picture-outline"
           size="mini"
+          :disabled="imageDownloading"
           @click="exportViewImg"
         >
           {{ $t('chart.export_img') }}
@@ -122,6 +123,7 @@
         <el-button
           v-if="showChartInfoType==='details'&& hasDataPermission('export',panelInfo.privileges)"
           size="mini"
+          :disabled="$store.getters.loadingMap[$store.getters.currentPath]"
           @click="exportExcel"
         >
           <svg-icon
@@ -234,6 +236,7 @@ export default {
   },
   data() {
     return {
+      imageDownloading: false,
       chartDetailsVisible: false,
       showChartInfo: {},
       showChartTableInfo: {},
@@ -697,7 +700,10 @@ export default {
       this.$refs['userViewDialog-canvas-main'].exportExcel()
     },
     exportViewImg() {
-      this.$refs['userViewDialog-canvas-main'].exportViewImg()
+      this.imageDownloading = true
+      this.$refs['userViewDialog-canvas-main'].exportViewImg(()=>{
+        this.imageDownloading = false
+      })
     },
     deselectCurComponent(e) {
       if (!this.isClickComponent) {

frontend/src/components/canvas/components/editor/SettingMenu.vue

@@ -66,6 +66,12 @@
             @click.native="linkageSetting"
           >{{ $t('panel.linkage_setting') }}
           </el-dropdown-item>
+          <el-dropdown-item
+            v-if="tabCarouselShow"
+            icon="el-icon-switch-button"
+            @click.native="tabCarouselSet"
+          >{{ $t('panel.carousel') }}
+          </el-dropdown-item>
           <el-dropdown-item
             v-if="'de-tabs'===curComponent.type"
             icon="el-icon-plus"
@@ -115,6 +121,21 @@
       />
     </el-dialog>
 
+    <!--tab 轮播设计-->
+    <el-dialog
+      :visible.sync="tabCarouselVisible"
+      width="400px"
+      class="dialog-css"
+      :destroy-on-close="true"
+      :append-to-body="true"
+      :show-close="true"
+    >
+      <TabCarouselDialog
+        v-if="tabCarouselVisible"
+        @onClose="tabCarouselVisible = false"
+      />
+    </el-dialog>
+
     <el-dialog
       v-if="showCustomSort"
       v-dialogDrag
@@ -155,12 +176,14 @@ import { mapState } from 'vuex'
 import bus from '@/utils/bus'
 import { getViewLinkageGather } from '@/api/panel/linkage'
 import HyperlinksDialog from '@/components/canvas/components/editor/HyperlinksDialog'
+import TabCarouselDialog from '@/components/canvas/components/editor/TabCarouselDialog'
 import CustomTabsSort from '@/components/widget/deWidget/CustomTabsSort'
 
 export default {
-  components: { CustomTabsSort, HyperlinksDialog },
+  components: { CustomTabsSort, HyperlinksDialog,TabCarouselDialog },
   data() {
     return {
+      tabCarouselVisible: false,
       systemOS: 'Mac',
       showCustomSort: false,
       jumpExcludeViewType: [
@@ -189,6 +212,9 @@ export default {
     }
   },
   computed: {
+    tabCarouselShow() {
+      return this.curComponent.type === 'de-tabs'
+    },
     linkJumpSetShow() {
       return this.curComponent.type === 'view' &&
         !this.jumpExcludeViewType.includes(this.curComponent.propValue.innerType) &&
@@ -340,7 +366,12 @@ export default {
     // 超链接设置
     hyperlinksSet() {
       this.hyperlinksSetVisible = true
+    },
+    // 轮播设置
+    tabCarouselSet() {
+      this.tabCarouselVisible = true
     }
+
   }
 }
 </script>

frontend/src/components/canvas/components/editor/TabCarouselDialog.vue

@@ -0,0 +1,127 @@
+<template>
+  <el-row>
+    <el-form
+      ref="form"
+      size="mini"
+      label-width="70px"
+    >
+      <el-form-item :label="$t('panel.enable_carousel')">
+        <el-switch
+          v-model="carouselEnable"
+          size="mini"
+        />
+      </el-form-item>
+      <el-form-item :label="$t('panel.switch_time')">
+        <el-input
+          v-model="switchTime"
+          :disabled="!carouselEnable"
+          type="number"
+          size="mini"
+          :min="2"
+          :max="3600"
+          class="hide-icon-number number-padding"
+          @change="switchTimeChange"
+        >
+          <template slot="append">S</template>
+        </el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="primary"
+          @click="onSubmit"
+        >{{ $t('panel.confirm') }}</el-button>
+        <el-button @click="onClose">{{ $t('panel.cancel') }}</el-button>
+      </el-form-item>
+    </el-form>
+  </el-row>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  data() {
+    return {
+      carouselEnable: false,
+      switchTime: 50
+    }
+  },
+  computed: {
+    ...mapState([
+      'curComponent'
+    ])
+  },
+  created() {
+    this.carouselEnable = this.curComponent.style.carouselEnable
+    this.switchTime = this.curComponent.style.switchTime
+  },
+  mounted() {
+  },
+  methods: {
+    switchTimeChange() {
+      if (!this.switchTime || this.switchTime < 2) {
+        this.switchTime = 2
+      } else if (this.switchTime && this.switchTime > 3600) {
+        this.switchTime = 3600
+      }
+    },
+    onSubmit() {
+      this.curComponent.style.carouselEnable  = this.carouselEnable
+      this.curComponent.style.switchTime  = this.switchTime
+      this.$store.commit('canvasChange')
+      this.onClose()
+    },
+    onClose() {
+      this.$emit('onClose')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .slot-class{
+    color: white;
+  }
+
+  .bottom {
+    margin-top: 20px;
+    text-align: center;
+
+  }
+  .ellip{
+    /*width: 100%;*/
+    margin-left: 10px;
+    margin-right: 10px;
+    overflow: hidden;/*超出部分隐藏*/
+    white-space: nowrap;/*不换行*/
+    text-overflow:ellipsis;/*超出部分文字以...显示*/
+    background-color: #f7f8fa;
+    color: #3d4d66;
+    font-size: 12px;
+    line-height: 24px;
+    height: 24px;
+    border-radius: 3px;
+  }
+
+  .select-filed{
+    /*width: 100%;*/
+    margin-left: 10px;
+    margin-right: 10px;
+    overflow: hidden;/*超出部分隐藏*/
+    white-space: nowrap;/*不换行*/
+    text-overflow:ellipsis;/*超出部分文字以...显示*/
+    color: #3d4d66;
+    font-size: 12px;
+    line-height: 35px;
+    height: 35px;
+    border-radius: 3px;
+  }
+  ::v-deep .el-popover{
+    height: 200px;
+    overflow: auto;
+  }
+  .icon-font{
+    color: white;
+  }
+
+</style>

frontend/src/components/canvas/customComponent/UserView.vue

@@ -144,6 +144,7 @@
           v-if="showChartInfoType==='enlarge' && hasDataPermission('export',panelInfo.privileges)&& showChartInfo && showChartInfo.type !== 'symbol-map'"
           class="el-icon-picture-outline"
           size="mini"
+          :disabled ="imageDownloading"
           @click="exportViewImg"
         >
           {{ $t('chart.export_img') }}
@@ -151,6 +152,7 @@
         <el-button
           v-if="showChartInfoType==='details' && hasDataPermission('export',panelInfo.privileges)"
           size="mini"
+          :disabled="$store.getters.loadingMap[$store.getters.currentPath]"
           @click="exportExcel"
         >
           <svg-icon
@@ -306,6 +308,7 @@ export default {
   },
   data() {
     return {
+      imageDownloading: false,
       innerRefreshTimer: null,
       mobileChartDetailsVisible: false,
       chartDetailsVisible: false,
@@ -601,7 +604,10 @@ export default {
       this.$refs['userViewDialog'].exportExcel()
     },
     exportViewImg() {
-      this.$refs['userViewDialog'].exportViewImg()
+      this.imageDownloading = true
+      this.$refs['userViewDialog'].exportViewImg(()=>{
+        this.imageDownloading = false
+      })
     },
     pluginEditHandler(e) {
       this.$emit('trigger-plugin-edit', { e, id: this.element.id })

frontend/src/components/canvas/customComponent/UserViewDialog.vue

@@ -254,8 +254,8 @@ export default {
         }
       }
     },
-    exportViewImg() {
+    exportViewImg(callback) {
-      exportImg(this.chart.name)
+      exportImg(this.chart.name,callback)
     },
     setLastMapChart(data) {
       this.lastMapChart = JSON.parse(JSON.stringify(data))

frontend/src/components/canvas/utils/style.js

@@ -1,6 +1,7 @@
 import { cos, sin } from '@/components/canvas/utils/translate'
 import store from '@/store'
 import Vue from 'vue'
+import { DEFAULT_COLOR_CASE, DEFAULT_COLOR_CASE_DARK } from '@/views/chart/chart/chart'
 
 export const LIGHT_THEME_COLOR_MAIN = '#000000'
 export const LIGHT_THEME_COLOR_SLAVE1 = '#CCCCCC'
@@ -346,21 +347,22 @@ export function adaptCurTheme(customStyle, customAttr, chartType) {
     recursionThemTransObj(THEME_ATTR_TRANS_SLAVE1_BACKGROUND, customAttr, LIGHT_THEME_COMPONENT_BACKGROUND)
     if (chartType === 'symbol-map') {
       // 符号地图特殊处理
-      Vue.set(customStyle['baseMapStyle'], 'baseMapTheme', 'light')
+      Vue.set(customStyle, 'baseMapStyle', { baseMapTheme: 'light' })
     }
+    customAttr['color'] = { ...DEFAULT_COLOR_CASE, ...canvasStyle.chartInfo.chartColor }
   } else {
     recursionThemTransObj(THEME_STYLE_TRANS_MAIN, customStyle, DARK_THEME_COLOR_MAIN)
     recursionThemTransObj(THEME_STYLE_TRANS_SLAVE1, customStyle, DARK_THEME_COLOR_SLAVE1)
     if (chartType === 'symbol-map') {
       // 符号地图特殊处理
-      Vue.set(customStyle['baseMapStyle'], 'baseMapTheme', 'dark')
+      Vue.set(customStyle, 'baseMapStyle', { baseMapTheme: 'dark' })
       recursionThemTransObj(THEME_ATTR_TRANS_MAIN_SYMBOL, customAttr, '#000000')
     } else {
       recursionThemTransObj(THEME_ATTR_TRANS_MAIN, customAttr, DARK_THEME_COLOR_MAIN)
       recursionThemTransObj(THEME_ATTR_TRANS_SLAVE1_BACKGROUND, customAttr, DARK_THEME_COMPONENT_BACKGROUND_BACK)
     }
+    customAttr['color'] = { ...DEFAULT_COLOR_CASE_DARK, ...canvasStyle.chartInfo.chartColor }
   }
-  customAttr['color'] = { ...canvasStyle.chartInfo.chartColor }
   customStyle['text'] = {
     ...canvasStyle.chartInfo.chartTitle,
     title: customStyle['text']['title'],

frontend/src/components/canvas/utils/utils.js

@@ -212,7 +212,7 @@ export function checkViewTitle(opt, id, tile) {
   }
 }
 
-export function exportImg(imgName) {
+export function exportImg(imgName,callback) {
   const canvasID = document.getElementById('chartCanvas')
   const a = document.createElement('a')
   html2canvas(canvasID).then(canvas => {
@@ -227,6 +227,9 @@ export function exportImg(imgName) {
     a.click()
     URL.revokeObjectURL(blob)
     document.body.removeChild(a)
+    callback()
+  }).catch(() => {
+    callback()
   })
 }
 
@@ -374,10 +377,15 @@ export function insertBatchTreeNode(nodeInfoArray, tree) {
 }
 
 export function updateCacheTree(opt, treeName, nodeInfoFull, tree) {
-  const nodeInfo = {
+  const nodeInfo = deepCopy(nodeInfoFull)
-    ...nodeInfoFull,
+  if( nodeInfo instanceof Array){
-    panelData: null,
+    nodeInfo.forEach(item=>{
-    panelStyle: null
+      delete item.panelData
+      delete item.panelStyle
+    })
+  }else{
+    delete nodeInfo.panelData
+    delete nodeInfo.panelStyle
   }
   if (opt === 'new' || opt === 'copy') {
     insertTreeNode(nodeInfo, tree)

frontend/src/components/widget/deWidget/DeTabs.vue

@@ -278,6 +278,7 @@ export default {
   },
   data() {
     return {
+      tabsAreaScroll: false,
       timer: null,
       scrollLeft: 50,
       scrollTop: 10,
@@ -312,7 +313,11 @@ export default {
       return Boolean(this.$store.state.dragComponentInfo)
     },
     headClass() {
-      return 'tab-head-' + this.element.style.headPosition
+      if(this.tabsAreaScroll){
+        return 'tab-head-left'
+      }else{
+        return 'tab-head-' + this.element.style.headPosition
+      }
     },
     curCanvasScaleSelf() {
       return this.curCanvasScaleMap[this.canvasId]
@@ -405,6 +410,11 @@ export default {
         this.initCarousel()
       }
     },
+    'element': {
+      handler(newVal, oldVla) {
+        this.calcTabLength()
+      }
+    },
     activeTabName: {
       handler(newVal, oldVla) {
         this.$store.commit('setTabActiveTabNameMap', { tabId: this.element.id, activeTabName: this.activeTabName })
@@ -452,17 +462,30 @@ export default {
   },
   created() {
     bus.$on('add-new-tab', this.addNewTab)
-    this.activeTabName = this.element.options.tabList[0].name
+    this.$nextTick(() => {
+      this.activeTabName = this.element.options.tabList[0].name
+    });
     this.$store.commit('setTabActiveTabNameMap', { tabId: this.element.id, activeTabName: this.activeTabName })
     this.setContentThemeStyle()
   },
   mounted() {
     this.initCarousel()
+    this.calcTabLength()
   },
   beforeDestroy() {
     bus.$off('add-new-tab', this.addNewTab)
   },
   methods: {
+    calcTabLength(){
+      this.$nextTick(()=>{
+        if(this.element.options.tabList.length>1){
+          const containerDom = document.getElementById("tab-"+this.element.options.tabList[this.element.options.tabList.length -1].name)
+          this.tabsAreaScroll = containerDom.parentNode.scrollWidth > containerDom.parentNode.parentNode.scrollWidth
+        }else{
+          this.tabsAreaScroll = false
+        }
+      })
+    },
     getType() {
       return this.element.type
     },
@@ -501,11 +524,13 @@ export default {
         _this.timer = setInterval(() => {
           const nowIndex = switchCount % _this.element.options.tabList.length
           switchCount++
-          _this.activeTabName = _this.element.options.tabList[nowIndex].name
+          _this.$nextTick(() => {
-          const targetRef = _this.$refs['canvasTabRef-' + _this.activeTabName]
+            _this.activeTabName = _this.element.options.tabList[nowIndex].name
-          if (targetRef) {
+            const targetRef = _this.$refs['canvasTabRef-' + _this.activeTabName]
-            targetRef[0].restore()
+            if (targetRef) {
-          }
+              targetRef[0].restore()
+            }
+          });
         }, switchTime)
       }
     },

frontend/src/components/widget/deWidget/TabStyle.vue

@@ -112,39 +112,6 @@
           <el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
         </el-radio-group>
       </el-form-item>
-      <el-form-item :label="$t('panel.carousel')">
-        <el-row>
-          <el-col :span="6">
-            <el-checkbox
-              v-model="styleInfo.carouselEnable"
-              size="mini"
-              @change="styleChange"
-            >{{ $t('commons.enable') }}
-            </el-checkbox>
-          </el-col>
-          <el-col
-            :span="8"
-            style="text-align: right;padding-right: 10px"
-          >
-            {{ $t('panel.switch_time') }}
-          </el-col>
-          <el-col :span="10">
-            <el-input
-              v-model="styleInfo.switchTime"
-              :disabled="!styleInfo.carouselEnable"
-              type="number"
-              size="mini"
-              :min="2"
-              :max="3600"
-              class="hide-icon-number number-padding"
-              @change="switchTimeChange"
-            >
-              <template slot="append">S</template>
-            </el-input>
-          </el-col>
-
-        </el-row>
-      </el-form-item>
     </el-form>
     <i
       slot="reference"
@@ -181,14 +148,6 @@ export default {
       const current = this.$refs[pickKey]
       current && (current.showPicker = true)
     },
-    switchTimeChange() {
-      if (!this.styleInfo.switchTime || this.styleInfo.switchTime < 2) {
-        this.styleInfo.switchTime = 2
-      } else if (this.styleInfo.switchTime && this.styleInfo.switchTime > 3600) {
-        this.styleInfo.switchTime = 3600
-      }
-      this.styleChange()
-    },
     styleChange() {
       this.$store.commit('canvasChange')
     }

frontend/src/icons/svg/flow-map.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1676619734624" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="23822" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M907.411655 277.568736c2.943029 5.656837 5.427616 11.980869 7.264451 18.327414 3.611248 11.062963 5.176906 23.294542 5.176906 35.047214l0 509.329171c0 32.56365-12.879332 62.184271-34.588773 83.914178-21.709441 21.458731-51.579749 34.58775-84.373643 34.58775L210.172767 958.774463c-32.79287 0-62.643736-13.129019-83.914178-34.58775-21.709441-21.729907-35.297924-51.350528-35.297924-83.914178L90.960665 330.943364c0-32.56365 13.589506-62.643736 35.297924-84.352153 21.270443-21.500687 51.120284-34.609239 83.914178-34.609239l287.437501 0c10.165524-32.584116 28.492938-61.954027 51.559283-84.791152l1.378393-1.37737c37.530778-37.093826 90.00899-60.159148 146.994865-60.159148 57.904805 0 110.361527 23.524786 148.374282 61.536518l0 0c37.969776 37.530778 61.494563 90.217744 61.494563 147.664108L907.411655 277.568736 907.411655 277.568736zM697.54281 173.990706 697.54281 173.990706c28.263717 0 54.064336 11.522428 72.829725 29.849842 18.536168 18.995633 29.849842 44.795229 29.849842 72.829725 0 28.263717-11.313673 54.273091-29.849842 72.579015-18.765389 18.786878-44.566008 30.080086-72.829725 30.080086-28.034497 0-54.042847-11.293207-72.370261-30.080086-18.765389-18.305925-30.309306-44.315298-30.309306-72.579015 0-28.034497 11.543917-53.834092 30.309306-72.829725C643.499963 185.513134 669.509337 173.990706 697.54281 173.990706L697.54281 173.990706zM743.216036 230.977605 743.216036 230.977605c-11.752672-11.522428-28.034497-18.786878-45.673226-18.786878s-33.920554 7.264451-45.234227 18.786878c-11.751648 11.773138-19.224854 27.595498-19.224854 45.693692 0 17.86795 7.473205 33.900088 19.224854 45.441958 11.313673 11.774161 27.595498 19.246343 45.234227 19.246343s33.920554-7.473205 45.673226-19.246343c11.772115-11.542894 18.786878-27.574009 18.786878-45.441958C762.002914 258.573103 754.98815 242.750743 743.216036 230.977605L743.216036 230.977605zM488.134453 275.772834 488.134453 275.772834l-277.960663 0c-15.175631 0-28.952402 5.866614-39.139415 16.281825-9.936303 9.498328-16.281825 23.734564-16.281825 38.889729l0 509.329171c0 14.904455 6.345522 28.723182 16.281825 38.888705 10.187013 9.956769 23.963785 16.281825 39.139415 16.281825l590.717829 0c15.155165 0 29.181623-6.325056 39.139415-16.281825 9.956769-10.165524 16.281825-23.984251 16.281825-38.888705L856.31286 412.373978c-21.709441 24.861224-49.074695 44.774763-80.07371 57.216119l-63.770396 78.466096c-6.78452 8.141424-18.556635 9.05933-26.677593 2.505054-1.37737-0.710175-2.27481-1.607614-3.173273-2.505054l0 0-0.229221-0.437975-63.561641-78.027098c-37.969776-15.613606-70.554916-41.393759-93.850481-75.314313C501.70247 360.585475 488.134453 319.629691 488.134453 275.772834L488.134453 275.772834zM818.759569 153.86739 818.759569 153.86739c-30.747281-30.996968-73.727165-49.972135-121.215736-49.972135-46.590108 0-89.571015 18.515702-120.318296 49.054229l-0.918929 0.917906c-30.976502 31.207769-50.202379 74.396407-50.202379 120.987538 0 36.634362 11.334139 70.115917 30.309306 97.69095 19.893072 28.952402 47.948035 51.120284 80.740906 63.352887 3.402493 1.106194 5.886057 3.151783 8.350179 5.636371l52.039213 64.22986 52.456722-63.791885c1.816369-2.463098 4.550643-4.968152 7.93267-6.074346 33.023114-12.232602 61.266365-34.400484 80.72044-63.352887 19.455097-27.575032 30.768771-61.056588 30.768771-97.69095C869.420389 228.263797 849.75756 185.075159 818.759569 153.86739L818.759569 153.86739 818.759569 153.86739 818.759569 153.86739zM568.18565 516.619204 568.18565 516.619204c7.222495-7.451716 19.433608-7.451716 26.906813 0 7.451716 7.473205 7.451716 19.684318 0 27.157523l-52.707432 52.685943 109.464087 109.464087 122.134665-122.134665c7.242961-7.473205 19.455097-7.473205 26.906813 0 7.473205 7.68196 7.473205 19.684318 0 26.906813L679.006641 733.063815l40.913828 40.705074c7.473205 7.68196 7.473205 19.683295 0 27.136034-7.451716 7.68196-19.663852 7.68196-27.136034 0l-53.124941-53.834092-0.710175 0-0.208754-0.437975-0.459464-0.229221-0.229221-0.459464-0.437975-0.229221-0.229221-0.208754L515.708462 623.599727 295.882847 842.986343c-7.243985 7.222495-19.455097 7.222495-27.136034 0-7.264451-7.264451-7.264451-19.913539 0-26.906813L488.571405 596.46267l-90.468454-90.468454L251.086595 652.78135c-7.222495 7.451716-19.663852 7.451716-27.136034 0-7.222495-7.451716-7.222495-19.684318 0-27.157523l147.016355-146.765645-93.182262-92.973508c-7.68196-7.890714-7.68196-19.663852 0-27.115568 7.473205-7.473205 19.433608-7.473205 27.136034 0l105.85284 105.60213 0.229221 0.479931 0.208754 0.437975 0.459464 0.459464 0.437975 0.437975 103.598496 103.57803L568.18565 516.619204 568.18565 516.619204z" fill="#231815" p-id="23823"></path></svg>

frontend/src/lang/en.js

@@ -1522,7 +1522,25 @@ export default {
     table_auto_break_line: 'Auto Line Feed',
     table_break_line_tip: 'If open this option,the table item height will disabled.',
     step: 'Step(px)',
-    no_function: 'Function not enter，please input'
+    no_function: 'Function not enter，please input.',
+    chart_flow_map: 'Flow Map',
+    start_point: 'Start point(Lat/Long)',
+    end_point: 'End point(Lat/Long)',
+    line: 'Line',
+    map_style: 'Style',
+    map_pitch: 'Pitch',
+    map_rotation: 'Rotation',
+    map_style_normal: 'Normal',
+    map_style_light: 'Light',
+    map_style_dark: 'Dark',
+    map_style_whitesmoke: 'White Smoke',
+    map_style_fresh: 'Fresh',
+    map_style_grey: 'Grey',
+    map_style_graffiti: 'Graffiti',
+    map_style_macaron: 'Macaron',
+    map_style_blue: 'Blue',
+    map_style_darkblue: 'Dark Blue',
+    map_style_wine: 'Wine'
   },
   dataset: {
     scope_edit: 'Effective only when editing',
@@ -1983,6 +2001,7 @@ export default {
     position_adjust_component: 'Position adjust',
     active_font_size: 'Selected font size',
     carousel: 'Carousel',
+    enable_carousel: 'Enable Carousel',
     switch_time: 'Switch time',
     position_adjust: 'Position',
     space_top: 'Top',
@@ -2060,6 +2079,7 @@ export default {
     multiplexing: 'Multiplexing',
     panel_off: 'Off the shelf',
     batch_opt: 'Batch Operation',
+    cancel_batch_opt: 'Cancel Batch Operation',
     edit_leave_tips: 'Do You Want To Abandon And Leave The Current Page?',
     hyperlinks: 'Hyperlinks',
     is_live: 'Is Live',

frontend/src/lang/tw.js

@@ -1516,7 +1516,25 @@ export default {
     table_auto_break_line: '自動換行',
     table_break_line_tip: '開啟自動換行，表格行高設置將失效',
     step: '步長(px)',
-    no_function: '函數尚未支持直接引用，請在字段表達式中手動輸入'
+    no_function: '函數尚未支持直接引用，請在字段表達式中手動輸入。',
+    chart_flow_map: '流向地圖',
+    start_point: '起點經緯度',
+    end_point: '終點經緯度',
+    line: '線條',
+    map_style: '風格',
+    map_pitch: '傾角',
+    map_rotation: '旋轉',
+    map_style_normal: '標準',
+    map_style_light: '明亮',
+    map_style_dark: '暗黑',
+    map_style_whitesmoke: '遠山黛',
+    map_style_fresh: '草色青',
+    map_style_grey: '雅士灰',
+    map_style_graffiti: '塗鴉',
+    map_style_macaron: '馬卡龍',
+    map_style_blue: '靛青藍',
+    map_style_darkblue: '極夜藍',
+    map_style_wine: '醬籽'
   },
   dataset: {
     scope_edit: '僅編輯時生效',
@@ -1977,6 +1995,7 @@ export default {
     position_adjust_component: '位置調整',
     active_font_size: '选中字體大小',
     carousel: '輪播',
+    enable_carousel: '啟用輪播',
     switch_time: '切換時間',
     position_adjust: '位置',
     space_top: '上',
@@ -2054,6 +2073,7 @@ export default {
     multiplexing: '復用',
     panel_off: '儀表板已下架',
     batch_opt: '批量操作',
+    cancel_batch_opt: '退出批量操作',
     edit_leave_tips: '是否放棄編輯離開當前界面？',
     hyperlinks: '超鏈接',
     is_live: '是否直播',

frontend/src/lang/zh.js

@@ -1517,7 +1517,40 @@ export default {
     table_auto_break_line: '自动换行',
     table_break_line_tip: '开启自动换行，表格行高设置将失效',
     step: '步长(px)',
-    no_function: '函数尚未支持直接引用，请在字段表达式中手动输入'
+    no_function: '函数尚未支持直接引用，请在字段表达式中手动输入。',
+    chart_flow_map: '流向地图',
+    start_point: '起点经纬度',
+    end_point: '终点经纬度',
+    line: '线条',
+    map_style: '风格',
+    map_pitch: '倾角',
+    map_rotation: '旋转',
+    map_style_normal: '标准',
+    map_style_light: '明亮',
+    map_style_dark: '暗黑',
+    map_style_whitesmoke: '远山黛',
+    map_style_fresh: '草色青',
+    map_style_grey: '雅士灰',
+    map_style_graffiti: '涂鸦',
+    map_style_macaron: '马卡龙',
+    map_style_blue: '靛青蓝',
+    map_style_darkblue: '极夜蓝',
+    map_style_wine: '酱籽',
+    map_line_type: '类型',
+    map_line_width: '线条宽度',
+    map_line_height: '线条高度',
+    map_line_linear: '渐变',
+    map_line_animate: '动画',
+    map_line_animate_duration: '动画间隔',
+    map_line_animate_interval: '轨迹间隔',
+    map_line_animate_trail_length: '轨迹长度',
+    map_line_type_line: '直线',
+    map_line_type_arc: '弧线',
+    map_line_type_arc_3d: '3D 弧线',
+    map_line_type_great_circle: '大圆弧',
+    map_line_color_source_color: '起始颜色',
+    map_line_color_target_color: '结束颜色',
+    map_line_theta_offset: '弧度'
   },
   dataset: {
     scope_edit: '仅编辑时生效',
@@ -1979,6 +2012,7 @@ export default {
     position_adjust_component: '位置调整',
     active_font_size: '选中字体大小',
     carousel: '轮播',
+    enable_carousel: '启用轮播',
     switch_time: '切换时间',
     position_adjust: '位置',
     space_top: '上',
@@ -2056,6 +2090,7 @@ export default {
     multiplexing: '复用',
     panel_off: '仪表板已下架',
     batch_opt: '批量操作',
+    cancel_batch_opt: '退出批量操作',
     edit_leave_tips: '是否放弃编辑离开当前界面？',
     hyperlinks: '超链接',
     is_live: '是否直播',

frontend/src/views/chart/chart/chart.js

@@ -31,7 +31,11 @@ export const DEFAULT_COLOR_CASE = {
   gradient: false,
   areaBaseColor: '#FFFFFF',
   tableScrollBarColor: 'rgba(0, 0, 0, 0.15)',
-  tableScrollBarHoverColor: 'rgba(0, 0, 0, 0.4)'
+  tableScrollBarHoverColor: 'rgba(0, 0, 0, 0.4)',
+  mapStyle: 'normal',
+  mapLineGradient: false,
+  mapLineSourceColor: '#146C94',
+  mapLineTargetColor: '#576CBC',
 }
 
 export const DEFAULT_COLOR_CASE_DARK = {
@@ -49,7 +53,11 @@ export const DEFAULT_COLOR_CASE_DARK = {
   areaBorderColor: '#EBEEF5',
   areaBaseColor: '5470C6',
   tableScrollBarColor: 'rgba(255, 255, 255, 0.5)',
-  tableScrollBarHoverColor: 'rgba(255, 255, 255, 0.8)'
+  tableScrollBarHoverColor: 'rgba(255, 255, 255, 0.8)',
+  mapStyle: 'darkblue',
+  mapLineGradient: false,
+  mapLineSourceColor: '#2F58CD',
+  mapLineTargetColor: '#3795BD',
 }
 export const DEFAULT_SIZE = {
   barDefault: true,
@@ -130,7 +138,14 @@ export const DEFAULT_SIZE = {
   showIndex: false,
   indexLabel: '序号',
   hPosition: 'center',
-  vPosition: 'center'
+  vPosition: 'center',
+  mapPitch: 0,
+  mapLineType: 'arc',
+  mapLineWidth: 1,
+  mapLineAnimate: true,
+  mapLineAnimateDuration: 3,
+  mapLineAnimateInterval: 1,
+  mapLineAnimateTrailLength: 1
 }
 export const DEFAULT_SUSPENSION = {
   show: true
@@ -1144,3 +1159,13 @@ export const CHART_FONT_LETTER_SPACE = [
 export const NOT_SUPPORT_PAGE_DATASET = ['kylin', 'sqlServer', 'es', 'presto', 'ds_doris', 'StarRocks', 'impala']
 
 export const SUPPORT_Y_M = ['y', 'y_M', 'y_M_d']
+
+export const DEFAULT_MAP = {
+  mapPitch: 0,
+  lineType: 'line',
+  lineWidth: 1,
+  lineAnimate: true,
+  lineAnimateDuration: 4,
+  lineAnimateInterval: 0.5,
+  lineAnimateTrailLength: 0.1
+}

frontend/src/views/chart/chart/common/common_antv.js

@@ -104,9 +104,9 @@ export function getTheme(chart) {
       }
     }
   }
-  // 百分比堆叠柱状图需要取消 offset，因为在顶部类别占比较低的时候有可能会把标签挤出去
+  // 堆叠柱状图需要取消 offset，因为在顶部类别占比较低的时候有可能会把标签挤出去
   // 并且视觉上也比较不舒服
-  if (chart.type === 'percentage-bar-stack') {
+  if (equalsAny(chart.type, 'percentage-bar-stack', 'bar-group-stack')) {
     theme.innerLabels.offset = 0
   }
   return theme

frontend/src/views/chart/chart/map/map_antv.js

@@ -0,0 +1,81 @@
+import { Scene, LineLayer } from '@antv/l7'
+import { GaodeMap } from '@antv/l7-maps'
+import { getLanguage } from '@/lang'
+
+export function baseFlowMapOption(chartDom, chartId, chart, action) {
+  const xAxis = JSON.parse(chart.xaxis)
+  const xAxisExt = JSON.parse(chart.xaxisExt)
+  let customAttr
+  if (chart.customAttr) {
+    customAttr = JSON.parse(chart.customAttr)
+  }
+  const size = customAttr.size
+  const color = customAttr.color
+  const mapStyle = `amap://styles/${color.mapStyle ? color.mapStyle : 'normal'}`
+  const lang = getLanguage().includes('zh') ? 'zh' : 'en'
+  let init = false
+  if (!chartDom) {
+    chartDom = new Scene({
+      id: chartId,
+      map: new GaodeMap({
+        lang: lang,
+        pitch: size.mapPitch,
+        style: mapStyle
+      }),
+      logoVisible: false
+    })
+    init = true
+  } else {
+    if (chartDom.map) {
+      chartDom.setPitch(size.mapPitch)
+      chartDom.setMapStyle(mapStyle)
+    }
+  }
+  if (xAxis?.length < 2 || xAxisExt?.length < 2) {
+    return chartDom
+  }
+  chartDom.removeAllLayer()
+    .then(() => {
+      const lineLayer = new LineLayer({
+        name: 'line',
+        blend: 'normal',
+        autoFit: true
+      })
+        .source(chart.data.tableRow, {
+          parser: {
+            type: 'json',
+            x: xAxis[0].dataeaseName,
+            y: xAxis[1].dataeaseName,
+            x1: xAxisExt[0].dataeaseName,
+            y1: xAxisExt[1].dataeaseName
+          }
+        })
+        .size(size.mapLineWidth)
+        .shape(size.mapLineType)
+        .animate({
+          enable: size.mapLineAnimate,
+          duration: size.mapLineAnimateDuration,
+          interval: 1,
+          trailLength: 1
+        })
+      if (color.mapLineGradient) {
+        lineLayer.style({
+          sourceColor: color.mapLineSourceColor,
+          targetColor: color.mapLineTargetColor,
+          opacity: color.alpha / 100
+        })
+      } else {
+        lineLayer.style({
+          opacity: color.alpha / 100
+        })
+          .color(color.mapLineSourceColor)
+      }
+      if (!init) {
+        chartDom.addLayer(lineLayer)
+      }
+      chartDom.on('loaded', () => {
+        chartDom.addLayer(lineLayer)
+      })
+    })
+  return chartDom
+}

frontend/src/views/chart/chart/util.js

@@ -1830,6 +1830,49 @@ export const TYPE_CONFIGS = [
       ]
     }
   },
+  {
+    render: 'antv',
+    category: 'chart.chart_type_space',
+    value: 'flow-map',
+    title: 'chart.chart_flow_map',
+    icon: 'flow-map',
+    properties: [
+      'color-selector',
+      'size-selector-ant-v',
+      'title-selector-ant-v'
+    ],
+    propertyInner: {
+      'color-selector': [
+        'alpha',
+        'mapStyle',
+        'mapLineGradient',
+        'mapLineSourceColor',
+        'mapLineTargetColor'
+      ],
+      'size-selector-ant-v': [
+        'mapPitch',
+        'mapLineType',
+        'mapLineWidth',
+        'mapLineAnimate',
+        'mapLineAnimateDuration',
+        'mapLineAnimateInterval',
+        'mapLineAnimateTrailLength',
+      ],
+      'title-selector-ant-v': [
+        'show',
+        'title',
+        'fontSize',
+        'color',
+        'hPosition',
+        'isItalic',
+        'isBolder',
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
+      ]
+    }
+  },
   /* 下面是echarts图表类型 */
   {
     render: 'echarts',

frontend/src/views/chart/components/ChartComponentG2.vue

@@ -59,6 +59,7 @@ import { baseMixOptionAntV } from '@/views/chart/chart/mix/mix_antv'
 import ChartTitleUpdate from './ChartTitleUpdate.vue'
 import { equalsAny } from '@/utils/StringUtils'
 import { mapState } from 'vuex'
+import { baseFlowMapOption } from '@/views/chart/chart/map/map_antv'
 
 export default {
   name: 'ChartComponentG2',
@@ -274,6 +275,8 @@ export default {
         this.myChart = baseWordCloudOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
       } else if (chart.type === 'chart-mix') {
         this.myChart = baseMixOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
+      } else if (chart.type === 'flow-map') {
+        this.myChart = baseFlowMapOption(this.myChart, this.chartId, chart, this.antVAction)
       } else {
         if (this.myChart) {
           this.antVRenderStatus = false
@@ -281,10 +284,10 @@ export default {
         }
       }
 
-      if (this.myChart && chart.type !== 'liquid' && this.searchCount > 0) {
+      if (this.myChart && !equalsAny(chart.type ,'liquid','flow-map') && this.searchCount > 0) {
         this.myChart.options.animation = false
       }
-      if (this.myChart.options.legend) {
+      if (this.myChart?.options?.legend) {
         let pageNavigatorInactiveFill, pageNavigatorFill
         if (this.canvasStyleData.panel.themeColor === 'dark') {
           pageNavigatorFill = '#ffffff'
@@ -402,6 +405,10 @@ export default {
           this.title_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
           this.borderRadius = (customStyle.background.borderRadius || 0) + 'px'
         }
+        if (this.chart.type === 'flow-map') {
+          this.title_class.zIndex = 4
+          this.title_class.position = 'absolute'
+        }
       }
       this.initRemark()
     },

frontend/src/views/chart/components/dragItem/DimensionExtItem.vue

@@ -298,7 +298,10 @@ export default {
     },
     getDateExtStatus() {
       if (this.chart) {
-        this.showDateExt = this.chart.datasourceType === 'mysql' && this.chart.datasetMode === 0
+        this.showDateExt = this.showDateExt = this.chart.datasourceType === 'mysql' ||
+          this.chart.datasourceType === 'ds_doris' ||
+          this.chart.datasourceType === 'StarRocks' ||
+          this.chart.datasetMode === 1
       } else {
         this.showDateExt = false
       }

frontend/src/views/chart/components/dragItem/DimensionItem.vue

@@ -342,7 +342,10 @@ export default {
 
     getDateExtStatus() {
       if (this.chart) {
-        this.showDateExt = this.chart.datasourceType === 'mysql' && this.chart.datasetMode === 0
+        this.showDateExt = this.chart.datasourceType === 'mysql' ||
+          this.chart.datasourceType === 'ds_doris' ||
+          this.chart.datasourceType === 'StarRocks' ||
+          this.chart.datasetMode === 1
       } else {
         this.showDateExt = false
       }

frontend/src/views/chart/components/shapeAttr/ColorSelector.vue

@@ -263,7 +263,23 @@
             />
           </el-form-item>
         </div>
-
+        <el-form-item
+          v-show="showProperty('mapStyle')"
+          :label="$t('chart.map_style')"
+          class="form-item"
+        >
+          <el-select
+            v-model="colorForm.mapStyle"
+            @change="changeColorCase('mapStyle')"
+          >
+            <el-option
+              v-for="item in mapStyleOptions"
+              :key="item.name"
+              :label="item.name"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
         <el-form-item
           v-show="showProperty('alpha')"
           :label="$t('chart.not_alpha')"
@@ -277,7 +293,38 @@
             @change="changeColorCase('alpha')"
           />
         </el-form-item>
-
+        <el-form-item
+          v-show="showProperty('mapLineGradient')"
+          :label="$t('chart.gradient')"
+          class="form-item"
+        >
+          <el-checkbox
+            v-model="colorForm.mapLineGradient"
+            :disabled="checkMapLineGradient"
+            @change="changeColorCase('mapLineGradient')"
+          />
+        </el-form-item>
+        <el-form-item
+          v-show="showProperty('mapLineSourceColor')"
+          :label="colorForm.mapLineGradient ? $t('chart.map_line_color_source_color') : $t('chart.color')"
+          class="form-item"
+        >
+          <el-color-picker
+            v-model="colorForm.mapLineSourceColor"
+            @change="changeColorCase('mapLineSourceColor')"
+          />
+        </el-form-item>
+        <el-form-item
+          v-show="showProperty('mapLineTargetColor')"
+          v-if="colorForm.mapLineGradient"
+          :label="$t('chart.map_line_color_target_color')"
+          class="form-item"
+        >
+          <el-color-picker
+            v-model="colorForm.mapLineTargetColor"
+            @change="changeColorCase('mapLineTargetColor')"
+          />
+        </el-form-item>
         <el-form-item
           v-show="showProperty('area-border-color') "
           :label="$t('chart.area_border_color')"
@@ -301,6 +348,7 @@ import { getColors } from '@/views/chart/chart/util'
 import { mapState } from 'vuex'
 import GradientColorSelector from '@/components/gradientColorSelector'
 import bus from '@/utils/bus'
+import { equalsAny } from '@/utils/StringUtils'
 
 export default {
   name: 'ColorSelector',
@@ -414,10 +462,36 @@ export default {
       colorForm: JSON.parse(JSON.stringify(DEFAULT_COLOR_CASE)),
       customColor: null,
       colorIndex: 0,
-      predefineColors: COLOR_PANEL
+      predefineColors: COLOR_PANEL,
+      mapStyleOptions: [
+        { name: this.$t('chart.map_style_normal'), value: 'normal' },
+        { name: this.$t('chart.map_style_darkblue'), value: 'darkblue' },
+        { name: this.$t('chart.map_style_light'), value: 'light' },
+        { name: this.$t('chart.map_style_dark'), value: 'dark' },
+        { name: this.$t('chart.map_style_whitesmoke'), value: 'whitesmoke' },
+        { name: this.$t('chart.map_style_fresh'), value: 'fresh' },
+        { name: this.$t('chart.map_style_grey'), value: 'grey' },
+        { name: this.$t('chart.map_style_graffiti'), value: 'graffiti' },
+        { name: this.$t('chart.map_style_macaron'), value: 'macaron' },
+        { name: this.$t('chart.map_style_blue'), value: 'blue' },
+        { name: this.$t('chart.map_style_wine'), value: 'wine' }
+      ]
     }
   },
   computed: {
+    checkMapLineGradient() {
+      const chart = this.chart
+      if (chart.type === 'flow-map') {
+        let customAttr = null
+        if (Object.prototype.toString.call(chart.customAttr) === '[object Object]') {
+          customAttr = JSON.parse(JSON.stringify(chart.customAttr))
+        } else {
+          customAttr = JSON.parse(chart.customAttr)
+        }
+        return customAttr.size.mapLineAnimate && equalsAny(customAttr.size.mapLineType, 'line', 'arc')
+      }
+      return false
+    },
     ...mapState([
       'batchOptStatus',
       'componentViewsData'
@@ -494,6 +568,11 @@ export default {
           this.$set(this.colorForm, 'gradient', this.colorForm.gradient || false)
           this.colorForm.tableScrollBarColor = this.colorForm.tableScrollBarColor ? this.colorForm.tableScrollBarColor : DEFAULT_COLOR_CASE.tableScrollBarColor
 
+          this.colorForm.mapStyle = this.colorForm.mapStyle ? this.colorForm.mapStyle : DEFAULT_COLOR_CASE.mapStyle
+          this.colorForm.mapLineGradient = this.colorForm.mapLineGradient ? this.colorForm.mapLineGradient : DEFAULT_COLOR_CASE.mapLineGradient
+          this.colorForm.mapLineSourceColor = this.colorForm.mapLineSourceColor ? this.colorForm.mapLineSourceColor : DEFAULT_COLOR_CASE.mapLineSourceColor
+          this.colorForm.mapLineTargetColor = this.colorForm.mapLineTargetColor ? this.colorForm.mapLineTargetColor : DEFAULT_COLOR_CASE.mapLineTargetColor
+
           this.initCustomColor()
         }
       }

frontend/src/views/chart/components/shapeAttr/SizeSelectorAntV.vue

@@ -1256,13 +1256,115 @@
           />
         </el-form-item>
       </el-form>
-
+      <!--flow-map-start-->
+      <el-form
+        ref="flowMapForm"
+        :model="sizeForm"
+        label-width="80px"
+        size="mini"
+      >
+        <el-form-item
+          v-show="showProperty('mapPitch')"
+          :label="$t('chart.map_pitch')"
+          class="form-item form-item-slider"
+        >
+          <el-slider
+            v-model="sizeForm.mapPitch"
+            :min="0"
+            :max="90"
+            @change="changeBarSizeCase('mapPitch')"
+          />
+        </el-form-item>
+        <el-form-item
+          v-show="showProperty('mapLineType')"
+          :label="$t('chart.map_line_type')"
+          class="form-item"
+        >
+          <el-select
+            v-model="sizeForm.mapLineType"
+            @change="changeBarSizeCase('mapLineType')"
+          >
+            <el-option
+              v-for="item in lineTypeOptions"
+              :key="item.name"
+              :label="item.name"
+              :value="item.value"
+              :disabled="checkMapLineType(item)"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          v-show="showProperty('mapLineWidth')"
+          :label="$t('chart.map_line_width')"
+          class="form-item form-item-slider"
+        >
+          <el-slider
+            v-model="sizeForm.mapLineWidth"
+            :min="1"
+            :max="10"
+            @change="changeBarSizeCase('mapLineWidth')"
+          />
+        </el-form-item>
+        <el-form-item
+          v-show="false"
+          :label="$t('chart.map_line_animate')"
+          class="form-item"
+        >
+          <el-checkbox
+            v-model="sizeForm.mapLineAnimate"
+            :disabled="checkMapLineAnimate"
+            @change="changeBarSizeCase('mapLineAnimate')"
+          />
+        </el-form-item>
+        <div v-if="sizeForm.mapLineAnimate">
+          <el-form-item
+            v-show="showProperty('mapLineAnimateDuration')"
+            :label="$t('chart.map_line_animate_duration')"
+            class="form-item form-item-slider"
+          >
+            <el-slider
+              v-model="sizeForm.mapLineAnimateDuration"
+              :min="0"
+              :max="20"
+              @change="changeBarSizeCase('mapLineAnimateDuration')"
+            />
+          </el-form-item>
+          <el-form-item
+            v-show="false"
+            :label="$t('chart.map_line_animate_interval')"
+            class="form-item form-item-slider"
+          >
+            <el-slider
+              v-model="sizeForm.mapLineAnimateInterval"
+              :min="0"
+              :max="1"
+              :step="0.1"
+              @change="changeBarSizeCase('mapLineAnimateInterval')"
+            />
+          </el-form-item>
+          <el-form-item
+            v-show="false"
+            :label="$t('chart.map_line_animate_trail_length')"
+            class="form-item form-item-slider"
+          >
+            <el-slider
+              v-model="sizeForm.mapLineAnimateTrailLength"
+              :min="0"
+              :max="1"
+              :step="0.1"
+              @change="changeBarSizeCase('mapLineAnimateTrailLength')"
+            />
+          </el-form-item>
+        </div>
+      </el-form>
+      <!--flow-map-end-->
     </el-col>
   </div>
 </template>
 
 <script>
 import { CHART_FONT_FAMILY, CHART_FONT_LETTER_SPACE, DEFAULT_SIZE } from '../../chart/chart'
+import { equalsAny } from '@/utils/StringUtils'
 
 export default {
   name: 'SizeSelectorAntV',
@@ -1321,7 +1423,12 @@ export default {
       minField: {},
       maxField: {},
       liquidMaxField: {},
-      quotaData: []
+      quotaData: [],
+      lineTypeOptions: [
+        { name: this.$t('chart.map_line_type_line'), value: 'line' },
+        { name: this.$t('chart.map_line_type_arc'), value: 'arc' },
+        { name: this.$t('chart.map_line_type_arc_3d'), value: 'arc3d' }
+      ]
     }
   },
   computed: {
@@ -1333,6 +1440,19 @@ export default {
     },
     validMaxField() {
       return this.isValidField(this.maxField)
+    },
+    checkMapLineAnimate() {
+      const chart = this.chart
+      if (chart.type === 'flow-map') {
+        let customAttr = null
+        if (Object.prototype.toString.call(chart.customAttr) === '[object Object]') {
+          customAttr = JSON.parse(JSON.stringify(chart.customAttr))
+        } else {
+          customAttr = JSON.parse(chart.customAttr)
+        }
+        return customAttr.color.mapLineGradient && equalsAny(this.sizeForm.mapLineType, 'line', 'arc')
+      }
+      return false
     }
   },
   watch: {
@@ -1435,6 +1555,14 @@ export default {
 
           this.sizeForm.hPosition = this.sizeForm.hPosition ? this.sizeForm.hPosition : DEFAULT_SIZE.hPosition
           this.sizeForm.vPosition = this.sizeForm.vPosition ? this.sizeForm.vPosition : DEFAULT_SIZE.vPosition
+
+          this.sizeForm.mapPitch = this.sizeForm.mapPitch ? this.sizeForm.mapPitch : DEFAULT_SIZE.mapPitch
+          this.sizeForm.mapLineType = this.sizeForm.mapLineType ? this.sizeForm.mapLineType : DEFAULT_SIZE.mapLineType
+          this.sizeForm.mapLineWidth = this.sizeForm.mapLineWidth ? this.sizeForm.mapLineWidth : DEFAULT_SIZE.mapLineWidth
+          this.sizeForm.mapLineAnimate = this.sizeForm.mapLineAnimate !== undefined ? this.sizeForm.mapLineAnimate : DEFAULT_SIZE.mapLineAnimate
+          this.sizeForm.mapLineAnimateDuration = this.sizeForm.mapLineAnimateDuration !== undefined ? this.sizeForm.mapLineAnimateDuration : DEFAULT_SIZE.mapLineAnimateDuration
+          this.sizeForm.mapLineAnimateInterval = this.sizeForm.mapLineAnimateInterval !== undefined ? this.sizeForm.mapLineAnimateInterval : DEFAULT_SIZE.mapLineAnimateInterval
+          this.sizeForm.mapLineAnimateTrailLength = this.sizeForm.mapLineAnimateTrailLength !== undefined ? this.sizeForm.mapLineAnimateTrailLength : DEFAULT_SIZE.mapLineAnimateTrailLength
         }
       }
     },
@@ -1545,6 +1673,21 @@ export default {
         field.deType !== 0 &&
         field.deType !== 1 &&
         field.deType !== 5
+    },
+    checkMapLineType(item) {
+      const chart = this.chart
+      if (chart.type === 'flow-map') {
+        let customAttr = null
+        if (Object.prototype.toString.call(chart.customAttr) === '[object Object]') {
+          customAttr = JSON.parse(JSON.stringify(chart.customAttr))
+        } else {
+          customAttr = JSON.parse(chart.customAttr)
+        }
+        if (customAttr.color.mapLineGradient && customAttr.size.mapLineAnimate) {
+          return equalsAny(item.value, 'line', 'arc')
+        }
+      }
+      return false
     }
   }
 }

frontend/src/views/chart/group/Group.vue

@@ -1355,8 +1355,8 @@ export default {
 }
 
 .chart-icon {
-  width: 200px;
+  width: 200px !important;
-  height: 200px;
+  height: 200px !important;
 }
 
 .chart-box {

frontend/src/views/chart/view/ChartEdit.vue

@@ -576,8 +576,11 @@
                           $t('chart.drag_block_word_cloud_label')
                         }}</span>
                         <span v-else-if="view.type && view.type === 'label'">{{ $t('chart.drag_block_label') }}</span>
+                        <span v-else-if="view.type === 'flow-map'">{{ $t('chart.start_point') }}</span>
                         <span v-show="view.type !== 'richTextView'"> / </span>
-                        <span v-if="view.type && view.type !== 'table-info'">{{ $t('chart.dimension') }}</span>
+                        <span v-if="view.type && view.type !== 'table-info'">
+                          {{ $t('chart.dimension') }}
+                        </span>
                         <span
                           v-else-if="view.type && view.type === 'table-info'"
                         >{{ $t('chart.dimension_or_quota') }}</span>
@@ -625,12 +628,14 @@
                     <el-row
                       v-if="view.type === 'bar-group'
                         || view.type === 'bar-group-stack'
-                        || (view.render === 'antv' && view.type === 'line')"
+                        || (view.render === 'antv' && view.type === 'line')
+                        || view.type === 'flow-map'"
                       class="padding-lr"
                     >
                       <span class="data-area-label">
                         <span>
-                          {{ $t('chart.chart_group') }}
+                          <span v-if="view.type !=='flow-map'">{{ $t('chart.chart_group') }}</span>
+                          <span v-else-if="view.type === 'flow-map'">{{ $t('chart.end_point') }}</span>
                           <span
                             v-show="view.type !== 'line'"
                             style="color:#F54A45;"
@@ -692,7 +697,7 @@
                     </el-row>
                     <!--yaxis-->
                     <el-row
-                      v-if="view.type !=='table-info' && view.type !=='label'"
+                      v-if="!equalsAny(view.type , 'table-info', 'label', 'flow-map')"
                       class="padding-lr"
                       style="margin-top: 6px;"
                     >
@@ -701,7 +706,9 @@
                           $t('chart.drag_block_table_data_column')
                         }}</span>
                         <span
-                          v-else-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter') || view.type === 'waterfall' || view.type === 'area')"
+                          v-else-if="view.type
+                            && (includesAny(view.type,'bar','line','scatter')
+                              || equalsAny(view.type,'waterfall','area','flow-map'))"
                         >{{ $t('chart.drag_block_value_axis') }}</span>
                         <span
                           v-else-if="view.type && view.type.includes('pie')"
@@ -976,7 +983,12 @@
                       </div>
                     </el-row>
                     <el-row
-                      v-if="view.type && !(view.type.includes('table') && view.render === 'echarts') && !view.type.includes('text') && !view.type.includes('gauge') && view.type !== 'liquid' && view.type !== 'word-cloud' && view.type !== 'table-pivot' && view.type !=='label'&&view.type !=='richTextView'"
+                      v-if="view.type
+                        && !(view.type.includes('table') && view.render === 'echarts')
+                        && !view.type.includes('text') && !view.type.includes('gauge')
+                        && view.type !== 'liquid' && view.type !== 'word-cloud'
+                        && view.type !== 'table-pivot' && view.type !=='label'
+                        && view.type !=='richTextView' && view.type !== 'flow-map'"
                       class="padding-lr"
                       style="margin-top: 6px;"
                     >
@@ -1065,6 +1077,7 @@
             @onChangeBackgroundForm="onChangeBackgroundForm"
             @onSuspensionChange="onSuspensionChange"
             @onMarkChange="onMarkChange"
+            @onMapChange="onMapChange"
           />
         </el-tab-pane>
         <el-tab-pane
@@ -1745,7 +1758,7 @@ import CustomSortEdit from '@/views/chart/components/compare/CustomSortEdit'
 import ScrollCfg from '@/views/chart/components/senior/ScrollCfg'
 import ChartFieldEdit from '@/views/chart/view/ChartFieldEdit'
 import CalcChartFieldEdit from '@/views/chart/view/CalcChartFieldEdit'
-import { equalsAny } from '@/utils/StringUtils'
+import { equalsAny, includesAny } from '@/utils/StringUtils'
 import PositionAdjust from '@/views/chart/view/PositionAdjust'
 import MarkMapDataEditor from '@/views/chart/components/map/MarkMapDataEditor'
 
@@ -2017,6 +2030,8 @@ export default {
   },
 
   methods: {
+    includesAny,
+    equalsAny,
     setTitle(title, id) {
       if (this.view.id !== id) return
       this.view.customStyle.text = { ...this.view.customStyle.text, title }
@@ -2217,7 +2232,8 @@ export default {
           ele.filter = []
         }
       })
-      if (view.type === 'table-pivot' || view.type === 'bar-group' || (view.render === 'antv' && view.type === 'line')) {
+      if (equalsAny(view.type, 'table-pivot', 'bar-group', 'bar-group-stack', 'flow-map') ||
+        (view.render === 'antv' && view.type === 'line')) {
         view.xaxisExt.forEach(function(ele) {
           if (!ele.dateStyle || ele.dateStyle === '') {
             ele.dateStyle = 'y_M_d'
@@ -2686,7 +2702,10 @@ export default {
       this.view.senior.mapMapping = val
       this.calcStyle()
     },
-
+    onMapChange(val) {
+      this.view.customAttr.map = val
+      this.calcStyle()
+    },
     showDimensionEditFilter(item) {
       this.dimensionItem = JSON.parse(JSON.stringify(item))
       this.dimensionFilterEdit = true

frontend/src/views/panel/panel.js

@@ -73,7 +73,7 @@ export const CANVAS_STYLE = {
     showPageLine: false,
     proportion: null
   },
-  refreshViewEnable: true, // 开启视图刷新（默认开启）
+  refreshViewEnable: false, // 开启视图刷新（默认关闭）
   refreshViewLoading: true, // 仪表板视图loading提示
   refreshUnit: 'minute', // 仪表板刷新时间带外 默认 分钟
   refreshTime: 5, // 仪表板刷新时间 默认5分钟

frontend/src/views/system/relationship/consanguinity.vue

@@ -339,6 +339,7 @@ export default {
       return [list, gap]
     },
     initEchart(clickNode = []) {
+      if (!this.treeData.length) return
       if (this.myChart) {
         this.myChart.dispose()
         this.myChart = null

frontend/webpack.dll.conf.js

@@ -1,44 +1,46 @@
-const path = require('path');
+const path = require('path');
-const webpack = require('webpack');
+const webpack = require('webpack');
-const CleanWebpackPlugin = require('clean-webpack-plugin');
+const CleanWebpackPlugin = require('clean-webpack-plugin');
-
+
-// dll文件存放的目录
+// dll文件存放的目录
-const dllPath = 'public/vendor';
+const dllPath = 'public/vendor';
-
+
-module.exports = {
+module.exports = {
-  entry: {
+  entry: {
-    // 需要提取的库文件
+    // 需要提取的库文件
-    vendor: [
+    vendor: [
-      'vue',
+      'vue',
-      'vue-router',
+      'vue-router',
-      'vuex',
+      'vuex',
-      'axios',
+      'axios',
-      'element-ui',
+      'element-ui',
-      'echarts',
+      'echarts',
-      '@antv/g2plot',
+      '@antv/g2plot',
-      '@antv/l7-maps',
+      '@antv/l7-maps',
-      '@antv/s2',
+      '@antv/l7-core',
-      'lodash',
+      '@antv/l7-utils',
-    ],
+      '@antv/s2',
-  },
+      'lodash',
-  output: {
+    ],
-    path: path.join(__dirname, dllPath),
+  },
-    filename: '[name].dll.js',
+  output: {
-    // vendor.dll.js中暴露出的全局变量名
+    path: path.join(__dirname, dllPath),
-    // 保持与 webpack.DllPlugin 中名称一致
+    filename: '[name].dll.js',
-    library: '[name]_[hash]',
+    // vendor.dll.js中暴露出的全局变量名
-  },
+    // 保持与 webpack.DllPlugin 中名称一致
-  plugins: [
+    library: '[name]_[hash]',
-    // 清除之前的dll文件
+  },
-    new CleanWebpackPlugin(['*.*'], {
+  plugins: [
-      root: path.join(__dirname, dllPath),
+    // 清除之前的dll文件
-    }),
+    new CleanWebpackPlugin(['*.*'], {
-    // manifest.json 描述动态链接库包含了哪些内容
+      root: path.join(__dirname, dllPath),
-    new webpack.DllPlugin({
+    }),
-      path: path.join(__dirname, dllPath, '[name]-manifest.json'),
+    // manifest.json 描述动态链接库包含了哪些内容
-      // 保持与 output.library 中名称一致
+    new webpack.DllPlugin({
-      name: '[name]_[hash]',
+      path: path.join(__dirname, dllPath, '[name]-manifest.json'),
-      context: process.cwd(),
+      // 保持与 output.library 中名称一致
-    }),
+      name: '[name]_[hash]',
-  ],
+      context: process.cwd(),
-};
+    }),
+  ],
+};

mobile/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dataease-mobile",
-  "version": "1.18.5",
+  "version": "1.18.6",
   "private": true,
   "scripts": {
     "serve": "npm run dev:h5",

pom.xml

@@ -16,7 +16,7 @@
     </parent>
 
     <properties>
-        <dataease.version>1.18.5</dataease.version>
+        <dataease.version>1.18.6</dataease.version>
     </properties>
 
     <name>dataease</name>