|
|
|
@ -27,12 +27,7 @@ |
|
|
|
<div class="class02"> |
|
|
|
<div class="container"> |
|
|
|
<img class="item" :src="item" alt="思维矩阵图片" /> |
|
|
|
<div class="span01" style=" |
|
|
|
position: relative; |
|
|
|
top: 0.5rem; |
|
|
|
left: -14rem; |
|
|
|
transform: translate(-50%, -50%); |
|
|
|
"> |
|
|
|
<div class="span01"> |
|
|
|
{{ stockName }}{{ stockName ? '量子四维矩阵图' : '' }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -43,7 +38,7 @@ |
|
|
|
</div> |
|
|
|
<!-- 温度计图表 --> |
|
|
|
<div class="class03"> |
|
|
|
<div class="class003" style="padding-top: 7rem;padding-left: 12rem;"> |
|
|
|
<div class="class003"> |
|
|
|
<div class="content1"> |
|
|
|
<img class="img01" src="@/assets/img/AiEmotion/温度计.png" alt="温度计图标"> |
|
|
|
<span class="title1">股票温度计</span> |
|
|
|
@ -132,13 +127,13 @@ |
|
|
|
import { ref, reactive } from 'vue'; |
|
|
|
import { getReplyAPI } from '@/api/AiEmotionApi.js'; // 导入工作流接口方法 |
|
|
|
import axios from 'axios'; |
|
|
|
import { useChatStore } from '@/store/chat.js'; |
|
|
|
import item from '@/assets/img/AiEmotion/bk01.png'; // 导入思维矩阵图片 |
|
|
|
import emotionDecod from '@/views/components/emotionDecod.vue'; // 导入情绪解码组件 |
|
|
|
import emotionalBottomRadar from '@/views/components/emotionalBottomRadar.vue'; // 导入情绪探底雷达图组件 |
|
|
|
import emoEnergyConverter from '@/views/components/emoEnergyConverter.vue'; // 导入情绪能量转化器组件 |
|
|
|
import marketTemperature from '@/views/components/marketTemperature.vue'; |
|
|
|
import blueBorderImg from '@/assets/img/AiEmotion/blueBorder.png' //导入蓝色背景框图片 |
|
|
|
import { ElMessage } from 'element-plus'; |
|
|
|
|
|
|
|
const stockName = ref(''); // 存储股票名称 |
|
|
|
const marketTemperatureRef = ref(null); // 引用市场温度计组件 |
|
|
|
@ -147,7 +142,7 @@ const emotionDecodRef = ref(null) |
|
|
|
const emotionalBottomRadarRef = ref(null) |
|
|
|
const messages = ref([]); |
|
|
|
const displayDate = ref(''); // 用于存储显示的日期 |
|
|
|
const isPageLoaded = ref(true); // 控制页面是否显示 |
|
|
|
const isPageLoaded = ref(false); // 控制页面是否显示 |
|
|
|
const isRotating = ref(false);//控制旋转 |
|
|
|
const userInputDisplayRef = ref(null);//消息区域的引用 |
|
|
|
const data1 = ref(null); // 个股温度 |
|
|
|
@ -163,15 +158,6 @@ function startImageRotation() { |
|
|
|
isRotating.value = false; |
|
|
|
}, 5000); // 5 秒后停止旋转 |
|
|
|
} |
|
|
|
// 更新 span01 中股票名字的方法 |
|
|
|
function updateSpan01() { |
|
|
|
nextTick(() => { |
|
|
|
const span01 = document.querySelector('.span01'); |
|
|
|
if (span01) { |
|
|
|
span01.textContent = `${stockName.value}量子四维矩阵图`; |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 发送消息方法 |
|
|
|
@ -220,18 +206,18 @@ async function handleSendMessage(input) { |
|
|
|
fetchData(parsedData.code, parsedData.market); |
|
|
|
|
|
|
|
// 更新 span01 的内容 |
|
|
|
updateSpan01(); |
|
|
|
// updateSpan01(); |
|
|
|
} else { |
|
|
|
console.error('工作流接口返回非股票信息:', parsedData.refuse); |
|
|
|
ElMessage.error('工作流接口未返回非股票信息'); |
|
|
|
} |
|
|
|
} catch (error) { |
|
|
|
console.error('请求工作流接口失败:', error); |
|
|
|
ElMessage.error('请求工作流接口失败，请检查网络连接'); |
|
|
|
} finally { |
|
|
|
// 停止图片旋转 |
|
|
|
isRotating.value = false; |
|
|
|
} |
|
|
|
} else { |
|
|
|
|
|
|
|
ElMessage.error('消息发送失败，请检查网络连接'); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@ -241,8 +227,8 @@ async function fetchData(code, market) { |
|
|
|
const stockDataParams = { |
|
|
|
// token: '+XgqsgdW0RLIbIG2pxnnbZi0+fEeMx8pywnIlrmTxtkSaPZ9xjSOWrxq+s0rL3RrfNhXPvGtz9srFfjwu8A', |
|
|
|
token: '9ior41AF0xTIbIG2pRnnbZi0+fEeMx8pywnIlrmTwo5FbqJ9lWrSWOxp9MkpKiNtedtUafqvzIwpFKrwuMs', |
|
|
|
market: 'usa', |
|
|
|
code: 'TSLA', |
|
|
|
market: market, |
|
|
|
code: code, |
|
|
|
language: 'cn', |
|
|
|
version: version1.value |
|
|
|
}; |
|
|
|
@ -259,13 +245,10 @@ async function fetchData(code, market) { |
|
|
|
); |
|
|
|
|
|
|
|
const stockDataResponse = stockDataResult.data; // 获取返回所有的数据 |
|
|
|
|
|
|
|
const chatStore = useChatStore(); |
|
|
|
chatStore.kLineData.push(stockDataResponse.data); |
|
|
|
|
|
|
|
console.log('图表数据接口返回数据:', stockDataResponse.data); |
|
|
|
|
|
|
|
if (stockDataResponse.code === 200 && stockDataResponse.data) { |
|
|
|
console.log(stockDataResponse.code) |
|
|
|
// 数据清洗并四舍五入xx |
|
|
|
const lastTwoNumbers = stockDataResponse.data.GSWDJ.map(([date, num1, num2]) => [ |
|
|
|
date, |
|
|
|
@ -278,16 +261,16 @@ async function fetchData(code, market) { |
|
|
|
data2.value = lastTwoNumbers[2] // 市场温度 |
|
|
|
console.log('1111111111111111111111') |
|
|
|
// 调用渲染图表的方法 |
|
|
|
renderCharts(chatStore.kLineData[chatStore.kLineData.length - 1]); |
|
|
|
console.log('2222222222222222222222') |
|
|
|
|
|
|
|
// renderCharts(stockDataResponse.data); |
|
|
|
// 数据和图表加载完成，显示页面 |
|
|
|
// isPageLoaded.value = true; |
|
|
|
} else { |
|
|
|
isPageLoaded.value = true; |
|
|
|
renderCharts(stockDataResponse.data); |
|
|
|
|
|
|
|
} else { |
|
|
|
ElMessage.error('获取接口数据失败'); |
|
|
|
} |
|
|
|
} catch (error) { |
|
|
|
|
|
|
|
ElMessage.error('获取接口数据失败。。。'); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@ -335,6 +318,11 @@ onMounted(() => { |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped> |
|
|
|
.class003 { |
|
|
|
padding-top: 7rem; |
|
|
|
padding-left: 12rem; |
|
|
|
} |
|
|
|
|
|
|
|
.class003 .div02 { |
|
|
|
background-image: url('@/assets/img/AiEmotion/redBorder.png'); |
|
|
|
background-repeat: no-repeat; |
|
|
|
@ -438,11 +426,9 @@ onMounted(() => { |
|
|
|
width: fit-content; |
|
|
|
} |
|
|
|
|
|
|
|
.class0503 { |
|
|
|
/* .class0503 { |
|
|
|
min-width: 100%; |
|
|
|
/* margin: 0 auto; */ |
|
|
|
|
|
|
|
} |
|
|
|
} */ |
|
|
|
|
|
|
|
.class0402 { |
|
|
|
width: 80%; |
|
|
|
@ -528,8 +514,6 @@ onMounted(() => { |
|
|
|
margin-left: 2rem; |
|
|
|
} |
|
|
|
|
|
|
|
.class0502 {} |
|
|
|
|
|
|
|
.img02 { |
|
|
|
width: 10rem; |
|
|
|
height: 10rem; |
|
|
|
@ -595,7 +579,7 @@ onMounted(() => { |
|
|
|
/* 设置容器宽度 */ |
|
|
|
height: auto; |
|
|
|
/* 高度根据内容动态变化 */ |
|
|
|
min-height: 70rem; |
|
|
|
min-height: 72rem; |
|
|
|
/* 设置最小高度，确保图片显示 */ |
|
|
|
margin: 0 auto; |
|
|
|
} |
|
|
|
@ -627,7 +611,7 @@ onMounted(() => { |
|
|
|
/* 设置容器宽度 */ |
|
|
|
height: auto; |
|
|
|
/* 高度根据内容动态变化 */ |
|
|
|
min-height: 55rem; |
|
|
|
min-height: 57rem; |
|
|
|
/* 设置最小高度，确保图片显示 */ |
|
|
|
margin: 0 auto; |
|
|
|
} |
|
|
|
@ -639,7 +623,7 @@ onMounted(() => { |
|
|
|
/* 确保背景图片完整显示 */ |
|
|
|
background-repeat: no-repeat; |
|
|
|
/* 防止背景图片重复 */ |
|
|
|
width: 95%; |
|
|
|
width: 100%; |
|
|
|
/* 设置容器宽度 */ |
|
|
|
height: auto; |
|
|
|
/* 高度根据内容动态变化 */ |
|
|
|
@ -703,13 +687,12 @@ onMounted(() => { |
|
|
|
font-size: 1.5rem; |
|
|
|
color: white; |
|
|
|
float: right; |
|
|
|
margin-top: -90px; |
|
|
|
margin-top: -3.5rem; |
|
|
|
} |
|
|
|
|
|
|
|
.span01 { |
|
|
|
/* background-image: url('@/assets/img/AiEmotion/bk01.png'); */ |
|
|
|
/* 使用导入的背景图片 */ |
|
|
|
background-size: cover; |
|
|
|
background-size: 100% 100%; |
|
|
|
/* 背景图片覆盖整个容器 */ |
|
|
|
background-repeat: no-repeat; |
|
|
|
/* 防止背景图片重复 */ |
|
|
|
@ -719,14 +702,11 @@ onMounted(() => { |
|
|
|
/* 添加内边距以显示内容 */ |
|
|
|
color: #fff; |
|
|
|
/* 设置文字颜色以确保可读性 */ |
|
|
|
border-radius: 5px; |
|
|
|
/* 添加圆角 */ |
|
|
|
min-height: 3rem; |
|
|
|
min-width: 30rem; |
|
|
|
font-size: 1.5rem; |
|
|
|
/* 增加字体大小以便更清晰显示股票名称 */ |
|
|
|
text-align: center; |
|
|
|
/* 文字居中 */ |
|
|
|
transform: translate(-50%, -50%); |
|
|
|
margin-left: -13rem; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
@ -828,4 +808,258 @@ onMounted(() => { |
|
|
|
.send-button:hover { |
|
|
|
background-color: #0056b3; |
|
|
|
} |
|
|
|
|
|
|
|
/* 手机端适配样式 */ |
|
|
|
@media only screen and (max-width: 768px) { |
|
|
|
|
|
|
|
/* 图片样式 */ |
|
|
|
.golden-wheel img { |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.class02 img { |
|
|
|
width: 70%; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.class0201 img { |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.class0301 img { |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.class0403 img { |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.class0501 img { |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.class0702 img { |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.class0700 img { |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.scaled-img img { |
|
|
|
width: 30%; |
|
|
|
height: auto; |
|
|
|
} |
|
|
|
|
|
|
|
.class09 img { |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.img01 { |
|
|
|
height: auto; |
|
|
|
margin-left: 0rem; |
|
|
|
width: 35%; |
|
|
|
margin-top: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
.title1 { |
|
|
|
font-size: 10px; |
|
|
|
margin-left: 30px; |
|
|
|
} |
|
|
|
|
|
|
|
.class02 .span02 { |
|
|
|
font-size: 14px; |
|
|
|
color: white; |
|
|
|
float: right; |
|
|
|
margin-top: -45px; |
|
|
|
} |
|
|
|
|
|
|
|
.class03 { |
|
|
|
background-image: url('@/assets/img/AiEmotion/bk03.png'); |
|
|
|
background-size: 100% 100%; |
|
|
|
background-repeat: no-repeat; |
|
|
|
width: 132%; |
|
|
|
margin-left: -45px; |
|
|
|
} |
|
|
|
|
|
|
|
.class03 .class003 { |
|
|
|
padding-top: 3rem; |
|
|
|
padding-left: 0rem; |
|
|
|
} |
|
|
|
|
|
|
|
.class01 { |
|
|
|
min-height: 100px; |
|
|
|
height: auto; |
|
|
|
box-sizing: border-box; |
|
|
|
background-color: #5e81a7; |
|
|
|
margin: 0 auto; |
|
|
|
margin-bottom: 10rem; |
|
|
|
} |
|
|
|
|
|
|
|
.class04 { |
|
|
|
width: 126%; |
|
|
|
/* min-height: 51rem; */ |
|
|
|
margin-left: -39px; |
|
|
|
min-height: 38rem; |
|
|
|
} |
|
|
|
|
|
|
|
.class02 .container img { |
|
|
|
width: 68%; |
|
|
|
height: auto; |
|
|
|
margin-top: -15px; |
|
|
|
margin-left: -2rem; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.title2, |
|
|
|
.title3, |
|
|
|
.title4 { |
|
|
|
font-size: 10px; |
|
|
|
margin-left: -3rem; |
|
|
|
} |
|
|
|
|
|
|
|
.img02 { |
|
|
|
width: 35%; |
|
|
|
height: auto; |
|
|
|
margin-left: 5rem; |
|
|
|
} |
|
|
|
|
|
|
|
.class0401 { |
|
|
|
padding-top: 3rem; |
|
|
|
} |
|
|
|
|
|
|
|
.img03, |
|
|
|
.img04 { |
|
|
|
width: 35%; |
|
|
|
height: auto; |
|
|
|
margin-left: 5rem; |
|
|
|
} |
|
|
|
|
|
|
|
.text-container p { |
|
|
|
font-size: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
.lz-img { |
|
|
|
margin-bottom: 3rem; |
|
|
|
padding-top: 20px; |
|
|
|
|
|
|
|
img { |
|
|
|
width: 45%; |
|
|
|
height: auto; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.class08 { |
|
|
|
background-size: 100% 100%; |
|
|
|
background-repeat: no-repeat; |
|
|
|
width: 127%; |
|
|
|
height: auto; |
|
|
|
min-height: 13rem; |
|
|
|
margin: 0 auto; |
|
|
|
margin-left: -41px; |
|
|
|
} |
|
|
|
|
|
|
|
.bk-image { |
|
|
|
background-size: 100% 100%; |
|
|
|
background-repeat: no-repeat; |
|
|
|
width: 126%; |
|
|
|
height: 15rem; |
|
|
|
margin: 0 auto; |
|
|
|
margin-top: 0px; |
|
|
|
margin-left: -40px; |
|
|
|
} |
|
|
|
|
|
|
|
.class05 { |
|
|
|
background-size: 100% 100%; |
|
|
|
background-repeat: no-repeat; |
|
|
|
width: 127%; |
|
|
|
height: auto; |
|
|
|
min-height: 45rem; |
|
|
|
margin-left: -41px; |
|
|
|
} |
|
|
|
|
|
|
|
.class06 { |
|
|
|
background-size: 100% 100%; |
|
|
|
background-repeat: no-repeat; |
|
|
|
width: 127%; |
|
|
|
height: auto; |
|
|
|
min-height: 35rem; |
|
|
|
margin: 0 auto; |
|
|
|
margin-left: -41px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.text-container { |
|
|
|
position: relative; |
|
|
|
top: 50%; |
|
|
|
left: 50%; |
|
|
|
transform: translate(-50%, -50%); |
|
|
|
color: white; |
|
|
|
text-align: left; |
|
|
|
padding: 20px; |
|
|
|
} |
|
|
|
|
|
|
|
.div00 { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
margin-left: 3rem; |
|
|
|
gap: 0; |
|
|
|
margin-top: -8rem; |
|
|
|
width: 100%; |
|
|
|
height: auto; |
|
|
|
} |
|
|
|
|
|
|
|
.class003 .div01 { |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
width: 35%; |
|
|
|
min-height: 25px; |
|
|
|
float: left; |
|
|
|
margin-left: 100px; |
|
|
|
text-align: center; |
|
|
|
margin-top: 10px; |
|
|
|
font-size: 10px; |
|
|
|
color: white; |
|
|
|
} |
|
|
|
|
|
|
|
.class003 .div02 { |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
width: 35%; |
|
|
|
min-height: 25px; |
|
|
|
float: left; |
|
|
|
margin-left: 100px; |
|
|
|
text-align: center; |
|
|
|
margin-top: 10px; |
|
|
|
font-size: 10px; |
|
|
|
color: white; |
|
|
|
} |
|
|
|
|
|
|
|
/* |
|
|
|
.container { |
|
|
|
max-width: 80vw; |
|
|
|
width: 100%; |
|
|
|
height: auto; |
|
|
|
} */ |
|
|
|
|
|
|
|
.span01 { |
|
|
|
/* 使用导入的背景图片 */ |
|
|
|
background-size: 100% 100%; |
|
|
|
/* 背景图片覆盖整个容器 */ |
|
|
|
background-repeat: no-repeat; |
|
|
|
/* 防止背景图片重复 */ |
|
|
|
display: inline-block; |
|
|
|
/* 确保容器是块级元素 */ |
|
|
|
padding: 10px; |
|
|
|
/* 添加内边距以显示内容 */ |
|
|
|
color: #fff; |
|
|
|
/* 设置文字颜色以确保可读性 */ |
|
|
|
font-size: 13px; |
|
|
|
/* 增加字体大小以便更清晰显示股票名称 */ |
|
|
|
text-align: center; |
|
|
|
transform: translate(-50%, -50%); |
|
|
|
margin-left: -5rem; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
宋杰
2 weeks ago