Browse Source

公告字体修改;次数右移;探底雷达图表修改;能量转化器修改;解码器修改;温度计y轴刻度值修改;清空按钮大小调整;情绪大模型页面调整。

ds_hxl
宋杰 1 week ago
parent
commit
0668475e40
  1. 41
      src/views/AiEmotion.vue
  2. 5
      src/views/Announcement.vue
  3. 2
      src/views/components/StockTabs.vue
  4. 105
      src/views/components/emoEnergyConverter.vue
  5. 13
      src/views/components/emotionDecod.vue
  6. 138
      src/views/components/emotionalBottomRadar.vue
  7. 29
      src/views/components/marketTemperature.vue
  8. 2
      src/views/homePage.vue

41
src/views/AiEmotion.vue

@ -109,13 +109,17 @@
<div class="bk-image"> <div class="bk-image">
<div class="text-container"> <div class="text-container">
<p><span class="title">🔍 情绪监控-金融宇宙的量子检测网络</span> <p><span class="title">🔍 情绪监控-金融宇宙的量子检测网络</span>
<span class="content">核心任务:构建全市场情绪引力场雷达实时监测资金流向和情绪波动</span></p>
<span class="content">核心任务:构建全市场情绪引力场雷达实时监测资金流向和情绪波动</span>
</p>
<p><span class="title">🧠 情绪解码-主力思维的神经破译矩阵</span> <p><span class="title">🧠 情绪解码-主力思维的神经破译矩阵</span>
<span class="content">核心任务:解构资金行为的量子密码破译主力操盘意图和策略布局</span></p>
<span class="content">核心任务:解构资金行为的量子密码破译主力操盘意图和策略布局</span>
</p>
<p><span class="title">🔮 情绪推演-未来战争的时空推演舱</span> <p><span class="title">🔮 情绪推演-未来战争的时空推演舱</span>
<span class="content">核心任务:基于情绪数据推演未来走势预测市场转折点和机会窗口</span></p>
<span class="content">核心任务:基于情绪数据推演未来走势预测市场转折点和机会窗口</span>
</p>
<p><span class="title">💰 情绪套利-财富裂变的粒子对撞机</span> <p><span class="title">💰 情绪套利-财富裂变的粒子对撞机</span>
<span class="content">核心任务:将情绪差转化为收益粒子流实现情绪能量的价值转换</span></p>
<span class="content">核心任务:将情绪差转化为收益粒子流实现情绪能量的价值转换</span>
</p>
</div> </div>
</div> </div>
<!-- 核心逻辑 --> <!-- 核心逻辑 -->
@ -353,7 +357,7 @@ watch(currentStock, (newStock) => {
nextTick(() => { nextTick(() => {
renderCharts(newStock.apiData); renderCharts(newStock.apiData);
console.log('0000000000000000000000000',newStock.apiData)
// //
setTimeout(() => { setTimeout(() => {
if (scenarioApplicationRef.value && parsedConclusion.value) { if (scenarioApplicationRef.value && parsedConclusion.value) {
@ -876,7 +880,7 @@ function renderCharts(data) {
// //
const clonedData = JSON.parse(JSON.stringify(data)); const clonedData = JSON.parse(JSON.stringify(data));
console.log('已深拷贝数据,避免污染原始数据'); console.log('已深拷贝数据,避免污染原始数据');
console.log('所有数据1111111111111:', clonedData)
// //
if (marketTemperatureRef.value && clonedData.GSWDJ) { if (marketTemperatureRef.value && clonedData.GSWDJ) {
console.log("开始渲染股市温度计图表"); console.log("开始渲染股市温度计图表");
@ -894,7 +898,7 @@ function renderCharts(data) {
// //
if (emotionalBottomRadarRef.value && clonedData.QXTDLD) { if (emotionalBottomRadarRef.value && clonedData.QXTDLD) {
console.log("开始渲染情绪探底雷达图表"); console.log("开始渲染情绪探底雷达图表");
console.log("数据", clonedData.QXTDLD);
console.log("探底雷达数据", clonedData.QXTDLD);
emotionalBottomRadarRef.value.initEmotionalBottomRadar( emotionalBottomRadarRef.value.initEmotionalBottomRadar(
clonedData.KLine20, clonedData.KLine20,
clonedData.QXTDLD clonedData.QXTDLD
@ -1421,10 +1425,6 @@ defineExpose({
margin-bottom: 1%; margin-bottom: 1%;
} }
/* .class0503 {
min-width: 100%;
} */
.class0402 { .class0402 {
width: 80%; width: 80%;
margin: 0 auto; margin: 0 auto;
@ -1580,7 +1580,7 @@ defineExpose({
/* 设置容器宽度 */ /* 设置容器宽度 */
height: auto; height: auto;
/* 高度根据内容动态变化 */ /* 高度根据内容动态变化 */
min-height: 72rem;
min-height: 66rem;
/* 设置最小高度,确保图片显示 */ /* 设置最小高度,确保图片显示 */
margin: 0 auto; margin: 0 auto;
} }
@ -1596,7 +1596,7 @@ defineExpose({
/* 设置容器宽度 */ /* 设置容器宽度 */
height: auto; height: auto;
/* 高度根据内容动态变化 */ /* 高度根据内容动态变化 */
min-height: 70rem;
min-height: 86rem;
/* 设置最小高度,确保图片显示 */ /* 设置最小高度,确保图片显示 */
margin: 0 auto; margin: 0 auto;
} }
@ -2178,7 +2178,7 @@ defineExpose({
background-repeat: no-repeat; background-repeat: no-repeat;
width: 100%; width: 100%;
height: auto; height: auto;
min-height: 45rem;
min-height: 48rem;
} }
.class06 { .class06 {
@ -2186,7 +2186,7 @@ defineExpose({
background-repeat: no-repeat; background-repeat: no-repeat;
width: 100%; width: 100%;
height: auto; height: auto;
min-height: 33rem;
min-height: 35rem;
margin: 0 auto; margin: 0 auto;
} }
@ -2259,6 +2259,7 @@ defineExpose({
padding-top: 10%; padding-top: 10%;
} }
} }
/* 加载提示样式 */ /* 加载提示样式 */
.loading-container { .loading-container {
display: flex; display: flex;
@ -2289,8 +2290,13 @@ defineExpose({
} }
@keyframes spin { @keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
} }
.loading-text { .loading-text {
@ -2300,5 +2306,4 @@ defineExpose({
text-shadow: 0 2px 8px rgba(0, 212, 255, 0.5); text-shadow: 0 2px 8px rgba(0, 212, 255, 0.5);
letter-spacing: 1px; letter-spacing: 1px;
} }
</style> </style>

5
src/views/Announcement.vue

@ -163,6 +163,11 @@ onMounted(() => {
.announcementItem { .announcementItem {
margin-bottom: 10px; margin-bottom: 10px;
color: white;
}
p {
color: white;
} }
.codeItem { .codeItem {

2
src/views/components/StockTabs.vue

@ -188,7 +188,7 @@ const clearAllStocks = async () => {
.clear-all-btn { .clear-all-btn {
padding: 4px 8px; padding: 4px 8px;
font-size: 12px;
font-size: 17px;
background: #dc3545; background: #dc3545;
color: white; color: white;
border: none; border: none;

105
src/views/components/emoEnergyConverter.vue

@ -81,7 +81,6 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
value, value,
}); });
}); });
// //
// ddzc ------ zcht ------ htqs ------ qstp ------ // ddzc ------ zcht ------ htqs ------ qstp ------
// tpjs ------ jsyl ------- ylgg ------- // tpjs ------ jsyl ------- ylgg -------
@ -241,6 +240,108 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
let option; let option;
// //
option = { option = {
tooltip: {
show: true,
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#fff',
width: 1,
type: 'solid'
},
lineStyle: {
color: '#fff',
width: 1,
type: 'solid'
},
label: {
backgroundColor: 'rgba(0, 0, 0, 0.8)',
color: '#fff',
borderColor: '#fff',
borderWidth: 1
}
},
backgroundColor: 'rgba(0, 0, 0, 0.8)',
borderColor: '#fff',
borderWidth: 1,
padding: 10,
textStyle: {
color: '#fff',
fontSize: 12
},
formatter: function (params) {
if (!params || params.length === 0) return ''
let result = `<div style="font-weight: bold; color: #fff; margin-bottom: 8px;">${params[0].name}</div>`
params.forEach(param => {
let value = param.value
let color = param.color
if (param.seriesType === 'candlestick') {
let openPrice = value[0] //
let closePrice = value[1] //
let lowPrice = value[2] //
let highPrice = value[3] //
//
if (typeof openPrice !== 'number' || typeof closePrice !== 'number' ||
typeof lowPrice !== 'number' || typeof highPrice !== 'number') {
return ''
}
let priceChange = closePrice - openPrice
let changePercent = ((priceChange / openPrice) * 100).toFixed(2)
let changeColor = priceChange >= 0 ? '#ef232a' : '#14b143'
result += `<div style="margin-bottom: 6px;">`
result += `<div style="color: #fff; font-weight: bold;">${param.seriesName}</div>`
result += `<div style="color: #fff;">开盘: ${openPrice.toFixed(2)}</div>`
result += `<div style="color: #fff;">收盘: ${closePrice.toFixed(2)}</div>`
result += `<div style="color: #fff;">最低: ${lowPrice.toFixed(2)}</div>`
result += `<div style="color: #fff;">最高: ${highPrice.toFixed(2)}</div>`
result += `<div style="color: ${changeColor};">涨跌: ${priceChange >= 0 ? '+' : ''}${priceChange.toFixed(2)} (${changePercent}%)</div>`
result += `</div>`
} else if (param.seriesName === '止盈线' && value !== null && value !== undefined && typeof value === 'number') {
result += `<div style="color: #ff80ff; margin-bottom: 4px;">${param.seriesName}: ${value.toFixed(2)}</div>`
} else if (param.seriesName === '止损线' && value !== null && value !== undefined && typeof value === 'number') {
result += `<div style="color: #080bfd; margin-bottom: 4px;">${param.seriesName}: ${value.toFixed(2)}</div>`
}
})
return result
}
},
dataZoom: [
{
type: 'slider',
xAxisIndex: 0,
start: 40,
end: 100,
show: true,
bottom: 10,
height: 20,
borderColor: '#fff',
fillerColor: 'rgba(255, 255, 255, 0.2)',
handleStyle: {
color: '#fff',
borderColor: '#fff'
},
textStyle: {
color: '#fff'
}
},
{
type: 'inside',
xAxisIndex: 0,
start: 70,
end: 100,
zoomOnMouseWheel: true,
moveOnMouseMove: true,
moveOnMouseWheel: false
}
],
xAxis: { xAxis: {
type: "category", type: "category",
data: mixData.map((item) => item.date), data: mixData.map((item) => item.date),
@ -420,7 +521,7 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
left: "7%", left: "7%",
right: "10", right: "10",
top: '10', top: '10',
bottom: "0",
bottom: "60",
containLabel: true, containLabel: true,
width: '85%', width: '85%',
height: 'auto', height: 'auto',

13
src/views/components/emotionDecod.vue

@ -58,8 +58,9 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
const categoryData = []; const categoryData = [];
let value = []; let value = [];
for (let i = 0; i < a.length; i++) { for (let i = 0; i < a.length; i++) {
categoryData.push(a[i].splice(0, 1)[0]);
value.push(a[i]);
// 使
categoryData.push(a[i][0]);
value.push(a[i].slice(1)); // 使 slice splice
} }
return { categoryData, value }; return { categoryData, value };
}; };
@ -380,9 +381,9 @@ onBeforeUnmount(() => {
} }
#qxjmqEcharts { #qxjmqEcharts {
width: 100%;
width: 130%;
height: 800px; height: 800px;
margin-left: 1rem;
margin-left: -15%;
top: 5rem; top: 5rem;
} }
@ -391,13 +392,13 @@ onBeforeUnmount(() => {
#qxjmqEcharts { #qxjmqEcharts {
width: 100%; width: 100%;
height: 400px; height: 400px;
margin-left: 1rem;
margin-left: -6%;
top: 5rem; top: 5rem;
} }
.qxjmqbox { .qxjmqbox {
height: auto; height: auto;
width: 110%;
width: 130%;
margin-top: -5rem; margin-top: -5rem;
margin-left: -1rem; margin-left: -1rem;
} }

138
src/views/components/emotionalBottomRadar.vue

@ -18,7 +18,7 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
bottomRadarChart = echarts.init(bottomRadarChartDom) bottomRadarChart = echarts.init(bottomRadarChartDom)
// -x // -x
let dateArray = KlineData.map(subArray => subArray[0])
let dateArray = barAndLineData.map(subArray => subArray[0])
// k线 // k线
let kLineDataArray = KlineData.map(subArray => subArray.slice(1, 5)) let kLineDataArray = KlineData.map(subArray => subArray.slice(1, 5))
// 线 // 线
@ -103,33 +103,84 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
let option = { let option = {
// backgroundColor: '#000046', // // backgroundColor: '#000046', //
tooltip: { tooltip: {
show: false, // tip
// echart; 4.x+showAxisPointer
show: true, // tooltip
trigger: 'axis', trigger: 'axis',
triggerOn: 'mousemove',
confine: true,
axisPointer: { axisPointer: {
type: 'cross', type: 'cross',
crossStyle: { crossStyle: {
color: '#999'
color: '#fff',
width: 1,
type: 'solid'
},
lineStyle: {
color: '#fff',
width: 1,
type: 'solid'
},
label: {
backgroundColor: 'rgba(0, 0, 0, 0.8)',
color: '#fff',
borderColor: '#fff',
borderWidth: 1
} }
}, },
backgroundColor: 'rgba(255, 255, 255, 0.8)',
borderColor: '#ccc',
backgroundColor: 'rgba(0, 0, 0, 0.8)',
borderColor: '#fff',
borderWidth: 1, borderWidth: 1,
padding: 10, padding: 10,
textStyle: { textStyle: {
color: '#333'
color: '#fff',
fontSize: 12
}, },
formatter: function (params) { formatter: function (params) {
let result = `<div style="font-weight: bold;">${params[0].name}</div>`
if (!params || params.length === 0) return ''
// tooltip
let hasSecondOrThirdGrid = params.some(param => {
return (param.seriesName === '红线' && param.axisIndex === 1) ||
(param.axisIndex === 2) ||
(param.seriesName !== 'K线' && param.seriesName !== '基础base')
})
// tooltip
if (hasSecondOrThirdGrid && !params.some(param => param.seriesType === 'candlestick')) {
return ''
}
let result = `<div style="font-weight: bold; color: #fff; margin-bottom: 8px;">${params[0].name}</div>`
params.forEach(param => { params.forEach(param => {
let value = param.value let value = param.value
let color = param.color let color = param.color
if (param.seriesType === 'candlestick') { if (param.seriesType === 'candlestick') {
result += `<div style="color: ${color}"><i class="fa fa-square mr-1"></i>${param.seriesName}: 开 ${value[0]}, 收 ${value[1]}, 低 ${value[2]}, 高 ${value[3]}</div>`
} else {
result += `<div style="color: ${color}"><i class="fa fa-square mr-1"></i>${param.seriesName}: ${value}</div>`
// ECharts candlestickvalue[, , , ]
// param.value
let dataIndex = param.dataIndex
let candlestickData = kLineDataArray[dataIndex]
let openPrice = candlestickData[0] //
let closePrice = candlestickData[1] //
let lowPrice = candlestickData[2] //
let highPrice = candlestickData[3] //
let priceChange = closePrice - openPrice
let changePercent = ((priceChange / openPrice) * 100).toFixed(2)
let changeColor = priceChange >= 0 ? '#14b143' : '#ef232a' // 绿
result += `<div style="margin-bottom: 6px;">`
result += `<div style="color: #fff; font-weight: bold;">${param.seriesName}</div>`
result += `<div style="color: #fff;">开盘: ${openPrice.toFixed(2)}</div>`
result += `<div style="color: #fff;">收盘: ${closePrice.toFixed(2)}</div>`
result += `<div style="color: #fff;">最低: ${lowPrice.toFixed(2)}</div>`
result += `<div style="color: #fff;">最高: ${highPrice.toFixed(2)}</div>`
result += `<div style="color: ${changeColor};">涨跌: ${priceChange >= 0 ? '+' : ''}${priceChange.toFixed(2)} (${changePercent}%)</div>`
result += `</div>`
} else if (param.seriesName === '红线') {
result += `<div style="color: #ef232a; margin-bottom: 4px;">${param.seriesName}: ${value}</div>`
} else if (param.seriesName !== '基础base' && value > 0) {
result += `<div style="color: ${color}; margin-bottom: 4px;">${param.seriesName}: ${value}</div>`
} }
}) })
@ -372,37 +423,38 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
dataZoom: [ dataZoom: [
{ {
type: 'slider', type: 'slider',
xAxisIndex: [0, 2],
// start: 80,
// end: 100,
show: false
},
{
type: 'slider',
xAxisIndex: [0, 2],
// start: 80,
// end: 100,
show: false
},
{
type: 'slider',
xAxisIndex: [0, 2],
// or 20%
// start: 80,
// end: 100,
show: false, //
xAxisIndex: [0, 1, 2],
start: 70,
end: 100,
show: true,
bottom: 10,
height: 20,
borderColor: '#CFD6E3', borderColor: '#CFD6E3',
fillerColor: 'rgba(135, 175, 274, 0.2)',
handleStyle: {
color: '#CFD6E3'
},
textStyle: {
color: '#fff'
},
dataBackground: { dataBackground: {
// 线
lineStyle: { lineStyle: {
color: '#CFD6E3' color: '#CFD6E3'
}, },
//
areaStyle: { areaStyle: {
color: 'rgba(241,243,247,0.5)' color: 'rgba(241,243,247,0.5)'
} }
} }
}, },
{
type: 'inside',
xAxisIndex: [0, 1, 2],
start: 70,
end: 100,
zoomOnMouseWheel: true,
moveOnMouseMove: true,
moveOnMouseWheel: false
}
], ],
series: [ series: [
{ {
@ -412,18 +464,18 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
xAxisIndex: 0, xAxisIndex: 0,
yAxisIndex: 0, yAxisIndex: 0,
itemStyle: { itemStyle: {
color: '#ef232a', // ()
color0: '#14b143', // (绿)
borderColor: '#ef232a',
borderColor0: '#14b143',
color: '#14b143', // (绿)
color0: '#ef232a', // ()
borderColor: '#14b143',
borderColor0: '#ef232a',
normal: { normal: {
color: '#ef232a', // ()
color0: '#14b143', // (绿)
borderColor: '#ef232a',
borderColor0: '#14b143',
color: '#14b143', // (绿)
color0: '#ef232a', // ()
borderColor: '#14b143',
borderColor0: '#ef232a',
opacity: function (params) { opacity: function (params) {
// > 线
return params.data[2] > params.data[1] ? 0 : 1
// K线[,,,] > 线
return params.data[1] > params.data[0] ? 0 : 1
} }
} }
} }
@ -472,7 +524,7 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
data: transparentFillingDataArray, data: transparentFillingDataArray,
}, },
{ {
name: '黄色',
name: '黄色',
type: 'bar', type: 'bar',
stack: 'total', stack: 'total',
// barGap: '-100%', // // barGap: '-100%', //

29
src/views/components/marketTemperature.vue

@ -179,6 +179,21 @@ function initChart(raw, klineDataRawValue, WDRLValue) {
return [open, close, low, high] return [open, close, low, high]
}) })
// K线
let minPrice = Infinity
let maxPrice = -Infinity
klineDataRawValue.forEach(item => {
const low = item[3]
const high = item[4]
minPrice = Math.min(minPrice, low)
maxPrice = Math.max(maxPrice, high)
})
// 10
const yAxisMin = Math.floor(minPrice / 10) * 10
// 10
const yAxisMax = Math.ceil(maxPrice / 10) * 10 + 10
// //
WDRL.value = WDRLValue WDRL.value = WDRLValue
klineDataRaw.value = klineDataRawValue klineDataRaw.value = klineDataRawValue
@ -224,7 +239,7 @@ function initChart(raw, klineDataRawValue, WDRLValue) {
return '' return ''
} }
}, },
legend: { data: ['K线', '市场温度', '股票温度'], textStyle: { color: 'white' } },
legend: { data: ['K线', '市场温度', '股票温度'], textStyle: { color: 'white',fontSize: 18 }},
xAxis: { xAxis: {
type: 'category', type: 'category',
data: dateLabels, data: dateLabels,
@ -251,6 +266,8 @@ function initChart(raw, klineDataRawValue, WDRLValue) {
} }
}, },
yAxis: [{ yAxis: [{
min: yAxisMin,
max: yAxisMax,
axisLine: { lineStyle: { color: '#00FF7F' } }, axisLine: { lineStyle: { color: '#00FF7F' } },
axisLabel: { axisLabel: {
color: '#FFFFFF', color: '#FFFFFF',
@ -320,10 +337,10 @@ function initChart(raw, klineDataRawValue, WDRLValue) {
data: klineData, data: klineData,
itemStyle: { itemStyle: {
normal: { normal: {
color: '#FF0000', // 线
color0: '#00FF00', // 线绿
borderColor: '#FF0000', // 线
borderColor0: '#00FF00' // 线绿
color: '#00FF00', // 线
color0: '#FF0000', // 线绿
borderColor: '#00FF00', // 线
borderColor0: '#FF0000' // 线绿
} }
} }
}, },
@ -439,7 +456,7 @@ defineExpose({ initChart })
.KlineClass { .KlineClass {
width: 100%; width: 100%;
height: 400px;
height: 600px;
} }
.market-temperature { .market-temperature {

2
src/views/homePage.vue

@ -820,7 +820,7 @@ body {
.homepage-right-group .count-badge .count-number { .homepage-right-group .count-badge .count-number {
position: absolute; position: absolute;
top: 6px; top: 6px;
right: 29px;
right: 20px;
color: #573dfc; color: #573dfc;
font-size: 12px; font-size: 12px;
font-weight: bold; font-weight: bold;

Loading…
Cancel
Save