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

2023-11-28-用户指引功能

Browse Source
This commit is contained in:
X1627315083
2023-11-28 16:21:00 +08:00
parent d206509d93
commit 1987ed7f15
26 changed files with 658 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,10 +1,11 @@
<template>
<div v-show="placementShow">
<a-modal class="models_placement_mobile_component"
<div v-if="placementShow">
<a-modal class="models_placement_component"
v-model:visible="placementShow"
:footer="null"
width="111.5rem"
:maskClosable="false"
:keyboard="false"
:centered="true"
>
<template #closeIcon>
@@ -12,55 +13,115 @@
</template>
<div class="models_placement_body" >
<div class="palcement_modal_header">
<div class="models_placement_title">{{ $t('ModelPlacementMobile.Registration') }}</div>
<div class="models_placement_title">{{ $t('ModelPlacement.Registration') }}</div>
<div class="placement_operate_list">
<div class="operate_item" v-show="locationList.length == 6" @click="submitPlacement">
<div class="icon iconfont icon-baocun1 operate_icon"></div>
<div class="operate_item_des">{{ $t('ModelPlacementMobile.Submit') }}</div>
<div class="operate_item_des">{{ $t('ModelPlacement.Submit') }}</div>
</div>
<div class="operate_item" v-show="locationList.length == 6" @click="printPreview">
<div class="icon iconfont icon-shengchengyulan operate_icon"></div>
<div class="operate_item_des">{{ $t('ModelPlacementMobile.Preview') }}</div>
<div class="operate_item_des">{{ $t('ModelPlacement.Preview') }}</div>
</div>
<div class="operate_item" v-show="perviewUrl" @click="backPreview">
<div class="icon iconfont icon-fanhui1 operate_icon"></div>
<div class="operate_item_des">{{ $t('ModelPlacementMobile.Back') }}</div>
<div class="operate_item_des">{{ $t('ModelPlacement.Back') }}</div>
</div>
<div class="operate_item" @click="restoreLocationList">
<div class="icon iconfont icon-huifu operate_icon"></div>
<div class="operate_item_des">{{ $t('ModelPlacementMobile.Restore') }}</div>
<div class="operate_item_des">{{ $t('ModelPlacement.Restore') }}</div>
</div>
</div>
</div>
<div class="models_placement_content" @touchmove="startMove($event)">
<div class="plcaement_point_content" v-if="userInfo.userId == 88 || userInfo.userId == 83">
<div class="placement_point_item" v-for="(point,index) in pointList" :key="index" >
<div class="plcaement_point_content" v-if="userInfo.userId == 88 || userInfo.userId == 83">
<div style="display: flex; align-items: center;">
<div style="display: flex; align-items: center;">
<input type="checkbox" model="false" @click="()=>{modelType = 'System'}">
{{ $t('ModelPlacement.System') }}
</div>
<div style="display: flex; align-items: center;">
<input type="checkbox" model="false" @click="()=>{modelType = 'Library'}">
{{ $t('ModelPlacement.Library') }}
</div>
</div>
</div>
<div class="models_placement_content">
<div class="plcaement_point_content">
<div class="select_block">
<a-select
ref="select"
v-model:value="sex"
:options="sexList"
>
<template #suffixIcon
><span
class="icon iconfont icon-xiala"
style="color: #343579"
></span
></template>
</a-select>
</div>
<div class="placement_point_item" v-for="(point,index) in pointList" :key="index" @touchmove="startMove($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>
</div>
<div class="placement_point_item placement_point_item_btn">
<span class="started_btn" @click="setPoint">{{ $t('ModelPlacement.Point') }}</span>
</div>
</div>
<div class="placement_content_operate_list">
<div class="placement_content_operate_item" @click="changeRemoveStatus">
<div class="placement_remove_point_block"></div>
<div class="placement_content_operate_des">Remove Point</div>
<div class="placement_content_operate_des">{{ $t('ModelPlacement.RemovePoint') }}</div>
</div>
</div>
<div class="placement_tip_content">Please change the pure white inside the mannequin for another color to enhance your experience</div>
<div class="placement_tip_content">{{ $t('ModelPlacement.mannequinHint') }}</div>
<div class="img_preview_block" >
<div class="perview_mark_loading" v-show="isShowMark">
<a-spin size="large" />
</div>
<div class="img_content_block" ref="imgbox">
<img class="placement_img" :src="perviewUrl || printObject?.url">
<div :class="['ponit_click',isRemoveStatus?'remove_point_click':'']" 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="placement_add_point_content" :style="{background:item.color}" v-show="!isRemoveStatus"></div>
<div class="icon iconfont icon-guanbi" v-show="isRemoveStatus"></div>
</div>
<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="placement_add_point_content" :style="{background:item.color}" v-show="!isRemoveStatus"></div>
<div class="icon iconfont icon-guanbi" v-show="isRemoveStatus"></div>
</div>
</div>
<vue-cropper
v-show="!perviewUrl"
ref="cropper"
:img="option.img"
:outputSize="option.outputSize"
:outputType="option.outputType"
:info="option.info"
:canScale="option.canScale"
:autoCrop="option.autoCrop"
:fixed="option.fixed"
:fixedNumber="option.fixedNumber"
:full="option.full"
:fixedBox="option.fixedBox"
:canMove="option.canMove"
:canMoveBox="option.canMoveBox"
:original="option.original"
:centerBox="option.centerBox"
:height="option.height"
:infoTrue="option.infoTrue"
:limitMinSize="option.limitMinSize"
:enlarge="option.enlarge"
@real-time="realTime"
:autoCropArea="1"
:autoCropHeight="option.autoCropHeight"
:autoCropWidth="option.autoCropWidth"
:mode="option.mode">
</vue-cropper>
<img class="placement_img" v-show="perviewUrl" :src="perviewUrl || printObject?.url">
</div>
</div>
@@ -71,13 +132,20 @@
</template>
<script lang="ts">
import { defineComponent,ref,createVNode} from 'vue'
import { defineComponent,ref,createVNode,nextTick} from 'vue'
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import {dataURLtoFile,base64toFile} from "@/tool/util"
import { getCookie } from "@/tool/cookie";
import 'vue-cropper/dist/index.css'
import { VueCropper } from "vue-cropper";
import { useStore } from "vuex";
import { Modal,message } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { useI18n } from 'vue-i18n';
export default defineComponent({
components:{
VueCropper,
},
setup() {
const store = useStore()
let oldLocationList:any = ref([])
@@ -91,6 +159,33 @@ export default defineComponent({
let isSubmit:any = ref(false) //判断历史是否有提交过
let manager:any = ref(false)
let userInfo:any = ref()
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%'
})
let {t} = useI18n()
return {
store,
oldLocationList,
@@ -103,7 +198,11 @@ export default defineComponent({
pointList,
isSubmit,
manager,
userInfo
userInfo,
cropperTime,
option,
t
}
},
data(){
@@ -120,7 +219,7 @@ export default defineComponent({
sex:'Male',
sexList: [
]
],
}
},
mounted(){
@@ -128,94 +227,202 @@ export default defineComponent({
this.userInfo = JSON.parse(userInfo);
this.getSex()
},
watch: {
sex:{
handler(newVal:any,oldVal:any){
// let imgbox:any = this.$refs.imgbox
// let imgBoxSizeBG = imgbox?.getElementsByClassName('cropper-view-box-BG')?.[0]
// if(imgBoxSizeBG){
// if(newVal == 'Male'){
// imgBoxSizeBG.style.background = `url(./image/maleBG.png) no-repeat 0 0 / 100% 100%`
// }else{
// imgBoxSizeBG.style.background = `url(./image/femaleBG.png) no-repeat 0 0 / 100% 100%`
// }
// }
},
},
},
methods:{
formatter(value:number){
return `${value}%`;
},
showPlacementModal(data:any){
this.placementShow = true
this.printObject = {
...data
}
this.option.img = this.printObject.url
setTimeout(()=>{
let imgbox:any = this.$refs.imgbox
let position = imgbox.getBoundingClientRect()
this.imgBox = {
width:imgbox.clientWidth,
height:imgbox.scrollHeight,
left : position.left,
top:position.top,
scrollTop:imgbox.scrollTop || 0,
}
this.getDefaultPointList(this.imgBox)
},400)
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]
let divTop:any = document.createElement('div');
let divBottom:any = document.createElement('div');
let divCenter:any = document.createElement('div');
if(imgbox.getElementsByClassName('cropper-view-box-Bg').length >= 1){
}else{
divTop.classList.add('cropper-view-box-Bg')
divBottom.classList.add('cropper-view-box-Bg')
divCenter.classList.add('cropper-view-box-Bg')
divTop.classList.add('cropper-view-box-Top')
divBottom.classList.add('cropper-view-box-Bottom')
divCenter.classList.add('cropper-view-box-Center')
imgBoxSizeBG.appendChild(divTop)
imgBoxSizeBG.appendChild(divBottom)
imgBoxSizeBG.appendChild(divCenter)
// imgBoxSizeBG.appendChild(div)
}
// imgBoxSize.style.backgroundImage = 'url('+require('@assets/images/library/lemaleBG.png')')'
let cropper:any = this.$refs.cropper
cropper.cropH = cropper.scale*cropper.trueHeight
cropper.cropW = cropper.cropH/2.125
cropper.cropOffsertX = cropper.getImgAxis().x1+(cropper.scale*cropper.trueWidth/2-cropper.cropW/2)
cropper.cropOffsertY = cropper.getImgAxis().y1
imgBoxSize.addEventListener('touchmove',this.startMove)
this.setImageSize()
this.getDefaultPointList(this.imgBox,' ')
})
},800)
},
realTime(data:any) {
clearTimeout(this.cropperTime)
this.cropperTime = setTimeout(()=>{
this.setImageSize()
},1000)
},
setImageSize(){
let imgbox:any = this.$refs.imgbox
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,
scrollTop:imgBoxSize.scrollTop || 0,
x:cropper.getCropAxis().x1,
y:cropper.getCropAxis().y1,
}
},
getSex(){
Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:'Sex'}}).then((rv: any) => {
if (rv) {
let arr:any = []
rv.forEach((item:any) => {
let obj = {
arr.push({
value:item.name,
label:item.value,
}
arr.push(obj)
})
});
this.sex = arr[0].value
this.sexList = arr
console.log(this.sexList);
}
})
},
//截屏框移动
setMove(){
},
//初始化可以使用的点位
getDefaultPointList(imgBox:any){
getDefaultPointList(imgBox:any,str:any){
this.isSubmit = false
this.locationList=[]
this.pointList = [
{
title:'SHOULDER',
title:this.t('ModelPlacement.SHOULDER'),
pointList:[{type:'shoulderLeft',color:'#6E70FF',show:true,field:'shoulder'},{type:'shoulderRight',color:'#6E70FF',show:true,field:'shoulder'}]
},
{
title:'WAISTBAND',
title:this.t('ModelPlacement.WAISTBAND'),
pointList:[{type:'waistbandLeft',color:'#6FCEFF',show:true,field:'waistband'},{type:'waistbandRight',color:'#6FCEFF',show:true,field:'waistband'}]
},
{
title:'HAND',
pointList:[{type:'handLeft',color:'#CCFF7B',show:true,field:'hand'},{type:'handRight',color:'#CCFF7B',show:true,field:'hand'}]
title:this.t('ModelPlacement.HAND'),
pointList:[{type:'handLeft',color:'#d88e8e',show:true,field:'hand'},{type:'handRight',color:'#d88e8e',show:true,field:'hand'}]
},
]
if(this.printObject.templateId){//编辑
for(let ponit of this.pointList){
for(let pointItem of ponit.pointList){
if(this.printObject[pointItem.type]?.length){
pointItem.show = false
let data = {
left:this.printObject[pointItem.type][0] * imgBox.width - 12,
top:this.printObject[pointItem.type][1] * imgBox.height - 12,
color:pointItem.color,
type:pointItem.type,
field:pointItem.field,
}
this.locationList.push(data)
}
}
}
if(str != 'setPoint'){//编辑
this.isSubmit = true
for(let ponit of this.pointList){
for(let pointItem of ponit.pointList){
if(this.printObject[pointItem.type]?.length){
pointItem.show = false
let data = {
left:this.printObject[pointItem.type][0] * imgBox.width - 12,
top:this.printObject[pointItem.type][1] * imgBox.height - 12,
color:pointItem.color,
type:pointItem.type,
field:pointItem.field,
}
this.locationList.push(data)
}
}
}
this.oldLocationList = JSON.parse(JSON.stringify(this.locationList))
}
// this.option.canScale = false
// this.option.canMove = false
this.oldPointList = JSON.parse(JSON.stringify(this.pointList))
this.oldLocationList = JSON.parse(JSON.stringify(this.locationList))
this.oldPointList = JSON.parse(JSON.stringify(this.pointList))
}else{
this.option.canScale = true
// this.option.fixedBox = false
this.option.canMove = true
// this.option.canMoveBox = true
}
},
setPoint(){
let file = this.printObject.file
let url = this.printObject.url
this.printObject = {
"shoulderLeft": [
0.3338,
0.1858
],
"shoulderRight": [
0.6644,
0.1858
],
"waistbandLeft": [
0.3758,
0.364
],
"waistbandRight": [
0.6103,
0.364
],
"handLeft": [
0.3277,
0.4687
],
"handRight": [
0.6764,
0.4715
],
file:file,
url:url
}
this.getDefaultPointList(this.imgBox,'setPoint')
},
AddDian(point:any){
if(!point.show){
return
}
this.startDian = true
this.startDian = true
this.isRemoveStatus = false
this.intObj = point
},
@@ -225,14 +432,14 @@ export default defineComponent({
},
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.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
@@ -242,8 +449,8 @@ export default defineComponent({
this.intObj = null
}else{
if(this.startDian){
this.currentSign.left = event.targetTouches[0].pageX - this.imgBox.left - this.moveOriginal.posX
this.currentSign.top = event.targetTouches[0].pageY + scrollTop - this.imgBox.top -this.moveOriginal.posY
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()
@@ -257,27 +464,32 @@ export default defineComponent({
// 在边界上的签名域处理
setBoundarySign() {
let imgbox:any = this.$refs.imgbox
let height = imgbox.offsetHeight + imgbox.scrollTop;
let imgBoxSize = imgbox.getElementsByClassName('cropper-crop-box')[0]
let top = (this.$refs.cropper as any).getCropAxis().y1
let left = (this.$refs.cropper as any).getCropAxis().x1
let height = imgBoxSize.offsetHeight;
// let height = imgBoxSize.offsetHeight + imgBoxSize.scrollTop;
// 2 为签名域的边框
let maxPosHeight = height - 24
let maxPosWidth = imgbox.clientWidth - 24 //+ this.signBox.paddLeft;
if (this.currentSign.top <= 0) {
let maxPosWidth = imgBoxSize.clientWidth - 24 //+ this.signBox.paddLeft;
if (this.currentSign.top+top <= 0) {
this.currentSign.top = 0
} else if (this.currentSign.top >= maxPosHeight ) {
this.currentSign.top = maxPosHeight;
} else if (this.currentSign.top >= maxPosHeight+top ) {
this.currentSign.top = maxPosHeight+top;
}
if (this.currentSign.left <= 0) {
if (this.currentSign.left+left <= 0) {
this.currentSign.left = 0
} else if (this.currentSign.left >= maxPosWidth) {
this.currentSign.left = maxPosWidth;
} else if (this.currentSign.left >= maxPosWidth+left) {
this.currentSign.left = maxPosWidth+left;
}
},
getMouseDown(event:any,item:any,index:number){
if(this.isRemoveStatus){
//删除
for(let itemPoint of this.pointList){
for(let point of itemPoint.pointList){
if(item.id == point.id){
if(item.type == point.type){
point.show = true
break
}
@@ -287,14 +499,16 @@ export default defineComponent({
}else{
this.currentSign = item
// 计算出鼠标在签名域上的偏移
this.moveOriginal.posX = event.targetTouches[0].pageX - this.imgBox.left - this.currentSign.left
// 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.startDian = true
}
},
getMouseOver(){
getMouseOver(){//鼠标抬起
this.startDian = false
this.currentSign = {}
document.removeEventListener('touchend', this.getMouseOver);
@@ -304,7 +518,7 @@ export default defineComponent({
let _this = this
if(!this.isSubmit){
Modal.confirm({
title: "You haven't marked the image yet, and the model will not be uploaded. Are you sure you want to close it?",
title: this.t('ModelPlacement.jsContent1'),
icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes',
cancelText: 'No',
@@ -318,6 +532,7 @@ export default defineComponent({
_this.currentSign = {}
_this.isRemoveStatus = false
_this.placementShow = false
_this.perviewUrl = ''
}
});
}else{
@@ -328,31 +543,65 @@ export default defineComponent({
_this.currentSign = {}
_this.isRemoveStatus = false
_this.placementShow = false
_this.perviewUrl = ''
}
},
restoreLocationList(){
this.locationList = []
this.pointList = JSON.parse(JSON.stringify(this.oldPointList))
this.locationList = JSON.parse(JSON.stringify(this.oldLocationList))
},
submitPlacement(){
if(this.printObject.templateId){
this.printObject.id = this.printObject.libraryId
this.confrimSubmit()
}else{
this.customRequest().then((rv:any)=>{
this.isShowMark = false
this.printObject.id = rv.id
this.confrimSubmit()
}).catch((res:any)=>{
this.isShowMark = false
})
}
// let cropper:any = this.$refs.cropper,
// that = this
// cropper.getCropData((data:any) => {
// // 转换为File对象
// let file = base64toFile(data,this.cropperFileData.name);
// this.$emit('handleCropperSuccess',{file:file, fileData:this.cropperFileData})
// })
let cropper:any = this.$refs.cropper,
that = this
if(this.modelType == 'System' && this.userInfo.userId == 88 || this.userInfo.userId == 83){
if(this.printObject.templateId){
this.printObject.id = this.printObject.relationId
this.confrimSubmit()
}else{
this.customRequest().then((rv:any)=>{
this.isShowMark = false
this.printObject.id = rv.id
this.confrimSubmit()
}).catch((res:any)=>{
this.isShowMark = false
})
}
}else{
cropper.getCropData(async (value:any) => {
// 转换为File对象
if(this.printObject.templateId){
this.printObject.id = this.printObject.relationId
this.confrimSubmit()
}else{
let file:any = base64toFile(value,this.printObject.file.name);
file.uid = this.printObject.file.uid
this.printObject.file = file
this.customRequest().then((rv:any)=>{
this.isShowMark = false
this.printObject.id = rv.id
this.confrimSubmit()
}).catch((res:any)=>{
this.isShowMark = false
})
}
})
}
},
confrimSubmit(){
let param = {
libraryId:this.printObject.id,
templateId:this.printObject.templateId || null,
@@ -364,6 +613,7 @@ export default defineComponent({
if(this.userInfo.userId == 88 || this.userInfo.userId == 83){
param.modelType = this.modelType
}
this.isShowMark = true
Https.axiosPost(Https.httpUrls.saveOrEditTemplatePoint, param).then(
(rv: any) => {
@@ -380,22 +630,21 @@ export default defineComponent({
customRequest(){
let new_data = {
file:this.printObject.file,
checkMd5:1,
level1Type:'Models',
sex:this.sex,
modelType:'',
level2Type:'',
checkMd5:1,
sex:this.sex,
modelType:'Library',
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
}
this.isShowMark = true
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(
(rv: any) => {
// resolve(rv)
if(!rv.checkMd5){
resolve(this.affirmCstomRequest(new_data))
}else{
@@ -406,12 +655,13 @@ export default defineComponent({
reject(res)
});
})
},
affirmCstomRequest(data:any){
let _this = this
return new Promise((resolve,reject)=>{
Modal.confirm({
title: 'This picture has been uploaded whether to continue uploading？ ',
title: this.t('ModelPlacement.jsContent2'),
icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes',
cancelText: 'No',
@@ -434,7 +684,6 @@ export default defineComponent({
});
})
},
getPrintLocation(){
let {width , height} = this.imgBox
let locationData:any = {}
@@ -464,31 +713,28 @@ export default defineComponent({
},
printPreview(){
// this.printObject.scale = this.placement_sacle / 100
// this.printObject.location = this.printObject.ifSingle ? this.getPrintLocation() : []
// let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
// designItemDetail.clothes[this.collectionIndex] = this.clothesData
// delete designItemDetail.designItemUrl
// let priority = designItemDetail.clothes.map((v:any)=>{
// return v.type
// })
// let data = {
// ...designItemDetail,
// priority:priority,
// timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
// }
// if(this.isShowMark){
// return
// }
// this.isShowMark = true
// Https.axiosPost(Https.httpUrls.detailPrintDot, data).then(
// (rv: any) => {
// this.perviewUrl = rv
// this.isShowMark = false
// }
// ).catch(res=>{
// this.isShowMark = false
// });
let file = this.printObject.templateId ? null :this.printObject.file,
models = {
libraryId:this.printObject.libraryId || null,
templateId:this.printObject.templateId || null,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
...this.getPrintLocation()
}
let formData = new FormData();
formData.append('file', file);
formData.append("models", new Blob([JSON.stringify(models)], {type: "application/json"}));
if(this.isShowMark){
return
}
this.isShowMark = true
Https.axiosPost(Https.httpUrls.libraryModelsDot, formData,{headers:{'Content-Type': 'multipart/form-data'}}).then(
(rv: any) => {
this.perviewUrl = rv
this.isShowMark = false
}
).catch(res=>{
this.isShowMark = false
});
},
backPreview(){
@@ -498,7 +744,7 @@ export default defineComponent({
})
</script>
<style lang="less">
.models_placement_mobile_component{
.models_placement_component{
.ant-modal-close{
width: 3.6rem;
@@ -596,7 +842,39 @@ export default defineComponent({
left: 0;
top:18.4rem;
padding: 3rem 2.7rem 0 1.4rem;
.select_block{
// background: #FFFFFF;
overflow: hidden;
margin-bottom: 3rem;
color: #1A1A1A !important;
.ant-select{
width: 100%;
.ant-select-selector{
padding: 0;
width: 100%;
margin: 0;
background: rgba(0, 0, 0, 0);
font-size: 1.3rem;
color: #64686D;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
height: 3rem;
.ant-select-selection-item, .select_block .ant-select-single .ant-select-selector .ant-select-selection-placeholder{
font-weight: 300 !important;
line-height: 1.5715 !important;
width: 100%;
display: block;
position: relative;
padding: 0;
}
}
}
.icon-xiala{
color: #1A1A1A !important;
}
}
.placement_point_item{
display: flex;
justify-content: space-between;
@@ -639,6 +917,13 @@ export default defineComponent({
}
}
}
&.placement_point_item_btn{
display: flex;
justify-content: center;
.started_btn{
}
}
}
}
@@ -709,7 +994,7 @@ export default defineComponent({
user-select:none;
-moz-user-select:none;
position: relative;
height: 57.6rem;
.img_content_block{
width: 40.8rem;
height: 100%;
@@ -720,6 +1005,34 @@ export default defineComponent({
position: relative;
&::-webkit-scrollbar { width: 0 !important }
.cropper-view-box-Bg{
width: 100%;
position: absolute;
}
.cropper-view-box-Top{
// border-top: 1px dashed;
/*虚线2 css*/
background: linear-gradient(to left,transparent 0%,transparent 50%,#646464 50%,#646464 100%);background-size: 10px 1px;background-repeat: repeat-x;
height: 1rem;
opacity: .4;
top: 6%;
}
.cropper-view-box-Bottom{
bottom: 6%;
// border-top: 1px dashed;
height: 1rem;
opacity: .4;
background: linear-gradient(to left,transparent 0%,transparent 50%,#646464 50%,#646464 100%);background-size: 10px 1px;background-repeat: repeat-x;
}
.cropper-view-box-Center{
// border-left: 1px dashed;
left: 50%;
opacity: .4;
background: linear-gradient(to bottom,transparent 0%,transparent 50%,#646464 50%,#646464 100%);background-size: 1px 10px;background-repeat: repeat-y;
top: 0;
width: 1rem;
height: 100%;
}
}
.perview_mark_loading{
@@ -755,7 +1068,7 @@ export default defineComponent({
-o-user-select:none; /* Opera私有属性 */
user-select:none; /* CSS3属性 */
cursor: pointer;
z-index: 22;
&.remove_point_click{
border-color: transparent;
background: #EF3C3C;