feat(数据大屏): 内置动态图 #4495

core/core-frontend/src/assets/svg/dv_dynamic_background.svg

@@ -0,0 +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="1751615687269" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1554" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M563.2 164.437333a30.72 30.72 0 1 1 0 61.44H261.12a44.373333 44.373333 0 0 0-32.597333 13.525334 44.373333 44.373333 0 0 0-13.482667 32.554666v278.741334l64.554667-58.026667c16.213333-14.549333 35.157333-21.546667 56.874666-20.992 21.76 0.554667 40.32 8.533333 55.722667 23.850667l113.237333 113.194666 74.538667-64.554666c16.213333-14.762667 35.328-21.845333 57.216-21.290667 21.930667 0.554667 40.618667 8.618667 56.064 24.192l115.712 111.146667v-186.581334a30.72 30.72 0 0 1 61.44 0v302.08c0 29.696-10.496 55.04-31.488 76.032a103.594667 103.594667 0 0 1-76.032 31.488H261.12c-29.696 0-55.04-10.496-76.032-31.488a103.594667 103.594667 0 0 1-31.488-76.032V271.957333c0-29.696 10.496-55.04 31.488-76.032a103.594667 103.594667 0 0 1 76.032-31.488h302.08z m-242.517333 373.888L215.04 633.344v140.373333c0 12.757333 4.48 23.594667 13.482667 32.597334 8.96 8.96 19.84 13.482667 32.597333 13.482666h368.597333l-280.874666-280.746666c-9.173333-9.088-18.56-9.344-28.16-0.725334z m300.629333 51.285334l-72.32 62.677333 167.637333 167.509333h46.250667c12.714667 0 23.552-4.48 32.554667-13.482666 9.002667-8.96 13.525333-19.84 13.525333-32.597334v-30.293333l-159.317333-153.088c-9.216-9.258667-18.645333-9.514667-28.330667-0.725333zM665.6 178.432a33.28 33.28 0 0 1 52.693333-27.050667l147.456 105.813334a33.28 33.28 0 0 1 0 54.058666l-147.456 105.813334A33.28 33.28 0 0 1 665.6 389.973333V178.346667z" p-id="1555"></path></svg>

core/core-frontend/src/components/data-visualization/RealTimeListTree.vue

@@ -10,6 +10,7 @@ import iconVideo from '@/assets/svg/icon-video.svg'
 import icon_graphical from '@/assets/svg/icon_graphical.svg'
 import icon_search from '@/assets/svg/icon_search.svg'
 import other_material_board from '@/assets/svg/other_material_board.svg'
+import dv_dynamic_background from '@/assets/svg/dv_dynamic_background.svg'
 import other_material_icon from '@/assets/svg/other_material_icon.svg'
 import scrollText from '@/assets/svg/scroll-text.svg'
 import areaOrigin from '@/assets/svg/area-origin.svg'
@@ -288,6 +289,7 @@ const iconMap = {
   icon_graphical: icon_graphical,
   icon_search: icon_search,
   other_material_board: other_material_board,
+  dv_dynamic_background: dv_dynamic_background,
   other_material_icon: other_material_icon,
   'scroll-text': scrollText,
   'area-origin': areaOrigin,

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

@@ -77,7 +77,9 @@ const containerRef = ref()
 const containerWidth = ref()
 
 const borderSettingShow = computed(() => {
-  return !!element.value.style['borderStyle']
+  return (
+    !!element.value.style['borderStyle'] && !['DynamicBackground'].includes(element.value.component)
+  )
 })
 
 // 暂时关闭
@@ -113,7 +115,7 @@ const styleShow = computed(() => {
   return (
     element.value &&
     element.value.style &&
-    element.value.component !== 'DeTabs' &&
+    !['DynamicBackground', 'DeTabs'].includes(element.value.component) &&
     Object.keys(element.value.style).length > 0
   )
 })

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

@@ -74,6 +74,37 @@ export const CANVAS_MATERIAL = [
       }
     ]
   },
