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

金轮旋转的逻辑完成

ds_hxl
宋杰 3 weeks ago
parent
3e5e8d9938
commit
61b4f98c4e
1 changed files with 129 additions and 84 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. 213
      src/views/AiEmotion.vue

213
src/views/AiEmotion.vue
View File

@ -2,10 +2,10 @@
<div class="ai-emotion-container">
<!-- 金轮 -->
<div class="golden-wheel">
<img src="@/assets/img/AiEmotion/金轮.png" alt="金轮图标" class="rotating-image">
<img src="@/assets/img/AiEmotion/金轮.png" alt="金轮图标" :class="{ 'rotating-image': isRotating }">
</div>
<!-- 消息显示区域 -->
<div class="user-input-display">
<div class="user-input-display" ref="userInputDisplayRef">
<div v-for="(message, index) in messages" :key="index" class="message-container">
<!-- 用户输入内容 -->
<div v-if="message.sender === 'user'" class="message-bubble user-message">
@ -18,10 +18,14 @@
</div>
</div>
<!-- 输入框和发送按钮 -->
<div class="input-container fixed-bottom">
<footer class="input-container fixed-bottom">
<input type="text" v-model="userInput" placeholder="请输入内容..." class="input-box" />
<button @click="sendMessage" class="send-button">发送</button>
</div>
</footer>
<!-- <div class="input-container fixed-bottom">
<input type="text" v-model="userInput" placeholder="请输入内容..." class="input-box" />
<button @click="sendMessage" class="send-button">发送</button>
</div> -->
</div>
@ -30,7 +34,7 @@
<!-- 四维矩阵图 -->
<div class="class02">
<div class="span01">
{{ stockName }}
{{ stockName }}{{ stockName ? '量子四维矩阵图' : '' }}
</div>
<span class="span02">{{ displayDate }}</span>
</div>
@ -135,7 +139,17 @@ const userInput = ref('');
const messages = ref([]);
const displayDate = ref(''); // 用于存储显示的日期
const isPageLoaded = ref(false); // 控制页面是否显示
const isRotating = ref(false);//控制旋转
const userInputDisplayRef = ref(null);//消息区域的引用
// 触发图片旋转的方法
function startImageRotation() {
isRotating.value = true;
// 如果你想在一段时间后停止旋转，可以添加以下代码
setTimeout(() => {
isRotating.value = false;
}, 5000); // 5 秒后停止旋转
}
// 更新 span01 中股票名字的方法
function updateSpan01() {
nextTick(() => {
@ -147,7 +161,7 @@ function updateSpan01() {
}
// 请求工作流接口
// 发送消息方法
async function sendMessage() {
console.log('发送内容:', userInput.value);
@ -163,6 +177,16 @@ async function sendMessage() {
text: '数据加载中，请稍候...'
});
// 滚动到最新消息
nextTick(() => {
if (userInputDisplayRef.value) {
userInputDisplayRef.value.scrollTop = userInputDisplayRef.value.scrollHeight;
}
});
// 触发图片旋转
isRotating.value = true;
try {
// 调用工作流接口
const params = {
@ -212,13 +236,22 @@ async function sendMessage() {
sender: 'ai',
text: '工作流接口请求失败，请稍后再试。',
});
} finally {
// 停止图片旋转
isRotating.value = false;
}
} else {
console.warn('用户输入内容为空，无法发送请求');
messages.value.push({
sender: 'ai',
text: '请输入内容后再发送。',
});
// 滚动到最新消息
nextTick(() => {
if (userInputDisplayRef.value) {
userInputDisplayRef.value.scrollTop = userInputDisplayRef.value.scrollHeight;
}
});
}
}
@ -245,19 +278,24 @@ async function fetchData(code, market) {
);
const stockDataResponse = stockDataResult.data; // 获取返回的数据
console.log('图表数据接口返回数据:', stockDataResponse);
console.log('图表数据接口返回数据:', stockDataResponse.data);
if (stockDataResponse.data) {
if (stockDataResponse.code === 200 && stockDataResponse.data) {
messages.value.push({
sender: 'ai',
text: `股票数据已成功获取: ${JSON.stringify(stockDataResponse.data)}`,
text: `股票数据已成功获取`,
});
// 滚动到最新消息
nextTick(() => {
if (userInputDisplayRef.value) {
userInputDisplayRef.value.scrollTop = userInputDisplayRef.value.scrollHeight;
}
});
console.log('1111111111111111111111')
// 调用渲染图表的方法
renderCharts(stockDataResponse.data);
console.log('2222222222222222222222')
// 设置当天日期
const today = new Date();
const year = today.getFullYear();
@ -268,14 +306,18 @@ async function fetchData(code, market) {
// 数据和图表加载完成，显示页面
isPageLoaded.value = true;
} else {
console.error('图表数据接口返回数据不完整');
messages.value.push({
sender: 'ai',
text: '图表数据接口返回数据不完整，请稍后再试。',
});
// 滚动到最新消息
nextTick(() => {
if (userInputDisplayRef.value) {
userInputDisplayRef.value.scrollTop = userInputDisplayRef.value.scrollHeight;
}
});
}
} catch (error) {
console.error('请求图表数据接口失败:', error);
messages.value.push({
sender: 'ai',
text: '图表数据接口请求失败，请稍后再试。',
@ -284,78 +326,81 @@ async function fetchData(code, market) {
}
// 渲染组件图表的方法
// function renderCharts(data) {
// nextTick(() => {
// // 渲染股市温度计图表
// if (marketTemperatureRef.value && data.GSWDJ) {
// console.log('开始渲染股市温度计图表');
// console.log('股市温度计数据', data.GSWDJ)
// marketTemperatureRef.value.initChart(data.GSWDJ, data.KLine20, data.WDRL);
// console.log('股市温度计图表已渲染');
// }
// // 渲染情绪解码器图表
// if (emotionDecodRef.value && data.QXJMQ) {
// console.log('开始渲染情绪解码器图表');
// console.log('情绪解码器数据', data.QXJMQ)
// emotionDecodRef.value.initQXNLZHEcharts(data.KLine20, data.QXJMQ);
// console.log('情绪解码器图表已渲染');
// }
// // 渲染情绪探底雷达图表
// if (emotionalBottomRadarRef.value && data.QXTDLD) {
// console.log('开始渲染情绪探底雷达图表');
// console.log('数据', data.QXTDLD)
// emotionalBottomRadarRef.value.initEmotionalBottomRadar(data.KLine20, data.QXTDLD);
// console.log('情绪探底雷达图表已渲染');
// }
// // 渲染情绪能量转化器图表
// if (emoEnergyConverterRef.value && data.QXNLZHQ) {
// console.log('开始渲染情绪能量转化器图表');
// console.log('KLine20:', data.KLine20);
// console.log('QXNLZHQ:', data.QXNLZHQ);
// emoEnergyConverterRef.value.initQXNLZHEcharts(data.KLine20, data.QXNLZHQ);
// console.log('情绪能量转化器图表已渲染');
// }
// });
// }
function renderCharts(data) {
return new Promise((resolve) => {
nextTick(() => {
// 渲染股市温度计图表
if (marketTemperatureRef.value && data.GSWDJ) {
console.log('开始渲染股市温度计图表');
console.log('股市温度计数据', data.GSWDJ)
marketTemperatureRef.value.initChart(data.GSWDJ, data.KLine20, data.WDRL);
console.log('股市温度计图表已渲染');
}
// 渲染情绪解码器图表
if (emotionDecodRef.value && data.QXJMQ) {
console.log('开始渲染情绪解码器图表');
console.log('情绪解码器数据', data.QXJMQ)
emotionDecodRef.value.initQXNLZHEcharts(data.KLine20, data.QXJMQ);
console.log('情绪解码器图表已渲染');
}
// 渲染情绪探底雷达图表
if (emotionalBottomRadarRef.value && data.QXTDLD) {
console.log('开始渲染情绪探底雷达图表');
console.log('数据', data.QXTDLD)
emotionalBottomRadarRef.value.initEmotionalBottomRadar(data.KLine20, data.QXTDLD);
console.log('情绪探底雷达图表已渲染');
}
// 渲染情绪能量转化器图表
if (emoEnergyConverterRef.value && data.QXNLZHQ) {
console.log('开始渲染情绪能量转化器图表');
console.log('KLine20:', data.KLine20);
console.log('QXNLZHQ:', data.QXNLZHQ);
emoEnergyConverterRef.value.initQXNLZHEcharts(data.KLine20, data.QXNLZHQ);
console.log('情绪能量转化器图表已渲染');
}
// 图表渲染完成，resolve 承诺
resolve();
});
nextTick(() => {
// 渲染股市温度计图表
if (marketTemperatureRef.value && data.GSWDJ) {
console.log('开始渲染股市温度计图表');
console.log('股市温度计数据', data.GSWDJ)
marketTemperatureRef.value.initChart(data.GSWDJ, data.KLine20, data.WDRL);
console.log('股市温度计图表已渲染');
}
// 渲染情绪解码器图表
if (emotionDecodRef.value && data.QXJMQ) {
console.log('开始渲染情绪解码器图表');
console.log('情绪解码器数据', data.QXJMQ)
emotionDecodRef.value.initQXNLZHEcharts(data.KLine20, data.QXJMQ);
console.log('情绪解码器图表已渲染');
}
// 渲染情绪探底雷达图表
if (emotionalBottomRadarRef.value && data.QXTDLD) {
console.log('开始渲染情绪探底雷达图表');
console.log('数据', data.QXTDLD)
emotionalBottomRadarRef.value.initEmotionalBottomRadar(data.KLine20, data.QXTDLD);
console.log('情绪探底雷达图表已渲染');
}
// 渲染情绪能量转化器图表
if (emoEnergyConverterRef.value && data.QXNLZHQ) {
console.log('开始渲染情绪能量转化器图表');
console.log('KLine20:', data.KLine20);
console.log('QXNLZHQ:', data.QXNLZHQ);
emoEnergyConverterRef.value.initQXNLZHEcharts(data.KLine20, data.QXNLZHQ);
console.log('情绪能量转化器图表已渲染');
}
});
}
// function renderCharts(data) {
// return new Promise((resolve) => {
// nextTick(() => {
// // 渲染股市温度计图表
// if (marketTemperatureRef.value && data.GSWDJ) {
// console.log('开始渲染股市温度计图表');
// console.log('股市温度计数据', data.GSWDJ)
// marketTemperatureRef.value.initChart(data.GSWDJ, data.KLine20, data.WDRL);
// console.log('股市温度计图表已渲染');
// }
// // 渲染情绪解码器图表
// if (emotionDecodRef.value && data.QXJMQ) {
// console.log('开始渲染情绪解码器图表');
// console.log('情绪解码器数据', data.QXJMQ)
// emotionDecodRef.value.initQXNLZHEcharts(data.KLine20, data.QXJMQ);
// console.log('情绪解码器图表已渲染');
// }
// // 渲染情绪探底雷达图表
// if (emotionalBottomRadarRef.value && data.QXTDLD) {
// console.log('开始渲染情绪探底雷达图表');
// console.log('数据', data.QXTDLD)
// emotionalBottomRadarRef.value.initEmotionalBottomRadar(data.KLine20, data.QXTDLD);
// console.log('情绪探底雷达图表已渲染');
// }
// // 渲染情绪能量转化器图表
// if (emoEnergyConverterRef.value && data.QXNLZHQ) {
// console.log('开始渲染情绪能量转化器图表');
// console.log('KLine20:', data.KLine20);
// console.log('QXNLZHQ:', data.QXNLZHQ);
// emoEnergyConverterRef.value.initQXNLZHEcharts(data.KLine20, data.QXNLZHQ);
// console.log('情绪能量转化器图表已渲染');
// }
// // 图表渲染完成，resolve 承诺
// resolve();
// });
// });
// }
// 页面挂载完成后触发图片旋转
onMounted(() => {
startImageRotation();
});
</script>
@ -578,9 +623,9 @@ function renderCharts(data) {
}
.span02 {
margin-left: 500px;
font-size: 1.5rem;
color: white;
float: right;
}
.span01 {

Write Preview
Loading…
Cancel
Save