feat: 数字民警问题修改

src/views/PoliceAi/HistoricalRecords.vue

@@ -16,7 +16,8 @@
       </div>
       <div v-if="!delFlag" class="case-list">
         <span v-for="(item,index) in caseList" :key="index" :class="[selectId === item.conversationId ? 'actived' :'']" class="case-item" @click.stop="selectCase(item)">
-          <span>{{ item.caseName }}</span>
+          <span class="date">{{ item.createDay }}</span>
+          <span class="name" :title="item.caseName">{{ item.caseName }}</span>
           <i class="el-icon-delete file-delete" @click.stop="delCase(item)" />
         </span>
       </div>
@@ -221,13 +222,25 @@ export default {
       .case-item {
         height: 34px;font-size: 16px;
         color: #888888;
-        margin-left: 25px;
+        // margin-left: 25px;
         line-height: 34px;
         cursor: pointer;
-        padding: 0 20px;
+        padding: 0 20px 0 12px;
         display: flex;
         align-items: center;
-        justify-content: space-between;
+        // justify-content: space-between;
+        border-radius: 8px 8px 8px 8px;
+        .name {
+          width: 250px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        .date {
+          font-size: 12px;
+          color: #666666;
+          margin-right: 8px;
+        }
         margin-bottom: 16px;
         i {
             display: none;
@@ -238,6 +251,7 @@ export default {
         font-weight: 400;
         font-size: 16px;
         color: #333333;
+        border-radius: 8px 8px 8px 8px;
       }
       .case-item:hover {
         background: #EAECF2;

src/views/PoliceAi/index.vue

@@ -6,14 +6,14 @@
         <div class="case-item">
           <span>案件名称</span>
           <span>|</span>
-          <el-select v-model="caseId" :disabled="conversationId !==''" style="width: 200px;" clearable placeholder="请选择案件" @change="selectCase">
+          <el-select v-model="caseId" filterable :disabled="conversationId !==''" style="width: 200px;" clearable placeholder="请选择案件" @change="selectCase">
             <el-option v-for="item in caseOptions" :key="item.id" :label="item.caseName" :value="item.id" />
           </el-select>
 
         </div>
         <el-input v-model="caseActorName" class="case-input" readonly placeholder="行为人" />
       </div>
-      <el-scrollbar ref="scrollbar" :style="{marginTop:firstEnter?'146px':''}" class="main-content">
+      <el-scrollbar ref="scrollbar" :style="{marginTop:firstEnter?'110px':'0px'}" class="main-content" @scroll="handleScroll">
 
         <div class="robot">
           <div class="robot-top">
@@ -116,15 +116,15 @@
                       {{ message.answer }}
                     </span>
                   </div>
-                  <div v-if="message.segmentVOList.length > 0" class="collapse">
+                  <div v-if="message.segmentList.length > 0" class="collapse" @click="changeShowFlag(message)">
                     <span>相关知识内容</span>
                     <i v-if="!message.showFlag" class="el-icon-arrow-down" />
                     <i v-if="message.showFlag" class="el-icon-arrow-up" />
                   </div>
-                  <div v-if="message.segmentVOList.length > 0 && message.showFlag" class="collapse-content">
+                  <div v-if="message.segmentList.length > 0 && message.showFlag" class="collapse-content">
                     <div class="title">涉及文件：</div>
-                    <div v-for="(item, index) in message.segmentVOList" :key="index" class="record-item">
-                      <span class="file-name ">{{ item.name }}</span>
+                    <div v-for="(item, index) in message.segmentList" :key="index" class="record-item">
+                      <span style="color: #333333;" class="file-name ">{{ item.name }}</span>
                       <span v-html="item.snippet" />
                     </div>
                   </div>
@@ -154,8 +154,8 @@
           placeholder="可咨询案件内容、输入@可选择查询指标结果"
           @keyup.enter.native="handleSend"
         />
-        <img v-if="!loading" src="@/assets/police/send.png" alt="" @click="handleSend">
-        <img v-if="loading" src="@/assets/police/pause.png" alt="">
+        <img v-if="!loading" class="input-img" src="@/assets/police/send.png" alt="" @click="handleSend">
+        <img v-if="loading" class="input-img" src="@/assets/police/pause.png" alt="">
         <div v-if="indexFlag" class="select_index">
           <div class="top">
             <span v-for="(item, index) in indexTypeList" :key="index" :class="[item.type === activedIndex?'actived':'']" @click="changeType(item)">
@@ -177,6 +177,9 @@
             </span>
           </div>
         </div>
+        <div v-if="isShowDownIcon" class="scroll-icon">
+          <img src="../../assets/police/down.png" alt="">
+        </div>
       </div>
     </div>
 
@@ -221,6 +224,8 @@ export default {
         }
       ],
       activedIndex: '1',
+      // 是否显示down icon
+      isShowDownIcon: false,
       indexList: [],
       showIndexList: [], // 展示指标
       intentTypeList: [
@@ -241,6 +246,7 @@ export default {
         }
       ],
       searchName: '',
+      distanceToBottom: 0,
       caseOptions: []
     }
   },
@@ -383,8 +389,13 @@ export default {
     },
     chat(obj) {
       this.loading = true
+      this.conversationList.push({
+        role: 'robot'
+      })
+      this.scrollToBottom()
       robotChat(obj).then(res => {
         if (res.code === 200) {
+          this.conversationList.splice(this.conversationList.length - 1, 1)
           if (this.conversationId !== res.data.conversationId) {
             this.$refs.HistoricalRecordsRef.getList()
           }
@@ -429,7 +440,7 @@ export default {
           role: 'robot',
           answer: data.answer,
           type: data.type,
-          segmentVOList: data.segmentVOList
+          segmentList: data.segmentList
         })
       }
       this.$nextTick(() => {
@@ -462,6 +473,23 @@ export default {
         scrollbar.wrap.scrollTo(0, scrollbar.wrap.scrollHeight)
       }
     },
+    // 滚动
+    handleScroll(event) {
+      console.log('1111111111111')
+      debugger
+      const scrollTop = event.target.scrollTop // 当前滚动位置
+      const clientHeight = event.target.clientHeight // 可视区域高度
+      const scrollHeight = this.$refs.scrollContent.scrollHeight // 内容总高度
+
+      
+      // 计算滚动条底部的距离
+      this.distanceToBottom = scrollHeight - (scrollTop + clientHeight)
+      if (this.distanceToBottom > 0) {
+        this.isShowDownIcon = true
+      } else {
+        this.isShowDownIcon = false
+      }
+    },
     handleSend() {
       if (this.loading) return
       if (!this.caseId) {
@@ -524,6 +552,7 @@ export default {
                 font-size: 16px;
                 color: #333333;
                 margin-right: 16px;
+
             }
             ::v-deep {
                 .el-input__inner {
@@ -647,6 +676,7 @@ export default {
               padding: 16px;
               background: #F6F7F9;
               border-radius: 6px 6px 6px 6px;
+              width: 90%;
               .title {
                 font-size: 16px;
                 color: #333333;
@@ -733,7 +763,7 @@ export default {
                 font-size: 16px;
             }
         }
-        img {
+        .input-img {
             width: 60px;
             height: 60px;
             position: absolute;
@@ -792,6 +822,19 @@ export default {
               }
           }
     }
+    .scroll-icon {
+      position: absolute;
+      bottom: 77px;
+      left: 50%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      img {
+        width: 68px;
+        height: 68px;
+        cursor: pointer;
+      }
+    }
     }
 
 }