|
@@ -1,5 +1,10 @@
|
|
|
<template>
|
|
|
<div class="chart-content-chat heightFull d-flex flex-column">
|
|
|
+ <div class="chart-content-chat-title mb-3">
|
|
|
+ <v-tabs>
|
|
|
+ <v-tab>AI 取数</v-tab>
|
|
|
+ </v-tabs>
|
|
|
+ </div>
|
|
|
<div class="chart-content-chat-box overflow-y-auto position-relative element" ref="chatBox" v-loading="loading">
|
|
|
<div class="pa-3">
|
|
|
<div
|
|
@@ -17,7 +22,7 @@
|
|
|
{{ item.type === 1 ? 'AI助手' : '游客' }}
|
|
|
<template v-if="item.type === 1">
|
|
|
<v-btn
|
|
|
- v-if="item.content?.sql"
|
|
|
+ v-if="item.content.sql"
|
|
|
class="ml-3"
|
|
|
small
|
|
|
elevation="0"
|
|
@@ -54,12 +59,12 @@
|
|
|
</template>
|
|
|
<template v-else>
|
|
|
<div>
|
|
|
- {{ item.content.summary }}
|
|
|
+ {{ item.content.response }}
|
|
|
</div>
|
|
|
<div v-if="item.showSnackbar" class="pa-3 blue-grey lighten-3 mt-3">
|
|
|
{{ item.content.sql }}
|
|
|
</div>
|
|
|
- <div class="mt-3" v-if="item.content.columns.length">
|
|
|
+ <div class="mt-3" v-if="item.content.records && item.content.records.columns.length">
|
|
|
<div>
|
|
|
<v-menu
|
|
|
v-model="item.showMenu"
|
|
@@ -68,9 +73,10 @@
|
|
|
max-width="300"
|
|
|
attach=".chart-content-chat-box"
|
|
|
>
|
|
|
- <template v-slot:activator>
|
|
|
+ <template v-slot:activator="{ on , attrs}">
|
|
|
<v-btn
|
|
|
- @click="item.showMenu = true"
|
|
|
+ v-on="on"
|
|
|
+ v-bind="attrs"
|
|
|
text
|
|
|
color="primary"
|
|
|
>我要画图</v-btn>
|
|
@@ -80,7 +86,7 @@
|
|
|
<div class="pa-3">
|
|
|
<v-autocomplete
|
|
|
v-model="item.model.typeAxis"
|
|
|
- :items="item.content.columns"
|
|
|
+ :items="item.content.records.columns"
|
|
|
class="mb-3"
|
|
|
outlined
|
|
|
dense
|
|
@@ -90,7 +96,7 @@
|
|
|
|
|
|
<v-autocomplete
|
|
|
v-model="item.model.dataAxis"
|
|
|
- :items="item.content.columns"
|
|
|
+ :items="item.content.records.columns"
|
|
|
class="mb-3"
|
|
|
outlined
|
|
|
dense
|
|
@@ -119,7 +125,7 @@
|
|
|
<thead>
|
|
|
<tr>
|
|
|
<th
|
|
|
- v-for="header in item.content.columns"
|
|
|
+ v-for="header in item.content.records.columns"
|
|
|
:key="header"
|
|
|
class="text-left"
|
|
|
>{{ header }}</th>
|
|
@@ -127,11 +133,11 @@
|
|
|
</thead>
|
|
|
<tbody>
|
|
|
<tr
|
|
|
- v-for="(row, index) in item.content.rows"
|
|
|
+ v-for="(row, index) in item.content.records.rows"
|
|
|
:key="index"
|
|
|
>
|
|
|
<td
|
|
|
- v-for="header in item.content.columns"
|
|
|
+ v-for="header in item.content.records.columns"
|
|
|
:key="header"
|
|
|
class="text-left"
|
|
|
>{{ row[header] }}</td>
|
|
@@ -173,7 +179,14 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="pa-3 chart-content-chat-btn">
|
|
|
- <div class="send d-flex align-center justify-center">
|
|
|
+ <div class="send">
|
|
|
+ <div class="pa-3 text-center" v-if="conversationId">
|
|
|
+ <v-btn color="indigo" outlined small @click="onNew">
|
|
|
+ <v-icon left>
|
|
|
+ mdi-chat-plus-outline
|
|
|
+ </v-icon>新对话
|
|
|
+ </v-btn>
|
|
|
+ </div>
|
|
|
<div class="send-box">
|
|
|
<v-textarea
|
|
|
v-model="question"
|
|
@@ -191,6 +204,22 @@
|
|
|
<v-icon>mdi-send</v-icon>
|
|
|
</v-btn>
|
|
|
</div>
|
|
|
+ <div>
|
|
|
+ <v-chip-group
|
|
|
+ active-class="primary--text"
|
|
|
+ column
|
|
|
+ v-model="routingMode"
|
|
|
+ >
|
|
|
+ <v-chip
|
|
|
+ v-for="chip in chips"
|
|
|
+ :key="chip.value"
|
|
|
+ small
|
|
|
+ :value="chip.value"
|
|
|
+ >
|
|
|
+ {{ chip.text }}
|
|
|
+ </v-chip>
|
|
|
+ </v-chip-group>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -202,10 +231,16 @@ import {
|
|
|
submitTrainingCorrect,
|
|
|
submitTrainingError
|
|
|
} from '@/api/dataChart'
|
|
|
+import { mapGetters } from 'vuex'
|
|
|
export default {
|
|
|
name: 'dataChartEditChat',
|
|
|
data () {
|
|
|
return {
|
|
|
+ routingMode: undefined,
|
|
|
+ chips: [
|
|
|
+ { text: '聊天模式', value: 'chat_direct' },
|
|
|
+ { text: '数据库模式', value: 'database_direct' }
|
|
|
+ ],
|
|
|
loading: false,
|
|
|
disabled: false,
|
|
|
question: '',
|
|
@@ -220,11 +255,22 @@ export default {
|
|
|
'赣州分公司下,餐饮类档口的日均订单量是多少?'
|
|
|
]
|
|
|
}
|
|
|
- ]
|
|
|
+ ],
|
|
|
+ abortController: null,
|
|
|
+ conversationId: undefined
|
|
|
// trueData: false
|
|
|
}
|
|
|
},
|
|
|
+ computed: {
|
|
|
+ ...mapGetters(['userInfo'])
|
|
|
+ },
|
|
|
methods: {
|
|
|
+ onNew () {
|
|
|
+ this.abortController.abort('')
|
|
|
+ this.abortController = null
|
|
|
+ this.items.splice(1, this.items.length - 1)
|
|
|
+ this.conversationId = undefined
|
|
|
+ },
|
|
|
handleKeyCode (event) {
|
|
|
if (event.keyCode === 13) {
|
|
|
if (!event.ctrlKey) {
|
|
@@ -270,8 +316,17 @@ export default {
|
|
|
this.items.push(ask)
|
|
|
this.question = ''
|
|
|
try {
|
|
|
- const { data } = await getAsk({ question })
|
|
|
+ this.abortController = new AbortController()
|
|
|
+ const { data } = await getAsk({
|
|
|
+ question,
|
|
|
+ user_id: this.userInfo.id,
|
|
|
+ routing_mode: this.routingMode,
|
|
|
+ conversation_id: this.conversationId
|
|
|
+ }, {
|
|
|
+ signal: this.abortController.signal
|
|
|
+ })
|
|
|
ask.content = data
|
|
|
+ this.conversationId = data.conversation_id
|
|
|
this.scrollToBottom()
|
|
|
} catch (error) {
|
|
|
ask.content = error.message
|
|
@@ -329,7 +384,7 @@ export default {
|
|
|
}
|
|
|
.chart-content {
|
|
|
&-chat {
|
|
|
- // border: 1px solid #ccc;
|
|
|
+ border: 1px solid #ccc;
|
|
|
&-box {
|
|
|
height: 0;
|
|
|
flex: 1;
|