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

fix

Browse Source
This commit is contained in:
wxd
2024-10-04 11:29:50 +08:00
parent 12b9dbdfbf
commit 026e71c0a4
7 changed files with 221 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -266,7 +266,7 @@ export default defineComponent({
modelImg:{
mounted(el) {
let parentNode = el.parentNode
if(parentNode.offsetHeight > parentNode.offsetWidth){
if(parentNode.offsetHeight >= parentNode.offsetWidth){
el.style.height = 100+'%'
el.style.width = 'auto'
}else{
@@ -276,7 +276,7 @@ export default defineComponent({
},
updated (el) {
let parentNode = el.parentNode
if(parentNode.offsetHeight > parentNode.offsetWidth){
if(parentNode.offsetHeight >= parentNode.offsetWidth){
el.style.height = 100+'%'
el.style.width = 'auto'
}else{

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

@@ -667,7 +667,7 @@ export default defineComponent({
modelImg:{
mounted(el) {
let parentNode = el.parentNode
if(parentNode.offsetHeight > parentNode.offsetWidth){
if(parentNode.offsetHeight >= parentNode.offsetWidth){
el.style.height = 100+'%'
el.style.width = 'auto'
}else{
@@ -677,7 +677,7 @@ export default defineComponent({
},
updated (el) {
let parentNode = el.parentNode
if(parentNode.offsetHeight > parentNode.offsetWidth){
if(parentNode.offsetHeight >= parentNode.offsetWidth){
el.style.height = 100+'%'
el.style.width = 'auto'
}else{

236
src/component/LibraryPage/ModelPlacementMobile.vue
View File

@@ -48,7 +48,7 @@
<div class="models_placement_content">
<div class="plcaement_point_content">
<div class="select_block">
<a-select
<!-- <a-select
ref="select"
v-model:value="sex.value"
:options="sexList"
@@ -59,12 +59,13 @@
style="color: #343579"
></span
></template>
</a-select>
</a-select> -->
<div>{{ sex.label }}</div>
</div>
<div class="placement_point_item" v-for="(point,index) in pointList" :key="index" @touchmove="startMove($event)">
<div class="placement_point_item" v-for="(point,index) in pointList" :key="index" @touchmove="touchmove($event)">
<div class="ponit_title">{{point.title}}</div>
<div class="point_list">
<div class="point_item" v-for="item in point.pointList" :key="item.color" :style="{borderColor:item.color,visibility:item.show?'inherit':'hidden'}" @touchstart="AddDian(item)"><div class="point_block" :style="{background:item.color}"></div></div>
<div class="point_item" v-for="item in point.pointList" :key="item.color" :style="{borderColor:item.color,visibility:item.show?'inherit':'hidden'}" @mousedown="AddDian(item)" @touchstart="AddDian(item)"><div class="point_block" :style="{background:item.color}"></div></div>
</div>
</div>
<div class="placement_point_item placement_point_scale">
@@ -92,7 +93,7 @@
<div class="img_content_block" ref="imgbox">
<div :style="{width: imgBox.width+'px', height:imgBox.height +'px',top:imgBox.y+'px',left:imgBox.x+'px',position:'absolute'}">
<div :class="['ponit_click',isRemoveStatus?'remove_point_click':'']" v-show="!perviewUrl" v-for="(item,index) in locationList" :key="item" :style="{left:item.left+'px', top:item.top+'px',borderColor:item.color}" @touchstart="getMouseDown($event,item,index)" @touchmove="startMove($event)">
<div :class="['ponit_click',isRemoveStatus?'remove_point_click':'']" v-show="!perviewUrl" v-for="(item,index) in locationList" :key="item" :style="{left:item.left+'px', top:item.top+'px',borderColor:item.color}" @mousedown="getMouseDown($event,item,index)" @touchstart="getMouseDown(getMousePosition($event),item,index)" @mousemove="mouseMove($event)" @touchmove="touchmove($event)">
<div class="placement_add_point_content" :style="{background:item.color}" v-show="!isRemoveStatus"></div>
<div class="icon iconfont icon-guanbi" v-show="isRemoveStatus"></div>
</div>
@@ -145,6 +146,7 @@ import { VueCropper } from "vue-cropper";
import { useStore } from "vuex";
import { Modal,message } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { getMousePosition } from "@/tool/mdEvent";
import { useI18n } from 'vue-i18n';
export default defineComponent({
components:{
@@ -168,32 +170,7 @@ export default defineComponent({
])
let cropperTime:any = ref()
let option:any = ref({
img: '', //裁剪图片的地址
outputSize: 1, //裁剪生成图片的质量(可选0.1 - 1)
outputType: 'png', //裁剪生成图片的格式（jpeg || png || webp）
info: false, //图片大小信息
canScale: true, //图片是否允许滚轮缩放
autoCrop: true, //是否默认生成截图框
autoCropWidth: '0', //默认生成截图框宽度
autoCropHeight: '0', //默认生成截图框高度
fixed: true, //是否开启截图框宽高固定比例
fixedBox: true, //固定截图框大小，不允许改变
fixedNumber: [1, 2.125], //截图框的宽高比例
full: false, //false按原比例裁切图片，不失真
canMove: true, //上传图片是否可以移动
canMoveBox: false, //截图框能否拖动
original: false, //上传图片按照原始比例渲染
centerBox: false, //截图框是否被限制在图片里面
height: true, //是否按照设备的dpr 输出等比例图片
infoTrue: true, //true为展示真实输出图片宽高，false展示看到的截图框宽高
maxImgSize:'2000', //限制图片最大宽度和高度
enlarge: 7, //图片根据截图框输出比例倍数
mode: 'auto 90%', //图片默认渲染方式
limitMinSize:'100%',
imgLoad:()=>{
}
})
let {t} = useI18n()
return {
store,
@@ -211,8 +188,9 @@ export default defineComponent({
sex,
sexList,
cropperTime,
option,
t
t,
getMousePosition
}
},
data(){
@@ -226,21 +204,48 @@ export default defineComponent({
perviewUrl:'',//预览的图片地址
isShowMark:false,
modelType:'Library',
option:{
img: '', //裁剪图片的地址
outputSize: 1, //裁剪生成图片的质量(可选0.1 - 1)
outputType: 'png', //裁剪生成图片的格式（jpeg || png || webp）
info: false, //图片大小信息
canScale: true, //图片是否允许滚轮缩放
autoCrop: true, //是否默认生成截图框
autoCropWidth: '0', //默认生成截图框宽度
autoCropHeight: '0', //默认生成截图框高度
fixed: true, //是否开启截图框宽高固定比例
// fixedBox: false, //固定截图框大小，不允许改变//上传系统模特使用
fixedBox: true, //固定截图框大小，不允许改变
fixedNumber: [1, 2.125], //截图框的宽高比例
full: false, //false按原比例裁切图片，不失真
// canMove: false, //上传图片是否可以移动//上传系统模特使用
canMove: true, //上传图片是否可以移动
canMoveBox: false, //截图框能否拖动
original: false, //上传图片按照原始比例渲染
centerBox: false, //截图框是否被限制在图片里面
height: true, //是否按照设备的dpr 输出等比例图片
infoTrue: true, //true为展示真实输出图片宽高，false展示看到的截图框宽高
maxImgSize:'2000', //限制图片最大宽度和高度
enlarge: 7, //图片根据截图框输出比例倍数
mode: 'auto 90%', //图片默认渲染方式
limitMinSize:'100%',
imgLoad:()=>{
}
},
}
},
mounted(){
let userInfo:any = getCookie("userInfo")
this.userInfo = JSON.parse(userInfo);
// this.getSex()
this.option.imgLoad = ()=>{
this.setImageSize()
}
},
methods:{
formatter(value:number){
return `${value}%`;
},
showPlacementModal(data:any,sex:any){
// this.sex = arr[0].value
this.sex = sex
this.placementShow = true
this.printObject = {
@@ -250,6 +255,8 @@ export default defineComponent({
setTimeout(()=>{
nextTick().then(()=>{
let image:any = new Image()
image.src = this.option.img
let imgbox:any = this.$refs.imgbox
let imgBoxSize = imgbox.getElementsByClassName('cropper-crop-box')[0]
let imgBoxSizeBG = imgbox.getElementsByClassName('cropper-view-box')[0]
@@ -272,7 +279,8 @@ export default defineComponent({
}
// imgBoxSize.style.backgroundImage = 'url('+require('@assets/images/library/lemaleBG.png')')'
imgBoxSize.addEventListener('touchmove',this.startMove)
imgBoxSize.addEventListener('mousemove',this.mouseMove)
imgBoxSize.addEventListener('touchmove',this.touchmove)
this.setImageSize()
})
},800)
@@ -288,26 +296,32 @@ export default defineComponent({
cropper.cropOffsertX = cropper.getImgAxis().x1+(cropper.scale*cropper.trueWidth/2-cropper.cropW/2)
cropper.cropOffsertY = cropper.getImgAxis().y1
}
},
realTime(data:any) {
this.cropperTime = setTimeout(()=>{
this.setImageSize()
clearTimeout(this.cropperTime)
},100)
let cropper:any = this.$refs.cropper
// if(cropper.h == cropper.cropH){
this.cropperTime = setTimeout(()=>{
this.setImageSize()
clearTimeout(this.cropperTime)
},100)
// }
},
setImageSize(){
this.setCropperWH()
let imgbox:any = this.$refs.imgbox
let imgBoxSize = imgbox.getElementsByClassName('cropper-crop-box')?.[0]
let imgBoxSize = imgbox.getElementsByClassName('cropper-crop-box')[0]
let position = imgBoxSize.getBoundingClientRect()
let position1 = imgbox.getBoundingClientRect()
let cropper:any = this.$refs.cropper
this.imgBox = {
width:cropper.cropW,
height:cropper.cropH,
left : position.left,
top:position.top,
left : position1.left,
top:position1.top,
scrollTop:imgBoxSize.scrollTop || 0,
x:cropper.getCropAxis().x1,
y:cropper.getCropAxis().y1,
@@ -323,7 +337,6 @@ export default defineComponent({
label:item.value,
})
});
// this.sex = arr[0].value
this.sexList = arr
}
})
@@ -425,31 +438,40 @@ export default defineComponent({
changeRemoveStatus(){
this.isRemoveStatus = true
},
mouseMove(event:any){
let e = getMousePosition(event,false)
this.startMove(e)
},
touchmove(event:any){
let e = getMousePosition(event,true)
this.startMove(e)
},
startMove(event:any){
if(this.isRemoveStatus){
if(this.isRemoveStatus){
return
}
let imgbox:any = this.$refs.imgbox
let scrollTop = imgbox.scrollTop;
if(event.targetTouches[0].pageX > this.imgBox.left){
if(this.intObj){
this.currentSign.left = event.targetTouches[0].pageX - this.imgBox.left
this.currentSign.top = event.targetTouches[0].pageY + scrollTop - this.imgBox.top
this.currentSign.color = this.intObj.color
this.currentSign.type= this.intObj.type
this.currentSign.field = this.intObj.field
this.locationList.push(this.currentSign)
this.intObj.show = false
this.intObj = null
}else{
if(this.startDian){
this.currentSign.left = event.targetTouches[0].pageX - this.imgBox.left -12
this.currentSign.top = event.targetTouches[0].pageY + scrollTop - this.imgBox.top -12
document.addEventListener('touchend', this.getMouseOver);
this.$forceUpdate()
this.setBoundarySign()
}
let imgBoxSize = imgbox.getElementsByClassName('cropper-crop-box')[0]
let scrollTop = imgBoxSize.scrollTop;
if(this.intObj){
this.currentSign.left = event.clientX - this.imgBox.left
this.currentSign.top = event.clientY + scrollTop - this.imgBox.top
this.currentSign.color = this.intObj.color
this.currentSign.type= this.intObj.type
this.currentSign.field = this.intObj.field
this.locationList.push(this.currentSign)
this.intObj.show = false
this.intObj = null
}else{
//鼠标移动
if(this.startDian){
this.currentSign.left = event.clientX - this.imgBox.left - this.imgBox.x - this.moveOriginal.posX -12
this.currentSign.top = event.clientY + scrollTop - this.imgBox.top - this.imgBox.y -this.moveOriginal.posY -12
document.addEventListener('mouseup', this.getMouseOver);
document.addEventListener('touchend', this.getMouseOver);
this.$forceUpdate()
this.setBoundarySign()
}
}
},
@@ -496,8 +518,9 @@ export default defineComponent({
// 计算出鼠标在签名域上的偏移
// this.moveOriginal.posX = event.offsetX
// this.moveOriginal.posY = event.offsetY // 1为边框
this.moveOriginal.posX = event.targetTouches[0].pageX - this.imgBox.left - this.currentSign.left
this.moveOriginal.posY = event.targetTouches[0].pageY - this.imgBox.top- this.currentSign.top // 1为边框
this.moveOriginal.posX = 0
this.moveOriginal.posY = 0 // 1为边框
this.startDian = true
}
@@ -506,7 +529,10 @@ export default defineComponent({
getMouseOver(){//鼠标抬起
this.startDian = false
this.currentSign = {}
document.removeEventListener('touchend', this.getMouseOver);
document.removeEventListener('mouseup', this.getMouseOver);
document.removeEventListener('touchend', this.getMouseOver);
document.removeEventListener('mousemove',this.mouseMove)
document.removeEventListener('touchmove',this.touchmove)
},
closeModal(){
@@ -546,6 +572,7 @@ export default defineComponent({
this.locationList = []
this.pointList = JSON.parse(JSON.stringify(this.oldPointList))
this.locationList = JSON.parse(JSON.stringify(this.oldLocationList))
// this.locationList = JSON.parse(JSON.stringify(this.locationList))
},
submitPlacement(){
@@ -558,7 +585,7 @@ export default defineComponent({
// this.$emit('handleCropperSuccess',{file:file, fileData:this.cropperFileData})
// })
let cropper:any = this.$refs.cropper,
that = this
that = this
if((this.modelType == 'System' && this.userInfo.userId == 88) || (this.modelType == 'System' &&this.userInfo.userId == 83)){
if(this.printObject.templateId){
this.printObject.id = this.printObject.relationId
@@ -599,20 +626,20 @@ export default defineComponent({
let cropper:any = this.$refs.cropper
cropper.changeScale(num);
},
confrimSubmit(){
async confrimSubmit(){
let modelType = 'Library'
if(this.userInfo.userId == 88 || this.userInfo.userId == 83){
modelType = this.modelType
}
let param = {
libraryId:this.printObject.id,
templateId:this.printObject.templateId || null,
modelType:'Library',
modelType:modelType,
modelSex:this.sex,
checkMd5:1,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
...this.getPrintLocation()
...await this.getPrintLocation()
}
if(this.userInfo.userId == 88 || this.userInfo.userId == 83){
param.modelType = this.modelType
}
this.isShowMark = true
Https.axiosPost(Https.httpUrls.saveOrEditTemplatePoint, param).then(
@@ -628,19 +655,19 @@ export default defineComponent({
},
customRequest(){
let modelType = 'Library'
if(this.userInfo.userId == 88 || this.userInfo.userId == 83){
modelType = this.modelType
}
let new_data = {
file:this.printObject.file,
level1Type:'Models',
level2Type:'',
checkMd5:1,
sex:this.sex,
modelType:'Library',
modelType:modelType,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
}
if(this.userInfo.userId == 88 || this.userInfo.userId == 83){
new_data.modelType = this.modelType
new_data.sex = this.sex
}
this.isShowMark = true
return new Promise((resolve,reject)=>{
Https.axiosPost(Https.httpUrls.libraryUpload, new_data,{headers:{'Content-Type': 'multipart/form-data'}}).then(
@@ -684,11 +711,26 @@ export default defineComponent({
});
})
},
getPrintLocation(){
async getPrintLocation(){
let {width , height} = this.imgBox
console.log(width,height);
// if(this.modelType == 'System'){
// await new Promise((resolve, reject) => {
// let img = new Image()
// img.src = this.option.img
// img.onload = () => {
// width = img.width
// height = img.height
// resolve(true)
// }
// })
// }
let locationData:any = {}
let returnData:any = {}
let newLocationList = JSON.parse(JSON.stringify(this.locationList))
//进行字段归类
for(let item of newLocationList){
locationData[item.field] = locationData[item.field] || []
@@ -703,6 +745,8 @@ export default defineComponent({
returnData[v.type] = [v.left, v.top]
});
}
console.log(returnData);
return returnData
},
@@ -712,17 +756,17 @@ export default defineComponent({
}
},
printPreview(){
async printPreview(){
let file = this.printObject.templateId ? null :this.printObject.file,
models = {
libraryId:this.printObject.relationId || null,
templateId:this.printObject.templateId || null,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
sex:this.sex,
...this.getPrintLocation()
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
...await this.getPrintLocation()
}
let cropper:any = this.$refs.cropper
cropper.getCropData((value:any)=>{
let cropper:any = this.$refs.cropper
await cropper.getCropData((value:any)=>{
file = base64toFile(value,this.printObject.name);
file.uid = this.printObject.file?.uid?this.printObject.file.uid:''
let formData = new FormData();
@@ -731,7 +775,7 @@ export default defineComponent({
if(this.isShowMark){
return
}
// this.isShowMark = true
this.isShowMark = true
Https.axiosPost(Https.httpUrls.libraryModelsDot, formData,{headers:{'Content-Type': 'multipart/form-data'}}).then(
(rv: any) => {
this.perviewUrl = rv
@@ -741,6 +785,8 @@ export default defineComponent({
this.isShowMark = false
});
})
},
backPreview(){
@@ -788,7 +834,7 @@ export default defineComponent({
.models_placement_body{
width: 100%;
height: 100%;
overflow: hidden;
.palcement_modal_header{
position: relative;
height: 6.6rem;
@@ -850,7 +896,6 @@ export default defineComponent({
padding: 3rem 2.7rem 0 1.4rem;
.select_block{
// background: #FFFFFF;
overflow: hidden;
margin-bottom: 3rem;
color: #1A1A1A !important;
.ant-select{
@@ -881,7 +926,6 @@ export default defineComponent({
color: #1A1A1A !important;
}
}
.placement_point_item{
display: flex;
justify-content: space-between;
@@ -959,7 +1003,7 @@ export default defineComponent({
position: absolute;
right: 0;
top:18.4rem;
.placement_content_operate_item{
padding: 1.5rem 0;
text-align: center;
@@ -1021,7 +1065,7 @@ export default defineComponent({
-moz-user-select:none;
position: relative;
height: 57.6rem;
.img_content_block{
.img_content_block{
width: 40.8rem;
height: 100%;
max-height: 63.2rem;
@@ -1075,7 +1119,7 @@ export default defineComponent({
.vue-cropper{
.cropper-crop-box{
background: #fff;
pointer-events: none;
}
}
}
@@ -1095,7 +1139,7 @@ export default defineComponent({
}
.placement_img{
height: 100%;
height: 100%;
width: auto;
position: relative;
left: 50%;

87
src/component/WorksPage/publish.vue
View File

@@ -33,11 +33,30 @@
<div class="publidh_right">
<div class="publidh_right_name publidh_content_item">
<div class="publidh_content_item_title">{{$t('Publish.CollectionTitle')}}</div>
<input type="text" :disabled="selectTagList.length > 0" v-model="subPublishDate.portfolioName">
<!-- <div class="publidh_content_item_tag">
<a-tag closable color="purple">#RCAworkshop_2024</a-tag>
</div> -->
</div>
<div class="publidh_right_name publidh_content_item">
<div class="publidh_content_item_title">{{$t('Publish.topic')}}</div>
<div class="publidh_content_item_tag">
<input type="text" v-model="subPublishDate.portfolioName">
<a-tag closable color="purple">#RCAworkshop_2024</a-tag>
<div v-for="item,index in selectTagList">
<a-tooltip v-if="index > 4" :title="+'+'+selectTagList.length - 4">
<a-tag closable color="purple" @close="handleClose(item,index)">
{{ item.tag }}
</a-tag>
</a-tooltip>
<a-tag v-else closable color="purple" @close="handleClose(item,index)">
{{ item.tag }}
</a-tag>
</div>
</div>
<div class="publidh_content_item_tagList">
<div v-for="item,index in tagList" @click="pushTag(item,index)">
<a-tag color="purple">{{ item.tag }}</a-tag>
</div>
</div>
<a-tag color="purple">#RCAworkshop_2024</a-tag>
</div>
<div class="publidh_right_name publidh_content_item">
<div class="publidh_content_item_title">{{$t('Publish.Description')}}</div>
@@ -127,6 +146,8 @@ export default defineComponent({
isSecondaryCreation:true,
}
})
let tagList = ref([{tag:'RCAworkshop_2024'}])
let selectTagList:any = ref([])
// let textarea: any = ref(null)
// let setCopy = ()=>{
// textarea.value.select()
@@ -178,6 +199,7 @@ export default defineComponent({
publish.value = false
publishData.isShowMark = false
publishData.subPublishDate = {}
selectTagList.value = []
}
let cancelDsign = ()=>{
Modal.confirm({
@@ -237,13 +259,25 @@ export default defineComponent({
});
}
let handleClose = (tag:any,index:number)=>{
let selectTag = selectTagList.value.splice(index,1)[0]
tagList.value.push(selectTag)
}
let pushTag = (tag:any,index:number)=>{
let selectTag = tagList.value.splice(index,1)[0]
selectTagList.value.push(selectTag)
if(tag.tag == 'RCAworkshop_2024'){
publishData.subPublishDate.portfolioName = 'AiDA x RCA workshop'
}
}
return {
publish,
publishMask,
...toRefs(publishData),
// textarea,
// setCopy,
tagList,
selectTagList,
init,
setPermissionsItem,
setPermissions,
@@ -253,6 +287,8 @@ export default defineComponent({
setCover,
cancelDsign,
setPublish,
handleClose,
pushTag,
};
},
data() {
@@ -287,15 +323,15 @@ export default defineComponent({
// top: 50%;
// transform: translateY(-50%);
}
.publidh_content_item_tag{
position: relative;
.ant-tag{
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
}
}
// .publidh_content_item_tag{
// position: relative;
// .ant-tag{
// position: absolute;
// left: 10px;
// top: 50%;
// transform: translateY(-50%);
// }
// }
.publish_content_bottom{
--border-color: #c4c4c4;
display: flex;
@@ -313,6 +349,31 @@ export default defineComponent({
font-size: 1.8rem;
margin-bottom: 1rem;
}
.publidh_content_item_tagList,.publidh_content_item_tag{
// height: 4rem;
border-radius: 1rem;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.publidh_content_item_tagList{
margin-top: 1rem;
.ant-tag{
cursor: pointer;
margin-bottom: 8px;
}
}
.publidh_content_item_tag{
border: .2rem solid var(--border-color);
// height: 4rem;
padding: 2rem;
padding-right: 0rem;
.ant-tag{
cursor: pointer;
margin-bottom: 8px;
}
}
.publidh_content_item_intro{
font-size: 1.4rem;

1
src/lang/cn.ts
View File

@@ -530,6 +530,7 @@ export default {
Publish:'发布',
CoverPicture:'封面图',
CollectionTitle:'系列名字',
topic:'话题',
Description:'描述',
Permissions:'权限',
PermissionsItem1:'允许其他用户进行二次创作。',

1
src/lang/en.ts
View File

@@ -530,6 +530,7 @@ export default {
Publish:'Publish',
CoverPicture:'Cover Picture',
CollectionTitle:'Collection Title',
topic:'Topic',
Description:'Description',
Permissions:'Permissions',
PermissionsItem1:'Allow other users to perform secondary creation.',

2
src/views/HomeView/HomeView.vue
View File

@@ -968,7 +968,7 @@ export default defineComponent({
name:data.collection.moodTemplateName,
}
}]:[],
moodboardPosition:data.collection.moodboardPosition?JSON.parse(data.collection.moodboardPosition):{},
moodboardPosition:data.collection.moodboardPosition?JSON.parse(data.collection.moodboardPosition):JSON.stringify({}),
moodboardFiles: this.dealViewChooseData(
data.collection.moodBoards,"Moodboard"
),