From e755f70d7418e3748cb5184c87972e71cf57f187 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Tue, 13 Aug 2024 17:28:14 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F):=20?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E6=98=BE=E7=A4=BA=E5=BC=B9=E7=AA=97=E5=8C=BA?=
 =?UTF-8?q?=E7=AD=9B=E9=80=89=E6=8C=89=E9=92=AE=E6=8E=A7=E5=88=B6=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../data-visualization/CanvasAttr.vue         |  6 +-
 .../data-visualization/canvas/DePreview.vue   |  6 +-
 .../visualization/CanvasBaseSetting.vue       | 67 +++++++++++++++++++
 core/core-frontend/src/utils/canvasUtils.ts   |  4 ++
 .../editor/util/dataVisualization.ts          |  1 +
 5 files changed, 82 insertions(+), 2 deletions(-)
 create mode 100644 core/core-frontend/src/components/visualization/CanvasBaseSetting.vue

diff --git a/core/core-frontend/src/components/data-visualization/CanvasAttr.vue b/core/core-frontend/src/components/data-visualization/CanvasAttr.vue
index 85eafc08ec..b69c70816c 100644
--- a/core/core-frontend/src/components/data-visualization/CanvasAttr.vue
+++ b/core/core-frontend/src/components/data-visualization/CanvasAttr.vue
@@ -12,12 +12,13 @@ import OverallSetting from '@/components/dashboard/subject-setting/dashboard-sty
 import CanvasBackground from '@/components/visualization/component-background/CanvasBackground.vue'
 import SeniorStyleSetting from '@/components/dashboard/subject-setting/dashboard-style/SeniorStyleSetting.vue'
 import Icon from '../icon-custom/src/Icon.vue'
+import CanvasBaseSetting from '@/components/visualization/CanvasBaseSetting.vue'
 const dvMainStore = dvMainStoreWithOut()
 const snapshotStore = snapshotStoreWithOut()
 const { canvasStyleData, canvasViewInfo } = storeToRefs(dvMainStore)
 let canvasAttrInit = false
 
