提交data-visualization\components\visualization文件

frontend/src/data-visualization/components/visualization/CanvasBaseSetting.vue

@@ -1,6 +1,6 @@
 <template>
   <div style="width: 100%" ref="bgForm">
-    <el-form label-position="top" style="width: 100%; margin-bottom: 16px">
+    <el-form size="small" label-position="top" style="width: 100%; margin-bottom: 16px">
       <el-form-item
         class="form-item no-margin-bottom"
         :class="'form-item-' + themes"

frontend/src/data-visualization/components/visualization/CanvasCacheDialog.vue

@@ -33,12 +33,8 @@
 import warnTree from '@/assets/svg/warn-tree.svg'
 import { ref } from 'vue'
 import { useI18n } from '@/data-visualization/hooks/web/useI18n'
-import { dvMainStoreWithOut } from '@/data-visualization/store/modules/data-visualization/dvMain'
-const dvMainStore = dvMainStoreWithOut()
 const dialogShow = ref(false)
 const { t } = useI18n()
-import { useCache } from '@/data-visualization/hooks/web/useCache'
-const { wsCache } = useCache()
 const emits = defineEmits(['doUseCache'])
 
 const dialogInfo = {

frontend/src/data-visualization/components/visualization/CanvasExtFullscreenBar.vue

@@ -0,0 +1,84 @@
+<template>
+  <div
+    v-if="showButton && (!dvMainStore.mobileInPc || isMobile())"
+    class="bar-main-right"
+    @mousedown="handOptBarMousedown"
+  >
+    <el-button size="mini" type="info" @click="exitFullscreen">
+      <el-icon style="margin-right: 8px">
+        <Icon name="exit_fullscreen"
+          ><exit_fullscreen style="font-size: 16px" class="svg-icon"
+        /></Icon>
+      </el-icon>
+      {{ $t('visualization.ext_fullscreen') }}</el-button
+    >
+  </div>
+</template>
+
+<script lang="ts" setup>
+import exit_fullscreen from '@/assets/svg/exit-fullscreen.svg'
+import { dvMainStoreWithOut } from '@/data-visualization/store/modules/data-visualization/dvMain'
+import { computed } from 'vue'
+import { isMainCanvas } from '@/data-visualization/utils/canvasUtils'
+import { isMobile } from '@/data-visualization/utils/utils'
+import { storeToRefs } from 'pinia'
+import Icon from '../icon-custom/src/Icon.vue'
+import { ElIcon } from 'element-plus-secondary'
+const dvMainStore = dvMainStoreWithOut()
+
+const { fullscreenFlag } = storeToRefs(dvMainStore)
+
+const props = defineProps({
+  canvasId: {
+    type: String,
+    required: false,
+    default: 'canvas-main'
+  },
+  showPosition: {
+    required: false,
+    type: String,
+    default: 'preview'
+  }
+})
+
+const handOptBarMousedown = e => {
+  e.preventDefault()
+  e.stopPropagation()
+}
+
+const showButton = computed(() => {
+  if (isMainCanvas(props.canvasId)) {
+    return fullscreenFlag.value && props.showPosition === 'preview'
+  } else {
+    return false
+  }
+})
+
+const exitFullscreen = () => {
+  document.exitFullscreen()
+}
+</script>
+
+<style lang="less" scoped>
+.bar-main-right {
+  top: 2px;
+  right: 2px;
+  opacity: 0.8;
+  z-index: 1;
+  position: absolute;
+}
+
+.bar-main-edit-right {
+  top: 8px;
+  right: 102px !important;
+}
+
+.bar-main-left {
+  left: 0px;
+  opacity: 0;
+  height: fit-content;
+  &:hover {
+    opacity: 0.8;
+  }
+}
+</style>

frontend/src/data-visualization/components/visualization/CanvasOptBar.vue

@@ -2,10 +2,13 @@
   <div
     v-if="existLinkage && (!dvMainStore.mobileInPc || isMobile())"
     class="bar-main-right"
-    :class="{ 'bar-main-edit-right': dvEditMode }"
+    :class="{
+      'bar-main-preview-fixed': dvPreviewMode,
+      'bar-main-preview-fixed-fullscreen': fullscreenFlag
+    }"
     @mousedown="handOptBarMousedown"
   >
-    <el-button size="mini" type="warning" @click="clearAllLinkage"
+    <el-button type="warning" @click="clearAllLinkage"
       ><el-icon class="bar-base-icon">
         <Icon name="dv-bar-unLinkage"><dvBarUnLinkage class="svg-icon" /></Icon></el-icon
       >{{ $t('visualization.remove_all_linkage') }}</el-button
@@ -20,7 +23,9 @@ import { computed } from 'vue'
 import { isMainCanvas } from '@/data-visualization/utils/canvasUtils'
 import { useEmitt } from '@/data-visualization/hooks/web/useEmitt'
 import { isMobile } from '@/data-visualization/utils/utils'
+import { storeToRefs } from 'pinia'
 const dvMainStore = dvMainStoreWithOut()
