update

src/api/classObserve.js

@@ -167,3 +167,11 @@ export function upload_file_knowledgeRequest(data){//删除模板数据
 	})
 }
 
+export function getChatListRequest(data){//获取聊天记录
+	return request2({
+		url: 'https://gpt4.cocorobo.cn/get_agent_park_chat',
+    method: 'post',
+    data,
+    hideloading: true
+	})
+}

src/views/classObserve/aiChat.vue

@@ -1,45 +1,46 @@
 <template>
-  <div class="bindFrom">
-    <bar @cutPage="cutPage" @backPage="1" :tit="'AI对话'" :backPage="1"></bar>
-    <div style="height: 50px;width: 100%;"></div>
-    <div class="con">
-      <div class="chat1">
-        <div class="PicturePop">
-          <img src="../../assets/images/classObserve/CocoClass.png" alt="" />
+  <div class="bindFrom" v-loading="loading">
+    <bar @cutPage="cutPage" :tit="'AI对话'" :backPage="0"></bar>
+    <div class="con" ref="chatAreaRef">
+      <template v-for="(item, index) in chatList">
+        <div class="chat1" style="justify-content: flex-end;" v-if="item.content">
+          <div class="conText">
+            <div class="Txt" v-text="item.content"></div>
+            <img
+              style="position: absolute;left: -25px;bottom: -10px;"
+              src="../../assets/images/classObserve/copyTextZ.png"
+              alt=""
+            />
+            <div class="DateT" style="right: 0 !important;">{{ item.createtime }}</div>
+          </div>
+          <div class="PicturePop">
+            <img src="../../assets/images/classObserve/userAvatar.png" alt="" />
+          </div>
         </div>
-        <div class="conText">
-          <div class="Txt">您好！欢迎使用课堂观察功能，您可以在此处，针对此当前课堂记录的内容开始进行AI对话。</div>
-          <img
-            style="position: absolute;right: -25px;bottom: -10px;"
-            src="../../assets/images/classObserve/copyTextZ.png"
-            alt=""
-          />
-          <div class="DateT">2002-11-12</div>
+        <div class="chat1" v-loading="item.loading">
+          <div class="PicturePop">
+            <img src="../../assets/images/classObserve/ai.png" alt="" />
+          </div>
+          <div class="conText">
+            <div class="Txt" v-html="item.aiContent"></div>
+            <img
+              style="position: absolute;right: -25px;bottom: -10px;"
+              src="../../assets/images/classObserve/copyTextZ.png"
+              alt=""
+            />
+            <div class="DateT">{{ item.createtime }}</div>
+          </div>
         </div>
-      </div>
-      <div class="chat1" style="justify-content: flex-end;">
-        <div class="conText">
-          <div class="Txt">你好</div>
-          <img
-            style="position: absolute;left: -25px;bottom: -10px;"
-            src="../../assets/images/classObserve/copyTextZ.png"
-            alt=""
-          />
-          <div class="DateT" style="right: 0 !important;">2002-11-12</div>
-        </div>
-        <div class="PicturePop">
-          <img src="../../assets/images/classObserve/CocoClass.png" alt="" />
-        </div>
-      </div>
-      <div class="langBtn">
+      </template>
+      <!-- <div class="langBtn">
         <img src="../../assets/images/classObserve/langcut.png" alt="" />
         <span>普通话</span>
-      </div>
+      </div> -->
     </div>
-    <div class="bot">
-      <img class="pict1" src="../../assets/images/classObserve/maike.png" alt="" />
+    <div class="bot" v-loading="chatLoading">
+      <!-- <img class="pict1" src="../../assets/images/classObserve/maike.png" alt="" /> -->
       <el-input v-model="input" placeholder="请在此输入您想了解的内容"></el-input>
-      <img class="pict2" src="../../assets/images/classObserve/sendimg.png" alt="" />
+      <img class="pict2" src="../../assets/images/classObserve/sendimg.png" alt="" @click.stop="send" />
     </div>
   </div>
 </template>
@@ -47,6 +48,7 @@
 <script>
 import bar from './components/bar.vue'
 import fromList from './components/fromList'
