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

first commit

Browse Source
This commit is contained in:
LiaoFJ
2023-01-06 16:00:15 +08:00
parent d196571ac8
commit e54be8d510
66 changed files with 36155 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

708
src/component/LibraryPage/ModelPlacement.vue Normal file
View File

@@ -0,0 +1,708 @@
<template>
<div v-show="placementShow">
<a-modal class="models_placement_component"
v-model:visible="placementShow"
:footer="null"
width="111.5rem"
:maskClosable="false"
:centered="true"
>
<template #closeIcon>
<div class="close_icon" @click.stop="closeModal()"><span class="icon iconfont icon-guanbi"></span></div>
</template>
<div class="models_placement_body" >
<div class="palcement_modal_header">
<div class="models_placement_title">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">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">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">Back</div>
</div>
<div class="operate_item" @click="restoreLocationList">
<div class="icon iconfont icon-huifu operate_icon"></div>
<div class="operate_item_des">Restore</div>
</div>
</div>
</div>
<div class="models_placement_content">
<div class="plcaement_point_content">
<div class="placement_point_item" v-for="(point,index) in pointList" :key="index" >
<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'}" @mousedown="AddDian(item)"><div class="point_block" :style="{background:item.color}"></div></div>
</div>
</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>
</div>
<div class="placement_tip_content">Please change the pure white inside the mannequin for another color to enhance your experience</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" @mousemove="startMove($event)">
<img class="placement_img" :src="perviewUrl || printObject?.url">
<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)" @mousemove="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>
</div>
</div>
</div>
</a-modal>
</div>
</template>
<script lang="ts">
import { defineComponent,ref,createVNode} from 'vue'
import { Https } from "@/tool/https";
import {dataURLtoFile} from "@/tool/util"
import { useStore } from "vuex";
import { Modal,message } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
export default defineComponent({
setup() {
const store = useStore()
let oldLocationList:any = ref([])
let locationList:any = ref([])
let printObject:any = ref({})
let imgBox:any = ref({})
let intObj:any = ref(null)
let currentSign:any = ref({})
let oldPointList:any = ref([]) //备份点
let pointList:any = ref([])
let isSubmit:any = ref(false) //判断历史是否有提交过
return {
store,
oldLocationList,
locationList,
printObject,
imgBox,
intObj,
currentSign,
oldPointList,
pointList,
isSubmit
}
},
data(){
return{
placementShow:false,
collectionIndex:0,
startDian:false,
moveOriginal:{posX: 0, posY: 0},
isRemoveStatus:false,
placement_sacle:30,
perviewUrl:'',//预览的图片地址
isShowMark:false,
}
},
methods:{
formatter(value:number){
return `${value}%`;
},
showPlacementModal(data:any){
this.placementShow = true
this.printObject = {
...data
}
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)
},500)
},
//初始化可以使用的点位
getDefaultPointList(imgBox:any){
this.isSubmit = false
this.pointList = [
{
title:'SHOULDER',
pointList:[{type:'shoulderLeft',color:'#6E70FF',show:true,field:'shoulder'},{type:'shoulderRight',color:'#6E70FF',show:true,field:'shoulder'}]
},
{
title:'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'}]
},
]
if(this.printObject.templateId){//编辑
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.oldPointList = JSON.parse(JSON.stringify(this.pointList))
},
AddDian(point:any){
if(!point.show){
return
}
this.startDian = true
this.isRemoveStatus = false
this.intObj = point
},
changeRemoveStatus(){
this.isRemoveStatus = true
},
startMove(event:any){
if(this.isRemoveStatus){
return
}
let imgbox:any = this.$refs.imgbox
let scrollTop = imgbox.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.moveOriginal.posX
this.currentSign.top = event.clientY + scrollTop - this.imgBox.top -this.moveOriginal.posY
document.addEventListener('mouseup', this.getMouseOver);
this.$forceUpdate()
this.setBoundarySign()
}
}
},
// 在边界上的签名域处理
setBoundarySign() {
let imgbox:any = this.$refs.imgbox
let height = imgbox.offsetHeight + imgbox.scrollTop;
// 2 为签名域的边框
let maxPosHeight = height - 24
let maxPosWidth = imgbox.clientWidth - 24 //+ this.signBox.paddLeft;
if (this.currentSign.top <= 0) {
this.currentSign.top = 0
} else if (this.currentSign.top >= maxPosHeight ) {
this.currentSign.top = maxPosHeight;
}
if (this.currentSign.left <= 0) {
this.currentSign.left = 0
} else if (this.currentSign.left >= maxPosWidth) {
this.currentSign.left = maxPosWidth;
}
},
getMouseDown(event:any,item:any,index:number){
if(this.isRemoveStatus){
for(let itemPoint of this.pointList){
for(let point of itemPoint.pointList){
if(item.type == point.type){
point.show = true
break
}
}
}
this.locationList.splice(index,1)
}else{
this.currentSign = item
// 计算出鼠标在签名域上的偏移
this.moveOriginal.posX = event.offsetX
this.moveOriginal.posY = event.offsetY // 1为边框
this.startDian = true
}
},
getMouseOver(){
this.startDian = false
this.currentSign = {}
document.removeEventListener('mouseup', this.getMouseOver);
},
closeModal(){
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?",
icon: createVNode(ExclamationCircleOutlined),
okText: 'Ok',
cancelText: 'Cancel',
// centered:true,
onOk() {
// _this.getDefaultPointList(_this.imgBox)
_this.oldLocationList = []
_this.locationList = []
_this.intObj = null
_this.currentSign = {}
_this.isRemoveStatus = false
_this.placementShow = false
_this.perviewUrl = ''
}
});
}else{
// _this.getDefaultPointList(_this.imgBox)
_this.oldLocationList = []
_this.locationList = []
_this.intObj = null
_this.currentSign = {}
_this.isRemoveStatus = false
_this.placementShow = false
_this.perviewUrl = ''
}
},
restoreLocationList(){
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
})
}
},
confrimSubmit(){
let param = {
libraryId:this.printObject.id,
templateId:this.printObject.templateId || null,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
...this.getPrintLocation()
}
this.isShowMark = true
Https.axiosPost(Https.httpUrls.saveOrEditTemplatePoint, param).then(
(rv: any) => {
this.isShowMark = false
this.isSubmit = true
this.$emit('submitModelPlacement')
this.closeModal()
}
).catch(res=>{
this.isShowMark = false
});
},
customRequest(){
let new_data = {
file:this.printObject.file,
level1Type:'Models',
level2Type:'',
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
}
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)
}
).catch((res)=>{
reject(res)
});
})
},
getPrintLocation(){
let {width , height} = this.imgBox
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] || []
locationData[item.field].push(item)
}
for(let key in locationData){
locationData[key].sort(this.sortBy("left")) //通过left字段进行排序
locationData[key].forEach((v:any,index:any) => {
v.type = !index ?v.field + 'Left' :v.field +'Right' //第一个是left，第二个是right
v.left = ((v.left + 12) / width).toFixed(4)
v.top = ((v.top + 12) / height).toFixed(4)
returnData[v.type] = [v.left, v.top]
});
}
return returnData
},
sortBy(field:any) {
return function(a:any,b:any) {
return a[field] - b[field];
}
},
printPreview(){
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(){
this.perviewUrl = ''
}
}
})
</script>
<style lang="less">
.models_placement_component{
.ant-modal-close{
width: 3.6rem;
height: 3.6rem;
position: absolute;
top: -1.8rem;
right: -1.8rem;
}
.ant-modal-header{
display: none;
}
.ant-modal-body{
background: #F2F3FB;
min-height: 72rem;
overflow-y: hidden;
padding: 0;
}
.close_icon{
width: 3.6rem;
height: 3.6rem;
background: #000000;
border-radius: 50%;
line-height: 3.6rem;
text-align: center;
.icon-guanbi{
font-size: 2rem;
color: #ffffff;
}
}
.models_placement_body{
width: 100%;
height: 100%;
.palcement_modal_header{
position: relative;
height: 6.6rem;
width: 100%;
background: #F7F7F7;
.models_placement_title{
position: absolute;
height: 100%;
line-height: 6.6rem;
left: 3.7rem;
top: 0;
font-size: 1.8rem;
color: #030303;
}
.placement_operate_list{
display: flex;
align-items: center;
margin:0 auto;
position: absolute;
left: 50%;
transform: translateX(-50%);
height: 100%;
.operate_item{
margin-right: 4rem;
text-align: center;
cursor: pointer;
.operate_icon{
font-size: 2.1rem;
color: #64686D;
}
.operate_item_des{
height: 1.2rem;
font-size: 1.3rem;
color: #64686D;
}
&:last-child{
margin-right: 0;
}
}
}
}
.models_placement_content{
position: relative;
height: calc(100% - 6.6rem);
width: 100%;
padding: 1.1rem 0;
.plcaement_point_content{
width: 22rem;
background: #EBECF4;
position: absolute;
left: 0;
top:18.4rem;
padding: 3rem 2.7rem 0 1.4rem;
.placement_point_item{
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 3rem;
.ponit_title{
font-size: 1.3rem;
color: #64686D;
user-select:none; /* CSS3属性 */
}
.point_list{
display: flex;
align-items: center;
width: 6.2rem;
justify-content: space-between;
.point_item{
width: 2.4rem;
height: 2.4rem;
border-radius: 50%;
border:solid 0.2rem transparent;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
-moz-user-select:none; /* Firefox私有属性 */
-webkit-user-select:none; /* WebKit内核私有属性 */
-ms-user-select:none; /* IE私有属性(IE10及以后) */
-khtml-user-select:none; /* KHTML内核私有属性 */
-o-user-select:none; /* Opera私有属性 */
user-select:none; /* CSS3属性 */
.point_block{
width: 0.4rem;
height: 0.4rem;
border-radius: 50%;
}
}
}
}
}
.placement_content_operate_list{
width: 10.6rem;
background: #EBECF4;
position: absolute;
right: 0;
top:18.4rem;
.placement_content_operate_item{
padding: 1.5rem 0;
text-align: center;
cursor: pointer;
.placement_content_operate_des{
width: 100%;
font-size: 1.3rem;
color: #64686D;
-moz-user-select:none;
user-select:none
}
.print_scale_value{
height: 1.1rem;
font-size: 1.2rem;
text-align: center;
margin-bottom: 0.3rem;
color: #64686D;
}
.ant-tooltip-placement-top{
top: -37px !important;
}
.ant-slider-track{
background: #343579;
}
.ant-slider-handle{
border-color: #343579;
}
.placement_remove_point_block{
width: 2.4rem;
height: 2.4rem;
border: 2px solid #000000;
border-radius: 50%;
margin: 0 auto 0.4rem;
}
}
}
.placement_tip_content{
position: absolute;
right: 2rem;
bottom: 2rem;
width: 30rem;
font-size: 1.3rem;
color: #64686D;
}
.img_preview_block{
width: 40.8rem;
background: #ffffff;
margin: 0 auto;
position: relative;
user-select:none;
-moz-user-select:none;
position: relative;
.img_content_block{
width: 40.8rem;
height: 100%;
max-height: 63.2rem;
overflow-y: auto;
-ms-overflow-style: none;
overflow: -moz-scrollbars-none;
position: relative;
&::-webkit-scrollbar { width: 0 !important }
}
.perview_mark_loading{
position: absolute;
left: 0;
height: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.2);
z-index: 9;
display: flex;
align-items: center;
justify-content: center;
}
.placement_img{
width: 100%;
user-select:none;
-moz-user-select:none;
}
.ponit_click{
width: 24px;
height: 24px;
position: absolute;
border: 2px solid transparent;
border-radius: 50%;
-moz-user-select:none; /* Firefox私有属性 */
-webkit-user-select:none; /* WebKit内核私有属性 */
-ms-user-select:none; /* IE私有属性(IE10及以后) */
-khtml-user-select:none; /* KHTML内核私有属性 */
-o-user-select:none; /* Opera私有属性 */
user-select:none; /* CSS3属性 */
cursor: pointer;
&.remove_point_click{
border-color: transparent;
background: #EF3C3C;
}
.placement_add_point_content{
width: 4px;
height: 4px;
border-radius: 50%;
background: #6E70FF;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.icon-guanbi{
font-size: 20px;
line-height: 20px;
color:#ffffff;
}
}
}
}
}
}
</style>

