Browse Source

fix: 解决缩放大于100%的问题

MTrun 3 years ago
parent
commit
adff55f89a

+ 4 - 0
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>

+ 0 - 1
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

+ 12 - 2
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');

+ 1 - 2
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
 }
 
 // 锚点位置

+ 0 - 2
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 {