You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
653 lines
21 KiB
653 lines
21 KiB
<template>
|
|
<div ref="aiChatRef" class="ai-chat">
|
|
<el-scrollbar ref="scrollDiv" @scroll="handleScrollTop">
|
|
<div ref="dialogScrollbar" class="ai-chat__content p-24 chat-width" style="padding: 24px;">
|
|
<div class="item-content mb-16" style="margin-bottom: 16px">
|
|
<div class="avatar">
|
|
<img src="@/assets/logo/logo2.png" height="30px" />
|
|
</div>
|
|
<div class="content">
|
|
<el-card shadow="always" class="dialog-card">
|
|
<span style="font-size: 14px">您好，我是 果知小助手，您可以向我提出关于 果知的相关问题。</span>
|
|
</el-card>
|
|
</div>
|
|
</div>
|
|
|
|
<template v-for="(item, index) in chatList" :key="index">
|
|
<!-- 问题 -->
|
|
<div v-if="item.type === 'question'">
|
|
<div class="item-content mb-16 lighter" style="display:flex;justify-content:flex-end;gap:10px;margin-bottom: 16px;font-weight: 400">
|
|
<div>
|
|
<div class="text break-all pre-wrap" style="word-break: break-all;white-space: pre-wrap;">
|
|
{{ item.content }}
|
|
</div>
|
|
</div>
|
|
<div class="avatar">
|
|
<el-avatar style="width:30px;height: 30px;background: #3370FF">
|
|
<img src="@/assets/aichat/user-icon.svg" style="width: 30px" alt="" />
|
|
</el-avatar>
|
|
</div>
|
|
</div>
|
|
<div style="display:flex;justify-content:flex-end;gap:10px;margin-bottom: 16px;font-weight: 400">
|
|
<el-text type="info">
|
|
<span class="ml-4" style="margin-left: 4px">{{ datetimeFormat(item.time) }}</span>
|
|
</el-text>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 回答 -->
|
|
<div v-if="item.type === 'answer'" class="item-content mb-16 lighter" style="margin-bottom: 16px;font-weight: 400">
|
|
<div class="avatar">
|
|
<img src="@/assets/logo/logo2.png" height="30px" />
|
|
</div>
|
|
<div class="content">
|
|
<el-card shadow="always" class="dialog-card">
|
|
<el-form
|
|
:model="item"
|
|
ref="formRef"
|
|
label-width="125px">
|
|
<el-form-item label="原始问题:">
|
|
<el-input v-model="item.content.question" placeholder="请补充其它条件"></el-input>
|
|
</el-form-item>
|
|
<el-form-item v-if="item.content.query.length > 0" label="查询条件:">
|
|
<template v-for="filter in item.content.query">
|
|
<div v-if="filter.ct_type === 'mselect'" style="display:flex;width: 100%;margin-bottom: 10px">
|
|
<span style="width: 150px">{{filter.name + ": "}}</span>
|
|
<el-select @change="changeInputValue(item.content)" v-model="filter.default_value" multiple style="width: 100%;" clearable>
|
|
<el-option v-for="opt in filter.options" :key="opt" :value="opt" :label="opt"></el-option>
|
|
</el-select>
|
|
</div>
|
|
<div v-if="filter.ct_type === 'datePicker'" style="display:flex;width: 100%;margin-bottom: 10px">
|
|
<span style="width: 150px">{{filter.name + ": "}}</span>
|
|
<el-date-picker
|
|
@change="changeInputValue(item.content)"
|
|
v-model="filter.default_value"
|
|
type="date"
|
|
placeholder="Pick a day"
|
|
/>
|
|
</div>
|
|
<div v-if="filter.ct_type === 'dateRangePicker'" style="display:flex;width: 100%;margin-bottom: 10px">
|
|
<span style="width: 150px">{{filter.name + ": "}}</span>
|
|
<el-date-picker
|
|
@change="changeInputValue(item.content)"
|
|
v-model="filter.dateRangeValue"
|
|
type="daterange"
|
|
range-separator="-"
|
|
start-placeholder="Start date"
|
|
end-placeholder="End date"
|
|
/>
|
|
</div>
|
|
<div v-if="filter.ct_type === 'radioGroup'" style="display:flex;width: 100%;margin-bottom: 10px">
|
|
<span style="width: 150px">{{filter.name + ": "}}</span>
|
|
<el-radio-group v-model="filter.default_value" @change="changeInputValue(item.content)">
|
|
<el-radio :key="'radio'+opt" v-for="opt in filter.options" :value="opt">{{ opt }}</el-radio>
|
|
</el-radio-group>
|
|
</div>
|
|
<div v-if="filter.ct_type === 'input'" style="display:flex;width: 100%;margin-bottom: 10px">
|
|
<span style="width: 150px">{{filter.name + ": "}}</span>
|
|
<el-input @input="changeInputValue(item.content)" style="width: calc(100% - 150px)" v-model="filter.default_value"/>
|
|
</div>
|
|
</template>
|
|
|
|
</el-form-item>
|
|
<el-form-item v-if="item.content.result.length > 0" label="输出结果:">
|
|
<template v-for="(result,index) in item.content.result">
|
|
<span v-if="index === 0">{{'1.'+ result.name}}</span>
|
|
<template v-if="index > 0">
|
|
<br><span>{{(index+1) +'.'+result.name}}</span>
|
|
</template>
|
|
</template>
|
|
</el-form-item>
|
|
<el-form-item label="数据结果:">
|
|
<template v-if="item.content.data">
|
|
<el-tabs type="border-card" v-model="item.content.tab" style="width: 100%" @tabChange="changeTab(item.content)">
|
|
<el-tab-pane label="数据结果" name="result">
|
|
<div style="max-height: calc(100vh - 400px);overflow: auto">
|
|
<el-table :data="item.content.data" style="height: 100%">
|
|
<el-table-column v-for="(val,key) in item.content.data[0]" :prop="key" :label="key"/>
|
|
</el-table>
|
|
</div>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="分析结果" name="analysis" v-if="item.content.html_content && item.content.html_content !== ''">
|
|
<iframe :srcdoc="item.content.html_content"
|
|
style="width: 100%;height: 300px;border: none;
|
|
overflow-y:hidden; overflow-x: auto"></iframe>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="sql" name="sql">
|
|
<SQLCodeMirror ref="codemirror" v-if="item.content.tab === 'sql'" :data="item.content.sql.replace('\n',' ')"></SQLCodeMirror>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</template>
|
|
<template v-else>
|
|
<span>查询结果为空，请重新提问，或者点击编辑按钮辅助提问^_^！</span>
|
|
</template>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-card>
|
|
<div class="flex-between" style="display: flex; justify-content: space-between; align-items: center;margin-top: 16px">
|
|
<DataQueryButton :data="item" @edit="edit(item)" @download="download(item)"></DataQueryButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="item.type === 'answer_err'" class="item-content mb-16 lighter" style="margin-bottom: 16px;font-weight: 400">
|
|
<div class="avatar">
|
|
<img src="@/assets/logo/logo2.png" height="30px" />
|
|
</div>
|
|
<div content="content" style="padding-left:40px">
|
|
<el-card shadow="always" class="dialog-card">
|
|
<span style="font-size: 14px">{{item.content}}</span>
|
|
</el-card>
|
|
<div class="flex-between" style="display: flex; justify-content: space-between; align-items: center;margin-top: 16px">
|
|
<DataQueryButton :data="item"></DataQueryButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="item.type === 'loading'" class="item-content mb-16 lighter" style="margin-bottom: 16px;font-weight: 400">
|
|
<div class="avatar">
|
|
<img src="@/assets/logo/logo2.png" height="30px" />
|
|
</div>
|
|
<div content="content" style="padding-left:40px">
|
|
<el-card shadow="always" class="dialog-card">
|
|
<span style="font-size: 14px">思考中...</span>
|
|
</el-card>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</el-scrollbar>
|
|
<div class="ai-chat__operate p-24" style="padding: 24px">
|
|
<!-- <slot name="operateBefore" />-->
|
|
<div class="operate-textarea flex chat-width">
|
|
<el-input
|
|
ref="quickInputRef"
|
|
v-model="inputValue"
|
|
:placeholder="'Ctrl+Enter 换行，Enter发送'"
|
|
:autosize="{ minRows: 1, maxRows: 4 }"
|
|
type="textarea"
|
|
:maxlength="100000"
|
|
@keydown.enter="sendChatHandle($event)"
|
|
/>
|
|
<div class="operate flex align-center">
|
|
<el-button text class="sent-button" :disabled="chatList.length>0 && chatList[chatList.length-1].type === 'loading'" @click="sendChatHandle">
|
|
<img v-show="chatList.length>0 && chatList[chatList.length-1].type === 'loading'" src="@/assets/aichat/icon_send.svg" alt="" />
|
|
<img v-show="chatList.length === 0 || chatList[chatList.length-1].type !== 'loading'" src="@/assets/aichat/icon_send_colorful.svg" alt="" />
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { ref, nextTick, computed, watch, reactive, onMounted } from 'vue'
|
|
import {postDataQuery} from "@/api/aichat/aichat"
|
|
import { datetimeFormat } from '@/utils/time'
|
|
import {v4 as uuidv4} from "uuid";
|
|
import Cookies from "js-cookie";
|
|
import SQLCodeMirror from "@/components/codemirror/SQLCodeMirror.vue";
|
|
import DataQueryButton from "@/views/dataint/dataquery/DataQueryButton.vue";
|
|
|
|
defineOptions({ name: 'AiChat' })
|
|
|
|
const props = defineProps({
|
|
cookieSessionId: String,
|
|
data: {
|
|
type: Object,
|
|
default: () => {}
|
|
},
|
|
record: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
chatId: {
|
|
type: String,
|
|
default: ''
|
|
}, // 历史记录Id
|
|
debug: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
})
|
|
|
|
const { proxy } = getCurrentInstance();
|
|
|
|
const aiChatRef = ref()
|
|
const quickInputRef = ref()
|
|
const scrollDiv = ref()
|
|
const dialogScrollbar = ref()
|
|
const loading = ref(false)
|
|
const inputValue = ref('')
|
|
const chartOpenId = ref('')
|
|
const chatList = ref([])
|
|
const controller = ref(null)
|
|
|
|
const isDisabledChart = computed(
|
|
() => !(inputValue.value.trim())
|
|
)
|
|
|
|
const emit = defineEmits(['scroll','showEdit','download'])
|
|
function changeTab(content){
|
|
|
|
}
|
|
function setScrollBottom() {
|
|
// 将滚动条滚动到最下面
|
|
scrollDiv.value.setScrollTop(getMaxHeight())
|
|
}
|
|
|
|
function edit(data){
|
|
emit('showEdit',data)
|
|
}
|
|
function download(data){
|
|
emit('download',data)
|
|
}
|
|
function formatDefaultValue(item){
|
|
let value = item.default_value
|
|
if (item.cd_type === '输出结果'){
|
|
return item.name
|
|
}
|
|
if (item.ct_type === 'dateRangePicker'){
|
|
if (item.dateRangeValue){
|
|
return "开始日期为"+item.dateRangeValue[0]+"截止日期为"+item.dateRangeValue[1]
|
|
}else {
|
|
return ""
|
|
}
|
|
}
|
|
return value
|
|
}
|
|
|
|
function changeInputValue(content){
|
|
let query = content.query
|
|
let result = content.result
|
|
let resultList = []
|
|
let queryList = []
|
|
for (let i = 0; i < query.length; i++) {
|
|
queryList.push(query[i].name+"为"+formatDefaultValue(query[i]))
|
|
}
|
|
for (let i = 0; i < result.length; i++) {
|
|
resultList.push(result[i].name)
|
|
|
|
}
|
|
if (resultList.length > 0){
|
|
queryList.push("输出结果为"+resultList.join("和"))
|
|
}
|
|
inputValue.value = "查询" + queryList.join(",")
|
|
}
|
|
/**
|
|
* 滚动条距离最上面的高度
|
|
*/
|
|
const scrollTop = ref(0)
|
|
|
|
|
|
const getMaxHeight = () => {
|
|
return dialogScrollbar.value.scrollHeight
|
|
}
|
|
const handleScrollTop = ($event) => {
|
|
scrollTop.value = $event.scrollTop
|
|
emit('scroll', { ...$event, dialogScrollbar: dialogScrollbar.value, scrollDiv: scrollDiv.value })
|
|
}
|
|
|
|
const handleScroll = () => {
|
|
if (scrollDiv.value) {
|
|
// 内部高度小于外部高度 就需要出滚动条
|
|
if (scrollDiv.value.wrapRef.offsetHeight < dialogScrollbar.value.scrollHeight) {
|
|
// 如果当前滚动条距离最下面的距离在 规定距离 滚动条就跟随
|
|
scrollDiv.value.setScrollTop(getMaxHeight())
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
watch(
|
|
() => props.chatId,
|
|
(val) => {
|
|
if (val && val !== 'new') {
|
|
chartOpenId.value = val
|
|
} else {
|
|
chartOpenId.value = ''
|
|
}
|
|
},
|
|
{ deep: true }
|
|
)
|
|
|
|
watch(
|
|
() => props.record,
|
|
(value) => {
|
|
chatList.value = value
|
|
},
|
|
{
|
|
immediate: true
|
|
}
|
|
)
|
|
|
|
watch(() => props.cookieSessionId, value => upload.data = {sessionId:value})
|
|
|
|
function changeThumb(index,chat){
|
|
chatList.value[index].operate = chat.operate
|
|
chatList.value[index].thumbDownReason = chat.thumbDownReason
|
|
}
|
|
|
|
|
|
|
|
function padZero(num) {
|
|
return num < 10 ? '0' + num : num;
|
|
}
|
|
|
|
function formatDate(date) {
|
|
const year = date.getFullYear();
|
|
const month = padZero(date.getMonth() + 1); // 月份从0开始，所以需要+1
|
|
const day = padZero(date.getDate());
|
|
const hours = padZero(date.getHours());
|
|
const minutes = padZero(date.getMinutes());
|
|
const seconds = padZero(date.getSeconds());
|
|
|
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
|
}
|
|
|
|
|
|
async function sendChatHandle(event) {
|
|
if (!event.ctrlKey) {
|
|
// 如果没有按下组合键ctrl，则会阻止默认事件
|
|
event.preventDefault()
|
|
if (inputValue.value.trim().length>0) {
|
|
let query = {
|
|
"type": "question",
|
|
"content": inputValue.value.trim(),
|
|
"time": formatDate(new Date()),
|
|
}
|
|
handleSend(query,inputValue.value.trim())
|
|
inputValue.value = ''
|
|
}
|
|
} else {
|
|
// 如果同时按下ctrl+回车键，则会换行
|
|
inputValue.value += '\n'
|
|
}
|
|
}
|
|
function handleSend(queryObj,inputVal){
|
|
queryObj.sessionId = Cookies.get("chatSessionId")
|
|
queryObj.sessionName = chatList.value.length > 0 ? chatList.value[0].content.substring(0, 20) : inputValue.value.trim().substring(0, 20),
|
|
chatList.value.push(queryObj)
|
|
chatList.value.push({type:'loading'})
|
|
// let question = JSON.parse(JSON.stringify(chatList.value[chatList.value.length - 1]))
|
|
// await addChat(question)
|
|
nextTick(() => {
|
|
// 将滚动条滚动到最下面
|
|
scrollDiv.value.setScrollTop(getMaxHeight())
|
|
})
|
|
let data = {
|
|
query: inputVal,
|
|
}
|
|
sendChatMessage(data)
|
|
}
|
|
|
|
function generate_existing_names(existing_names, paramName){
|
|
if (existing_names.length > 0){
|
|
if (paramName in existing_names){
|
|
let lastPara = paramName.charAt(paramName.length -1)
|
|
let num = parseInt(lastPara)
|
|
if (isNaN(num)){
|
|
paramName += "1"
|
|
}else{
|
|
paramName = paramName.replace(lastPara,num+1)
|
|
}
|
|
generate_existing_names(existing_names, paramName)
|
|
}else {
|
|
existing_names.push(paramName)
|
|
}
|
|
}else {
|
|
existing_names.push(paramName)
|
|
}
|
|
}
|
|
function sendChatMessage(data){
|
|
postDataQuery(data).then(res=>{
|
|
let control_params = res.filters
|
|
let data = res.data //表格结果
|
|
let sql = res.sql // sql结果
|
|
let datas = res.datas // tree
|
|
let html_content = res.html_content //echarts图表
|
|
let existing_names = []
|
|
let query = [] // 查询条件
|
|
let question = '' //原始问题
|
|
let result = [] //结果
|
|
for (let i = 0; i < control_params.length; i++) {
|
|
let param = control_params[i]
|
|
generate_existing_names(existing_names,param.name)
|
|
if (param.ct_type === 'mselect'
|
|
|| param.ct_type === 'datePicker'
|
|
|| param.ct_type === 'dateRangePicker'
|
|
|| param.ct_type === 'input'
|
|
){
|
|
if ( ['维度筛选', '时间筛选', '分组条件', '查询其它条件'].includes(param.cd_type)){
|
|
if (param.ct_type === 'dateRangePicker'){
|
|
param.dateRangeValue = [param.default_value.start_date,param.default_value.end_date]
|
|
}
|
|
query.push(param)
|
|
}
|
|
}
|
|
if (param.ct_type === 'output' && param.cd_type === '输出结果'){
|
|
result.push(param)
|
|
}
|
|
if (param.name === '原始问题'){
|
|
question = param.default_value
|
|
}
|
|
}
|
|
if (chatList.value[chatList.value.length - 1].type === 'loading'){
|
|
chatList.value[chatList.value.length - 1] = {
|
|
type:'answer',
|
|
"time": formatDate(new Date()),
|
|
content:{
|
|
query:query,
|
|
question: question === ''? chatList.value[chatList.value.length - 2].content:question,
|
|
result: result,
|
|
data: data,
|
|
sql: sql,
|
|
datas: datas,
|
|
html_content: html_content,
|
|
tab:'result'
|
|
}
|
|
}
|
|
}else {
|
|
chatList.value.push(
|
|
{
|
|
type:'answer',
|
|
"time": formatDate(new Date()),
|
|
content:{
|
|
query:query,
|
|
question: question === ''? chatList.value[chatList.value.length - 1].content:question,
|
|
result: result,
|
|
data: data,
|
|
sql: sql,
|
|
datas: datas,
|
|
html_content: html_content,
|
|
tab:'result'
|
|
}
|
|
}
|
|
)
|
|
}
|
|
|
|
}).catch(err=>{
|
|
if (chatList.value[chatList.value.length - 1].type === 'loading'){
|
|
chatList.value[chatList.value.length - 1] = {
|
|
type:'answer_err',
|
|
content: "服务器繁忙,请稍后再试",
|
|
"time": formatDate(new Date()),
|
|
}
|
|
}else {
|
|
chatList.value.push(
|
|
{
|
|
type:'answer_err',
|
|
"time": formatDate(new Date()),
|
|
content: "服务器繁忙,请稍后再试"
|
|
}
|
|
)
|
|
}
|
|
|
|
})
|
|
}
|
|
watch(
|
|
chatList,
|
|
() => {
|
|
nextTick(() => {
|
|
// 将滚动条滚动到最下面
|
|
if (chatList.value.length >0){
|
|
scrollDiv.value.setScrollTop(getMaxHeight())
|
|
}
|
|
})
|
|
},{
|
|
deep:true, immediate:true
|
|
}
|
|
)
|
|
|
|
defineExpose({
|
|
setScrollBottom,handleSend
|
|
})
|
|
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.ai-chat {
|
|
--padding-left: 40px;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
color: #1f2329;
|
|
|
|
&__content {
|
|
height: auto;
|
|
padding-top: 0;
|
|
box-sizing: border-box;
|
|
|
|
.avatar {
|
|
float: left;
|
|
}
|
|
|
|
.content {
|
|
padding-left: var(--padding-left);
|
|
|
|
:deep(ol) {
|
|
margin-left: 16px !important;
|
|
}
|
|
}
|
|
|
|
.text {
|
|
padding: 6px 0;
|
|
}
|
|
|
|
.problem-button {
|
|
width: 100%;
|
|
border: none;
|
|
border-radius: 8px;
|
|
background: #f5f6f7;
|
|
height: 46px;
|
|
padding: 0 12px;
|
|
line-height: 46px;
|
|
box-sizing: border-box;
|
|
color: #1f2329;
|
|
-webkit-line-clamp: 1;
|
|
word-break: break-all;
|
|
|
|
&:hover {
|
|
background: var(--el-color-primary-light-9);
|
|
}
|
|
|
|
&.disabled {
|
|
&:hover {
|
|
background: #f5f6f7;
|
|
}
|
|
}
|
|
|
|
:deep(.el-icon) {
|
|
color: var(--el-color-primary);
|
|
}
|
|
}
|
|
}
|
|
|
|
&__operate {
|
|
background: #f3f7f9;
|
|
position: relative;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
z-index: 10;
|
|
|
|
&:before {
|
|
background: linear-gradient(0deg, #f3f7f9 0%, rgba(243, 247, 249, 0) 100%);
|
|
content: '';
|
|
position: absolute;
|
|
width: 100%;
|
|
top: -16px;
|
|
left: 0;
|
|
height: 16px;
|
|
}
|
|
|
|
.operate-textarea {
|
|
box-shadow: 0px 6px 24px 0px rgba(31, 35, 41, 0.08);
|
|
background-color: #ffffff;
|
|
border-radius: 8px;
|
|
border: 1px solid #ffffff;
|
|
box-sizing: border-box;
|
|
|
|
&:has(.el-textarea__inner:focus) {
|
|
border: 1px solid var(--el-color-primary);
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
:deep(.el-textarea__inner) {
|
|
border-radius: 8px !important;
|
|
box-shadow: none;
|
|
resize: none;
|
|
padding: 12px 16px;
|
|
box-sizing: border-box;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.operate {
|
|
padding: 6px 10px;
|
|
.el-icon {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.sent-button {
|
|
max-height: none;
|
|
.el-icon {
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
|
|
:deep(.el-loading-spinner) {
|
|
margin-top: -15px;
|
|
|
|
.circular {
|
|
width: 31px;
|
|
height: 31px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.dialog-card {
|
|
border: none;
|
|
border-radius: 8px;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
|
|
.chat-width {
|
|
max-width: 80%;
|
|
margin: 0 auto;
|
|
}
|
|
.machineDiv {
|
|
cursor: pointer;
|
|
padding-top: 3px;
|
|
padding-bottom: 3px;
|
|
}
|
|
.machineDiv:hover {
|
|
background-color: #ebf1ff;
|
|
font-weight: bold;
|
|
}
|
|
@media only screen and (max-width: 1000px) {
|
|
.chat-width {
|
|
max-width: 100% !important;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
</style>
|
|
|