first commit
first commit
This commit is contained in:
zhouchengrong
363
src/component/HomePage/RobotAssist.vue
Normal file
363
src/component/HomePage/RobotAssist.vue
Normal file
@@ -0,0 +1,363 @@
|
||||
<template>
|
||||
<div class="robot" @click="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="robot_text">{{item.str}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="robot_bottom">
|
||||
<div class="robot_input" v-fade="robotInput,'flex'">
|
||||
<input
|
||||
placeholder="write a message~"
|
||||
v-model="chatCentent"
|
||||
@keydown.enter="roborSend()"
|
||||
@input="robotmax"
|
||||
/>
|
||||
<div class="robot_btn">
|
||||
<i class="fi fi-ss-paper-plane-top" @click="roborSend"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="robot_img">
|
||||
<img src="@/assets/images/homePage/robot.png" @click="robotBtn">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, createVNode, ref,Ref} from "vue";
|
||||
import { UserOutlined, DownOutlined } from "@ant-design/icons-vue";
|
||||
import { Https } from "@/tool/https";
|
||||
import { getCookie } from "@/tool/cookie";
|
||||
import axios from 'axios'
|
||||
|
||||
import { message } from "ant-design-vue";
|
||||
export default defineComponent({
|
||||
components: {
|
||||
DownOutlined,
|
||||
UserOutlined,
|
||||
},
|
||||
setup() {
|
||||
const robotDom = ref<HTMLElement | null>(null);
|
||||
const robotChildDom = ref<HTMLElement | null>(null);
|
||||
let chatCentent = ref<string>('');
|
||||
const robotTop = ref(false)
|
||||
const robotInput = ref(false)
|
||||
let timeTop:any = 0;
|
||||
let timeInput:any = 0;
|
||||
let dialogue:any = ref([
|
||||
{
|
||||
state:1,
|
||||
str:"2222222 22222222 222"
|
||||
},
|
||||
{
|
||||
state:2,
|
||||
str:"2222 22222 22 2222 22"
|
||||
},
|
||||
{
|
||||
state:1,
|
||||
str:"222 22222 222 2222 222"
|
||||
},
|
||||
])
|
||||
const userInfo:any = {}
|
||||
|
||||
return {
|
||||
robotTop,
|
||||
robotInput,
|
||||
chatCentent,
|
||||
dialogue,
|
||||
robotDom,
|
||||
robotChildDom,
|
||||
timeTop,
|
||||
timeInput,
|
||||
userInfo,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.textScroll()
|
||||
let userInfo:any = getCookie("userInfo")
|
||||
this.userInfo = JSON.parse(userInfo);
|
||||
console.log(22);
|
||||
|
||||
const data = {
|
||||
"user_id": "83",
|
||||
"session_id": "",
|
||||
"message": "Hello, can you tell me what holiday is on July 1st",
|
||||
};
|
||||
|
||||
axios.post('/api/python/chatStream', data, {onDownloadProgress: (progressEvent) => {
|
||||
// console.log(11);
|
||||
// num = progressEvent.event.currentTarget.response
|
||||
console.log(progressEvent);
|
||||
|
||||
},
|
||||
}).then((res)=>{
|
||||
console.log(res);
|
||||
}).catch((response) => {
|
||||
console.log(response);
|
||||
// var res = http.responseText
|
||||
});
|
||||
},
|
||||
directives:{
|
||||
fade:{
|
||||
updated (el,oldVal){
|
||||
if(oldVal.value){
|
||||
el.style.display = oldVal.arg
|
||||
setTimeout(() => {
|
||||
el.classList.add("active")
|
||||
}, 100);
|
||||
}else{
|
||||
el.classList.remove("active")
|
||||
setTimeout(() => {
|
||||
el.style.display="none"
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
robotBtn(){
|
||||
if(!this.robotTop||!this.robotInput){
|
||||
this.robotTop = true
|
||||
this.robotInput = true
|
||||
|
||||
}else{
|
||||
this.robotTop = false
|
||||
this.robotInput = false
|
||||
}
|
||||
this.textScroll()//聊天定位到最低部
|
||||
this.createTimer()
|
||||
},
|
||||
textScroll(){
|
||||
|
||||
|
||||
this.$nextTick(()=>{
|
||||
if(this.robotDom && this.robotChildDom){
|
||||
// const items = this.robotChildDom._rawValue
|
||||
let num = 0
|
||||
for (let index = 0; index < (this.$refs.robotChildDom as any).length; index++) {
|
||||
const height = (this.$refs.robotChildDom as any)[index].clientHeight;
|
||||
num = num+40+height
|
||||
}
|
||||
this.robotDom.scrollTop = num
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
robotmax(){//点击内容就设置为true显示 重置定时器
|
||||
this.createTimer()
|
||||
},
|
||||
roborSend (){
|
||||
this.createTimer()
|
||||
if(!this.chatCentent){
|
||||
message.error("Please enter content");
|
||||
return
|
||||
}
|
||||
this.dialogue.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",
|
||||
|
||||
"session_id":""
|
||||
}
|
||||
console.log(getCookie('token'));
|
||||
|
||||
let interaction = {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
|
||||
}
|
||||
},
|
||||
}
|
||||
// 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) => {
|
||||
// console.log(11);
|
||||
// num = progressEvent.event.currentTarget.response
|
||||
console.log(progressEvent);
|
||||
|
||||
},
|
||||
}).then((res)=>{
|
||||
console.log(res);
|
||||
}).catch((response) => {
|
||||
console.log(response);
|
||||
// var res = http.responseText
|
||||
});
|
||||
|
||||
// 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.textScroll()
|
||||
|
||||
},
|
||||
//创建定时器
|
||||
createTimer() {
|
||||
if (this.robotTop || this.robotInput) {
|
||||
this.clearTimer()
|
||||
this.timeTop = setInterval(() => {
|
||||
this.robotTop = false
|
||||
}, 10000);
|
||||
this.timeInput = setInterval(() => {
|
||||
this.robotInput = false
|
||||
}, 5000);
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
//清除定时器
|
||||
clearTimer() {
|
||||
|
||||
clearInterval(this.timeTop);
|
||||
clearInterval(this.timeInput);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.robot{
|
||||
position: absolute;
|
||||
bottom: 25px;
|
||||
right: 50px;
|
||||
z-index: 9999;
|
||||
// width: 400px;
|
||||
.robot_top{
|
||||
// width: 70%;
|
||||
width: 250px;
|
||||
margin-left: auto;
|
||||
height: 140px;
|
||||
overflow-x: hidden;
|
||||
transition: .3s all;
|
||||
opacity: 0;
|
||||
display: none;
|
||||
&.active{
|
||||
opacity: 1;
|
||||
}
|
||||
&.robot_top::-webkit-scrollbar{display: none;}
|
||||
.robot_text{
|
||||
font-size: 14px;
|
||||
padding: 5px 10px;
|
||||
display: inline-block;
|
||||
border-radius: 20px;
|
||||
max-width: 80%;
|
||||
}
|
||||
.text_left,.text_right{
|
||||
margin: 20px 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
.text_left{
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
>div{
|
||||
background-color: #e8e8ea;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
.text_right{
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
>div{
|
||||
background-color: #835ff7;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.robot_bottom{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.robot_input{
|
||||
border: 1px solid #d5d5d7;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 5px 10px;
|
||||
background: #fff;
|
||||
border-radius: 5px;
|
||||
// height: 32px;
|
||||
transition: .3s all;
|
||||
opacity: 0;
|
||||
display: none;
|
||||
margin-right: 40px;
|
||||
&.active{
|
||||
opacity: 1;
|
||||
}
|
||||
input{
|
||||
border: none;
|
||||
font-size: 12px;
|
||||
width: 250px;
|
||||
}
|
||||
.robot_btn{
|
||||
display: flex;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.fi-ss-paper-plane-top{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.fi-ss-paper-plane-top::before{
|
||||
color: #835df8;
|
||||
}
|
||||
}
|
||||
.robot_img{
|
||||
margin-left: auto;
|
||||
img{
|
||||
width: 100px;
|
||||
width: 80px;
|
||||
// margin-left: 40px;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user