|
@@ -6,15 +6,15 @@
|
|
<div ref="main" class="main">
|
|
<div ref="main" class="main">
|
|
<div class="chatLine">
|
|
<div class="chatLine">
|
|
<div v-for="(item, index) in chatInfo" :key="index">
|
|
<div v-for="(item, index) in chatInfo" :key="index">
|
|
- <div class="chatRow" v-if="item.code === 200">
|
|
|
|
|
|
+ <div class="chatRow" v-if="item.answer">
|
|
<div class="answerData">
|
|
<div class="answerData">
|
|
- <div class="answer">{{ item.data.answer }}</div>
|
|
|
|
|
|
+ <div class="answer">{{ item.answer }}</div>
|
|
<!-- <div class="graph"></div> -->
|
|
<!-- <div class="graph"></div> -->
|
|
- <graphECharts :graphData="item.data.graph" class="charts"></graphECharts>
|
|
|
|
|
|
+ <graphECharts v-if="item.graph" :graphData="item.graph" class="charts"></graphECharts>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <div class="chatRow chatQ" v-if="item.userId">
|
|
|
|
- <div class="questionContent">{{ item.data }}</div>
|
|
|
|
|
|
+ <div class="chatRow chatQ" v-if="item.question">
|
|
|
|
+ <div class="questionContent">{{ item.question }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -31,32 +31,28 @@
|
|
|
|
|
|
<script>
|
|
<script>
|
|
import store from '@/store'
|
|
import store from '@/store'
|
|
|
|
+import { handlerAsk } from '@/api/als/intelligentQA'
|
|
import graphECharts from '@/views/als/components/Charts/graph.vue'
|
|
import graphECharts from '@/views/als/components/Charts/graph.vue'
|
|
|
|
+import axios from 'axios'
|
|
|
|
|
|
export default {
|
|
export default {
|
|
name: 'IntelligentQA',
|
|
name: 'IntelligentQA',
|
|
components: { graphECharts },
|
|
components: { graphECharts },
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
- userId: '',
|
|
|
|
chatInfo: [],
|
|
chatInfo: [],
|
|
- questionInput: '',
|
|
|
|
|
|
+ questionInput: '', //202310150010
|
|
currentHeight: 'auto',
|
|
currentHeight: 'auto',
|
|
lastScrollHeight: 0,
|
|
lastScrollHeight: 0,
|
|
isScrollable: false
|
|
isScrollable: false
|
|
}
|
|
}
|
|
},
|
|
},
|
|
mounted() {
|
|
mounted() {
|
|
- this.getUserInfo()
|
|
|
|
this.adjustHeight()
|
|
this.adjustHeight()
|
|
},
|
|
},
|
|
watch: {},
|
|
watch: {},
|
|
created() {},
|
|
created() {},
|
|
methods: {
|
|
methods: {
|
|
- async getUserInfo() {
|
|
|
|
- const { user } = await store.dispatch('user/getUserInfo')
|
|
|
|
- this.userId = user.userId
|
|
|
|
- },
|
|
|
|
adjustHeight() {
|
|
adjustHeight() {
|
|
const textarea = this.$el.querySelector('textarea')
|
|
const textarea = this.$el.querySelector('textarea')
|
|
this.currentHeight = 'auto'
|
|
this.currentHeight = 'auto'
|
|
@@ -94,54 +90,76 @@ export default {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
},
|
|
- sendQuestion() {
|
|
|
|
- console.log('222', this.questionInput.trim())
|
|
|
|
- if (this.questionInput.trim() === '') {
|
|
|
|
- return
|
|
|
|
|
|
+ async sendQuestion() {
|
|
|
|
+ const sendInput = {
|
|
|
|
+ question: this.questionInput,
|
|
|
|
+ user_id: String(store.state.user.userInfo.user.userId)
|
|
}
|
|
}
|
|
- this.chatInfo.push(
|
|
|
|
- {
|
|
|
|
- data: this.questionInput,
|
|
|
|
- userId: this.userId
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- 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: '系统' }]
|
|
|
|
|
|
+
|
|
|
|
+ try {
|
|
|
|
+ if (this.questionInput.trim() === '') {
|
|
|
|
+ return
|
|
|
|
+ }
|
|
|
|
+ this.chatInfo.push(sendInput, {
|
|
|
|
+ answer: '正在解析您的问题,请稍后......'
|
|
|
|
+ })
|
|
|
|
+ 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
|
|
|
|
+
|
|
|
|
+ this.chatInfo.pop()
|
|
|
|
+ this.chatInfo.push(newData)
|
|
}
|
|
}
|
|
- )
|
|
|
|
|
|
+ // 等处理过返回数据后,调用使视图保持在最底部
|
|
|
|
+ let main = this.$refs.main
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ 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: '系统' }]
|
|
|
|
+ // }
|
|
|
|
+ // }
|
|
|
|
+ // }
|
|
|
|
+
|
|
// data: [
|
|
// data: [
|
|
// { name: '111', category: 'HMC' },
|
|
// { name: '111', category: 'HMC' },
|
|
// { name: '更换手机屏幕', category: '维修策略' }
|
|
// { name: '更换手机屏幕', category: '维修策略' }
|
|
// ],
|
|
// ],
|
|
// links: [{ source: '111', target: '更换手机屏幕', value: '维修策略' }],
|
|
// links: [{ source: '111', target: '更换手机屏幕', value: '维修策略' }],
|
|
// categories: [{ name: 'HMC' }, { name: '维修策略' }]
|
|
// categories: [{ name: 'HMC' }, { name: '维修策略' }]
|
|
- console.log('this.chatInfo', this.chatInfo)
|
|
|
|
- this.questionInput = ''
|
|
|
|
- // 等处理过返回数据后,调用使视图保持在最底部
|
|
|
|
- let main = this.$refs.main
|
|
|
|
- setTimeout(() => {
|
|
|
|
- main.scrollTop = main.scrollHeight
|
|
|
|
- }, 0)
|
|
|
|
},
|
|
},
|
|
showGraph(graphData) {
|
|
showGraph(graphData) {
|
|
const { data, links } = graphData
|
|
const { data, links } = graphData
|