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
2025-04-01 15:25:15 +08:00
parent 70ed89049a
commit b6e5f05f06
101 changed files with 11533 additions and 1015 deletions
Download Patch File Download Diff File Expand all files Collapse all files

180
src/component/Canvas/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="generalCanvas">
<div class="argument-box">
<argument ref="argument" v-if="canvasObj.canvas"></argument>
<argument ref="argument" v-if="canvasObj.canvas" :elementList="elementList"></argument>
</div>
<div class="canvasBox">
<tool ref="tool" v-if="canvasObj.canvas" @toolLiquefaction="toolLiquefaction"></tool>
@@ -15,11 +15,16 @@
<div class="mark_loading" v-show="isShowMark">
<a-spin size="large" />
</div>
<div style="display: flex; justify-content: center; margin-top: 2rem;">
<div class="gallery_btn" style="margin: 0 2rem;" @click="setShare">{{ $t('exportModel.Share') }}</div>
<div class="gallery_btn" style="margin: 0 2rem;" @click="setExport">{{ $t('exportModel.Export') }}</div>
</div>
<liquefaction ref="liquefaction" @submitLiquefaction="submitLiquefaction"></liquefaction>
<!-- <publish ref="publish" @clearPublish="()=>{}"></publish> -->
</div>
<liquefaction ref="liquefaction" @submitLiquefaction="submitLiquefaction"></liquefaction>
</template>
<script>
import {defineComponent, computed, provide, h, ref, nextTick, onBeforeUnmount, reactive, onMounted,
import {defineComponent, computed, provide, h, ref, nextTick, onBeforeUnmount, reactive, onMounted, toRefs,
} from "vue";
import {message} from 'ant-design-vue'
import { Https } from "@/tool/https";
@@ -32,6 +37,8 @@ import detail from "./detail.vue"
import canvasContent from "./canvasContent.vue"
import liquefaction from "@/component/modules/liquefaction.vue";
import JSZip, { forEach } from "jszip";
import publish from "@/component/WorksPage/publish.vue";
export default defineComponent({
components: {
@@ -39,26 +46,34 @@ export default defineComponent({
argument,
detail,
canvasContent,
liquefaction,
liquefaction,publish
},
setup(props,{emit}) {
const { t } = useI18n();
const store = useStore();
const isShowMark = ref(false)
const component = reactive({
argument:ref(null),tool:ref(null),detail:ref(null),canvasContent:ref(null)
})
let liquefaction = ref(null)
let liquefactionData = ref()
let groupDashed = ref(null)//用来判断是否需要对group添加img
let canvasType = 'export'
let canvasObj = reactive(new canvasGeneral())
let canvasObj = reactive(new canvasGeneral('export'))
const dataDom = reactive({
argument:null,
canvasContent:null,
tool:null,
detail:null,
publish:null,
})
let data = reactive({
elementList:null,
showCanvas:false,
})
provide('canvasType',canvasType)
provide('canvasObj',canvasObj)
provide('isShowMark',isShowMark)
const close = ()=>{
component.forEach((item)=>{
if(item.value.closeModal)item.value.closeModal()
dataDom.forEach((item)=>{
if(item.closeModal)item.closeModal()
})
}
@@ -100,6 +115,140 @@ export default defineComponent({
// canvasObj.updateCanvasState()
// });
}
const getCanvasData = ()=>{
if(!canvasObj.canvas)return
var json = canvasObj.canvas.toJSON(['src','minioUrl','custom','perPixelTargetFind','hasBorders','selectable','hasControls','erasable']);
// console.log(JSON.stringify(json));
json.objects.forEach(item=>{
if(item.type == 'image'){
delete item.src
}
})
let canvasExport = {
canvas:json,
groupList: canvasObj.layer.list
}
return canvasExport
}
const openSetData = async ()=>{
let arr = store.state.Workspace.projectList
let obj = {}
for (let index = 0; index < arr.length; index++) {
const item = arr[index];
await new Promise((resolve, reject) => {
store.dispatch('getProjectCanvasData',item.value).then((value)=>{
const keys = Object.keys(value)[0];
if(!value[keys] || value[keys].length == 0){
resolve('')
return
}
let rv = {
list:value[keys],
name:item.name,
}
obj[keys] = rv
resolve('')
})
})
}
data.elementList = obj
if(data.showCanvas)return
data.showCanvas = true
dataDom.canvasContent.openSetData()
}
let setShare = async ()=>{
dataDom.publish.publishMask = true
canvasObj.detailSubmit().then((img)=>{
let data = {
"imgUrl":img,
userlikeGroupId:store.state.Workspace.probjects.id,
}
dataDom.publish.init(data)
})
}
//设置导出
let setExport = async () => {
var imageDataURL = await canvasObj.detailSubmit()
let a = document.createElement("a");
let img = [];
let index = 0;
img.push({
imgUrl: imageDataURL,
name: "collection.png",
});
let num = 0;
console.log(data.elementList)
for (let key in data.elementList) {
for (let index = 0; index < data.elementList[key].list.length; index++) {
const item = data.elementList[key].list[index];
let url = item.imgUrl || item.url || item.designOutfitUrl || item.minioUrl
let name = url?.split(".").pop().split("?").shift();
img.push({imgUrl:url,name:`element${index}.${name}`})
}
}
console.log(img)
downImg(img);
};
let getImgArrayBuffer = (url) => {
return new Promise((resolve, reject) => {
//通过请求获取文件blob格式
let xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", url, true);
xmlhttp.responseType = "blob";
xmlhttp.withCredentials = false;
xmlhttp.onload = function () {
if (this.status == 200) {
resolve(this.response);
} else {
reject(this.status);
}
};
xmlhttp.send();
});
};
let downImg = (imagesParams) => {
let zip = new JSZip();
let cache = {};
let promises = [];
for (let item of imagesParams) {
const promise = getImgArrayBuffer(item.imgUrl).then((data) => {
// 下载文件, 并存成ArrayBuffer对象(blob)
zip.file(item.name, data, { binary: true }); // 逐个添加文件
cache[item.title] = data;
})
promises.push(promise);
}
Promise.all(promises)
.then(() => {
function downloadBlob(blob, filename) {
const link = document.createElement('a');
const url = URL.createObjectURL(blob);
link.href = url;
link.download = filename;
document.body.appendChild(link);
link.click();
URL.revokeObjectURL(url);
document.body.removeChild(link);
}
zip.generateAsync({ type: "blob" }).then((content) => {
// 生成二进制流
downloadBlob(content,'DesignFiles')
// FileSaver.saveAs(content, "DesignFiles"); // 利用file-saver保存文件 自定义文件名
isShowMark.value = false;
});
setSubmit()//导出的时候保存
initAligningGuidelines(canvas,true)
})
.catch((res) => {
// message.warning(t('HomeView.jsContent3'));
isShowMark.value = false;
initAligningGuidelines(canvas,true)
});
};
onMounted(() => {
});
onBeforeUnmount(()=>{
@@ -108,11 +257,17 @@ export default defineComponent({
return {
isShowMark,
liquefaction,
...toRefs(dataDom),
...toRefs(data),
canvasObj,
close,
expoet,
toolLiquefaction,
submitLiquefaction,
getCanvasData,
openSetData,
setShare,
setExport,
};
},
data(prop) {
@@ -145,14 +300,15 @@ export default defineComponent({
:deep(i){
font-size: 2.5rem;
cursor: pointer;
width: 3rem;
height: 3rem;
width: 5rem;
height: 5rem;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all .3s;
margin-bottom: .5rem;
padding: 1rem;
&.active{
border: 1px solid;
border-radius: .4rem;