hongxilin
/
AIxiaocaishen
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

当接口返回数据不足时不进行图表渲染；

songjie/feature-20250628160649-上线前优化
宋杰 1 day ago
parent
e77ca33753
commit
b4db8a05a4
1 changed files with 132 additions and 32 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 150
      src/views/AiEmotion.vue

150
src/views/AiEmotion.vue
View File

@ -45,11 +45,11 @@
</div>
<span class="span02">{{ displayDate }}</span>
</div>
<div class="class0201">
<div class="class0201" v-if="chartVisibility.marketTemperature">
<img src="@/assets/img/AiEmotion/L1.png" alt="情绪监控图标">
</div>
<!-- 温度计图表 -->
<div class="class03">
<div class="class03" v-if="chartVisibility.marketTemperature">
<div class="class003">
<div class="content1">
<img class="img01" src="@/assets/img/AiEmotion/温度计.png" alt="温度计图标">
@ -63,11 +63,11 @@
<marketTemperature ref="marketTemperatureRef" />
</div>
</div>
<div class="class0301">
<div class="class0301" v-if="chartVisibility.emotionDecod">
<img src="@/assets/img/AiEmotion/L2.png" alt="情绪解码图标">
</div>
<!-- 情绪解码器图表 -->
<div class="class04">
<div class="class04" v-if="chartVisibility.emotionDecod">
<div class="class0401">
<img class="img02" src='@/assets/img/AiEmotion/emotionDecod.png' alt="情绪解码器图标">
<span class="title2">情绪解码器</span>
@ -76,11 +76,11 @@
<emotionDecod ref="emotionDecodRef"></emotionDecod>
</div>
</div>
<div class="class0403">
<div class="class0403" v-if="chartVisibility.emotionalBottomRadar">
<img src="@/assets/img/AiEmotion/L3.png" alt="情绪推演图标">
</div>
<!-- 情绪探底雷达图表 -->
<div class="class05">
<div class="class05" v-if="chartVisibility.emotionalBottomRadar">
<div class="class0502">
<img class="img03" src="@/assets/img/AiEmotion/探底雷达.png" alt="探底雷达图表">
<span class="title3">情绪探底雷达</span>
@ -89,11 +89,11 @@
<emotionalBottomRadar ref="emotionalBottomRadarRef"></emotionalBottomRadar>
</div>
</div>
<div class="class0501">
<div class="class0501" v-if="chartVisibility.emoEnergyConverter">
<img src="@/assets/img/AiEmotion/L4.png" alt="情绪套利">
</div>
<!-- 情绪能量转化器图表 -->
<div class="class06">
<div class="class06" v-if="chartVisibility.emoEnergyConverter">
<div class="class0601">
<img class="img04" src="@/assets/img/AiEmotion/能量转化器.png" alt="能量转化器图标">
<span class="title4">情绪能量转化器</span>
@ -277,6 +277,14 @@ const moduleVisibility = ref({
four: false,
disclaimer: false
});
// 图表组件显示状态
const chartVisibility = ref({
marketTemperature: false,
emotionDecod: false,
emotionalBottomRadar: false,
emoEnergyConverter: false
});
const typewriterTimers = ref([]);
// 记录每个股票是否已经显示过打字机效果
const stockTypewriterShown = ref(new Map());
@ -372,6 +380,13 @@ watch(() => emotionStore.stockList, (newStockList) => {
four: false,
disclaimer: false
};
// 隐藏所有图表组件
chartVisibility.value = {
marketTemperature: false,
emotionDecod: false,
emotionalBottomRadar: false,
emoEnergyConverter: false
};
console.log('股票列表已清空，页面数据已隐藏');
}
}, { deep: true });
@ -583,6 +598,13 @@ watch(currentStock, (newStock) => {
}
} else {
console.log('股票数据不存在或API数据未加载');
// 隐藏所有图表组件
chartVisibility.value = {
marketTemperature: false,
emotionDecod: false,
emotionalBottomRadar: false,
emoEnergyConverter: false
};
}
}, { immediate: true });
@ -1140,36 +1162,114 @@ async function fetchData(code, market, stockName, queryText) {
// 渲染组件图表的方法
function renderCharts(data) {
console.log('开始渲染图表，数据:', data);
// 深拷贝数据避免污染原始数据
const clonedData = JSON.parse(JSON.stringify(data));
// 先设置图表组件显示状态
chartVisibility.value = {
marketTemperature: !!(clonedData.GSWDJ && clonedData.GSWDJ.length > 0),
emotionDecod: !!(clonedData.QXJMQ && clonedData.QXJMQ.length > 0),
emotionalBottomRadar: !!(clonedData.QXTDLD && clonedData.QXTDLD.length > 0),
emoEnergyConverter: !!(clonedData.QXNLZHQ && clonedData.QXNLZHQ.length > 0)
};
console.log('图表显示状态:', chartVisibility.value);
nextTick(() => {
// 添加小延迟确保DOM完全更新
// 增加延迟确保DOM完全更新和组件完全挂载
setTimeout(() => {
try {
// 深拷贝数据避免污染原始数据
const clonedData = JSON.parse(JSON.stringify(data));
console.log('图表组件ref状态:', {
marketTemperatureRef: !!marketTemperatureRef.value,
emotionDecodRef: !!emotionDecodRef.value,
emotionalBottomRadarRef: !!emotionalBottomRadarRef.value,
emoEnergyConverterRef: !!emoEnergyConverterRef.value
});
// 渲染股市温度计图表
if (marketTemperatureRef.value && clonedData.GSWDJ) {
if (marketTemperatureRef.value && chartVisibility.value.marketTemperature) {
console.log('开始渲染股市温度计图表');
console.log('marketTemperatureRef方法:', typeof marketTemperatureRef.value.initChart);
if (typeof marketTemperatureRef.value.initChart === 'function') {
try {
marketTemperatureRef.value.initChart(clonedData.GSWDJ, clonedData.KLine20, clonedData.WDRL);
console.log('股市温度计图表渲染成功');
} catch (error) {
console.error('股市温度计图表渲染失败:', error);
}
} else {
console.error('marketTemperatureRef.initChart 方法不存在');
}
} else {
console.log('股市温度计图表未渲染，ref存在:', !!marketTemperatureRef.value, '数据存在:', chartVisibility.value.marketTemperature);
}
// 渲染情绪解码器图表
if (emotionDecodRef.value && clonedData.QXJMQ) {
if (emotionDecodRef.value && chartVisibility.value.emotionDecod) {
console.log('开始渲染情绪解码器图表');
console.log('emotionDecodRef方法:', typeof emotionDecodRef.value.initQXNLZHEcharts);
if (typeof emotionDecodRef.value.initQXNLZHEcharts === 'function') {
try {
emotionDecodRef.value.initQXNLZHEcharts(clonedData.KLine20, clonedData.QXJMQ);
console.log('情绪解码器图表渲染成功');
} catch (error) {
console.error('情绪解码器图表渲染失败:', error);
}
} else {
console.error('emotionDecodRef.initQXNLZHEcharts 方法不存在');
}
} else {
console.log('情绪解码器图表未渲染，ref存在:', !!emotionDecodRef.value, '数据存在:', chartVisibility.value.emotionDecod);
}
// 渲染情绪探底雷达图表
if (emotionalBottomRadarRef.value && clonedData.QXTDLD) {
if (emotionalBottomRadarRef.value && chartVisibility.value.emotionalBottomRadar) {
console.log('开始渲染情绪探底雷达图表');
console.log('emotionalBottomRadarRef方法:', typeof emotionalBottomRadarRef.value.initEmotionalBottomRadar);
if (typeof emotionalBottomRadarRef.value.initEmotionalBottomRadar === 'function') {
try {
emotionalBottomRadarRef.value.initEmotionalBottomRadar(
clonedData.KLine20,
clonedData.QXTDLD
);
console.log('情绪探底雷达图表渲染成功');
} catch (error) {
console.error('情绪探底雷达图表渲染失败:', error);
}
} else {
console.error('emotionalBottomRadarRef.initEmotionalBottomRadar 方法不存在');
}
} else {
console.log('情绪探底雷达图表未渲染，ref存在:', !!emotionalBottomRadarRef.value, '数据存在:', chartVisibility.value.emotionalBottomRadar);
}
// 渲染情绪能量转化器图表
if (emoEnergyConverterRef.value && clonedData.QXNLZHQ) {
if (emoEnergyConverterRef.value && chartVisibility.value.emoEnergyConverter) {
console.log('开始渲染情绪能量转化器图表');
console.log('emoEnergyConverterRef方法:', typeof emoEnergyConverterRef.value.initQXNLZHEcharts);
if (typeof emoEnergyConverterRef.value.initQXNLZHEcharts === 'function') {
try {
emoEnergyConverterRef.value.initQXNLZHEcharts(clonedData.KLine20, clonedData.QXNLZHQ);
console.log('情绪能量转化器图表渲染成功');
} catch (error) {
console.error('情绪能量转化器图表渲染失败:', error);
}
} else {
console.error('emoEnergyConverterRef.initQXNLZHEcharts 方法不存在');
}
} else {
console.log('情绪能量转化器图表未渲染，ref存在:', !!emoEnergyConverterRef.value, '数据存在:', chartVisibility.value.emoEnergyConverter);
}
console.log('图表渲染完成');
} catch (error) {
console.error('图表渲染错误:', error);
const aiMessage = reactive({ sender: 'ai', text: '图表渲染失败，请重试' });
messages.value.push(aiMessage);
}
}, 100); // 100ms延迟确保DOM稳定
}, 500); // 增加延迟到500ms确保DOM和组件完全稳定
});
}
@ -2064,7 +2164,7 @@ defineExpose({
/* 确保不超出父容器 */
height: auto;
/* 高度根据内容动态变化 */
min-height: 55rem;
/* min-height: 55rem; */
/* 设置最小高度，确保图片显示 */
margin: 0 auto;
box-sizing: border-box;
@ -2251,9 +2351,9 @@ defineExpose({
}
/* 调整图表容器高度 */
.class00 {
/* .class00 {
min-height: 45rem;
}
} */
.class03 {
min-height: 60rem;
@ -2280,9 +2380,9 @@ defineExpose({
}
/* 调整图表容器高度 */
.class00 {
/* .class00 {
min-height: 40rem;
}
} */
.class03 {
min-height: 55rem;
@ -2446,9 +2546,9 @@ defineExpose({
}
/* 调整其他图表容器高度 */
.class00 {
/* .class00 {
min-height: 35rem;
}
} */
.class03 {
min-height: 45rem;
@ -2819,9 +2919,9 @@ defineExpose({
}
/* 调整图表容器高度适配超小屏幕 */
.class00 {
/* .class00 {
min-height: 25rem;
}
} */
.class03 {
min-height: 35rem;

Write Preview
Loading…
Cancel
Save