|
|
|
@ -52,8 +52,8 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 图表 -->
|
|
|
|
|
<section v-if="item.chartType">
|
|
|
|
|
<div class="echarts-box" :id="item.chartType + index"></div>
|
|
|
|
|
<section v-if="ehcatrsType.includes(item.type)">
|
|
|
|
|
<div class="echarts-box" :id="item.type + index"></div>
|
|
|
|
|
<div class="echatrs-theme">
|
|
|
|
|
<div class="theme-title">风格切换:</div>
|
|
|
|
|
<div class="theme-list">
|
|
|
|
@ -75,7 +75,7 @@
|
|
|
|
|
<span>思考中</span> <n-spin size="small" content-class="spin-class" />
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 免责 -->
|
|
|
|
|
<div class="ai-hint" v-show="item.from === 'ai' && (item.text || item.chartType)">
|
|
|
|
|
<div class="ai-hint" v-show="item.from === 'ai' && (item.text || item.type)">
|
|
|
|
|
<span>注:本回答由AI生成,内容仅供参考</span>
|
|
|
|
|
<div class="upload-text" @click="uploadImage(index)">
|
|
|
|
|
<n-icon size="14">
|
|
|
|
@ -133,6 +133,7 @@ import { canvasCut } from '@/utils'
|
|
|
|
|
import { historyMessageRoomById } from '@/api/path'
|
|
|
|
|
import { useRoute } from 'vue-router'
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const route = useRoute()
|
|
|
|
|
const useMessageRoom = useMessageRoomStore()
|
|
|
|
|
const messageDialog = useMessage()
|
|
|
|
@ -149,7 +150,8 @@ let lastIndex = ref(0)
|
|
|
|
|
//主题
|
|
|
|
|
const echartsTheme = ['简约风', '商务风', '科技风']
|
|
|
|
|
let stopWatch = null
|
|
|
|
|
|
|
|
|
|
let isWatching = ref(false)
|
|
|
|
|
const ehcatrsType = ['pie', 'line', 'bar']
|
|
|
|
|
/**
|
|
|
|
|
* 页面初始完成
|
|
|
|
|
*/
|
|
|
|
@ -173,7 +175,6 @@ const getMessageInfo = async () => {
|
|
|
|
|
messageList.push(item)
|
|
|
|
|
initEcharts(item, index)
|
|
|
|
|
})
|
|
|
|
|
console.log(res.data)
|
|
|
|
|
}
|
|
|
|
|
} catch {
|
|
|
|
|
messageDialog.error('获取聊天室记录失败!')
|
|
|
|
@ -220,7 +221,7 @@ const handleSend = async () => {
|
|
|
|
|
loading: true, //ai思考中
|
|
|
|
|
chartInstanceItem: null,
|
|
|
|
|
chartInstanceActiveIndex: 0,
|
|
|
|
|
chartType: null,
|
|
|
|
|
type: null,
|
|
|
|
|
xData: [],
|
|
|
|
|
yData: []
|
|
|
|
|
},
|
|
|
|
@ -228,7 +229,7 @@ const handleSend = async () => {
|
|
|
|
|
)
|
|
|
|
|
try {
|
|
|
|
|
const res = await getAiMsg({ prompt: keyWord.value })
|
|
|
|
|
if (res.type) {
|
|
|
|
|
|
|
|
|
|
// 更新
|
|
|
|
|
updataMessageItem({
|
|
|
|
|
from: 'ai',
|
|
|
|
@ -237,9 +238,9 @@ const handleSend = async () => {
|
|
|
|
|
loading: false, //ai思考中
|
|
|
|
|
chartInstanceItem: null,
|
|
|
|
|
chartInstanceActiveIndex: 0,
|
|
|
|
|
chartType: res.chartType,
|
|
|
|
|
xData: res.xData,
|
|
|
|
|
yData: res.yData,
|
|
|
|
|
type: res.type,
|
|
|
|
|
xData: [],
|
|
|
|
|
data: [],
|
|
|
|
|
title: res.title,
|
|
|
|
|
unit: res.unit
|
|
|
|
|
})
|
|
|
|
@ -247,41 +248,41 @@ const handleSend = async () => {
|
|
|
|
|
nextTick(() => {
|
|
|
|
|
const itemData = messageList[lastIndex.value]
|
|
|
|
|
//饼图
|
|
|
|
|
if (res.chartType === 'pie') {
|
|
|
|
|
itemData.chartInstanceItem = new PieChart(`${res.chartType}${lastIndex.value}`, {
|
|
|
|
|
if (res.type === 'pie') {
|
|
|
|
|
itemData.chartInstanceItem = new PieChart(`${res.type}${lastIndex.value}`, {
|
|
|
|
|
title: res.title,
|
|
|
|
|
unit: res.unit,
|
|
|
|
|
xData: res.xData,
|
|
|
|
|
data: res.yData
|
|
|
|
|
data: res.data
|
|
|
|
|
})
|
|
|
|
|
} else if (res.chartType === 'bar') {
|
|
|
|
|
itemData.chartInstanceItem = new BarChart(`${res.chartType}${lastIndex.value}`, {
|
|
|
|
|
} else if (res.type === 'bar') {
|
|
|
|
|
itemData.chartInstanceItem = new BarChart(`${res.type}${lastIndex.value}`, {
|
|
|
|
|
title: res.title,
|
|
|
|
|
unit: res.unit,
|
|
|
|
|
xData: res.xData,
|
|
|
|
|
data: res.yData
|
|
|
|
|
data: res.data
|
|
|
|
|
})
|
|
|
|
|
} else if (res.chartType === 'line') {
|
|
|
|
|
itemData.chartInstanceItem = new LineChart(`${res.chartType}${lastIndex.value}`, {
|
|
|
|
|
} else if (res.type === 'line') {
|
|
|
|
|
itemData.chartInstanceItem = new LineChart(`${res.type}${lastIndex.value}`, {
|
|
|
|
|
title: res.title,
|
|
|
|
|
unit: res.unit,
|
|
|
|
|
xData: res.xData,
|
|
|
|
|
data: res.yData
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
data: res.data
|
|
|
|
|
})
|
|
|
|
|
} else {
|
|
|
|
|
} else if (res.type === 'text') {
|
|
|
|
|
//纯文本
|
|
|
|
|
updataMessageItem({
|
|
|
|
|
from: 'ai',
|
|
|
|
|
text: res,
|
|
|
|
|
type: res.type,
|
|
|
|
|
text: res.data,
|
|
|
|
|
time: moment().format('YYYY/MM/DD HH:mm:ss'),
|
|
|
|
|
loading: false
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
} catch {
|
|
|
|
|
updataMessageItem({
|
|
|
|
|
from: 'ai',
|
|
|
|
|
type: 'text',
|
|
|
|
|
text: '服务器繁忙,请稍后再试。',
|
|
|
|
|
time: moment().format('YYYY/MM/DD HH:mm:ss'),
|
|
|
|
|
loading: false
|
|
|
|
@ -295,22 +296,22 @@ const handleSend = async () => {
|
|
|
|
|
const initEcharts = (item, index) => {
|
|
|
|
|
nextTick(() => {
|
|
|
|
|
//饼图
|
|
|
|
|
if (item.chartType === 'pie') {
|
|
|
|
|
item.chartInstanceItem = new PieChart(`${item.chartType}${index}`, {
|
|
|
|
|
if (item.type === 'pie') {
|
|
|
|
|
item.chartInstanceItem = new PieChart(`${item.type}${index}`, {
|
|
|
|
|
title: item.title,
|
|
|
|
|
unit: item.unit,
|
|
|
|
|
xData: item.xData,
|
|
|
|
|
data: item.yData
|
|
|
|
|
})
|
|
|
|
|
} else if (item.chartType === 'bar') {
|
|
|
|
|
item.chartInstanceItem = new BarChart(`${item.chartType}${index}`, {
|
|
|
|
|
} else if (item.type === 'bar') {
|
|
|
|
|
item.chartInstanceItem = new BarChart(`${item.type}${index}`, {
|
|
|
|
|
title: item.title,
|
|
|
|
|
unit: item.unit,
|
|
|
|
|
xData: item.xData,
|
|
|
|
|
data: item.yData
|
|
|
|
|
})
|
|
|
|
|
} else if (item.chartType === 'line') {
|
|
|
|
|
item.chartInstanceItem = new LineChart(`${item.chartType}${index}`, {
|
|
|
|
|
} else if (item.type === 'line') {
|
|
|
|
|
item.chartInstanceItem = new LineChart(`${item.type}${index}`, {
|
|
|
|
|
title: item.title,
|
|
|
|
|
unit: item.unit,
|
|
|
|
|
xData: item.xData,
|
|
|
|
@ -348,7 +349,7 @@ const updataMessageItem = data => {
|
|
|
|
|
useMessageRoom.setMessage({
|
|
|
|
|
from: data.from,
|
|
|
|
|
text: data.text,
|
|
|
|
|
chartType: data.chartType,
|
|
|
|
|
type: data.type,
|
|
|
|
|
loading: false, //ai思考中
|
|
|
|
|
time: data.time,
|
|
|
|
|
chartInstanceItem: data.chartInstanceItem,
|
|
|
|
@ -365,12 +366,20 @@ const updataMessageItem = data => {
|
|
|
|
|
* @param index
|
|
|
|
|
*/
|
|
|
|
|
const handlerTheme = (item, index) => {
|
|
|
|
|
if (isWatching.value) {
|
|
|
|
|
pauseWatching()
|
|
|
|
|
isWatching.value = false
|
|
|
|
|
console.log('暂停')
|
|
|
|
|
}
|
|
|
|
|
item.chartInstanceActiveIndex = index
|
|
|
|
|
item.chartInstanceItem.changeColorStyle(index)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
startWatching()
|
|
|
|
|
}, 1000)
|
|
|
|
|
console.log('监听')
|
|
|
|
|
}, 5000)
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
@ -399,6 +408,7 @@ const startWatching = () => {
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
isWatching.value = true
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const pauseWatching = () => {
|
|
|
|
@ -410,11 +420,10 @@ const pauseWatching = () => {
|
|
|
|
|
onUnmounted(() => {
|
|
|
|
|
//清除
|
|
|
|
|
messageList.forEach(instance => {
|
|
|
|
|
if (instance.chartType) {
|
|
|
|
|
if (instance.type) {
|
|
|
|
|
instance.chartInstanceItem.dispose()
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|