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

Merge pull request #11979 from dataease/pr@dev-v2@refacto_triangle

Browse Source 
refactor(数据大屏): 三角形图形样式优化
This commit is contained in:
王嘉豪 2024-09-03 18:46:20 +08:00 committed by GitHub
commit 683490adba
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 160 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue
View File

@ -200,7 +200,17 @@ const start = ref({
const width = ref(0)
const height = ref(0)
const isShowArea = ref(false)
const svgFilterAttrs = ['width', 'height', 'top', 'left', 'rotate', 'backgroundColor']
const svgFilterAttrs = [
'width',
'height',
'top',
'left',
'rotate',
'backgroundColor',
'borderWidth',
'borderStyle',
'borderColor'
]
const commonFilterAttrs = ['width', 'height', 'top', 'left', 'rotate']
const commonFilterAttrsFilterBorder = [
'width',
@ -1569,6 +1579,23 @@ defineExpose({
:dv-info="dvInfo"
:canvas-active="canvasActive"
/>
<component
v-else-if="item.component.includes('Svg')"
:is="findComponent(item.component)"
:id="'component' + item.id"
:scale="curBaseScale"
class="component"
:is-edit="true"
:style="getSvgComponentStyle(item.style)"
:prop-value="item.propValue"
:element="item"
:request="item.request"
:canvas-style-data="canvasStyleData"
:canvas-view-info="canvasViewInfo"
:dv-info="dvInfo"
:active="item.id === curComponentId"
:canvas-active="canvasActive"
/>
<component
v-else
:is="findComponent(item.component)"

12
core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue
View File

@ -156,7 +156,17 @@ const onClick = e => {
const getComponentStyleDefault = style => {
if (config.value.component.includes('Svg')) {
return getStyle(style, ['top', 'left', 'width', 'height', 'rotate', 'backgroundColor'])
return getStyle(style, [
'top',
'left',
'width',
'height',
'rotate',
'backgroundColor',
'borderWidth',
'borderStyle',
'borderColor'
])
} else {
return getStyle(style, style.borderActive ? commonFilterAttrs : commonFilterAttrsFilterBorder)
}

47
core/core-frontend/src/custom-component/common/CommonBorderSetting.vue
View File

@ -8,7 +8,7 @@ import { COLOR_PANEL } from '@/views/chart/components/editor/util/chart'
const dvMainStore = dvMainStoreWithOut()
const snapshotStore = snapshotStoreWithOut()
const { canvasStyleData } = storeToRefs(dvMainStore)
const { canvasStyleData, curComponent } = storeToRefs(dvMainStore)
const props = withDefaults(
defineProps<{
@ -63,6 +63,10 @@ const sizeChange = key => {
changeStyle({ key: key, value: styleInfo.value[key] })
}
const isSvgComponent = computed(
() => curComponent.value && curComponent.value.component === 'SvgTriangle'
)
watch(
() => styleInfo.value,
() => {
@ -78,6 +82,46 @@ watch(
<template>
<el-row class="custom-row">
<el-form label-position="top">
<template v-if="isSvgComponent">
<el-row style="display: flex">
<el-form-item
style="width: 70px"
label="颜色"
class="form-item"
:class="'form-item-' + themes"
>
<el-color-picker
title="颜色"
v-model="styleForm.borderColor"
class="color-picker-style"
:triggerWidth="65"
is-custom
:predefine="state.predefineColors"
@change="changeStylePre('borderColor')"
>
</el-color-picker>
</el-form-item>
<el-form-item
style="width: 150px"
label="线宽"
class="form-item"
:class="'form-item-' + themes"
>
<el-input-number
title="线宽"
:min="0"
:max="50"
:effect="themes"
controls-position="right"
v-model="styleMounted.borderWidth"
class="color-picker-style"
@change="sizeChange('borderWidth')"
>
</el-input-number>
</el-form-item>
</el-row>
</template>
<template v-else>
<el-row style="display: flex">
<el-form-item
style="width: 70px"
@ -157,6 +201,7 @@ watch(
</el-input-number>
</el-form-item>
</el-row>
</template>
</el-form>
</el-row>
</template>