commit
This commit is contained in:
WangXiaoDong
489
src/component/Detail/setDesignItem.vue
Normal file
489
src/component/Detail/setDesignItem.vue
Normal file
@@ -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>
|
||||||
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="robot" @click="robotmax">
|
<div class="robot" @mouseover="robotmax">
|
||||||
<div class="robot_top" ref="robotDom" v-fade="robotTop,'block'">
|
<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 class="robot_text">{{item.str}}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -44,7 +44,7 @@ export default defineComponent({
|
|||||||
const robotInput = ref(false)
|
const robotInput = ref(false)
|
||||||
let timeTop:any = 0;
|
let timeTop:any = 0;
|
||||||
let timeInput:any = 0;
|
let timeInput:any = 0;
|
||||||
let dialogue:any = ref([
|
let record:any = ref([
|
||||||
{
|
{
|
||||||
state:1,
|
state:1,
|
||||||
str:"2222222 22222222 222"
|
str:"2222222 22222222 222"
|
||||||
@@ -64,7 +64,7 @@ export default defineComponent({
|
|||||||
robotTop,
|
robotTop,
|
||||||
robotInput,
|
robotInput,
|
||||||
chatCentent,
|
chatCentent,
|
||||||
dialogue,
|
record,
|
||||||
robotDom,
|
robotDom,
|
||||||
robotChildDom,
|
robotChildDom,
|
||||||
timeTop,
|
timeTop,
|
||||||
@@ -112,8 +112,6 @@ export default defineComponent({
|
|||||||
this.createTimer()
|
this.createTimer()
|
||||||
},
|
},
|
||||||
textScroll(){
|
textScroll(){
|
||||||
|
|
||||||
|
|
||||||
this.$nextTick(()=>{
|
this.$nextTick(()=>{
|
||||||
if(this.robotDom && this.robotChildDom){
|
if(this.robotDom && this.robotChildDom){
|
||||||
// const items = this.robotChildDom._rawValue
|
// const items = this.robotChildDom._rawValue
|
||||||
@@ -131,21 +129,20 @@ export default defineComponent({
|
|||||||
this.createTimer()
|
this.createTimer()
|
||||||
},
|
},
|
||||||
roborSend (){
|
roborSend (){
|
||||||
this.createTimer()
|
this.clearTimer()
|
||||||
if(!this.chatCentent){
|
if(!this.chatCentent){
|
||||||
message.error("Please enter content");
|
message.error("Please enter content");
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
this.dialogue.push({
|
this.record.push({
|
||||||
state:2,
|
state:2,
|
||||||
str:this.chatCentent
|
str:this.chatCentent
|
||||||
})
|
})
|
||||||
let a = true
|
let a = true
|
||||||
let data = {
|
let data = {
|
||||||
"user_id" : this.userInfo.userId,
|
"user_id" : this.userInfo.userId,
|
||||||
// "message" : this.chatCentent,
|
"message" : this.chatCentent,
|
||||||
"message" : "Hello, can you tell me what holiday is on July 1st",
|
// "message" : "Hello, can you tell me what holiday is on July 1st",
|
||||||
|
|
||||||
"session_id":""
|
"session_id":""
|
||||||
}
|
}
|
||||||
let interaction = {onDownloadProgress: (progressEvent:any) => {
|
let interaction = {onDownloadProgress: (progressEvent:any) => {
|
||||||
@@ -153,55 +150,30 @@ export default defineComponent({
|
|||||||
console.log(progressEvent.event.currentTarget.response);
|
console.log(progressEvent.event.currentTarget.response);
|
||||||
|
|
||||||
// if(a){
|
// if(a){
|
||||||
// this.dialogue.push({
|
// this.record.push({
|
||||||
// state:1,
|
// state:1,
|
||||||
// str:progressEvent.event.currentTarget.response
|
// str:progressEvent.event.currentTarget.response
|
||||||
// })
|
// })
|
||||||
// a = false
|
// a = false
|
||||||
// }else{
|
// }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(
|
// Https.axiosPost(Https.httpUrls.pythonChatStream, data).then(
|
||||||
(rv: any) => {
|
// // Https.axiosPost(Https.httpUrls.pythonChatStream, data,interaction).then(
|
||||||
a = true
|
// (rv: any) => {
|
||||||
this.createTimer()
|
// // a = true
|
||||||
}
|
// console.log(rv);
|
||||||
).catch(res=>{
|
// this.record.push({
|
||||||
this.createTimer()
|
// state:1,
|
||||||
});
|
// // str:rv.
|
||||||
|
// })
|
||||||
// new Promise((resolve, reject) => {
|
// this.createTimer()
|
||||||
|
// }
|
||||||
|
// ).catch(res=>{
|
||||||
|
// this.createTimer()
|
||||||
// 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);
|
|
||||||
|
|
||||||
// })
|
|
||||||
|
|
||||||
// });
|
|
||||||
|
|
||||||
this.chatCentent = ""
|
this.chatCentent = ""
|
||||||
this.textScroll()
|
this.textScroll()
|
||||||
|
|
||||||
@@ -220,7 +192,6 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
//清除定时器
|
//清除定时器
|
||||||
clearTimer() {
|
clearTimer() {
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user