+import { getChatListRequest } from '@/api/classObserve'
 
 export default {
   components: {
@@ -57,18 +59,96 @@ export default {
     page: {
       type: Number,
       default: 1
+    },
+    tid: {
+      type: String,
+      default: ''
     }
   },
   data() {
     return {
       selectValue: '',
-      input: ''
+      input: '',
+      loading: false,
+      chatLoading: false,
+      chatList: [],
+      userId: this.$store.state.user.id
     }
   },
   methods: {
     cutPage() {
       this.$emit('cutPage', 1)
+    },
+    send() {
+      console.log('发送')
+    },
+    scrollBottom() {
+			this.$nextTick(() => {
+        // this.textareaChange();
+        // this.$refs.tapeRef.$el.querySelector(
+        //   ".t-chartArea"
+        // ).scrollTop = this.$refs.tapeRef.$el.querySelector(".t-chartArea").scrollHeight;
+				this.$refs.chatAreaRef.scrollTop = this.$refs.chatAreaRef.scrollHeight
+      });
+    },
+    getChatList() {
+      return new Promise((resolve, reject) => {
+        if (!this.tid) return
+        if (this.chatLoading) return this.$message.info('请稍等...')
+        this.chatList = []
+        this.chatLoading = true
+				this.loading = true;
+        let params = {
+          userid: this.userId,
+          groupid: '602def61-005d-11ee-91d8-005056b8q12w',
+          // session_name:``
+          session_name: `${this.tid}-classroomObservation`
+        }
+        getChatListRequest(params)
+          .then(res => {
+            let _data = JSON.parse(res.FunctionResponse)
+            if (_data.length > 0) {
+              let _chatList = []
+              for (let i = 0; i < _data.length; i++) {
+                _chatList.push({
+                  loading: false,
+                  role: 'user',
+                  content: _data[i].problem,
+                  uid: _data[i].id,
+                  AI: 'AI',
+                  aiContent: _data[i].answer,
+                  oldContent: _data[i].answer,
+                  isShowSynchronization: false,
+                  filename: _data[i].filename,
+                  index: i,
+                  is_mind_map: false,
+                  fileid: _data[i].fileid,
+                  createtime: _data[i].createtime
+                })
+              }
+              this.chatList = _chatList
+              this.chatLoading = false
+            } else {
+              //没有对话记录
+              this.chatLoading = false;
+            }
+            resolve()
+						this.loading = false;
+            this.scrollBottom()
+          })
+          .catch(err => {
+            console.log(err)
+            this.$toast.fail('获取对话记录失败')
+            this.chatLoading = false
+            this.scrollBottom()
+						this.loading = false;
+						resolve()
+          })
+      })
     }
+  },
+  mounted() {
+    this.getChatList()
   }
 }
 </script>
@@ -81,10 +161,12 @@ export default {
   height: 100vh;
 }
 .con {
-  flex: 1;
+  height: calc(100vh - 50px - 60px);
+  margin-top: 50px;
   padding: 20px 10px;
   box-sizing: border-box;
   position: relative;
+  overflow: auto;
   background-image: linear-gradient(to bottom, #fff 0%, #ebf1fd 100%);
   .chat1 {
     display: flex;
@@ -97,6 +179,7 @@ export default {
       overflow: hidden;
       flex-shrink: 0;
       margin-right: 5px;
+      margin-left: 5px;
       img {
         width: 100%;
         height: 100%;
@@ -142,10 +225,10 @@ export default {
 }
 
 .bot {
-  height: 80px;
+  height: 60px;
   display: flex;
   justify-content: center;
-  padding: 10px 0;
+  padding: 10px 10px;
   align-items: center;
   box-sizing: border-box;
   .pict1 {
@@ -157,6 +240,7 @@ export default {
     width: 35px;
     height: 35px;
     padding: 5px;
+    margin-left: 5px;
   }
   .el-input__inner {
     border-radius: 30px !important;

src/views/classObserve/homePage.vue

@@ -65,15 +65,15 @@
           <div v-show="showTranscriptType == 1" class="editorBarData">
             <template v-if="bmData.jsonData">
               <div class="ebd_save">
-                <van-popover placement="left" v-model="showEditorBarDataPopover" trigger="click">
+                <!-- <van-popover placement="left" v-model="showEditorBarDataPopover" trigger="click"> -->
                   <div class="ebd_s_btnArea">
-                    <!-- <el-button size="small" type="primary" @click.stop="speakerCodingFn">说话人编码</el-button> -->
+                    <!-- <el-button class="ebd_s_ba_btn" size="small" type="primary" @click.stop="speakerCodingFn">说话人编码</el-button> -->
 
-                    <!-- <el-button size="small" type="primary" @click.stop="behaviorCodingFn">行为编码</el-button> -->
+                    <!-- <el-button class="ebd_s_ba_btn" size="small" type="primary" @click.stop="behaviorCodingFn">行为编码</el-button> -->
 
-                    <el-button size="small" type="primary" @click.stop="saveEditorBarFn">保存</el-button>
+                    <el-button class="ebd_s_ba_btn" size="small" type="primary" @click.stop="saveEditorBarFn">保存</el-button>
                   </div>
-                  <template #reference>
+                  <!-- <template #reference>
                     <svg
                       t="1724054294290"
                       viewBox="0 0 1024 1024"
@@ -89,8 +89,8 @@
                         p-id="2401"
                       ></path>
                     </svg>
-                  </template>
-                </van-popover>
+                  </template> -->
+                <!-- </van-popover> -->
               </div>
 
               <EditorBar v-model="bmData.jsonData.editorBarData.content">
@@ -1411,24 +1411,29 @@ export default {
     height:100%;
     position: relative;
     .ebd_save {
-      left: 100%;
-      bottom: 0;
-      width: 28px;
+      right: 0;
+      top: 100%;
+      width: auto;
       height: 40px;
       position: absolute;
       display: flex;
       justify-content: center;
       align-items: center;
-      border-radius: 0 10px 10px 0;
-      background-color: #fff;
+      // background-color: #fff;
       box-sizing: border-box;
-      border: solid 1px #cccccc;
+      // border: solid 1px #cccccc;
       border-left: none;
-      svg {
-        width: 17px;
-        height: 17px;
-        transition: 0.3s;
-      }
+			.ebd_s_btnArea{
+				width: 100%;
+				display: flex;
+				justify-content: flex-end;
+				.ebd_s_ba_btn{
+					font-size: 10px;
+					padding: 4px 6px;
+					margin: 0;
+					margin-left: 5px;
+				}
+			}
     }
   }
   .ta_btn {
@@ -1689,7 +1694,6 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: 0 10px;
   // background-color: red;
 }
 </style>