This commit is contained in:
lorenx
parent
083deef2d2
commit
616429bcb7
|
|
@ -29,7 +29,7 @@
|
|||
<!-- <img :src="item.url" alt="头像" class="head_portrait2" v-if="item.position == 'left'&&loading"/> -->
|
||||
<img :src="item.url" alt="头像" class="head_portrait2" />
|
||||
<div :class="item.position == 'left' ? 'chatLeft' : 'chatRight'">
|
||||
<div class="text" v-html="item.info" v-if="item.info!==''"></div>
|
||||
<div class="text" id="text-container" v-html="item.info" v-if="item.info!==''"></div>
|
||||
<div class="bounce" v-if="item.info===''&&item.position == 'left'&&loading">
|
||||
<div></div>
|
||||
<div></div>
|
||||
|
|
@ -43,6 +43,7 @@
|
|||
<div class="infoIcon"></div>
|
||||
<textarea
|
||||
type="textarea"
|
||||
:disabled="disabled"
|
||||
class="infoInput"
|
||||
v-model="textarea"
|
||||
@keydown.enter.exact="handlePushKeyword($event)"
|
||||
|
|
@ -65,6 +66,7 @@ export default {
|
|||
//用户点击选中变色
|
||||
act: Number,
|
||||
loading: false,
|
||||
disabled: false,
|
||||
//模拟花间一壶酒用户的历史信息
|
||||
userInfoList2: [
|
||||
{
|
||||
|
|
@ -84,6 +86,7 @@ export default {
|
|||
// position: "right"
|
||||
// }
|
||||
],
|
||||
TestData: "",
|
||||
//历史信息
|
||||
userInfoList: [],
|
||||
//输入框
|
||||
|
|
@ -101,6 +104,7 @@ export default {
|
|||
methods: {
|
||||
//发送
|
||||
setUp() {
|
||||
this.disabled = true;
|
||||
console.log("发送内容:", this.textarea);
|
||||
if (this.textarea.length < 1) {
|
||||
// this.warn = true;
|
||||
|
|
@ -131,34 +135,116 @@ export default {
|
|||
timer: "2022/8/9",
|
||||
position: "left"
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
this.userInfoList2.pop();
|
||||
// 这个地方需要掉接口
|
||||
axios({
|
||||
let textarea = this.textarea;
|
||||
this.textarea = "";
|
||||
fetch("http://192.168.40.45:5002/visit_record_summary_talk", {
|
||||
method: "POST",
|
||||
url:
|
||||
"http://dual.carbon.ap.5m.work/admin-api/energy/monitor/getTopology",
|
||||
// "http://localhost/admin-api/energy/monitor/getTopology",
|
||||
data: {
|
||||
year: 2024
|
||||
body: JSON.stringify({ message: textarea }),
|
||||
headers: {
|
||||
Accept: "text/event-stream",
|
||||
"Content-Type": "application/json"
|
||||
}
|
||||
})
|
||||
// this.TestData = "";
|
||||
// fetch("http://192.168.40.45:5005/stream_json_data", {
|
||||
// method: "POST",
|
||||
// body: JSON.stringify({ message: textarea }),
|
||||
// headers: {
|
||||
// Accept: "text/event-stream",
|
||||
// "Content-Type": "application/json"
|
||||
// }
|
||||
// })
|
||||
.then(response => {
|
||||
console.log(response);
|
||||
console.log(response, "respons");
|
||||
if (!response.ok) {
|
||||
throw new Error("Network response was not ok");
|
||||
}
|
||||
console.log(response.body, "response.text()response.text()");
|
||||
|
||||
return response.body;
|
||||
// return response.json();
|
||||
})
|
||||
.then(stream => {
|
||||
const reader = stream.getReader();
|
||||
const encode = new TextDecoder("utf-8");
|
||||
this.loading = false;
|
||||
const that = this;
|
||||
that.TestData = "";
|
||||
function readChunk() {
|
||||
reader.read().then(({ value, done }) => {
|
||||
const decodeText = encode.decode(value);
|
||||
if (decodeText) {
|
||||
that.userInfoList2[
|
||||
that.userInfoList2.length - 1
|
||||
].info += JSON.parse(decodeText).text;
|
||||
}
|
||||
// const text = JSON.parse(decodeText).text; // 要显示的文字
|
||||
// const container = document.getElementById("text-container"); // 容器
|
||||
// container.textContent += text
|
||||
// that.TestData += JSON.parse(decodeText).text;
|
||||
|
||||
// let index = 0; // 当前文字索引
|
||||
|
||||
// function showText() {
|
||||
// if (index < text.length) {
|
||||
// container.textContent += text[index]; // 显示当前字符
|
||||
// index++;
|
||||
// setTimeout(showText, 100); // 设置下一次调用的延迟
|
||||
// }
|
||||
// }
|
||||
|
||||
// showText(); // 开始显示文字
|
||||
if (done) {
|
||||
that.disabled = false;
|
||||
console.log(that.TestData, "that.TestData");
|
||||
// 数据流结束
|
||||
console.log("Done reading the stream");
|
||||
return;
|
||||
}
|
||||
setTimeout(readChunk, 1000); // 延时1秒后继续读取下一个数据块
|
||||
});
|
||||
}
|
||||
|
||||
readChunk(); // 启动读取流程
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error);
|
||||
console.error("Error:", error);
|
||||
})
|
||||
.finally(() => {
|
||||
console.log("KKKKKKKKKKKKKKKKKKKKKKKKK");
|
||||
|
||||
// this.userInfoList = this.userInfoList2;
|
||||
});
|
||||
this.userInfoList2.push({
|
||||
url: require("@/assets/img/gpt.png"),
|
||||
username: "花间一壶酒",
|
||||
info: "我来告诉你",
|
||||
timer: "2022/8/9",
|
||||
position: "left"
|
||||
});
|
||||
}, 2000);
|
||||
this.textarea = "";
|
||||
|
||||
// axios({
|
||||
// method: "POST",
|
||||
// url: "http://192.168.40.45:5111/stream",
|
||||
// // "http://localhost/admin-api/energy/monitor/getTopology",
|
||||
// data: {
|
||||
// message: textarea
|
||||
// }
|
||||
// })
|
||||
// .then(response => {
|
||||
// this.loading = false;
|
||||
// this.userInfoList2.pop();
|
||||
// this.textarea = "";
|
||||
|
||||
// console.log(response, "hhhhhhhhhhhhhhh");
|
||||
// this.userInfoList2.push({
|
||||
// url: require("@/assets/img/gpt.png"),
|
||||
// username: "花间一壶酒",
|
||||
// info: response.data,
|
||||
// timer: "2022/8/9",
|
||||
// position: "left"
|
||||
// });
|
||||
// })
|
||||
// .catch(error => {
|
||||
// console.log(error);
|
||||
// });
|
||||
|
||||
// }, 2000);
|
||||
|
||||
// 页面滚动到底部
|
||||
this.$nextTick(() => {
|
||||
// 一定要用nextTick
|
||||
|
|
@ -259,7 +345,8 @@ export default {
|
|||
.titleBox {
|
||||
height: 10%;
|
||||
width: 100%;
|
||||
background-image: linear-gradient(to right, #1e76bc, #69a3d5);
|
||||
/* background-image: linear-gradient(to right, #1e76bc, #69a3d5); */
|
||||
background-color: #313541;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-top-right-radius: 10px;
|
||||
|
|
@ -290,17 +377,18 @@ export default {
|
|||
width: 100%;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-family: "Micrsofot Yahei";
|
||||
/* font-family: "Micrsofot Yahei"; */
|
||||
font-size: 16px;
|
||||
resize: none;
|
||||
}
|
||||
.fasong {
|
||||
height: 30px;
|
||||
width: 80px;
|
||||
background-color: #e8e8e8;
|
||||
background-color: #0fa47f;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
border-radius: 4px;
|
||||
color: #58df4d;
|
||||
color: #f0f4f0;
|
||||
margin-top: 1%;
|
||||
align-self: flex-end;
|
||||
margin-right: 20px;
|
||||
|
|
@ -434,9 +522,9 @@ export default {
|
|||
align-items: flex-end;
|
||||
}
|
||||
.chatRight .text {
|
||||
color: #434343;
|
||||
color: #f9f7f7;
|
||||
/* margin-top: 8px; */
|
||||
background-color: #95ec69;
|
||||
background-color: #0fa47f;
|
||||
display: inline-block;
|
||||
padding: 12px 16px;
|
||||
line-height: 24px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue