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

refactor(数据大屏): 图形组件增加Svg矢量图形

core/core-frontend/src/assets/svg/graphical-rect.svg

@@ -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>

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

@@ -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)"

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

@@ -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 = () => {

core/core-frontend/src/custom-component/common/ComponentConfig.ts

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

core/core-frontend/src/custom-component/component-list.ts

@@ -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)'
     }
   },
   {

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

@@ -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" />

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

@@ -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>
 

core/core-frontend/src/locales/zh-CN.ts

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

core/core-frontend/src/utils/attr.ts

@@ -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: '行高',

core/core-frontend/src/utils/canvasStyle.ts

@@ -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

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

@@ -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