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

Merge remote-tracking branch 'origin/StableVersion' into develop

Browse Source
This commit is contained in:
X1627315083
2024-09-25 11:07:49 +08:00
parent f840b03c0d
commit 309cdf16a9
33 changed files with 3462 additions and 748 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -168,7 +168,6 @@
<i class="icon iconfont icon-move" @click="setOperation('move')" :class="{active:operation == 'move'}"></i>
<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:operation == 'eraser'}"></i>
<!-- <i class="icon iconfont icon-xiala" :class="closeNav.tool?'icon-rotate':''" @click.stop="setCloseNav('tool')"></i> -->
<i class="icon iconfont icon-xian" @click="setOperation('fold')" :class="{active:operation == 'fold'}"></i>
<i class="icon iconfont icon-checkbox-full" @click="setOperation('rect')" :class="{active:operation == 'rect'}"></i>
<!-- <i class="icon iconfont icon-zhixian" @click="setOperation('line')" :class="{active:operation == 'line'}"></i> -->
@@ -180,6 +179,7 @@
<input type="file" @change="uploadImage">
</label>
<i class="icon iconfont" @click="setOperation('text')" :class="{active:operation == 'text'}">T</i>
<i @click="setLiquefaction()">液化</i>
</div>
<!-- <div class="exportCanvasBox_left_tool exportCanvasBox_left_item" :class="{'closeNav' :closeNav.tool}">
<div class="exportCanvasBox_left_tool_item">
@@ -287,6 +287,7 @@
</div>
</a-modal>
<publish ref="publish" @setPublish="setSubmit"></publish>
<liquefaction ref="liquefaction" @submitLiquefaction="submitLiquefaction"></liquefaction>
</a-modal>
</template>
<script>
@@ -307,12 +308,14 @@ import { exportSele,JSRectUpdata,JSchangeType,JScanvasMouseDown,JScanvasMouseMov
import { useI18n } from "vue-i18n";
import {isMoible,calculateGradientCoordinate,base64ToFile} from '@/tool/util'
import publish from "@/component/WorksPage/publish.vue";
import liquefaction from "@/component/modules/liquefaction.vue";
export default defineComponent({
components: {
scaleImage,
ExportNewCoolection,
publish,
liquefaction,
},
props: ["msg", "sketchCatecoryList"],
setup(props,{emit}) {
@@ -465,8 +468,9 @@ export default defineComponent({
let oldExportCanvas
let localCanvas = localStorage.getItem('canvasContent')
let localUserlikeGroupId = localStorage.getItem('userlikeGroupId')
let currentTime = localStorage.getItem('currentTime')
oldExportCanvas = await new Promise((resolve, reject) => {
if(localUserlikeGroupId == userlikeGroupId){
if(localUserlikeGroupId == userlikeGroupId && (new Date().getTime() - currentTime < 21600000)){
Modal.confirm({
title: useI18.t('exportModel.jsContent8'),
okText: 'Yes',
@@ -622,6 +626,7 @@ export default defineComponent({
data.canvasHeight = canvasWH.value.height
localStorage.setItem('canvasContent',JSON.stringify(data))
localStorage.setItem('userlikeGroupId',userlikeGroupId)
localStorage.setItem('currentTime',new Date().getTime())
},3000)
if(driver__.value.driver){
driverObj__.moveNext()
@@ -1931,6 +1936,46 @@ export default defineComponent({
canvas.renderAll();
}
}
//液化
let liquefaction = ref(null)
let submitLiquefaction = (rv)=>{
}
let setLiquefaction = ()=>{
const selectedObject = canvas.getActiveObjects();
if (selectedObject.length > 0) {
// 创建一个新的画布用于生成图片
const tempCanvas = new fabric.Canvas();
tempCanvas.setDimensions({
width: selectedObject.width,
height: selectedObject.height,
});
let cloneCount = 0;
selectedObject.forEach((obj) => {
obj.clone((clonedObject) => {
tempCanvas.add(clonedObject);
clonedObject.set({ left: obj.left, top: obj.top }); // 设置位置
cloneCount++;
// 当所有对象都克隆完成后生成图片
if (cloneCount === selectedObject.length) {
const dataURL = tempCanvas.toDataURL();
console.log(dataURL);
console.log('Image URL:', dataURL);
// 可以根据需要使用 dataURL，例如显示在 img 标签中
}
});
});
// 生成图片的地址
} else {
console.log('No object selected.');
return null;
}
// liquefaction.value.init()
}
onMounted(() => {
let arr = [
{ value: 'Arial', name: 'select font' },
@@ -2009,6 +2054,10 @@ export default defineComponent({
fontFamily,
textDataShow,
setFontFamily,
//液化
liquefaction,
submitLiquefaction,
setLiquefaction,
};
},
data(prop) {

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

@@ -1,6 +1,6 @@
<template>
<div class="generate">
<div v-if="type_.type2 == 'Printboard' && scene.value == 'Pattern'" class="generate_checkbox" >
<div v-if="(type_.type2 == 'Printboard' && scene.value == 'Pattern')" class="generate_checkbox" >
<generalMenu :dataList="printModelList" @setprintModel="setprintModel" :item="printModel" :driver__="driver__.driver" :driverClass="{class1: 'Guide_1_2_4'}"></generalMenu>
<!-- <generalMenu :dataList="sceneList" @setprintModel="setSceneList" :item="scene"></generalMenu> -->
<!-- <div v-if="type_.type2 == 'Printboard'" class="printModel">
@@ -14,7 +14,7 @@
</div>
<div class="input_border" >
<div class="input_box Guide_1_5" :class="[inputShow?'active':'',type_.type2 =='Sketchboard'?'Guide_1_9_2':'']">
<div class="input_box_btnBox">
<div class="input_box_btnBox" v-if="scene?.value != 'extract'">
<div class="upload_item">
<div
class="upload_file_item Guide_1_2_7"
@@ -39,13 +39,6 @@
</div>
</div>
</div>
<!-- <a-popover>
<template #content>
<p>Seed</p>
</template>
<input class="search_seed" max="9999" v-show="scene?.value == 'Logo'" @input="ifSeedValue" v-model="searchPictureSeed" type="Number" placeholder='Seed' min="0">
</a-popover> -->
<input
class="search_input"
@input="ifMaximumLength"
@@ -77,6 +70,53 @@
<i v-show="!isTextarea" class="fi fi-br-expand" @click.stop="setTextareaShow"></i>
<i v-show="isTextarea" class="fi fi-bs-compress" @click.stop="setTextareaShow"></i>
</div>
<div class="input_box_btnBox" v-else>
<div class="upload_item">
<div
class="upload_file_item"
v-for="(file, index) in sketchboardList"
:key="file"
:class="[driver__.driver?'showEvents':'']"
>
<div
class="upload_file_item_content"
v-show="file?.status === 'uploading'"
>
<a-spin size="small" :indicator="indicator" tip="Uploading..." />
</div>
<div
class="upload_file_item_content"
v-show="file?.status === 'done' || file?.base64"
>
<img :src="file?.imgUrl" class="upload_img" />
<div class="delete_like_file_block" :class="[driver__.driver?'hideEvents':'']">
<span class="icon iconfont icon-shanchu operate_icon" @click.stop="deleteFile(index)"></span>
</div>
</div>
</div>
</div>
<i class="fi fi-br-upload" style="margin-left: 2rem;" v-show="sketchboardList.length == 0" :title="$t('Generate.uploadproduct')">
<a-upload
class="search_upImg"
:capture="null"
:action="uploadUrl + '/api/element/upload'"
list-type="picture-card"
:data="{
...upload,
}"
:maxCount='1'
:headers="{ Authorization: token }"
v-model:file-list="sketchboardList"
:before-upload="beforeUpload"
accept=".jpg,.png,.jpeg,.bmp"
@change="(file) => fileUploadChange(file)"
>
</a-upload>
</i>
<div :title="$t('Generate.style')">
<generalMenu :dataList="printModelList" @setprintModel="setprintModel" :item="printModel"></generalMenu>
</div>
</div>
<textarea
v-show="isTextarea"
class="search_textarea "
@@ -86,10 +126,8 @@
@click.stop=""
v-model="searchPictureName"
></textarea>
<!-- <div class="generage_btn started_btn" @click.stop="getgenerate">{{ $t('Generate.Generate') }}</div> -->
<div v-show="!isGenerate" class="generage_btn started_btn" :class="{Guide_1_2_8:type_.type2 == 'Printboard'}" @click.stop="getgenerate">
{{ $t('Generate.Generate') }}
<!-- <div v-show="isGenerate"><a-spin size="large" /></div> -->
</div>
<div v-show="isGenerate && !remGenerate" class="generage_btn started_btn" :class="{Guide_1_2_8:type_.type2 == 'Printboard'}" @click="getgenerate">
<i class="fi fi-br-loading"></i>
@@ -108,37 +146,6 @@
</div>
</div>
</div>
<!-- <div v-if="type_.type2 == 'Sketchboard' || type_.type2 == 'Printboard'" class="generage_img Guide_1_6">
<div class="upload_item">
<div
class="upload_file_item Guide_1_2_7"
v-for="(file, index) in sketchboardList"
:key="file"
@click.stop="setSketchboardItem(file)"
:class="[file?.checked?'active':'',checkboxImage? 'forbidden':'',driver__.driver?'showEvents':'']"
>
<div
class="upload_file_item_content"
v-show="file?.status === 'uploading'"
>
<a-spin :indicator="indicator" tip="Uploading..." />
</div>
<div
class="upload_file_item_content"
v-show="file?.status === 'done'"
>
<img :src="file?.imgUrl" class="upload_img" />
<div
class="delete_file_block"
:class="[driver__.driver?'hideEvents':'']"
@click.stop="deleteFile(index)"
>
<span class="icon iconfont icon-shanchu"></span>
</div>
</div>
</div>
</div>
</div> -->
<div class="generage_img Guide_1_6" :class="{Guide_1_13_2:type_.type2 == 'Sketchboard',Guide_1_2_9:type_.type2 == 'Printboard'}" :style="[isGenerate?'overflow:hidden':'']">
<div
class="generage_img_item"
@@ -163,8 +170,11 @@
<span class="icon iconfont icon-shanchu operate_icon"></span>
</div>
</div>
<div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
</div>
</div>
<scaleImage ref="scaleImage"></scaleImage>
<scaleImage ref="scaleImage" :isCanvas="true" :workspace="workspace"></scaleImage>
<createSlogan ref="createSlogan" @setSloganData="setSloganData"></createSlogan>
</div>
</template>
@@ -196,25 +206,9 @@ export default defineComponent({
setup(props) {
// console.log(prop.msg);
let printModelList = ref([
{
num:'',
optype:false,
value:'Painting Style',
label:useI18n().t('Generate.Model1')
},{
num:'',
optype:false,
value:'Illustration Style',
label:useI18n().t('Generate.Model2')
},{
num:'',
optype:false,
value:'Real Style',
label:useI18n().t('Generate.Model3')
},
])
let printModel = ref({
let printModelList:any = ref([])
let sketchStyleList:any = ref([])
let printModel:any = ref({
num:'',
optype:false,
value:'Painting Style',
@@ -240,12 +234,13 @@ export default defineComponent({
let isTest = ref()
let userInfo:any = {}
let generateTime:any = ref()
let generateProceedList = ref([])
let generateProceedList:any = ref([])
let remGenerate:any = ref(false)
let remGenerateTime:any = ref()
let styleRecommend:any = inject('styleRecommend')
let generateLevel2Type = ''
let isSloganHint:any = ref(' ')
let loadingShow =ref(false)
return {
searchPictureName,
searchPictureSeed,
@@ -255,6 +250,7 @@ export default defineComponent({
level2Type,
printModel,
printModelList,
sketchStyleList,
isGenerate,
// printBoards,
@@ -274,6 +270,7 @@ export default defineComponent({
styleRecommend,
generateLevel2Type,
isSloganHint,
loadingShow,
};
},
data(prop) {
@@ -319,6 +316,42 @@ export default defineComponent({
this.workspaceCom = computed(()=>{
return this.store?.state?.Workspace?.workspace
})
// if()
if(this.type_.type2 == 'Printboard'){
this.printModelList = [
{
num:'',
optype:false,
value:'Painting Style',
label:useI18n().t('Generate.Model1')
},{
num:'',
optype:false,
value:'Illustration Style',
label:useI18n().t('Generate.Model2')
},{
num:'',
optype:false,
value:'Real Style',
label:useI18n().t('Generate.Model3')
},
]
}else if(this.type_.type2 == 'Sketchboard'){
this.printModelList = JSON.parse(JSON.stringify(this.store.state.UserHabit.SketchStyle))
this.printModelList.forEach((item:any)=>{
item.img = 'https://www.aida.com.hk/img/aida_logo.5ab4163e.png'
})
this.printModelList.push({
num:'',
optype:false,
img:-1,
value:'',
label:useI18n().t('Generate.Model1')
})
}
this.printModel = this.printModelList[0]
},
watch:{
driver__:{
@@ -377,6 +410,7 @@ export default defineComponent({
methods: {
generageAdd(data: any) {
data.type_ = this.type_;
data.type_.type1 = data.designType?data.designType:this.type_.type1
data.resData = JSON.parse(JSON.stringify(data))
let maxImg = 8
if(this.type_.type2 == 'Sketchboard'){
@@ -410,7 +444,41 @@ export default defineComponent({
setprintModel(value:any){
this.printModel = value
},
imageToSketch(){
if((!this.printModel?.id && !this.printModel?.value) || !this.sketchboardList?.[0]?.id)return message.info(this.t('Generate.jsContent4'));
this.loadingShow = true
let data = {
"elementId": this.sketchboardList[0].id,
gender:this.workspace.sexEnum.value,
"style": this.printModel.value,
"styleImageId": this.printModel.id?this.printModel.id:''
}
Https.axiosPost(Https.httpUrls.imageToSketch, data).then((rv)=>{
if(rv){
this.sketchCatecoryList.forEach((itemCategory:any) => {
if(itemCategory.value == rv.category){
rv.categoryValue = itemCategory?.value
rv.category = itemCategory?.name
}
});
this.fileList.push({
imgUrl:rv.url,
categoryValue:rv.categoryValue,
category:rv.category,
id:rv.id,
status:'Success',
})
this.loadingShow = false
}
}).catch(()=>{
this.loadingShow = false
})
},
getgenerate(){
if(this.scene?.value == 'extract'){
this.imageToSketch()
return
}
this.isTextarea = false
this.isInputFocus = false
if(this.isGenerate)return
@@ -844,7 +912,6 @@ export default defineComponent({
border-radius: calc(1rem*1.2);
img {
transform: scale(0.9);
object-fit: contain;
}
.delete_like_file_block{
pointer-events:none;
@@ -856,6 +923,7 @@ export default defineComponent({
img {
width: calc(10rem*1.2);
height: calc(10rem*1.2);
object-fit: contain;
}
&:hover .delete_like_file_block{
// display: block;

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

@@ -1,190 +0,0 @@
<template>
<!-- 生成collention缩略图用的 -->
<div class="export_new_collection_review">
<div class="img_block_item" v-if="allBoardData?.moodTemplateId">
<MoodTemplate :fileList="allBoardData?.moodboardFiles" :moodTemplateId="allBoardData?.moodTemplateId"></MoodTemplate>
</div>
<div class="img_block_item" v-else>
<div class="lager_img_item" v-for="(mood) in allBoardData.moodboardFiles" :key="mood">
<div class="all_img_item_block">
<img class="all_img_content cover_img" :src="mood.imgUrl" >
</div>
</div>
</div>
<div class="img_block_item">
<div class="small_img_item" v-for="(print) in allBoardData.printboardFiles" :key="print">
<div class="all_img_item_block">
<img class="all_img_content cover_img" :src="print.imgUrl">
</div>
</div>
<div class="small_img_item" v-for="(generate) in allBoardData.generatePrintFiles" :key="generate">
<div class="all_img_item_block">
<img class="all_img_content cover_img" :src="generate.imgUrl">
</div>
</div>
</div>
<div class="img_block_item">
<div class="color_item" v-for="(color) in allBoardData.colorBoards" :key="color">
<div class="color_content" :style="{background:`rgb(${color?.rgbValue?.r},${color?.rgbValue?.g},${color?.rgbValue?.b})`}"></div>
<div class="color_content_body">
<div class="color_des">{{color.tcx}}</div>
<div class="color_des">{{color.name}}</div>
</div>
</div>
</div>
<div class="img_block_item">
<div class="lager_img_item" v-for="(skecth) in allBoardData.skecthboardFiles" :key="skecth">
<div class="all_img_item_block">
<img class="all_img_content" :src="skecth.imgUrl">
</div>
</div>
</div>
<div class="img_block_item">
<div class="lager_img_item" v-for="(marketing) in allBoardData.marketingSketchFiles" :key="marketing">
<div class="all_img_item_block">
<img class="all_img_content" :src="marketing.imgUrl">
</div>
</div>
</div>
<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>
</template>
<script lang="ts">
import { computed, defineComponent, ref } from 'vue'
import MoodTemplate from '@/component/HomePage/MoodTemplate.vue'
import { useStore } from "vuex";
export default defineComponent({
// props: {
// allBoardData: {
// // default: false,
// },
// },
components:{MoodTemplate},
setup() {
const allBoardData = ref({});
// let allBoardData:any = computed(()=>{return store.state.UploadFilesModule.allBoardData})
// let likeDesignCollectionList : any = computed(()=>{return store.state.HomeStoreModule.likeDesignCollectionList})
return {
allBoardData,
// likeDesignCollectionList,
}
},
mounted () {
},
methods:{
init(data:any){
this.allBoardData = data
}
}
})
</script>
<style lang="less" scoped>
.export_new_collection_review{
width: 40.8rem;
background: #fff;
position: fixed;
left: -100rem;
top: 0;
.img_block_item{
margin-bottom: 2rem;
// &.color_block_item{
// padding: 0 0.5rem 0 0.3rem;
// }
.lager_img_item{
display: inline-block;
width: 20.4rem;
height: 20.4rem;
vertical-align: top;
}
.sketch_img_item{
display: inline-block;
width: 20.4rem;
height: 42.2rem;
vertical-align: top;
}
.small_img_item{
width: 6.8rem;
height: 6.8rem;
display: inline-block;
vertical-align: top;
}
.color_item{
display: inline-block;
vertical-align: top;
// padding: 0 0.5rem;
margin-right: 1.6rem;
margin-bottom: 0.5rem;
&:nth-child(4n){
margin-right: 0;
}
}
.color_content{
width: 9rem;
height:6.2rem
}
.color_content_body{
width: 9rem;
padding: 0.7rem 0.2rem;
background: #FEFEFE;
border: 1px solid #E6E6E6;
.color_des{
font-size: 1rem;
font-family: Roboto;
font-weight: 500;
color: #000000;
margin-bottom: 0.5rem;
line-height: 1.3rem;
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
&:last-child{
margin-bottom: 0;
}
}
}
.all_img_item_block{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
.all_img_content{
max-height: 100%;
max-width: 100%;
&.cover_img{
width: 100%;
height: 100%;
}
}
}
}
}
</style>

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

@@ -203,18 +203,6 @@ export default defineComponent({
designType:''
})
let workspace:any = ref({})
let sceneList = ref([
{
name:'Pattern',
value:'Pattern'
},{
name:'Slogan',
value:'Slogan'
},{
name:'Logo',
value:'Logo'
},
])
let scene = ref({
name:'Pattern',
value:'Pattern'
@@ -234,7 +222,6 @@ export default defineComponent({
userInfo,
useGenerate,
workspace,
sceneList,
scene,
openMenu,
printCatecoryList,
@@ -700,6 +687,8 @@ export default defineComponent({
.printMenu{
margin-right: 0;
margin-top: auto;
position: relative;
margin-left: 2rem;
>div{
width: 14rem;
font-size: var(--aida-fsize1-6);
@@ -707,6 +696,8 @@ export default defineComponent({
i{
transition: all .3s;
display: inline-block;
position: absolute;
right: 0;
}
.forbidden{
transform: rotate(180deg);

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

@@ -23,6 +23,19 @@
>
<span>{{ $t('SketchboardUpload.Generate') }}</span>
</div>
<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 sketchStyleList"
class="printModel_item"
@click.stop="setSceneList(item)"
:title="item.value == 'Pattern'?$t('PrintboardUpload.PatternTitle'):
item.value == 'Logo'?$t('PrintboardUpload.LogoTitle'):
item.value == 'Slogan'?$t('PrintboardUpload.SloganTitle'):''"
>{{ item.name }}</li>
</ul>
</div>
</div>
<div v-show="openClick == 1" class="sketchboard_body">
<div class="upload_img_body scroll_style">
@@ -113,6 +126,7 @@
v-show="openClick == 3"
ref="Generate"
msg="Sketchboard"
:scene="scene"
:sketchCatecoryList="sketchCatecoryList"
></Generate>
</div>
@@ -214,6 +228,14 @@ export default defineComponent({
level2Type:'',
designType:'',
})
let scene = ref({
name:'Generate Sketch',
value:'generate'
})
let openMenu = ref(false)
let sketchStyleList:any = computed(()=>{
return store.state.UserHabit.SketchGenerateType
})
return {
fileList,
openClick,
@@ -227,6 +249,9 @@ export default defineComponent({
isTest,
userInfo,
useGenerate,
scene,
openMenu,
sketchStyleList,
};
},
data() {
@@ -549,6 +574,23 @@ export default defineComponent({
}
this.store.commit("setSketchboardFile", this.fileList);
},
setSceneList(data:any){
if(this.scene.value === data.value) return
this.scene = data
let generate:any = this.$refs.Generate
generate.sketchboardList = []
generate.searchPictureName = ''
this.openMenu = false
},
openPrintModel(){
if(this.openMenu)return
document.addEventListener('click',this.removePrintModel)
this.openMenu = true
},
removePrintModel(){
this.openMenu = false
document.removeEventListener('click',this.removePrintModel)
}
},
});
</script>
@@ -610,6 +652,32 @@ export default defineComponent({
margin-right: calc(0.8rem*1.2);
}
}
.printMenu{
margin-right: 0;
margin-left: 2rem;
margin-top: auto;
position: relative;
>div{
width: 14rem;
font-size: var(--aida-fsize1-6);
border: 0;
i{
transition: all .3s;
display: inline-block;
position: absolute;
right: 0;
}
.forbidden{
transform: rotate(180deg);
}
}
ul{
width: 14rem;
}
}
.switch_type_item:nth-child(3){
margin: 0;
}
}
.sketchboard_body {
// height: calc(100% - 5rem*1.2));

112
src/component/HomePage/generalMenu.vue
View File

@@ -1,16 +1,56 @@
<template>
<div class="generalMenu_printModel">
<div @click.stop="openPrintModel" :class="driverClass.class1">{{ item.label }}</div>
<div @click.stop="openPrintModel" :class="driverClass.class1">
<a-popover>
<template #content>
<img style="width: 10rem;height: 10rem;object-fit: contain;" :src="item.img" alt="">
</template>
<span v-if="item.label">{{ item.label }}</span>
<span v-else>{{ item.name }}</span>
</a-popover>
</div>
<ul :class="driverClass.class2" v-show="openClick">
<li v-for="item,index in dataList" :class="{active:deleteItem == index}" class="printModel_item" @click="setprintModel(item,index)">{{ item.label }}</li>
<li v-for="item,index in dataList" :class="{active:deleteItem == index}" class="printModel_item" @click="setprintModel(item,index)">
<a-popover placement="right">
<template #content>
<img v-if="item.img != -1" style="width: 10rem;height: 10rem;object-fit: contain;" :src="item.img" alt="">
<div v-else-if="item.img == -1" class="generalMenu_printModel_upload ">
<i class="fi fi-br-upload input_border" style="width: 8rem; height: 8rem;padding: 0;" :title="$t('Generate.uploadTitle')">
<a-upload
style="height: 100%;"
class="search_upImg"
:capture="null"
:action="uploadUrl + '/api/element/upload'"
list-type="picture-card"
:data="{
...upload,
}"
:maxCount='1'
:headers="{ Authorization: token }"
accept=".jpg,.png,.jpeg,.bmp"
@change="(file) => fileUploadChange(file)"
>
</a-upload>
</i>
</div>
</template>
<span v-if="item.label">{{ item.label }}</span>
<span v-else>{{ item.name }}</span>
</a-popover>
</li>
</ul>
</div>
</template>
<script lang="ts">
import { defineComponent,ref ,nextTick} from "vue";
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { Https } from "@/tool/https";
import { openGuide,driverObj__ } from "@/tool/guide";
import { getUploadUrl } from "@/tool/util";
import { getCookie } from "@/tool/cookie";
import { message, Upload, Modal } from "ant-design-vue";
export default defineComponent({
name:'filterComponent',
props:{
@@ -37,7 +77,7 @@
setup(props:any,{emit}){
let selectIndex = ref(0)
let openClick = ref(false)
let store = useStore();
let openPrintModel = ()=>{
document.addEventListener('click',removePrintModel)
openClick.value = true
@@ -48,7 +88,10 @@
})
}
let setprintModel = (item:any,index:any)=>{
console.log(item.img);
if(props.deleteItem == index) return
if(item.img == -1) return
openClick.value = false
selectIndex = index
nextTick().then(()=>{
@@ -62,15 +105,69 @@
openClick.value = false
document.removeEventListener('click',removePrintModel)
}
let fileUploadChange = (data: any)=>{
let file = data.file;
let bor = true
if (file.status === "done") {
let res = JSON.parse(file.xhr.response);
if(res.errCode == 0){
file.type_ = "upload";
props.dataList.forEach((item:any)=>{
if(item.img == -1){
item.img = res.data.url
item.id = res.data.id
}
})
}else{
bor = false
}
} else if (file.status === "error") {
bor = false
}
if(!bor){
let res:any = JSON.parse(file.xhr.response);
// props.dataList.forEach((item:any)=>{
// if(item.img == -1){
// }
// })
message.warning(res.errMsg);
}
}
return {
selectIndex,
openClick,
store,
setprintModel,
openPrintModel,
fileUploadChange,
}
},
data(prop) {
return {
upload: {
isPin: 0,
gender:'',
level1Type: 'Sketchboard',
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
},
token: "",
uploadUrl: "",
type_: {
type1: "generate",
type2: 'Sketchboard',
},
workspaceCom:{},
isTextarea:false,
isInputFocus:false,
};
},
mounted() {
this.uploadUrl = getUploadUrl();
this.token = getCookie("token") || "";
this.upload.gender = this.store?.state?.Workspace?.workspace?.sexEnum?.value
}
});
</script>
<style lang="less">
@@ -122,4 +219,9 @@
}
}
}
.generalMenu_printModel_upload{
>i{
justify-content: center;
}
}
</style>

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

@@ -30,7 +30,7 @@
</div>
<div class="layout_centent" :class="{active:flex_direction}" id="layoutCentent">
<div v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem" v-layout="index" @mousedown="setpitch(item,index)" @touchstart="setpitch(item,index)" ref="content" >
<img crossOrigin="anonymous" :src="item.imgUrl" :style="{'transform':item.angle?`translate(-50%, -50%) scale(${item.zoom}) rotateZ(${item.angle}deg)`:`translate(-50%, -50%) scale(${item.zoom})`}" draggable="false" :class="moodbClassName[index]" v-modelImg>
<img crossOrigin="anonymous" :src="item.imgUrl" :style="{'transform':item.angle?`translate(-50%, -50%) scale(${item.zoom}) rotateZ(${item.angle}deg)`:`translate(-50%, -50%) scale(${item.zoom}) rotateZ(${item.angle}deg)`}" draggable="false" :class="moodbClassName[index]" v-modelImg>
<div>
</div>
@@ -39,7 +39,7 @@
<li class="layout_btn_bottom" v-compile.stop="'bottom'"></li>
<li class="layout_btn_left" v-compile.stop="'left'"></li>
<li class="layout_btn_right" v-compile.stop="'right'"></li>
<li class="layout_rotote" v-rotote.stop='item'></li>
<li class="layout_rotote" v-rotote.stop='item' :style="{'transform':`translate(-50%, -50%) rotateZ(${item.angle}deg)`}"></li>
<li class="layout_translate" v-translate.stop></li>
<!-- <li class="layout_translate" v-translate.stop></li> -->
<li class="layout_angle_tr" v-angle.stop = "'top'"></li>
@@ -372,7 +372,7 @@ export default defineComponent({
mounted(el,item){
let mouse = true;
let angle :any = 0
let num:any
let num:any = 1
let x = 0
let y = 0
let elParent = el.parentNode.parentNode
@@ -391,6 +391,8 @@ export default defineComponent({
var info = el.getBoundingClientRect();
let eX = info.x + info.width / 2;
let eY = info.y + info.height / 2;
num = item.value.zoom?item.value.zoom :1
angle = item.value.angle?item.value.angle:0
let mouseMove = function(event:MouseEvent){
let e:any = getMousePosition(event,false)
mouseMoveOperation(e)
@@ -406,8 +408,7 @@ export default defineComponent({
let x:any = e.clientX - X
let y:any = Y - e.clientY
angle = Math.atan2(x,y)*(180 / Math.PI)
elParent.firstElementChild.style.transform = "translate(-50%,-50%) scale("+ num + ") rotateZ("+ angle + "deg)"
el.style.transform = "translate(-50%,-50%) rotateZ("+ angle + "deg)"
item.value.angle = angle
}
};
@@ -432,25 +433,9 @@ export default defineComponent({
let timeSwitch = true
el.parentNode.addEventListener('mousemove', (e:MouseEvent) => {
el.parentNode.addEventListener('mousewheel',(e:MouseEvent) => {
if(document.defaultView){
let transform = document.defaultView.getComputedStyle(elParent.firstElementChild, null).transform.split('(')[1].split(',')
num = Number(transform[3])
}
num = item.value.zoom?item.value.zoom :1
angle = item.value.angle?item.value.angle:0
if(timeSwitch){
if(angle == 0){
function getRotationAngle(transformDom:any) {
if (!transformDom || transformDom === 'none') return null;
let transform = window.getComputedStyle(transformDom).transform;
const values = transform?.match(/matrix\(([^)]+)\)/);
if (values) {
const matrix = values[1].split(',').map(Number);
const angle = Math.atan2(matrix[1], matrix[0]) * (180 / Math.PI);
return angle >= 0 ? angle : angle + 360; // 确保角度为正值
}
return null;
}
angle = getRotationAngle(elParent.firstElementChild);
}
timeSwitch = false
if((e as WheelEvent).deltaY > 0){
if(num <= 1){
@@ -477,7 +462,6 @@ export default defineComponent({
let instance:any = item.instance
instance.moodItemScale = num * 100
item.value.zoom = num
elParent.firstElementChild.style.transform = "translate(-50%,-50%) scale("+ num + ") rotateZ("+ angle + "deg)"
}
});
});

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

@@ -102,15 +102,14 @@
</div>
<div class="scaleImage_content_imgBox" :class="{active:isComparison}">
<img v-if="isComparison" :src="scaleImageList[scaleImageIndex]?.sourceUrl">
<img :src="scaleImageList[scaleImageIndex]?.imgUrl">
<generalMiniCanvas v-if="isCanvas" :imgUrl="scaleImageList[scaleImageIndex]?.imgUrl" @submitBase64Data="submitBase64Data"></generalMiniCanvas>
<img v-else :src="scaleImageList[scaleImageIndex]?.imgUrl">
<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>
</div>
</div>
<div class="scaleImage_nav" @keydown="handleKeyDown">
<div class="nav_left">
<i class="fi fi-rr-arrow-small-left" @click="lastStep()"></i>
@@ -124,18 +123,9 @@
<i class="fi fi-rr-arrow-small-right" @click.stop="nextStep()"></i>
</div>
</div>
<!-- <div>
<a-button type="primary" @click="() => setVisible(true)">show image preview</a-button>
<a-image
:width="200"
:style="{ display: 'none' }"
:preview="{
visible,
onVisibleChange: setVisible,
}"
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
/>
</div> -->
<div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
</div>
</a-modal>
</template>
@@ -147,7 +137,9 @@ import { useStore } from "vuex";
import { downloadIamge } from "@/tool/util";
import { getCookie,setCookie } from "@/tool/cookie";
import generalMiniCanvas from "@/component/modules/generalMiniCanvas.vue";
export default defineComponent({
components:{generalMiniCanvas},
props:{
productData:{
type:Object,
@@ -156,7 +148,16 @@ export default defineComponent({
brightenValue:1,
upload:'',
},
}
},
isCanvas:{
type:Boolean,
default:false,
},
workspace:{
type:Object,
default:{
}
},
},
setup(props:any,{emit}) {
const store = useStore();
@@ -298,6 +299,27 @@ export default defineComponent({
});
}
}
let submitBase64Data = (rv:any)=>{
loadingShow.value = true
let data = {
"base64": rv,
"category": scaleImageList.value[scaleImageIndex.value]?.categoryValue,
"gender": props.workspace.sexEnum.value,
}
Https.axiosPost(Https.httpUrls.modifySketch, data).then(
(rv) => {
rv.imgUrl = rv.url
rv.status = 'Success'
rv.category = scaleImageList.value[scaleImageIndex.value]?.category
rv.categoryValue = scaleImageList.value[scaleImageIndex.value]?.categoryValue
delete rv.url
scaleImageList.value.unshift(rv)
loadingShow.value = false
}
).catch(res=>{
loadingShow.value = false
});
}
return {
...toRefs(productimg),
scaleImage,
@@ -313,6 +335,7 @@ export default defineComponent({
robotAssits,
getPrductimg,
removeProductimg,
submitBase64Data,
};
},
data() {
@@ -447,6 +470,7 @@ export default defineComponent({
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
.operate_icon{
font-size: 1.8rem;
color: #fff;
@@ -464,7 +488,7 @@ export default defineComponent({
}
.scaleImage_content:hover{
.scaleImage_content_imgBox:hover{
.img_operate_block{
opacity: 1;
}