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

Merge pull request #8055 from dataease/pr@dev@refactor_graphical-add

Browse Source 
refactor(数据大屏): 图形组件增加Svg矢量图形
This commit is contained in:
王嘉豪 2024-02-19 15:24:57 +08:00 committed by GitHub
commit dc8531fa70
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 51 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
core/core-frontend/src/assets/svg/graphical-rect.svg
View File

@ -1 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1708246996806" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4208" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M928 896H96a53.393333 53.393333 0 0 1-53.333333-53.333333V181.333333a53.393333 53.393333 0 0 1 53.333333-53.333333h832a53.393333 53.393333 0 0 1 53.333333 53.333333v661.333334a53.393333 53.393333 0 0 1-53.333333 53.333333zM96 170.666667a10.666667 10.666667 0 0 0-10.666667 10.666666v661.333334a10.666667 10.666667 0 0 0 10.666667 10.666666h832a10.666667 10.666667 0 0 0 10.666667-10.666666V181.333333a10.666667 10.666667 0 0 0-10.666667-10.666666z" p-id="4209"></path></svg>
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1708249700626" class="icon" viewBox="0 0 1316 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6641" xmlns:xlink="http://www.w3.org/1999/xlink" width="257.03125" height="200"><path d="M0 0h1316.571429v1024H0V0z m73.142857 73.142857v877.714286h1170.285714V73.142857H73.142857z" p-id="6642" data-spm-anchor-id="a313x.search_index.0.i9.58073a81RUBy7T" class="selected"></path></svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 808 B

After

Width:  |  Height:  |  Size: 535 B

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

@ -189,7 +189,8 @@ const start = ref({
const width = ref(0)
const height = ref(0)
const isShowArea = ref(false)
const svgFilterAttrs = ['width', 'height', 'top', 'left', 'rotate']
const svgFilterAttrs = ['width', 'height', 'top', 'left', 'rotate', 'backgroundColor']
const commonFilterAttrs = ['width', 'height', 'top', 'left', 'rotate']
const userViewEnlargeRef = ref(null)
const linkJumpRef = ref(null)
const linkageRef = ref(null)
@ -507,6 +508,10 @@ const handleContextMenu = e => {
}
const getComponentStyle = style => {
return getStyle(style, commonFilterAttrs)
}
const getSvgComponentStyle = style => {
return getStyle(style, svgFilterAttrs)
}
@ -1450,7 +1455,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)"

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

@ -115,7 +115,11 @@ const onClick = () => {
}
const getComponentStyleDefault = style => {
return getStyle(style, ['top', 'left', 'width', 'height', 'rotate'])
if (config.value.component.includes('Svg')) {
return getStyle(style, ['top', 'left', 'width', 'height', 'rotate', 'backgroundColor'])
} else {
return getStyle(style, ['top', 'left', 'width', 'height', 'rotate'])
}
}
const onMouseEnter = () => {

6
core/core-frontend/src/custom-component/common/ComponentConfig.ts
View File

@ -71,6 +71,12 @@ export const CANVAS_MATERIAL = [
title: '矩形',
icon: 'graphical-rect'
},
{
value: 'SvgTriangle',
type: 'graphical',
title: '三角形',
icon: 'graphical-triangle'
},
{
value: 'CircleShape',
type: 'graphical',

12
core/core-frontend/src/custom-component/component-list.ts
View File

@ -190,11 +190,11 @@ const list = [
style: {
width: 200,
height: 200,
borderColor: '#000',
borderWidth: 1,
backgroundColor: '',
borderRadius: 5,
borderStyle: 'solid',
borderRadius: 5
borderColor: '#000',
backgroundColor: ''
}
},
{
@ -206,9 +206,9 @@ const list = [
style: {
width: 200,
height: 200,
borderColor: '#000',
borderWidth: 1,
borderStyle: 'solid',
borderColor: '#000',
backgroundColor: ''
}
},
@ -221,9 +221,9 @@ const list = [
style: {
width: 200,
height: 200,
borderColor: '#000',
borderWidth: 1,
backgroundColor: ''
borderColor: '#000',
backgroundColor: 'rgba(236,231,231,0.1)'
}
},
{

2
core/core-frontend/src/custom-component/svgs/svg-star/Component.vue
View File

@ -6,7 +6,7 @@
:points="points"
:stroke="element.style.borderColor"
:fill="element.style.backgroundColor"
stroke-width="1"
:stroke-width="element.style.borderWidth"
/>
</svg>
<v-text :prop-value="element.propValue" :element="element" />

5
core/core-frontend/src/custom-component/svgs/svg-triangle/Component.vue
View File

@ -1,15 +1,14 @@
<template>
<div class="svg-star-container">
<div class="svg-triangle-container">
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
<polygon
ref="star"
:points="points"
:stroke="element.style.borderColor"
:fill="element.style.backgroundColor"
stroke-width="1"
:stroke-width="element.style.borderWidth"
/>
</svg>
<v-text :prop-value="element.propValue" :element="element" />
</div>
</template>

2
core/core-frontend/src/locales/zh-CN.ts
View File

@ -2000,7 +2000,7 @@ export default {
borderStyle: '边框风格',
borderWidth: '边框宽度',
borderColor: '边框颜色',
borderRadius: '边框半径',
borderRadius: '圆角',
fontSize: '字体大小',
fontWeight: '字体粗细',
lineHeight: '行高',

4
core/core-frontend/src/utils/attr.ts
View File

@ -11,7 +11,7 @@ export const styleData = [
{ key: 'borderWidth', label: '边框宽度', min: 0, max: 20, step: 1 },
{ key: 'borderStyle', label: '边框风格' },
{ key: 'borderColor', label: '边框颜色' },
{ key: 'borderRadius', label: '边框半径', min: 0, max: 50, step: 1 },
{ key: 'borderRadius', label: '圆角', min: 0, max: 50, step: 1 },
{ key: 'letterSpacing', label: '字间距', min: 0, max: 50, step: 1 },
{ key: 'fontSize', label: '字体大小', min: 0, max: 128, step: 1 },
{ key: 'activeFontSize', label: '激活字体大小', min: 0, max: 128, step: 1 },
@ -38,7 +38,7 @@ export const styleMap = {
borderWidth: '边框宽度',
borderStyle: '边框风格',
borderColor: '边框颜色',
borderRadius: '边框半径',
borderRadius: '圆角',
fontSize: '字体大小',
fontWeight: '字体粗细',
lineHeight: '行高',

4
core/core-frontend/src/utils/canvasStyle.ts
View File

@ -381,7 +381,9 @@ export function adaptCurThemeCommonStyle(component) {
// 背景融合-Begin 如果是大屏['CanvasBoard', 'CanvasIcon', 'Picture']组件不需要设置背景
if (
dvMainStore.dvInfo.type === 'dataV' &&
['CanvasBoard', 'CanvasIcon', 'Picture', 'Group'].includes(component.component)
['CanvasBoard', 'CanvasIcon', 'Picture', 'Group', 'SvgTriangle', 'SvgStar'].includes(
component.component
)
) {
component.commonBackground['backgroundColorSelect'] = false
component.commonBackground['innerPadding'] = 0

2
core/core-frontend/src/views/visualized/view/panel/filter-config/index.vue
View File

@ -284,7 +284,7 @@ const handleTabClick = () => {
</div>
<div class="setting-item">
<div class="title">
<el-checkbox v-model="attrs.enableRange">边框半径</el-checkbox>
<el-checkbox v-model="attrs.enableRange">圆角</el-checkbox>
</div>
<div class="value">
<el-input-number