feat(仪表板): 仪表板支持隐藏组件#14749

core/core-frontend/auto-imports.d.ts

@@ -4,8 +4,5 @@
 // Generated by unplugin-auto-import
 export {}
 declare global {
-  const ElForm: typeof import('element-plus-secondary/es')['ElForm']
-  const ElFormItem: typeof import('element-plus-secondary/es')['ElFormItem']
-  const ElInput: typeof import('element-plus-secondary/es')['ElInput']
-  const ElMessageBox: typeof import('element-plus-secondary/es')['ElMessageBox']
+
 }

core/core-frontend/src/assets/svg/dv-hidden.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="1738739001616" class="icon" viewBox="0 0 1175 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8488" xmlns:xlink="http://www.w3.org/1999/xlink" width="229.4921875" height="200"><path d="M587.83008 276.574053a235.132032 235.132032 0 0 1 235.132033 235.132032 249.533869 249.533869 0 0 1-1.469576 25.864523l170.470724 170.764639A1046.631458 1046.631458 0 0 0 1175.660161 511.706085c-161.065442-220.43628-365.336395-352.698048-587.830081-352.698048a562.553387 562.553387 0 0 0-129.616532 15.577497l103.752009 103.458094a249.533869 249.533869 0 0 1 25.864523-1.469575zM76.123995 83.177956L255.706085 262.760046A987.554535 987.554535 0 0 0 0 511.706085c161.065442 220.730195 365.336395 352.698048 587.83008 352.698048a575.485649 575.485649 0 0 0 223.375431-46.144661l205.740528 205.740528L1099.536165 940.528129l-940.528128-940.528129zM352.698048 511.706085a231.311137 231.311137 0 0 1 32.918485-119.035591l88.174512 88.174512a113.745121 113.745121 0 0 0-4.408726 29.391504 117.566016 117.566016 0 0 0 117.566016 117.566016 111.98163 111.98163 0 0 0 29.391504-4.408726l45.850747 45.850746L705.396096 712.743972a235.132032 235.132032 0 0 1-352.698048-202.507462z" p-id="8489"></path></svg>

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

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import ComponentWrapper from '@/components/data-visualization/canvas/ComponentWrapper.vue'
+import { storeToRefs } from 'pinia'
+import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
+import dvHidden from '@/assets/svg/dv-hidden.svg'
+import { computed } from 'vue'
+import Icon from '../icon-custom/src/Icon.vue'
+import eventBus from '@/utils/eventBus'
+const dvMainStore = dvMainStoreWithOut()
+const { componentData, canvasStyleData, canvasViewInfo, dvInfo } = storeToRefs(dvMainStore)
+
+const componentsHidden = computed(() => {
+  return componentData.value.filter(ele => ele.dashboardHidden)
+})
+
+const addToDashboard = item => {
+  item.dashboardHidden = false
+  item.y = 200
+  eventBus.emit('addDashboardItem-canvas-main', item)
+  eventBus.emit('matrix-canvasInit', false)
+}
+</script>
+
+<template>
+  <div class="config-hidden">
+    <div
+      :style="{ height: '180px', width: '260px' }"
+      class="wrapper-inner-adaptor"
+      v-for="item in componentsHidden"
+      :key="item.id"
+    >
+      <div class="component-outer">
+        <ComponentWrapper
+          canvas-id="canvas-main"
+          :canvas-style-data="canvasStyleData"
+          :dv-info="dvInfo"
+          :canvas-view-info="canvasViewInfo"
+          :view-info="canvasViewInfo[item.id]"
+          :config="item"
+          class="wrapper-design"
+          show-position="viewDialog"
+          :search-count="0"
+          :scale="65"
+        />
+      </div>
+      <div class="select-to-dashboard" @click="addToDashboard(item)">
+        <el-icon style="font-size: 16px">
+          <Icon name="dvHidden"><dvHidden class="svg-icon" /></Icon>
+        </el-icon>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+.config-hidden {
+  position: relative;
+  padding: 16px 0;
+  .wrapper-inner-adaptor {
+    position: relative;
+    margin-left: 8px;
+    margin-bottom: 8px;
+    float: left;
+    background: #fff;
+    padding: 4px;
+    border-radius: 4px;
+    border: 1px solid #dee0e3;
+    &:nth-child(2n) {
+      margin-right: -1px;
+    }
+
+    .select-to-dashboard {
+      position: absolute;
+      width: 16px;
+      height: 16px;
+      top: 4px;
+      right: 8px;
+      z-index: 24;
+      cursor: pointer;
+      &:hover {
+        color: var(--ed-color-primary-99, #3370ff99);
+      }
+    }
+
+    .component-outer {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      .wrapper-design {
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    &:hover {
+      border-color: var(--ed-color-primary-99, #3370ff99);
+    }
+  }
+}
+</style>

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import dvBatch from '@/assets/svg/dv-batch.svg'
 import dvDashboard from '@/assets/svg/dv-dashboard.svg'
+import dvHidden from '@/assets/svg/dv-hidden.svg'
 import dvFilter from '@/assets/svg/dv-filter.svg'
 import dvMedia from '@/assets/svg/dv-media.svg'
 import dvMoreCom from '@/assets/svg/dv-more-com.svg'
@@ -326,6 +327,10 @@ const openDataBoardSetting = () => {
   dvMainStore.setCurComponent({ component: null, index: null })
 }
 
+const openHiddenList = () => {
+  dvMainStore.setHiddenListStatus()
+}
+
 const openMobileSetting = () => {
   if (!dvInfo.value.id || dvInfo.value.dataState === 'prepare') {
     ElMessage.warning(t('components.current_page_first'))
@@ -622,6 +627,17 @@ const initOpenHandler = newWindow => {
               :icon-name="dvDashboard"
             />
           </el-tooltip>
+          <el-tooltip
+            effect="dark"
+            :content="t('visualization.hidden_components')"
+            placement="bottom"
+          >
+            <component-button
+              :tips="t('visualization.hidden_components')"
+              @custom-click="openHiddenList"
+              :icon-name="dvHidden"
+            />
+          </el-tooltip>
           <div class="divider"></div>
           <template v-if="!desktop">
             <el-tooltip

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

@@ -901,8 +901,7 @@ function removeItemById(componentId) {
   }
 }
 
-function removeItem(index) {
-  let item = componentData.value[index]
+function removeItemComponent(item) {
   if (item && isSameCanvas(item, canvasId.value)) {
     if (isDashboard()) {
       removeItemFromPositionBox(item)
@@ -920,7 +919,6 @@ function removeItem(index) {
         checkedFields = [...ele.checkedFields, ...checkedFields]
       })
     }
-    componentData.value.splice(index, 1)
     dvMainStore.removeLinkageInfo(item['id'])
     if (!!checkedFields.length) {
       Array.from(new Set(checkedFields)).forEach(ele => {
@@ -931,6 +929,14 @@ function removeItem(index) {
   }
 }
 
+function removeItem(index) {
+  let item = componentData.value[index]
+  if (item && isSameCanvas(item, canvasId.value)) {
+    removeItemComponent(item)
+    componentData.value.splice(index, 1)
+  }
+}
+
 function addItem(item, index) {
   if (index < 0) {
     index = componentData.value.length
@@ -1513,6 +1519,7 @@ onMounted(() => {
   eventBus.on('handleDragEnd-' + canvasId.value, handleDragEnd)
   eventBus.on('hideArea-' + canvasId.value, hideArea)
   eventBus.on('removeMatrixItem-' + canvasId.value, removeItem)
+  eventBus.on('removeMatrixItemPosition-' + canvasId.value, removeItemComponent)
   eventBus.on('removeMatrixItemById-' + canvasId.value, removeItemById)
   eventBus.on('addDashboardItem-' + canvasId.value, addItemBox)
   eventBus.on('snapshotChange-' + canvasId.value, canvasInit)
@@ -1528,6 +1535,7 @@ onBeforeUnmount(() => {
   eventBus.off('handleDragEnd-' + canvasId.value, handleDragEnd)
   eventBus.off('hideArea-' + canvasId.value, hideArea)
   eventBus.off('removeMatrixItem-' + canvasId.value, removeItem)
+  eventBus.off('removeMatrixItemPosition-' + canvasId.value, removeItemComponent)
   eventBus.off('removeMatrixItemById-' + canvasId.value, removeItemById)
   eventBus.off('addDashboardItem-' + canvasId.value, addItemBox)
   eventBus.off('snapshotChange-' + canvasId.value, canvasInit)

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

@@ -163,6 +163,10 @@
               </el-dropdown>
             </el-dropdown-item>
           </template>
+          <el-dropdown-item @click="hiddenComponent" v-if="barShowCheck('hidden')">{{
+            t('visualization.hidden')
+          }}</el-dropdown-item>
+
           <xpack-component
             :chart="element"
             jsname="L2NvbXBvbmVudC90aHJlc2hvbGQtd2FybmluZy9FZGl0QmFySGFuZGxlcg=="
@@ -222,6 +226,7 @@
 import icon_edit_outlined from '@/assets/svg/icon_edit_outlined.svg'
 import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
 import dvBarEnlarge from '@/assets/svg/dv-bar-enlarge.svg'
+import dvEyeClose from '@/assets/svg/dv-eye-close.svg'
 import dvDetails from '@/assets/svg/dv-details.svg'
 import icon_params_setting from '@/assets/svg/icon_params_setting.svg'
 import dvBarUnLinkage from '@/assets/svg/dv-bar-unLinkage.svg'
@@ -244,6 +249,8 @@ import CustomTabsSort from '@/custom-component/de-tabs/CustomTabsSort.vue'
 import { exportPivotExcel } from '@/views/chart/components/js/panel/common/common_table'
 import { XpackComponent } from '@/components/plugin'
 import { exportPermission, isMobile } from '@/utils/utils'
+import { layerStoreWithOut } from '@/store/modules/data-visualization/layer'
+const layerStore = layerStoreWithOut()
 const dvMainStore = dvMainStoreWithOut()
 const snapshotStore = snapshotStoreWithOut()
 const copyStore = copyStoreWithOut()
@@ -267,6 +274,7 @@ const positionBarShow = {
   canvas: [
     'datasetParams',
     'enlarge',
+    'hidden',
     'details',
     'setting',
     'copy',
@@ -287,6 +295,7 @@ const componentTypeBarShow = {
   UserView: [
     'datasetParams',
     'enlarge',
+    'hidden',
     'details',
     'setting',
     'copy',
@@ -300,7 +309,7 @@ const componentTypeBarShow = {
     'linkageSetting',
     'linkJumpSetting'
   ],
-  default: ['setting', 'delete', 'copy', 'multiplexing', 'batchOpt']
+  default: ['setting', 'delete', 'copy', 'multiplexing', 'batchOpt', 'hidden']
 }
 
 const barShowCheck = barName => {
@@ -492,6 +501,14 @@ const userViewEnlargeOpen = (e, opt) => {
   emits('userViewEnlargeOpen', opt)
 }
 
+const hiddenComponent = () => {
+  if (curComponent.value) {
+    curComponent.value.dashboardHidden = true
+    eventBus.emit('removeMatrixItemPosition-' + canvasId.value, curComponent.value)
+  }
+  snapshotStore.recordSnapshotCache('hide')
+}
+
 // 复用-Begin
 
 const multiplexingCheckOut = () => {

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

@@ -224,6 +224,7 @@ export const commonAttr = {
   maintainRadio: false, // 布局时保持宽高比例
   aspectRatio: 1, // 锁定时的宽高比例
   isShow: true, // 是否显示组件
+  dashboardHidden: false, // 仪表板组件隐藏
   category: 'base', //组件类型 base 基础组件 hidden隐藏组件
   // 当前组件动作
   dragging: false,

core/core-frontend/src/locales/en.ts

@@ -2808,6 +2808,7 @@ Scatter chart (bubble) chart: {a} (series name), {b} (data name), {c} (value arr
     column_name: 'Field name'
   },
   visualization: {
+    hidden_components: 'Hidden Components',
     dashboard_adaptor: 'Zoom Mode',
     scale_keep_height_and_width: 'Canvas Ratio',
     scale_with_width: 'Component Ratio',

core/core-frontend/src/locales/tw.ts

@@ -2736,6 +2736,7 @@ export default {
     column_name: '欄位名稱'
   },
   visualization: {
+    hidden_components: '已隱藏的組件',
     dashboard_adaptor: '縮放模式',
     scale_keep_height_and_width: '按畫布比例縮放',
     scale_with_width: '按元件比例縮放',

core/core-frontend/src/locales/zh-CN.ts

@@ -2738,6 +2738,7 @@ export default {
     column_name: '字段名称'
   },
   visualization: {
+    hidden_components: '已隐藏的组件',
     dashboard_adaptor: '缩放模式',
     scale_keep_height_and_width: '按画布比例缩放',
     scale_with_width: '按组件比例缩放',

core/core-frontend/src/store/modules/data-visualization/dvMain.ts

@@ -157,6 +157,8 @@ export const dvMainStore = defineStore('dataVisualization', {
       batchOptComponentType: null,
       // panel edit batch operation status
       batchOptStatus: false,
+      // 隐藏组件打开状态
+      hiddenListStatus: false,
       // Currently selected components
       curBatchOptComponents: [],
       // Currently selected Multiplexing components
@@ -904,6 +906,10 @@ export const dvMainStore = defineStore('dataVisualization', {
         customAttr: {}
       }
     },
+    setHiddenListStatus() {
+      this.hiddenListStatus = !this.hiddenListStatus
+      this.setBatchOptStatus(false)
+    },
     removeCurBatchComponentWithId(id) {
       for (let index = 0; index < this.curBatchOptComponents.length; index++) {
         const element = this.curBatchOptComponents[index]

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

@@ -185,6 +185,7 @@ export function historyItemAdaptor(
   }
 
   // public
+  componentItem['dashboardHidden'] = componentItem['dashboardHidden'] || false
   componentItem['maintainRadio'] = componentItem['maintainRadio'] || false
   componentItem['multiDimensional'] =
     componentItem['multiDimensional'] || deepCopy(MULTI_DIMENSIONAL)

core/core-frontend/src/views/dashboard/index.vue

@@ -32,6 +32,7 @@ import { useRequestStoreWithOut } from '@/store/modules/request'
 import { usePermissionStoreWithOut } from '@/store/modules/permission'
 import eventBus from '@/utils/eventBus'
 import { useI18n } from '@/hooks/web/useI18n'
+import DashboardHiddenComponent from '@/components/dashboard/DashboardHiddenComponent.vue'
 const embeddedStore = useEmbedded()
 const { wsCache } = useCache()
 const canvasCacheOutRef = ref(null)
@@ -56,6 +57,7 @@ const {
   canvasViewInfo,
   editMode,
   batchOptStatus,
+  hiddenListStatus,
   dvInfo
 } = storeToRefs(dvMainStore)
 const dataInitState = ref(false)
@@ -83,7 +85,8 @@ const otherEditorShow = computed(() => {
       (!['UserView', 'VQuery'].includes(curComponent.value?.component) ||
         (curComponent.value?.component === 'UserView' &&
           curComponent.value?.innerType === 'picture-group')) &&
-      !batchOptStatus.value
+      !batchOptStatus.value &&
+      !hiddenListStatus.value
   )
 })
 
@@ -98,7 +101,8 @@ const viewEditorShow = computed(() => {
     curComponent.value &&
       ['UserView', 'VQuery'].includes(curComponent.value.component) &&
       curComponent.value.innerType !== 'picture-group' &&
-      !batchOptStatus.value
+      !batchOptStatus.value &&
+      !hiddenListStatus.value
   )
 })
 const checkPer = async resourceId => {
@@ -268,6 +272,10 @@ const winMsgWebParamsHandle = msgInfo => {
   dvMainStore.addWebParamsFilter(params)
 }
 
+const dashboardComponentData = computed(() =>
+  componentData.value.filter(item => !item.dashboardHidden)
+)
+
 onUnmounted(() => {
   window.removeEventListener('storage', eventCheck)
   window.removeEventListener('message', winMsgHandle)
@@ -293,7 +301,7 @@ onUnmounted(() => {
           style="overflow-x: hidden"
           v-if="dataInitState"
           :canvas-id="state.canvasId"
-          :component-data="componentData"
+          :component-data="dashboardComponentData"
           :canvas-style-data="canvasStyleData"
           :canvas-view-info="canvasViewInfo"
           :font-family="canvasStyleData.fontFamily"
@@ -314,7 +322,7 @@ onUnmounted(() => {
         <component :is="findComponentAttr(curComponent)" :themes="'light'" />
       </dv-sidebar>
       <dv-sidebar
-        v-show="!curComponent && !batchOptStatus"
+        v-show="!curComponent && !batchOptStatus && !hiddenListStatus"
         :theme-info="'light'"
         :title="t('visualization.dashboard_configuration')"
         :width="420"
@@ -341,6 +349,16 @@ onUnmounted(() => {
       >
         <chart-style-batch-set></chart-style-batch-set>
       </dv-sidebar>
+      <dv-sidebar
+        v-if="hiddenListStatus"
+        :theme-info="'light'"
+        :title="t('visualization.hidden_components')"
+        :width="280"
+        aside-position="right"
+        class="left-sidebar"
+      >
+        <DashboardHiddenComponent></DashboardHiddenComponent>
+      </dv-sidebar>
     </el-container>
   </div>
   <MobileConfigPanel