+  {
+    category: 'DynamicBackground',
+    title: t('visualization.dynamic_background'),
+    span: 8,
+    details: [
+      {
+        value: 'dynamic_background1.gif',
+        type: 'dynamic_background',
+        title: t('visualization.dynamic_background_name', [1]),
+        icon: 'dynamic_background1.gif'
+      },
+      {
+        value: 'dynamic_background2.gif',
+        type: 'dynamic_background',
+        title: t('visualization.dynamic_background_name', [2]),
+        icon: 'dynamic_background2.gif'
+      },
+      {
+        value: 'dynamic_background3.gif',
+        type: 'dynamic_background',
+        title: t('visualization.dynamic_background_name', [2]),
+        icon: 'dynamic_background3.gif'
+      },
+      {
+        value: 'dynamic_background4.gif',
+        type: 'dynamic_background',
+        title: t('visualization.dynamic_background_name', [2]),
+        icon: 'dynamic_background4.gif'
+      }
+    ]
+  },
   {
     category: 'DeGraphical',
     title: t('visualization.graphic'),

core/core-frontend/src/custom-component/component-group/CommonGroup.vue

@@ -91,6 +91,12 @@ const groupActiveChange = category => {
               class-name="item-top-icon"
               ><component class="svg-icon item-top-icon" :is="chartInfo.icon"></component
             ></Icon>
+            <img
+              v-else-if="['dynamic_background'].includes(chartInfo.type)"
+              class="item-top-icon"
+              :src="`/dynamic-background/${chartInfo.icon}`"
+              alt=""
+            />
             <component v-else style="color: #a6a6a6" :is="chartInfo.icon"></component>
           </div>
           <div v-if="chartInfo.title" class="item-bottom">

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

@@ -492,6 +492,20 @@ const list = [
       backdropFilter: 'blur(0px)'
     }
   },
+  {
+    component: 'DynamicBackground',
+    name: t('visualization.dynamic_background'),
+    label: t('visualization.dynamic_background'),
+    propValue: ' ',
+    icon: 'dv_dynamic_background',
+    style: {
+      width: 400,
+      height: 300,
+      backgroundColor: 'rgba(236,231,231,0.1)',
+      borderActive: false,
+      backdropFilter: 'blur(0px)'
+    }
+  },
   {
     component: 'RectShape',
     name: t('visualization.rect_shape'),

core/core-frontend/src/custom-component/dynamic_background/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/dynamic_background/Component.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="circle-shape">
+    <img class="dynamic-shape" :src="`/dynamic-background/${element.innerType}`" alt="" />
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  element: {
+    type: Object,
+    default() {
+      return {
+        innerType: null
+      }
+    }
+  }
+})
+</script>
+
+<style lang="less" scoped>
+.dynamic-shape {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  user-select: none; /* 防止文本选中 */
+  -webkit-user-select: none; /* Safari */
+  -moz-user-select: none; /* Firefox */
+  -ms-user-select: none; /* IE10+/Edge */
+  pointer-events: none; /* 防止鼠标事件 */
+}
+</style>

core/core-frontend/src/locales/en.ts

@@ -2906,6 +2906,8 @@ export default {
     column_name: 'Field name'
   },
   visualization: {
+    dynamic_background_name: 'Animated {0}',
+    dynamic_background: 'Animated Image',
     support_query: 'Only query components can be added',
     publish_update_tips: 'Update available',
     filter_freeze_tips:

core/core-frontend/src/locales/tw.ts

@@ -2825,6 +2825,8 @@ export default {
     column_name: '欄位名稱'
   },
   visualization: {
+    dynamic_background_name: '動圖{0}',
+    dynamic_background: '動圖',
     support_query: '僅可新增查詢元件',
     publish_update_tips: '有更新',
     filter_freeze_tips: '已存在置頂查詢組件，確定切換該組件？',

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

@@ -2831,6 +2831,8 @@ export default {
     column_name: '字段名称'
   },
   visualization: {
+    dynamic_background_name: '背景{0}',
+    dynamic_background: '动图',
     support_query: '仅支持添加查询组件',
     publish_update_tips: '有更新',
     filter_freeze_tips: '已存在置顶查询组件,确定切换该组件？',

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

@@ -96,6 +96,8 @@ export function findNewComponent(componentName, innerType, staticMap?) {
     if (newComponent.isPlugin) {
       newComponent.staticMap = staticMap
     }
+  } else if (componentName === 'DynamicBackground') {
+    newComponent.style.borderWidth = 0
   }
   return newComponent
 }

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

@@ -7,6 +7,8 @@ import UserView from '@/custom-component/user-view/Component.vue'
 import UserViewAttr from '@/custom-component/user-view/Attr.vue'
 import Picture from '@/custom-component/picture/Component.vue'
 import PictureAttr from '@/custom-component/picture/Attr.vue'
+import DynamicBackground from '@/custom-component/dynamic_background/Component.vue'
+import DynamicBackgroundAttr from '@/custom-component/dynamic_background/Attr.vue'
 import CanvasBoard from '@/custom-component/canvas-board/Component.vue'
 import CanvasBoardAttr from '@/custom-component/canvas-board/Attr.vue'
 import CanvasIcon from '@/custom-component/canvas-icon/Component.vue'
@@ -47,6 +49,8 @@ export const componentsMap = {
   UserViewAttr: UserViewAttr,
   Picture: Picture,
   PictureAttr: PictureAttr,
+  DynamicBackground: DynamicBackground,
+  DynamicBackgroundAttr: DynamicBackgroundAttr,
   CanvasBoard: CanvasBoard,
   CanvasBoardAttr: CanvasBoardAttr,
   CanvasIcon: CanvasIcon,