提交

src/components/mycard/mycard.vue

@@ -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;
+      let textarea = this.textarea;
-        this.userInfoList2.pop();
-        // 这个地方需要掉接口
-        axios({
-          method: "POST",
-          url:
-            "http://dual.carbon.ap.5m.work/admin-api/energy/monitor/getTopology",
-          // "http://localhost/admin-api/energy/monitor/getTopology",
-          data: {
-            year: 2024
-          }
-        })
-          .then(response => {
-            console.log(response);
-          })
-          .catch(error => {
-            console.log(error);
-          });
-        this.userInfoList2.push({
-          url: require("@/assets/img/gpt.png"),
-          username: "花间一壶酒",
-          info: "我来告诉你",
-          timer: "2022/8/9",
-          position: "left"
-        });
-      }, 2000);
       this.textarea = "";
+      fetch("http://192.168.40.45:5002/visit_record_summary_talk", {
+        method: "POST",
+        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, "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.error("Error:", error);
+        })
+        .finally(() => {
+          console.log("KKKKKKKKKKKKKKKKKKKKKKKKK");
+
+          // this.userInfoList = this.userInfoList2;
+        });
+
+      // 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;