From 3440f2f8689aed9e5543e69514c8eee0bd6e3e90 Mon Sep 17 00:00:00 2001
From: WangXiaoDong <1627315083@qq.com>
Date: Tue, 12 Sep 2023 10:09:02 +0800
Subject: [PATCH] commit

---
 src/component/Detail/setDesignItem.vue | 489 +++++++++++++++++++++++++
 src/component/HomePage/RobotAssist.vue |  77 ++--
 2 files changed, 513 insertions(+), 53 deletions(-)
 create mode 100644 src/component/Detail/setDesignItem.vue

diff --git a/src/component/Detail/setDesignItem.vue b/src/component/Detail/setDesignItem.vue
new file mode 100644
index 00000000..626b98b1
--- /dev/null
+++ b/src/component/Detail/setDesignItem.vue
@@ -0,0 +1,489 @@
+<template>
+	<div class="design_compile_content">
+		<div class="designOpenrtion_centent" id="designOpenrtionCentent">
+			<div class="designOpenrtion_imgMask">
+				<div class="designOpenrtion_print">
+					<div 
+						v-for="item,index in designItemDetail?.clothes" 
+						:key="item"
+						:style="[printStyleList[index].style]" 
+						@mousedown.stop="itemMoveMousedown(index,$event)"
+						class="modal_imgItem" 
+						@click="setpitch(item,index)" ref="content" >
+						<img crossOrigin="anonymous" :src="item.path" class="designOpenrtion_imgItme" draggable="false"> 
+						<!-- <img crossOrigin="anonymous" :src="item.path" :style="{transform:`scale(${printStyleList[index].transform.scale}) rotateZ(${printStyleList[index].transform.rotateZ}deg)`}" class="designOpenrtion_imgItme" draggable="false">  -->
+					</div>
+				</div>
+				<img class="perview_img" style="width: 400px; height: auto;"  v-lazy="designItemDetail.designItemUrl || ''" :key="designItemDetail.designItemUrl">
+				<div class="designOpenrtion_btn">
+					<ul v-for="item,index in printStyleList" :key="item" :class="{active:item.designOpenrtionBtn}" class="designOpenrtion_btn" :style="item.style" @mousedown.stop="itemMoveMousedown(index,$event)">
+						<li class="designOpenrtion_btn_top" @mousedown.stop="itemSizeMousedown('top',$event)"></li>
+						<li class="designOpenrtion_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',$event)"></li>
+						<li class="designOpenrtion_btn_left" @mousedown.stop="itemSizeMousedown('left',$event)"></li>
+						<li class="designOpenrtion_btn_right" @mousedown.stop="itemSizeMousedown('right',$event)"></li>
+						<!-- <li class="designOpenrtion_rotote" v-rotote.stop="[index,item.transform]"></li> -->
+					</ul>
+				</div>
+			</div>
+			<div @click="setPreview" class="subitOkPreviewBtn">OK</div>
+		</div>
+	</div>
+</template>
+
+<script >
+import { defineComponent, h,createVNode, ref ,computed, inject,nextTick} from "vue";
+import { LoadingOutlined } from "@ant-design/icons-vue";
+import { useStore } from "vuex";
+import { Modal,message } from 'ant-design-vue';
+export default defineComponent({
+	
+    setup(prop) {
+        const store = useStore();
+
+		let designItemDetail = ref([])
+		let current = inject('current')//父组件传过来的数据
+		let printZIndex = ref(2)//印花优先级
+        let printStyleList = ref([
+			{
+				centers:{
+					left:0,
+					top:0,
+				},
+				style:{
+					left:0+"px",
+					top:0+"px",
+					right:"auto",
+					bottom:"auto",
+					width:100+'px',
+					height:100+'px',
+					zIndex:1,
+				},
+				transform:{
+					scale:1,
+					rotateZ:0,
+				},
+				designOpenrtionBtn:false
+			}
+		]);
+		let direction = ref('')
+		let imgDom = ref()
+		let imgDomIndex = ref(0)
+        return {
+			designItemDetail,
+			current,
+			printZIndex,
+            printStyleList,
+			direction,//判断点击的是li那个边
+			imgDom,
+			imgDomIndex,
+        };
+    },
+    data() {
+        return {
+            store: useStore(),
+        };
+    },
+
+	// directives:{
+	// 	//操作旋转
+	// 	rotote:{
+	// 		mounted(el,value){
+	// 			let mouse = true;
+	// 			let angle  = 0
+	// 			let num = 1
+	// 			let x = 0
+	// 			let y = 0
+	// 			num = value.value[1].scale
+	// 			angle = value.value[1].rotateZ
+	// 			let elParent = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName('modal_imgItem')[value.value[0]]
+	// 			// 添加鼠标按下事件监听器
+	// 			el.style.transform = "rotateZ("+ angle + "deg)"
+	// 			el.addEventListener('mousedown', (e) => {
+	// 			// let scale = Number(elParent.firstElementChild.style.transform?.split('scale(')[1]?.split(')')[0])
+	// 			// let rotateZ = Number(elParent.firstElementChild.style.transform?.split('rotateZ(')[1]?.split('deg')[0])
+	// 				e.stopPropagation()
+	// 				mouse = true;
+	// 				var info = el.getBoundingClientRect();
+	// 				let eX = info.x + info.width / 2;
+	// 				let eY = info.y + info.height / 2;
+					
+	// 				document.addEventListener('mousemove', (e) => {
+	// 				if (mouse) {
+	// 					let X = eX 
+	// 					let Y = eY
+	// 					let x = e.clientX - X
+	// 					let y = Y - e.clientY
+	// 					angle = Math.atan2(x,y)*(180 / Math.PI)
+	// 					elParent.firstElementChild.style.transform = "scale("+ num + ") rotateZ("+ angle + "deg)"
+	// 					el.style.transform = "rotateZ("+ angle + "deg)"
+	// 				}
+	// 				});
+	// 				// 添加鼠标松开事件监听器
+	// 				document.addEventListener('mouseup', () => {
+	// 					mouse = false;
+	// 				});
+	// 			});
+	// 			//缩放
+	// 			let timeSwitch = true
+	// 			el.parentNode.addEventListener('mousemove', (e) => {
+	// 				el.parentNode.addEventListener('mousewheel',(e) => {
+	// 					if(timeSwitch){
+	// 						timeSwitch = false
+	// 						if(e.deltaY > 0){
+	// 							if(num <= 1){
+	// 								num -= 0.05
+	// 							}else{
+	// 								num -= 0.1
+	// 							}
+	// 						}else{
+	// 							//放大
+	// 							if(num <= 1){
+	// 								num += 0.05
+	// 							}else{
+	// 								num += 0.1
+	// 							}
+	// 						}
+	// 						if(num >= 3){
+	// 							num = 3
+	// 						}else if (num < .2){
+	// 							num = .2
+	// 						}
+	// 						setTimeout(() => {
+	// 							timeSwitch = true
+	// 						}, 100);
+	// 						elParent.firstElementChild.style.transform = "scale("+ num + ") rotateZ("+ angle + "deg)"
+	// 					}
+	// 				});
+	// 			});
+	// 		}
+
+	// 		},
+	// },
+    methods: {
+		init(){
+			let DesignParent = this.$parent
+			let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
+			 this.designItemDetail = designItemDetail
+			// this.clearModal()
+			this.printStyleList.push({
+				centers:{
+					left:0,
+					top:0,
+				},
+				style:{
+					left:0+"px",
+					top:0+"px",
+					right:"auto",
+					bottom:"auto",
+					width:100+'px',
+					height:100+'px',
+					zIndex:1,
+				},
+				transform:{
+					scale:1,
+					rotateZ:0,
+				},
+				designOpenrtionBtn:false
+			})
+		},
+		setpitch(item,index){
+			this.printStyleList.forEach((v)=>{
+				v.designOpenrtionBtn = false
+			})
+			this.printStyleList[index].designOpenrtionBtn = true
+			this.printStyleList[index].style.zIndex = this.printZIndex++
+		},
+		// 设置移动
+		itemMoveMousedown(index,event){
+			this.imgDomIndex = index
+			this.printStyleList.forEach((v)=>{
+				v.designOpenrtionBtn = false
+			})
+			this.imgDom = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("modal_imgItem")[this.imgDomIndex]
+			this.printStyleList[index].designOpenrtionBtn = true
+			this.printStyleList[index].style.zIndex = this.printZIndex++
+			let imgDomWH = this.imgDom.getBoundingClientRect()
+			let left = Number(this.printStyleList[index].style.left.replace(/px/g,''))
+			let top = Number(this.printStyleList[index].style.top.replace(/px/g,''))
+			this.printStyleList[index].centers.left = imgDomWH.x+event.offsetX-left
+			this.printStyleList[index].centers.top = imgDomWH.y+event.offsetY-top
+			document.addEventListener("mouseup", this.mouseup);
+			document.addEventListener("mousemove", this.moveMousemove);
+		},
+		//设置尺寸
+		itemSizeMousedown(direction,event){
+			this.direction = direction
+			this.imgDom = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("modal_imgItem")[this.imgDomIndex]
+			this.printStyleList[this.imgDomIndex].designOpenrtionBtn = true
+			let imgDomWH = this.imgDom.getBoundingClientRect()
+			let li = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("designOpenrtion_btn_top")[0].offsetWidth/2
+			if(this.direction == 'right' || this.direction == 'bottom'){
+				this.printStyleList[this.imgDomIndex].centers.left = imgDomWH.x+event.offsetX-li
+				this.printStyleList[this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY-li
+			}else{
+				this.printStyleList[this.imgDomIndex].centers.left = imgDomWH.x+event.offsetX+imgDomWH.width-li
+				this.printStyleList[this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY+imgDomWH.height-li
+			}
+			
+			document.addEventListener("mouseup", this.sizeMouseup);
+			document.addEventListener("mousemove", this.sizeMousemove);
+		},
+		//鼠标移动
+		moveMousemove(e) {
+			let imgDomWH = this.imgDom.getBoundingClientRect()
+			let parentNode = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("designOpenrtion_imgMask")[0].getBoundingClientRect()
+			let x = (e.x - this.printStyleList[this.imgDomIndex].centers.left)+'px'
+			let y = ( e.y - this.printStyleList[this.imgDomIndex].centers.top)+'px'
+			this.printStyleList[this.imgDomIndex].style.left = x
+			this.printStyleList[this.imgDomIndex].style.top = y
+			if(x.replace(/px/g,'') >= parentNode.width - imgDomWH.width){
+				this.printStyleList[this.imgDomIndex].style.left = parentNode.width - imgDomWH.width+'px'
+			}
+			if(x.replace(/px/g,'') <= 0){
+				this.printStyleList[this.imgDomIndex].style.left = 0+'px'
+			}
+			if(y.replace(/px/g,'') >= parentNode.height - imgDomWH.height){
+				this.printStyleList[this.imgDomIndex].style.top = parentNode.height - imgDomWH.height+'px'
+			}
+			if(y.replace(/px/g,'') <= 0){
+				this.printStyleList[this.imgDomIndex].style.top = 0+'px'
+			}
+		},
+
+		sizeMousemove(e) {
+			let imgDomWH = this.imgDom.getBoundingClientRect()
+			let parentNode =this.imgDom.parentNode
+			let width = imgDomWH.width
+			let height = imgDomWH.height
+			let num = width/height
+			let w,h
+			//判断移动四个边
+			if(this.direction == 'right'){
+				w = (e.x - this.printStyleList[this.imgDomIndex].centers.left)
+				h = (e.x - this.printStyleList[this.imgDomIndex].centers.left)*num
+				width = w+'px'
+				height = w*num+'px'
+			}else if(this.direction == 'top'){
+				this.printStyleList[this.imgDomIndex].style.top = 'auto'
+				// this.printStyleList[this.imgDomIndex].style.left = 'auto'
+				this.printStyleList[this.imgDomIndex].style.bottom = parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop+'px'
+				w = (e.x - this.printStyleList[this.imgDomIndex].centers.left)*num
+				h = (this.printStyleList[this.imgDomIndex].centers.top - e.y)
+				
+				height = h+'px'
+				width = h*num+'px'
+			}else if(this.direction == 'bottom'){
+				h = (e.y - this.printStyleList[this.imgDomIndex].centers.top)
+				height = h+'px'
+				width = h*num+'px'
+			}else if(this.direction == 'left'){
+				this.printStyleList[this.imgDomIndex].style.left = 'auto'
+				this.printStyleList[this.imgDomIndex].style.right = parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft+'px'
+				w = (this.printStyleList[this.imgDomIndex].centers.left - e.x)
+				width = w+'px'
+				height = w*num+'px'
+			}
+			//判断尺寸是否到边
+			this.printStyleList[this.imgDomIndex].style.width = width
+			this.printStyleList[this.imgDomIndex].style.height = height
+
+		},
+		//鼠标抬起
+		sizeMouseup(e){
+			this.printStyleList[this.imgDomIndex].style={
+				right:'auto',
+				left:this.imgDom.offsetLeft+'px',
+				bottom:'auto',
+				top:this.imgDom.offsetTop+'px',
+				height:this.imgDom.offsetHeight+'px',
+				width:this.imgDom.offsetWidth+'px',
+				zIndex:this.printZIndex
+			}
+			document.removeEventListener("mouseup", this.sizeMouseup);
+			document.removeEventListener("mousemove", this.sizeMousemove);
+		},
+		mouseup(e) {
+
+			document.removeEventListener("mouseup", this.mouseup);
+			document.removeEventListener("mousemove", this.moveMousemove);
+		},
+		clearModal(){
+			this.printZIndex = 2//点击图片z-index
+			this.imgDomIndex = 0//点击图片下标
+			this.clothes = []
+			this.printStyleList.splice(1,this.printStyleList.length-1)
+		},
+		setPreview(){
+
+		},
+    },
+});
+</script>
+
+<style lang="less" scoped>
+.designOpenrtion_modal {
+	max-width: 1440px;
+	.ant-modal-body{
+		padding: 4rem 5rem 0rem!important;
+		// height: calc(65vh - 6.4rem);
+		height: 65rem;
+		display: flex;
+		overflow-y: hidden;
+		flex-direction: column;
+	}
+	.ant-modal-content{
+		border-radius: 1rem;
+		overflow: hidden;
+	}
+}
+.design_compile_content {
+	// background: #f2f3fb;
+	// padding-bottom: 2.9rem;
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	width: 100%;	
+	.designOpenrtion_centent{
+		width: 100%;	
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		align-content: space-around;
+		flex-wrap: nowrap;
+		margin: 0 auto;
+		overflow: hidden;
+		justify-content: space-between;
+		position: relative;
+		user-select:none;
+		position: relative;
+		&.active{
+			flex-direction: row;
+		}
+		.designOpenrtion_imgMask{
+			width: auto;
+			height: auto;
+			position: relative;
+			width: 100%;
+			height: 100%;
+			overflow: hidden;
+			>img{
+				z-index: 2;
+				position: relative;
+			}
+			>div{
+				position: absolute;
+				width: 100%;
+				height: 100%;
+				top: 0;
+			}
+		}
+		.designOpenrtion_print{
+			z-index: 1;
+			.modal_imgItem{
+				position: absolute;
+				overflow: hidden;
+				top: 0;
+				img{
+					width: 100%;
+					height: 100%;
+					float: left;
+					user-select:none;
+					-webkit-user-drag: none;
+				}
+			}
+		}
+		.designOpenrtion_btn{
+			z-index: 3;
+			ul{
+				list-style: none;
+				// width: 100%;
+				// height: 100%;
+				position: absolute;
+				top: 0;
+				left: 0;
+				box-sizing: border-box;
+				border: 2px solid rgb(20, 188, 255);
+				padding: 0;
+				-webkit-user-drag: none;
+				user-select:none;
+				opacity: 0;
+				margin: 0;
+				
+				li{
+					cursor: pointer;
+					// border-radius: 50%;
+					width: 1rem;
+					height: 1rem;
+					background-color: rgb(20, 188, 255);
+					position: absolute;
+					pointer-events: none;
+				}
+				&.active{
+					opacity: 1;
+					li{
+						pointer-events: auto;
+					}
+				}
+				.designOpenrtion_btn_top,.designOpenrtion_btn_bottom{
+					left: 50%;
+					transform: translate(-50%,-50%) ;
+					cursor: n-resize;
+				}
+				.designOpenrtion_btn_top{
+					top: 0;
+				}
+				.designOpenrtion_btn_bottom{
+					top: 100%;
+				}
+				.designOpenrtion_btn_left,.designOpenrtion_btn_right{
+					top: 50%;
+					transform: translate(-50%,-50%) ;
+					cursor: e-resize;
+				}
+				.designOpenrtion_btn_left{
+					left: 0;
+				}
+				.designOpenrtion_btn_right{
+					left: 100%;
+				}
+				.designOpenrtion_rotote{
+					top: 50%;
+					left: 50%;
+					transform: translate(-50%,-50%);
+					width: 0;
+					height: 0;
+				}
+				.designOpenrtion_rotote::after{
+					position: absolute;
+					content: "";
+					background-color: #14bcff;
+					width: 2px;
+					height: 30px;
+					left: 50%;
+					bottom: 0;
+					transform: translateX(-50%);
+				}
+				.designOpenrtion_rotote::before{
+					position: absolute;
+					content: "";
+					background-color: #14bcff;
+					top: calc(50% - 30px);
+					left: 50%;
+					transform: translate(-50%,-50%) ;
+					width: 1.5rem;
+					height: 1.5rem;
+					border-radius: 50%;
+				}
+			}
+		}
+		.subitOkPreviewBtn{
+			z-index: 2;
+			margin-bottom: 2rem;
+			width: 10rem;
+			text-align: center;
+			bottom: 0;
+			position: relative;
+		}
+	}
+}
+</style>
\ No newline at end of file
diff --git a/src/component/HomePage/RobotAssist.vue b/src/component/HomePage/RobotAssist.vue
index 674ea5b2..bc53d3f2 100644
--- a/src/component/HomePage/RobotAssist.vue
+++ b/src/component/HomePage/RobotAssist.vue
@@ -1,7 +1,7 @@
 <template>
-	<div class="robot" @click="robotmax">
+	<div class="robot" @mouseover="robotmax">
 		<div class="robot_top" ref="robotDom" v-fade="robotTop,'block'">
-			<div :class="[item.state == 1?'text_right':'text_left']" v-for="item in dialogue" ref="robotChildDom">
+			<div :class="[item.state == 1?'text_right':'text_left']" v-for="item in record" ref="robotChildDom">
 				<div class="robot_text">{{item.str}}</div>
 			</div>
 		</div>
@@ -44,7 +44,7 @@ export default defineComponent({
 		const robotInput = ref(false)
         let timeTop:any =  0;
         let timeInput:any =  0;
-		let dialogue:any = ref([
+		let record:any = ref([
 			{
 				state:1,
 				str:"2222222 22222222 222"
@@ -64,7 +64,7 @@ export default defineComponent({
 		robotTop,
 		robotInput,
 		chatCentent,
-		dialogue,
+		record,
 		robotDom,
 		robotChildDom,
 		timeTop,
@@ -112,8 +112,6 @@ export default defineComponent({
 			this.createTimer()
 		},
 		textScroll(){
-			
-			
 			this.$nextTick(()=>{
 				if(this.robotDom && this.robotChildDom){
 				// const items = this.robotChildDom._rawValue
@@ -131,21 +129,20 @@ export default defineComponent({
 			this.createTimer()
 		},
 		roborSend (){
-			this.createTimer()
+			this.clearTimer()
 			if(!this.chatCentent){
                 message.error("Please enter content");
 				return
 			}
-			this.dialogue.push({
+			this.record.push({
 				state:2,
 				str:this.chatCentent
 			})
 			let a = true
 			let data = {
 				"user_id" : this.userInfo.userId,
-				// "message" : this.chatCentent,
-				"message" : "Hello, can you tell me what holiday is on July 1st",
-				
+				"message" : this.chatCentent,
+				// "message" : "Hello, can you tell me what holiday is on July 1st",
 				"session_id":""
 			}
 			let interaction = {onDownloadProgress: (progressEvent:any) => {
@@ -153,55 +150,30 @@ export default defineComponent({
 					console.log(progressEvent.event.currentTarget.response);
 					
 				//   if(a){
-				// 	this.dialogue.push({
+				// 	this.record.push({
 				// 		state:1,
 				// 		str:progressEvent.event.currentTarget.response
 				// 	})
 				// 	a = false
 				//   }else{
-				// 	this.dialogue[this.dialogue.length].str = progressEvent.event.currentTarget.response
+				// 	this.record[this.record.length].str = progressEvent.event.currentTarget.response
 				//   }
                 },
             }
-			Https.axiosPost(Https.httpUrls.pythonChatStream, data,interaction).then(
-                (rv: any) => {
-					a = true
-					this.createTimer()
-                }
-            ).catch(res=>{
-				this.createTimer()
-            });
-
-			// new Promise((resolve, reject) => {
-
-				
-			
-            // axios.post("/api/python/chatStream", data,{
-			// 	onDownloadProgress: (progressEvent:any) => {
-			// 		// this.clearTimer()
-			// 		console.log(progressEvent);
-					
-			// 	//   if(a){
-			// 	// 	this.dialogue.push({
-			// 	// 		state:1,
-			// 	// 		// str:progressEvent.event.currentTarget.response
-			// 	// 	})
-			// 	// 	a = false
-			// 	//   }else{
-			// 	// 	this.dialogue[this.dialogue.length].str = progressEvent.event.currentTarget.response
-			// 	//   }
-            //     },
-			// 	}).then(response => {
-            //         // resolve(response)
-			// 		console.log(response);
-
-            //     }).catch((error) => {
-			// 		console.log(error);
-					
-			// 	})
-
-			// }); 
-		
+			// Https.axiosPost(Https.httpUrls.pythonChatStream, data).then(
+			// // Https.axiosPost(Https.httpUrls.pythonChatStream, data,interaction).then(
+            //     (rv: any) => {
+			// 		// a = true
+			// 		console.log(rv);
+			// 		this.record.push({
+			// 			state:1,
+			// 			// str:rv.
+			// 		})
+			// 		this.createTimer()
+            //     }
+            // ).catch(res=>{
+			// 	this.createTimer()
+            // });
 			this.chatCentent = ""
 			this.textScroll()
 
@@ -220,7 +192,6 @@ export default defineComponent({
 			}
            
         },
-
         //清除定时器
         clearTimer() {