center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

Merge pull request #9742 from dataease/pr@dev-v2@feat_senior-color

Browse Source 
feat(数据大屏): 数据大屏支持画布高级配色
This commit is contained in:
王嘉豪 2024-05-20 18:57:24 +08:00 committed by GitHub
commit e55145e14b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 39 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/SeniorStyleSetting.vue
View File

@ -2,9 +2,15 @@
<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-col :span="24">
<el-form-item
:effect="themes"
class="form-item"
:class="'form-item-' + themes"
label="联动、钻取、跳转的图标颜色"
>
<el-color-picker
:effect="themes"
v-model="seniorStyleSetting.linkageIconColor"
:trigger-width="197"
is-custom
@ -13,10 +19,16 @@
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item class="form-item" label="钻取层级展示颜色">
<el-col :span="24">
<el-form-item
:effect="themes"
class="form-item"
:class="'form-item-' + themes"
label="钻取层级展示颜色"
>
<el-color-picker
v-model="seniorStyleSetting.drillLayerColor"
:effect="themes"
:trigger-width="197"
is-custom
:predefine="state.predefineColors"
@ -44,6 +56,12 @@ const seniorStyleSetting = computed<any>(() => {
return dvMainStore.canvasStyleData.component.seniorStyleSetting
})
const props = defineProps({
themes: {
type: String,
default: 'light'
}
})
const state = reactive({
fontSize: [],
isSetting: false,
@ -58,11 +76,6 @@ const themeChange = () => {
snapshotStore.recordSnapshotCache('seniorStyleSettingSimpleSelector-themeChange')
}
const handleHorizontalChange = (type, horizontal = 'titleLayout') => {
seniorStyleSetting.value[horizontal] = type
themeChange(horizontal)
}
onMounted(() => {
eventBus.on('onThemeColorChange', initForm)
})
@ -103,4 +116,12 @@ onMounted(() => {
line-height: 20px;
}
}
.form-item-dark {
:deep(.ed-form-item__label) {
color: #6a6a6a;
font-size: 12px;
font-weight: 400;
line-height: 20px;
}
}
</style>

9
core/core-frontend/src/components/data-visualization/CanvasAttr.vue
View File

@ -10,6 +10,7 @@ import { useEmitt } from '@/hooks/web/useEmitt'
import ComponentColorSelector from '@/components/dashboard/subject-setting/dashboard-style/ComponentColorSelector.vue'
import OverallSetting from '@/components/dashboard/subject-setting/dashboard-style/OverallSetting.vue'
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, canvasViewInfo } = storeToRefs(dvMainStore)
@ -102,6 +103,14 @@ onMounted(() => {
<el-collapse-item effect="dark" title="刷新配置" name="overallSetting">
<overall-setting themes="dark" />
</el-collapse-item>
<el-collapse-item
effect="dark"
title="高级样式设置"
name="seniorStyleSetting"
class="no-padding no-border-bottom"
>
<senior-style-setting themes="dark"></senior-style-setting>
</el-collapse-item>
</el-collapse>
</div>
</template>