+const { fullscreenFlag } = storeToRefs(dvMainStore)
 
 const props = defineProps({
   canvasStyleData: {
@@ -35,6 +40,10 @@ const props = defineProps({
     type: String,
     required: false,
     default: 'canvas-main'
+  },
+  isFixed: {
+    type: Boolean,
+    default: false
   }
 })
 
@@ -48,9 +57,10 @@ const clearAllLinkage = () => {
   useEmitt().emitter.emit('clearPanelLinkage', { viewId: 'all' })
 }
 
-const dvEditMode = computed(() => {
+const dvPreviewMode = computed(() => {
-  return dvMainStore.dvInfo.type === 'dataV' && dvMainStore.editMode === 'preview' && !isMobile()
+  return dvMainStore.dvInfo.type === 'dataV' && props.isFixed
 })
+
 const existLinkage = computed(() => {
   if (isMainCanvas(props.canvasId)) {
     let linkageFiltersCount = 0
@@ -87,7 +97,7 @@ const existLinkage = computed(() => {
   top: 2px;
   right: 2px;
   opacity: 0.8;
-  z-index: 1;
+  z-index: 2;
   position: absolute;
 }
 
@@ -104,4 +114,14 @@ const existLinkage = computed(() => {
     opacity: 0.8;
   }
 }
+
+.bar-main-preview-fixed {
+  position: fixed;
+  top: 120px;
+  right: 5px;
+}
+
+.bar-main-preview-fixed-fullscreen {
+  top: 5px !important;
+}
 </style>

frontend/src/data-visualization/components/visualization/ComponentButtonLabel.vue

@@ -21,9 +21,7 @@ const emits = defineEmits(['customClick'])
     <el-row class="group_icon" :title="tips" @click="emits('customClick')">
       <el-col :span="24" class="group_inner" :class="{ 'inner-active': active }">
         <Icon><component class="svg-icon toolbar-icon" :is="iconName"></component></Icon>
-        
+        <span>{{ title }}</span>
-         <!-- <img src="@/assets/newimg/avatar.png" alt="" srcset=""> -->
-        <span >{{ title }}</span>
       </el-col>
     </el-row>
     <el-divider class="group-right-border" v-if="showSplitLine" direction="vertical" />

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

@@ -171,6 +171,7 @@
 
           <xpack-component
             :chart="element"
+            resource-table="snapshot"
             jsname="L2NvbXBvbmVudC90aHJlc2hvbGQtd2FybmluZy9FZGl0QmFySGFuZGxlcg=="
             @close-item="closeItem"
           />
@@ -267,7 +268,8 @@ const emits = defineEmits([
   'showViewDetails',
   'amRemoveItem',
   'linkJumpSetOpen',
-  'linkageSetOpen'
+  'linkageSetOpen',
+  'componentImageDownload'
 ])
 const { t } = useI18n()
 const { emitter } = useEmitt()
@@ -479,13 +481,12 @@ const exportAsExcel = () => {
   const chartExtRequest = dvMainStore.getLastViewRequestInfo(element.value.id)
   const viewInfo = dvMainStore.getViewDetails(element.value.id)
   const chart = { ...viewInfo, chartExtRequest, data: viewDataInfo, busiFlag: dvInfo.value.type }
-  exportExcelDownload(chart, () => {
+  exportExcelDownload(chart, dvInfo.value.name, () => {
     openMessageLoading(callbackExport)
   })
 }
 const exportAsImage = () => {
-  // do export
+  emits('componentImageDownload')
-  useEmitt().emitter.emit('componentImageDownload-' + element.value.id)
 }
 const deleteComponent = () => {
   eventBus.emit('removeMatrixItem-' + canvasId.value, index.value)

frontend/src/data-visualization/components/visualization/DatasetParamsComponent.vue

@@ -1,8 +1,10 @@
 <script lang="ts" setup>
 import { computed, reactive, ref } from 'vue'
 import { deepCopy } from '@/data-visualization/utils/utils'
+import { useEmitt } from '@/data-visualization/hooks/web/useEmitt'
 import { dvMainStoreWithOut } from '@/data-visualization/store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia'
+import { ElMessage } from 'element-plus-secondary'
 const loading = ref(false)
 const subject = ref()
 const subjectDialogShow = ref(false)
@@ -31,7 +33,13 @@ const optInit = item => {
 }
 
 const saveSubject = () => {
-
+  if (disabledCheck.value) {
+    ElMessage.error('请输入正确参数')
+    return
+  }
+  canvasViewInfo.value[state.viewId]['calParams'] = curDataSetParamsInfo.value
+  useEmitt().emitter.emit('calcData-' + state.viewId, canvasViewInfo.value[state.viewId])
+  resetForm()
 }
 
 const disabledCheck = computed(() => {
@@ -57,8 +65,6 @@ defineExpose({
   statesCheck,
   resetForm
 })
-
-const emits = defineEmits(['finish'])
 </script>
 
 <template>

frontend/src/data-visualization/components/visualization/DePreviewPopDialog.vue

@@ -1,7 +1,7 @@
 <template>
   <el-dialog
     ref="previewPopDialog"
-    :custom-class="'preview_pop_custom'"
+    modal-class="preview_pop_custom"
     :append-to-body="true"
     :fullscreen="state.fullscreen"
     v-model="state.dialogShow"
@@ -23,8 +23,8 @@
 </template>
 
 <script setup lang="ts">
-import { computed, reactive } from 'vue'
+import { computed, reactive, ref } from 'vue'
-
+import { useEmbedded } from '@/data-visualization/store/modules/embedded'
 const state = reactive({
   dialogShow: false,
   name: '',
@@ -33,7 +33,6 @@ const state = reactive({
   width: '70vw',
   height: '70%'
 })
-
 const dialogStyle = computed(() => {
   if (state.fullscreen) {
     return {}
@@ -46,7 +45,7 @@ const previewInit = params => {
   if (params.url.includes('?')) {
     state.url = `${params.url}&popWindow=true`
   } else {
-    state.url = `${params.url}&popWindow=true`
+    state.url = `${params.url}?popWindow=true`
   }
   if (params.size === 'large') {
     state.fullscreen = true

frontend/src/data-visualization/components/visualization/DvSidebar.vue

@@ -5,21 +5,15 @@ import { dvMainStoreWithOut } from '@/data-visualization/store/modules/data-visu
 import { storeToRefs } from 'pinia'
 import { snapshotStoreWithOut } from '@/data-visualization//modules/data-visualization/snapshot'
 import Icon from '../icon-custom/src/Icon.vue'
-import dvInfoSvg from '@/assets/svg/dv-info.svg'
-import { useI18n } from '@/data-visualization/hooks/web/useI18n'
-import combinationSvg from '@/assets/svg/combinationpage.svg'
-import scatterSvg from '@/assets/svg/scatterpage.svg'
-import { composeStoreWithOut } from '@/data-visualization/store/modules/data-visualization/compose'
 const dvMainStore = dvMainStoreWithOut()
-const { canvasCollapse,curComponent } = storeToRefs(dvMainStore)
+const { canvasCollapse } = storeToRefs(dvMainStore)
 let componentNameEdit = ref(false)
 let inputComponentName = ref({ id: null, name: null })
 let componentNameInputAttr = ref(null)
+import dvInfoSvg from '@/assets/svg/dv-info.svg'
+import { useI18n } from '@/data-visualization/hooks/web/useI18n'
 const snapshotStore = snapshotStoreWithOut()
-const composeStore = composeStoreWithOut()
-const { areaData } = storeToRefs(composeStore)
 const { t } = useI18n()
-const emit = defineEmits(['close', 'rename'])
 const props = defineProps({
   element: {
     required: false,
@@ -64,13 +58,10 @@ const props = defineProps({
     type: String as PropType<EditorTheme>,
     default: 'light'
   },
-  title: String,
+  title: String
-  activePosition: {
-    type: String,
-    default: 'canvas'
-  }
 })
-const { width, asidePosition, sideName, themeInfo, view, themes, element,activePosition } = toRefs(props)
+
+const { width, asidePosition, sideName, themeInfo, view, themes, element } = toRefs(props)
 const collapseChange = () => {
   canvasCollapse.value[sideName.value] = !canvasCollapse.value[sideName.value]
 }
@@ -131,33 +122,6 @@ const editComponentName = () => {
 const onComponentNameChange = () => {
   snapshotStore.recordSnapshotCache('onComponentNameChange')
 }
-
-//组合
-const combinationclick = () => {
-  if(areaData.value.components.length){
-    composeStore.compose()
-    snapshotStore.recordSnapshotCache('componentCompose')
-    menuOpt('componentCompose')
-  }else{
-    ElMessage.warning('请选择多个组件进行组合！')
-    return
-  }
-}
-//打散
-const scatterclick= () => {
-  if(curComponent.value['component'] == 'Group'){
-    composeStore.decompose()
-    snapshotStore.recordSnapshotCache('decompose')
-    menuOpt('decompose')
-  }else{
-    ElMessage.warning('请选择组合！')
-    return
-  }
-}
-const menuOpt = optName => {
-  const param = { opt: optName }
-  activePosition.value === 'aside' && emit('close', param)
-}
 </script>
 
 <template>
@@ -173,7 +137,7 @@ const menuOpt = optName => {
         :id="'attr-slide-component-name' + slideIndex"
         v-if="!canvasCollapse[sideName]"
         class="name-area-attr"
-        style="max-width: 180px; text-overflow: ellipsis; white-space: nowrap;"
+        style="max-width: 180px; text-overflow: ellipsis; white-space: nowrap"
         :style="{ width: componentNameEdit ? '300px' : 'auto' }"
         :class="{ 'component-name-dark': themeInfo === 'dark' }"
         @dblclick="editComponentName"
@@ -191,7 +155,7 @@ const menuOpt = optName => {
             <span>
               <el-icon
                 v-show="element && element['id']"
-                style="margin: 6px 0 0 4px; cursor: pointer"
+                style="margin: 2px 0 0 4px; cursor: pointer"
                 ><Icon><dvInfoSvg class="svg-icon" /></Icon
               ></el-icon>
             </span>
@@ -204,15 +168,6 @@ const menuOpt = optName => {
           </div>
         </el-popover>
       </div>
-      <div style="display: flex;">
-        <div v-if="!canvasCollapse[sideName] && asidePosition === 'left'">
-          <el-icon title="组合" style="font-size: 16px;margin-right: 8px;cursor: pointer" @click="combinationclick">
-            <Icon><combinationSvg class="svg-icon" /></Icon>
-          </el-icon>
-          <el-icon title="打散" style="font-size: 16px;margin-right: 5px;cursor: pointer" @click="scatterclick">
-            <Icon><scatterSvg class="svg-icon" /></Icon>
-          </el-icon>
-        </div>
       <el-icon
         :title="title"
         :class="['custom-icon-' + themeInfo, 'collapse-icon-' + themeInfo]"
@@ -227,7 +182,6 @@ const menuOpt = optName => {
         />
         <Fold v-else />
       </el-icon>
-    </div>
     </el-row>
     <div class="main-content" v-if="!canvasCollapse[sideName]">
       <el-scrollbar>
@@ -399,15 +353,16 @@ const menuOpt = optName => {
 </style>
 <style>
 .ed-popper.is-light {
-    border: 1px solid #434343;
+    border: 1px solid #434343 !important;
     background: rgba(41, 41, 41, 1) !important;
+    color: #ffffff ;
 }
 .ed-popper[data-popper-placement^=bottom] .ed-popper__arrow::before {
     background: rgba(41, 41, 41, 1) !important;
 }
 .ed-popover.ed-popper{
-  background: rgba(41, 41, 41, 1);
+  background: rgba(41, 41, 41, 1) !important;
-  border: 1px solid #434343;
+  border: 1px solid #434343 !important;
 }
 .ed-collapse-item.ed-collapse--light .ed-collapse-item__header{
   background-color: #1a1a1a;
@@ -466,14 +421,14 @@ const menuOpt = optName => {
   color: #ebebeb !important;
 }
 .ed-collapse-item__wrap .ed-input-number__decrease, .ed-input-number__increase{
-  background-color: #434343;
+  background-color: #434343 !important;
-  color:#ffffff;
+  color:#ffffff !important;
 }
 .ed-input-number__decrease, .ed-input-number__increase{
-  color:#ffffff;
+  color:#ffffff !important;
 }
 .ed-collapse-item__wrap .ed-input-number.is-controls-right .ed-input-number__increase{
-  border-bottom: 1px solid #5f5f5f !important;
+  border-bottom: 1px solid #434343 !important;
   border-left: 1px solid #5f5f5f !important;
 }
 .ed-collapse-item__wrap .ed-input-number.is-controls-right .ed-input-number__decrease{
@@ -569,7 +524,7 @@ color: #ffffff !important;
 }
 .ed-input-number--dark:not(.is-disabled) .ed-input-number__decrease:not(.is-disabled):hover~.ed-input:not(.is-disabled) .ed-input__wrapper, .ed-input-number--dark:not(.is-disabled) .ed-input-number__increase:not(.is-disabled):hover~.ed-input:not(.is-disabled) .ed-input__wrapper{
   box-shadow: none !important;
-  border: 1px solid #0089ff;
+  border: 1px solid #0089ff !important;
 }
 .ed-input__wrapper.is-focus {
   box-shadow: none !important;
@@ -582,15 +537,18 @@ color: #ffffff !important;
 }
 .ed-input-number--light:not(.is-disabled).is-controls-right .ed-input-number__decrease:not(.is-disabled):hover~.ed-input:not(.is-disabled) .ed-input__wrapper, .ed-input-number--light:not(.is-disabled).is-controls-right .ed-input-number__increase:not(.is-disabled):hover~.ed-input:not(.is-disabled) .ed-input__wrapper{
   box-shadow: none !important;
-  border: 1px solid #0089ff;
+  border: 1px solid #0089ff !important;
 }
 .ed-input-number--light .ed-input-number__decrease.is-disabled .ed-icon, .ed-input-number--light .ed-input-number__increase.is-disabled .ed-icon {
   color: #ffffff;
 }
 .ed-input-number__decrease:hover, .ed-input-number__increase:hover {
-  color: #0089ff;
+  color: #0089ff !important;
 }
 .ed-select .ed-input.is-disabled:not(.ed-input--dark) .ed-input__wrapper:hover{
   box-shadow: none!important;;
 }
+.icon-checkbox:before{
+  content:''
+}
 </style>

frontend/src/data-visualization/components/visualization/JumpSetOuterContentEditor.vue

@@ -40,7 +40,7 @@ const setNameIdTrans = (from, to, originName, name2Auto?: string[]) => {
     pre[next[from]] = next[to]
     return pre
   }, {})
-  const on = originName.match(/\[(.+?)\]/g)
+  const on = originName.match(/\[(.+?)\]/g) || []
   if (on) {
     on.forEach(itm => {
       const ele = itm.slice(1, -1)

frontend/src/data-visualization/components/visualization/LinkJumpSet.vue

@@ -236,7 +236,12 @@
                                 state.linkJumpInfo?.jumpType === 'newPop'
                             }"
                           >
-                            <el-scrollbar height="fit-content" max-height="178px">
+                            <el-scrollbar
+                              height="fit-content"
+                              :max-height="
+                                state.linkJumpInfo?.jumpType === 'newPop' ? '138px' : '178px'
+                              "
+                            >
                               <div
                                 style="display: flex; margin-bottom: 6px"
                                 v-for="(
@@ -667,11 +672,6 @@ const selectSourceTips = t('visualization.select_target_resource')
 
 const targetSource = t('visualization.target_dashboard_dataV')
 
-const curSource =
-  dvInfo.value.type === 'dashboard'
-    ? t('visualization.cur_dashboard')
-    : t('visualization.cur_screen')
-
 const state = reactive({
   curDataVWeight: 0,
   activeCollapse: 'view',
@@ -746,6 +746,28 @@ const dialogInit = viewItem => {
   init(viewItem)
 }
 
+const initCurFilterFieldArray = componentDataCheck => {
+  componentDataCheck.forEach(componentItem => {
+    if (componentItem.component === 'VQuery' && componentItem.propValue instanceof Array) {
+      componentItem.propValue.forEach(filterItem => {
+        if (filterItem.checkedFields.includes(state.viewId)) {
+          state.linkJumpCurFilterFieldArray.push({
+            id: filterItem.id,
+            name: filterItem.name,
+            deType: 'filter'
+          })
+        }
+      })
+    } else if (componentItem.component === 'Group') {
+      initCurFilterFieldArray(componentItem.propValue)
+    } else if (componentItem.component === 'DeTabs') {
+      componentItem.propValue.forEach(tabItem => {
+        initCurFilterFieldArray(tabItem.componentData)
+      })
+    }
+  })
+}
+
 const init = viewItem => {
   state.initState = false
   state.viewId = viewItem.id
@@ -792,19 +814,7 @@ const init = viewItem => {
 
   // 获取当前过滤条件明细 过滤原则：1.在当前仪表板或者大屏 2.作用于当前图表
   state.linkJumpCurFilterFieldArray = []
-  componentData.value.forEach(componentItem => {
+  initCurFilterFieldArray(componentData.value)
-    if (componentItem.component === 'VQuery' && componentItem.propValue instanceof Array) {
-      componentItem.propValue.forEach(filterItem => {
-        if (filterItem.checkedFields.includes(state.viewId)) {
-          state.linkJumpCurFilterFieldArray.push({
-            id: filterItem.id,
-            name: filterItem.name,
-            deType: 'filter'
-          })
-        }
-      })
-    }
-  })
 
   if (chartDetails.tableId) {
     // 获取当前数据集信息

frontend/src/data-visualization/components/visualization/LinkageSet.vue

@@ -158,7 +158,23 @@
           </el-col>
           <el-col :span="16" class="preview-show">
             <el-row class="content-head">{{ t('visualization.linkage_setting_tips1') }}</el-row>
-            <el-row v-if="state.linkageInfo && state.linkageInfo.linkageActive">
+            <el-row
+              v-if="
+                state.linkageInfo &&
+                state.linkageInfo.linkageActive &&
+                curComponent?.innerType === 'indicator'
+              "
+              style="height: 100%"
+              class="custom-position"
+            >
+              <Icon name="dv-empty"
+                ><dvEmpty style="width: 125px; height: 125px" class="svg-icon"
+              /></Icon>
+              <span style="margin-top: 8px; font-size: 14px">
+                {{ t('visualization.indicator_linkage') }}</span
+              >
+            </el-row>
+            <el-row v-else-if="state.linkageInfo && state.linkageInfo.linkageActive">
               <el-row style="margin-top: 5px">
                 <div style="display: flex" class="inner-content">
                   <div style="flex: 1">{{ t('visualization.current_chart_source_field') }}</div>
@@ -367,7 +383,10 @@ const sameDsShow = computed(
 )
 
 const diffDsShow = computed(
-  () => curLinkageTargetViewsInfoDiffDs.value && curLinkageTargetViewsInfoDiffDs.value.length > 0
+  () =>
+    curLinkageTargetViewsInfoDiffDs.value &&
+    curLinkageTargetViewsInfoDiffDs.value.length > 0 &&
+    curComponent.value.innerType !== 'indicator'
 )
 
 const dialogInit = viewItem => {
@@ -387,7 +406,8 @@ const linkageSetting = curViewId => {
     dvId: dvInfo.value.id,
     sourceViewId: curViewId,
     targetViewIds: targetViewIds,
-    linkageInfo: null
+    linkageInfo: null,
+    resourceTable: 'snapshot'
   }
   getViewLinkageGatherArray(requestInfo).then(rsp => {
     // 获取当前仪表板的图表(去掉当前图表)
@@ -556,12 +576,19 @@ const linkageFieldAdaptor = async data => {
             JSON.stringify(state.curLinkageViewInfo.xAxisExt) +
             (state.curLinkageViewInfo.type.includes('chart-mix')
               ? JSON.stringify(state.curLinkageViewInfo.extBubble)
+              : '') +
+            (['indicator'].includes(state.curLinkageViewInfo.type)
+              ? JSON.stringify(state.curLinkageViewInfo.yAxis)
               : '')
           const targetCheckAllAxisStr =
             JSON.stringify(targetChartDetails.xAxis) +
             JSON.stringify(targetChartDetails.xAxisExt) +
+            JSON.stringify(state.curLinkageViewInfo.extStack) +
             (targetChartDetails.type.includes('chart-mix')
               ? JSON.stringify(targetChartDetails.extBubble)
+              : '') +
+            (['indicator'].includes(state.curLinkageViewInfo.type)
+              ? JSON.stringify(state.curLinkageViewInfo.yAxis)
               : '')
           state.sourceLinkageInfo.targetViewFields.forEach(item => {
             if (
@@ -586,10 +613,11 @@ const sourceLinkageInfoFilter = computed(() => {
       JSON.stringify(state.curLinkageViewInfo.xAxis) +
       JSON.stringify(state.curLinkageViewInfo.drillFields) +
       JSON.stringify(state.curLinkageViewInfo.xAxisExt) +
+      JSON.stringify(state.curLinkageViewInfo.extStack) +
       (state.curLinkageViewInfo.type.includes('chart-mix')
         ? JSON.stringify(state.curLinkageViewInfo.extBubble)
         : '') +
-      (state.curLinkageViewInfo.type.includes('table-normal')
+      (['table-normal', 'indicator'].includes(state.curLinkageViewInfo.type)
         ? JSON.stringify(state.curLinkageViewInfo.yAxis)
         : '')
     return state.sourceLinkageInfo.targetViewFields.filter(item =>
@@ -644,7 +672,7 @@ defineExpose({
 
 .preview {
   margin-top: 5px;
-  border: 1px solid rgb(61,61,61);
+  border: 1px solid #e6e6e6;
   border-radius: 4px;
   height: 470px !important;
   overflow: hidden;
@@ -652,7 +680,7 @@ defineExpose({
 }
 
 .preview-show {
-  border-left: 1px solid #5f5f5f;
+  border-left: 1px solid #e6e6e6;
   height: 470px;
   background-size: 100% 100% !important;
 }
@@ -701,7 +729,7 @@ defineExpose({
   flex-direction: column;
   span {
     line-height: 22px;
-    color: #909399;
+    color: #646a73;
   }
 }
 
@@ -742,7 +770,7 @@ defineExpose({
     margin-right: 16px;
     font-weight: 400;
     font-size: 12px;
-    color: #d2d2d2;
+    color: #646a73;
     .ed-switch {
       margin-left: 8px;
     }

frontend/src/data-visualization/components/visualization/LinkageSetOption.vue

@@ -21,13 +21,11 @@ const props = defineProps({
   }
 })
 
-const selection = ref()
-
 const selectionChange = () => {
   // do selection
 }
 
-const { title, themes, actionSelection } = toRefs(props)
+const { actionSelection } = toRefs(props)
 </script>
 
 <template>
@@ -44,7 +42,7 @@ const { title, themes, actionSelection } = toRefs(props)
         <el-icon style="margin: 5px 0 0 5px"><Setting /></el-icon
       ></span>
     </template>
-    <el-row style="color: #fff;">
+    <el-row>
       {{ t('visualization.select_linkage_tips') }}
     </el-row>
     <el-row>

frontend/src/data-visualization/components/visualization/OuterParamsSet.vue

@@ -50,7 +50,7 @@
                           style="width: 100%"
                           v-model="data.paramName"
                           :placeholder="$t('visualization.input_param_name')"
-                          @blur="closeEdit"
+                          @blur="closeEdit(data)"
                         />
                       </div>
                       <span class="tree-select-field" v-else-if="data.paramName">
@@ -62,8 +62,7 @@
                     </span>
                     <span class="icon-more" v-if="!(curEditDataId === data.paramsInfoId)">
                       <handle-more
-                        style="margin-right: 15px;"
+                        style="margin-right: 15px"
-                        class="icon-more-box"
                         @handle-command="cmd => outerParamsOperation(cmd, node, data)"
                         :menu-list="state.optMenu"
                         :icon-name="icon_more_vertical_outlined"
@@ -465,11 +464,18 @@ const validateArgs = (val, id) => {
   }
 }
 
-const viewSelectedField = computed(() =>
+const closeEdit = params => {
-  state.outerParamsInfo?.targetViewInfoList?.map(targetViewInfo => targetViewInfo.targetViewId)
+  if (!params.paramName || params.paramName.length < 2 || params.paramName.length > 25) {
-)
+    ElMessage({
-
+      message: t('commons.params_value') + t('common.input_limit', [2, 25]),
-const closeEdit = () => {
+      type: 'warning',
+      showClose: true
+    })
+    if (params.paramName.length > 25) {
+      params.paramName = params.paramName.splice(0.25)
+    }
+    return
+  }
   curEditDataId.value = null
 }
 
@@ -481,18 +487,6 @@ const outerParamsOperation = (cmd, node, data) => {
   }
 }
 
-const fieldIdDisabledCheck = targetViewInfo => {
-  return (
-    state.viewIdFieldArrayMap[targetViewInfo.targetViewId] &&
-    state.viewIdFieldArrayMap[targetViewInfo.targetViewId].length === 1 &&
-    state.viewIdFieldArrayMap[targetViewInfo.targetViewId][0].id === 'empty'
-  )
-}
-
-const getFieldArray = id => {
-  return state.viewIdFieldArrayMap[id]
-}
-
 const initParams = async () => {
   state.baseFilterInfo = []
   state.baseDatasetInfo = []
@@ -720,28 +714,6 @@ const getPanelViewList = dvId => {
   })
 }
 
-const addOuterParamsField = () => {
-  state.outerParamsInfo.targetViewInfoList.push({
-    targetViewId: '',
-    targetFieldId: ''
-  })
-}
-const deleteOuterParamsField = index => {
-  state.outerParamsInfo.targetViewInfoList.splice(index, 1)
-}
-
-const viewInfoOnChange = targetViewInfo => {
-  if (
-    state.viewIdFieldArrayMap[targetViewInfo.targetViewId] &&
-    state.viewIdFieldArrayMap[targetViewInfo.targetViewId].length === 1 &&
-    state.viewIdFieldArrayMap[targetViewInfo.targetViewId][0].id === 'empty'
-  ) {
-    targetViewInfo.targetFieldId = 'empty'
-  } else {
-    targetViewInfo.targetFieldId = null
-  }
-}
-
 const initSelected = data => {
   nextTick(() => {
     outerParamsInfoTree.value.setCurrentKey(data.paramsInfoId)
@@ -809,20 +781,11 @@ defineExpose({
 .root-class {
   margin: 15px 0px 5px;
   justify-content: right;
-  .ed-button{
-    color: #F2F4F5;
-    background-color: #212121;
-    border: 1px solid #434343;
-  }
-  .ed-button--primary{
-    background-color:#0089FF;
-    border: 1px solid #0089FF;
-  }
 }
 
 .preview {
   margin-top: 5px;
-  border: 1px solid #434343;
+  border: 1px solid #e6e6e6;
   border-radius: 4px;
   height: 470px !important;
   overflow: hidden;
@@ -922,18 +885,13 @@ defineExpose({
     margin-left: auto;
     display: none;
   }
-  &:hover {
+
-    .icon-more {
+  &:hover .icon-more {
     margin-left: auto;
     display: unset;
   }
-  }
-  .icon-more-box:hover{
-      border-radius: 4px;
-      background: #434343;
-    }
 }
-rgb(2, 1, 1)
+
 .link-icon-join {
   font-size: 20px;
   margin-top: 7px;
@@ -1156,7 +1114,7 @@ rgb(2, 1, 1)
 }
 
 .params-attach-setting {
-  border-left: 1px solid #434343;
+  border-left: 1px solid #e6e6e6;
 }
 
 .params-attach-content {

frontend/src/data-visualization/components/visualization/UserViewEnlarge.vue

@@ -7,6 +7,7 @@
     width="70vw"
     trigger="click"
     class="userViewEnlarge-class"
+    @close="handleClose"
   >
     <template #header v-if="!isIframe">
       <div class="header-title">
@@ -34,12 +35,12 @@
             size="middle"
             @click="downloadViewImage"
           >
-            <el-icon color="#ffffff" size="16" style="margin-right: 3px"
+            <el-icon color="#1F2329" size="16" style="margin-right: 3px"
               ><icon_download_outlined
             /></el-icon>
             {{ t('chart.export_img') }}
           </el-button>
-          <!-- <el-button
+          <el-button
             class="m-button"
             v-if="optType === 'details' && exportPermissions[1]"
             link
@@ -68,7 +69,7 @@
               state.dataFrom === 'template'
             "
           >
-            <el-icon color="#ffffff" size="16" style="margin-right: 3px"
+            <el-icon color="#1F2329" size="16" style="margin-right: 3px"
               ><icon_download_outlined
             /></el-icon>
             {{ t('chart.export_raw_details') }}
@@ -85,7 +86,7 @@
               ><icon_download_outlined
             /></el-icon>
             {{ t('chart.export_excel_formatter') }}
-          </el-button> -->
+          </el-button>
           <el-divider
             class="close-divider"
             direction="vertical"
@@ -107,6 +108,7 @@
         :class="{
           'enlarge-inner-with-header': optType === 'details' && sourceViewType.includes('chart-mix')
         }"
+        v-loading="requestStore.loadingMap[permissionStore.currentPath]"
         ref="viewContainer"
         :style="customExport"
       >
@@ -179,19 +181,19 @@ import { activeWatermarkCheckUser } from '@/data-visualization/components/waterm
 import { getCanvasStyle } from '@/data-visualization/utils/style'
 import { exportPermission } from '@/data-visualization/utils/utils'
 import EmptyBackground from '../empty-background/src/EmptyBackground.vue'
+// import { supportExtremumChartType } from '@/data-visualization/chart/components/js/extremumUitl'
 const downLoading = ref(false)
 const dvMainStore = dvMainStoreWithOut()
 const dialogShow = ref(false)
 // const requestStore = useRequestStoreWithOut()
 let viewInfo = ref<DeepPartial<ChartObj>>(null)
 const config = ref(null)
-const canvasStyleData = ref(null)
 const viewContainer = ref(null)
 const { t } = useI18n()
 const optType = ref(null)
 const chartComponentDetails = ref(null)
 const chartComponentDetails2 = ref(null)
-const { dvInfo, editMode, isIframe } = storeToRefs(dvMainStore)
+const { dvInfo, isIframe, canvasStyleData } = storeToRefs(dvMainStore)
 const exportLoading = ref(false)
 const sourceViewType = ref()
 const activeName = ref('left')
@@ -308,7 +310,6 @@ const dialogInit = (canvasStyle, view, item, opt, params = { scale: 0.5 }) => {
   viewInfo.value = deepCopy(view) as DeepPartial<ChartObj>
   viewInfo.value.customStyle.text.show = false
   config.value = deepCopy(item)
-  canvasStyleData.value = canvasStyle
   if (opt === 'details') {
     if (!viewInfo.value.type?.includes('table')) {
       assign(viewInfo.value, DETAIL_CHART_ATTR)
@@ -372,7 +373,7 @@ const downloadViewDetails = (downloadType = 'view') => {
     busiFlag: dvInfo.value.type
   }
   exportLoading.value = true
-  exportExcelDownload(chart, () => {
+  exportExcelDownload(chart, dvInfo.value.name, () => {
     openMessageLoading(exportData)
   })
   exportLoading.value = false
@@ -416,10 +417,19 @@ const openMessageLoading = cb => {
     customClass
   })
 }
+// 地图
+const mapChartTypes = ['bubble-map', 'flow-map', 'heat-map', 'map', 'symbolic-map']
 const htmlToImage = () => {
-  downLoading.value = true
+  debugger
+  downLoading.value = mapChartTypes.includes(viewInfo.value.type) ? false : true
   useEmitt().emitter.emit('renderChart-' + viewInfo.value.id)
-  const renderTime = viewInfo.value.type?.includes('table') ? 2000 : 500
+  useEmitt().emitter.emit('l7-prepare-picture', viewInfo.value.id)
+  // 表格和支持最值图表的渲染时间为2000毫秒，其他图表为500毫秒。
+  const renderTime =
+    viewInfo.value.type?.includes('table') ||
+    supportExtremumChartType({ type: viewInfo.value.type })
+      ? 2000
+      : 500
   setTimeout(() => {
     initWatermark()
     toPng(viewContainer.value)
@@ -429,12 +439,14 @@ const htmlToImage = () => {
         a.setAttribute('download', viewInfo.value.title)
         a.href = dataUrl
         a.click()
+        useEmitt().emitter.emit('l7-unprepare-picture', viewInfo.value.id)
         useEmitt().emitter.emit('renderChart-' + viewInfo.value.id)
         initWatermark()
       })
       .catch(error => {
         downLoading.value = false
         initWatermark()
+        useEmitt().emitter.emit('l7-unprepare-picture', viewInfo.value.id)
         useEmitt().emitter.emit('renderChart-' + viewInfo.value.id)
         console.error('oops, something went wrong!', error)
       })
@@ -582,4 +594,30 @@ defineExpose({
 .ed-select-group__wrap:not(:last-of-type)::after{
   background: #434343 !important;
  }
+ .ed-select .ed-input.is-focus .ed-input__wrapper{
+  box-shadow: none !important;
+ }
+ .ed-select:hover:not(.ed-select--disabled) .ed-input__wrapper{
+  box-shadow: none !important;
+ }
+ .ed-select .ed-input__wrapper.is-focus{
+  box-shadow: none !important;
+ }
+ .ed-dropdown-menu{
+  background-color: rgb(41, 41, 41);
+
+  }
+  .ed-dropdown-menu__item{
+    color: #fff;
+  }
+  .ed-dropdown-menu__item--divided{
+    border-top: 1px solid #5f5f5f;
+  }
+  .ed-dropdown-menu__item:not(.is-disabled):hover{
+    background-color: rgb(61, 61, 61);
+  }
+  .ed-dropdown__popper.ed-popper{
+    border: 1px solid #5f5f5f;
+    background:transparent;
+  }
 </style>

frontend/src/data-visualization/components/visualization/ViewTrackBar.vue

@@ -1,6 +1,11 @@
 <template>
   <div>
-    <el-dropdown :teleported="false" trigger="click">
+    <el-dropdown
+      :id="'view-track-bar-' + chartId"
+      :teleported="false"
+      trigger="click"
+      @visible-change="visibleChange"
+    >
       <input id="input" ref="trackButton" type="button" hidden />
       <template #dropdown>
         <div :class="{ 'data-mobile': isDataVMobile }">
@@ -12,6 +17,7 @@
             <el-dropdown-item
               v-for="(item, key) in trackMenu"
               :key="key"
+              @mousedown.stop
               @click="trackMenuClick(item)"
               ><span class="menu-item">{{ state.i18n_map[item] }}</span></el-dropdown-item
             >
@@ -52,11 +58,27 @@ const state = reactive({
     linkage: t('visualization.linkage'),
     linkageAndDrill: t('visualization.linkage_and_drill'),
     jump: t('visualization.jump'),
-    enlarge: t('visualization.enlarge')
+    enlarge: t('visualization.enlarge'),
+    event_jump: t('visualization.jump'),
+    event_download: t('visualization.download'),
+    event_share: t('visualization.share'),
+    event_fullScreen: t('visualization.fullscreen'),
+    event_showHidden: t('visualization.pop_area'),
+    event_refreshDataV: t('visualization.refresh'),
+    event_refreshView: t('visualization.refresh_view')
   }
 })
-
+const visibleChange = () => {
-const trackButtonClick = () => {
+  document.querySelectorAll('.g2-tooltip')?.forEach(tooltip => {
+    if (tooltip.id?.includes(chartId.value)) {
+      tooltip.classList.toggle('hidden-tooltip', true)
+    }
+  })
+}
+// 添加图表标识，用于区分不同图表的 tooltip
+const chartId = ref(null)
+const trackButtonClick = (id?: string) => {
+  chartId.value = id
   setTimeout(() => {
     trackButton.value.click()
   }, 50)