From 452aa57e9e576c0f1b2c66cb7978bf7be6244909 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Fri, 12 Jul 2024 12:41:36 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F):=20?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F=E6=94=AF=E6=8C=81=E9=9A=90?=
 =?UTF-8?q?=E8=97=8F=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../data-visualization/canvas/DePreview.vue   | 11 +++
 .../canvas-filter-btn/Component.vue           | 81 +++++++++++++++++++
 .../custom-component/common/CommonAttr.vue    |  4 +-
 .../custom-component/picture/Component.vue    |  1 +
 .../custom-component/pop-area/Component.vue   |  2 +-
 5 files changed, 97 insertions(+), 2 deletions(-)
 create mode 100644 core/core-frontend/src/custom-component/canvas-filter-btn/Component.vue

diff --git a/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue b/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue
index d6674781c1..dd205469be 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue
@@ -15,9 +15,11 @@ import { personInfoApi } from '@/api/user'
 import router from '@/router'
 import { XpackComponent } from '@/components/plugin'
 import PopArea from '@/custom-component/pop-area/Component.vue'
+import CanvasFilterBtn from '@/custom-component/canvas-filter-btn/Component.vue'
 const dvMainStore = dvMainStoreWithOut()
 const { pcMatrixCount, curComponent, mobileInPc, canvasState } = storeToRefs(dvMainStore)
 const openHandler = ref(null)
+
 const props = defineProps({
   canvasStyleData: {
     type: Object,
@@ -295,6 +297,9 @@ const userViewEnlargeOpen = (opt, item) => {
 }
 const handleMouseDown = () => {
   dvMainStore.setCurComponent({ component: null, index: null })
+  if (!curComponent.value || (curComponent.value && curComponent.value.category !== 'hidden')) {
+    dvMainStore.canvasStateChange({ key: 'curPointArea', value: 'base' })
+  }
 }
 
 const onPointClick = param => {
@@ -328,6 +333,10 @@ const popAreaAvailable = computed(
   () => canvasStyleData.value?.popupAvailable && isMainCanvas(canvasId.value)
 )
 
+const filterBtnShow = computed(
+  () => popAreaAvailable.value && popComponentData.value && popComponentData.value.length > 0
+)
+
 defineExpose({
   restore
 })
@@ -341,6 +350,8 @@ defineExpose({
     ref="previewCanvas"
     @mousedown="handleMouseDown"
   >
+    <!--弹框触发区域-->
+    <canvas-filter-btn v-if="filterBtnShow"></canvas-filter-btn>
     <!-- 弹框区域 -->
     <PopArea
       v-if="popAreaAvailable"
diff --git a/core/core-frontend/src/custom-component/canvas-filter-btn/Component.vue b/core/core-frontend/src/custom-component/canvas-filter-btn/Component.vue
new file mode 100644
index 0000000000..345baf7e1a
--- /dev/null
+++ b/core/core-frontend/src/custom-component/canvas-filter-btn/Component.vue
@@ -0,0 +1,81 @@
+<!-- IconSlider.vue -->
+<template>
+  <el-tooltip offset="18" effect="dark" placement="left" content="查询">
+    <div class="canvas-filter">
+      <div class="icon-slider" @mouseenter="slideOut" @mouseleave="slideBack">
+        <div
+          class="icon-container"
+          :class="{ 'icon-container-active': filterActive }"
+          :style="{ transform: `translateX(${offset}px)` }"
+          @click="popAreaActiveChange"
+        >
+          <el-icon><Filter /></el-icon>
+        </div>
+      </div>
+    </div>
+  </el-tooltip>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import { ElTooltip } from 'element-plus-secondary'
+import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
+import { storeToRefs } from 'pinia'
+const dvMainStore = dvMainStoreWithOut()
+const offset = ref(0)
+const slideDistance = ref(14) // 滑动距离
+const { canvasState } = storeToRefs(dvMainStore)
+
+const filterActive = computed(() => canvasState.value.curPointArea === 'hidden')
+const slideOut = () => {
+  offset.value = -slideDistance.value
+}
+
+const popAreaActiveChange = () => {
+  dvMainStore.popAreaActiveSwitch()
+}
+const slideBack = () => {
+  offset.value = 0
+}
+</script>
+
+<style lang="less" scoped>
+.canvas-filter {
+  position: absolute;
+  right: -14px;
+  bottom: 50px;
+  width: 28px;
+  height: 32px;
+}
+.icon-slider {
+  position: relative;
+  z-index: 100;
+  width: 28px;
+  height: 32px;
+}
+
+.icon-container {
+  transition: transform 0.3s ease; /* 过渡动画 */
+  background: rgba(26, 26, 26, 1);
+  font-size: 14px;
+  border: 1px solid rgba(67, 67, 67, 1);
+  border-radius: 16px 0 0 16px;
+  padding: 6px 0 0 6px;
+  cursor: pointer;
+  &:hover {
+    background: rgba(235, 235, 235, 0.1);
+  }
+
+  &:active {
+    background: rgba(235, 235, 235, 0.2);
+  }
+}
+.icon-container-active {
+  transform: translateX(-14px) !important;
+}
+
+img {
+  max-width: 100%;
+  max-height: 100%;
+}
+</style>
diff --git a/core/core-frontend/src/custom-component/common/CommonAttr.vue b/core/core-frontend/src/custom-component/common/CommonAttr.vue
index 6bad08932a..c1034964d6 100644
--- a/core/core-frontend/src/custom-component/common/CommonAttr.vue
+++ b/core/core-frontend/src/custom-component/common/CommonAttr.vue
@@ -88,8 +88,10 @@ const colorPickerWidth = computed(() => {
   }
 })
 
+// 暂时关闭
 const eventsShow = computed(() => {
-  return !dashboardActive.value && ['Picture'].includes(element.value.component)
+  return false
+  // return !dashboardActive.value && ['Picture'].includes(element.value.component)
 })
 
 const backgroundCustomShow = computed(() => {
diff --git a/core/core-frontend/src/custom-component/picture/Component.vue b/core/core-frontend/src/custom-component/picture/Component.vue
index 18bb184528..2ca938e064 100644
--- a/core/core-frontend/src/custom-component/picture/Component.vue
+++ b/core/core-frontend/src/custom-component/picture/Component.vue
@@ -77,6 +77,7 @@ const uploadImg = () => {
   overflow: hidden;
   width: 100%;
   height: 100%;
+  cursor: pointer;
 }
 .pic-upload {
   display: flex;
diff --git a/core/core-frontend/src/custom-component/pop-area/Component.vue b/core/core-frontend/src/custom-component/pop-area/Component.vue
index 00d3723aa0..e4f5b8da6e 100644
--- a/core/core-frontend/src/custom-component/pop-area/Component.vue
+++ b/core/core-frontend/src/custom-component/pop-area/Component.vue
@@ -1,6 +1,6 @@
 <template>
   <!--此区域暂时放到类似视图和分组平行的组件作为后续扩展使用，但当前版本只作为类似MarkLine 和canvasCore平行组件 仅做区域显示使用-->
-  <div class="pop-area" :style="popCanvasStyle" @mousedown="handleMouseDown">
+  <div class="pop-area" :style="popCanvasStyle" @mousedown.stop @mousedup.stop>
     <div style="width: 100%; height: 100%">
       <div v-if="popComponentData && popComponentData.length > 0" class="pop-content">
         <!--使用ComponentWrapper 保留扩展能力-->