-const canvasAttrActiveNames = ref(['size', 'background', 'color'])
+const canvasAttrActiveNames = ref(['size', 'baseSetting', 'background', 'color'])
 
 const screenAdaptorList = [
   { label: '宽度优先', value: 'widthFirst' },
@@ -146,6 +147,9 @@ onMounted(() => {
           </el-row>
         </el-form>
       </el-collapse-item>
+      <el-collapse-item effect="dark" title="基础配置" name="baseSetting">
+        <canvas-base-setting themes="dark"></canvas-base-setting>
+      </el-collapse-item>
       <el-collapse-item effect="dark" title="背景" name="background">
         <canvas-background themes="dark"></canvas-background>
       </el-collapse-item>
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 b4c48f4c33..c91794bc34 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue
@@ -353,7 +353,11 @@ const popAreaAvailable = computed(
 )
 
 const filterBtnShow = computed(
-  () => popAreaAvailable.value && popComponentData.value && popComponentData.value.length > 0
+  () =>
+    popAreaAvailable.value &&
+    popComponentData.value &&
+    popComponentData.value.length > 0 &&
+    canvasStyleData.value.popupButtonAvailable
 )
 const datasetParamsInit = item => {
   customDatasetParamsRef.value?.optInit(item)
diff --git a/core/core-frontend/src/components/visualization/CanvasBaseSetting.vue b/core/core-frontend/src/components/visualization/CanvasBaseSetting.vue
new file mode 100644
index 0000000000..3c4825f82e
--- /dev/null
+++ b/core/core-frontend/src/components/visualization/CanvasBaseSetting.vue
@@ -0,0 +1,67 @@
+<template>
+  <div style="width: 100%" ref="bgForm">
+    <el-form label-position="top" style="width: 100%; margin-bottom: 16px">
+      <el-form-item class="form-item no-margin-bottom" :class="'form-item-' + themes">
+        <el-checkbox
+          size="small"
+          :effect="themes"
+          v-model="canvasStyleData.popupButtonAvailable"
+          @change="onPopButtonChange"
+        >
+          <div style="display: flex; line-height: 14px">
+            显示弹窗区筛选按钮
+            <el-tooltip class="item" :effect="themes" placement="bottom">
+              <template #content>
+                <div>预览时启用</div>
+              </template>
+              <el-icon class="hint-icon" :class="{ 'hint-icon--dark': themes === 'dark' }">
+                <Icon name="icon_info_outlined" />
+              </el-icon>
+            </el-tooltip>
+          </div>
+        </el-checkbox>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
+import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
+import { storeToRefs } from 'pinia'
+import { ElIcon } from 'element-plus-secondary'
+import Icon from '../icon-custom/src/Icon.vue'
+const snapshotStore = snapshotStoreWithOut()
+
+const dvMainStore = dvMainStoreWithOut()
+const { canvasStyleData } = storeToRefs(dvMainStore)
+
+const onPopButtonChange = () => {
+  snapshotStore.recordSnapshotCache()
+}
+
+withDefaults(
+  defineProps<{
+    themes?: EditorTheme
+  }>(),
+  {
+    themes: 'dark'
+  }
+)
+</script>
+
+<style scoped lang="less">
+.hint-icon {
+  cursor: pointer;
+  font-size: 14px;
+  color: #646a73;
+
+  &.hint-icon--dark {
+    color: #a6a6a6;
+  }
+}
+:deep(.ed-form-item) {
+  display: block;
+  margin-bottom: 16px;
+}
+</style>
diff --git a/core/core-frontend/src/utils/canvasUtils.ts b/core/core-frontend/src/utils/canvasUtils.ts
index 60c06f4382..11fa62ee3e 100644
--- a/core/core-frontend/src/utils/canvasUtils.ts
+++ b/core/core-frontend/src/utils/canvasUtils.ts
@@ -198,6 +198,10 @@ export function historyAdaptor(
   canvasStyleResult['scaleHeight'] = canvasStyleResult['scale']
   canvasStyleResult['popupAvailable'] =
     canvasStyleResult['popupAvailable'] === undefined ? true : canvasStyleResult['popupAvailable'] //兼容弹框区域开关
+  canvasStyleResult['popupButtonAvailable'] =
+    canvasStyleResult['popupButtonAvailable'] === undefined
+      ? true
+      : canvasStyleResult['popupButtonAvailable'] //兼容弹框区域按钮开关
   const reportFilterInfo = canvasInfo.reportFilterInfo
   canvasDataResult.forEach(componentItem => {
     historyItemAdaptor(componentItem, reportFilterInfo, attachInfo, canvasVersion, canvasInfo)
diff --git a/core/core-frontend/src/views/chart/components/editor/util/dataVisualization.ts b/core/core-frontend/src/views/chart/components/editor/util/dataVisualization.ts
index ea8f05674e..09c831b9e4 100644
--- a/core/core-frontend/src/views/chart/components/editor/util/dataVisualization.ts
+++ b/core/core-frontend/src/views/chart/components/editor/util/dataVisualization.ts
@@ -85,6 +85,7 @@ export const DEFAULT_CANVAS_STYLE_DATA_BASE = {
   refreshUnit: 'minute', // 仪表板刷新时间带外 默认 分钟
   refreshTime: 5, // 仪表板刷新时间 默认5分钟
   popupAvailable: true, // 弹窗区域是否可用 默认为true
+  popupButtonAvailable: true, // 弹框区域显示按钮是否可用 默认为true
   screenAdaptor: 'widthFirst', // 屏幕适配方式 widthFirst=宽度优先 heightFirst=高度优先 full=铺满全屏 keepSize=不缩放
   scale: 60,
   scaleWidth: 100,