aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
X1627315083
2024-01-26 17:27:33 +08:00
parent 2ec8b12fbf
commit 1c380aec02
4 changed files with 264 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
src/component/Detail/oldHistoryDetail.vue Normal file
View File

@@ -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>

32
src/component/HomePage/OldExportNewCoolection.vue
View File

@@ -51,36 +51,44 @@
</div>
</div>
<!-- <div class="img_block_item">
<div class="lager_img_item" v-for="(design) in likeDesignCollectionList" :key="design.designItemUrl">
<div class="img_block_item">
<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: {
allBoardData: {
// default: false,
},
},
// props: {
// allBoardData: {
// // 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>
<style lang="less" scoped>

1
src/views/HomeView.vue
View File

@@ -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'){

160
src/views/OldHistoryPage.vue
View File

@@ -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
},
dealHistoryChooseData(data:any,type:any){
dealLikeDesign(data: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)=>{
// let data = {
// ...v,
// groupDetailId:v.id,
// designItemUrl:v.url,
// }
// return data
// })
// }
if(str == 'look'){
let historyDetail:any = this.$refs.historyDetail
historyDetail.init(collectionData)
}else{
let OldExportNewCoolection:any = this.$refs.OldExportNewCoolection
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,'')
nextTick().then(()=>{
this.exportCanvas()
})
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 blob:any = dataURLtoBlob(canvas.toDataURL('image/png'));
let allBoardData:any = this.store.state.UploadFilesModule.allBoardData
let index = 0
let img = [
{
imgUrl:URL.createObjectURL(blob),
name:'collection.png'
}
]
for(let key in allBoardData){
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,
name:item.resData.name + index + '.' + nameTail
}
img.push(data)
index ++
}
}
let img:any = []
await html2canvas(collectionReview, { useCORS: true, scale: 3 }).then(
async (canvas) => {
let blob: any = dataURLtoBlob(
canvas.toDataURL("image/png")
);
let index = 0;
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();
// console.log(item);
let data = {
imgUrl: item.imgUrl,
name:
(item?.resData?.name?item?.resData?.name:'') +
index +
"." +
nameTail,
};
img.push(data);
index++;
}
num++
}
}
// 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);
}
this.downImg(img)
// a.setAttribute('href', URL.createObjectURL(blob));
// a.setAttribute('download', `collection.png`);
// a.click();
})
};
xmlhttp.send();
});
},
downImg(imagesParams:any) {
let _this:any = this;