Merge pull request #8049 from dataease/pr@dev@feat_graphical-add

feat(数据大屏): 增加图形组件 #7274

core/core-frontend/src/custom-component/circle-shape/Attr.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="attr-list de-collapse-style">
+    <CommonAttr :element="curComponent"></CommonAttr>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
+import CommonAttr from '@/custom-component/common/CommonAttr.vue'
+import { storeToRefs } from 'pinia'
+const dvMainStore = dvMainStoreWithOut()
+const { curComponent } = storeToRefs(dvMainStore)
+</script>

core/core-frontend/src/custom-component/circle-shape/Component.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="circle-shape"></div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  propValue: {
+    type: String,
+    required: true,
+    default: ''
+  },
+  element: {
+    type: Object,
+    default() {
+      return {
+        propValue: null
+      }
+    }
+  }
+})
+</script>
+
+<style lang="less" scoped>
+.circle-shape {
+  width: 100%;
+  height: 100%;
+  border-radius: 50% !important;
+  overflow: auto;
+}
+</style>

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

@@ -90,7 +90,9 @@ const backgroundCustomShow = computed(() => {
   return (
     dashboardActive.value ||
     (!dashboardActive.value &&
-      !['CanvasBoard', 'CanvasIcon', 'Picture'].includes(element.value.component))
+      !['CanvasBoard', 'CanvasIcon', 'Picture', 'CircleShape', 'RectShape'].includes(
+        element.value.component
+      ))
   )
 })
 onMounted(() => {

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

@@ -66,10 +66,16 @@ export const CANVAS_MATERIAL = [
     span: 8,
     details: [
       {
-        value: 'rect',
+        value: 'RectShape',
         type: 'graphical',
         title: '矩形',
         icon: 'graphical-rect'
+      },
+      {
+        value: 'CircleShape',
+        type: 'graphical',
+        title: '圆形',
+        icon: 'graphical-circular'
       }
     ]
   },

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

@@ -164,7 +164,7 @@ const list = [
   },
   {
     component: 'CanvasBoard',
-    name: '边框',
+    name: '图形',
     label: '边框',
     propValue: '',
     icon: 'other_material_board',
@@ -182,23 +182,48 @@ const list = [
     }
   },
   {
-    component: 'DeGraphical',
+    component: 'RectShape',
-    name: '图形',
+    name: '矩形',
-    label: '图形',
+    label: '矩形',
-    propValue: '',
+    propValue: ' ',
     icon: 'icon_graphical',
-    innerType: '',
-    editing: false,
-    canvasActive: false,
-    x: 1,
-    y: 1,
-    sizeX: 15,
-    sizeY: 15,
     style: {
+      width: 200,
+      height: 200,
       borderColor: '#000',
       borderWidth: 1,
       backgroundColor: '',
-      borderStyle: 'solid'
+      borderStyle: 'solid',
+      borderRadius: 5
+    }
+  },
+  {
+    component: 'CircleShape',
+    name: '图形',
+    label: '圆形',
+    propValue: ' ',
+    icon: 'icon_graphical',
+    style: {
+      width: 200,
+      height: 200,
+      borderColor: '#000',
+      borderWidth: 1,
+      borderStyle: 'solid',
+      backgroundColor: ''
+    }
+  },
+  {
+    component: 'SvgTriangle',
+    name: '图形',
+    label: '三角形',
+    icon: 'icon_graphical',
+    propValue: '',
+    style: {
+      width: 200,
+      height: 200,
+      borderColor: '#000',
+      borderWidth: 1,
+      backgroundColor: ''
     }
   },
   {

core/core-frontend/src/custom-component/rect-shape/Attr.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="attr-list de-collapse-style">
+    <CommonAttr :element="curComponent"></CommonAttr>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
+import CommonAttr from '@/custom-component/common/CommonAttr.vue'
+import { storeToRefs } from 'pinia'
+const dvMainStore = dvMainStoreWithOut()
+const { curComponent } = storeToRefs(dvMainStore)
+</script>

core/core-frontend/src/custom-component/rect-shape/Component.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="circle-shape">
+    <v-text :prop-value="element.propValue" :element="element" />
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  propValue: {
+    type: String,
+    required: true,
+    default: ''
+  },
+  element: {
+    type: Object,
+    default() {
+      return {
+        propValue: null
+      }
+    }
+  }
+})
+</script>
+
+<style lang="less" scoped>
+.rect-shape {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+</style>

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

@@ -0,0 +1,13 @@
+<template>
+  <div class="attr-list de-collapse-style">
+    <CommonAttr :element="curComponent"></CommonAttr>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
+import CommonAttr from '@/custom-component/common/CommonAttr.vue'
+import { storeToRefs } from 'pinia'
+const dvMainStore = dvMainStoreWithOut()
+const { curComponent } = storeToRefs(dvMainStore)
+</script>

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

@@ -0,0 +1,99 @@
+<template>
+  <div class="svg-star-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"
+      />
+    </svg>
+    <v-text :prop-value="element.propValue" :element="element" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, toRefs, watch } from 'vue'
+
+const props = defineProps({
+  propValue: {
+    type: String,
+    required: true,
+    default: ''
+  },
+  element: {
+    type: Object,
+    default() {
+      return {
+        propValue: null
+      }
+    }
+  }
+})
+const { propValue, element } = toRefs(props)
+const points = ref('')
+
+watch(
+  () => element.value.style.width,
+  val => {
+    draw()
+  }
+)
+
+watch(
+  () => element.value.style.height,
+  val => {
+    draw()
+  }
+)
+
+onMounted(() => {
+  draw()
+})
+
+const draw = () => {
+  const { width, height } = element.value.style
+  drawPolygon(width, height)
+}
+
+const drawPolygon = (width, height) => {
+  // 五角星十个坐标点的比例集合
+  const pointsArray = [
+    [0.5, 0],
+    [0.625, 0.375],
+    [1, 0.375],
+    [0.75, 0.625],
+    [0.875, 1],
+    [0.5, 0.75],
+    [0.125, 1],
+    [0.25, 0.625],
+    [0, 0.375],
+    [0.375, 0.375]
+  ]
+
+  const coordinatePoints = pointsArray.map(point => width * point[0] + ' ' + height * point[1])
+  points.value = coordinatePoints.toString()
+}
+</script>
+
+<style lang="less" scoped>
+.svg-star-container {
+  width: 100%;
+  height: 100%;
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .v-text {
+    position: absolute;
+    top: 58%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 50%;
+    height: 40%;
+  }
+}
+</style>

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

@@ -0,0 +1,13 @@
+<template>
+  <div class="attr-list de-collapse-style">
+    <CommonAttr :element="curComponent"></CommonAttr>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
+import CommonAttr from '@/custom-component/common/CommonAttr.vue'
+import { storeToRefs } from 'pinia'
+const dvMainStore = dvMainStoreWithOut()
+const { curComponent } = storeToRefs(dvMainStore)
+</script>

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

@@ -0,0 +1,91 @@
+<template>
+  <div class="svg-star-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"
+      />
+    </svg>
+    <v-text :prop-value="element.propValue" :element="element" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, toRefs, watch } from 'vue'
+
+const props = defineProps({
+  propValue: {
+    type: String,
+    required: true,
+    default: ''
+  },
+  element: {
+    type: Object,
+    default() {
+      return {
+        propValue: null
+      }
+    }
+  }
+})
+const { propValue, element } = toRefs(props)
+const points = ref('')
+
+watch(
+  () => element.value.style.width,
+  val => {
+    draw()
+  }
+)
+
+watch(
+  () => element.value.style.height,
+  val => {
+    draw()
+  }
+)
+
+onMounted(() => {
+  draw()
+})
+
+const draw = () => {
+  const { width, height } = element.value.style
+  drawPolygon(width, height)
+}
+
+const drawPolygon = (width, height) => {
+  // 三角形三个坐标
+  const pointsArray = [
+    [0.5, 0.05],
+    [1, 0.95],
+    [0, 0.95]
+  ]
+
+  const coordinatePoints = pointsArray.map(point => width * point[0] + ' ' + height * point[1])
+  points.value = coordinatePoints.toString()
+}
+</script>
+<style lang="less" scoped>
+.svg-triangle-container {
+  width: 100%;
+  height: 100%;
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .v-text {
+    position: absolute;
+    top: 72%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 50%;
+    height: 40%;
+  }
+}
+</style>

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

