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

refactor(数据大屏): 三角形图形样式优化

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

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

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

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

core/core-frontend/src/custom-component/common/CommonBorderSetting.vue

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