智能问答

src/api/als/intelligentQA.js

@@ -1,6 +1,30 @@
-import { post } from '@/http/index'
+import { get, post, deletes } from '@/http/index'
 
+// 问答接口
+// export const handlerAsk = async (data) => {
+//   return await post('/kgqa/ask/', data)
+// }
 // 问答接口
 export const handlerAsk = async (data) => {
-  return await post('/kgqa/ask/', data)
+  return await post('/als/algorithm/execute/qa', data)
+}
+
+// 历史记录
+export const getQAHistoryList = async (data) => {
+  return await get('/als/qaHistory/list', data)
+}
+
+// 获取问答历史记录详细信息
+export const getQAHistoryDetail = async (id) => {
+  return await get('/als/qaHistory/' + id)
+}
+
+// 新增问答历史记录
+export const addQAHistory = async (data) => {
+  return await post('/als/qaHistory', data)
+}
+
+// 删除问答历史记录
+export const removeQAHistory = async (id) => {
+  return await deletes('/als/qaHistory/' + id)
 }

src/views/als/intelligentQA/index.scss

@@ -5,20 +5,54 @@
   
 }
 
-.aside{
+.history,
+.statistics{
   background-color: #11536771;
   border: 1px solid #209cc1;
   width: 250px;
   height: calc(100vh - 200px);
   color: #fff;
-  text-align: center;
-  line-height: 200px;
+  
+  // line-height: 200px;
+}
+
+.history{
+  .historyTitle{
+    height: 50px;
+    line-height: 50px;
+    text-align: center;
+  }
+  .historyContent{
+    width: 100%;
+    box-sizing: border-box;
+    height: calc(100vh - 300px);
+    overflow: hidden;
+    padding: 0px 20px;
+
+    .historyItem{
+      height: 40px;
+      width: 100%;
+      line-height: 40px;
+      overflow: hidden;
+
+      .historyMore{
+        float: right;
+        height: 40px;
+        line-height: 40px;
+      }
+      .historyMore:hover{
+        cursor: pointer;
+      }
+    }
+
+  }
+  
 }
 
 .chat{
   flex: 1;
   width: 100%;
-  max-width: 1400px;
+  // max-width: 1400px;
   margin: 0 auto;
   overflow-y: auto;
   display: flex;
@@ -45,9 +79,8 @@
       width: 100%;
       max-width: 1200px;
       margin: 0 auto;
-      
-      // overflow-y: auto;
     }
+    
     .chatRow {
       margin: 20px 10px;
       display: flex;
@@ -66,15 +99,27 @@
     }
     .answerData{
       max-width: 800px;
-        display: inline-block;
-        border-radius: 8px;
-        padding: 6px 12px;
-        background: #11536771;
-        box-shadow: 0 16px 20px 0 rgba(174, 167, 223, 0.06);
-        color: #fff;
-        .answer{
-          margin: 20px 0;
-        }
+      display: inline-block;
+      border-radius: 8px;
+      padding: 6px 12px;
+      background: #11536771;
+      box-shadow: 0 16px 20px 0 rgba(174, 167, 223, 0.06);
+      color: #fff;
+      position: relative;
+      .answer{
+        margin: 20px 0;
+      }
+    }
+    
+    .more{
+      border-radius: 50%;
+      position: absolute;
+      font-size: 1.5rem;
+      right: -30px;
+      bottom: 0;
+    }
+    .more:hover{
+      cursor: pointer;
     }
   }
 
@@ -116,6 +161,43 @@
   }
 }
 
