Merge pull request #9713 from dataease/pr@dev-v2@feat_canvas-setting

feat(仪表板): 支持仪表板级别设置图标颜色等高级设置
dataease · May 17, 2024 · 4fe6ea7 · 4fe6ea7
2 parents 70203ad + 2a2b01a
commit 4fe6ea7
Show file tree

Hide file tree

Showing 7 changed files with 165 additions and 10 deletions.
diff --git a/core/core-frontend/src/components/dashboard/DbCanvasAttr.vue b/core/core-frontend/src/components/dashboard/DbCanvasAttr.vue
@@ -16,6 +16,7 @@ import { deepCopy } from '@/utils/utils'
 import { useEmitt } from '@/hooks/web/useEmitt'
 import { merge } from 'lodash-es'
 import CanvasBackground from '@/components/visualization/component-background/CanvasBackground.vue'
+import SeniorStyleSetting from '@/components/dashboard/subject-setting/dashboard-style/SeniorStyleSetting.vue'
 const dvMainStore = dvMainStoreWithOut()
 const snapshotStore = snapshotStoreWithOut()
 const { canvasStyleData, componentData, canvasViewInfo } = storeToRefs(dvMainStore)
@@ -145,6 +146,20 @@ const saveSelfSubject = () => {
         >
           <filter-style-simple-selector />
         </el-collapse-item>
+        <el-collapse-item
+          :title="t('visualization.filter_component')"
+          name="filterComponent"
+          class="no-padding no-border-bottom"
+        >
+          <filter-style-simple-selector />
+        </el-collapse-item>
+        <el-collapse-item
+          title="高级样式设置"
+          name="seniorStyleSetting"
+          class="no-padding no-border-bottom"
+        >
+          <senior-style-setting></senior-style-setting>
+        </el-collapse-item>
       </el-collapse>
     </el-row>
   </div>

diff --git a/...core-frontend/src/components/dashboard/subject-setting/dashboard-style/OverallSetting.vue b/...core-frontend/src/components/dashboard/subject-setting/dashboard-style/OverallSetting.vue
@@ -152,7 +152,9 @@ import {
   DEFAULT_TITLE_STYLE_DARK,
   DEFAULT_TITLE_STYLE_LIGHT,
   FILTER_COMMON_STYLE_DARK,
-  FILTER_COMMON_STYLE_LIGHT
+  FILTER_COMMON_STYLE_LIGHT,
+  SENIOR_STYLE_SETTING_DARK,
+  SENIOR_STYLE_SETTING_LIGHT
 } from '@/views/chart/components/editor/util/chart'
 import ColorButton from '@/components/assist-button/ColorButton.vue'
 import { computed } from 'vue'
@@ -189,13 +191,15 @@ const themeChange = modifyName => {
       canvasStyleData.value.component.chartColor = deepCopy(DEFAULT_COLOR_CASE_LIGHT)
       canvasStyleData.value.component.filterStyle = deepCopy(FILTER_COMMON_STYLE_LIGHT)
       canvasStyleData.value.component.tabStyle = deepCopy(DEFAULT_TAB_COLOR_CASE_LIGHT)
+      canvasStyleData.value.component.seniorStyleSetting = deepCopy(SENIOR_STYLE_SETTING_LIGHT)
     } else {
       canvasStyleData.value.backgroundColor = DARK_THEME_DASHBOARD_BACKGROUND
       canvasStyleData.value.component.chartCommonStyle = deepCopy(COMMON_COMPONENT_BACKGROUND_DARK)
       canvasStyleData.value.component.chartTitle = deepCopy(DEFAULT_TITLE_STYLE_DARK)
       canvasStyleData.value.component.chartColor = deepCopy(DEFAULT_COLOR_CASE_DARK)
       canvasStyleData.value.component.filterStyle = deepCopy(FILTER_COMMON_STYLE_DARK)
       canvasStyleData.value.component.tabStyle = deepCopy(DEFAULT_TAB_COLOR_CASE_DARK)
+      canvasStyleData.value.component.seniorStyleSetting = deepCopy(SENIOR_STYLE_SETTING_DARK)
     }
     adaptCurThemeCommonStyleAll()
   }

