From d15e55174326d83355d35450d84ed93a2c40580f Mon Sep 17 00:00:00 2001
From: MTrun <1262327911@qq.com>
Date: Thu, 10 Mar 2022 20:54:02 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=A7=A3=E5=86=B3=E7=BC=A9=E6=94=BE?=
 =?UTF-8?q?=E5=A4=A7=E4=BA=8E100%=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Charts/Lines/LineCommon/index.vue   |  4 ++++
 src/store/modules/chartEditStore/chartEditStore.ts |  1 -
 .../ContentEdit/components/EditRange/index.vue     | 14 ++++++++++++--
 src/views/chart/ContentEdit/hooks/useStyle.hook.ts |  3 +--
 src/views/chart/ContentEdit/index.vue              |  2 --
 5 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/packages/components/Charts/Lines/LineCommon/index.vue b/src/packages/components/Charts/Lines/LineCommon/index.vue
index d45e8dd8..4a977edd 100644
--- a/src/packages/components/Charts/Lines/LineCommon/index.vue
+++ b/src/packages/components/Charts/Lines/LineCommon/index.vue
@@ -11,6 +11,7 @@ import { LineChart } from 'echarts/charts'
 import config, { includes } from './config'
 import { mergeTheme } from '@/packages/public/chart'
 import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 
 const props = defineProps({
   themeSetting: {
@@ -35,7 +36,10 @@ use([
   LegendComponent
 ])
 
+const chartEditStore = useChartEditStore()
+
 const option = computed(() => {
+  console.log(chartEditStore.getEditCanvasConfig.chartThemeColor)
   return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
 })
 </script>
diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts
index 55c49771..c819f229 100644
--- a/src/store/modules/chartEditStore/chartEditStore.ts
+++ b/src/store/modules/chartEditStore/chartEditStore.ts
@@ -541,7 +541,6 @@ export const useChartEditStore = defineStore({
       if (!this.getEditCanvas.lockScale) {
         this.setPageSizeClass()
         this.setPageSize(scale)
-        this.setPageStyle('transform', `scale(${scale})`)
         this.getEditCanvas.userScale = scale
         if (sys) {
           this.getEditCanvas.scale = scale
diff --git a/src/views/chart/ContentEdit/components/EditRange/index.vue b/src/views/chart/ContentEdit/components/EditRange/index.vue
index 2813119f..911079e8 100644
--- a/src/views/chart/ContentEdit/components/EditRange/index.vue
+++ b/src/views/chart/ContentEdit/components/EditRange/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="go-edit-range"
+    class="go-edit-range go-transition"
     :style="rangeStyle"
     @mousedown="mousedownHandleUnStop($event, undefined)"
   >
@@ -31,15 +31,24 @@ const size = computed(() => {
 })
 
 const rangeStyle = computed(() => {
+    // 缩放 
+  const scale = {
+    transform: `scale(${getEditCanvas.value.scale})`
+  }
+  console.log(scale)
+  // 设置背景色和图片背景
   const background = getEditCanvasConfig.value.background
   const backgroundImage = getEditCanvasConfig.value.backgroundImage
   const selectColor = getEditCanvasConfig.value.selectColor
   const backgroundColor = background ? background : undefined
+
   const computedBackground = selectColor
     ? { background: backgroundColor }
     : { background: `url(${backgroundImage}) no-repeat center/100% !important` }
+
+
   // @ts-ignore
-  return { ...useSizeStyle(size.value), ...computedBackground }
+  return { ...useSizeStyle(size.value), ...computedBackground, ...scale }
 })
 
 // 模态层
@@ -55,6 +64,7 @@ const rangeModelStyle = computed(() => {
   position: relative;
   border: 1px solid;
   border-radius: 15px;
+  transform-origin: left top;
   @include fetch-theme('box-shadow');
   @include filter-border-color('hover-border-color');
   @include fetch-theme-custom('border-color', 'background-color4');
diff --git a/src/views/chart/ContentEdit/hooks/useStyle.hook.ts b/src/views/chart/ContentEdit/hooks/useStyle.hook.ts
index 5ca5ad71..22f96ce7 100644
--- a/src/views/chart/ContentEdit/hooks/useStyle.hook.ts
+++ b/src/views/chart/ContentEdit/hooks/useStyle.hook.ts
@@ -12,11 +12,10 @@ export const useComponentStyle = (attr: AttrType, index: number) => {
 }
 
 export const useSizeStyle = (attr: AttrType, scale?: number) => {
-  const sizeStyle = {
+  return {
     width: `${scale ? scale * attr.w : attr.w}px`,
     height: `${scale ? scale * attr.h : attr.h}px`
   }
-  return sizeStyle
 }
 
 // 锚点位置
diff --git a/src/views/chart/ContentEdit/index.vue b/src/views/chart/ContentEdit/index.vue
index 7b2e97f0..24e8a054 100644
--- a/src/views/chart/ContentEdit/index.vue
+++ b/src/views/chart/ContentEdit/index.vue
@@ -96,8 +96,6 @@ onMounted(() => {
   @extend .go-point-bg;
   @include goId(chart-edit-content) {
     margin: 20px;
-    /* overflow: hidden; */
-    transform-origin: left top;
     border: 1px solid rgba(0, 0, 0, 0);
     @extend .go-transition;
     &.content-resize {