711
src/component/LibraryPage/ModelPlacementMobile.vue Normal file
View File

@@ -0,0 +1,711 @@
<template>
<div v-show="placementShow">
<a-modal class="models_placement_mobile_component"
v-model:visible="placementShow"
:footer="null"
width="111.5rem"
:maskClosable="false"
:centered="true"
>
<template #closeIcon>
<div class="close_icon" @click.stop="closeModal()"><span class="icon iconfont icon-guanbi"></span></div>
</template>
<div class="models_placement_body" >
<div class="palcement_modal_header">
<div class="models_placement_title">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">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">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">Back</div>
</div>
<div class="operate_item" @click="restoreLocationList">
<div class="icon iconfont icon-huifu operate_icon"></div>
<div class="operate_item_des">Restore</div>
</div>
</div>
</div>
<div class="models_placement_content" @touchmove="startMove($event)">
<div class="plcaement_point_content">
<div class="placement_point_item" v-for="(point,index) in pointList" :key="index" >
<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>
<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>
</div>
<div class="placement_tip_content">Please change the pure white inside the mannequin for another color to enhance your experience</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>
</div>
</div>
</div>
</a-modal>
</div>
</template>
<script lang="ts">
import { defineComponent,ref,createVNode} from 'vue'
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { Modal,message } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
export default defineComponent({
setup() {
const store = useStore()
let oldLocationList:any = ref([])
let locationList:any = ref([])
let printObject:any = ref({})
let imgBox:any = ref({})
let intObj:any = ref(null)
let currentSign:any = ref({})
let oldPointList:any = ref([]) //备份点
let pointList:any = ref([])
let isSubmit:any = ref(false) //判断历史是否有提交过
return {
store,
oldLocationList,
locationList,
printObject,
imgBox,
intObj,
currentSign,
oldPointList,
pointList,
isSubmit
}
},
data(){
return{
placementShow:false,
collectionIndex:0,
startDian:false,
moveOriginal:{posX: 0, posY: 0},
isRemoveStatus:false,
placement_sacle:30,
perviewUrl:'',//预览的图片地址
isShowMark:false,
}
},
methods:{
formatter(value:number){
return `${value}%`;
},
showPlacementModal(data:any){
this.placementShow = true
this.printObject = {
...data
}
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)
},
//初始化可以使用的点位
getDefaultPointList(imgBox:any){
this.isSubmit = false
this.pointList = [
{
title:'SHOULDER',
pointList:[{type:'shoulderLeft',color:'#6E70FF',show:true,field:'shoulder'},{type:'shoulderRight',color:'#6E70FF',show:true,field:'shoulder'}]
},
{
title:'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'}]
},
]
if(this.printObject.templateId){//编辑
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.oldPointList = JSON.parse(JSON.stringify(this.pointList))
},
AddDian(point:any){
if(!point.show){
return
}
this.startDian = true
this.isRemoveStatus = false
this.intObj = point
},
changeRemoveStatus(){
this.isRemoveStatus = true
},
startMove(event:any){
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 - this.moveOriginal.posX
this.currentSign.top = event.targetTouches[0].pageY + scrollTop - this.imgBox.top -this.moveOriginal.posY
document.addEventListener('touchend', this.getMouseOver);
this.$forceUpdate()
this.setBoundarySign()
}
}
}
},
// 在边界上的签名域处理
setBoundarySign() {
let imgbox:any = this.$refs.imgbox
let height = imgbox.offsetHeight + imgbox.scrollTop;
// 2 为签名域的边框
let maxPosHeight = height - 24
let maxPosWidth = imgbox.clientWidth - 24 //+ this.signBox.paddLeft;
if (this.currentSign.top <= 0) {
this.currentSign.top = 0
} else if (this.currentSign.top >= maxPosHeight ) {
this.currentSign.top = maxPosHeight;
}
if (this.currentSign.left <= 0) {
this.currentSign.left = 0
} else if (this.currentSign.left >= maxPosWidth) {
this.currentSign.left = maxPosWidth;
}
},
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){
point.show = true
break
}
}
}
this.locationList.splice(index,1)
}else{
this.currentSign = item
// 计算出鼠标在签名域上的偏移
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(){
this.startDian = false
this.currentSign = {}
document.removeEventListener('touchend', this.getMouseOver);
},
closeModal(){
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?",
icon: createVNode(ExclamationCircleOutlined),
okText: 'Ok',
cancelText: 'Cancel',
// centered:true,
onOk() {
// _this.getDefaultPointList(_this.imgBox)
_this.oldLocationList = []
_this.locationList = []
_this.intObj = null
_this.currentSign = {}
_this.isRemoveStatus = false
_this.placementShow = false
}
});
}else{
// _this.getDefaultPointList(_this.imgBox)
_this.oldLocationList = []
_this.locationList = []
_this.intObj = null
_this.currentSign = {}
_this.isRemoveStatus = false
_this.placementShow = false
}
},
restoreLocationList(){
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
})
}
},
confrimSubmit(){
let param = {
libraryId:this.printObject.id,
templateId:this.printObject.templateId || null,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
...this.getPrintLocation()
}
this.isShowMark = true
Https.axiosPost(Https.httpUrls.saveOrEditTemplatePoint, param).then(
(rv: any) => {
this.isShowMark = false
this.isSubmit = true
this.$emit('submitModelPlacement')
this.closeModal()
}
).catch(res=>{
this.isShowMark = false
});
},
customRequest(){
let new_data = {
file:this.printObject.file,
level1Type:'Models',
level2Type:'',
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
}
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)
}
).catch((res)=>{
reject(res)
});
})
},
getPrintLocation(){
let {width , height} = this.imgBox
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] || []
locationData[item.field].push(item)
}
for(let key in locationData){
locationData[key].sort(this.sortBy("left")) //通过left字段进行排序
locationData[key].forEach((v:any,index:any) => {
v.type = !index ?v.field + 'Left' :v.field +'Right' //第一个是left，第二个是right
v.left = ((v.left + 12) / width).toFixed(4)
v.top = ((v.top + 12) / height).toFixed(4)
returnData[v.type] = [v.left, v.top]
});
}
return returnData
},
sortBy(field:any) {
return function(a:any,b:any) {
return a[field] - b[field];
}
},
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
// });
},
backPreview(){
this.perviewUrl = ''
}
}
})
</script>
<style lang="less">
.models_placement_mobile_component{
.ant-modal-close{
width: 3.6rem;
height: 3.6rem;
position: absolute;
top: -1.8rem;
right: -1.8rem;
}
.ant-modal-header{
display: none;
}
.ant-modal-body{
background: #F2F3FB;
min-height: 72rem;
overflow-y: hidden;
padding: 0;
}
.close_icon{
width: 3.6rem;
height: 3.6rem;
background: #000000;
border-radius: 50%;
line-height: 3.6rem;
text-align: center;
.icon-guanbi{
font-size: 2rem;
color: #ffffff;
}
}
.models_placement_body{
width: 100%;
height: 100%;
.palcement_modal_header{
position: relative;
height: 6.6rem;
width: 100%;
background: #F7F7F7;
.models_placement_title{
position: absolute;
height: 100%;
line-height: 6.6rem;
left: 3.7rem;
top: 0;
font-size: 1.8rem;
color: #030303;
}
.placement_operate_list{
display: flex;
align-items: center;
margin:0 auto;
position: absolute;
left: 50%;
transform: translateX(-50%);
height: 100%;
.operate_item{
margin-right: 4rem;
text-align: center;
cursor: pointer;
.operate_icon{
font-size: 2.1rem;
color: #64686D;
}
.operate_item_des{
height: 1.2rem;
font-size: 1.3rem;
color: #64686D;
}
&:last-child{
margin-right: 0;
}
}
}
}
.models_placement_content{
position: relative;
height: calc(100% - 6.6rem);
width: 100%;
padding: 1.1rem 0;
.plcaement_point_content{
width: 22rem;
background: #EBECF4;
position: absolute;
left: 0;
top:18.4rem;
padding: 3rem 2.7rem 0 1.4rem;
.placement_point_item{
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 3rem;
.ponit_title{
font-size: 1.3rem;
color: #64686D;
user-select:none; /* CSS3属性 */
}
.point_list{
display: flex;
align-items: center;
width: 6.2rem;
justify-content: space-between;
.point_item{
width: 2.4rem;
height: 2.4rem;
border-radius: 50%;
border:solid 0.2rem transparent;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
-moz-user-select:none; /* Firefox私有属性 */
-webkit-user-select:none; /* WebKit内核私有属性 */
-ms-user-select:none; /* IE私有属性(IE10及以后) */
-khtml-user-select:none; /* KHTML内核私有属性 */
-o-user-select:none; /* Opera私有属性 */
user-select:none; /* CSS3属性 */
.point_block{
width: 0.4rem;
height: 0.4rem;
border-radius: 50%;
}
}
}
}
}
.placement_content_operate_list{
width: 10.6rem;
background: #EBECF4;
position: absolute;
right: 0;
top:18.4rem;
.placement_content_operate_item{
padding: 1.5rem 0;
text-align: center;
cursor: pointer;
.placement_content_operate_des{
width: 100%;
font-size: 1.3rem;
color: #64686D;
-moz-user-select:none;
user-select:none
}
.print_scale_value{
height: 1.1rem;
font-size: 1.2rem;
text-align: center;
margin-bottom: 0.3rem;
color: #64686D;
}
.ant-tooltip-placement-top{
top: -37px !important;
}
.ant-slider-track{
background: #343579;
}
.ant-slider-handle{
border-color: #343579;
}
.placement_remove_point_block{
width: 2.4rem;
height: 2.4rem;
border: 2px solid #000000;
border-radius: 50%;
margin: 0 auto 0.4rem;
}
}
}
.placement_tip_content{
position: absolute;
right: 2rem;
bottom: 2rem;
width: 30rem;
font-size: 1.3rem;
color: #64686D;
}
.img_preview_block{
width: 40.8rem;
background: #ffffff;
margin: 0 auto;
position: relative;
user-select:none;
-moz-user-select:none;
position: relative;
.img_content_block{
width: 40.8rem;
height: 100%;
max-height: 63.2rem;
overflow-y: auto;
-ms-overflow-style: none;
overflow: -moz-scrollbars-none;
position: relative;
&::-webkit-scrollbar { width: 0 !important }
}
.perview_mark_loading{
position: absolute;
left: 0;
height: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.2);
z-index: 9;
display: flex;
align-items: center;
justify-content: center;
}
.placement_img{
width: 100%;
user-select:none;
-moz-user-select:none;
}
.ponit_click{
width: 24px;
height: 24px;
position: absolute;
border: 2px solid transparent;
border-radius: 50%;
-moz-user-select:none; /* Firefox私有属性 */
-webkit-user-select:none; /* WebKit内核私有属性 */
-ms-user-select:none; /* IE私有属性(IE10及以后) */
-khtml-user-select:none; /* KHTML内核私有属性 */
-o-user-select:none; /* Opera私有属性 */
user-select:none; /* CSS3属性 */
cursor: pointer;
&.remove_point_click{
border-color: transparent;
background: #EF3C3C;
}
.placement_add_point_content{
width: 4px;
height: 4px;
border-radius: 50%;
background: #6E70FF;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.icon-guanbi{
font-size: 20px;
line-height: 20px;
color:#ffffff;
}
}
}
}
}
}
</style>

