Commit fa948abc authored by zhengke's avatar zhengke

广告尺寸调整

parent 9d001782
export const VIEWPORT_SIZE = 1754 // export const VIEWPORT_SIZE.Value = 1754 //竖版
export const VIEWPORT_VER_SIZE = 1240 // export const VIEWPORT_VER_SIZE.Value = 1240 //横版
\ No newline at end of file class VIEWPORT_SIZE_Manager {
private _value = 0
constructor(val:number) {
this._value = val;
}
get Value(){
return this._value
}
set Value(val:number){
this._value = val
}
}
export const VIEWPORT_SIZE = new VIEWPORT_SIZE_Manager(1754)
export const VIEWPORT_VER_SIZE = new VIEWPORT_SIZE_Manager(1240)
\ No newline at end of file
...@@ -18,8 +18,8 @@ export default () => { ...@@ -18,8 +18,8 @@ export default () => {
* @param command 对齐方向 * @param command 对齐方向
*/ */
const alignElementToCanvas = (command: ElementAlignCommands) => { const alignElementToCanvas = (command: ElementAlignCommands) => {
const viewportWidth = VIEWPORT_SIZE const viewportWidth = VIEWPORT_SIZE.Value
const viewportHeight = VIEWPORT_SIZE * viewportRatio.value const viewportHeight = VIEWPORT_SIZE.Value * viewportRatio.value
const { minX, maxX, minY, maxY } = getElementListRange(activeElementList.value) const { minX, maxX, minY, maxY } = getElementListRange(activeElementList.value)
const newElementList: PPTElement[] = JSON.parse(JSON.stringify(currentSlide.value.elements)) const newElementList: PPTElement[] = JSON.parse(JSON.stringify(currentSlide.value.elements))
......
...@@ -55,12 +55,12 @@ export default () => { ...@@ -55,12 +55,12 @@ export default () => {
getImageSize(src).then(({ width, height }) => { getImageSize(src).then(({ width, height }) => {
const scale = height / width const scale = height / width
if (scale < viewportRatio.value && width > VIEWPORT_SIZE) { if (scale < viewportRatio.value && width > VIEWPORT_SIZE.Value) {
width = VIEWPORT_SIZE width = VIEWPORT_SIZE.Value
height = width * scale height = width * scale
} }
else if (height > VIEWPORT_SIZE * viewportRatio.value) { else if (height > VIEWPORT_SIZE.Value * viewportRatio.value) {
height = VIEWPORT_SIZE * viewportRatio.value height = VIEWPORT_SIZE.Value * viewportRatio.value
width = height / scale width = height / scale
} }
...@@ -70,8 +70,8 @@ export default () => { ...@@ -70,8 +70,8 @@ export default () => {
src, src,
width, width,
height, height,
left: (VIEWPORT_SIZE - width) / 2, left: (VIEWPORT_SIZE.Value - width) / 2,
top: (VIEWPORT_SIZE * viewportRatio.value - height) / 2, top: (VIEWPORT_SIZE.Value * viewportRatio.value - height) / 2,
fixedRatio: true, fixedRatio: true,
rotate: 0, rotate: 0,
}) })
...@@ -154,8 +154,8 @@ export default () => { ...@@ -154,8 +154,8 @@ export default () => {
colWidths, colWidths,
rotate: 0, rotate: 0,
data, data,
left: (VIEWPORT_SIZE - width) / 2, left: (VIEWPORT_SIZE.Value - width) / 2,
top: (VIEWPORT_SIZE * viewportRatio.value - height) / 2, top: (VIEWPORT_SIZE.Value * viewportRatio.value - height) / 2,
outline: { outline: {
width: 2, width: 2,
style: 'solid', style: 'solid',
...@@ -280,8 +280,8 @@ export default () => { ...@@ -280,8 +280,8 @@ export default () => {
width: data.w, width: data.w,
height: data.h, height: data.h,
rotate: 0, rotate: 0,
left: (VIEWPORT_SIZE - data.w) / 2, left: (VIEWPORT_SIZE.Value - data.w) / 2,
top: (VIEWPORT_SIZE * viewportRatio.value - data.h) / 2, top: (VIEWPORT_SIZE.Value * viewportRatio.value - data.h) / 2,
path: data.path, path: data.path,
latex: data.latex, latex: data.latex,
color: theme.value.fontColor, color: theme.value.fontColor,
...@@ -302,8 +302,8 @@ export default () => { ...@@ -302,8 +302,8 @@ export default () => {
width: 500, width: 500,
height: 300, height: 300,
rotate: 0, rotate: 0,
left: (VIEWPORT_SIZE - 500) / 2, left: (VIEWPORT_SIZE.Value - 500) / 2,
top: (VIEWPORT_SIZE * viewportRatio.value - 300) / 2, top: (VIEWPORT_SIZE.Value * viewportRatio.value - 300) / 2,
src, src,
autoplay: false, autoplay: false,
}) })
...@@ -320,8 +320,8 @@ export default () => { ...@@ -320,8 +320,8 @@ export default () => {
width: 50, width: 50,
height: 50, height: 50,
rotate: 0, rotate: 0,
left: (VIEWPORT_SIZE - 50) / 2, left: (VIEWPORT_SIZE.Value - 50) / 2,
top: (VIEWPORT_SIZE * viewportRatio.value - 50) / 2, top: (VIEWPORT_SIZE.Value * viewportRatio.value - 50) / 2,
loop: false, loop: false,
autoplay: false, autoplay: false,
fixedRatio: true, fixedRatio: true,
......
...@@ -40,7 +40,7 @@ export default () => { ...@@ -40,7 +40,7 @@ export default () => {
setTimeout(() => { setTimeout(() => {
const config: ExportImageConfig = { const config: ExportImageConfig = {
quality, quality,
width: (viewportRatio.value<1 ? VIEWPORT_SIZE : VIEWPORT_VER_SIZE ), width: (viewportRatio.value<1 ? VIEWPORT_SIZE.Value : VIEWPORT_VER_SIZE.Value ),
} }
if (ignoreWebfont) config.fontEmbedCSS = '' if (ignoreWebfont) config.fontEmbedCSS = ''
...@@ -67,7 +67,7 @@ export default () => { ...@@ -67,7 +67,7 @@ export default () => {
setTimeout(() => { setTimeout(() => {
const config: ExportImageConfig = { const config: ExportImageConfig = {
quality, quality,
width: (viewportRatio.value<1 ? VIEWPORT_SIZE : VIEWPORT_VER_SIZE ), width: (viewportRatio.value<1 ? VIEWPORT_SIZE.Value : VIEWPORT_VER_SIZE.Value ),
} }
if (ignoreWebfont) config.fontEmbedCSS = '' if (ignoreWebfont) config.fontEmbedCSS = ''
......
...@@ -88,7 +88,7 @@ export default () => { ...@@ -88,7 +88,7 @@ export default () => {
const json = await parse(e.target!.result as ArrayBuffer) const json = await parse(e.target!.result as ArrayBuffer)
const width = json.size.width const width = json.size.width
const scale = VIEWPORT_SIZE / width const scale = VIEWPORT_SIZE.Value / width
const slides: Slide[] = [] const slides: Slide[] = []
for (const item of json.slides) { for (const item of json.slides) {
......
...@@ -704,7 +704,6 @@ export interface Slide { ...@@ -704,7 +704,6 @@ export interface Slide {
turningMode?: TurningMode turningMode?: TurningMode
pageType: number, pageType: number,
isTripItems?:boolean, isTripItems?:boolean,
templateType?:number,
width?:number, width?:number,
height?:number, height?:number,
} }
......
...@@ -35,8 +35,8 @@ const gridColor = computed(() => { ...@@ -35,8 +35,8 @@ const gridColor = computed(() => {
// 网格路径 // 网格路径
const path = computed(() => { const path = computed(() => {
const maxX = VIEWPORT_SIZE const maxX = VIEWPORT_SIZE.Value
const maxY = VIEWPORT_SIZE * viewportRatio.value const maxY = VIEWPORT_SIZE.Value * viewportRatio.value
let p = '' let p = ''
for (let i = 0; i <= Math.floor(maxY / gridLineSize.value); i++) { for (let i = 0; i <= Math.floor(maxY / gridLineSize.value); i++) {
......
...@@ -26,8 +26,8 @@ export default ( ...@@ -26,8 +26,8 @@ export default (
if (!activeElementIdList.value.includes(element.id)) return if (!activeElementIdList.value.includes(element.id)) return
let isMouseDown = true let isMouseDown = true
const edgeWidth = VIEWPORT_SIZE const edgeWidth = VIEWPORT_SIZE.Value
const edgeHeight = VIEWPORT_SIZE * viewportRatio.value const edgeHeight = VIEWPORT_SIZE.Value * viewportRatio.value
const sorptionRange = 5 const sorptionRange = 5
......
...@@ -155,8 +155,8 @@ export default ( ...@@ -155,8 +155,8 @@ export default (
// 包括页面内除目标元素外的其他元素在画布中的各个可吸附对齐位置:上下左右四边 // 包括页面内除目标元素外的其他元素在画布中的各个可吸附对齐位置:上下左右四边
// 其中线条和被旋转过的元素不参与吸附对齐 // 其中线条和被旋转过的元素不参与吸附对齐
else { else {
const edgeWidth = VIEWPORT_SIZE const edgeWidth = VIEWPORT_SIZE.Value
const edgeHeight = VIEWPORT_SIZE * viewportRatio.value const edgeHeight = VIEWPORT_SIZE.Value * viewportRatio.value
const isActiveGroupElement = element.id === activeGroupElementId.value const isActiveGroupElement = element.id === activeGroupElementId.value
for (const el of elementList.value) { for (const el of elementList.value) {
......
...@@ -16,7 +16,7 @@ export default (canvasRef: Ref<HTMLElement | undefined>) => { ...@@ -16,7 +16,7 @@ export default (canvasRef: Ref<HTMLElement | undefined>) => {
if (!canvasRef.value) return if (!canvasRef.value) return
const canvasWidth = canvasRef.value.clientWidth const canvasWidth = canvasRef.value.clientWidth
const canvasHeight = canvasRef.value.clientHeight const canvasHeight = canvasRef.value.clientHeight
const USED_VIEWPORT_SIZE = viewportRatio.value<=1?VIEWPORT_SIZE:VIEWPORT_VER_SIZE const USED_VIEWPORT_SIZE = viewportRatio.value<=1?VIEWPORT_SIZE.Value:VIEWPORT_VER_SIZE.Value
if (canvasHeight / canvasWidth > viewportRatio.value) { if (canvasHeight / canvasWidth > viewportRatio.value) {
const viewportActualWidth = canvasWidth * (canvasPercentage.value / 100) const viewportActualWidth = canvasWidth * (canvasPercentage.value / 100)
mainStore.setCanvasScale(viewportActualWidth / USED_VIEWPORT_SIZE) mainStore.setCanvasScale(viewportActualWidth / USED_VIEWPORT_SIZE)
...@@ -33,7 +33,7 @@ export default (canvasRef: Ref<HTMLElement | undefined>) => { ...@@ -33,7 +33,7 @@ export default (canvasRef: Ref<HTMLElement | undefined>) => {
// 更新画布可视区域的位置 // 更新画布可视区域的位置
const setViewportPosition = (newValue: number, oldValue: number) => { const setViewportPosition = (newValue: number, oldValue: number) => {
if (!canvasRef.value) return if (!canvasRef.value) return
const USED_VIEWPORT_SIZE = viewportRatio.value<=1?VIEWPORT_SIZE:VIEWPORT_VER_SIZE const USED_VIEWPORT_SIZE = viewportRatio.value<=1?VIEWPORT_SIZE.Value:VIEWPORT_VER_SIZE.Value
const canvasWidth = canvasRef.value.clientWidth const canvasWidth = canvasRef.value.clientWidth
const canvasHeight = canvasRef.value.clientHeight const canvasHeight = canvasRef.value.clientHeight
...@@ -69,8 +69,8 @@ export default (canvasRef: Ref<HTMLElement | undefined>) => { ...@@ -69,8 +69,8 @@ export default (canvasRef: Ref<HTMLElement | undefined>) => {
// 画布可视区域位置和大小的样式 // 画布可视区域位置和大小的样式
const viewportStyles = computed(() => ({ const viewportStyles = computed(() => ({
width: viewportRatio.value<=1?VIEWPORT_SIZE:VIEWPORT_VER_SIZE, width: viewportRatio.value<=1?VIEWPORT_SIZE.Value:VIEWPORT_VER_SIZE.Value,
height: (viewportRatio.value<=1?VIEWPORT_SIZE:VIEWPORT_VER_SIZE) * viewportRatio.value, height: (viewportRatio.value<=1?VIEWPORT_SIZE.Value:VIEWPORT_VER_SIZE.Value) * viewportRatio.value,
left: viewportLeft.value, left: viewportLeft.value,
top: viewportTop.value, top: viewportTop.value,
})) }))
......
...@@ -187,6 +187,16 @@ watch(handleElementId, () => { ...@@ -187,6 +187,16 @@ watch(handleElementId, () => {
const elementList = ref<PPTElement[]>([]) const elementList = ref<PPTElement[]>([])
const setLocalElementList = () => { const setLocalElementList = () => {
elementList.value = currentSlide.value&&currentSlide.value.elements ? JSON.parse(JSON.stringify(currentSlide.value.elements)) : [] elementList.value = currentSlide.value&&currentSlide.value.elements ? JSON.parse(JSON.stringify(currentSlide.value.elements)) : []
// if(currentSlide.value.width){
// console.log(currentSlide.value.width,'=====')
// VIEWPORT_SIZE.Value = currentSlide.value.height
// VIEWPORT_VER_SIZE.Value = currentSlide.value.width
// if(viewportRatio.value<1) VIEWPORT_SIZE.Value = currentSlide.value.height
// else VIEWPORT_VER_SIZE.Value = currentSlide.value.width
// }else {
// VIEWPORT_SIZE.Value = 1754
// VIEWPORT_VER_SIZE.Value = 1240
// }
} }
watchEffect(setLocalElementList) watchEffect(setLocalElementList)
...@@ -243,7 +253,7 @@ const handleDblClick = (e: MouseEvent) => { ...@@ -243,7 +253,7 @@ const handleDblClick = (e: MouseEvent) => {
const viewportRect = viewportRef.value.getBoundingClientRect() const viewportRect = viewportRef.value.getBoundingClientRect()
const left = (e.pageX - viewportRect.x) / canvasScale.value const left = (e.pageX - viewportRect.x) / canvasScale.value
const top = (e.pageY - viewportRect.y) / canvasScale.value const top = (e.pageY - viewportRect.y) / canvasScale.value
const width = viewportRatio.value<1 ? VIEWPORT_SIZE : VIEWPORT_VER_SIZE const width = viewportRatio.value<1 ? VIEWPORT_SIZE.Value : VIEWPORT_VER_SIZE.Value
if(left<width && left>=0){ if(left<width && left>=0){
createTextElement({ createTextElement({
left, left,
......
...@@ -220,10 +220,10 @@ const setImgs = async () => { ...@@ -220,10 +220,10 @@ const setImgs = async () => {
if(imgType.value==2){ if(imgType.value==2){
let width = propsDatas.value.width let width = propsDatas.value.width
let height = propsDatas.value.height let height = propsDatas.value.height
let maxWidth = VIEWPORT_SIZE,maxHeight = VIEWPORT_VER_SIZE, viewportRatio = slidesStore.viewportRatio let maxWidth = VIEWPORT_SIZE,maxHeight = VIEWPORT_VER_SIZE.Value, viewportRatio = slidesStore.viewportRatio
if(viewportRatio<1){ if(viewportRatio<1){
maxWidth = VIEWPORT_VER_SIZE maxWidth = VIEWPORT_VER_SIZE.Value
maxHeight = VIEWPORT_SIZE maxHeight = VIEWPORT_SIZE.Value
} }
if(activeName.value=='1'||activeName.value=='3' || activeName.value == '4'){ if(activeName.value=='1'||activeName.value=='3' || activeName.value == '4'){
......
...@@ -469,9 +469,7 @@ const setTemplate = async (type) =>{ ...@@ -469,9 +469,7 @@ const setTemplate = async (type) =>{
x.pageType = 0 x.pageType = 0
x.width = queryObj.value.Width x.width = queryObj.value.Width
x.height = queryObj.value.Height x.height = queryObj.value.Height
}else x.TemplateType = 1 }
delete x.TemplateType
delete x.templateType
x.elements.forEach(y=>{ x.elements.forEach(y=>{
delete y.TemplateList delete y.TemplateList
}) })
......
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
v-for="slide in renderSlides" v-for="slide in renderSlides"
:key="slide.id" :key="slide.id"
:slide="slide" :slide="slide"
:size="viewportRatio<1 ? VIEWPORT_SIZE : VIEWPORT_VER_SIZE" :size="viewportRatio<1 ? VIEWPORT_SIZE.Value : VIEWPORT_VER_SIZE.Value"
/> />
</div> </div>
</div> </div>
......
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<ThumbnailSlide <ThumbnailSlide
class="thumbnail" class="thumbnail"
:slide="currentSlide" :slide="currentSlide"
:size="viewportRatio<1 ? VIEWPORT_SIZE : VIEWPORT_VER_SIZE" :size="viewportRatio<1 ? VIEWPORT_SIZE.Value : VIEWPORT_VER_SIZE.Value"
v-if="rangeType === 'current'" v-if="rangeType === 'current'"
/> />
<template v-else> <template v-else>
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
v-for="(slide, index) in newSlides" v-for="(slide, index) in newSlides"
:key="slide.id" :key="slide.id"
:slide="slide" :slide="slide"
:size="viewportRatio<1 ? VIEWPORT_SIZE : VIEWPORT_VER_SIZE" :size="viewportRatio<1 ? VIEWPORT_SIZE.Value : VIEWPORT_VER_SIZE.Value"
/> />
</template> </template>
</div> </div>
...@@ -89,7 +89,7 @@ const padding = ref(false) ...@@ -89,7 +89,7 @@ const padding = ref(false)
const expPDF = () => { const expPDF = () => {
if (!pdfThumbnailsRef.value) return if (!pdfThumbnailsRef.value) return
const width = viewportRatio.value<1 ? VIEWPORT_SIZE : VIEWPORT_VER_SIZE const width = viewportRatio.value<1 ? VIEWPORT_SIZE.Value : VIEWPORT_VER_SIZE.Value
const pageSize = { const pageSize = {
width: width, width: width,
height: rangeType.value === 'all' ? width * viewportRatio.value * count.value : width * viewportRatio.value, height: rangeType.value === 'all' ? width * viewportRatio.value * count.value : width * viewportRatio.value,
...@@ -99,7 +99,7 @@ const expPDF = () => { ...@@ -99,7 +99,7 @@ const expPDF = () => {
} }
const formatSliders =()=>{ const formatSliders =()=>{
const width = viewportRatio.value<1 ? VIEWPORT_SIZE : VIEWPORT_VER_SIZE const width = viewportRatio.value<1 ? VIEWPORT_SIZE.Value : VIEWPORT_VER_SIZE.Value
slides.value.forEach((x)=>{ slides.value.forEach((x)=>{
let item = JSON.parse(JSON.stringify(x)) let item = JSON.parse(JSON.stringify(x))
item.elements = item.elements.filter(y=>y.left<width && (y.left+y.width)>=0) item.elements = item.elements.filter(y=>y.left<width && (y.left+y.width)>=0)
......
...@@ -62,6 +62,7 @@ import { injectKeyDataSource, injectKeyTemplate } from '@/types/injectKey' ...@@ -62,6 +62,7 @@ import { injectKeyDataSource, injectKeyTemplate } from '@/types/injectKey'
import ConfigService from '@/services/ConfigService' import ConfigService from '@/services/ConfigService'
import { getHtmlPlainText } from '@/utils/common' import { getHtmlPlainText } from '@/utils/common'
import useEditor from '@/utils/Editor/index' import useEditor from '@/utils/Editor/index'
import { VIEWPORT_SIZE, VIEWPORT_VER_SIZE } from '@/configs/canvas'
import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue' import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
import LayoutPool from './LayoutPool.vue' import LayoutPool from './LayoutPool.vue'
...@@ -69,7 +70,6 @@ import Popover from '@/components/Popover.vue' ...@@ -69,7 +70,6 @@ import Popover from '@/components/Popover.vue'
import Draggable from 'vuedraggable' import Draggable from 'vuedraggable'
import { ElLoading, ElMessageBox } from 'element-plus' import { ElLoading, ElMessageBox } from 'element-plus'
import FileService from '@/services/FileService' import FileService from '@/services/FileService'
import { VIEWPORT_SIZE, VIEWPORT_VER_SIZE } from '@/configs/canvas'
import { Slide } from '@/types/slides' import { Slide } from '@/types/slides'
const mainStore = useMainStore() const mainStore = useMainStore()
...@@ -77,7 +77,7 @@ const slidesStore = useSlidesStore() ...@@ -77,7 +77,7 @@ const slidesStore = useSlidesStore()
const layoutsStore = useSlidesStore() const layoutsStore = useSlidesStore()
const keyboardStore = useKeyboardStore() const keyboardStore = useKeyboardStore()
const { selectedSlidesIndex: _selectedSlidesIndex, thumbnailsFocus } = storeToRefs(mainStore) const { selectedSlidesIndex: _selectedSlidesIndex, thumbnailsFocus } = storeToRefs(mainStore)
const { slides, currentSlide, slideIndex, layoutSlides } = storeToRefs(slidesStore) const { slides, currentSlide, slideIndex, layoutSlides, viewportRatio } = storeToRefs(slidesStore)
const { ctrlKeyState, shiftKeyState } = storeToRefs(keyboardStore) const { ctrlKeyState, shiftKeyState } = storeToRefs(keyboardStore)
const { SalesEditor, SalesBack, SalesTripId } = storeToRefs(useSellTemplateStore()) const { SalesEditor, SalesBack, SalesTripId } = storeToRefs(useSellTemplateStore())
...@@ -199,10 +199,10 @@ const GetTripFiledData = async () =>{ ...@@ -199,10 +199,10 @@ const GetTripFiledData = async () =>{
}) })
isHideOverflowText = true isHideOverflowText = true
} catch (error) {} } catch (error) {}
let maxWidth = VIEWPORT_SIZE,maxHeight = VIEWPORT_VER_SIZE, viewportRatio = slidesStore.viewportRatio let maxWidth = VIEWPORT_SIZE,maxHeight = VIEWPORT_VER_SIZE.Value, viewportRatios = slidesStore.viewportRatio
if(viewportRatio<1){ if(viewportRatio<1){
maxWidth = VIEWPORT_VER_SIZE maxWidth = VIEWPORT_VER_SIZE.Value
maxHeight = VIEWPORT_SIZE maxHeight = VIEWPORT_SIZE.Value
} }
const travel = dataRes.data.data const travel = dataRes.data.data
const cursors = [] as Array<any> const cursors = [] as Array<any>
...@@ -389,14 +389,14 @@ const GetTripTemplate = async () =>{ ...@@ -389,14 +389,14 @@ const GetTripTemplate = async () =>{
let dataRes = await ConfigService.GetTripTemplateSlide(queryMsg); let dataRes = await ConfigService.GetTripTemplateSlide(queryMsg);
if (dataRes.data.resultCode == 1) { if (dataRes.data.resultCode == 1) {
if(SalesBack.value==0||(SalesBack.value==1&&searchData.value.TempId)){ if(SalesBack.value==0||(SalesBack.value==1&&searchData.value.TempId)){
let viewportRatio = 1.414 let viewportRatios = 1.414
if(dataRes.data.data.TempType==1) viewportRatio = 0.7069 if(dataRes.data.data.TempType==1) viewportRatios = 0.7069
if(dataRes.data.data.TemplateType==2&&dataRes.data.data.Width&&dataRes.data.data.Height) { if(dataRes.data.data.TemplateType==2&&dataRes.data.data.Width&&dataRes.data.data.Height) {
viewportRatio = dataRes.data.data.Height/dataRes.data.data.Width viewportRatios = dataRes.data.data.Height/dataRes.data.data.Width
queryObj.value.Width = dataRes.data.data.Width queryObj.value.Width = dataRes.data.data.Width
queryObj.value.Height = dataRes.data.data.Height queryObj.value.Height = dataRes.data.data.Height
} }
slidesStore.setViewportRatio(viewportRatio) slidesStore.setViewportRatio(viewportRatios)
let SlidesData = JSON.parse(dataRes.data.data.TempData) let SlidesData = JSON.parse(dataRes.data.data.TempData)
let newSlides = [] let newSlides = []
...@@ -441,7 +441,15 @@ const GetTripTemplate = async () =>{ ...@@ -441,7 +441,15 @@ const GetTripTemplate = async () =>{
queryObj.value.TempType = dataRes.data.data.TempType queryObj.value.TempType = dataRes.data.data.TempType
queryObj.value.TemplateType = dataRes.data.data.TemplateType queryObj.value.TemplateType = dataRes.data.data.TemplateType
if(queryObj.value.Width){
VIEWPORT_SIZE.Value = queryObj.value.Height
VIEWPORT_VER_SIZE.Value = queryObj.value.Width
// if(viewportRatio.value<1) VIEWPORT_SIZE.Value = queryObj.value.Height
// else VIEWPORT_VER_SIZE.Value = queryObj.value.Width
}else {
VIEWPORT_SIZE.Value = 1754
VIEWPORT_VER_SIZE.Value = 1240
}
if(ConfigId.value==0) return if(ConfigId.value==0) return
if(TempId.value&&!searchData.value.TempId) await GetTripConfig() if(TempId.value&&!searchData.value.TempId) await GetTripConfig()
...@@ -470,14 +478,24 @@ const sellGetTripTemplate = async () =>{ ...@@ -470,14 +478,24 @@ const sellGetTripTemplate = async () =>{
else if(TempId.value) queryObj.value.TempId = TempId.value else if(TempId.value) queryObj.value.TempId = TempId.value
let dataObj = dataRes.data.data let dataObj = dataRes.data.data
let viewportRatio = 1.414 let viewportRatios = 1.414
if(dataRes.data.data.TempType==1) viewportRatio = 0.7069 if(dataRes.data.data.TempType==1) viewportRatios = 0.7069
if(dataRes.data.data.TemplateType==2&&dataRes.data.data.Width&&dataRes.data.data.Height) { if(dataRes.data.data.TemplateType==2&&dataRes.data.data.Width&&dataRes.data.data.Height) {
viewportRatio = dataRes.data.data.Height/dataRes.data.data.Width viewportRatios = dataRes.data.data.Height/dataRes.data.data.Width
queryObj.value.Width = dataRes.data.data.Width
queryObj.value.Height = dataRes.data.data.Height
} }
queryObj.value.TemplateType = dataRes.data.data.TemplateType queryObj.value.TemplateType = dataRes.data.data.TemplateType
slidesStore.setViewportRatio(viewportRatio) slidesStore.setViewportRatio(viewportRatios)
if(queryObj.value.Width){
VIEWPORT_SIZE.Value = queryObj.value.Height
VIEWPORT_VER_SIZE.Value = queryObj.value.Width
}else {
VIEWPORT_SIZE.Value = 1754
VIEWPORT_VER_SIZE.Value = 1240
}
if(SalesBack.value==0) slidesStore.setTitle(dataRes.data.data.Title) if(SalesBack.value==0) slidesStore.setTitle(dataRes.data.data.Title)
if(SalesBack.value==0&&searchData.value.sellId){ if(SalesBack.value==0&&searchData.value.sellId){
console.log(JSON.parse(dataObj.TempData)) console.log(JSON.parse(dataObj.TempData))
......
...@@ -188,7 +188,7 @@ ...@@ -188,7 +188,7 @@
class="thumbnail" class="thumbnail"
:key="slides[slideIndex].id" :key="slides[slideIndex].id"
:slide="slides[slideIndex]" :slide="slides[slideIndex]"
:size="viewportRatio<1 ? VIEWPORT_SIZE : VIEWPORT_VER_SIZE" :size="viewportRatio<1 ? VIEWPORT_SIZE.Value : VIEWPORT_VER_SIZE.Value"
/> />
</div> </div>
</div> </div>
......
...@@ -63,10 +63,10 @@ const updateUnionElement = ref<boolean>(true) ...@@ -63,10 +63,10 @@ const updateUnionElement = ref<boolean>(true)
const loading = ref<boolean>(false) const loading = ref<boolean>(false)
const loadingObj = ref<any>('') const loadingObj = ref<any>('')
const query = ref<string>('') const query = ref<string>('')
let maxWidth = VIEWPORT_SIZE,maxHeight = VIEWPORT_VER_SIZE, viewportRatio = slidesStore.viewportRatio let maxWidth = VIEWPORT_SIZE,maxHeight = VIEWPORT_VER_SIZE.Value, viewportRatio = slidesStore.viewportRatio
if(viewportRatio<1){ if(viewportRatio<1){
maxWidth = VIEWPORT_VER_SIZE maxWidth = VIEWPORT_VER_SIZE.Value
maxHeight = VIEWPORT_SIZE maxHeight = VIEWPORT_SIZE.Value
} }
if(handleElement.value?.dataMapping){ if(handleElement.value?.dataMapping){
......
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
class="thumbnail" class="thumbnail"
:key="slide.id" :key="slide.id"
:slide="slide" :slide="slide"
:size="param.w?param.w:(viewportRatio<1 ? VIEWPORT_SIZE : VIEWPORT_VER_SIZE )" :size="param.w?param.w:(viewportRatio<1 ? VIEWPORT_SIZE.Value : VIEWPORT_VER_SIZE.Value )"
/> />
</div> </div>
</div> </div>
......
...@@ -55,8 +55,8 @@ const insertTextElement = () => { ...@@ -55,8 +55,8 @@ const insertTextElement = () => {
const height = 56 const height = 56
createTextElement({ createTextElement({
left: (VIEWPORT_SIZE - width) / 2, left: (VIEWPORT_SIZE.Value - width) / 2,
top: (VIEWPORT_SIZE * viewportRatio.value - height) / 2, top: (VIEWPORT_SIZE.Value * viewportRatio.value - height) / 2,
width, width,
height, height,
}, { content: '<p>新添加文本</p>' }) }, { content: '<p>新添加文本</p>' })
...@@ -81,8 +81,8 @@ const insertShapeElement = (type: 'square' | 'round') => { ...@@ -81,8 +81,8 @@ const insertShapeElement = (type: 'square' | 'round') => {
const size = 200 const size = 200
createShapeElement({ createShapeElement({
left: (VIEWPORT_SIZE - size) / 2, left: (VIEWPORT_SIZE.Value - size) / 2,
top: (VIEWPORT_SIZE * viewportRatio.value - size) / 2, top: (VIEWPORT_SIZE.Value * viewportRatio.value - size) / 2,
width: size, width: size,
height: size, height: size,
}, shape[type]) }, shape[type])
......
...@@ -83,8 +83,8 @@ const canvasScale = computed(() => { ...@@ -83,8 +83,8 @@ const canvasScale = computed(() => {
const contentheight = contentRef.value.clientHeight const contentheight = contentRef.value.clientHeight
const contentRatio = contentheight / contentWidth const contentRatio = contentheight / contentWidth
if (contentRatio >= viewportRatio.value) return (contentWidth - 20) / VIEWPORT_SIZE if (contentRatio >= viewportRatio.value) return (contentWidth - 20) / VIEWPORT_SIZE.Value
return (contentheight - 20) / viewportRatio.value / VIEWPORT_SIZE return (contentheight - 20) / viewportRatio.value / VIEWPORT_SIZE.Value
}) })
onMounted(() => { onMounted(() => {
...@@ -93,8 +93,8 @@ onMounted(() => { ...@@ -93,8 +93,8 @@ onMounted(() => {
}) })
const viewportStyles = computed(() => ({ const viewportStyles = computed(() => ({
width: VIEWPORT_SIZE * canvasScale.value + 'px', width: VIEWPORT_SIZE.Value * canvasScale.value + 'px',
height: VIEWPORT_SIZE * viewportRatio.value * canvasScale.value + 'px', height: VIEWPORT_SIZE.Value * viewportRatio.value * canvasScale.value + 'px',
})) }))
const elementList = ref<PPTElement[]>([]) const elementList = ref<PPTElement[]>([])
......
...@@ -3,8 +3,8 @@ ...@@ -3,8 +3,8 @@
class="screen-slide" class="screen-slide"
style="overflow: hidden;" style="overflow: hidden;"
:style="{ :style="{
width: (viewportRatio<1 ? VIEWPORT_SIZE:VIEWPORT_VER_SIZE )+ 'px', width: (viewportRatio<1 ? VIEWPORT_SIZE.Value:VIEWPORT_VER_SIZE.Value )+ 'px',
height: (viewportRatio<1 ? VIEWPORT_SIZE:VIEWPORT_VER_SIZE ) * viewportRatio + 'px', height: (viewportRatio<1 ? VIEWPORT_SIZE.Value:VIEWPORT_VER_SIZE.Value ) * viewportRatio + 'px',
transform: `scale(${scale})`, transform: `scale(${scale})`,
}" }"
> >
......
...@@ -68,7 +68,7 @@ const slidesWithTurningMode = computed(() => { ...@@ -68,7 +68,7 @@ const slidesWithTurningMode = computed(() => {
} }
}) })
}) })
const scale = computed(() => props.slideWidth / (viewportRatio.value<1 ? VIEWPORT_SIZE:VIEWPORT_VER_SIZE )) const scale = computed(() => props.slideWidth / (viewportRatio.value<1 ? VIEWPORT_SIZE.Value:VIEWPORT_VER_SIZE.Value ))
provide(injectKeySlideScale, scale) provide(injectKeySlideScale, scale)
</script> </script>
......
...@@ -9,8 +9,8 @@ ...@@ -9,8 +9,8 @@
class="elements" class="elements"
style="overflow: hidden;" style="overflow: hidden;"
:style="{ :style="{
width: (viewportRatio<1 ? VIEWPORT_SIZE:VIEWPORT_VER_SIZE )+ 'px', width: (viewportRatio<1 ? VIEWPORT_SIZE.Value:VIEWPORT_VER_SIZE.Value )+ 'px',
height: (viewportRatio<1 ? VIEWPORT_SIZE:VIEWPORT_VER_SIZE ) * viewportRatio + 'px', height: (viewportRatio<1 ? VIEWPORT_SIZE.Value:VIEWPORT_VER_SIZE.Value ) * viewportRatio + 'px',
transform: `scale(${scale})`, transform: `scale(${scale})`,
}" }"
v-if="visible" v-if="visible"
...@@ -51,7 +51,7 @@ const { viewportRatio } = storeToRefs(useSlidesStore()) ...@@ -51,7 +51,7 @@ const { viewportRatio } = storeToRefs(useSlidesStore())
const background = computed(() => props.slide.background) const background = computed(() => props.slide.background)
const { backgroundStyle } = useSlideBackgroundStyle(background) const { backgroundStyle } = useSlideBackgroundStyle(background)
const scale = computed(() => props.size / (viewportRatio.value<1 ? VIEWPORT_SIZE:VIEWPORT_VER_SIZE )) const scale = computed(() => props.size / (viewportRatio.value<1 ? VIEWPORT_SIZE.Value:VIEWPORT_VER_SIZE.Value ))
provide(injectKeySlideScale, scale) provide(injectKeySlideScale, scale)
</script> </script>
......
...@@ -60,8 +60,8 @@ const audioIconSize = computed(() => { ...@@ -60,8 +60,8 @@ const audioIconSize = computed(() => {
return Math.min(props.elementInfo.width, props.elementInfo.height) + 'px' return Math.min(props.elementInfo.width, props.elementInfo.height) + 'px'
}) })
const audioPlayerPosition = computed(() => { const audioPlayerPosition = computed(() => {
const canvasWidth = VIEWPORT_SIZE const canvasWidth = VIEWPORT_SIZE.Value
const canvasHeight = VIEWPORT_SIZE * viewportRatio.value const canvasHeight = VIEWPORT_SIZE.Value * viewportRatio.value
const audioWidth = 280 / scale.value const audioWidth = 280 / scale.value
const audioHeight = 50 / scale.value const audioHeight = 50 / scale.value
......
...@@ -62,8 +62,8 @@ const audioIconSize = computed(() => { ...@@ -62,8 +62,8 @@ const audioIconSize = computed(() => {
return Math.min(props.elementInfo.width, props.elementInfo.height) + 'px' return Math.min(props.elementInfo.width, props.elementInfo.height) + 'px'
}) })
const audioPlayerPosition = computed(() => { const audioPlayerPosition = computed(() => {
const canvasWidth = VIEWPORT_SIZE const canvasWidth = VIEWPORT_SIZE.Value
const canvasHeight = VIEWPORT_SIZE * viewportRatio.value const canvasHeight = VIEWPORT_SIZE.Value * viewportRatio.value
const audioWidth = 280 / canvasScale.value const audioWidth = 280 / canvasScale.value
const audioHeight = 50 / canvasScale.value const audioHeight = 50 / canvasScale.value
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment