suzhou-jichuang-lanhai
/
ai-assistant
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 修复主题切换问题！

Browse Source
main
许宏杰 3 weeks ago
parent 09be0756c4
commit c630be0d20
3 changed files with 176 additions and 165 deletions
Show Stats Download Patch File Download Diff File

292
src/views/AI/chat/class/line.ts
Unescape View File

@ -27,159 +27,159 @@ export class LineChart {
this.initChart() this.initChart()
} }
private initChart(): void { private initChart(): void {
this.chart = echarts.init(this.dom) this.chart = echarts.init(this.dom)
this.setChartOptions() this.setChartOptions()
} }
private setChartOptions(): void { private setChartOptions(): void {
const option = { const option = {
backgroundColor: this.styleColor.backgroundColor, backgroundColor: this.styleColor.backgroundColor,
title: { title: {
text:this.chartData.title , text: this.chartData.title,
left: 'center', left: 'center',
top: '3%', top: '3%',
textStyle: { textStyle: {
color: this.styleColor.titleColor, color: this.styleColor.titleColor,
fontSize: 14 fontSize: 14
} }
}, },
grid: { grid: {
top: '25%', top: '25%',
left: '3%', left: '3%',
right: '3%', right: '3%',
bottom: '3%', bottom: '3%',
containLabel: true containLabel: true
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: this.chartData.xData, data: this.chartData.xData,
axisLine: { lineStyle: { color: this.styleColor.axisLineColor, width: 1 } }, //x轴线 axisLine: { lineStyle: { color: this.styleColor.axisLineColor, width: 1 } }, //x轴线
axisTick: { axisTick: {
show: false //不显示X轴刻度线 show: false //不显示X轴刻度线
}, },
axisLabel: { axisLabel: {
color: this.styleColor.axisLabelColor, color: this.styleColor.axisLabelColor,
fontSize: 12 fontSize: 12
} //x轴标题 } //x轴标题
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
name:this.chartData.unit, name: this.chartData.unit,
nameTextStyle:{ nameTextStyle: {
color:this.styleColor.axisLabelColor color: this.styleColor.axisLabelColor
}, },
axisLabel: { axisLabel: {
color: this.styleColor.axisLabelColor, color: this.styleColor.axisLabelColor,
fontSize: 12 fontSize: 12
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: this.styleColor.axisLineColor, color: this.styleColor.axisLineColor,
opacity: 0.5 opacity: 0.5
} }
} }
},
series: [
{
type: 'line',
data: this.chartData.data,
smooth: true,
label: {
show: true,
position: 'top',
color: this.styleColor.barValueColor
}, },
series: [ itemStyle: {
{ color: this.styleColor.barColor
type: 'line', }
data: this.chartData.data,
smooth: true,
label: {
show: true,
position: 'top',
color: this.styleColor.barValueColor
},
itemStyle: {
color: this.styleColor.barColor
}
}
]
} }
this.chart?.setOption(option) ]
}
this.chart?.setOption(option)
}
/**
* 主题切换 0-简约 ，1-商务 ,2-科技
* @param index
*/
changeColorStyle(index: number): void {
if (!this.chart) {
console.warn('未读取到元素！')
return
}
if (index === 0) {
this.styleColor = {
backgroundColor: '#30333B',
titleColor: '#fff',
axisLabelColor: '#5C6272',
axisLineColor: '#3F404D',
barColor: '#3071EC',
barValueColor: '#fff'
}
} else if (index === 1) {
this.styleColor = {
backgroundColor: '#FFFFFF',
titleColor: '#333',
axisLabelColor: '#737373',
axisLineColor: '#D9D9D9',
barColor: '#6790EA',
barValueColor: '#333'
}
} else {
this.styleColor = {
backgroundColor: 'rgba(80,122,252,0.1)',
titleColor: '#fff',
axisLabelColor: '#7A8195',
axisLineColor: '#3F404D',
barColor: '#0A50FF',
barValueColor: '#fff'
} }
}
/** this.chart.setOption({
* 主题切换 0-简约 ，1-商务 ,2-科技 backgroundColor: this.styleColor.backgroundColor,
* @param index title: {
*/ textStyle: {
changeColorStyle(index: number): void { color: this.styleColor.titleColor
if (!this.chart) { }
console.warn('未读取到元素！') },
return xAxis: {
axisLine: { lineStyle: { color: this.styleColor.axisLineColor } }, //x轴线
axisLabel: {
color: this.styleColor.axisLabelColor
} //x轴标题
},
yAxis: {
nameTextStyle: {
color: this.styleColor.axisLabelColor
},
axisLabel: {
color: this.styleColor.axisLabelColor
},
splitLine: {
lineStyle: {
color: this.styleColor.axisLineColor
} }
if (index === 0) { }
this.styleColor = { },
backgroundColor: '#30333B', series: [
titleColor: '#fff', {
axisLabelColor: '#5C6272', label: {
axisLineColor: '#3F404D', color: this.styleColor.barValueColor
barColor: '#3071EC', },
barValueColor: '#fff' itemStyle: {
} color: this.styleColor.barColor
} else if (index === 1) {
this.styleColor = {
backgroundColor: '#FFFFFF',
titleColor: '#333',
axisLabelColor: '#737373',
axisLineColor: '#D9D9D9',
barColor: '#6790EA',
barValueColor: '#333'
}
}else{
this.styleColor = {
backgroundColor: 'rgba(80,122,252,0.1)',
titleColor: '#fff',
axisLabelColor: '#7A8195',
axisLineColor: '#3F404D',
barColor:'#0A50FF',
barValueColor: '#fff'
}
} }
this.chart.setOption({
backgroundColor: this.styleColor.backgroundColor,
title: {
textStyle: {
color: this.styleColor.titleColor
}
},
xAxis: {
axisLine: { lineStyle: { color: this.styleColor.axisLineColor } }, //x轴线
axisLabel: {
color: this.styleColor.axisLabelColor
} //x轴标题
},
yAxis: {
nameTextStyle:{
color:this.styleColor.axisLabelColor
},
axisLabel: {
color: this.styleColor.axisLabelColor
},
splitLine: {
lineStyle: {
color: this.styleColor.axisLineColor
}
}
},
series: [
{
label: {
color: this.styleColor.barValueColor
},
itemStyle: {
color: this.styleColor.barColor
}
}
]
})
} }
]
})
}
dispose(): void { dispose(): void {
if (this.chart) { if (this.chart) {
this.chart.dispose() this.chart.dispose()
this.chart = null this.chart = null
} }
} }
} }

