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:
X1627315083
2024-09-06 13:48:16 +08:00
parent 4301c4051a
commit 4e2d3d672c
7 changed files with 388 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -430,11 +430,16 @@ export default defineComponent({
async changeTemplateModal() {
if(this.modalImg[0]?.id){
let layout:any = isMoible() ? this.$refs.layoutMobile : this.$refs.layout
// layout.init('moodboard')
// let layout:any = isMoible() ? this.$refs.layoutMobile : this.$refs.layout
let layout:any = this.$refs.layout
if(this.layoutList.length <= 0){
await this.layout()
}
if(window.screen.width<1300){
layout.isMobile = true
}else{
layout.isMobile = false
}
// let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.moodboard))
// this.layoutList = arr
layout.init()
@@ -505,6 +510,8 @@ export default defineComponent({
angleBLStyle:[],
class:this.moodb_className,
}
console.log(123123213);
this.store.commit("setDisposeMoodboardPosition", obj);
this.loadingShow = false
}

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

@@ -24,13 +24,13 @@
</div>
</div>
<div class="layout_nav">
<div v-for="item,index in layoutList" :key="item" :class="{active:item.setPitch}" @mousedown="setpitch(item,index)">
<div v-for="item,index in layoutList" :key="item" :class="{active:item.setPitch}" @mousedown="setpitch(item,index)" @touchstart.stop="setpitch(item,index)">
<img :src="item.imgUrl">
</div>
</div>
<div class="layout_centent" :class="{active:flex_direction}" id="layoutCentent">
<div v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem" v-layout="index" @mousedown="setpitch(item,index)" ref="content" >
<img crossOrigin="anonymous" :src="item.imgUrl" draggable="false" :class="moodbClassName[index]" v-modelImg>
<div v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem" v-layout="index" @mousedown="setpitch(item,index)" @touchstart="setpitch(item,index)" ref="content" >
<img crossOrigin="anonymous" :src="item.imgUrl" :style="{'transform':item.angle?`translate(-50%, -50%) scale(${item.zoom}) rotateZ(${item.angle}deg)`:`translate(-50%, -50%) scale(${item.zoom})`}" draggable="false" :class="moodbClassName[index]" v-modelImg>
<div>
</div>
@@ -39,7 +39,7 @@
<li class="layout_btn_bottom" v-compile.stop="'bottom'"></li>
<li class="layout_btn_left" v-compile.stop="'left'"></li>
<li class="layout_btn_right" v-compile.stop="'right'"></li>
<li class="layout_rotote" v-rotote.stop></li>
<li class="layout_rotote" v-rotote.stop='item'></li>
<li class="layout_translate" v-translate.stop></li>
<!-- <li class="layout_translate" v-translate.stop></li> -->
<li class="layout_angle_tr" v-angle.stop = "'top'"></li>
@@ -73,6 +73,16 @@
</div>
</div>
</div>
<div class="layout_right" v-show="isMobile">
<div class="layout_right_text">
{{ $t('DesignPrintOperation.Scale') }}
</div>
<a-slider
v-model:value="moodItemScale"
@change="setMoodItemScale"
>
</a-slider>
</div>
<!-- <div class="layout_right">
<div v-for="item,index in moodbList" class="layout_left_items" @click="setmoodb(item)">
<div v-for="clasitem,clasindex in item" :class="clasitem" class="layout_left_item">
@@ -118,7 +128,7 @@ import { Https } from "@/tool/https";
import { getCookie } from "@/tool/cookie";
import domTurnImg from '@/tool/domTurnImg'
import { getUploadUrl } from "@/tool/util";
import { getMousePosition } from "@/tool/mdEvent";
export default defineComponent({
props:["moodb_className",'flex_direction'],
components: {
@@ -136,10 +146,12 @@ export default defineComponent({
let styleObj = computed(()=>{
return store.state.UploadFilesModule.disposeMoodboardPostition
})
let moodItemScale = ref(0)
let domObj = {
dom:['img','ul','.layout_rotote','.layout_translate','.layout_angle_tr','.layout_angle_tl','.layout_angle_br','.layout_angle_bl'],
domStyle:['imgStyle','borStyle','rototeStyle','translateStyle','angleTRStyle','angleTLStyle','angleBRStyle','angleBLStyle'],
}
let isMobile = ref(false)
return {
layout,
templateFileList,
@@ -148,8 +160,10 @@ export default defineComponent({
layoutList,
content,
loadingShow,
moodItemScale,
styleObj,
domObj,
isMobile,
};
},
data() {
@@ -157,17 +171,13 @@ export default defineComponent({
// moodTemplateId: "", //模板id
store: useStore(),
// layoutList:computed(()=>{
// return [...(useStore().state.UploadFilesModule.moodboardFiles),
// ...(useStore().state.UploadFilesModule.generateFiles),
// ...(useStore().state.UploadFilesModule.MaterialFiles)]
// }),
moodb : moodb.moodb_,
moodbList:{},
moodbClassName:[],
setabsolute:false,
token: "",
uploadUrl: "",
moodIndex:0,
upload: {
isPin: 0,
gender:'',
@@ -186,30 +196,17 @@ export default defineComponent({
layout:{
mounted (el,layout:any,binding) {
let mousedown = function(e: MouseEvent){
e.stopPropagation()
let event:any = {
offsetX:e.offsetX,
offsetY:e.offsetY,
clientX:e.clientX,
clientY:e.clientY,
}
operation(event)
let mousedown = function(event: MouseEvent){
let e:any = getMousePosition(event,false)
mouseDownOperation(e)
}
let touchstart = function(e: any){
e.stopPropagation()
const touch = e.changedTouches[0];
let event:any = {
offsetX:touch.clientX - e.target.getBoundingClientRect().left,
offsetY: touch.clientY - e.target.getBoundingClientRect().top,
clientX:touch.clientX,
clientY:touch.clientY,
}
operation(event)
let touchstart = function(event: any){
let e:any = getMousePosition(event,true)
mouseDownOperation(e)
}
let operation = function(e: MouseEvent){
let mouseDownOperation = function(e: MouseEvent){
el.parentElement.children.forEach((v:any) => {
v.style.left = v.offsetLeft+'px'
v.style.top = v.offsetTop+'px'
@@ -226,20 +223,15 @@ export default defineComponent({
let domX = e.clientX - e.offsetX - Number(left)//鼠标到最左侧距离减去鼠标到dom距离再减去已经有的left值
let domY = e.clientY - e.offsetY - Number(top)
let mouse = true
let mouseMove = function(e:MouseEvent){
domOperation(e)
let mouseMove = function(event:MouseEvent){
let e:any = getMousePosition(event,false)
mouseMoveOperation(e)
}
let touchmove = function(e:any){
const touch = e.changedTouches[0];
let event:any = {
offsetX:touch.clientX - e.target.getBoundingClientRect().left,
offsetY: touch.clientY - e.target.getBoundingClientRect().top,
clientX:touch.clientX,
clientY:touch.clientY,
}
domOperation(event)
let touchmove = function(event:any){
let e:any = getMousePosition(event,true)
mouseMoveOperation(e)
}
let domOperation = (e:any)=>{
let mouseMoveOperation = (e:any)=>{
if(mouse){
el.style.left = e.clientX-mouseX - domX+'px'
el.style.top = e.clientY-mouseY - domY+'px'
@@ -282,8 +274,15 @@ export default defineComponent({
//操作大小
compile:{
mounted (el,compile) {
el.addEventListener('mousedown',(e: MouseEvent)=>{
e.stopPropagation()
let mousedown = (event:any)=>{
let e:any = getMousePosition(event,false)
mouseDownOperation(e)
}
let touchstart = (event:any)=>{
let e:any = getMousePosition(event,true)
mouseDownOperation(e)
}
let mouseDownOperation = (e: MouseEvent)=>{
let elParent = el.parentNode.parentNode
el.parentElement.parentNode.parentNode.children.forEach((v:any) => {
v.style.left = v.offsetLeft+'px'
@@ -307,27 +306,34 @@ export default defineComponent({
let gpsXY:any
let parent:any
if(compile.value == 'left' || compile.value == 'right'){
gpsXY = e.x
gpsXY = e.clientX
parent = elParent.offsetWidth
}else{
parent = elParent.offsetHeight
gpsXY = e.y
gpsXY = e.clientY
}
let mouse = true
document.onmousemove = function(e:MouseEvent){
let mouseMove = function(event:MouseEvent){
let e:any = getMousePosition(event,false)
mouseMoveOperation(e)
}
let touchmove = function(event:any){
let e:any = getMousePosition(event,true)
mouseMoveOperation(e)
}
let mouseMoveOperation = function(e:MouseEvent){
if(mouse){
if(compile.value == 'left'){
elParent.style.width = parent + gpsXY - e.x + 'px'
elParent.style.width = parent + gpsXY - e.clientX + 'px'
}else if(compile.value == 'right'){
elParent.style.width = parent + e.x - gpsXY + 'px'
elParent.style.width = parent + e.clientX - gpsXY + 'px'
}else if(compile.value == 'top'){
elParent.style.height = parent + gpsXY - e.y + 'px'
elParent.style.height = parent + gpsXY - e.clientY + 'px'
}else if(compile.value == 'bottom'){
elParent.style.height = parent + e.y - gpsXY + 'px'
elParent.style.height = parent + e.clientY - gpsXY + 'px'
}
if(elParent.parentNode.offsetWidth <= elParent.offsetWidth+Number(elParent.style.right.replace(/px/g,''))){
elParent.style.width = elParent.parentNode.offsetWidth - Number(elParent.style.right.replace(/px/g,''))+'px'
}
@@ -343,61 +349,93 @@ export default defineComponent({
}
}
}
document.onmouseup = function(){
let mouseup = function(){
mouse = false
document.onmousemove = ()=>{}
document.removeEventListener('mousemove',mouseMove)
document.removeEventListener('touchmove',touchmove)
document.removeEventListener('mouseup',mouseup)
document.removeEventListener('touchend',mouseup)
//移动端
}
})
document.addEventListener('mousemove', mouseMove);
document.addEventListener('touchmove', touchmove);
document.addEventListener('mouseup', mouseup);
document.addEventListener('touchend', mouseup);
}
el.addEventListener('mousedown',mousedown)
el.addEventListener('touchstart',touchstart)
}
},
//操作旋转
rotote:{
mounted(el){
mounted(el,item){
let mouse = true;
let angle :any = 0
let num:any
let x = 0
let y = 0
let elParent = el.parentNode.parentNode
if(document.defaultView){
let transform = document.defaultView.getComputedStyle(elParent.firstElementChild, null).transform.split('(')[1].split(',')
num = Number(transform[3])
let mousedown = function(event: MouseEvent){
let e:any = getMousePosition(event,false)
mouseDownOperation(e)
}
// 添加鼠标按下事件监听器
let mousedown = (e:MouseEvent) => {
e.stopPropagation()
let touchstart = function(event: any){
let e:any = getMousePosition(event,true)
mouseDownOperation(e)
}
let mouseDownOperation = (e:any) => {
mouse = true;
// let eX = (e.pageX - el.offsetLeft) + el.offsetLeft
// let eY = elParent.offsetTop + el.offsetTop
var info = el.getBoundingClientRect();
let eX = info.x + info.width / 2;
let eY = info.y + info.height / 2;
document.addEventListener('mousemove', (e:MouseEvent) => {
if (mouse) {
let X = eX
let Y = eY
let x:any = e.clientX - X
let y:any = Y - e.clientY
angle = Math.atan2(x,y)*(180 / Math.PI)
elParent.firstElementChild.style.transform = "translate(-50%,-50%) scale("+ num + ") rotateZ("+ angle + "deg)"
el.style.transform = "translate(-50%,-50%) rotateZ("+ angle + "deg)"
let mouseMove = function(event:MouseEvent){
let e:any = getMousePosition(event,false)
mouseMoveOperation(e)
}
});
let touchmove = function(event:any){
let e:any = getMousePosition(event,true)
mouseMoveOperation(e)
}
let mouseMoveOperation = (e:MouseEvent) => {
if (mouse) {
let X = eX
let Y = eY
let x:any = e.clientX - X
let y:any = Y - e.clientY
angle = Math.atan2(x,y)*(180 / Math.PI)
elParent.firstElementChild.style.transform = "translate(-50%,-50%) scale("+ num + ") rotateZ("+ angle + "deg)"
el.style.transform = "translate(-50%,-50%) rotateZ("+ angle + "deg)"
}
};
// 添加鼠标松开事件监听器
document.addEventListener('mouseup',mouseup );
let mouseup = function(){
mouse = false
document.removeEventListener('mousemove',mouseMove)
document.removeEventListener('touchmove',touchmove)
document.removeEventListener('mouseup',mouseup)
document.removeEventListener('touchend',mouseup)
//移动端
}
document.addEventListener('mousemove', mouseMove);
document.addEventListener('touchmove', touchmove);
document.addEventListener('mouseup', mouseup);
document.addEventListener('touchend', mouseup);
}
let mouseup = () => {
mouse = false;
// el.removeEventListener('mousedown',mousedown)
document.removeEventListener('mouseup',mouseup)
}
el.addEventListener('mousedown',mousedown);
el.addEventListener('mousedown',mousedown)
el.addEventListener('touchstart',touchstart)
//缩放
let timeSwitch = true
el.parentNode.addEventListener('mousemove', (e:MouseEvent) => {
el.parentNode.addEventListener('mousewheel',(e:MouseEvent) => {
if(document.defaultView){
let transform = document.defaultView.getComputedStyle(elParent.firstElementChild, null).transform.split('(')[1].split(',')
num = Number(transform[3])
}
if(timeSwitch){
if(angle == 0){
function getRotationAngle(transformDom:any) {
@@ -436,10 +474,11 @@ export default defineComponent({
setTimeout(() => {
timeSwitch = true
}, 100);
let instance:any = item.instance
instance.moodItemScale = num * 100
item.value.zoom = num
elParent.firstElementChild.style.transform = "translate(-50%,-50%) scale("+ num + ") rotateZ("+ angle + "deg)"
}
});
});
}
@@ -448,9 +487,16 @@ export default defineComponent({
angle:{
mounted(el,angle){
let mouse = false;
el.addEventListener('mousedown', (e:MouseEvent) => {
e.stopPropagation()
let mousedown = function(event: MouseEvent){
let e:any = getMousePosition(event,false)
mouseDownOperation(e)
}
let touchstart = function(event: any){
let e:any = getMousePosition(event,true)
mouseDownOperation(e)
}
let mouseDownOperation = (e:MouseEvent) => {
el.parentNode.children.forEach((v:any) =>{
v.classList.add('eventNode')
})
@@ -459,7 +505,15 @@ export default defineComponent({
let eX:any
let eY:any
let elParentSide = Math.sqrt(elParent.offsetWidth/2*elParent.offsetWidth/2+elParent.offsetHeight/2*elParent.offsetHeight/2)
let mouseMove = (e:MouseEvent)=>{
let mouseMove = function(event:MouseEvent){
let e:any = getMousePosition(event,false)
mouseMoveOperation(e)
}
let touchmove = function(event:any){
let e:any = getMousePosition(event,true,el.parentNode)
mouseMoveOperation(e)
}
let mouseMoveOperation = (e:MouseEvent)=>{
if (mouse) {
if(angle.value == 'right'){
eX = elParent.offsetWidth - e.offsetX
@@ -474,7 +528,7 @@ export default defineComponent({
eX = elParent.offsetWidth - e.offsetX - elParent.offsetWidth
eY = elParent.offsetHeight - e.offsetY - elParent.offsetHeight
}
let mouseSide = Math.sqrt(eX*eX + eY *+eY)/2
let mouseSide = Math.sqrt(eX*eX + eY *eY)/2
// el.style.left = e.offsetX /2 +'px'
// el.style.top = e.offsetY /2+'px'
if(100 - 100 * mouseSide/elParentSide <= 50){
@@ -523,28 +577,40 @@ export default defineComponent({
}
}
}
// 添加鼠标松开事件监听器
document.addEventListener('mouseup', mouseup);
}
let mouseup = () => {
mouse = false;
el.parentNode.removeEventListener('mousemove',mouseMove)
let mouseup = function(){
mouse = false
el.parentNode.children.forEach((v:any) =>{
v.classList.remove('eventNode')
})
document.removeEventListener('mouseup', mouseup);
el.parentNode.removeEventListener('mousemove',mouseMove)
el.parentNode.removeEventListener('touchmove',touchmove)
document.removeEventListener('mouseup',mouseup)
document.removeEventListener('touchend',mouseup)
//移动端
}
el.parentNode.addEventListener('mousemove', mouseMove);
})
el.parentNode.addEventListener('touchmove', touchmove);
document.addEventListener('mouseup', mouseup);
document.addEventListener('touchend', mouseup);
}
el.addEventListener('mousedown',mousedown)
el.addEventListener('touchstart',touchstart)
}
},
//移动图片
translate:{
mounted (el,layout:any,binding) {
el.addEventListener('mousedown',(e: MouseEvent)=>{
e.stopPropagation()
let mousedown = function(event: MouseEvent){
let e:any = getMousePosition(event,false)
mouseDownOperation(e)
}
let touchstart = function(event: any){
let e:any = getMousePosition(event,true)
mouseDownOperation(e)
}
let mouseDownOperation = (e: MouseEvent)=>{
let elParent = el.parentNode.parentNode
el.style.left = (el.offsetLeft+2)/(elParent.offsetWidth)*100+'%'
el.style.top = (el.offsetTop+2)/(elParent.offsetHeight)*100+'%'
@@ -555,10 +621,18 @@ export default defineComponent({
let domX = e.clientX - e.offsetX - el.offsetLeft//鼠标到最左侧距离减去鼠标到dom距离再减去已经有的left值
let domY = e.clientY - e.offsetY - el.offsetTop
let mouse = true
document.onmousemove = function(e:MouseEvent){
let mouseMove = function(event:MouseEvent){
let e:any = getMousePosition(event,false)
mouseMoveOperation(e)
}
let touchmove = function(event:any){
let e:any = getMousePosition(event,true)
mouseMoveOperation(e)
}
let mouseMoveOperation = function(e:MouseEvent){
if(mouse){
let left = ( e.x-mouseX + 2 - domX )/(elParent.offsetWidth)*100+'%'
let top = (e.y-mouseY + 2 - domY)/(elParent.offsetHeight)*100+'%'
let left = ( e.clientX-mouseX + 2 - domX )/(elParent.offsetWidth)*100+'%'
let top = (e.clientY-mouseY + 2 - domY)/(elParent.offsetHeight)*100+'%'
el.style.left = left
el.style.top = top;
el.previousSibling.style.top = top
@@ -594,11 +668,21 @@ export default defineComponent({
}
}
}
document.onmouseup = function(){
let mouseup = function(){
mouse = false
document.onmousemove = ()=>{}
document.removeEventListener('mousemove',mouseMove)
document.removeEventListener('touchmove',touchmove)
document.removeEventListener('mouseup',mouseup)
document.removeEventListener('touchend',mouseup)
//移动端
}
})
document.addEventListener('mousemove', mouseMove);
document.addEventListener('touchmove', touchmove);
document.addEventListener('mouseup', mouseup);
document.addEventListener('touchend', mouseup);
}
el.addEventListener('mousedown',mousedown)
el.addEventListener('touchstart',touchstart)
},
},
modelImg:{
@@ -634,9 +718,10 @@ export default defineComponent({
v.setPitch = false
})
this.layoutList = parentList
this.moodbList = this.moodb[parentList.length-1]
this.moodbClassName = this.styleObj.class
this.moodbClassName = this.styleObj.class?this.styleObj.class:[]
this.moodItemScale = this.layoutList[0].zoom*100
this.initDomStyle()
},
@@ -644,6 +729,11 @@ export default defineComponent({
this.layout = false
},
setpitch(item:any,index:any){
if(!item.zoom){
item.zoom = 1
}
this.moodIndex = index
this.moodItemScale = (item.zoom?item.zoom:1)*100
this.layoutList.forEach((v:any)=>{
v.setPitch = false
})
@@ -653,6 +743,11 @@ export default defineComponent({
}
},
setMoodItemScale(value:any){
if(value > 2){
this.layoutList[this.moodIndex].zoom = value/100
}
},
setmoodb(item:any){
this.moodbClassName = item
this.$emit('setmoodbClass',this.moodbClassName)
@@ -1045,6 +1140,65 @@ export default defineComponent({
}
}
}
.layout_right{
position: absolute;
top: 50%;
transform: translateY(-50%);
right: calc(5rem*1.2);
// background-color: #000;
width: 8%;
height: 50%;
&.layout_left::-webkit-scrollbar {
display: none;
}
.layout_left_text{
font-size: var(--aida-fsize1-6);
margin-bottom: calc(1rem*1.2);
color: #000;
}
.layout_left_items{
width: 100%;
height: calc(6rem*1.2);
display: flex;
align-content: space-between;
justify-content: space-between;
flex-wrap: wrap;
flex-direction: column;
margin-bottom: calc(2rem*1.2);
cursor: pointer;
.layout_left_item{
box-sizing: border-box;
border: 1px solid #000;
}
}
.ant-slider{
margin: 0;
margin-top: calc(2rem*1.2);
padding: 0 calc(1rem*1.2);
.ant-slider-track,
.ant-slider-rail {
height: calc(.6rem*1.2);
background-color: #e1e1e1;
border-radius: calc(0.5rem*1.2);
}
.ant-slider .ant-slider-handle:not(.ant-tooltip-open),
.ant-slider-handle {
background-color: #2d2e76 !important;
border: none !important;
}
.ant-slider-handle:hover {
box-shadow: 0 0 0 5px rgba(45, 46, 118, 0.2);
}
.habit_System_Designer_text_max {
display: flex;
justify-content: space-between;
.habit_System_Designer_text {
}
}
}
}
.submit_button {
margin: calc(2rem*1.2) auto 0;
position: relative;