From bc4d842a9b3a7b47792fe2b1e919fd51a24882af Mon Sep 17 00:00:00 2001
From: limengnan <420004014@qq.com>
Date: Tue, 24 Jun 2025 14:32:29 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E5=89=8D=E7=AB=AFsrc/views/v?=
 =?UTF-8?q?iewsnew/common=E7=9B=AE=E5=BD=95=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/viewsnew/common/DeAppApply.vue        |   7 +-
 .../viewsnew/common/DeResourceGroupOpt.vue    |  16 +-
 .../src/viewsnew/common/DeResourceTree.vue    | 157 +++++++++++++++---
 .../viewsnew/common/MultiplexingCanvas.vue    |  21 ++-
 4 files changed, 165 insertions(+), 36 deletions(-)

diff --git a/core/core-frontend/src/viewsnew/common/DeAppApply.vue b/core/core-frontend/src/viewsnew/common/DeAppApply.vue
index 75699cd..ac4c4e0 100644
--- a/core/core-frontend/src/viewsnew/common/DeAppApply.vue
+++ b/core/core-frontend/src/viewsnew/common/DeAppApply.vue
@@ -2,7 +2,7 @@
   <el-drawer
     :title="t('visualization.save_app')"
     v-model="state.appApplyDrawer"
-    custom-class="de-app-drawer"
+    modal-class="de-app-drawer"
     :show-close="false"
     size="500px"
     direction="rtl"
@@ -158,7 +158,6 @@ import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapsho
 import { useCache } from '@/hooks/web/useCache'
 import { isDesktop } from '@/utils/ModelUtil'
 import { filterFreeFolder } from '@/utils/utils'
-const desktop = isDesktop()
 
 const { wsCache } = useCache('localStorage')
 const { t } = useI18n()
@@ -186,7 +185,7 @@ const props = defineProps({
   }
 })
 