38
src/views/AI/components/aiChart/index.vue
Unescape View File

@ -38,7 +38,11 @@
<AddIssue :issueText="item.text" :list="dictList" v-show="item.add"></AddIssue> <AddIssue :issueText="item.text" :list="dictList" v-show="item.add"></AddIssue>
</div> </div>
<!-- 图表 --> <!-- 图表 -->
<initEcharts :item="item" :currentIndex="index" @changeTheme="handlerTheme"></initEcharts> <initEcharts
:item="item"
:currentIndex="index"
@changeTheme="childParams => handlerTheme(childParams, item)"
></initEcharts>
<!-- 表格 --> <!-- 表格 -->
<AiTable :obj="item"></AiTable> <AiTable :obj="item"></AiTable>
<!-- 思考 --> <!-- 思考 -->
@ -76,7 +80,7 @@
</template> </template>
<script setup> <script setup>
import { onMounted, ref, nextTick, watch,reactive } from 'vue' import { onMounted, ref, nextTick, watch, reactive } from 'vue'
import { import {
AiHint, AiHint,
AiTable, AiTable,
@ -100,7 +104,7 @@ import { useSystemStore } from '@/store/modules/systemStore/systemStore'
const systemStore = useSystemStore() const systemStore = useSystemStore()
//输入框加载 //输入框加载
let loading = ref(false) let loading = ref(false)
const ehcatrsType = ['pie', 'line', 'bar', 'number'] const ehcatrsType = ['pie', 'line', 'bar', ]
//聊天室容器 //聊天室容器
const scrollContainer = ref(null) const scrollContainer = ref(null)
const history = ref(null) const history = ref(null)
@ -149,7 +153,7 @@ const finishInfo = res => {
item.chartInstanceActiveIndex = 0 item.chartInstanceActiveIndex = 0
messageList.value.push(item) messageList.value.push(item)
nextTick(() => { nextTick(() => {
initEchart(item.chartInstanceItem, item, index) initEchart(item, item, index)
}) })
}) })
setTimeout(() => { setTimeout(() => {
@ -174,9 +178,9 @@ const saveMessage = async () => {
const jsonData = JSON.stringify(messageList.value) const jsonData = JSON.stringify(messageList.value)
let res let res
isloading.value = true isloading.value = true
if(infoId.value){ if (infoId.value) {
res = await historyMessageRoomUpdata({ content: jsonData, id: infoId.value}) res = await historyMessageRoomUpdata({ content: jsonData, id: infoId.value })
}else{ } else {
res = await historyMessageRoom({ content: jsonData, createUserId: systemStore.userInfo.userId || 1 }) res = await historyMessageRoom({ content: jsonData, createUserId: systemStore.userInfo.userId || 1 })
} }
if (res.code === 200) { if (res.code === 200) {
@ -243,8 +247,8 @@ const handleSend = async () => {
unit: res.unit unit: res.unit
}) })
nextTick(() => { nextTick(() => {
const itemData = messageList.value[lastIndex.value]
initEchart(itemData.chartInstanceItem, res, lastIndex.value) initEchart(null, res, lastIndex.value)
}) })
} catch { } catch {
updataMessageItem({ updataMessageItem({
@ -262,29 +266,34 @@ const handleSend = async () => {
* @param currentItem * @param currentItem
* @param res * @param res
*/ */
const initEchart = (chartInstanceItem, res, index) => { const initEchart = (item, res, index) => {
if(!ehcatrsType.includes(res.type)) return
let data = item === null ? messageList.value[lastIndex.value] : item
//饼图 //饼图
if (res.type === 'pie') { if (res.type === 'pie') {
chartInstanceItem = new PieChart(`${res.type}${index}`, { data. chartInstanceItem = new PieChart(`${res.type}${index}`, {
title: res.title, title: res.title,
unit: res.unit, unit: res.unit,
data: res.data data: res.data
}) })
} else if (res.type === 'bar') { } else if (res.type === 'bar') {
chartInstanceItem = new BarChart(`${res.type}${index}`, { data. chartInstanceItem = new BarChart(`${res.type}${index}`, {
title: res.title, title: res.title,
unit: res.unit, unit: res.unit,
xData: res.xData, xData: res.xData,
data: res.data data: res.data
}) })
} else if (res.type === 'line') { } else if (res.type === 'line') {
chartInstanceItem = new LineChart(`${res.type}${index}`, { data. chartInstanceItem = new LineChart(`${res.type}${index}`, {
title: res.title, title: res.title,
unit: res.unit, unit: res.unit,
xData: res.xData, xData: res.xData,
data: res.data data: res.data
}) })
} }
console.log(data)
} }
/** /**
@ -310,7 +319,8 @@ const updataMessageItem = data => {
* 图表切换主题 * 图表切换主题
* @param index * @param index
*/ */
const handlerTheme = (item, index) => { const handlerTheme = (index, item) => {
console.log(item)
if (isWatching.value) { if (isWatching.value) {
pauseWatching() pauseWatching()
isWatching.value = false isWatching.value = false

11
src/views/AI/components/initEcharts/index.vue
Unescape View File

@ -1,12 +1,13 @@
<template> <template>
<section v-if="ehcatrsType.includes(item.type)"> <section v-if="ehcatrsType.includes(item.type)">
<div class="echarts-box" :id="item.type + currentIndex"></div>
<div class="echarts-box" :id="item.type + currentIndex" ></div>
<div class="echatrs-theme"> <div class="echatrs-theme">
<div class="theme-title">风格切换：</div> <div class="theme-title">风格切换：</div>
<div class="theme-list"> <div class="theme-list">
<div <div
class="theme-item" class="theme-item"
@click="handlerTheme(item, themeIndex)" @click="handlerTheme(themeIndex)"
v-for="(themeItem, themeIndex) in echartsTheme" v-for="(themeItem, themeIndex) in echartsTheme"
:key="themeIndex" :key="themeIndex"
:class="item.chartInstanceActiveIndex == themeIndex ? 'activeTheme' : ''" :class="item.chartInstanceActiveIndex == themeIndex ? 'activeTheme' : ''"
@ -35,8 +36,8 @@ const echartsTheme = ['简约风', '商务风', '科技风']
const ehcatrsType = ['pie', 'line', 'bar', 'number'] const ehcatrsType = ['pie', 'line', 'bar', 'number']
const handlerTheme = (item,index)=>{ const handlerTheme = (index)=>{
emits('changeTheme',item,index) emits('changeTheme',index)
} }
</script> </script>

Write Preview
Loading…
Cancel
Save