fix

src/component/Detail/oldHistoryDetail.vue

@@ -0,0 +1,141 @@
+<template>
+    <a-modal class="oldHsitory_detail_modal_component" 
+            v-model:visible="hsitoryDetailShow" 
+            :footer="null" 
+            :title="collectionName"
+            width="80%"
+            :maskClosable="false"
+			:keyboard="false"
+            :centered="true"
+        >
+            <template #closeIcon>
+                <div class="close_icon" @click.stop="changeDetailShow()"><span class="icon iconfont icon-guanbi"></span></div>
+            </template>
+            <!-- <div class="history_detail_content scroll_style">
+                <div class="history_img_block" v-for="img in groupDetails" :key="img">
+                    <div class="history_img_item" >
+                        <img class="element_img"  :src="img.url">
+                    </div>
+                </div>
+            </div> -->
+			<OldExportNewCoolection ref="OldExportNewCoolection"></OldExportNewCoolection>
+
+    </a-modal>
+</template>
+<script lang="ts">
+import OldExportNewCoolection from "@/component/HomePage/OldExportNewCoolection.vue";
+import { defineComponent, ref, nextTick } from 'vue'
+
+export default defineComponent({
+	components: {
+		OldExportNewCoolection
+    },
+    props:{
+        groupDetails:{
+            default:{},
+        },
+        collectionName:{
+            default:''
+        }
+    },
+    setup() {
+        let hsitoryDetailShow = ref(false)
+		return{
+			hsitoryDetailShow
+		}
+    },
+    data(){
+        return{
+        }
+    },
+    methods:{
+		init(data:any){
+			this.hsitoryDetailShow = true
+			nextTick().then(()=>{
+				let OldExportNewCoolection:any = this.$refs.OldExportNewCoolection
+				OldExportNewCoolection.init(data)
+			})
+		},
+        changeDetailShow(){
+            this.hsitoryDetailShow = !this.hsitoryDetailShow
+        }
+    }
+})
+</script>
+<style lang="less">
+.oldHsitory_detail_modal_component{
+	.ant-modal-body{
+		overflow-y: initial !important;
+		overflow-x: auto;
+	}
+	.export_new_collection_review{
+		position: relative;
+		left: 50%;
+		transform: translateX(-50%) scale(2);
+		transform-origin: top center;
+		top: 0;
+	}
+    .ant-modal-close{
+        width: 3.6rem;
+        height: 3.6rem;
+        position: absolute;
+        top: -1.8rem;
+        right: -1.8rem;
+    }
+
+    .ant-modal-header{
+        background: #F7F7F7;
+    }
+
+    .ant-modal-body{
+        background: #F2F3FB;
+        height: 80vh;
+        min-height: 72rem;
+        overflow-y: hidden;
+        padding: 0;
+    }
+
+    .close_icon{
+        width: 3.6rem;
+        height: 3.6rem;
+        background: #000000;
+        border-radius: 50%;
+        line-height: 3.6rem;
+        text-align: center;
+
+        .icon-guanbi{
+            font-size: 2rem;
+            color: #ffffff;
+        }
+    }
+
+    .history_detail_content{
+        padding: 2.6rem 2.0rem 2.6rem 3.7rem;
+        height: 100%;
+        width: 100%;
+        overflow-y:auto; 
+        background: #FFFFFF;
+
+        .history_img_block{
+            width: 16.5rem;
+            height: 16.5rem;
+            border: 0.1rem solid #343579;
+            margin: 0 1.7rem 1.7rem 0;
+            display: inline-block;
+
+            .history_img_item{
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 100%;
+                height: 100%;
+            }
+
+            .element_img{
+                max-width: 100%;
+                max-height: 100%;
+            }
+        }
+    }
+}
+</style>

src/component/HomePage/OldExportNewCoolection.vue

@@ -51,35 +51,43 @@
             </div>
         </div>
 
-        <!-- <div class="img_block_item">
+        <div class="img_block_item">
-            <div class="lager_img_item"  v-for="(design) in likeDesignCollectionList" :key="design.designItemUrl">
+            <div class="lager_img_item"  v-for="(design) in allBoardData.likeDesignCollectionList" :key="design.designItemUrl">
                 <div class="all_img_item_block">
                     <img class="all_img_content" :src="design.designItemUrl"> 
                 </div>
             </div>
-        </div> -->
+        </div>
         
     </div>
 </template>
 <script lang="ts">
-import { computed, defineComponent } from 'vue'
+import { computed, defineComponent, ref } from 'vue'
 import MoodTemplate from '@/component/HomePage/MoodTemplate.vue'
 import { useStore } from "vuex";
 export default defineComponent({
-	props: {
+	// props: {
-		allBoardData: {
+	// 	allBoardData: {
-			// default: false,
+	// 		// default: false,
-		},
+	// 	},
-	},
+	// },
     components:{MoodTemplate},
     setup() {
-        const store = useStore();
+		
+        const allBoardData = ref({});
         // let allBoardData:any = computed(()=>{return store.state.UploadFilesModule.allBoardData})
         // let likeDesignCollectionList : any = computed(()=>{return store.state.HomeStoreModule.likeDesignCollectionList})
         return {
-            // allBoardData,
+            allBoardData,
             // likeDesignCollectionList,
         }
+    },
+	mounted () {
+	},
+	methods:{
+		init(data:any){
+			this.allBoardData = data
+		}
 	}
 })
 </script>