@@ -41,7 +41,7 @@ export function findDragComponent(componentInfo) {
 export function findNewComponent(componentName, innerType) {
   let newComponent
   componentList.forEach(comp => {
-    if (comp.component === componentName) {
+    if (comp.component === componentName || comp.component === innerType) {
       newComponent = cloneDeep(comp)
       newComponent.innerType = innerType
       if (newComponent.innerType === 'richText') {

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

@@ -15,6 +15,12 @@ import DeTabs from '@/custom-component/de-tabs/Component.vue'
 import DeTabsAttr from '@/custom-component/de-tabs/Attr.vue'
 import DeGraphical from '@/custom-component/de-graphical/Component.vue'
 import DeGraphicalAttr from '@/custom-component/de-graphical/Attr.vue'
+import CircleShape from '@/custom-component/circle-shape/Component.vue'
+import CircleShapeAttr from '@/custom-component/circle-shape/Attr.vue'
+import RectShape from '@/custom-component/rect-shape/Component.vue'
+import RectShapeAttr from '@/custom-component/rect-shape/Attr.vue'
+import SvgTriangle from '@/custom-component/svgs/svg-triangle/Component.vue'
+import SvgTriangleAttr from '@/custom-component/svgs/svg-triangle/Attr.vue'
 
 export const componentsMap = {
   VText: VText,
@@ -33,7 +39,13 @@ export const componentsMap = {
   DeTabs: DeTabs,
   DeTabsAttr: DeTabsAttr,
   DeGraphical: DeGraphical,
-  DeGraphicalAttr: DeGraphicalAttr
+  DeGraphicalAttr: DeGraphicalAttr,
+  CircleShape: CircleShape,
+  CircleShapeAttr: CircleShapeAttr,
+  RectShape: RectShape,
+  RectShapeAttr: RectShapeAttr,
+  SvgTriangle: SvgTriangle,
+  SvgTriangleAttr: SvgTriangleAttr
 }
 
 export default function findComponent(key) {