fix: 修复gd地图无法生成缩略图的bug 修复位置错误的bug

src/enums/editPageEnum.ts

@@ -46,6 +46,12 @@ export enum MenuEnum {
   GROUP = 'group',
   // 解组
   UN_GROUP = 'unGroup',
+  // 水平对齐
+  H_ALIGN = 'hAlign',
+  // 垂直对齐
+  V_ALIGN = 'vAlign',
+  // 水平平均分布
+  // 垂直平均分布
   // 后退
   BACK = 'back',
   FORWORD = 'forward',

src/packages/components/CustomComponents/CustomComponents/ComprehensivePUE/config.ts

@@ -15,6 +15,12 @@ export const option = {
 
 export default class Config extends PublicConfigClass implements CreateComponentType
 {
+  constructor() {
+    super();
+    this.attr.w = 450
+    this.attr.h = 300
+    this.request.requestInterval = 15
+  }
   public key = ComprehensivePUEConfig.key
   public chartConfig = cloneDeep(ComprehensivePUEConfig)
   public option = cloneDeep(option)

src/packages/components/CustomComponents/CustomComponents/ComprehensivePUE/index.vue

@@ -44,10 +44,6 @@ const props = defineProps({
     required: true
   }
 })
-if(!isPreview()) {
-  Object.assign(props.chartConfig.attr, { w: 450, h: 300 })
-  Object.assign(props.chartConfig.request, { requestInterval: 15, requestIntervalUnit: RequestHttpIntervalEnum.SECOND })
-}
 
 const { w, h } = toRefs(props.chartConfig.attr)
 const { dataset, fit, borderRadius } = toRefs(props.chartConfig.option)

src/packages/components/CustomComponents/CustomComponents/DeviceAlarmOverview/config.ts

@@ -15,6 +15,12 @@ export const option = {
 
 export default class Config extends PublicConfigClass implements CreateComponentType
 {
+  constructor() {
+    super();
+    this.attr.w = 450
+    this.attr.h = 300
+    this.request.requestInterval = 15
+  }
   public key = DeviceAlarmOverviewConfig.key
   public chartConfig = cloneDeep(DeviceAlarmOverviewConfig)
   public option = cloneDeep(option)

src/packages/components/CustomComponents/CustomComponents/DeviceAlarmOverview/index.vue

@@ -52,10 +52,6 @@ const props = defineProps({
     required: true
   }
 })
-if(!isPreview()) {
-  Object.assign(props.chartConfig.attr, { w: 450, h: 300 })
-  Object.assign(props.chartConfig.request, { requestInterval: 15, requestIntervalUnit: RequestHttpIntervalEnum.SECOND })
-}
 
 const { w, h } = toRefs(props.chartConfig.attr)
 const { dataset, fit, borderRadius } = toRefs(props.chartConfig.option)

src/packages/components/CustomComponents/CustomComponents/GDMap/config.ts

@@ -15,6 +15,12 @@ export const option = {
 
 export default class Config extends PublicConfigClass implements CreateComponentType
 {
+  constructor() {
+    super();
+    this.attr.w = 950
+    this.attr.h = 820
+    this.request.requestInterval = 15
+  }
   public key = GDMapConfig.key
   public chartConfig = cloneDeep(GDMapConfig)
   public option = cloneDeep(option)

src/packages/components/CustomComponents/CustomComponents/GDMap/index.vue

@@ -93,7 +93,9 @@
     </svg>
     <!-- img标签出来的图不完整 所以换background-url background-reapt object-fit: contain不支持 -->
 <!--    <img v-show="showImg" @load="showImg = true" :src="gdMap.propValue" :style="{transform: `scale(${scale(w, 870)}, ${scale(h - 100,560)})`}" style="position: absolute;top: 100px;width: 870px;height: 560px;transform-origin: left top"/>-->
-    <div id="img" :style="{backgroundImage: `url(${gdMap.propValue})`, transform: `scale(${scale(w, 870)}, ${scale(h - 100,560)})`}" style="position: absolute;top: 100px;width: 870px;height: 560px;transform-origin: left top"></div>
+<!--    <div id="img" :style="{backgroundImage: `url(${gdMap.propValue})`, transform: `scale(${scale(w, 870)}, ${scale(h - 100,560)})`}" style="position: absolute;top: 100px;width: 870px;height: 560px;transform-origin: left top"></div>-->
+<!--    background-url出来的截图还是不行 会变大 用canvas可以-->
+    <canvas ref="canvas" width="870" height="560" :style="{transform: `scale(${scale(w, 870)}, ${scale(h - 100,560)})`}" style="position: absolute;top: 100px;width: 870px;height: 560px;transform-origin: left top"></canvas>
     <div :style="{transform: `scale(${scale(w, 870)}, ${scale(h - 100,560)})`}" style="position: absolute;top: 100px;width: 870px;height: 560px;transform-origin: left top">
       <div
         v-for="(item, i) in point"
@@ -134,6 +136,7 @@
 
 <script setup lang="ts">
 import { PropType, shallowReactive, watch, toRefs, reactive, onMounted, onUnmounted, nextTick, ref, computed } from 'vue'
+import type { Ref } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 import { publicInterface } from '@/api/path/business.api'
 import { isPreview } from '@/utils'
@@ -152,10 +155,6 @@ const props = defineProps({
     required: true
   }
 })
-if(!isPreview()) {
-  Object.assign(props.chartConfig.attr, { w: 950, h: 820 })
-  Object.assign(props.chartConfig.request, { requestInterval: 15, requestIntervalUnit: RequestHttpIntervalEnum.SECOND })
-}
 // Object.assign(props.chartConfig.attr, { w: 870, h: 560 })
 
 const { w, h } = toRefs(props.chartConfig.attr)
@@ -190,6 +189,7 @@ const abnormalNumber = computed(() => point.filter(_ => _.color === '#f00').leng
 
 let safeDaysList = reactive(['0', '0', '0', '0', '0', '0'])
 
+const canvas = ref() as Ref<HTMLCanvasElement>
 const getData = () => {
   safeDaysList.splice(0, safeDaysList.length, ...(moment().diff(moment(systemConfig.overview_dglt_idc_operation_date), 'days') + 1).toString().padStart(6, '0').split(''))
   publicInterface('/dcim/space_page', 'get_one_no_permission', { id: props.chartConfig.customData!.mapId }).then(res => {
@@ -197,6 +197,14 @@ const getData = () => {
       const arr:[] = JSON.parse(res.data.canvas_data)
       for (const key in gdMap) delete gdMap[key]
       Object.assign(gdMap, arr.find((_:any) => _.component === 'Picture') || {})
+      if(canvas.value){
+        const ctx = canvas.value.getContext('2d');
+        const img = new Image();
+        img.onload = function() {
+          if(ctx) ctx.drawImage(img, 0, 0, canvas.value.width, canvas.value.height);
+        };
+        img.src = gdMap.propValue;
+      }
       text.splice(0, text.length, ...arr.filter((_:any) => _.component === 'v-text'))
       point.splice(0, point.length, ...arr.filter((_:any) => _.component === 'svg-shape'))
       const activeAlarmData = {
@@ -228,13 +236,11 @@ const getData = () => {
           })
         }
       })
-      console.log(point)
     }
   })
 }
 
 const pointJump = (item:any) => {
-  console.log(item)
   postMessageToParent({type: 'changeRouterV1', url: '/' + item.dataBind.skipPath})
 }
 

src/packages/components/CustomComponents/CustomComponents/MonitorRealTimeEvents/config.ts

@@ -15,6 +15,12 @@ export const option = {
 
 export default class Config extends PublicConfigClass implements CreateComponentType
 {
+  constructor() {
+    super();
+    this.attr.w = 450
+    this.attr.h = 300
+    this.request.requestInterval = 15
+  }
   public key = MonitorRealTimeEventsConfig.key
   public chartConfig = cloneDeep(MonitorRealTimeEventsConfig)
   public option = cloneDeep(option)

src/packages/components/CustomComponents/CustomComponents/MonitorRealTimeEvents/index.vue

@@ -52,11 +52,6 @@ const props = defineProps({
   }
 })
 
-if(!isPreview()){
-  Object.assign(props.chartConfig.attr, { w: 450, h: 300 })
-  Object.assign(props.chartConfig.request, { requestInterval: 15, requestIntervalUnit: RequestHttpIntervalEnum.SECOND })
-}
-
 const { w, h } = toRefs(props.chartConfig.attr)
 const { dataset, fit, borderRadius } = toRefs(props.chartConfig.option)
 

src/packages/components/CustomComponents/CustomComponents/OverviewOfComputingNodes/config.ts

@@ -15,6 +15,12 @@ export const option = {
 
 export default class Config extends PublicConfigClass implements CreateComponentType
 {
+  constructor() {
+    super();
+    this.attr.w = 450
+    this.attr.h = 300
+    this.request.requestInterval = 15
+  }
   public key = OverviewOfComputingNodesConfig.key
   public chartConfig = cloneDeep(OverviewOfComputingNodesConfig)
   public option = cloneDeep(option)

src/packages/components/CustomComponents/CustomComponents/OverviewOfComputingNodes/index.vue

@@ -102,10 +102,6 @@ const props = defineProps({
     required: true
   }
 })
-if(!isPreview()) {
-  Object.assign(props.chartConfig.attr, { w: 450, h: 300 })
-  Object.assign(props.chartConfig.request, { requestInterval: 15, requestIntervalUnit: RequestHttpIntervalEnum.SECOND })
-}
 
 const { w, h } = toRefs(props.chartConfig.attr)
 const { dataset, fit, borderRadius } = toRefs(props.chartConfig.option)

src/packages/components/CustomComponents/CustomComponents/RealTimeAlarmStatistics/config.ts

@@ -15,6 +15,12 @@ export const option = {
 
 export default class Config extends PublicConfigClass implements CreateComponentType
 {
+  constructor() {
+    super();
+    this.attr.w = 450
+    this.attr.h = 300
+    this.request.requestInterval = 15
+  }
   public key = RealTimeAlarmStatisticsConfig.key
   public chartConfig = cloneDeep(RealTimeAlarmStatisticsConfig)
   public option = cloneDeep(option)

src/packages/components/CustomComponents/CustomComponents/RealTimeAlarmStatistics/index.vue

@@ -37,11 +37,6 @@ const props = defineProps({
   }
 })
 
-if(!isPreview()) {
-  Object.assign(props.chartConfig.attr, {w: 450, h: 300})
-  Object.assign(props.chartConfig.request, { requestInterval: 15, requestIntervalUnit: RequestHttpIntervalEnum.SECOND })
-}
-
 const { w, h } = toRefs(props.chartConfig.attr)
 const { dataset, fit, borderRadius } = toRefs(props.chartConfig.option)
 

src/packages/components/CustomComponents/CustomComponents/RealTimeEvent/config.ts

@@ -15,6 +15,12 @@ export const option = {
 
 export default class Config extends PublicConfigClass implements CreateComponentType
 {
+  constructor() {
+    super();
+    this.attr.w = 950
+    this.attr.h = 300
+    this.request.requestInterval = 15
+  }
   public key = RealTimeEventConfig.key
   public chartConfig = cloneDeep(RealTimeEventConfig)
   public option = cloneDeep(option)

src/packages/components/CustomComponents/CustomComponents/RealTimeEvent/index.vue

@@ -61,11 +61,6 @@ const props = defineProps({
     required: true
   }
 })
-if(!isPreview()){
-  Object.assign(props.chartConfig.attr, { w: 950, h: 300 })
-  Object.assign(props.chartConfig.request, { requestInterval: 15, requestIntervalUnit: RequestHttpIntervalEnum.SECOND })
-}
-
 
 const { w, h } = toRefs(props.chartConfig.attr)
 const { dataset, fit, borderRadius } = toRefs(props.chartConfig.option)

src/packages/components/CustomComponents/CustomComponents/RealTimeTraffic/config.ts

@@ -15,6 +15,12 @@ export const option = {
 
 export default class Config extends PublicConfigClass implements CreateComponentType
 {
+  constructor() {
+    super();
+    this.attr.w = 450
+    this.attr.h = 300
+    this.request.requestInterval = 15
+  }
   public key = RealTimeTrafficConfig.key
   public chartConfig = cloneDeep(RealTimeTrafficConfig)
   public option = cloneDeep(option)

src/packages/components/CustomComponents/CustomComponents/RealTimeTraffic/index.vue

@@ -34,10 +34,6 @@ const props = defineProps({
     required: true
   }
 })
-if(!isPreview()) {
-  Object.assign(props.chartConfig.attr, { w: 450, h: 300 })
-  Object.assign(props.chartConfig.request, { requestInterval: 15, requestIntervalUnit: RequestHttpIntervalEnum.SECOND })
-}
 
 const { w, h } = toRefs(props.chartConfig.attr)
 const { dataset, fit, borderRadius } = toRefs(props.chartConfig.option)

src/packages/components/CustomComponents/CustomComponents/Theme1/config.ts

@@ -15,6 +15,16 @@ export const option = {
 
 export default class Config extends PublicConfigClass implements CreateComponentType
 {
+  constructor() {
+    super();
+    this.attr = {
+      ...this.attr,
+      w: 1920,
+      h: 1080,
+      x: 0,
+      y: 0,
+    }
+  }
   public key = Theme1Config.key
   public chartConfig = cloneDeep(Theme1Config)
   public option = cloneDeep(option)

src/packages/components/CustomComponents/CustomComponents/Theme1/index.vue

@@ -1,104 +1,126 @@
 <template>
   <div :style="getStyle(borderRadius)" class="Theme1">
-    <div id="fullscreenButton" class="full-screen-btn" @click="toggleFullscreen">
+    <svg
-      <i class="iconfont icon-quanping full-screen" :title="showMoreMenuBts ? '全屏' : '退出全屏'"></i>
+      ref="svg"
-      {{ showMoreMenuBts ? '全屏' : '退出全屏' }}
+      version="1.1"
-    </div>
+      xmlns="http://www.w3.org/2000/svg"
-    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 60" style="enable-background:new 0 0 1920 60;" xml:space="preserve">
+      xmlns:xlink="http://www.w3.org/1999/xlink"
-          <g id="顶栏">
+      x="0px"
-            <g>
+      y="0px"
-              <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="960" y1="60" x2="960" y2="0">
+      viewBox="0 0 1920 60"
-                <stop offset="0" style="stop-color:#0D2952;stop-opacity:0.1" />
+      style="enable-background:new 0 0 1920 60;"
-                <stop offset="1" style="stop-color:#0D2952;stop-opacity:0.8" />
+      xml:space="preserve"
-              </linearGradient>
+    >
-              <rect style="fill:url(#SVGID_1_);" width="1920" height="60" />
+      <g id="顶栏">
-              <g id="系统抬头">
+        <g>
-                <!-- <image v-if="systemConfig.system_logo_url" width="240" height="40" :xlink:href="systemConfig.system_logo_url" /> -->
+          <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="960" y1="60" x2="960" y2="0">
-              </g>
+            <stop offset="0" style="stop-color:#0D2952;stop-opacity:0.1" />
-              <g>
+            <stop offset="1" style="stop-color:#0D2952;stop-opacity:0.8" />
-                <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="960" y1="-729.2512" x2="960" y2="-789.2512" gradientTransform="matrix(1 0 0 -1 0 -729.2512)">
+          </linearGradient>
-                  <stop offset="0" style="stop-color:#4196FF;stop-opacity:0" />
+          <rect style="fill:url(#SVGID_1_);" width="1920" height="60" />
-                  <stop offset="1" style="stop-color:#4196FF;stop-opacity:0.5" />
+          <g id="系统抬头">
-                </linearGradient>
+            <!-- <image v-if="systemConfig.system_logo_url" width="240" height="40" :xlink:href="systemConfig.system_logo_url" /> -->
-                <path style="fill:url(#SVGID_2_);" d="M600,0l54.3,54.3c3.1,3.1,9.3,5.7,13.7,5.7h584c4.4,0,10.5-2.5,13.7-5.7L1320,0" />
+          </g>
-              </g>
+          <g>
-              <g>
+            <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="960" y1="-729.2512" x2="960" y2="-789.2512" gradientTransform="matrix(1 0 0 -1 0 -729.2512)">
-<!--                <text transform="matrix(1 0 0 1 697.4991 43)" style="fill:#FFFFFF; font-family:'PingFang-SC-Bold'; font-size:30px;text-align: center;"></text>-->
+              <stop offset="0" style="stop-color:#4196FF;stop-opacity:0" />
-              </g>
+              <stop offset="1" style="stop-color:#4196FF;stop-opacity:0.5" />
-              <g>
+            </linearGradient>
-                <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="770" y1="58" x2="1150" y2="58">
+            <path style="fill:url(#SVGID_2_);" d="M600,0l54.3,54.3c3.1,3.1,9.3,5.7,13.7,5.7h584c4.4,0,10.5-2.5,13.7-5.7L1320,0" />
-                  <stop offset="0" style="stop-color:#4196FF;stop-opacity:0" />
+          </g>
-                  <stop offset="0.5" style="stop-color:#4196FF" />
+          <g>
-                  <stop offset="1" style="stop-color:#4196FF;stop-opacity:0" />
+<!--            <text transform="matrix(1 0 0 1 697.4991 43)" style="fill:#FFFFFF; font-family:'PingFang-SC-Bold'; font-size:30px;">-->
-                </linearGradient>
+<!--              {{chartConfig?.customData?.title}}-->
-                <path style="fill:url(#SVGID_3_);" d="M770,56c0,0,0.9,0.9,2,2s3.8,2,6,2h364c2.2,0,4.9-0.9,6-2s2-2,2-2" />
+<!--            </text>-->
-              </g>
+          </g>
-              <g>
+          <g>
-                <linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="3591" y1="5" x2="4188.75" y2="5" gradientTransform="matrix(1 0 0 1 -3584 0)">
+            <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="770" y1="58" x2="1150" y2="58">
-                  <stop offset="0" style="stop-color:#4196FF;stop-opacity:0" />
+              <stop offset="0" style="stop-color:#4196FF;stop-opacity:0" />
-                  <stop offset="1" style="stop-color:#4196FF;stop-opacity:0.5" />
+              <stop offset="0.5" style="stop-color:#4196FF" />
-                </linearGradient>
+              <stop offset="1" style="stop-color:#4196FF;stop-opacity:0" />
-                <polygon style="opacity:0.4;fill:url(#SVGID_4_);" points="604.8,8 7,8 13,2 598.8,2" />
+            </linearGradient>
+            <path style="fill:url(#SVGID_3_);" d="M770,56c0,0,0.9,0.9,2,2s3.8,2,6,2h364c2.2,0,4.9-0.9,6-2s2-2,2-2" />
+          </g>
+          <g>
+            <linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="3591" y1="5" x2="4188.75" y2="5" gradientTransform="matrix(1 0 0 1 -3584 0)">
+              <stop offset="0" style="stop-color:#4196FF;stop-opacity:0" />
+              <stop offset="1" style="stop-color:#4196FF;stop-opacity:0.5" />
+            </linearGradient>
+            <polygon style="opacity:0.4;fill:url(#SVGID_4_);" points="604.8,8 7,8 13,2 598.8,2" />
 
-                <linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="-6698.249" y1="4" x2="-6592.999" y2="4" gradientTransform="matrix(-1 0 0 1 -6094.999 0)">
+            <linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="-6698.249" y1="4" x2="-6592.999" y2="4" gradientTransform="matrix(-1 0 0 1 -6094.999 0)">
-                  <stop offset="0" style="stop-color:#00FFFF" />
+              <stop offset="0" style="stop-color:#00FFFF" />
-                  <stop offset="1" style="stop-color:#00FFFF;stop-opacity:0" />
+              <stop offset="1" style="stop-color:#00FFFF;stop-opacity:0" />
-                </linearGradient>
+            </linearGradient>
-                <path style="fill:url(#SVGID_5_);" d="M563,0l8.3,8h2L565,0H563z M553,0l8.3,8h2L555,0H553z M568,0l8.3,8h2L570,0H568z M548,0 l8.3,8h2L550,0H548z M558,0l8.3,8h2L560,0H558z M588,0l8.3,8h2L590,0H588z M593,0l8.3,8h2L595,0H593z M578,0l8.3,8h2L580,0H578z M573,0l8.3,8h2L575,0H573z M583,0l8.3,8h2L585,0H583z M528,0l8.3,8h2L530,0H528z M508,0l8.3,8h2L510,0H508z M503,0l8.3,8h2 L505,0H503z M498,0l8.3,8h2L500,0H498z M543,0l8.3,8h2L545,0H543z M513,0l8.3,8h2L515,0H513z M533,0l8.3,8h2L535,0H533z M538,0 l8.3,8h2L540,0H538z M518,0l8.3,8h2L520,0H518z M523,0l8.3,8h2L525,0H523z" />
+            <path style="fill:url(#SVGID_5_);" d="M563,0l8.3,8h2L565,0H563z M553,0l8.3,8h2L555,0H553z M568,0l8.3,8h2L570,0H568z M548,0 l8.3,8h2L550,0H548z M558,0l8.3,8h2L560,0H558z M588,0l8.3,8h2L590,0H588z M593,0l8.3,8h2L595,0H593z M578,0l8.3,8h2L580,0H578z M573,0l8.3,8h2L575,0H573z M583,0l8.3,8h2L585,0H583z M528,0l8.3,8h2L530,0H528z M508,0l8.3,8h2L510,0H508z M503,0l8.3,8h2 L505,0H503z M498,0l8.3,8h2L500,0H498z M543,0l8.3,8h2L545,0H543z M513,0l8.3,8h2L515,0H513z M533,0l8.3,8h2L535,0H533z M538,0 l8.3,8h2L540,0H538z M518,0l8.3,8h2L520,0H518z M523,0l8.3,8h2L525,0H523z" />
-              </g>
+          </g>
+          <g>
+            <linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="-4423.999" y1="5" x2="-3826.2493" y2="5" gradientTransform="matrix(-1 0 0 1 -2510.9993 0)">
+              <stop offset="0" style="stop-color:#4196FF;stop-opacity:0" />
+              <stop offset="1" style="stop-color:#4196FF;stop-opacity:0.5" />
+            </linearGradient>
+            <polygon style="opacity:0.4;fill:url(#SVGID_6_);" points="1315.3,8 1913,8 1907,2 1321.3,2 			" />
+            <linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="1316.75" y1="4" x2="1422" y2="4">
+              <stop offset="0" style="stop-color:#00FFFF" />
+              <stop offset="1" style="stop-color:#00FFFF;stop-opacity:0" />
+            </linearGradient>
+            <path style="fill:url(#SVGID_7_);" d="M1355,0l-8.3,8h2l8.3-8H1355z M1365,0l-8.3,8h2l8.3-8H1365z M1350,0l-8.3,8h2l8.3-8H1350z M1370,0l-8.3,8h2l8.3-8H1370z M1360,0l-8.3,8h2l8.3-8H1360z M1330,0l-8.3,8h2l8.3-8H1330z M1325,0l-8.3,8h2l8.3-8H1325z M1340,0 l-8.3,8h2l8.3-8H1340z M1345,0l-8.3,8h2l8.3-8H1345z M1335,0l-8.3,8h2l8.3-8H1335z M1390,0l-8.3,8h2l8.3-8H1390z M1410,0l-8.3,8 h2l8.3-8H1410z M1415,0l-8.3,8h2l8.3-8H1415z M1420,0l-8.3,8h2l8.3-8H1420z M1375,0l-8.3,8h2l8.3-8H1375z M1405,0l-8.3,8h2l8.3-8 H1405z M1385,0l-8.3,8h2l8.3-8H1385z M1380,0l-8.3,8h2l8.3-8H1380z M1400,0l-8.3,8h2l8.3-8H1400z M1395,0l-8.3,8h2l8.3-8H1395z" />
+          </g>
+          <linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="760.5" y1="59" x2="1159.5" y2="59">
+            <stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0" />
+            <stop offset="0.5" style="stop-color:#FFFFFF" />
+            <stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0" />
+          </linearGradient>
+          <rect x="760.5" y="58" style="fill:url(#SVGID_8_);" width="399" height="2" />
+          <rect x="1760" style="opacity:0;fill:#091C38;" width="160" height="60" />
+          <g>
+            <text transform="matrix(1 0 0 1 1808.9991 45)" style="fill:#FFFFFF; font-family:'PingFang-SC-Bold'; font-size:14px;">{{ time }}</text>
+          </g>
+          <g>
+            <text transform="matrix(1 0 0 1 1808.9991 27)" style="fill:#9CA4AF; font-family:'PingFang-SC-Regular'; font-size:14px;">{{ date }}</text>
+          </g>
+          <g>
+            <g>
               <g>
-                <linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="-4423.999" y1="5" x2="-3826.2493" y2="5" gradientTransform="matrix(-1 0 0 1 -2510.9993 0)">
+                <path style="fill:#234B9B;" d="M1780,17c7.2,0,13,5.8,13,13s-5.8,13-13,13s-13-5.8-13-13S1772.8,17,1780,17 M1780,16 c-7.7,0-14,6.3-14,14s6.3,14,14,14s14-6.3,14-14S1787.7,16,1780,16L1780,16z" />
-                  <stop offset="0" style="stop-color:#4196FF;stop-opacity:0" />
-                  <stop offset="1" style="stop-color:#4196FF;stop-opacity:0.5" />
-                </linearGradient>
-                <polygon style="opacity:0.4;fill:url(#SVGID_6_);" points="1315.3,8 1913,8 1907,2 1321.3,2 			" />
-                <linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="1316.75" y1="4" x2="1422" y2="4">
-                  <stop offset="0" style="stop-color:#00FFFF" />
-                  <stop offset="1" style="stop-color:#00FFFF;stop-opacity:0" />
-                </linearGradient>
-                <path style="fill:url(#SVGID_7_);" d="M1355,0l-8.3,8h2l8.3-8H1355z M1365,0l-8.3,8h2l8.3-8H1365z M1350,0l-8.3,8h2l8.3-8H1350z M1370,0l-8.3,8h2l8.3-8H1370z M1360,0l-8.3,8h2l8.3-8H1360z M1330,0l-8.3,8h2l8.3-8H1330z M1325,0l-8.3,8h2l8.3-8H1325z M1340,0 l-8.3,8h2l8.3-8H1340z M1345,0l-8.3,8h2l8.3-8H1345z M1335,0l-8.3,8h2l8.3-8H1335z M1390,0l-8.3,8h2l8.3-8H1390z M1410,0l-8.3,8 h2l8.3-8H1410z M1415,0l-8.3,8h2l8.3-8H1415z M1420,0l-8.3,8h2l8.3-8H1420z M1375,0l-8.3,8h2l8.3-8H1375z M1405,0l-8.3,8h2l8.3-8 H1405z M1385,0l-8.3,8h2l8.3-8H1385z M1380,0l-8.3,8h2l8.3-8H1380z M1400,0l-8.3,8h2l8.3-8H1400z M1395,0l-8.3,8h2l8.3-8H1395z" />
-              </g>
-              <linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="760.5" y1="59" x2="1159.5" y2="59">
-                <stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0" />
-                <stop offset="0.5" style="stop-color:#FFFFFF" />
-                <stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0" />
-              </linearGradient>
-              <rect x="760.5" y="58" style="fill:url(#SVGID_8_);" width="399" height="2" />
-              <rect x="1760" style="opacity:0;fill:#091C38;" width="160" height="60" />
-              <g>
-                <text transform="matrix(1 0 0 1 1808.9991 45)" style="fill:#FFFFFF; font-family:'PingFang-SC-Bold'; font-size:14px;">{{ time }}</text>
-              </g>
-              <g>
-                <text transform="matrix(1 0 0 1 1808.9991 27)" style="fill:#9CA4AF; font-family:'PingFang-SC-Regular'; font-size:14px;">{{ date }}</text>
-              </g>
-              <g>
-                <g>
-                  <g>
-                    <path style="fill:#234B9B;" d="M1780,17c7.2,0,13,5.8,13,13s-5.8,13-13,13s-13-5.8-13-13S1772.8,17,1780,17 M1780,16 c-7.7,0-14,6.3-14,14s6.3,14,14,14s14-6.3,14-14S1787.7,16,1780,16L1780,16z" />
-                  </g>
-                  <polyline style="fill:none;stroke:#234B9B;stroke-miterlimit:10;" points="1780,21 1780,31 1785,36" />
-                </g>
-              </g>
-              <g>
-                <linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="-3831.3499" y1="-785.323" x2="-3110.6487" y2="-785.323" gradientTransform="matrix(-1 0 0 -1 -2510.9993 -755.2512)">
-                  <stop offset="0" style="stop-color:#4196FF;stop-opacity:0.8" />
-                  <stop offset="0.4462" style="stop-color:#4196FF;stop-opacity:0" />
-                  <stop offset="1" style="stop-color:#4196FF;stop-opacity:0.8" />
-                </linearGradient>
-                <path style="fill:none;stroke:url(#SVGID_9_);stroke-miterlimit:10;" d="M1320,0.5l-54.3,53.4c-3.1,3.1-9.3,5.6-13.7,5.6H668 c-4.4,0-10.6-2.5-13.7-5.6L600,0.5" />
               </g>
+              <polyline style="fill:none;stroke:#234B9B;stroke-miterlimit:10;" points="1780,21 1780,31 1785,36" />
             </g>
+          </g>
+          <g>
+            <linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="-3831.3499" y1="-785.323" x2="-3110.6487" y2="-785.323" gradientTransform="matrix(-1 0 0 -1 -2510.9993 -755.2512)">
+              <stop offset="0" style="stop-color:#4196FF;stop-opacity:0.8" />
+              <stop offset="0.4462" style="stop-color:#4196FF;stop-opacity:0" />
+              <stop offset="1" style="stop-color:#4196FF;stop-opacity:0.8" />
+            </linearGradient>
+            <path style="fill:none;stroke:url(#SVGID_9_);stroke-miterlimit:10;" d="M1320,0.5l-54.3,53.4c-3.1,3.1-9.3,5.6-13.7,5.6H668 c-4.4,0-10.6-2.5-13.7-5.6L600,0.5" />
+          </g>
         </g>
-        </svg>
+    </g>
-    <div style="font: 30px PingFang-SC-Bold;color: #fff;width: 1920px;height: 60px;line-height: 60px;text-align: center;position: absolute;top: 0;">{{chartConfig?.customData?.title}}</div>
+    </svg>
+    <div
+      :style="{height: `${svgHeight}px`,lineHeight: `${svgHeight}px`, fontSize: `${svgHeight / 2}px`}"
+      style="position: absolute;top: 0;width: 100%;"
+    >
+      <div
+        style="font-family: PingFang-SC-Bold;color: #fff;width: 50%;height: 100%;text-align: center;position: absolute;top: 0;left: 50%;transform: translateX(-50%)"
+      >
+        {{chartConfig?.customData?.title}}
+      </div>
+      <div id="fullscreenButton" :style="{'--height': `${svgHeight}px`}" class="full-screen-btn" @click="toggleFullscreen">
+        <i class="iconfont icon-quanping full-screen" :title="showMoreMenuBts ? '全屏' : '退出全屏'"></i>
+        {{ showMoreMenuBts ? '全屏' : '退出全屏' }}
+      </div>
+    </div>
     <n-image
-      :object-fit="fit"
+      object-fit="fill"
       preview-disabled
       :src="background"
       :fallback-src="requireErrorImg()"
       :width="w"
-      :height="h"
       lazy
+      :style="{height, top: `${svgHeight}px`}"
+      style="position: absolute;left: 0;width: 100%;"
     />
   </div>
 </template>
@@ -110,7 +132,7 @@ import { CreateComponentType } from '@/packages/index.d'
 import moment from 'moment'
 import background from '@/assets/customComponents/theme1/backgrond.jpg'
 import { isPreview } from '@/utils/router'
-import { postMessageToParent } from "@/utils";
+import { postMessageToParent, ResizeObserverELE } from "@/utils";
 
 const props = defineProps({
   chartConfig: {
@@ -119,8 +141,6 @@ const props = defineProps({
   }
 })
 
-if(!isPreview()) Object.assign(props.chartConfig.attr, {w: 1920, h: 1080, x: 0, y: 0})
-
 const { w, h } = toRefs(props.chartConfig.attr)
 const { dataset, fit, borderRadius } = toRefs(props.chartConfig.option)
 
@@ -200,6 +220,20 @@ const getStyle = (radius: number) => {
   }
 }
 
+let svgHeight = ref(60)
+let height = ref('100%')
+const observer = ResizeObserverELE((w, h) => {
+  svgHeight.value = h
+  height.value = `calc(100% - ${h}px)`
+})
+const svg = ref()
+onMounted(() => {
+  if(svg.value) observer.observe(svg.value);
+})
+onUnmounted(() => {
+  observer.disconnect();
+})
+
 // // 编辑更新
 // watch(
 //   () => props.chartConfig.option.dataset,
@@ -242,10 +276,12 @@ const getStyle = (radius: number) => {
     padding: 3px 10px;
     cursor: pointer;
     position: absolute;
-    top: 16px;
+    top: 50%;
     right: 9.6%;
+    transform: translateY(-50%);
     color: #4396fd;
-    font-size: 14px;
+    font-size: calc(var(--height) / 4);
+    height: calc(var(--height) / 3);
     .full-screen {
       font-size: 16px;
       margin-right: 5px;

src/plugins/icon.ts

@@ -109,7 +109,9 @@ import {
 } from '@vicons/carbon'
 
 import {
-  Apps20Regular as Apps20RegularIcon
+  Apps20Regular as Apps20RegularIcon,
+  AlignSpaceEvenlyHorizontal20Filled as AlignSpaceEvenlyHorizontal20FilledIcon,
+  AlignSpaceEvenlyVertical20Filled as AlignSpaceEvenlyVertical20FilledIcon
 } from '@vicons/fluent'
 
 import {
@@ -323,7 +325,9 @@ const carbon = {
 
 const fluent = {
   // 主题
-  Apps20RegularIcon
+  Apps20RegularIcon,
+  AlignSpaceEvenlyHorizontal20FilledIcon,
+  AlignSpaceEvenlyVertical20FilledIcon,
 }
 
 const material = {

src/store/modules/chartEditStore/chartEditStore.ts

@@ -863,6 +863,16 @@ export const useChartEditStore = defineStore({
         loadingFinish()
       }
     },
+    // * 水平对齐
+    setHAlign(id: string[], isHistory = true) {
+      try {
+        const selectIds = this.idPreFormat(id) || this.getTargetChart.selectId
+        if (selectIds.length < 2) return
+        console.log(selectIds)
+      } catch(e) {
+        console.log(e)
+      }
+    },
     // * 锁定
     setLock(status: boolean = true, isHistory: boolean = true) {
       try {

src/views/chart/ContentConfigurations/components/ChartSetting/index.vue

@@ -7,7 +7,7 @@
     <!-- 位置 -->
     <position-setting :chartAttr="targetData.attr" :canvasConfig="chartEditStore.getEditCanvasConfig" />
     <!-- 滤镜 -->
-<!--    <styles-setting :isGroup="targetData.isGroup" :chartStyles="targetData.styles"></styles-setting>-->
+    <styles-setting :isGroup="targetData.isGroup" :chartStyles="targetData.styles"></styles-setting>
     <!-- 自定义配置项 -->
     <component :is="targetData.chartConfig.conKey" :optionData="targetData.option"></component>
   </div>

src/views/chart/ContentConfigurations/index.vue

@@ -134,12 +134,12 @@ const chartsDefaultTabList = [
     icon: ConstructIcon,
     render: ChartSetting
   },
-  // {
+  {
-  //   key: TabsEnum.CHART_ANIMATION,
+    key: TabsEnum.CHART_ANIMATION,
-  //   title: '动画',
+    title: '动画',
-  //   icon: LeafIcon,
+    icon: LeafIcon,
-  //   render: ChartAnimation
+    render: ChartAnimation
-  // }
+  }
 ]
 
 const chartsTabList = [

src/views/chart/hooks/useContextMenu.hook.ts

@@ -20,6 +20,7 @@ const {
   EyeOffOutlineIcon
 } = icon.ionicons5
 const { UpToTopIcon, DownToBottomIcon, PaintBrushIcon, Carbon3DSoftwareIcon, Carbon3DCursorIcon } = icon.carbon
+const { AlignSpaceEvenlyHorizontal20FilledIcon, AlignSpaceEvenlyVertical20FilledIcon } = icon.fluent
 
 const chartEditStore = useChartEditStore()
 
@@ -142,6 +143,12 @@ export const defaultMultiSelectOptions: MenuOptionsItemType[] = [
     key: MenuEnum.UN_GROUP,
     icon: renderIcon(Carbon3DCursorIcon),
     fnHandle: chartEditStore.setUnGroup
+  },
+  {
+    label: '水平对齐',
+    key: MenuEnum.H_ALIGN,
+    icon: renderIcon(AlignSpaceEvenlyHorizontal20FilledIcon),
+    fnHandle: chartEditStore.setHAlign
   }
 ]
 
@@ -198,7 +205,7 @@ const handleContextMenu = (
   while (target instanceof SVGElement) {
     target = target.parentNode
   }
-
+  console.log(targetInstance)
   chartEditStore.setTargetSelectChart(targetInstance && targetInstance.id)
 
   // 隐藏旧列表

src/views/chart/index.vue

@@ -44,6 +44,7 @@ import { LayoutHeaderPro } from '@/layout/components/LayoutHeaderPro'
 import { useContextMenu } from './hooks/useContextMenu.hook'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
+import { watch } from 'vue'
 
 const chartHistoryStoreStore = useChartHistoryStore()
 const chartEditStore = useChartEditStore()