src/views/HomeView.vue

@@ -1017,6 +1017,7 @@ export default defineComponent({
 							name: "collection.png",
 						})
 					let num = 0
+					console.log(allBoardData);
 					for (let key in allBoardData) {
 						if (key !== "colorBoards" && key !== "moodTemplateId") {
 							if(this.exportNav[num]?.change || key == 'disposeMoodboard'){

src/views/OldHistoryPage.vue

@@ -35,7 +35,7 @@
 								<div class="operate_list" v-if="column?.Operations">
 									<div class="operate_item" @click="turnToDetail(record)">{{ $t('HistoryPage.Detail') }}</div>
 									<!-- <div class="operate_item" @click="renameCollection(record,index)">{{ $t('HistoryPage.Rename') }}</div> -->
-									<div class="operate_item" @click="setExport(record)">{{ $t('HomeView.Export') }}</div>
+									<div class="operate_item" @click="setExport(record,'')">{{ $t('HomeView.Export') }}</div>
 									<div class="operate_item" @click="deleteGroup(record, index)">{{ $t('HistoryPage.Delete') }}</div>
 								</div>
 							</template>
@@ -44,7 +44,7 @@
                 </div>
             </div>
         </div>
-        <HistoryDetail ref="historyDetail" :groupDetails="groupDetails" :collectionName="collectionName"></HistoryDetail>
+        <oldHistoryDetail ref="historyDetail" :groupDetails="groupDetails" :collectionName="collectionName"></oldHistoryDetail>
 
         <!-- <a-modal class="rename_modal_component" 
             v-model:visible="renameVisivle" 
@@ -62,14 +62,14 @@
                 <div class="rename_submit_button"  @click="confrimRename()">{{ $t('HistoryPage.Submit') }}</div>
             </div>
         </a-modal> -->
-		<RobotAssist></RobotAssist>
+		<!-- <RobotAssist></RobotAssist> -->
     </div>
-	<OldExportNewCoolection id="oldExportNewCoolection" allBoardData="allBoardData"></OldExportNewCoolection>
+	<OldExportNewCoolection id="oldExportNewCoolection" ref="OldExportNewCoolection" allBoardData="allBoardData"></OldExportNewCoolection>
 </template>
 <script lang="ts">
 import { defineComponent,ref,createVNode,computed, nextTick} from 'vue'
 import HeaderComponent from "@/component/HomePage/Header.vue";
-import HistoryDetail from "@/component/Detail/HistoryDetail.vue";
+import oldHistoryDetail from "@/component/Detail/oldHistoryDetail.vue";
 import { Https } from "@/tool/https";
 import { formatTime } from "@/tool/util"
 import { Modal,message } from 'ant-design-vue';
@@ -87,7 +87,7 @@ const FileSaver = require("file-saver");
 export default defineComponent({
     components: {
         HeaderComponent,
-        HistoryDetail,
+        oldHistoryDetail,
 		RobotAssist,
 		OldExportNewCoolection
     },
@@ -152,10 +152,12 @@ export default defineComponent({
     },
     methods:{
         turnToDetail(record:any){
-            this.groupDetails = record.groupDetails
+            // this.groupDetails = record.groupDetails
             let historyDetail:any = this.$refs.historyDetail
             this.collectionName = record.name
-            historyDetail.changeDetailShow()
+            // historyDetail.init(this.data)
+			this.setExport(record,'look')
+            // historyDetail.changeDetailShow()
         },
 
 
@@ -181,11 +183,10 @@ export default defineComponent({
                 collectionName:this.searchCollectionName,
                 startDate:startDate,
                 endDate:endDate,
-				userId:83,
+				userId:this?.userInfo?.userId,
             }
             Https.axiosPost('https://old.api.aida.com.hk/api/history/queryUserGroup', data).then(
                 (rv: any) => {
-					console.log(rv);
                     this.collectionList = rv.content
                     this.total = rv.total
                 }
@@ -223,7 +224,7 @@ export default defineComponent({
             }
             let filesList = data.map((v:any)=>{
                 let newData:any = {
-                    imgUrl:v.url,
+                    imgUrl:v.url.replace(/www\.aida\.com\.hk/, 'files.aida.com.hk'),
                     id:v.id,
                     status:'done',
                     resData:v,
@@ -239,8 +240,18 @@ export default defineComponent({
             })
             return filesList
         },
-
+		dealLikeDesign(data:any){
-		dealHistoryChooseData(data:any,type:any){
+			let filesList = data.map((v:any)=>{
+                let newData:any = {
+                    designItemUrl:v.url.replace(/www\.aida\.com\.hk/, 'files.aida.com.hk'),
+					imgUrl:v.url.replace(/www\.aida\.com\.hk/, 'files.aida.com.hk'),
+                    id:v.designId,
+                }
+                return newData
+            })
+			return filesList
+		},
+		dealHistoryChooseData(data:any,str:any){
             let collectionData = {
                 moodboardFiles:this.dealViewChooseData(data.collection.moodBoards),
                 printboardFiles:this.dealViewChooseData(data.collection.printBoards),
@@ -248,19 +259,19 @@ export default defineComponent({
                 colorBoards:this.dealViewChooseColor(data.collection.colorBoards),
                 skecthboardFiles:this.dealViewChooseData(data.collection.sketchBoards),
                 marketingSketchFiles:this.dealViewChooseData(data.collection.marketingSketchs),
-                moodTemplateId:data.collection.moodTemplateId
+                moodTemplateId:data.collection.moodTemplateId,
+				likeDesignCollectionList:this.dealLikeDesign(data.userLikeDetails)
             }
 			this.allBoardData = collectionData
-            // if(type === 'normal'){
+			
-            //      let likeDesignCollectionList = data.userLikeDetails.map((v:any)=>{
+			if(str == 'look'){
-            //         let data = {
+				let historyDetail:any = this.$refs.historyDetail
-            //             ...v,
+				historyDetail.init(collectionData)
-            //             groupDetailId:v.id,
+				
-            //             designItemUrl:v.url,
+			}else{
-            //         }
+				let OldExportNewCoolection:any = this.$refs.OldExportNewCoolection
-            //         return data
+				OldExportNewCoolection.init(collectionData)
-            //     })
+			}
-            // }
         },
 		dealViewChooseColor(data:any){
             let colorList = data.map((v:any)=>{
@@ -275,51 +286,84 @@ export default defineComponent({
             })
             return colorList
         },
-		setExport(recold:any){
+		setExport(recold:any,str:any){
 			 let url = 'https://old.api.aida.com.hk/api/history/choose'  + `?userGroupId=${recold.id}`
             Https.axiosGet(url).then(
                 (rv: any) => {
-					this.dealHistoryChooseData(rv,'')
+					this.dealHistoryChooseData(rv,str)
+					if(str == 'look'){
+					}else{
 						nextTick().then(()=>{
 							this.exportCanvas()
 						})
 					}
+					
+                }
             ).catch(rv=>{
             });
 		},
-		exportCanvas(){
+		async exportCanvas(){
             let collectionReview:any = document.querySelector("#oldExportNewCoolection")
             let a = document.createElement('a');
             this.isShowMark = true
-            html2canvas(collectionReview,{useCORS:true,scale:3}).then((canvas) => {
+			let img:any = []
-                let blob:any = dataURLtoBlob(canvas.toDataURL('image/png'));
+			await html2canvas(collectionReview, { useCORS: true, scale: 3 }).then(
-                let allBoardData:any = this.store.state.UploadFilesModule.allBoardData
+				async (canvas) => {
-                let index = 0
+					let blob: any = dataURLtoBlob(
-                let img = [
+						canvas.toDataURL("image/png")
-                    {
+					);
-                        imgUrl:URL.createObjectURL(blob),
+					let index = 0;
-                        name:'collection.png'
+					img.push({
+							imgUrl: URL.createObjectURL(blob),
+							name: "collection.png",
+						})
+					let num = 0
+					for (let key in this.allBoardData) {
+						if (key !== "colorBoards" && key !== "moodTemplateId") {
+								for (let item of this.allBoardData[key]) {
+									if(this.allBoardData[key][0]==undefined){
+										break
 									}
-                ]
+									let nameTail = item?.imgUrl?.split(".").pop().split("?").shift();
-                for(let key in allBoardData){
+									// console.log(item);
-                    if(key !== 'colorBoards' && key !== 'moodTemplateId'){
-                        for(let item of allBoardData[key]){
-                            let nameTail = item.imgUrl.split('.').pop()
-                            console.log(nameTail, 666)
 									let data = {
-                                imgUrl:item.imgUrl,
+										imgUrl: item.imgUrl,
-                                name:item.resData.name + index + '.' + nameTail
+										name:
+											(item?.resData?.name?item?.resData?.name:'') +
+											index +
+											"." +
+											nameTail,
+									};
+									
+									img.push(data);
+									index++;
 								}
-                            img.push(data)
+							
-                            index ++
+							num++
 						}
 					}
-                }
-                this.downImg(img)
 					// a.setAttribute('href', URL.createObjectURL(blob));
 					// a.setAttribute('download', `collection.png`);
 					// a.click();
-            })
+				}
+			);
+			this.downImg(img);
+        },
+		getImgArrayBuffer(url:any) {
+            return new Promise((resolve, reject) => {
+                //通过请求获取文件blob格式
+                let xmlhttp = new XMLHttpRequest();
+                xmlhttp.open("GET", url, true);
+                xmlhttp.responseType = "blob";
+                xmlhttp.onload = function () {
+                if (this.status == 200) {
+                    resolve(this.response);
+                } else {
+                    reject(this.status);
+                }
+                };
+                xmlhttp.send();
+            });
         },
 		downImg(imagesParams:any) {
             let _this:any = this;