行程图生成及上传

src/hooks/useExport.ts

@@ -38,7 +38,6 @@ export default () => {
     const toImage = format === 'png' ? toPng : toJpeg
     const foreignObjectSpans = domRef.querySelectorAll('foreignObject [xmlns]')
     foreignObjectSpans.forEach(spanRef => spanRef.removeAttribute('xmlns'))
-
     return new Promise<boolean>((resolve)=>{
       setTimeout(() => {
         const config: ExportImageConfig = {

src/views/Editor/Canvas/index.vue

 <template>
-  <div @click="testHandler">测试</div>
-  <img :src="x.url" v-for="(x,i) in FeatureImg" alt="">
   <div 
     class="canvas" 
     ref="canvasRef"
@@ -97,20 +95,6 @@
       <LinkDialog @close="linkDialogVisible = false" />
     </Modal>
   </div>
-  <div style="position: relative;z-index: -1;" v-if="slides.length>0"><!-- !model&&ConfigId&& -->
-    <div class="export-img-dialog">
-      <div class="thumbnails-view">
-        <div class="thumbnails" v-for="slide in slides" ref="FeatureImgRef">
-          <ThumbnailSlide 
-            class="thumbnail" 
-            :key="slide.id" 
-            :slide="slide" 
-            :size="1600" 
-          />
-        </div>
-      </div>
-    </div>
-  </div>
 </template>
 
 <script lang="ts" setup>
@@ -124,7 +108,6 @@ import type { AlignmentLineProps, CreateCustomShapeData } from '@/types/edit'
 import { injectKeySlideScale } from '@/types/injectKey'
 import { removeAllRanges } from '@/utils/selection'
 import { KEYS } from '@/configs/hotkey'
-import useExport from '@/hooks/useExport'
 import { injectKeyDataSource } from '@/types/injectKey'
 
 import useViewportSize from './hooks/useViewportSize'
@@ -157,7 +140,6 @@ import MultiSelectOperate from './Operate/MultiSelectOperate.vue'
 import Operate from './Operate/index.vue'
 import LinkDialog from './LinkDialog.vue'
 import Modal from '@/components/Modal.vue'
-import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
 
 const mainStore = useMainStore()
 const {
@@ -179,7 +161,6 @@ const { ctrlKeyState, spaceKeyState } = storeToRefs(useKeyboardStore())
 const viewportRef = ref<HTMLElement>()
 const alignmentLines = ref<AlignmentLineProps[]>([])
 
-const { exportFeatureImg } = useExport()
 const datas = reactive({
   FeatureImgList: [],
   loading: false
@@ -191,41 +172,11 @@ const renderSlides = computed(() => {
   return slides.value
 })
 
-const FeatureImgRef = ref(null)
-
 // 将界面生成形成图
 watch(() => slides.value, (n,o) =>{
-  // FeatureImgStore.setFeatureImg([])
-  // if(FeatureImgRef.value&&FeatureImgRef.value.length>0){
-  //   console.log(FeatureImgRef.value)
-  //   exportFeatureImg(FeatureImgRef.value[0], 'jpeg', 1, false, 0)
-  //   console.log(FeatureImg.value)
-  //   // setTimeout(()=>{
-  //   //   for(let i=0;i<FeatureImgRef.value.length;i++){
-  //   //    
-  //   //   }
-  //   // },500)
-  // }
-})
-const testHandler = async ()=>{
-  FeatureImgStore.setFeatureImg([])
-  if(FeatureImgRef.value&&FeatureImgRef.value.length>0){
-    console.log(FeatureImgRef.value)
-    for (let i = 0; i < FeatureImgRef.value.length; i++) {
-      let result = await exportFeatureImg(FeatureImgRef.value[i], 'jpeg', 1, false, i)
-      if(!result){
-        console.log('异常')
-        break
-      }
-    }
-    console.log(FeatureImg.value)
-  }
-}
-
-// 监听请求保存成功 重新请求数据
-watch(() => FeatureImgRef.value, (n,o) =>{
   
 })
+
 watch(() => FeatureImg.value, (n,o) =>{
   FeatureImg.value.sort((a,b)=>{
     return a.index-b.index

src/views/Editor/EditorHeader/index.vue

 <template>
+  <!-- <div @click="testHandler">测试</div> -->
+  <!-- <div>
+    <template v-for="(x,i) in FeatureImg">
+      <img :src="x.url" alt="" style="width: 80px;">
+    </template>
+  </div> -->
+  <!-- <div>
+    <img :src="item" v-for="item in datas.FeatureImgList"  style="width: 80px;" />
+  </div> -->
   <div class="editor-header">
     <div class="left">
       <div class="menu-item" v-tooltip="'去首页'" @click="goBack()">首页</div>
@@ -95,7 +104,22 @@
     <FullscreenSpin :loading="exporting" tip="正在导入..." />
     <Psd-Upload :visible="psdVisibleStatus" @closed="psdVisibleStatus=false"></Psd-Upload>
   </div>
-  
+  <!-- ConfigId&& -->
+  <!-- opacity: 0;position: absolute;left: 100px;top: 0;bottom: 0;overflow: auto;z-index: -1; -->
+  <div style="position: relative;z-index: -1;">
+    <div class="export-img-dialog">
+      <div class="thumbnails-view">
+        <div class="thumbnails" v-for="slide in slides" ref="FeatureImgRef">
+          <ThumbnailSlide 
+            class="thumbnail" 
+            :key="slide.id" 
+            :slide="slide" 
+            :size="1600" 
+          />
+        </div>
+      </div>
+    </div>
+  </div>
   
 </template>
 
@@ -119,6 +143,7 @@ import UploadService from '@/services/UploadService'
 import { domainManager } from '@/utils/domainManager'
 import { ToolbarStates } from '@/types/toolbar'
 import useEditor from '@/utils/Editor/index'
+import useExport from '@/hooks/useExport'
 
 
 import HotkeyDoc from './HotkeyDoc.vue'
@@ -131,6 +156,7 @@ import PopoverMenuItem from '@/components/PopoverMenuItem.vue'
 import { PPTImageElement } from '@/types/slides'
 import AliyunUpload from '@/utils/upload/aliyun'
 import { ElLoading, ElMessage } from 'element-plus'
+import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
 
 
 const mainStore = useMainStore()
@@ -169,6 +195,9 @@ const dataLoadingStore = useScreenStore()
 const TempIdStore = useScreenStore()
 const FeatureImgStore = useScreenStore()
 const ConfigIdStore = useScreenStore()
+const FeatureImgRef = ref(null)
+
+const { exportFeatureImg } = useExport()
 
 const psdVisibleStatus = ref(false)
 const { market, model, ConfigId, CoverImg, dataLoading, TempId, FeatureImg, SourceLoading } = storeToRefs(useScreenStore())
@@ -328,6 +357,7 @@ const SetTripTemplateConfig = async () => {
 // 保存
 const setTemplate = async () =>{
   if(SourceLoading.value) setNewDatasList(datas.DataSource)
+
   await uploadImageHandler()
   let arr = JSON.parse(JSON.stringify(slides.value))
   if(dataLoading.value){
@@ -386,39 +416,63 @@ const setTemplate = async () =>{
     await SetTripTemplateSlide()
   }
   if(ConfigId.value){
-    datas.FeatureImgList = []
-    FeatureImg.value.forEach(item=>{
-      setTimeout(()=>{
-        setFeatureImgList(item.url)
-      },300)
-    })
+    await testHandler()
   }
 }
 
-// 上传文件
-const setFeatureImgList = async (url) => {
-  try {
-      let queryObj = {
-        MyFile: url
-      }
-      let path = `?fileType=1&fileLimit=5&&filePath=Feature/${ConfigId.value}_`
-      let Res = await UploadService.UploadBase64Two(path,queryObj);
-      if (Res.data&&Res.data.FilePath) {
-        datas.FeatureImgList.push(`${domainManager().ViittoFileUrl}/${Res.data.FilePath}`)
-        if(datas.FeatureImgList.length==slides.value.length){
-          await SetTripTemplateConfig()
-        }
+// 生成bes64图
+const testHandler = async ()=>{
+  FeatureImgStore.setFeatureImg([])
+  if(FeatureImgRef.value&&FeatureImgRef.value.length>0){
+    console.log(FeatureImgRef.value)
+    for (let i = 0; i < FeatureImgRef.value.length; i++) {
+      let result = await exportFeatureImg(FeatureImgRef.value[i], 'jpeg', 1, false, i)
+      if(!result){
+        console.log('异常')
+        break
       }
-  } catch (error) {
-    datas.loading = false
-    ElMessage({
-      showClose: true,
-      message: '上传行程文件出错',
-      type: 'warning',
-    })
+    }
+    if(FeatureImg.value.length==slides.value.length){
+      setFeatureImgList()
+    }
   }
 }
 
+// 上传文件
+const setFeatureImgList = async () => {
+  datas.FeatureImgList = []
+  await FeatureImg.value.forEach(item=>{
+    let name = new Date().getTime()+".jpg"
+    const file = dataURLtoFile(item.url, name)
+    let url = AliyunUpload.UploadAsync(file,`Feature/${ConfigId.value}_${item.index}`)
+    console.log(url,'-------')
+    if(url){
+      datas.FeatureImgList.push(`https://im.oytour.com/Feature/${ConfigId.value}_${item.index}`)
+    }
+  })
+  if(datas.FeatureImgList.length==slides.value.length) await SetTripTemplateConfig()
+  // try {
+  //     let queryObj = {
+  //       MyFile: url
+  //     }
+  //     let path = `?fileType=1&fileLimit=5&&filePath=Feature/${ConfigId.value}_`
+  //     let Res = await UploadService.UploadBase64Two(path,queryObj);
+  //     if (Res.data&&Res.data.FilePath) {
+  //       datas.FeatureImgList.push(`${domainManager().ViittoFileUrl}/${Res.data.FilePath}`)
+  //       if(datas.FeatureImgList.length==slides.value.length){
+  //         await SetTripTemplateConfig()
+  //       }
+  //     }
+  // } catch (error) {
+  //   datas.loading = false
+  //   ElMessage({
+  //     showClose: true,
+  //     message: '上传行程文件出错',
+  //     type: 'warning',
+  //   })
+  // }
+}
+
 const startEditTitle = () => {
   titleValue.value = title.value
   editingTitle.value = true

src/views/Editor/Toolbar/ElementTemplateData.vue

@@ -10,7 +10,7 @@
                     ></div>
                 </template>
                 <div class="row">
-                    <Button style="flex: 1;" @click="setDialogForExport('image')">
+                    <Button v-loading="isCoverImg" style="flex: 1;" @click="setDialogForExport('image')">
                         <span class="Required" v-if="!CoverImg">*</span>
                         {{CoverImg?'重新生成封面图':'生成封面图'}}
                     </Button>
@@ -268,7 +268,7 @@
         mainMenuVisible.value = false
         isCoverImgStore.setIsCoverImg(true)
         setTimeout(()=>{
-            exportImage(FeatureImgRef.value, 'png', 1, true)
+            exportImage(FeatureImgRef.value, 'png', 1, false)
         },300)
     }