-const { componentData, canvasViewInfo, curCanvasType, themes } = toRefs(props)
+const { curCanvasType } = toRefs(props)
 const openType = wsCache.get('open-backend') === '1' ? '_self' : '_blank'
 
 const dvPreName = computed(() =>
@@ -259,7 +258,7 @@ const goBack = () => {
 }
 
 const initData = () => {
-  const request = { busiFlag: curCanvasType.value, leaf: false, weight: 7 }
+  const request = { busiFlag: curCanvasType.value, resourceTable: 'core', leaf: false, weight: 7 }
   queryTreeApi(request).then(res => {
     filterFreeFolder(res, curCanvasType.value)
     const resultTree = res || []
diff --git a/core/core-frontend/src/viewsnew/common/DeResourceGroupOpt.vue b/core/core-frontend/src/viewsnew/common/DeResourceGroupOpt.vue
index e50ae35..e50dea1 100644
--- a/core/core-frontend/src/viewsnew/common/DeResourceGroupOpt.vue
+++ b/core/core-frontend/src/viewsnew/common/DeResourceGroupOpt.vue
@@ -30,7 +30,9 @@ const { t } = useI18n()
 
 const state = reactive({
   tData: [],
-  nameList: []
+  nameList: [],
+  targetInfo: null,
+  attachParams: null
 })
 
 const showParentSelected = ref(false)
@@ -134,8 +136,10 @@ const getDialogTitle = exec => {
 }
 const placeholder = ref('')
 
-const optInit = (type, data: BusiTreeNode, exec, parentSelect = false) => {
+const optInit = (type, data: BusiTreeNode, exec, parentSelect = false, attachParams?) => {
   showParentSelected.value = parentSelect
+  state.targetInfo = data
+  state.attachParams = attachParams
   nodeType.value = type
   const optSource = data.leaf || type === 'leaf' ? sourceLabel.value : t('visualization.folder')
   const placeholderLabel =
@@ -148,7 +152,7 @@ const optInit = (type, data: BusiTreeNode, exec, parentSelect = false) => {
   filterText.value = ''
   dialogTitle.value = getDialogTitle(exec) + ('rename' === exec ? optSource : '')
   resourceFormNameLabel.value = (exec === 'move' ? '' : optSource) + t('visualization.name')
-  const request = { busiFlag: curCanvasType.value, leaf: false, weight: 7 }
+  const request = { busiFlag: curCanvasType.value, leaf: false, resourceTable: 'core', weight: 7 }
   if (['newFolder'].includes(exec)) {
     resourceForm.name = ''
   } else if ('copy' === exec) {
@@ -253,7 +257,9 @@ const saveResource = () => {
       const params: ResourceOrFolder = {
         nodeType: nodeType.value as 'folder' | 'leaf',
         name: resourceForm.name,
-        type: curCanvasType.value
+        type: curCanvasType.value,
+        mobileLayout: state.targetInfo?.extraFlag,
+        status: state.targetInfo?.extraFlag1
       }
 
       switch (cmd.value) {
@@ -282,7 +288,7 @@ const saveResource = () => {
       }
       if (cmd.value === 'newLeaf') {
         resourceDialogShow.value = false
-        emits('finish', { opt: 'newLeaf', ...params })
+        emits('finish', { opt: 'newLeaf', ...params, ...state.attachParams })
       } else {
         loading.value = true
         const method = methodMap[cmd.value] ? methodMap[cmd.value] : updateBase
diff --git a/core/core-frontend/src/viewsnew/common/DeResourceTree.vue b/core/core-frontend/src/viewsnew/common/DeResourceTree.vue
index 416ca6b..db9107f 100644
--- a/core/core-frontend/src/viewsnew/common/DeResourceTree.vue
+++ b/core/core-frontend/src/viewsnew/common/DeResourceTree.vue
@@ -1,13 +1,16 @@
 <script setup lang="ts">
 import dvDashboardSpineMobile from '@/assets/svg/dv-dashboard-spine-mobile.svg'
+import dvDashboardSpineMobileDisabled from '@/assets/svg/dv-dashboard-spine-mobile-disabled.svg'
 import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
 import dvCopyDark from '@/assets/svg/dv-copy-dark.svg'
 import dvDelete from '@/assets/svg/dv-delete.svg'
 import dvMove from '@/assets/svg/dv-move.svg'
+import dvCancelPublish from '@/assets/svg/icon_undo_outlined.svg'
 import { treeDraggbleChart } from '@/utils/treeDraggbleChart'
 import { debounce } from 'lodash-es'
 import dvRename from '@/assets/svg/dv-rename.svg'
 import dvDashboardSpine from '@/assets/svg/dv-dashboard-spine.svg'
+import dvDashboardSpineDisabled from '@/assets/svg/dv-dashboard-spine-disabled.svg'
 import dvScreenSpine from '@/assets/svg/dv-screen-spine.svg'
 import dvNewFolder from '@/assets/svg/dv-new-folder.svg'
 import icon_fileAdd_outlined from '@/assets/svg/icon_file-add_outlined.svg'
@@ -23,7 +26,8 @@ import {
   copyResource,
   deleteLogic,
   ResourceOrFolder,
-  queryShareBaseApi
+  queryShareBaseApi,
+  updateBase
 } from '@/api/visualization/dataVisualization'
 import { ElIcon, ElMessage, ElMessageBox, ElScrollbar } from 'element-plus-secondary'
 import { Icon } from '@/components/icon-custom'
@@ -44,7 +48,7 @@ import { useI18n } from '@/hooks/web/useI18n'
 import _ from 'lodash'
 import DeResourceCreateOptV2 from '@/views/common/DeResourceCreateOptV2.vue'
 import { useCache } from '@/hooks/web/useCache'
-import { findParentIdByChildIdRecursive } from '@/utils/canvasUtils'
+import { findParentIdByChildIdRecursive, onInitReady } from '@/utils/canvasUtils'
 import { XpackComponent } from '@/components/plugin'
 import treeSort, { treeParentWeight } from '@/utils/treeSortUtils'
 import router from '@/router'
@@ -67,11 +71,17 @@ const props = defineProps({
     required: false,
     type: String,
     default: 'preview'
+  },
+  resourceTable: {
+    required: false,
+    type: String,
+    default: 'core'
   }
 })
 const defaultProps = {
   children: 'children',
-  label: 'name'
+  label: 'name',
+  disabled: (data: any) => data.extraFlag1 === 0
 }
 const mounted = ref(false)
 const rootManage = ref(false)
@@ -170,10 +180,16 @@ const menuListWeight = id => {
   return pWeight < 7 ? menuList : menuListWithCopy
 }
 const menuListWithCopy = [
+  {
+    label: t('visualization.cancel_publish'), //取消发布
+    command: 'cancelPublish',
+    svgName: dvCancelPublish
+  },
   {
     label: t('visualization.copy'), //'复制',
     command: 'copy',
-    svgName: dvCopyDark
+    svgName: dvCopyDark,
+    divided: true
   },
   {
     label: t('visualization.move_to'), //'移动到',
@@ -193,10 +209,16 @@ const menuListWithCopy = [
   }
 ]
 const menuList = [
+  {
+    label: t('visualization.cancel_publish'), //取消发布
+    command: 'cancelPublish',
+    svgName: dvCancelPublish
+  },
   {
     label: t('visualization.move_to'), //'移动到',
     command: 'move',
-    svgName: dvMove
+    svgName: dvMove,
+    divided: true
   },
   {
     label: t('visualization.rename'), //'重命名',
@@ -232,6 +254,9 @@ const nodeCollapse = data => {
 }
 
 const filterNode = (value: string, data: BusiTreeNode) => {
+  if (showPosition.value === 'multiplexing' && data.id === dvInfo.value?.id) {
+    return false
+  }
   if (!value) return true
   return data.name?.toLocaleLowerCase().includes(value.toLocaleLowerCase())
 }
@@ -243,18 +268,59 @@ const cancelPreRequest = () => {
   cancelRequestBatch('/linkJump/queryVisualizationJumpInfo/**')
 }
 
-const nodeClick = (data: BusiTreeNode) => {
-  cancelPreRequest()
-  selectedNodeKey.value = data.id
-  if (data.leaf) {
-    emit('nodeClick', data)
+const nodeClick = (data: BusiTreeNode, node) => {
+  dvMainStore.setCurComponent({ component: null, index: null })
+  if (showPosition.value !== 'multiplexing') {
+    dvMainStore.setEditMode('preview')
+  }
+  if (node.disabled) {
+    nextTick(() => {
+      // 找到当前高亮的节点，移除高亮样式
+      const currentNode = resourceListTree.value.$el.querySelector('.is-current')
+      if (currentNode) {
+        currentNode.classList.remove('is-current')
+      }
+      return // 阻止后续逻辑
+    })
   } else {
-    resourceListTree.value.setCurrentKey(null)
+    cancelPreRequest()
+    selectedNodeKey.value = data.id
+    if (data.leaf) {
+      if (!embeddedStore.baseUrl) {
+        let url = window.location.href
+        const paramName = 'dvId'
+        const paramValue = data.id
+        // 检查是否已经有查询参数（在哈希部分）
+        if (url.includes('?')) {
+          const regex = new RegExp(`([?&])${paramName}=[^&]*`)
+          if (regex.test(url)) {
+            url = url.replace(regex, `$1${paramName}=${paramValue}`)
+          } else {
+            url += `&${paramName}=${paramValue}`
+          }
+        } else {
+          url += `?${paramName}=${paramValue}`
+        }
+        window.history.replaceState(
+          {
+            path: url
+          },
+          '',
+          url
+        )
+      }
+      emit('nodeClick', data)
+    } else {
+      resourceListTree.value.setCurrentKey(null)
+    }
   }
 }
 
 const getTree = async () => {
-  const request = { busiFlag: curCanvasType.value } as BusiTreeRequest
+  const request = {
+    busiFlag: curCanvasType.value,
+    resourceTable: props.resourceTable
+  } as BusiTreeRequest
   const isDashboard = curCanvasType.value == 'dashboard'
   await interactiveStore.setInteractive(request)
   const interactiveData = isDashboard ? interactiveStore.getPanel : interactiveStore.getScreen
@@ -305,15 +371,13 @@ const afterTreeInit = () => {
     expandedArray.value = getDefaultExpandedKeys()
     returnMounted.value = false
   }
+  onInitReady({ type: curCanvasType.value }, 'resource_tree_init_ready')
   nextTick(() => {
     resourceListTree.value.setCurrentKey(selectedNodeKey.value)
-    nextTick(() => {
-      if (selectedNodeKey.value) {
-        const nodeDom = document.querySelector('.is-current')
-        nodeDom && nodeDom.click()
-      }
-    })
     resourceListTree.value.filter(filterText.value)
+    nextTick(() => {
+      document.querySelector('.is-current')?.firstChild?.click()
+    })
   })
 }
 
@@ -337,6 +401,22 @@ const operation = (cmd: string, data: BusiTreeNode, nodeType: string) => {
         getTree()
       })
     })
+  } else if (cmd === 'cancelPublish') {
+    const params = {
+      id: data.id,
+      nodeType: 'leaf',
+      name: data.name,
+      type: curCanvasType.value,
+      mobileLayout: data?.extraFlag,
+      status: 0
+    }
+    updateBase(params).then(() => {
+      data['extraFlag1'] = 0
+      if (dvInfo.value.id === data.id) {
+        dvMainStore.updateDvInfoCall(0)
+      }
+      ElMessage.warning(t('visualization.cancel_publish_tips'))
+    })
   } else if (cmd === 'edit') {
     resourceEdit(data.id)
   } else if (cmd === 'copy') {
@@ -703,23 +783,43 @@ defineExpose({
         draggable
       >
         <template #default="{ node, data }">
-          <span class="custom-tree-node">
+          <span class="custom-tree-node" :class="{ 'node-disabled-custom': data.extraFlag1 === 0 }">
             <el-icon style="font-size: 18px" v-if="!data.leaf">
               <Icon name="dv-folder"><dvFolder class="svg-icon" /></Icon>
             </el-icon>
             <el-icon style="font-size: 18px" v-else-if="curCanvasType === 'dashboard'">
-              <Icon
+              <Icon v-if="data.extraFlag1"
                 ><component
                   :is="data.extraFlag ? dvDashboardSpineMobile : dvDashboardSpine"
                 ></component
               ></Icon>
+              <Icon v-if="!data.extraFlag1"
+                ><component
+                  :is="data.extraFlag ? dvDashboardSpineMobileDisabled : dvDashboardSpineDisabled"
+                ></component
+              ></Icon>
             </el-icon>
-            <el-icon class="icon-screen-new color-dataV" style="font-size: 18px" v-else>
+            <el-icon
+              class="icon-screen-new color-dataV"
+              :class="{ 'color-dataV': data.extraFlag1, 'color-dataV-disabled': !data.extraFlag1 }"
+              style="font-size: 18px"
+              v-else
+            >
               <Icon name="icon_operation-analysis_outlined"
                 ><icon_operationAnalysis_outlined class="svg-icon"
               /></Icon>
             </el-icon>
-            <span :title="node.label" class="label-tooltip">{{ node.label }}</span>
+            <span :title="node.label" class="label-tooltip">
+              <el-tooltip
+                class="box-item"
+                effect="dark"
+                :content="t('visualization.publish_tips1')"
+                :disabled="data.extraFlag1"
+                placement="top-start"
+              >
+                {{ node.label }}
+              </el-tooltip>
+            </span>
             <div class="icon-more" v-if="data.weight >= 7 && showPosition === 'preview'">
               <el-icon
                 v-on:click.stop
@@ -902,7 +1002,7 @@ defineExpose({
 
 <style lang="less">
 .menu-outer-dv_popper {
-  width: 140px;
+  min-width: 140px;
   margin-top: -2px !important;
 
   .ed-icon {
@@ -921,5 +1021,14 @@ defineExpose({
   i {
     display: block;
   }
-} 
+}
+
+.node-disabled-custom {
+  color: rgba(187, 191, 196, 1);
+  cursor: not-allowed;
+}
+
+.color-dataV-disabled {
+  background: #bbbfc4 !important;
+}
 </style>
diff --git a/core/core-frontend/src/viewsnew/common/MultiplexingCanvas.vue b/core/core-frontend/src/viewsnew/common/MultiplexingCanvas.vue
index e839928..6e673ca 100644
--- a/core/core-frontend/src/viewsnew/common/MultiplexingCanvas.vue
+++ b/core/core-frontend/src/viewsnew/common/MultiplexingCanvas.vue
@@ -5,14 +5,18 @@
     v-model="dialogShow"
     trigger="click"
     :title="t('visualization.multiplexing')"
-    custom-class="custom-drawer"
+    modal-class="custom-drawer"
+    @closed="handleClose()"
   >
+    <!-- 标识当前在复用页，用于作为轮播提示前缀 -->
+    <div v-if="dialogShow" id="multiplexingDrawer" />
     <dashboard-preview-show
       v-if="dialogShow && curDvType === 'dashboard'"
       ref="multiplexingPreviewShowRef"
       class="multiplexing-area"
       no-close
       show-position="multiplexing"
+      resource-table="snapshot"
     ></dashboard-preview-show>
     <preview-show
       v-if="dialogShow && curDvType === 'dataV'"
@@ -20,6 +24,7 @@
       class="multiplexing-area"
       no-close
       show-position="multiplexing"
+      resource-table="snapshot"
     ></preview-show>
     <template #footer>
       <el-row class="multiplexing-footer">
@@ -66,6 +71,7 @@ import { storeToRefs } from 'pinia'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
 import PreviewShow from '@/views/data-visualization/PreviewShow.vue'
 import { useI18n } from '@/hooks/web/useI18n'
+import ChartCarouselTooltip from '@/views/chart/components/js/g2plot_tooltip_carousel'
 const dvMainStore = dvMainStoreWithOut()
 const snapshotStore = snapshotStoreWithOut()
 const dialogShow = ref(false)
@@ -82,6 +88,7 @@ const state = reactive({
   ]
 })
 const dialogInit = (dvType = 'dashboard') => {
+  ChartCarouselTooltip.paused()
   curDvType.value = dvType
   dialogShow.value = true
   dvMainStore.initCurMultiplexingComponents()
@@ -92,11 +99,19 @@ const saveMultiplexing = () => {
   const previewStateInfo = multiplexingPreviewShowRef.value.getPreviewStateInfo()
   const canvasViewInfoPreview = previewStateInfo.canvasViewInfoPreview
   nextTick(() => {
-    copyStore.copyMultiplexingComponents(canvasViewInfoPreview)
+    copyStore.copyMultiplexingComponents(
+      canvasViewInfoPreview,
+      undefined,
+      undefined,
+      undefined,
+      previewStateInfo.canvasStylePreview.scale
+    )
     snapshotStore.recordSnapshotCache('saveMultiplexing')
   })
 }
-
+const handleClose = () => {
+  ChartCarouselTooltip.closeEnlargeDialogDestroy()
+}
 defineExpose({
   dialogInit
 })