模版生成预览

src/views/Editor/Thumbnails/index.vue

@@ -459,17 +459,16 @@ const GetTripTemplate = async () =>{
           }
           // 根据集团渲染logo
           if(userInfo.value&&userInfo.value.RB_Group_id<=1){
+            return
             for(let i=0;i<newSlides.length;i++){
               let x = newSlides[i]
               let index =null
               x.elements.forEach((y,indexs)=>{
-                // console.log(y.layerName=='logo','----logo'+i)
                 if(y.layerName && y.layerName=='logo') index =  indexs
               })
               let eles = x.elements.filter(y=>y.layerName && y.layerName.indexOf('logo')!=-1)
               let newElements = await ResolveTripLogoHandler(eles,i)
               x.elements = x.elements.concat(newElements?.elements)
-              console.log(eles.length,'---')
               if(index>=0) x.elements.splice(index,1)
             }
           }

src/views/Preview/PreviewCover.vue

+<template>
+    <div style="
+      position: fixed;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      overflow: auto;
+    ">
+        <div class="export-img-dialog">
+            <div class="thumbnails-view" ref="refThumbnails">
+                <div class="thumbnails" :style="{width:viewportRatio < 1
+                            ? VIEWPORT_SIZE.Value
+                            : VIEWPORT_VER_SIZE.Value+'px'}" v-for="slide in slides">
+                    <ThumbnailSlide class="thumbnail" :key="slide.id" :slide="slide" :size="viewportRatio < 1
+                            ? VIEWPORT_SIZE.Value
+                            : VIEWPORT_VER_SIZE.Value
+                        " />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import ThumbnailSlide from '../components/ThumbnailSlide/index.vue'
+import ConfigService from '@/services/ConfigService'
+import FileService from '@/services/FileService'
+import { storeToRefs } from 'pinia'
+import { useSlidesStore } from '../../store'
+import { VIEWPORT_SIZE, VIEWPORT_VER_SIZE } from '../../configs/canvas'
+import { ref } from 'vue';
+import { ElLoading } from 'element-plus'
+import { useRouter } from 'vue-router'
+import { useUserStore } from "@/store";
+
+const router = useRouter()
+const param = router.currentRoute.value.params
+const slidesStore = useSlidesStore()
+const { slides, viewportRatio } = storeToRefs(slidesStore)
+const { userInfo } = storeToRefs(useUserStore())
+
+const acquiesceLogo = ref([
+  'https://im.oytour.com/pptist/static/logo1.png',
+  'https://im.oytour.com/pptist/static/logo2.png',
+  'https://im.oytour.com/pptist/static/logo3.png',
+  'https://im.oytour.com/pptist/static/logo4.png'
+])
+
+const w = ref(0)
+const h = ref(0)
+
+const loadSliders = async ()=>{
+  const loadingObj = ElLoading.service({text:'正在渲染数据',lock:true})
+  let response = await ConfigService.GetTripTemplateSlide({TempId:parseInt(param.tempId.toString())})
+  loadingObj.close()
+  if (response.data.resultCode == 1) {
+
+      let dataObj = response.data.data
+      w.value=dataObj.Width
+      h.value=dataObj.Height
+      
+      if(w.value>0){
+        viewportRatio.value = h.value/w.value
+        if(viewportRatio.value>=1) VIEWPORT_VER_SIZE.Value=w.value
+        if(viewportRatio.value<1) VIEWPORT_SIZE.Value=w.value
+      }else{
+        viewportRatio.value = dataObj.TempType==1? 0.7069:1.414
+      }
+      let SlidesData = JSON.parse(dataObj.TempData)
+      let newSlides:any[] = []
+      SlidesData&&SlidesData.forEach((x:any,i:number)=>{
+        newSlides.push(x)
+      })
+      // 根据集团渲染logo
+      if(userInfo.value&&userInfo.value.RB_Group_id<=1){
+        return
+        for(let i=0;i<newSlides.length;i++){
+          let x = newSlides[i]
+          let index =null
+          x.elements.forEach((y,indexs)=>{
+            if(y.layerName && y.layerName=='logo') index =  indexs
+          })
+          let eles = x.elements.filter(y=>y.layerName && y.layerName=='logo')
+          let newElements = await ResolveTripLogoHandler(eles,i)
+          x.elements = x.elements.concat(newElements?.elements)
+          if(index>=0) x.elements.splice(index,1)
+        }
+      }
+      slidesStore.setSlides(newSlides)
+  }
+}
+
+const ResolveTripLogoHandler = async (items:any, slideIndex:number) =>{
+    let elements = []
+    let tempNewSlide:any = null
+    let templateObj = JSON.parse(JSON.stringify(items))
+    for(let i=0;i<templateObj.length;i++){
+      try {
+          let y = templateObj[i]
+          let tempSize = await FileService.getImageSizeWithoutDownloading(templateObj[i].src)
+          let scale = tempSize.width/tempSize.height
+          if(scale==1) templateObj[i].src = acquiesceLogo.value[0]
+          if(scale>1) templateObj[i].src = acquiesceLogo.value[3]
+          if(scale<1) templateObj[i].src = acquiesceLogo.value[1]
+          if(tempNewSlide){
+            tempNewSlide.elements.push(...templateObj)
+          }else{
+            elements.push(...templateObj)
+            tempNewSlide = copySlidHandlerLogo(slideIndex)
+          }
+          let newTempSize = await FileService.getImageSizeWithoutDownloading(templateObj[i].src)
+          let width = 0
+          let height =  0
+          //按照宽度进行缩放
+          let ratio = newTempSize.width / y.width
+          width = y.width
+          height = newTempSize.height / ratio
+          if(height<y.height){
+              ratio = height / y.height
+              height =  y.height
+              width = width / ratio
+          }
+          y.height = height
+          y.width = width
+        } catch (error) {
+
+        }
+    }
+    
+    return {
+      elements,
+      newSlider:tempNewSlide,
+    }
+}
+
+
+if(param.tempId){
+    loadSliders()
+}
+</script>
\ No newline at end of file