diff --git a/...-frontend/src/components/dashboard/subject-setting/dashboard-style/SeniorStyleSetting.vue b/...-frontend/src/components/dashboard/subject-setting/dashboard-style/SeniorStyleSetting.vue
@@ -0,0 +1,109 @@
+<template>
+  <div style="width: 100%; padding-bottom: 8px">
+    <el-form label-position="top" style="width: 100%">
+      <div style="width: 100%; padding: 16px 8px 0">
+        <el-col :span="12">
+          <el-form-item class="form-item" label="联动、钻取、调整的图标颜色">
+            <el-color-picker
+              v-model="filterStyle.titleColor"
+              :trigger-width="197"
+              is-custom
+              :predefine="state.predefineColors"
+              @change="themeChange('titleColor')"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item class="form-item" label="钻取层级展示颜色">
+            <el-color-picker
+              v-model="filterStyle.labelColor"
+              :trigger-width="197"
+              is-custom
+              :predefine="state.predefineColors"
+              @change="themeChange('labelColor')"
+            />
+          </el-form-item>
+        </el-col>
+      </div>
+    </el-form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, reactive, computed } from 'vue'
+import { COLOR_PANEL } from '@/views/chart/components/editor/util/chart'
+import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
+import { useI18n } from '@/hooks/web/useI18n'
+import { cloneDeep } from 'lodash-es'
+import { adaptCurThemeFilterStyleAll } from '@/utils/canvasStyle'
+import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
+import eventBus from '@/utils/eventBus'
+import { ElIcon } from 'element-plus-secondary'
+const { t } = useI18n()
+const dvMainStore = dvMainStoreWithOut()
+const snapshotStore = snapshotStoreWithOut()
+const filterStyle = computed<any>(() => {
+  return dvMainStore.canvasStyleData.component.filterStyle
+})
+
+const state = reactive({
+  fontSize: [],
+  isSetting: false,
+  predefineColors: COLOR_PANEL
+})
+
+const initForm = () => {
+  // do
+}
+const themeChange = styleKey => {
+  dvMainStore.canvasStyleData.component.filterStyle = cloneDeep(filterStyle.value)
+  adaptCurThemeFilterStyleAll(styleKey)
+  snapshotStore.recordSnapshotCache('filterStyleSimpleSelector-themeChange')
+}
+
+const handleHorizontalChange = (type, horizontal = 'titleLayout') => {
+  filterStyle.value[horizontal] = type
+  themeChange(horizontal)
+}
+
+onMounted(() => {
+  eventBus.on('onThemeColorChange', initForm)
+})
+</script>
+
+<style scoped lang="less">
+.hover-icon {
+  &.active {
+    color: var(--ed-color-primary) !important;
+    background-color: var(--ed-color-primary-1a, rgba(51, 112, 255, 0.1));
+  }
+  & + & {
+    margin-left: 8px;
+  }
+}
+.m-divider {
+  border-color: rgba(31, 35, 41, 0.15);
+  margin: 0 0 8px;
+}
+.inner-collapse {
+  :deep(.ed-collapse-item__header) {
+    background-color: transparent !important;
+  }
+  :deep(.ed-collapse-item__header) {
+    border: none;
+  }
+  :deep(.ed-collapse-item__wrap) {
+    border: none;
+  }
+}
+.ed-form-item {
+  margin-bottom: 16px;
+
+  :deep(.ed-form-item__label) {
+    color: #646a73;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 20px;
+  }
+}
+</style>
diff --git a/core/core-frontend/src/utils/canvasUtils.ts b/core/core-frontend/src/utils/canvasUtils.ts
@@ -16,7 +16,10 @@ import {
 import { storeToRefs } from 'pinia'
 import { getPanelAllLinkageInfo } from '@/api/visualization/linkage'
 import { queryVisualizationJumpInfo } from '@/api/visualization/linkJump'
-import { getViewConfig } from '@/views/chart/components/editor/util/chart'
+import {
+  getViewConfig,
+  SENIOR_STYLE_SETTING_LIGHT
+} from '@/views/chart/components/editor/util/chart'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
 import { deepCopy } from '@/utils/utils'
 const dvMainStore = dvMainStoreWithOut()
@@ -115,6 +118,10 @@ export function initCanvasDataPrepare(dvId, busiFlag, callBack) {
     const canvasDataResult = JSON.parse(canvasInfo.componentData)
     const canvasStyleResult = JSON.parse(canvasInfo.canvasStyleData)
     const canvasViewInfoPreview = canvasInfo.canvasViewInfo
+    //历史字段适配
+    canvasStyleResult.component.seniorStyleSetting =
+      canvasStyleResult.component.seniorStyleSetting || deepCopy(SENIOR_STYLE_SETTING_LIGHT)
+
     canvasDataResult.forEach(componentItem => {
       componentItem['canvasActive'] = false
       if (componentItem.component === 'Group') {

diff --git a/core/core-frontend/src/views/chart/components/editor/util/chart.ts b/core/core-frontend/src/views/chart/components/editor/util/chart.ts
@@ -150,6 +150,17 @@ export const TAB_COMMON_STYLE_DARK = {
   headBorderActiveColor: '#000000'
 }
 
+export const SENIOR_STYLE_SETTING_LIGHT = {
+  linkageIconColor: '#a6a6a6',
+  drillLayerColor: '#a6a6a6',
+  pagerColor: '#a6a6a6'
+}
+
+export const SENIOR_STYLE_SETTING_DARK = {
+  linkageIconColor: '#ffffff',
+  drillLayerColor: '#ffffff'
+}
+
 export const FILTER_COMMON_STYLE_BASE = {
   layout: 'horizontal',
   titleLayout: 'left'

diff --git a/core/core-frontend/src/views/chart/components/editor/util/dataVisualiztion.ts b/core/core-frontend/src/views/chart/components/editor/util/dataVisualiztion.ts
@@ -8,6 +8,8 @@ import {
   DEFAULT_TITLE_STYLE_LIGHT,
   FILTER_COMMON_STYLE_DARK,
   FILTER_COMMON_STYLE_LIGHT,
+  SENIOR_STYLE_SETTING_DARK,
+  SENIOR_STYLE_SETTING_LIGHT,
   TAB_COMMON_STYLE_DARK,
   TAB_COMMON_STYLE_LIGHT
 } from '@/views/chart/components/editor/util/chart'
@@ -22,15 +24,17 @@ export const PANEL_CHART_INFO_LIGHT = {
   chartColor: DEFAULT_COLOR_CASE_LIGHT,
   chartCommonStyle: COMMON_COMPONENT_BACKGROUND_LIGHT,
   filterStyle: FILTER_COMMON_STYLE_LIGHT,
-  tabStyle: TAB_COMMON_STYLE_LIGHT
+  tabStyle: TAB_COMMON_STYLE_LIGHT,
+  seniorStyleSetting: SENIOR_STYLE_SETTING_LIGHT
 }
 
 export const PANEL_CHART_INFO_DARK = {
   chartTitle: DEFAULT_TITLE_STYLE_DARK,
   chartColor: DEFAULT_COLOR_CASE_DARK,
   chartCommonStyle: COMMON_COMPONENT_BACKGROUND_DARK,
   filterStyle: FILTER_COMMON_STYLE_DARK,
-  tabStyle: TAB_COMMON_STYLE_DARK
+  tabStyle: TAB_COMMON_STYLE_DARK,
+  seniorStyleSetting: SENIOR_STYLE_SETTING_DARK
 }
 
 export const PANEL_CHART_INFO_SCREEN_DARK = {

diff --git a/core/core-frontend/src/views/chart/components/views/index.vue b/core/core-frontend/src/views/chart/components/views/index.vue
@@ -596,6 +596,10 @@ const marginBottom = computed<string | 0>(() => {
 const iconSize = computed<string>(() => {
   return 16 * scale.value + 'px'
 })
+
+const titleIconStyle = computed(() => {
+  color: canvasStyleData.value.component.seniorStyleSetting.linkageIconColor
+})
 </script>
 
 <template>
@@ -628,7 +632,8 @@ const iconSize = computed<string>(() => {
       </template>
       <div
         class="icons-container"
-        :class="{ 'is-editing': titleEditStatus, 'icons-container__dark': themes === 'dark' }"
+        :class="{ 'is-editing': titleEditStatus }"
+        :style="titleIconStyle"
         v-if="trackMenu.length > 0 || state.title_remark.show"
       >
         <el-tooltip :effect="toolTip" placement="top" v-if="state.title_remark.show">
@@ -734,11 +739,11 @@ const iconSize = computed<string>(() => {
     flex-wrap: nowrap;
     gap: 8px;
 
-    color: #646a73;
-
-    &.icons-container__dark {
-      color: #a6a6a6;
-    }
+    //color: #646a73;
+    //
+    //&.icons-container__dark {
+    //  color: #a6a6a6;
+    //}
 
     &.is-editing {
       gap: 6px;