386
src/component/LibraryPage/ModelsModal.vue Normal file
View File

@@ -0,0 +1,386 @@
<template>
<div>
<a-modal class="models_modal"
v-model:visible="modelsModalShow"
:footer="null"
width="80%"
:maskClosable="false"
:centered="true"
>
<div class="models_header">
<div class="models_title">Select Mannequin</div>
<div class="models_header_right">
<div class="content_search_block">
<input class="search_input" placeholder="Search by name" v-model="searchPictureName" @keydown.enter="getLibraryList()">
<div class="search_icon_block" @click="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div>
</div>
<div class="icon iconfont icon-guanbi icon_close" @click="closeModal"></div>
</div>
</div>
<div class="models_content">
<div class="models_content_left">
<div class="content_left_header">
<div class="left_header_title">Current Mannequin</div>
<div class="system_button" @click="setSystemModel()">Standard Mannequin</div>
</div>
<div class="content_left_perview">
<img class="perview_img" :src="selectImg"/>
</div>
<div class="sure_button" @click="confimSure()">ok</div>
</div>
<div class="models_content_right">
<div class="models_content_body scroll_style">
<div class="content_img_item" v-for="(img) in imgList" :key="img.id" @click="selectImgItem(img)">
<div :class="['content_img_item_block', selectImgListId == img.libraryModelPoint.templateId ? 'select_item_img' :'']">
<img :src="img.url" class="content_img"/>
</div>
<div class="content_img_name">{{img.name}}</div>
</div>
<div class="no_data_block" v-show="!imgList.length && !isShowLoading">
<img src="@/assets/images/homePage/null_img.png">
</div>
<div class="no_data_block" v-show="isShowLoading">
<a-spin size="large"></a-spin>
</div>
</div>
<div class="table_pagination">
<a-pagination
v-model:current="currentPage"
v-model:pageSize="pageSize"
:total="total"
:showQuickJumper="true"
:showSizeChanger="false"
@change="changePage"
/>
</div>
</div>
</div>
</a-modal>
</div>
</template>
<script lang="ts">
import { defineComponent, ref} from 'vue'
import { Https } from "@/tool/https";
import {useStore} from 'vuex'
import { message } from 'ant-design-vue';
const systemImg = require('../../assets/images/homePage/system_model.png')
export default defineComponent({
setup() {
const store = useStore();
let searchPictureName = ref('')
let modelsModalShow = ref(false)
let currentPage:any = ref(1)
let pageSize = ref(12)
let total = ref(0)
let imgList:any = ref([])
let isShowLoading:any = ref(false)
let selectImgListId:any = ref('')
let selectImg:any = ref('')
return{
store,
searchPictureName,
modelsModalShow,
currentPage,
pageSize,
total,
imgList,
isShowLoading,
selectImgListId,
selectImg
}
},
methods:{
init(code:any){
this.modelsModalShow = true
this.selectImg = this.store.state.HomeStoreModule.templateImgUrl || systemImg
this.selectImgListId = this.store.state.HomeStoreModule.templateId
this.getLibraryList()
},
selectImgItem(imgData:any){
this.selectImgListId = imgData.libraryModelPoint.templateId
this.selectImg = imgData.url
},
//改变页码
changePage(current: number, pageSize: number){
this.currentPage = current
this.pageSize = pageSize
this.getLibraryList()
},
getLibraryList(){
let data = {
level1Type:'Models',
level2Type:'',
page:this.currentPage,
pictureName:this.searchPictureName,
size:this.pageSize,
}
this.isShowLoading = true
Https.axiosPost(Https.httpUrls.queryLibraryPage,data).then(
(rv: any) => {
this.imgList = rv.content
this.total = rv.total
this.isShowLoading = false
}
).catch((res)=>{
this.isShowLoading = false
});
},
closeModal(){
this.modelsModalShow = false
this.searchPictureName = ''
this.imgList = []
this.currentPage = 1
this.pageSize = 10
this.total = 0
},
setSystemModel(){
this.selectImg = systemImg
this.selectImgListId = ''
},
//确定选择model
confimSure(){
this.$emit('sureSelectModel',{id:this.selectImgListId,url:this.selectImg})
this.closeModal()
}
}
})
</script>
<style lang="less">
.models_modal{
.ant-modal-close{
width: 3.6rem;
height: 3.6rem;
position: absolute;
top: -1.8rem;
right: -1.8rem;
}
.ant-modal-header{
display: none;
}
.ant-modal-body{
background: #F2F3FB;
height: 80vh;
min-height: 72rem;
overflow-y: hidden;
padding: 0;
}
.models_header{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 6.6rem;
background: #F7F7F7;
padding: 0 3.4rem 0 3rem;
.models_title{
font-size: 1.8rem;
color: #030303;
font-weight: 500;
}
.models_header_right{
display: flex;
justify-content: space-between;
align-items: center;
.content_search_block{
margin-right: 5rem;
display: flex;
.search_input{
width: 30rem;
padding-left: 1.5rem;
height: 4rem;
line-height: 3.8rem;
background: #FFFFFF;
border: 0.1rem solid #F1F1F1;
font-size: 1.6rem;
font-weight: 400;
&::placeholder {
color: #C2C2C2;
}
}
.search_icon_block{
width: 6rem;
height: 4rem;
line-height: 4rem;
text-align: center;
background: #343579;
cursor: pointer;
.icon-sousuo{
font-size: 2rem;
color: #FFFFFF;
}
}
}
.icon_close{
color: rgba(174, 178, 183, 1);
font-size: 2.4rem;
cursor: pointer;
}
}
}
.models_content{
padding-right: 1.4rem;
height: calc(100% - 6.6rem);
position: relative;
display: flex;
justify-content: space-between;
.models_content_left{
width: 36.4rem;
height: 100%;
background: #FFFFFF;
flex-shrink: 0;
.content_left_header{
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.3rem 1rem 0.9rem 3rem;
.left_header_title{
font-size: 1.6rem;
color: #333333;
}
.system_button{
padding: 0 1rem;
height: 3.2rem;
line-height: 3.2rem;
background: #E6E6F6;
font-size: 1.2rem;
color: #343579;
cursor: pointer;
}
}
.content_left_perview{
width: 100%;
height: calc(100% - 13.8rem);
padding: 1.9rem 3rem 0;
box-sizing: border-box;
margin-bottom: 1.3rem;
display: flex;
align-items: center;
justify-content: center;
.perview_img{
max-width: 100%;
max-height: 100%;
}
}
.sure_button{
width: 9.8rem;
height: 3.6rem;
background: #343579;
font-size: 1.4rem;
color: #FFFFFF;
text-align: center;
line-height: 3.6rem;
margin: 0 auto;
cursor: pointer;
}
}
.models_content_right{
width: calc(100% - 37rem);
height: 100%;
background: #FFFFFF;
padding: 1.5rem 1rem 1rem 1rem;
.models_content_body{
width: 100%;
height: calc(100% - 6rem);
overflow-y: auto;
.content_img_item{
display: inline-block;
vertical-align: top;
padding: 0 0.91rem;
margin-bottom: 1rem;
.content_img_item_block{
border: 0.1rem solid #F5F5F5;;
width: 16.5rem;
height: 25.1rem;
display: flex;
align-items: center;
justify-content: center;
position: relative;
cursor: pointer;
&.select_item_img{
border-color: #343579;
}
.content_img{
max-width: 100%;
max-height: 100%;
}
}
.content_img_name{
width: 16.5rem;
height: 3.4rem;
line-height: 3.4rem;
white-space: nowrap;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
font-size: 1.4rem;
color: #030303;
}
}
.no_data_block{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
}
.table_pagination{
width: 100%;
text-align: center;
margin-top: 2rem;
}
}
}
}
</style>