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,85 +82,126 @@ watch(
 <template>
   <el-row class="custom-row">
     <el-form label-position="top">
-      <el-row style="display: flex">
+      <template v-if="isSvgComponent">
-        <el-form-item
+        <el-row style="display: flex">
-          style="width: 70px"
+          <el-form-item
-          label="颜色"
+            style="width: 70px"
-          class="form-item"
+            label="颜色"
-          :class="'form-item-' + themes"
+            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-color-picker
-        </el-form-item>
+              title="颜色"
-        <el-form-item
+              v-model="styleForm.borderColor"
-          style="width: 150px"
+              class="color-picker-style"
-          label="圆角"
+              :triggerWidth="65"
-          class="form-item"
+              is-custom
-          :class="'form-item-' + themes"
+              :predefine="state.predefineColors"
-        >
+              @change="changeStylePre('borderColor')"
-          <el-input-number
+            >
-            title="圆角"
+            </el-color-picker>
-            :effect="themes"
+          </el-form-item>
-            :min="0"
+          <el-form-item
-            :max="200"
+            style="width: 150px"
-            controls-position="right"
+            label="线宽"
-            v-model="styleMounted.borderRadius"
+            class="form-item"
-            class="color-picker-style"
+            :class="'form-item-' + themes"
-            @change="sizeChange('borderRadius')"
           >
-          </el-input-number>
+            <el-input-number
-        </el-form-item>
+              title="线宽"
-      </el-row>
+              :min="0"
-      <el-row style="display: flex">
+              :max="50"
-        <el-form-item
+              :effect="themes"
-          style="width: 70px"
+              controls-position="right"
-          label="样式"
+              v-model="styleMounted.borderWidth"
-          class="form-item"
+              class="color-picker-style"
-          :class="'form-item-' + themes"
+              @change="sizeChange('borderWidth')"
-        >
+            >
-          <el-select
+            </el-input-number>
-            :effect="themes"
+          </el-form-item>
-            v-model="styleForm.borderStyle"
+        </el-row>
-            size="small"
+      </template>
-            style="width: 65px"
+      <template v-else>
-            @change="changeStylePre('borderStyle')"
+        <el-row style="display: flex">
+          <el-form-item
+            style="width: 70px"
+            label="颜色"
+            class="form-item"
+            :class="'form-item-' + themes"
           >
-            <el-option
+            <el-color-picker
-              class="custom-style-option"
+              title="颜色"
-              v-for="option in borderStyleList"
+              v-model="styleForm.borderColor"
-              :key="option.value"
+              class="color-picker-style"
-              :label="option.name"
+              :triggerWidth="65"
-              :value="option.value"
+              is-custom
-            />
+              :predefine="state.predefineColors"
-          </el-select>
+              @change="changeStylePre('borderColor')"
-        </el-form-item>
+            >
-        <el-form-item
+            </el-color-picker>
-          style="width: 150px"
+          </el-form-item>
-          label="线宽"
+          <el-form-item
-          class="form-item"
+            style="width: 150px"
-          :class="'form-item-' + themes"
+            label="圆角"
-        >
+            class="form-item"
-          <el-input-number
+            :class="'form-item-' + themes"
-            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-input-number
-        </el-form-item>
+              title="圆角"
-      </el-row>
+              :effect="themes"
+              :min="0"
+              :max="200"
+              controls-position="right"
+              v-model="styleMounted.borderRadius"
+              class="color-picker-style"
+              @change="sizeChange('borderRadius')"
+            >
+            </el-input-number>
+          </el-form-item>
+        </el-row>
+        <el-row style="display: flex">
+          <el-form-item
+            style="width: 70px"
+            label="样式"
+            class="form-item"
+            :class="'form-item-' + themes"
+          >
+            <el-select
+              :effect="themes"
+              v-model="styleForm.borderStyle"
+              size="small"
+              style="width: 65px"
+              @change="changeStylePre('borderStyle')"
+            >
+              <el-option
+                class="custom-style-option"
+                v-for="option in borderStyleList"
+                :key="option.value"
+                :label="option.name"
+                :value="option.value"
+              />
+            </el-select>
+          </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>
     </el-form>
   </el-row>
 </template>