mirror of
https://gitee.com/dromara/go-view.git
synced 2025-02-24 16:22:57 +08:00
fix: 解决缩放大于100%的问题
This commit is contained in:
parent
d1c0cae68e
commit
d15e551743
@ -11,6 +11,7 @@ import { LineChart } from 'echarts/charts'
|
|||||||
import config, { includes } from './config'
|
import config, { includes } from './config'
|
||||||
import { mergeTheme } from '@/packages/public/chart'
|
import { mergeTheme } from '@/packages/public/chart'
|
||||||
import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
|
import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
|
||||||
|
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
themeSetting: {
|
themeSetting: {
|
||||||
@ -35,7 +36,10 @@ use([
|
|||||||
LegendComponent
|
LegendComponent
|
||||||
])
|
])
|
||||||
|
|
||||||
|
const chartEditStore = useChartEditStore()
|
||||||
|
|
||||||
const option = computed(() => {
|
const option = computed(() => {
|
||||||
|
console.log(chartEditStore.getEditCanvasConfig.chartThemeColor)
|
||||||
return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
|
return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
@ -541,7 +541,6 @@ export const useChartEditStore = defineStore({
|
|||||||
if (!this.getEditCanvas.lockScale) {
|
if (!this.getEditCanvas.lockScale) {
|
||||||
this.setPageSizeClass()
|
this.setPageSizeClass()
|
||||||
this.setPageSize(scale)
|
this.setPageSize(scale)
|
||||||
this.setPageStyle('transform', `scale(${scale})`)
|
|
||||||
this.getEditCanvas.userScale = scale
|
this.getEditCanvas.userScale = scale
|
||||||
if (sys) {
|
if (sys) {
|
||||||
this.getEditCanvas.scale = scale
|
this.getEditCanvas.scale = scale
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
class="go-edit-range"
|
class="go-edit-range go-transition"
|
||||||
:style="rangeStyle"
|
:style="rangeStyle"
|
||||||
@mousedown="mousedownHandleUnStop($event, undefined)"
|
@mousedown="mousedownHandleUnStop($event, undefined)"
|
||||||
>
|
>
|
||||||
@ -31,15 +31,24 @@ const size = computed(() => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
const rangeStyle = computed(() => {
|
const rangeStyle = computed(() => {
|
||||||
|
// 缩放
|
||||||
|
const scale = {
|
||||||
|
transform: `scale(${getEditCanvas.value.scale})`
|
||||||
|
}
|
||||||
|
console.log(scale)
|
||||||
|
// 设置背景色和图片背景
|
||||||
const background = getEditCanvasConfig.value.background
|
const background = getEditCanvasConfig.value.background
|
||||||
const backgroundImage = getEditCanvasConfig.value.backgroundImage
|
const backgroundImage = getEditCanvasConfig.value.backgroundImage
|
||||||
const selectColor = getEditCanvasConfig.value.selectColor
|
const selectColor = getEditCanvasConfig.value.selectColor
|
||||||
const backgroundColor = background ? background : undefined
|
const backgroundColor = background ? background : undefined
|
||||||
|
|
||||||
const computedBackground = selectColor
|
const computedBackground = selectColor
|
||||||
? { background: backgroundColor }
|
? { background: backgroundColor }
|
||||||
: { background: `url(${backgroundImage}) no-repeat center/100% !important` }
|
: { background: `url(${backgroundImage}) no-repeat center/100% !important` }
|
||||||
|
|
||||||
|
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
return { ...useSizeStyle(size.value), ...computedBackground }
|
return { ...useSizeStyle(size.value), ...computedBackground, ...scale }
|
||||||
})
|
})
|
||||||
|
|
||||||
// 模态层
|
// 模态层
|
||||||
@ -55,6 +64,7 @@ const rangeModelStyle = computed(() => {
|
|||||||
position: relative;
|
position: relative;
|
||||||
border: 1px solid;
|
border: 1px solid;
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
|
transform-origin: left top;
|
||||||
@include fetch-theme('box-shadow');
|
@include fetch-theme('box-shadow');
|
||||||
@include filter-border-color('hover-border-color');
|
@include filter-border-color('hover-border-color');
|
||||||
@include fetch-theme-custom('border-color', 'background-color4');
|
@include fetch-theme-custom('border-color', 'background-color4');
|
||||||
|
@ -12,11 +12,10 @@ export const useComponentStyle = (attr: AttrType, index: number) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export const useSizeStyle = (attr: AttrType, scale?: number) => {
|
export const useSizeStyle = (attr: AttrType, scale?: number) => {
|
||||||
const sizeStyle = {
|
return {
|
||||||
width: `${scale ? scale * attr.w : attr.w}px`,
|
width: `${scale ? scale * attr.w : attr.w}px`,
|
||||||
height: `${scale ? scale * attr.h : attr.h}px`
|
height: `${scale ? scale * attr.h : attr.h}px`
|
||||||
}
|
}
|
||||||
return sizeStyle
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 锚点位置
|
// 锚点位置
|
||||||
|
@ -96,8 +96,6 @@ onMounted(() => {
|
|||||||
@extend .go-point-bg;
|
@extend .go-point-bg;
|
||||||
@include goId(chart-edit-content) {
|
@include goId(chart-edit-content) {
|
||||||
margin: 20px;
|
margin: 20px;
|
||||||
/* overflow: hidden; */
|
|
||||||
transform-origin: left top;
|
|
||||||
border: 1px solid rgba(0, 0, 0, 0);
|
border: 1px solid rgba(0, 0, 0, 0);
|
||||||
@extend .go-transition;
|
@extend .go-transition;
|
||||||
&.content-resize {
|
&.content-resize {
|
||||||
|
Loading…
Reference in New Issue
Block a user