+.dialogContent{
+  width: 100%;
+  height: calc(100vh - 350px);
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+
+  .contentLeft{
+    width: 49%;
+    height: 100%;
+    // background-color: #cfcbcb;
+    border-right: 1px solid #cfcbcb;
+
+    .moreAnswer{
+      font-size: 1rem;
+      color: #fff;
+      margin-bottom: 20px;
+    }
+  }
+  .contentRight{
+    width: 49%;
+    height: 100%;
+    .source{
+      float: right;
+      color: #fff;
+    }
+  }
+}
+
+.statistics{
+  .statisticsTitle{
+    height: 50px;
+    line-height: 50px;
+    text-align: center;
+  }
+}
+
 ::-webkit-scrollbar{
   display: none;  //隐藏滚动条
   width: 5px;

src/views/als/intelligentQA/index.vue

@@ -1,21 +1,30 @@
 <template>
   <div class="intelligentQA">
-    <div class="aside">历史记录</div>
+    <div class="history">
+      <div class="historyTitle">历史记录</div>
+      <div class="historyContent">
+        <div v-for="item in historyData" :key="item.id" class="historyItem">
+          <span style="float: left"> {{ item.question }}</span>
+          <i class="el-icon-more historyMore" @click="historyDetail(item.id)"></i>
+        </div>
+      </div>
+    </div>
     <div class="chat">
       <!-- <div class="header">Header</div> -->
       <div ref="main" class="main">
         <div class="chatLine">
           <div v-for="(item, index) in chatInfo" :key="index">
+            <div class="chatRow chatQ" v-if="item.question">
+              <div class="questionContent">{{ item.question }}</div>
+            </div>
             <div class="chatRow" v-if="item.answer">
               <div class="answerData">
                 <div class="answer">{{ item.answer }}</div>
                 <!-- <div class="graph"></div> -->
                 <graphECharts v-if="item.graph" :graphData="item.graph" class="charts"></graphECharts>
+                <i v-if="item.answer" class="el-icon-more more" @click="handleMore(item)"></i>
               </div>
             </div>
-            <div class="chatRow chatQ" v-if="item.question">
-              <div class="questionContent">{{ item.question }}</div>
-            </div>
           </div>
         </div>
       </div>
@@ -26,12 +35,36 @@
         </div>
       </div>
     </div>
+    <div class="statistics">
+      <div class="statisticsTitle">统计列表</div>
+    </div>
+    <el-dialog title="更多" :visible.sync="dialogVisible" width="1300px" :before-close="handleClose">
+      <div class="dialogContent">
+        <div class="contentLeft">
+          <div>
+            <div class="moreAnswer">{{ moreData.answer }}</div>
+            <graphECharts :graphData="moreData.graph"></graphECharts>
+          </div>
+        </div>
+        <div class="contentRight">
+          <div>
+            <div class="source">来源：《{{ moreData.file_name }}{{ moreData.fileName }}》</div>
+            <div class="fileContent"></div>
+          </div>
+        </div>
+      </div>
+
+      <!-- <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+      </span> -->
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import store from '@/store'
-import { handlerAsk } from '@/api/als/intelligentQA'
+import { handlerAsk, getQAHistoryList, getQAHistoryDetail } from '@/api/als/intelligentQA'
 import graphECharts from '@/views/als/components/Charts/graph.vue'
 import axios from 'axios'
 
@@ -40,14 +73,24 @@ export default {
   components: { graphECharts },
   data() {
     return {
+      dialogVisible: false,
       chatInfo: [],
       questionInput: '', //202310150010
       currentHeight: 'auto',
       lastScrollHeight: 0,
-      isScrollable: false
+      isScrollable: false,
+      moreData: {
+        user_id: '',
+        answer: '',
+        file_name: '',
+        ossID: '',
+        graph: {}
+      },
+      historyData: []
     }
   },
   mounted() {
+    this.getHistory()
     this.adjustHeight()
   },
   watch: {},
@@ -69,9 +112,19 @@ export default {
         }
       })
     },
