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

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%;