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

调整画布布局

Browse Source
This commit is contained in:
X1627315083
2024-09-11 16:36:08 +08:00
parent 4e2d3d672c
commit d2cf4a2969
21 changed files with 898 additions and 675 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/component/LibraryPage/ModelPlacement.vue
View File

@@ -62,12 +62,16 @@
</a-select> -->
<div>{{ sex.label }}</div>
</div>
<div class="placement_point_item" v-for="(point,index) in pointList" :key="index" >
<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'}" @mousedown="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">
<div class="cur_picture_opterate_item" @click="changeScale(-1)"><span class="operate_icon icon_font">-</span></div>
<div class="cur_picture_opterate_item" @click="changeScale(1)"><span class="operate_icon icon_font">+</span></div>
</div>
<div class="placement_point_item placement_point_item_btn">
<span class="started_btn" @click="setPoint">{{ $t('ModelPlacement.Point') }}</span>
</div>
@@ -89,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}" @mousedown="getMouseDown($event,item,index)" @mousemove="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>
@@ -142,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:{
@@ -184,7 +189,8 @@ export default defineComponent({
sexList,
cropperTime,
t
t,
getMousePosition
}
},
data(){
@@ -271,7 +277,8 @@ export default defineComponent({
}
// imgBoxSize.style.backgroundImage = 'url('+require('@assets/images/library/lemaleBG.png')')'
imgBoxSize.addEventListener('mousemove',this.startMove)
imgBoxSize.addEventListener('mousemove',this.mouseMove)
imgBoxSize.addEventListener('touchmove',this.touchmove)
this.setImageSize()
})
},800)
@@ -429,7 +436,14 @@ 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){
return
@@ -452,6 +466,7 @@ export default defineComponent({
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()
@@ -513,6 +528,9 @@ export default defineComponent({
this.startDian = false
this.currentSign = {}
document.removeEventListener('mouseup', this.getMouseOver);
document.removeEventListener('touchend', this.getMouseOver);
document.removeEventListener('mousemove',this.mouseMove)
document.removeEventListener('touchmove',this.touchmove)
},
closeModal(){
@@ -601,7 +619,11 @@ export default defineComponent({
}
},
changeScale(num:any) {
num = num || 1;
let cropper:any = this.$refs.cropper
cropper.changeScale(num);
},
async confrimSubmit(){
let param = {
libraryId:this.printObject.id,
@@ -945,6 +967,25 @@ export default defineComponent({
}
}
.placement_point_scale{
justify-content: center;
border: 1px solid #9a9a9a;
border-radius: 1rem;
width: 40%;
margin: 0 auto;
margin-bottom: 3rem;
div:nth-child(1){
border-right: 1px solid #9a9a9a;
}
div{
font-size: 2rem;
cursor: pointer;
width: 3rem;
display: flex;
align-items: center;
justify-content: center;
}
}
}
.placement_content_operate_list{
@@ -1069,7 +1110,7 @@ export default defineComponent({
.vue-cropper{
.cropper-crop-box{
background: #fff;
pointer-events: none;
}
}
}