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

push Develop

Browse Source
This commit is contained in:
X1627315083
2024-06-17 09:39:01 +08:00
parent c93483e36f
commit 363b880276
55 changed files with 5880 additions and 1359 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/component/HomePage/ColorboardUpload.vue
View File

@@ -486,6 +486,7 @@ export default defineComponent({
driverObj__.moveNext()
}
})
img.remove()
};
},100)
@@ -519,7 +520,7 @@ export default defineComponent({
if (!isJpgOrPng) {
message.info(this.t('ColorboardUpload.jsContent3'));
}
const isLt2M = file.size / 1024 / 1024 < 3;
const isLt2M = file.size / 1024 / 1024 < 5;
if (!isLt2M) {
message.info(this.t('ColorboardUpload.jsContent4'));
}

552
src/component/HomePage/ExportModel.vue
View File

@@ -42,7 +42,7 @@
>
</div>
</div>
<div class="exportCanvasBox_img exportCanvasBox_left_item" :class="{'closeNav' :closeNav.nav}">
<div class="exportCanvasBox_img exportCanvasBox_left_item" :class="{'closeNav':closeNav.nav}">
<div
class="exportCanvasBox_allItem"
v-for="(item,key) in allBoardData"
@@ -54,23 +54,26 @@
<div v-if="item[0] && key == 'colorBoards'" class="exportCanvasBox_intro">Color</div>
<div v-if="item[0] && key == 'sketchboardFiles'" class="exportCanvasBox_intro">Sketch</div>
<div v-if="item[0] && key == 'likeDesignCollectionList'" class="exportCanvasBox_intro">Selected Design</div>
<div class="exportCanvasBox_item_color" v-if="key == 'colorBoards'" v-for="colorItem in item" :class="{active:colorItem.checked}" draggable="true" @dragstart="onDragstart(key,colorItem)" @click="isMoible?setDragstart(key,colorItem):''">
<img src="" alt="">
<div class="exportCanvasBox_item_BGcolor" :style="{'background-color': 'rgb('+colorItem.rgbValue.r+','+colorItem.rgbValue.g+','+colorItem.rgbValue.b+')'}"></div>
<div>{{colorItem.tcx}}</div>
<div>{{colorItem.name}}</div>
<div v-if="item[0] && key == 'likePorductImg'" class="exportCanvasBox_intro">Selected Product</div>
<div class="exportCanvasBox_item_color" v-if="key == 'colorBoards'" v-for="colorItem in item" :class="{active:colorItem.upScaleChecked}" draggable="true" @dragstart="onDragstart(key,colorItem)" @click="isMoible?setDragstart(key,colorItem):''">
<div class="color_content" v-if="colorItem.gradient" :style="{height:'10rem','background-image':colorItem?.gradient?`linear-gradient(${colorItem?.gradient.angle}deg,${setGradient(colorItem?.gradient)}`:'none'}"></div>
<div v-if="!colorItem.gradient">
<div class="exportCanvasBox_item_BGcolor" :style="{'background-color': 'rgb('+colorItem.rgbValue.r+','+colorItem.rgbValue.g+','+colorItem.rgbValue.b+')'}"></div>
<div>{{colorItem.tcx}}</div>
<div>{{colorItem.name}}</div>
</div>
</div>
<div
class="exportCanvasBox_item"
v-for="imgItem in item"
:class="[key == 'disposeMoodboard'?'exportCanvasBox_item_dispose':'',imgItem?.checked?'active':'']"
:class="[key == 'disposeMoodboard'?'exportCanvasBox_item_dispose':'',imgItem?.upScaleChecked?'active':'']"
draggable
@dragstart="onDragstart(key,imgItem)"
@click="isMoible?setDragstart(key,imgItem):''"
>
<div class="exportCanvasBox_img">
<!-- <div v-if="key == 'likeDesignCollectionList'">{{ imgItem.designOutfitUrl }}</div> -->
<img :src="key == 'likeDesignCollectionList'?imgItem?.designOutfitUrl:imgItem?.imgUrl" alt="" />
</div>
</div>
@@ -192,6 +195,8 @@
</div>
<div class="exportCanvasBox_left_btn">
<div class="subitOkPreviewBtn" :class="{active:allBoardData.printboardFiles.length<=0}" :title="allBoardData.printboardFiles.length<=0?$t('exportModel.jsContent2'):''" @click="setHDExport">{{ $t('exportModel.HDExport') }}</div>
<div class="subitOkPreviewBtn" @click="setSubmit">Save</div>
<div class="subitOkPreviewBtn" @click="setShare">Share</div>
<div class="subitOkPreviewBtn Guide_1_32" @click="setExport">{{ $t('exportModel.Export') }}</div>
</div>
</div>
@@ -273,6 +278,7 @@
<div class="generalModelOperate_btn_ok" :class="[credits < (allExportSR.filter(item=> item.checked ).length*5)?'active':'']" @click="setExportSR">OK</div>
</div>
</a-modal>
<publish ref="publish"></publish>
</a-modal>
</template>
<script>
@@ -289,14 +295,16 @@ import { message, Modal } from "ant-design-vue";
import domTurnImg from '@/tool/domTurnImg'
import { openGuide,driverObj__ } from "@/tool/guide";
const FileSaver = require("file-saver");
import { exportSele,JSRectUpdata,JSchangeType,JScanvasMouseDown,JScanvasMouseMove,JScreateCheck,JSSetTexture } from "@/tool/canvasDrawing";
import { exportSele,JSRectUpdata,JSchangeType,JScanvasMouseDown,JScanvasMouseMove,JScreateCheck,JSSetTexture,JSSetRemoveImage } from "@/tool/canvasDrawing";
import { useI18n } from "vue-i18n";
import {isMoible} from '@/tool/util'
import {isMoible,calculateGradientCoordinate,base64ToFile} from '@/tool/util'
import publish from "@/component/WorksPage/publish.vue";
export default defineComponent({
components: {
scaleImage,
ExportNewCoolection,
publish,
},
props: ["msg", "sketchCatecoryList"],
setup(props,{emit}) {
@@ -314,6 +322,7 @@ export default defineComponent({
height: 100,
});
let publish = ref()
// canvasWH.value.width = [window.innerWidth/2.4]
// canvasWH.value.width = canvasWH.value.width.map(num => Math.round(num / 100) * 100)[0];
let credits = computed(() => {
@@ -326,7 +335,7 @@ export default defineComponent({
let likeDesignCollectionList = computed(() => {
return store.state.HomeStoreModule.likeDesignCollectionList;
});
let isShowMark = false;
let isShowMark = ref(false);
// let allImage = Object.assign(allBoardData.value,{likeDesignCollectionList:likeDesignCollectionList.value})
let position = {
//设置每个图形位置的初始值
@@ -343,15 +352,19 @@ export default defineComponent({
let reverseCanvasState = ref([])//存放canvas操作
let normalCanvasState = ref([])//存放canvas操作
let isLoadCanvas = false//撤回或者反撤回false为撤回
let init = () => {
let userlikeGroupId = 0
let beenPublished = 0
let init = (productData) => {
beenPublished = productData.beenPublished
userlikeGroupId = productData.userlikeGroupId
canvasWH.value.height = 100
normalCanvasState.value = []
reverseCanvasState.value = []
showUpgradePlan.value = true;
allBoardData.value.likeDesignCollectionList =
likeDesignCollectionList;
allBoardData.value[productData.key] = productData.imgList;
nextTick().then(async () => {
let exportCanvasBoxCanvas = document.querySelector('.exportCanvasBox_center')
canvasWH.value.width = exportCanvasBoxCanvas.offsetWidth - 10
@@ -369,7 +382,12 @@ export default defineComponent({
});
brushIndicator = clearBrushIndicator()
canvasOnDrop()//开启鼠标到画布事件
setRemoveImage()//设置元素删除
if(!fabric.Object.prototype.controls.deleteControl){//设置元素删除
JSSetRemoveImage(deleteObject)
}else{
fabric.Object.prototype.controls.deleteControl.mouseUpHandler = deleteObject
}
// setRemoveImage()//设置元素删除
canvas.on("object:modified", ()=>{
updateCanvasState()
});
@@ -411,117 +429,138 @@ export default defineComponent({
"colorBoards",
"sketchboardFiles",
"likeDesignCollectionList",
productData.key,
];
let oldKey = "";
let margin = 20; //每个图形边距
let maxHeight = 0
let sketchXy = {x:0,y:0}
let data = {
userLikeGroupId:userlikeGroupId
}
isShowMark.value = true
let oldExportCanvas = await new Promise((resolve, reject) => {
Https.axiosPost(Https.httpUrls.exportSearch, data)
.then((rv) => {
resolve(rv)
isShowMark.value = false
})
.catch((rv) => {
resolve(null)
isShowMark.value = false
});
})
// arr.forEach((item,index)=>{
for (const item of arr) {
for (const key in allBoardData.value) {
if (item == key) {
//循环渲染顺序
let imgWidth = setImageWidth(key); //这是设置画布等宽
let sketchGroupingItem = [];
if (
item == "moodboardFiles" &&
!disposeMoodboardShow
) {
continue;
}
for (const [allItemIndex, allItem,] of allBoardData.value[key].entries()) {
await new Promise((resolve, reject) => {
if(!allItem){
resolve()
}
maxHeight = position.y + position.height>maxHeight?position.y +position.height:maxHeight
if (key == "colorBoards") {
let rect = setGroup(allItem)
if (position.x + rect.width > canvasWH.value.width || oldKey != key) {
position.x = 0;
position.y = maxHeight;
if(oldExportCanvas){
canvasWH.value.height = oldExportCanvas.canvasHeight
canvas.setHeight(canvasWH.value.height);
canvas.loadFromJSON(oldExportCanvas, () => {});
}else{
for (const item of arr) {
for (const key in allBoardData.value) {
if (item == key) {
//循环渲染顺序
let imgWidth = setImageWidth(key); //这是设置画布等宽
let sketchGroupingItem = [];
if (
item == "moodboardFiles" &&
!disposeMoodboardShow
) {
continue;
}
for (const [allItemIndex, allItem,] of allBoardData.value[key].entries()) {
await new Promise((resolve, reject) => {
if(!allItem){
resolve()
}
let group = setCanvasColor(position.y,position.x,rect)
oldKey = key;
position.x += rect.width + margin;
position.height = group.height + margin;
resolve();
} else {
let itemCanvasImg = allItem.imgUrl;
if (key == "likeDesignCollectionList") {
itemCanvasImg =
allItem.designOutfitUrl;
}
fabric.Image.fromURL(itemCanvasImg,(img) => {
let scaleWH = imgWidth / img.width; //计算放到画布上缩小倍率
if(key == "sketchboardFiles"){
if(allItemIndex == 0){
position.x = 0;
position.y = maxHeight;
}
}else{
if (position.x + img.width * scaleWH > canvasWH.value.width || oldKey != key) {
position.x = 0;
position.y = maxHeight;
}
maxHeight = position.y + position.height>maxHeight?position.y +position.height:maxHeight
if (key == "colorBoards") {
let rect = setGroup(allItem)
if (position.x + rect.width > canvasWH.value.width || oldKey != key) {
position.x = 0;
position.y = maxHeight;
}
console.log(allItem,key);
setCanvasImage(img,key,position.x,position.y,allItem)//设置图片
position.height = img.height * scaleWH + margin;
if (key == "sketchboardFiles") {
if (sketchGroupingItem.length <3) {
sketchGroupingItem.push(JSON.parse(JSON.stringify(position)));
}
if (sketchGroupingItem.length >2) {
let sketchXyIndex = {
maxIndex: 0,
maxNum: 0,
minNum: 999999,
minIndex: 0,
};
sketchGroupingItem.forEach(
(sketchItem,sketchIndex) => {
if (sketchItem.y + sketchItem.height < sketchXyIndex.minNum) {
// console.log(sketchItem.x,sketchItem.y);
sketchXyIndex.minNum = sketchItem.y + sketchItem.height
sketchXyIndex.minIndex = sketchIndex;
}
if (sketchItem.y + sketchItem.height > sketchXyIndex.maxNum) {
sketchXyIndex.maxNum = sketchItem.y + sketchItem.height
sketchXyIndex.maxIndex = sketchIndex;
}
}
);
sketchGroupingItem[sketchXyIndex.minIndex].y = sketchXyIndex.minNum
// sketchGroupingItem[sketchXyIndex.maxIndex].y = sketchXyIndex.maxNum
if (allBoardData.value[key].length == allItemIndex + 1) {
maxHeight = sketchXyIndex.maxNum
} else {
position = sketchGroupingItem[sketchXyIndex.minIndex];
let group = setCanvasColor(position.y,position.x,rect)
oldKey = key;
position.x += rect.width + margin;
position.height = group.height + margin;
resolve();
} else {
let itemCanvasImg = allItem.imgUrl;
if (key == "likeDesignCollectionList") {
itemCanvasImg =
allItem.designOutfitUrl;
}
fabric.Image.fromURL(itemCanvasImg,(img) => {
let scaleWH = imgWidth / img.width; //计算放到画布上缩小倍率
if(key == "sketchboardFiles"){
if(allItemIndex == 0){
position.x = 0;
position.y = maxHeight;
}
}else{
if (position.x + img.width * scaleWH > canvasWH.value.width || oldKey != key) {
position.x = 0;
position.y = maxHeight;
}
}
}
if(key == "sketchboardFiles" && sketchGroupingItem.length >2){
}else{
position.x += img.width * scaleWH + margin;
}
img.lock_rotation = true;
canvas.add(img);
oldKey = key;
// setTimeout(() => {
resolve()
// }, 1000);
},{ crossOrigin: "Anonymous" });
}
});
}
}
}
if(position.y+position.height>canvasWH.value.height){
canvasWH.value.height = Math.floor(position.y+position.height)
canvas.setHeight(canvasWH.value.height);
setCanvasImage(img,key,position.x,position.y,allItem)//设置图片
position.height = img.height * scaleWH + margin;
if (key == "sketchboardFiles") {
if (sketchGroupingItem.length <3) {
sketchGroupingItem.push(JSON.parse(JSON.stringify(position)));
}
if (sketchGroupingItem.length >2) {
let sketchXyIndex = {
maxIndex: 0,
maxNum: 0,
minNum: 999999,
minIndex: 0,
};
sketchGroupingItem.forEach(
(sketchItem,sketchIndex) => {
if (sketchItem.y + sketchItem.height < sketchXyIndex.minNum) {
sketchXyIndex.minNum = sketchItem.y + sketchItem.height
sketchXyIndex.minIndex = sketchIndex;
}
if (sketchItem.y + sketchItem.height > sketchXyIndex.maxNum) {
sketchXyIndex.maxNum = sketchItem.y + sketchItem.height
sketchXyIndex.maxIndex = sketchIndex;
}
}
);
sketchGroupingItem[sketchXyIndex.minIndex].y = sketchXyIndex.minNum
// sketchGroupingItem[sketchXyIndex.maxIndex].y = sketchXyIndex.maxNum
if (allBoardData.value[key].length == allItemIndex + 1) {
maxHeight = sketchXyIndex.maxNum
} else {
position = sketchGroupingItem[sketchXyIndex.minIndex];
}
}
}
if(key == "sketchboardFiles" && sketchGroupingItem.length >2){
}else{
position.x += img.width * scaleWH + margin;
}
img.lock_rotation = true;
canvas.add(img);
oldKey = key;
// setTimeout(() => {
resolve()
// }, 1000);
},{ crossOrigin: "Anonymous" });
}
});
}
}
}
if(position.y+position.height>canvasWH.value.height){
canvasWH.value.height = Math.floor(position.y+position.height)
canvas.setHeight(canvasWH.value.height);
}
}
}
}
updateCanvasState('')//加载完成后记录一下
if(driver__.value.driver){
driverObj__.moveNext()
@@ -554,34 +593,7 @@ export default defineComponent({
// canvas.renderAll(); // 重新渲染 Canvas
updateCanvasState('remove')
}
let setRemoveImage = ()=>{
const deleteIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAACxAAAAsQHGLUmNAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAdBJREFUSImt1r1uU0EQBeDPFh1pgBQEEwFVAg9BROhCAh1FAg1gkMA8DA0oKOEB3IEIRQgF4SEQBIUC6ENSGgPFXaPx+udeSxxppPXOzJnZ8e7MrRmPWdzANZxPv+EbvmILL/G9hGcADayjgz8l0kUb56qSX8dhBeJcDrFSRv44ZRQdt3EPczieZB5NvB1ymta4zCP5J1yucOIFfM6CDJykob8s73GiAnkPJ7Eb/H9iJhpsZJlPQh6D7AWe9Z5iFr+CIpalhjWspnXZ/pXA01FURkv/HxpxK+g2UE+yGfZXM5+doHt4DEtB2R5dAXdD9nfG2LVxNa2XKGreiziXGefZ5rKZbCLmg/4jHIWNqSEZ1fC0IrnE0bM5qqdFGWoV92RBf/P/S3RRVqI3YaOZGd8eQpgHXMt8HgTd67qi5fZwMzOO5XuREmim9ShEji04q78tLwSDSR/aYuD599DgeVDsY3pMhqOQt4pnUXlGf7PbTQ5VcQofgv8BTudGK/rb9Z6it5RhEV+CX1cxYoeiZXDg7OC+4vpNJbmkuC3vMtsuHpVltKzo55OOzINxmeeYxhPVhn5H0ftnhhGNeu49NBSjdBkX9H+27Cvu+Sv8GEXwF9+O3b1zwZqdAAAAAElFTkSuQmCC"
// 创建删除图片元素
let deleteImg = document.createElement('img')
deleteImg.src = deleteIcon
function renderIcon(icon) {
return function (ctx, left, top, styleOverride, fabricObject) {
var size = this.cornerSize;
ctx.save();
ctx.translate(left, top);
ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
ctx.drawImage(icon, -size/3, -size/3, size/1.5, size/1.5);
ctx.restore();
}
}
// 删除按钮控件
fabric.Object.prototype.controls.deleteControl = new fabric.Control({
x: 0.5,
y: -0.5,
offsetY: -16,
offsetX: 16,
cursorStyle: 'pointer',
mouseUpHandler: deleteObject,
render: renderIcon(deleteImg),
cornerSize: 24
})
}
let setImageWidth = (key)=>{
let imgWidth = canvasWH.value.width; //这是设置画布等宽
@@ -594,7 +606,9 @@ export default defineComponent({
//如果是mood 需要判断用户是否点击layout
disposeMoodboardShow = false;
}
if(key == 'upImgFiles'){
imgWidth = canvasWH.value.width / 4;
}
if (key == "printboardFiles") {
imgWidth = canvasWH.value.width / 8;
}
@@ -604,7 +618,7 @@ export default defineComponent({
(sketchGrouping - 1) * 20) /
sketchGrouping;
}
if (key == "likeDesignCollectionList") {
if (key == "likeDesignCollectionList" || key == 'likePorductImg') {
imgWidth =
(canvasWH.value.width -
(likeDesign - 1) * 20) /
@@ -614,23 +628,24 @@ export default defineComponent({
}
let setCanvasImage = (img,key,left,top,data)=>{
// data
console.log(data);
let imgId = 0
let designType = ''//表示收藏或者generate
let level1Type = ''//表示sketch或者print
if(key == 'disposeMoodboard'){
imgId = data.id
}else if(key == 'moodboardFiles'){
}else if(key == 'sketchboardFiles'){
}else if(key == 'printboardFiles'){
}else if(key == 'likeDesignCollectionList'){
let minioUrl = ''//表示收藏或者generate
if(key == 'likeDesignCollectionList'){
imgId = data.designOutfitId
minioUrl = data.url
}else if(key == 'upImgFiles'){
imgId = data
minioUrl = data.url
}else if(key == 'likePorductImg'){
imgId = data.id
}else if(key == 'disposeMoodboard'){
let url = data.imgUrl.split('?')[0]
var match = url.match(/:(\d+)\/(.*)/);
minioUrl = match[2]
console.log(match[2]);
// data.imgUrl
}else{
minioUrl = data.minIOPath?data.minIOPath:data.resData.minIOPath
}
// let id =
let proportion = img.height / img.width; //计算图形宽高比例
@@ -641,6 +656,8 @@ export default defineComponent({
// height: canvasWH.value.height/img.height,
left,
top,
imgId,
minioUrl,
scaleX:
imgWidth / img.width,
scaleY:(img.width * proportion * scaleWH) / img.height,
@@ -684,6 +701,10 @@ export default defineComponent({
if (key == "likeDesignCollectionList") {
data.imgUrl = item.designOutfitUrl;
data.name = "result" + index + "." + data.imgUrl.split(".").pop().split("?").shift();;
}
if (key == "likePorductImg") {
data.imgUrl = item.designOutfitUrl;
data.name = "porduct" + index + "." + data.imgUrl.split(".").pop().split("?").shift();;
}
img.push(data);
index++;
@@ -746,17 +767,18 @@ export default defineComponent({
zip.generateAsync({ type: "blob" }).then((content) => {
// 生成二进制流
FileSaver.saveAs(content, "DesignFiles"); // 利用file-saver保存文件 自定义文件名
isShowMark = false;
isShowMark.value = false;
});
if(driver__.value.driver){
driverObj__.moveNext()
}
setSubmit()//导出的时候保存
initAligningGuidelines(canvas,true)
})
.catch((res) => {
// message.warning(t('HomeView.jsContent3'));
isShowMark = false;
isShowMark.value = false;
initAligningGuidelines(canvas,true)
});
};
@@ -781,7 +803,7 @@ export default defineComponent({
operation.value = 'fill'
},
// onCancel(){
// _this.isShowMark = false
// _this.isShowMark.value = false
// resolve(false)
// }
});
@@ -842,11 +864,11 @@ export default defineComponent({
let present = {}
let setDragstart = (type,imgItem)=>{
currentType.value.type = type
present.checked = false
present.upScaleChecked = false
present = {}
if(imgItem.checked){
if(imgItem.upScaleChecked){
}else{
imgItem.checked = true
imgItem.upScaleChecked = true
present = imgItem
}
currentType.value.data = imgItem
@@ -881,34 +903,82 @@ export default defineComponent({
})
}
let setGroup = (data)=>{
var text = new fabric.Text(data.tcx,{
left: 0,
top: 60,
fontSize: 14,
fontFamily: "Arial",
textAlign: "left",
fill: "black",
});
let text1 = new fabric.Text(data.name,{
left: 0,
top: 80,
width: 20,
fontSize: 14,
fontFamily: "Arial",
textAlign: "left",
});
let width = 110 > text1.width ? 110 : text1.width;
var color = new fabric.Rect({
width: width,
height: 60,
textAlign: "left",
fill: `rgb(${data.rgbValue.r},${data.rgbValue.g},${data.rgbValue.b})`,
});
let rect = {text,text1,color,width}
let rect
if(data.gradient){
let colorStops = []
data.gradient.gradientList.forEach(item=>{
let obj = {
offset:item.left.split('%')[0]/100,
color:`rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a})`
}
colorStops.push(obj)
})
let { x0, y0, x1, y1 } = calculateGradientCoordinate(100,120,data.gradient.angle)
let linear = new fabric.Gradient({
type: 'linear', // 线性渐变
// coords: { x1: 0, y1: 0, x2: 200, y2: 0 }, // 渐变方向
coords: { x1:x0, y1:y0, x2:x1, y2:y1 }, // 渐变方向
colorStops: colorStops,
})
var color = new fabric.Rect({
top:0,
left:0,
width: 110,
height: 130,
textAlign: "left",
fill: linear // 设置渐变填充
// fill: `rgb(${data.rgbValue.r},${data.rgbValue.g},${data.rgbValue.b})`,
});
var text = new fabric.Text('',{
left: 0,
top: 0,
fontSize: 0,
fontFamily: "Arial",
textAlign: "left",
fill: "black",
});
let text1 = new fabric.Text('',{
left: 0,
top: 0,
width: 20,
fontSize: 0,
fontFamily: "Arial",
textAlign: "left",
});
rect = {text,text1,color,width:110}
}else{
var text = new fabric.Text(data.tcx,{
left: 0,
top: 60,
fontSize: 14,
fontFamily: "Arial",
textAlign: "left",
fill: "black",
});
let text1 = new fabric.Text(data.name,{
left: 0,
top: 80,
width: 20,
fontSize: 14,
fontFamily: "Arial",
textAlign: "left",
});
let width = 110 > text1.width ? 110 : text1.width;
var color = new fabric.Rect({
width: width,
height: 60,
textAlign: "left",
fill: `rgb(${data.rgbValue.r},${data.rgbValue.g},${data.rgbValue.b})`,
});
rect = {text,text1,color,width}
}
return rect
}
let setCanvasColor = (top,left,rect)=>{
var group = new fabric.Group([rect.color, rect.text, rect.text1],{
let group
group = new fabric.Group([rect.color,rect.text,rect.text1],{
left,
top,
width: rect.width,
@@ -922,12 +992,13 @@ export default defineComponent({
// 创建矩形
let createImage = async (top, left,key)=> {
let itemCanvasImg = currentType.value.data.imgUrl
let data = JSON.parse(JSON.stringify(currentType.value.data))
if(key == 'likeDesignCollectionList'){
itemCanvasImg = currentType.value.data.designOutfitUrl;
}
await new Promise((resolve,reject)=>{
fabric.Image.fromURL(itemCanvasImg,(img) => {
setCanvasImage(img,key,left,top)//设置图片
setCanvasImage(img,key,left,top,data)//设置图片
canvas.add(img);
resolve()
},{ crossOrigin: "Anonymous" });
@@ -937,10 +1008,6 @@ export default defineComponent({
//设置画布监听修改添加事件，用来做撤回功能
let updateCanvasState = (str) =>{
const canvasAsJson = JSON.stringify(canvas.toJSON());
console.log(canvas.toJSON());
var json = canvas.toJSON(['aaaID']);
const d = canvas.toObject(['myFabricType1', 'myFabricType2'])
console.log(json,d);
if(str == 'loadingCompleted'){
// reverseCanvasState.value.push(canvasAsJson);
}
@@ -1030,7 +1097,6 @@ export default defineComponent({
// 检查是否鼠标离开了画布
// if (x < 0 || x > canvas.width || y < 0 || y > canvas.height) {
// // 执行你的操作
// console.log('鼠标离开了画布');
// }
// if(!x || !y){
// document.removeEventListener('keydown',canvasKeyDown);
@@ -1152,10 +1218,16 @@ export default defineComponent({
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
fabric.Image.fromURL(e.target.result,(img) => {
setCanvasImage(img,"upImgFiles",0,canvas.wrapperEl.parentNode.scrollTop,e.target.result)
canvas.add(img);
},{ crossOrigin: "Anonymous" })
let file = base64ToFile(e.target.result,'upload')
let formData = new FormData();
formData.append("file", file);
let config = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
Https.axiosPost(Https.httpUrls.canvasElementUpload, formData,config).then((rv)=>{
fabric.Image.fromURL(rv.minioUrl,(img) => {
setCanvasImage(img,"upImgFiles",0,canvas.wrapperEl.parentNode.scrollTop,rv)
canvas.add(img);
},{ crossOrigin: "Anonymous" })
})
input.value = ''
};
reader.readAsDataURL(file);
@@ -1413,8 +1485,8 @@ export default defineComponent({
let setCanvasDown = (event)=>{
// brushIndicator.set({fill: '#FFF',strokeWidth:0});
//设置移动端按下添加元素
if(isMoible && present.checked){
present.checked = false
if(isMoible && present.upScaleChecked){
present.upScaleChecked = false
present = {}
let pointerVpt = canvas.restorePointerVpt(event.pointer)
switch (currentType.value.type) {
@@ -1597,7 +1669,7 @@ export default defineComponent({
// });
// },
// // onCancel(){
// // _this.isShowMark = false
// // _this.isShowMark.value = false
// // resolve(false)
// // }
// });
@@ -1656,6 +1728,7 @@ export default defineComponent({
if(img.width*scaleSR.value>2048 || img.height*scaleSR.value>2048){
arr.push(index)
}
img.remove()
resolve(img)
}
img.src = item.imgUrl
@@ -1688,9 +1761,47 @@ export default defineComponent({
});
}
let toSvg = ()=>{
// console.log(canvas.toSvg());
}
let setShare = ()=>{
initAligningGuidelines(canvas,false)
let publishModal = publish.value
publishModal.publishMask = true
var imageDataURL = canvas.toDataURL({
format: "jpeg", // 导出格式为 PNG
quality: 1, // 图片质量为 1（最高质量）
});
let data = {
"imgUrl":imageDataURL,
userlikeGroupId:userlikeGroupId,
beenPublished
}
publishModal.init(data)
}
let setSubmit = ()=>{
let data = setCanvasContent()
data.canvasHeight = canvasWH.value.height
let blob = new Blob([JSON.stringify(data)], { type: "application/json" });
let formData = new FormData();
formData.append("file", blob, "data.json");
formData.append('userLikeGroupId', userlikeGroupId);
let config = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
Https.axiosPost(Https.httpUrls.exportSave, formData,config).then((rv)=>{
message.success('save successfully')
})
}
let setCanvasContent = ()=>{
var json = canvas.toJSON(['imgId','minioUrl']);
// console.log(JSON.stringify(json));
json.objects.forEach(item=>{
if(item.type == 'image'){
delete item.src
}
})
return json
}
onMounted(() => {});
return {
toSvg,
@@ -1698,6 +1809,7 @@ export default defineComponent({
toSvg,
showUpgradePlan,//当前弹窗是否打开
canvasWH,//画布初始宽高
publish,//发布作品广场
credits,//积分 用来判断HD导出积分是否够用
init,//首页点击导出后初始化
setExport,//导出所有内容
@@ -1740,6 +1852,8 @@ export default defineComponent({
selectAllImg,//控制全选
selectImg,//选中单个图片
setExportSR,//设置SR导出
setShare,
setSubmit,
};
},
data(prop) {
@@ -1747,6 +1861,26 @@ export default defineComponent({
isMoible:isMoible()
};
},
computed: {
setGradient(){
return (gradient)=>{
let gradientStr = ''
gradient.gradientList.sort((a, b) => {
let aArr = a.left.split('%')[0]
let bArr = b.left.split('%')[0]
return aArr - bArr;
});
gradient.gradientList.forEach((item,index)=>{
let str = ','
if(gradient.gradientList.length == index+1)str = ''
gradientStr += `rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a}) ${item.left}${str}`
})
return `${gradientStr}`
}
}
},
watch: {
'canvasWH.height':{
handler(newVal,oldVal){
@@ -1766,7 +1900,6 @@ export default defineComponent({
let mousedown = (event)=>{//按下
// console.log(event.target.getBoundingClientRect());
let position = {
y:event.touches[0].screenY,
top : scrollBox.style.marginTop?scrollBox.style.marginTop.split('px')[0]*1:0
@@ -1777,7 +1910,6 @@ export default defineComponent({
let offsetTop = position.top+e.touches[0].screenY - position.y
offsetTop = offsetTop <= 0? 0 : offsetTop
offsetTop = height+offsetTop >= canvasBox.offsetHeight? canvasBox.offsetHeight - height : offsetTop
console.log();
scrollBox.style.marginTop = offsetTop+'px'
canvasBox.scroll({
top: offsetTop*scale, // 纵向滚动距离
@@ -1897,14 +2029,24 @@ export default defineComponent({
display: flex;
justify-content: space-between;
padding-top: 2rem;
flex-wrap: wrap;
.subitOkPreviewBtn{
position: initial;
transform: none;
margin-bottom: 2rem;
width: 40%;
text-align: center;
&.active{
opacity: .7;
cursor: not-allowed;
}
}
.subitOkPreviewBtn:nth-child(2n){
margin-left: 1rem;
}
.subitOkPreviewBtn:nth-child(3),.subitOkPreviewBtn:nth-child(4){
margin-bottom: 0;
}
}
}

1
src/component/HomePage/ExportNewCoolection.vue
View File

@@ -169,6 +169,7 @@ export default defineComponent({
sketch2.num = 1
sketch3.num = 2
resolve()
image.remove()
})
}

52
src/component/HomePage/Generate.vue
View File

@@ -39,6 +39,9 @@
</div>
</div>
</div>
<a-popover title="Seed">
<input class="search_seed" v-show="scene?.value == 'Logo'" @input="ifSeedValue" v-model="searchPictureSeed" type="Number" placeholder='Seed' min="0">
</a-popover>
<input
class="search_input"
@input="ifMaximumLength"
@@ -139,7 +142,7 @@
:class="[item.status != 'Success'?'hideEvents':'',item?.checked?'active':'']"
>
<img v-lazy="item.imgUrl" @click.stop="generageAdd(item)">
<sketchCategory v-if="type_.type2 == 'Sketchboard'" :disignTypeList="sketchCatecoryList" :generateList="fileList" :item="item" :driver__="driver__.driver" :driverClass="{class1: 'Guide_1_13',class2:'Guide_1_13_1'}"></sketchCategory>
<sketchCategory v-if="type_.type2 == 'Sketchboard' || type_.type2 == 'Printboard'" :isSpread="type_.type2 == 'Printboard'" :disignTypeList="sketchCatecoryList" :generateList="fileList" :item="item" :driver__="driver__.driver" :driverClass="{class1: 'Guide_1_13',class2:'Guide_1_13_1'}"></sketchCategory>
<div
class="delete_like_file_block left1"
:class="[driver__.driver?'hideEvents':'',]"
@@ -212,6 +215,7 @@ export default defineComponent({
label:useI18n().t('Generate.Model1')
})
let searchPictureName = ref("");
let searchPictureSeed:any = ref(0);
let store = useStore();
let fileList: any = ref([
@@ -233,9 +237,9 @@ export default defineComponent({
let generateProceedList = ref([])
let remGenerate:any = ref(false)
let remGenerateTime:any = ref()
let scene:any = props.scene
return {
searchPictureName,
searchPictureSeed,
store,
fileList,
sketchboardList,
@@ -243,7 +247,6 @@ export default defineComponent({
printModel,
printModelList,
isGenerate,
scene,
// printBoards,
// moodboarList,
@@ -373,7 +376,7 @@ export default defineComponent({
if (!isJpgOrPng) {
message.info(this.t('Generate.jsContent1'));
}
const isLt2M = file.size / 1024 / 1024 < 2;
const isLt2M = file.size / 1024 / 1024 < 5;
if (!isLt2M) {
message.info(this.t('Generate.jsContent2'));
}
@@ -383,6 +386,7 @@ export default defineComponent({
this.printModel = value
},
getgenerate(){
if(this.isGenerate)return
clearInterval(this.remGenerateTime)
if(this.searchPictureName){
let arr = this.searchPictureName.split(/\s+/).length
@@ -415,7 +419,6 @@ export default defineComponent({
}
if(this.upload.level1Type == "Sketchboard"){
console.log(this.sketchboardList);
}else if(this.upload.level1Type == "Printboard"){
level2Type = this.scene?.value
}
@@ -426,14 +429,18 @@ export default defineComponent({
level1Type:this.upload.level1Type,
level2Type:level2Type,
text:this.searchPictureName,
seed:this.searchPictureSeed,
userId:this?.userInfo?.userId,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
version:1,//为1就是Print
isTestUser:this.driver__.driver?false:this.isTest,
gender:this.workspace.sexEnum.name,
base64:base64,
sloganBase64:base64,
}
this.isGenerate = true
this.remGenerateTime = setTimeout(()=>{
this.remGenerate = true
},10000)
Https.axiosPost(Https.httpUrls.generatePrepare, data).then(
(rv) => {
if(data.isTestUser){
@@ -456,17 +463,21 @@ export default defineComponent({
}
).catch(res=>{
this.isGenerate = false
clearInterval(this.remGenerateTime)
this.remGenerate = false
});
},
setGenerate(dataList:any){
this.remGenerateTime = setTimeout(()=>{
this.remGenerate = true
},10000)
let data = dataList
let dataNum = dataList.length
let state = true
this.generateTime = setInterval(()=>{
if(!state)return
state = false
Https.axiosPost(Https.httpUrls.generateResult, data).then(
(rv) => {
state = true
if(this.isGenerate){//防止取消后有正在执行的获取状态
this.generateProceedList = rv.filter((item:any)=>item.status != 'Success' && item.status != 'Fail' && item.status != 'Invalid')
rv.forEach((element:any) => {
@@ -475,12 +486,14 @@ export default defineComponent({
element.id_ = GO.id++
this.fileList.unshift(element)
data = data.filter((item:any) => item !== element.taskId);
this.sketchCatecoryList.forEach((itemCategory:any) => {
if(itemCategory.value == element.category){
element.categoryValue = itemCategory?.name
element.category = itemCategory?.value
}
});
element.categoryValue = this.scene?.name
element.category = this.scene?.value
// this.sketchCatecoryList.forEach((itemCategory:any) => {
// if(itemCategory.value == element.category){
// element.categoryValue = itemCategory?.name
// element.category = itemCategory?.value
// }
// });
}
});
if((data.length == 0)|| (rv.filter((item:any)=>item.status == 'Invalid').length ==data.length)){
@@ -533,6 +546,11 @@ export default defineComponent({
}
this.searchPictureName += str + value
},
ifSeedValue(e:any){
if(this.searchPictureSeed == ''){
this.searchPictureSeed = 0
}
},
ifMaximumLength(){
clearTimeout(this.inputTime)
let inputBox = document.getElementsByClassName('generate')[0].getElementsByClassName('input_box')[0]
@@ -635,8 +653,6 @@ export default defineComponent({
},
likeFile(item:any,str:string){
if(str == 'like'){
console.log();
let level2Type = ''
if(this.upload.level1Type == "Sketchboard"){
level2Type = item.category
@@ -724,7 +740,7 @@ export default defineComponent({
top: 0;
background: #fff;
padding-bottom: calc(2rem*1.2);
z-index: 2;
z-index: 3;
}
.generate_checkbox {
}

2
src/component/HomePage/MarketingSketchUpload.vue
View File

@@ -129,7 +129,7 @@ export default defineComponent({
if (!isJpgOrPng) {
message.warning(this.t('MarketingSketchUpload.jsContent2'));
}
const isLt2M = file.size / 1024 / 1024 < 2;
const isLt2M = file.size / 1024 / 1024 < 5;
if (!isLt2M) {
message.warning(this.t('MarketingSketchUpload.jsContent3'));
}

66
src/component/HomePage/Material.vue
View File

@@ -8,6 +8,25 @@
:centered="true"
> -->
<div class="my_material_header">
<div class="my_material_header_left" v-if="selectCode != 'Moodboard'">
<div class="select_block">
<a-select
ref="select"
v-model:value="disignType"
:options="disignTypeList"
@change="handleChange"
:fieldNames="{ label: 'name', value: 'value' }"
>
<template #suffixIcon
><span
class="icon iconfont icon-xiala"
style="color: #343579"
></span
></template>
</a-select>
</div>
</div>
<div class="my_material_header_right">
<div class="content_search_block">
<input class="search_input" :placeholder="$t('Material.inputContent1')" v-model="searchPictureName" @keydown.enter="getLibraryList('')">
@@ -21,8 +40,8 @@
<div class="material_content_body scroll_style">
<div v-for="item,index in imgList" :key="item" class="content_img_item" :class="[ item?.checked ? 'active':'' , selectCode == 'Moodboard' ? 'moodb':'' ]" >
<img :src="item?.imgUrl" @click.stop="selectImgItem(item)">
<sketchCategory v-if="selectCode == 'Sketchboard'" :disignTypeList="disignTypeList" :generateList="imgList" :item="item" :isSetSketchCategory="true"></sketchCategory>
<printCategory v-if="selectCode == 'Printboard'" :disignTypeList="disignTypeList" :generateList="imgList" :item="item" :isSetSketchCategory="true"></printCategory>
<sketchCategory v-if="selectCode == 'Sketchboard'" :disignTypeList="disignTypeList" :generateList="imgList" :item="item" :isSetSketchCategory="true" @upTypeSucced='upTypeSucced'></sketchCategory>
<!-- <printCategory v-if="selectCode == 'Printboard'" :disignTypeList="disignTypeList" :generateList="imgList" :item="item" :isSetSketchCategory="true"></printCategory> -->
<!-- <div v-if="selectCode == 'Sketchboard' || selectCode == 'Printboard'" class="pin_block">
<a-checkbox v-model:checked="item.pin">{{ $t('Material.PIN') }}</a-checkbox>
</div> -->
@@ -67,7 +86,6 @@ export default defineComponent({
let pageSize = ref(12)
let total = ref(0)
let searcMaterialhName:any = ref('') //搜索名字
let designType:any = ref(null)
// let disignTypeList:any = ref([
let driver__:any = inject('driver__')
@@ -77,6 +95,11 @@ export default defineComponent({
let {t} = useI18n()
let usGenerateList = ref([])
let disignType = ref({
name:'',
value:''
})
return{
myMaterialModalShow,
imgList,
@@ -88,12 +111,12 @@ export default defineComponent({
pageSize,
total,
searcMaterialhName,
designType,
// disignTypeList,
workspace,
t,
driver__,
usGenerateList,
disignType,
}
},
data (prop) {
@@ -229,6 +252,9 @@ export default defineComponent({
this.currentPage = 1
this.pageSize = 12
this.imgList = []
if(code != 'Moodboard'){
this.disignType = this.disignTypeList[0].value
}
this.getLibraryList('')
},
@@ -251,6 +277,10 @@ export default defineComponent({
},
selectImgItem(imgData:any){
let parent:any = this.$parent
if(this.selectCode != 'Moodboard'){
imgData.categoryValue = imgData.level2TypeEnum.value
imgData.category = imgData.level2TypeEnum.name
}
if(parent.isUseGenerate){
this.setUseGenerate([])
imgData.checked = true
@@ -258,8 +288,12 @@ export default defineComponent({
imgId : imgData.id,
imgUr: imgData.imgUrl,
level2Type:imgData.level2Type,
categoryValue:imgData.categoryValue,
category:imgData.category,
designType:'library'
}
console.log(obj);
// parent.useGenerate.designType = 'collection'
this.$emit('setLibrary',obj)
}else{
@@ -283,6 +317,14 @@ export default defineComponent({
}
},
handleChange(){
this.currentPage = 1
this.imgList = []
this.getLibraryList('')
},
upTypeSucced(){
this.handleChange()
},
//选择所有的图片
async getLibraryList(str:any){
let workspace = JSON.parse(JSON.stringify(this.store.state.Workspace.workspace))
@@ -297,7 +339,7 @@ export default defineComponent({
}
let data = {
level1Type:this.selectCode,
// level2Type:this.designType,
level2Type: this.selectCode == 'Moodboard'?'':this.disignType,
modelSex:workspace?.sex,
page: this.currentPage,
// page:this.currentPage,
@@ -396,6 +438,16 @@ export default defineComponent({
position: sticky;
top: 0;
z-index: 2;
.my_material_header_left{
.select_block{
border: calc(0.1rem* 1.2) solid #F1F1F1;
margin-right: calc(2.3rem*1.2);
height: 4rem;
.ant-select-selector{
height: 90%;
}
}
}
.my_material_header_right{
display: flex;
justify-content: space-between;
@@ -415,7 +467,7 @@ export default defineComponent({
// font-size: 1.6rem*1.2);
font-size: calc(1.2rem*1.2);
font-weight: 400;
height: calc(3rem*1.2);
height: 4rem;
&::placeholder {
color: #C2C2C2;
@@ -466,7 +518,7 @@ export default defineComponent({
font-size: calc(2rem*1.2);
color: #030303;
}
.material_content_top_right{
display: flex;
align-items: center;

2
src/component/HomePage/MoodboardUpload.vue
View File

@@ -365,7 +365,7 @@ export default defineComponent({
if (!isJpgOrPng) {
message.info(this.t('MoodboardUpload.jsContent3'));
}
const isLt2M = file.size / 1024 / 1024 < 2;
const isLt2M = file.size / 1024 / 1024 < 5;
if (!isLt2M) {
message.info(this.t('MoodboardUpload.jsContent4'));
}

1
src/component/HomePage/NewCollectionReview.vue
View File

@@ -182,6 +182,7 @@ export default defineComponent({
sketchH[index]+=image.height * (300/image.width)
nextTick().then(()=>{
resolve()
image.remove()
})
}
})

28
src/component/HomePage/PrintboardUpload.vue
View File

@@ -30,7 +30,7 @@
<div v-show="openClick == 3" class="generalMenu_printModel printMenu">
<div @click.stop="openPrintModel">{{ scene.name }} <i class="icon iconfont icon-xiala" :class="{forbidden:openMenu}"></i></div>
<ul v-show="openMenu">
<li v-for="item,index in sceneList" class="printModel_item" @click.stop="setSceneList(item)">{{ item.name }}</li>
<li v-for="item,index in printCatecoryList" class="printModel_item" @click.stop="setSceneList(item)">{{ item.name }}</li>
</ul>
</div>
</div>
@@ -46,6 +46,8 @@
</div>
<div class="upload_file_item_content" v-show="file?.status === 'done'">
<img v-lazy="file.imgUrl" class="upload_img" :key="file.imgUrl">
<sketchCategory :disignTypeList="printCatecoryList" :generateList="fileList" :isSetSketchCategory="true" :item="file" ></sketchCategory>
<div class="delete_like_file_block" @click.stop="deleteFile(file)">
<span
class="icon iconfont icon-shanchu"
@@ -98,7 +100,7 @@
@confirmSelect="confirmSelect"
:disignTypeList="printCatecoryList"
></Material>
<Generate v-show="openClick == 3" ref="Generate" :scene="scene" msg="Printboard"></Generate>
<Generate v-show="openClick == 3" ref="Generate" :scene="scene" :sketchCatecoryList="printCatecoryList" msg="Printboard"></Generate>
</div>
<div class="modal_right">
<div class="modal_layout">
@@ -119,6 +121,8 @@
<div class="modal_img">
<div v-for="item,index in printboardList" :key="item" class="modal_imgItem Guide_1_2_9" :class="[driver__.driver?'showEvents':'']" >
<img v-lazy="item.imgUrl">
<sketchCategory :disignTypeList="printCatecoryList" :generateList="printboardList" :isSpread="true" :item="item" ></sketchCategory>
<!-- <div
class="delete_like_file_block left1"
:class="[driver__.driver?'hideEvents':'']"
@@ -160,6 +164,7 @@ import { useI18n } from 'vue-i18n';
import { openGuide,driverObj__ } from "@/tool/guide";
import scaleImage from "@/component/HomePage/scaleImage.vue";
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import sketchCategory from "@/component/HomePage/sketchCategory.vue";
import axios from 'axios'
import generalMenu from "@/component/HomePage/generalMenu.vue";
import { overflow } from 'html2canvas/dist/types/css/property-descriptors/overflow';
@@ -171,6 +176,7 @@ export default defineComponent({
Generate,
scaleImage,
generalMenu,
sketchCategory,
},
setup(){
let store:any =useStore()
@@ -300,6 +306,7 @@ export default defineComponent({
material.init('Printboard')
}
if(num == 3){
this.scene = this.printCatecoryList[0]
nextTick().then(()=>{
if(this.driver__.driver){
driverObj__.moveNext()
@@ -355,7 +362,7 @@ export default defineComponent({
if (!isJpgOrPng) {
message.info(this.t('PrintboardUpload.jsContent1'));
}
const isLt2M = file.size / 1024 / 1024 < 2;
const isLt2M = file.size / 1024 / 1024 < 5;
if (!isLt2M) {
message.info(this.t('PrintboardUpload.jsContent2'));
}
@@ -430,8 +437,10 @@ export default defineComponent({
file.imgUrl = rv.url
file.pin = false
file.id = rv.id
file.category = this.printCatecoryList[0].value
file.categoryValue = this.printCatecoryList[0].name
file.resData = rv
}
}
let fileList = this.fileList.filter((v:any)=> v.status === 'done')
@@ -503,6 +512,8 @@ export default defineComponent({
file.imgUrl = rv.url
file.id = rv.id
file.resData = rv
file.category = this.printCatecoryList[0].value
file.categoryValue = this.printCatecoryList[0].name
}
}
let fileList = this.fileList.filter((v:any)=> v.status === 'done')
@@ -549,6 +560,13 @@ export default defineComponent({
moodboard:[] as any,
}
arr.forEach((v:any)=>{
v.pin = v.pin == 1?true:false
this.printCatecoryList.forEach((item:any) => {
if(v.level2Type == item.value){
v.category=item.value
v.categoryValue=item.name
}
});
if(v.type_.type1 == 'generate'){
setboard.generate.push(v)
}else if(v.type_.type1 == 'material'){
@@ -592,10 +610,8 @@ export default defineComponent({
setSceneList(data:any){
if(this.scene.value === data.value) return
this.scene = data
console.log(data);
let generate:any = this.$refs.Generate
generate.sketchboardList = []
generate.scene = data
this.openMenu = false
},
openPrintModel(){

13
src/component/HomePage/SketchboardUpload.vue
View File

@@ -138,7 +138,7 @@
<div class="modal_img">
<div v-for="item,index in sketchboardList" :key="item" class="modal_imgItem Guide_1_2_9" :class="[driver__.driver?'showEvents':'']" >
<img v-lazy="item.imgUrl">
<sketchCategory :disignTypeList="sketchCatecoryList" :generateList="sketchboardList" :item="item" :driver__="driver__.driver"></sketchCategory>
<sketchCategory :disignTypeList="sketchCatecoryList" :generateList="sketchboardList" :isSpread="true" :item="item" :driver__="driver__.driver"></sketchCategory>
<!-- <div
class="delete_like_file_block left1"
@@ -154,7 +154,7 @@
<span class="icon iconfont icon-shanchu operate_icon"></span>
</div>
<div class="pin_block">
<a-checkbox v-model:checked="item.pin">{{ $t('PrintboardUpload.PIN') }}</a-checkbox>
<a-checkbox v-model="item.pin">{{ $t('PrintboardUpload.PIN') }}</a-checkbox>
</div>
</div>
</div>
@@ -432,7 +432,7 @@ export default defineComponent({
if (!isJpgOrPng) {
message.info(this.t('SketchboardUpload.jsContent2'));
}
const isLt2M = file.size / 1024 / 1024 < 2;
const isLt2M = file.size / 1024 / 1024 < 5;
if (!isLt2M) {
message.info(this.t('SketchboardUpload.jsContent3'));
}
@@ -482,6 +482,13 @@ export default defineComponent({
moodboard:[] as any,
}
arr.forEach((v:any)=>{
v.pin = v.pin == 1?true:false
this.sketchCatecoryList.forEach((item:any) => {
if(v.level2Type == item.value){
v.category=item.value
v.categoryValue=item.name
}
});
if(v.type_.type1 == 'generate'){
setboard.generate.push(v)
}else if(v.type_.type1 == 'material'){

2
src/component/HomePage/Upload.vue
View File

@@ -93,7 +93,7 @@ export default defineComponent({
if (!isJpgOrPng) {
message.info(this.t('Upload.jsContent1'));
}
const isLt2M = file.size / 1024 / 1024 < 2;
const isLt2M = file.size / 1024 / 1024 < 5;
if (!isLt2M) {
message.info(this.t('Upload.jsContent2'));
}

2
src/component/HomePage/collectionModal.vue
View File

@@ -136,8 +136,6 @@ export default defineComponent({
methods:{
nextStep(){
let colorBoards = this.store.state.UploadFilesModule.colorBoards
console.log(colorBoards);
if(this.collectionStep == 1){
let disposeMoodboard = this.store.state.UploadFilesModule.disposeMoodboard
let moodboard = this.store.state.UploadFilesModule.moodboard

26
src/component/HomePage/createSlogan.vue
View File

@@ -86,7 +86,9 @@ import { Modal, message } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import allOrder from "@/component/Pay/allOrder.vue";
import creditsDetail from "@/component/Pay/creditsDetail.vue";
import { JSSetRemoveImage } from "@/tool/canvasDrawing";
import { useI18n } from "vue-i18n";
export default defineComponent({
components: {
creditsDetail,
@@ -146,8 +148,8 @@ export default defineComponent({
canvasWH.value = height
scale = exportWH/canvasWH.value
var canvasDom = document.createElement("canvas");
let oldCanvasDom = canvasBox.querySelector('canvas')
if(oldCanvasDom)canvasBox.removeChild(oldCanvasDom); // 清空原有内容
let oldCanvasDom = canvasBox.querySelector('.canvas-container')
if(oldCanvasDom)oldCanvasDom.remove()
canvasBox.appendChild(canvasDom);
canvas = new fabric.Canvas(canvasDom, {
backgroundColor: "#e6e6e6",
@@ -157,6 +159,11 @@ export default defineComponent({
});
canvas.on('object:moving',canvasMoving)
setTextFun('请输入一段话吧~')
if(!fabric.Object.prototype.controls.deleteControl){
JSSetRemoveImage(deleteObj)
}else{
fabric.Object.prototype.controls.deleteControl.mouseUpHandler = deleteObj
}
// setRemoveImage()
fabric.Object.prototype.cornerSize = 10
fabric.Object.prototype.transparentCorners = false
@@ -181,6 +188,21 @@ export default defineComponent({
textBtnShow.value = false
}
}
let deleteObj = ()=> {
if(!canvas.getActiveObjects()){
return
}
let target = canvas.getActiveObjects()
target.forEach((item)=>{
canvas.fxRemove(item, {
onComplete(){
canvas.discardActiveObject(); // 丢弃当前选中的对象
canvas.renderAll(); // 重新渲染 Canvas
}
})
canvas.FX_DURATION = 300
})
}
let messageShow = false
let canvasMoving = (options)=>{
let obj = options.target

14
src/component/HomePage/printCategory.vue
View File

@@ -54,6 +54,7 @@
import { openGuide,driverObj__ } from "@/tool/guide";
export default defineComponent({
name:'filterComponent',
emits:['upTypeSucced'],
props:{
disignTypeList:{
type:Object
@@ -77,7 +78,7 @@
default:{class1:'',class2:''},
}
},
setup(props:any){
setup(props:any,{emit}){
let showFileCategory = (file:any)=> {
file.categoryShow = true;
nextTick().then(()=>{
@@ -114,11 +115,12 @@
libraryId:[item.id],
level2Type:item.category,
}
// Https.axiosPost(Https.httpUrls.setSketchLibrary,data).then(
// (rv: any) => {
// }
// ).catch((res)=>{
// });
Https.axiosPost(Https.httpUrls.setSketchLibrary,data).then(
(rv: any) => {
emit('upTypeSucced')
}
).catch((res)=>{
});
}
return {
showFileCategory,

358
src/component/HomePage/productImg.vue
View File

@@ -26,10 +26,10 @@
<div class="productImg_content_item_title">Select Collection</div>
<div class="productImg_content_item_imgBox generalScroll" v-mousewheel>
<div class="content_item_imgBox_itemImg" v-for="item in likeDesignCollectionList" :key="item.id" >
<img v-lazy="item.designOutfitUrl" alt="">
<img @click="setGenerate(item)" v-lazy="item.designOutfitUrl" alt="" :class="{active:item.isChecked}">
</div>
</div>
<div class="productImg_content_item_title">Up Load</div>
<div class="productImg_content_item_title">Upload</div>
<div class="productImg_content_item_imgBox generalScroll upload_item" v-mousewheel>
<div class="upload_file_item" v-for="(file, index) in fileList" :key="file">
<div class="upload_file_item_content" v-show="file?.status === 'uploading'" >
@@ -41,17 +41,18 @@
<div
class="upload_file_item_content content_item_imgBox_itemImg"
v-show="file?.status === 'done'"
>
<img :src="file?.imgUrl" class="upload_img" />
<div class="content_item_imgBox_itemImg_delete" @click="deleteFile(index)">
<img @click="setGenerate(file)" :src="file?.imgUrl" class="upload_img" :class="{active:file?.isChecked}"/>
<!-- <div class="content_item_imgBox_itemImg_delete" @click="deleteFile(index)">
<i class="fi fi-rr-trash"></i>
</div>
</div> -->
</div>
</div>
<div class="upload_file_item upload_component ">
<!-- :action="uploadUrl + '/api/history/toProductImageElementUpload'" -->
<a-upload
:action="uploadUrl + '/api/element/upload'"
:action="uploadUrl + '/api/history/toProductImageElementUpload'"
list-type="picture-card"
:capture="null"
:data="{
@@ -76,29 +77,62 @@
</div>
</div>
<div class="productImg_content_item_title">Magic Tools</div>
<div class="input_border productImg_content_item_generate">
<div class="input_box">
<div class="input_box_btnBox">
<input
class="search_input"
:placeholder="$t('Generate.inputContent1')"
v-model="searchName"
@keydown.enter="getPrductimg()"
/>
<i v-show="!isTextarea" class="fi fi-br-expand" @click.stop="()=>isTextarea = !isTextarea"></i>
<i v-show="isTextarea" class="fi fi-bs-compress" @click.stop="()=>isTextarea = !isTextarea"></i>
</div>
<textarea
v-show="isTextarea"
class="search_textarea "
@keydown.enter="getPrductimg()"
v-model="searchName"
></textarea>
<div v-show="!isProductimg" class="generage_btn started_btn" @click.stop="getPrductimg">
{{ $t('Generate.Generate') }}
</div>
<div v-show="isProductimg && !remProductimg" class="generage_btn started_btn" @click="getPrductimg">
<i class="fi fi-br-loading"></i>
</div>
<div v-show="remProductimg" @click="removeProductimg" class="generage_btn started_btn">
{{$t('Generate.Close')}}
</div>
</div>
</div>
</div>
<div class="productImg_right">
<div class="productImg_content_item_title">Selected Product</div>
<div class="productImg_right_item_box generalScroll" v-mousewheel>
<div class="productImg_right_item" v-for="item,index in generateList" :key="item">
<img v-lazy="item.url" alt="">
<img :src="item.url" alt="">
<div class="productImg_right_item_like">
<i class="fi fi-rr-heart" @click.stop="likeFile(item,'like',index)"></i>
</div>
<div class="productImg_right_item_scale">
<i class="fi fi-bs-expand-arrows-alt" @click.stop="setScaleImage(generateList,index)"></i>
</div>
</div>
</div>
<div class="productImg_content_item_title productImg_right_titleBtn">
Selected Product
<div class="button_second">Export</div>
<div class="button_second" @click="setExport">Export</div>
</div>
<div class="productImg_right_item_box generalScroll" v-mousewheel>
<div class="productImg_right_item" v-for="item,index in likeList" :key="item">
<img v-lazy="item.url" alt="">
<img :src="item.url" alt="">
<div class="productImg_right_item_like">
<i class="fi fi-sr-heart" @click.stop="likeFile(item,'noLike',index)"></i>
</div>
<div class="productImg_right_item_scale">
<i class="fi fi-bs-expand-arrows-alt" @click.stop="setScaleImage(likeList,index)"></i>
</div>
</div>
</div>
</div>
@@ -108,6 +142,7 @@
<a-spin size="large" />
</div>
<ExportModel ref="ExportModel" @setTask="setTask"></ExportModel>
<scaleImage ref="scaleImage"></scaleImage>
</a-modal>
</template>
@@ -125,74 +160,59 @@ import { downloadIamge } from "@/tool/util";
import { useI18n } from "vue-i18n";
import ExportModel from "@/component/HomePage/ExportModel.vue";
import { useStore } from "vuex";
import scaleImage from "@/component/HomePage/scaleImage.vue";
export default defineComponent({
components:{
ExportModel,
scaleImage,
},
setup(props,{emit}) {
const store = useStore();
const {t} = useI18n()
const upload:any = ref({})
let productImg: any = ref(false);//弹窗
let productImgMask:any = ref(false)//弹窗遮罩
let productImgData:any = reactive({
isShowMark:false,
beenPublished:0,
fileList:[],
searchName:'',
isTextarea:false,//是否展开
remProductimg:false,//是否出现取消按钮
isProductimg:false,//开始生成
selectProductimgList:[],
generateList:[
{
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
id:2,
}
],
likeList:[
{
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
id:1,
},{
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
id:1,
},{
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
id:1,
},{
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
id:1,
},{
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
id:1,
},{
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
id:1,
},{
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
id:1,
},{
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
id:1,
},{
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
id:1,
},{
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
id:1,
},{
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
id:1,
},{
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
id:1,
},{
url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
id:1,
},
],
})
let ExportModel = ref()
let likeDesignCollectionList: any = computed(() => {
return store.state.HomeStoreModule.likeDesignCollectionList;
});
let init = ()=>{
let userlikeGroupId = 0
let init = (userGroupId:any,beenPublished:any)=>{
productImg.value = true
console.log(likeDesignCollectionList);
productImgData.beenPublished = beenPublished
upload.value = {
userlikeGroupId:userGroupId
}
userlikeGroupId = userGroupId
getLikeProductImage(userGroupId)
}
let getLikeProductImage = (userGroupId:any)=>{
let data = {
userLikeGroupId:userGroupId
}
Https.axiosPost(Https.httpUrls.productImageLikeList, data).then(
(rv) => {
productImgData.likeList.push(...rv)
}
).catch(res=>{
});
}
let cancelDsign = ()=>{
Modal.confirm({
@@ -219,11 +239,9 @@ export default defineComponent({
let res = JSON.parse(file.xhr.response);
if(res.errCode == 0){
file.imgUrl = res.data.url;
// file.type_ = {
// type1:'upload',
// type2:'Moodboard'
// };
file.id = res.data.id
file.isChecked = true
file.type = 'ProductElement'
productImgData.fileList.filter((v: any) => v.status === "done");
}else{
bor = false
@@ -242,7 +260,7 @@ export default defineComponent({
if (!isJpgOrPng) {
message.info(useI18n().t('MoodboardUpload.jsContent3'));
}
const isLt2M = file.size / 1024 / 1024 < 2;
const isLt2M = file.size / 1024 / 1024 < 5;
if (!isLt2M) {
message.info(useI18n().t('MoodboardUpload.jsContent4'));
}
@@ -251,35 +269,191 @@ export default defineComponent({
let deleteFile = (index:any)=>{
productImgData.fileList.splice(index,1)
}
let setGenerate = (item:any)=>{
item.isChecked = !item.isChecked
// productImgData.selectProductimgList
}
let likeFile = (item:any,str:any,index:any) =>{
if(str == 'like'){
productImgData.likeList.push(item)
productImgData.generateList.splice(index,1)
}else{
productImgData.generateList.push(item)
productImgData.likeList.splice(index,1)
let url
let data = {
toProductImageResultId:[item.id]
}
if(str == 'like'){
url = Https.httpUrls.productImageLike
}else{
url = Https.httpUrls.productImageUnLike
}
Https.axiosPost(url, data).then(
(rv) => {
if(str == 'like'){
productImgData.likeList.push(item)
productImgData.generateList.splice(index,1)
}else{
productImgData.generateList.push(item)
productImgData.likeList.splice(index,1)
}
}
).catch(res=>{
});
}
let setExport = ()=>{
// let exportModel:any = this.$refs.ExportModel
// exportModel.init()
let data = {
key:'likePorductImg',
imgList:productImgData.likeList,
userlikeGroupId,
beenPublished:productImgData.beenPublished
}
let exportModel:any = ExportModel.value
exportModel.init(data)
}
let remPrductimgTime:any = null
let prductimgTime:any = null
let getPrductimg = ()=>{
if(productImgData.isProductimg) return
clearInterval(remPrductimgTime)
let selectArr:any = []
let obj = {
"createTime": "",
"elementId": 0,
"elementType": "",
"id": 0,
"isLike": 0,
"taskId": "",
"toProductImageRecordId": 0,
"url": ""
}
productImgData.fileList.forEach((item:any)=>{
if(item.isChecked){
obj.elementId = item.id
obj.elementType = item.type
selectArr.push(JSON.parse(JSON.stringify(obj)))
}
})
likeDesignCollectionList.value.forEach((item:any)=>{
if(item.isChecked){
obj.elementId = item.designOutfitId
obj.elementType = 'DesignOutfit'
selectArr.push(JSON.parse(JSON.stringify(obj)))
}
})
if(selectArr.length == 0) {
message.info('Please select at least one picture')
return
}
let data:any ={
prompt:productImgData.searchName,
toProductImageVOList:selectArr,
userLikeGroupId:upload.value.userlikeGroupId,
}
productImgData.isProductimg = true
remPrductimgTime = setTimeout(()=>{
productImgData.remProductimg = true
},10000)
Https.axiosPost(Https.httpUrls.toProduct, data).then(
(rv) => {
let arr:any = []
rv.forEach((item:any)=>{
arr.push(item.taskId)
})
setPrductimg(arr)
}
).catch(res=>{
productImgData.isProductimg = false
clearInterval(remPrductimgTime)
productImgData.remProductimg= false
});
}
let generateProceedList:any = []
let setPrductimg = (dataList:any)=>{
let data = dataList
let dataNum = dataList.length
let state = true
prductimgTime = setInterval(()=>{
if(!state)return
state = false
Https.axiosPost(Https.httpUrls.toProductImageResult, data).then(
(rv) => {
state = true
if(productImgData.isProductimg){//防止取消后有正在执行的获取状态
// generateProceedList = rv.filter((item:any)=>item.status != 'Success' && item.status != 'Fail' && item.status != 'Invalid')
rv.forEach((element:any) => {
if(element.status == 'Success'){
element.imgUrl = element.url
productImgData.generateList.unshift(element)
}
data = data.filter((item:any) => item !== element.taskId);
});
generateProceedList = data
if((data.length == 0)|| (rv.filter((item:any)=>item.status == 'Invalid').length ==data.length)){
// if(rv.filter((item:any)=>item.status == 'Invalid').length ==dataNum){
// }
clearInterval(prductimgTime)
clearInterval(remPrductimgTime)
productImgData.remProductimg = false
productImgData.isProductimg = false
}
}
}
).catch(res=>{
clearInterval(prductimgTime)
clearInterval(remPrductimgTime)
productImgData.isProductimg = false
productImgData.remProductimg= false
});
},1000)
}
let removeProductimg = ()=>{
productImgData.isProductimg = false
productImgData.remProductimg= false
clearInterval(prductimgTime)
let userInfo:any = getCookie("userInfo")
if(generateProceedList){
// let str = generateProceedList.map((obj:any) => obj.taskId).join(',');
let str = generateProceedList.join(',')
console.log(str,generateProceedList);
let data = {uniqueId:str,userId:JSON.parse(userInfo).userId,timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone}
Https.axiosGet(Https.httpUrls.generateStopWaiting, {params:data}).then(
(rv) => {
generateProceedList = []
}
).catch(res=>{
});
}
}
let scaleImage = ref()
let setScaleImage = (arr:any,index:any)=>{
arr.forEach((item:any)=>{
item.imgUrl = item.url
})
scaleImage.value.init(arr,index)
scaleImage.value.isLike = false
}
//超分
let setTask = (data:any)=>{
emit('setTask',data)
}
return {
upload,
productImg,
productImgMask,
...toRefs(productImgData),
likeDesignCollectionList,
ExportModel,
init,
cancelDsign,
fileUploadChange,
beforeUpload,
deleteFile,
setGenerate,
likeFile,
setExport,
getPrductimg,
removeProductimg,
scaleImage,
setScaleImage,
setTask,
};
},
@@ -309,12 +483,7 @@ export default defineComponent({
// moodTemplateId: "", //模板id
token: "",
uploadUrl: "",
upload: {
isPin: 0,
gender:'',
level1Type: "Moodboard",
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
},
};
},
mounted() {
@@ -370,13 +539,7 @@ export default defineComponent({
.upload_item{
}
.upload_file_item{
display: flex;
margin-right: 1rem;
&.upload_file_item:last-child{
margin-right: 0rem;
}
}
.productImg_content_item_title{
font-weight: 600;
font-size: 1.8rem;
@@ -398,7 +561,12 @@ export default defineComponent({
height: 12rem;
img{
width: 100%;
cursor: pointer;
object-fit: contain;
&.active{
opacity: .5;
transform: scale(.9);
}
}
&.content_item_imgBox_itemImg:hover{
.content_item_imgBox_itemImg_delete{
@@ -435,6 +603,16 @@ export default defineComponent({
}
.productImg_left{
width: 25%;
.upload_file_item{
display: flex;
margin-right: 1rem;
width: auto;
border: none;
margin-bottom: 0;
&.upload_file_item:last-child{
margin-right: 0rem;
}
}
// width: 45%;
.productImg_content_item_imgBox{
.content_item_imgBox_itemImg{
@@ -442,6 +620,9 @@ export default defineComponent({
flex-shrink: 0;
}
}
.productImg_content_item_generate{
--width:60%;
}
}
.productImg_right{
width: 75%;
@@ -465,7 +646,7 @@ export default defineComponent({
height: 100%;
}
.productImg_right_item_like{
.productImg_right_item_like,.productImg_right_item_scale{
display: none;
position: absolute;
top: 1rem;
@@ -475,9 +656,12 @@ export default defineComponent({
color: red;
}
}
.productImg_right_item_scale{
top: 4rem;
}
}
.productImg_right_item:hover{
.productImg_right_item_like{
.productImg_right_item_like,.productImg_right_item_scale{
display: block;
}
}

6
src/component/HomePage/scaleImage.vue
View File

@@ -21,7 +21,7 @@
</div>
<div class="scaleImage_content">
<img :src="scaleImageList[scaleImageIndex]?.imgUrl">
<div class="img_operate_block">
<div class="img_operate_block" v-if="isLike">
<i v-if="!scaleImageList[scaleImageIndex]?.like" class="fi fi-rr-heart operate_icon" @click.stop="LikeFile(scaleImageList[scaleImageIndex],'like')"></i>
<i v-else class="fi fi-sr-heart operate_icon" :adminLike="!!scaleImageList[scaleImageIndex]?.like" @click.stop="LikeFile(scaleImageList[scaleImageIndex],'noLike')"></i>
</div>
@@ -76,7 +76,7 @@ export default defineComponent({
])
let scaleImageMask:any = ref(false)
let scaleImageIndex:any = ref(0)
let isLike:any = ref(true)
let robotAssits:any = ref(0)
return {
scaleImage,
@@ -86,7 +86,7 @@ export default defineComponent({
scaleImageList,
scaleImageMask,
scaleImageIndex,
isLike,
robotAssits,
};
},

18
src/component/HomePage/sketchCategory.vue
View File

@@ -8,6 +8,7 @@
>
{{ item.categoryValue }}
<div
v-show="!isSpread"
:class="[
'icon',
'iconfont',
@@ -22,6 +23,7 @@
class="category_list"
:class="driverClass.class2"
v-show="item.categoryShow"
v-if="!isSpread"
>
<div
:class="[
@@ -49,14 +51,16 @@
</template>
<script lang="ts">
import { defineComponent,ref ,nextTick} from "vue";
import { defineComponent,ref ,nextTick, computed,watch} from "vue";
import { Https } from "@/tool/https";
import { openGuide,driverObj__ } from "@/tool/guide";
export default defineComponent({
name:'filterComponent',
emits:['upTypeSucced'],
props:{
disignTypeList:{
type:Object
type:Object,
default:{}
},
item:{
type:Object
@@ -68,6 +72,10 @@ export default defineComponent({
type:Boolean,
default:false,
},
isSpread:{
type:Boolean,
default:false,
},
driver__:{
type:Boolean,
default:false,
@@ -77,8 +85,10 @@ export default defineComponent({
default:{class1:'',class2:''},
}
},
setup(props:any){
setup(props:any,{emit}){
let data = ''
let showFileCategory = (file:any)=> {
if(props.isSpread)return
file.categoryShow = true;
nextTick().then(()=>{
if(props.driver__){
@@ -110,12 +120,14 @@ export default defineComponent({
}
let setSketchLibrary = (item:any)=>{
let data = {
libraryId:[item.id],
level2Type:item.category,
}
Https.axiosPost(Https.httpUrls.setSketchLibrary,data).then(
(rv: any) => {
emit('upTypeSucced')
}
).catch((res)=>{
});