+
+    async getHistory() {
+      try {
+        const {
+          data: { list, total }
+        } = await getQAHistoryList()
+        this.historyData = list
+        // console.log('this.historyData', this.historyData)
+      } catch (error) {}
+    },
+
     handleKeydown(event) {
       if (event.key === 'Enter') {
-        // 检查是否按下了 Ctrl 键
         if (event.ctrlKey) {
           // 按下了 Ctrl+Enter，则插入换行符
           this.questionInput += '\n'
@@ -90,10 +143,11 @@ export default {
         }
       }
     },
+
     async sendQuestion() {
       const sendInput = {
         question: this.questionInput,
-        user_id: String(store.state.user.userInfo.user.userId)
+        userId: String(store.state.user.userInfo.user.userId)
       }
 
       try {
@@ -105,21 +159,10 @@ export default {
         })
         this.questionInput = ''
         const { code, data } = await handlerAsk(sendInput)
-        if (code == 200) {
-          let newData = data
-          const graphData = eval('(' + newData.graph + ')')
-          newData.graph = graphData
-          const categories = []
-          newData.graph.data.forEach((node) => {
-            const flag = categories.find((item) => {
-              return item.name === node.category
-            })
-            if (!flag) {
-              categories.push({ name: node.category })
-            }
-          })
-          newData.graph.categories = categories
 
+        if (code == 200) {
+          // let newData = JSON.parse(data)
+          const newData = this.handleData(JSON.parse(data))
           this.chatInfo.pop()
           this.chatInfo.push(newData)
         }
@@ -129,41 +172,68 @@ export default {
           main.scrollTop = main.scrollHeight
         }, 0)
       } catch (error) {}
-      // {
-      //   code: 200,
-      //   msg: '',
-      //   data: {
-      //     user_id: 'user',
-      //     answer: '解决办法为：更换电池或遥控器',
-      //     graph: {
-      //       data: [
-      //         { name: '202310150010', category: 'HMC' },
-      //         { name: '电视', category: '成品' },
-      //         { name: '电视遥控器失灵', category: '故障描述' },
-      //         { name: '家用电器', category: '系统' },
-      //         { name: '更换电池或遥控器', category: '维修策略' }
-      //       ],
-      //       links: [
-      //         { source: '202310150010', target: '电视', value: '成品' },
-      //         { source: '202310150010', target: '电视遥控器失灵', value: '故障描述' },
-      //         { source: '202310150010', target: '家用电器', value: '系统' },
-      //         { source: '202310150010', target: '更换电池或遥控器', value: '维修策略' }
-      //       ],
-      //       categories: [{ name: 'HMC' }, { name: '成品' }, { name: '故障描述' }, { name: '维修策略' }, { name: '系统' }]
-      //     }
-      //   }
-      // }
+    },
+
+    handleData(data) {
+      const graphData = eval('(' + data.graph + ')')
+      data.graph = graphData
+      const categories = []
+      data.graph.data.forEach((node) => {
+        const flag = categories.find((item) => {
+          return item.name === node.category
+        })
+        if (!flag) {
+          categories.push({ name: node.category })
+        }
+      })
+      data.graph.categories = categories
+      return data
+    },
+
+    handleMore(data) {
+      console.log('data', data)
+      this.moreData = data
+      this.dialogVisible = true
+    },
 
-      // data: [
-      //           { name: '111', category: 'HMC' },
-      //           { name: '更换手机屏幕', category: '维修策略' }
-      //         ],
-      //         links: [{ source: '111', target: '更换手机屏幕', value: '维修策略' }],
-      //         categories: [{ name: 'HMC' }, { name: '维修策略' }]
+    handleClose() {
+      this.dialogVisible = false
     },
-    showGraph(graphData) {
-      const { data, links } = graphData
+
+    async historyDetail(id) {
+      try {
+        const { data } = await getQAHistoryDetail(id)
+        const newData = this.handleData(data)
+        this.chatInfo = []
+        this.chatInfo.push(newData)
+      } catch (error) {}
     }
+
+    // const { code, data } = {
+    //   code: 200,
+    //   msg: '',
+    //   data: {
+    //     user_id: 'user',
+    //     answer: '解决办法为：更换电池或遥控器',
+    //     file_name: '排故手册',
+    //     ossID: 2,
+    //     graph: {
+    //       data: [
+    //         { name: '202310150010', category: 'HMC' },
+    //         { name: '电视', category: '成品' },
+    //         { name: '电视遥控器失灵', category: '故障描述' },
+    //         { name: '家用电器', category: '系统' },
+    //         { name: '更换电池或遥控器', category: '维修策略' }
+    //       ],
+    //       links: [
+    //         { source: '202310150010', target: '电视', value: '成品' },
+    //         { source: '202310150010', target: '电视遥控器失灵', value: '故障描述' },
+    //         { source: '202310150010', target: '家用电器', value: '系统' },
+    //         { source: '202310150010', target: '更换电池或遥控器', value: '维修策略' }
+    //       ]
+    //     }
+    //   }
+    // }
   }
 }
 </script>

vue.config.js

@@ -16,7 +16,7 @@ module.exports = defineConfig({
         }
       },
       ['/api/kgqa']: {
-        target: 'http://192.168.0.100:8000',
+        target: 'http://192.168.0.103:8000',
         ws: false,
         changeOrigin: true,
         pathRewrite: {