feat(数据大屏): 支持显示弹窗区筛选按钮控制功能

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>

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)

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>

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)

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,