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

显示图标

ds_hxl
dongqian 3 weeks ago
parent
42f1e3cb48
commit
0349b551eb
1 changed files with 115 additions and 125 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. 236
      src/views/components/marketTemperature.vue

236
src/views/components/marketTemperature.vue
View File

@ -29,15 +29,30 @@
<template #default="{ $index: rowIndex }">
<div v-if="getDayData(rowIndex, colIndex + 1)">
<p class="WDRL_date">
{{ formatDate(getDayData(rowIndex, colIndex + 1).date) }}<span class="month-display">{{ formatMonth(getDayData(rowIndex, colIndex + 1).date) }}</span>
{{ formatDate(getDayData(rowIndex, colIndex + 1).date) }}
<span class="month-display">{{ formatMonth(getDayData(rowIndex, colIndex + 1).date) }}</span>
</p>
<p class="WDRL_data">
<span v-if="getDayData(rowIndex, colIndex + 1).stock_temperature">{{ getDayData(rowIndex, colIndex + 1).stock_temperature }}</span>
<template v-if="isIndexCode">
<span v-if="getDayData(rowIndex, colIndex + 1).market_temperature">
{{ getDayData(rowIndex, colIndex + 1).market_temperature }}
</span>
</template>
<template v-else>
<template v-if="isBothRest(rowIndex, colIndex + 1)">休市</template>
<template v-else>
<span v-if="getDayData(rowIndex, colIndex + 1).stock_temperature">
{{ getDayData(rowIndex, colIndex + 1).stock_temperature }}
</span>
<span v-if="shouldShowDivider(rowIndex, colIndex + 1)"> | </span>
<span v-if="getDayData(rowIndex, colIndex + 1).market_temperature">{{ getDayData(rowIndex, colIndex + 1).market_temperature }}</span>
<span v-if="getDayData(rowIndex, colIndex + 1).market_temperature">
{{ getDayData(rowIndex, colIndex + 1).market_temperature }}
</span>
</template>
</template>
</p>
</div>
<div v-else>
<div v-else-if="shouldShowRest(rowIndex, colIndex + 1)">
<p class="WDRL_date">休市</p>
</div>
</template>
@ -49,26 +64,14 @@
</template>
<script setup>
import { ref, computed, onMounted, defineExpose } from 'vue'
import * as echarts from 'echarts'
import { ref, onMounted, computed } from 'vue'
import axios from 'axios'
const KlineCanvs = ref()
const WDRL = ref([
{ date: '2025/06/01', stock_temperature: 65, market_temperature: 70 },
{ date: '2025/06/02', stock_temperature: 50, market_temperature: 55 },
{ date: '2025/06/03', stock_temperature: 40, market_temperature: 60 },
{ date: '2025/06/04', stock_temperature: 85, market_temperature: 80 },
{ date: '2025/06/05', stock_temperature: 95, market_temperature: 90 },
{ date: '2025/06/06', stock_temperature: 30, market_temperature: 35 },
{ date: '2025/06/07', stock_temperature: 60, market_temperature: 65 },
// 第二周
{ date: '2025/06/08', stock_temperature: 70, market_temperature: 75 },
{ date: '2025/06/09', stock_temperature: 80, market_temperature: 85 },
{ date: '2025/06/10', stock_temperature: 90, market_temperature: 95 },
{ date: '2025/06/11', stock_temperature: 100, market_temperature: 100 },
])
const WDRL = ref([])
const indexCodes = ['NDX','DJIA','SPX','STI','KLSE','TSX','N225','KS11','JKSE','1A0001','HSI','I63','VNINDE']
const isIndexCode = computed(() => indexCodes.includes(localStorage.getItem('localCode')))
const groupedWDRL = computed(() => {
const result = []
for (let i = 0; i < WDRL.value.length; i += 7) {
@ -76,7 +79,6 @@ const groupedWDRL = computed(() => {
}
return result
})
function getDayData(rowIndex, dayIndex) {
const weekData = groupedWDRL.value[rowIndex]
if (weekData && weekData.length >= dayIndex) {
@ -84,40 +86,86 @@ function getDayData(rowIndex, dayIndex) {
}
return {}
}
function shouldShowDivider(rowIndex, dayIndex) {
const data = getDayData(rowIndex, dayIndex)
return data?.market_temperature && data?.stock_temperature
}
function isBothRest(rowIndex, colIndex) {
const data = getDayData(rowIndex, colIndex)
return data && data.stock_temperature === '休市' && data.market_temperature === '休市'
}
function shouldShowRest(rowIndex, dayIndex) {
const data = getDayData(rowIndex, dayIndex)
if (data && (data.stock_temperature || data.market_temperature)) return false
const flatIndex = rowIndex * 7 + (dayIndex - 1)
const targetDay = WDRL.value[flatIndex]
if (!targetDay || !targetDay.date) return false
const [year, month, day] = targetDay.date.split('/').map(Number)
if (!year || !month || !day) return false
const dateObj = new Date(year, month - 1, day)
const today = new Date()
if (dateObj.getMonth() !== today.getMonth() || dateObj.getFullYear() !== today.getFullYear()) return false
const weekday = dateObj.getDay()
return weekday >= 1 && weekday <= 5
}
function formatMonth(dateStr) {
if (!dateStr) return ''
return dateStr.split('/')[1] + '月'
const month = dateStr.split('/')[1]
const map = { '01': '一月', '02': '二月', '03': '三月', '04': '四月', '05': '五月', '06': '六月', '07': '七月', '08': '八月', '09': '九月', 10: '十月', 11: '十一月', 12: '十二月' }
return map[month] || ''
}
function formatDate(dateStr) {
if (!dateStr) return ''
return dateStr.split('/')[2]
}
function tableCellStyle({ row, column, rowIndex, columnIndex }) {
const data = getDayData(rowIndex, columnIndex + 1)
const value = Number(data?.stock_temperature)
if (isNaN(value)) return {}
let value = isIndexCode.value ? Number(data?.market_temperature) : Number(data?.stock_temperature)
if (isNaN(value)) return { backgroundColor: '#4b759f', color: 'white' }
if (value >= 90) return { backgroundColor: '#BD0000', color: 'white' }
else if (value >= 70) return { backgroundColor: '#FF5638', color: 'white' }
else if (value >= 50) return { backgroundColor: '#C929E6', color: 'white' }
else if (value >= 20) return { backgroundColor: '#00AB00', color: 'white' }
else return { backgroundColor: '#87CEEB', color: 'white' }
else if (value > 0) return { backgroundColor: '#87CEEB', color: 'white' }
else return { backgroundColor: '#4b759f', color: 'white' }
}
onMounted(() => {
const fetchData = async () => {
try {
const response = await axios.post('http://39.101.133.168:8828/link/api/aiEmotion/client/getAiEmotionData', {
token: '9ior41AF0xTIbIG2pRnnbZi0+fEeMx8pywnIlrmTwo5FbqJ9lWrSWOxp9MkpKiNtedtUafqvzIwpFKrwuMs',
market: 'usa',
code: 'TSLA',
language: 'cn'
}, {
headers: { 'Content-Type': 'application/json' }
})
if (response.data.code === 200) {
WDRL.value = response.data.data.WDRL
const raw = response.data.data.GSWDJ
initChart(raw)
}
} catch (error) {
console.error('fetchData error:', error)
}
}
function initChart(raw) {
const dateLabels = raw.map(item => item[0])
const marketData = raw.map(item => Math.round(item[1]))
const stockData = raw.map(item => Math.round(item[2]))
const klineData = marketData.map(base => {
const open = base - 3 + Math.random() * 6
const close = base - 3 + Math.random() * 6
const low = Math.min(open, close) - Math.random() * 3
const high = Math.max(open, close) + Math.random() * 3
return [open, close, low, high].map(v => Math.round(v * 10) / 10)
})
const chart = echarts.init(KlineCanvs.value)
chart.setOption({
tooltip: {},
legend: { data: ['K线', '市场温度', '股票温度'], textStyle: { color: 'white' } },
xAxis: {
data: ['6/1', '6/2', '6/3', '6/4', '6/5', '6/6', '6/7'],
type: 'category',
data: dateLabels,
axisLine: { lineStyle: { color: '#8392A5' } }
},
yAxis: [{}, {
@ -132,104 +180,58 @@ onMounted(() => {
{
name: 'K线',
type: 'candlestick',
data: [[12, 15, 9, 18], [15, 18, 14, 20], [18, 20, 17, 22], [20, 22, 19, 24], [16, 22, 15, 20]],
data: klineData,
itemStyle: { color: '#0CF49B', color0: '#FD1050' }
},
{
name: '市场温度',
type: 'line',
yAxisIndex: 1,
data: [70, 55, 60, 80, 90, 35, 65]
data: marketData
},
{
name: '股票温度',
type: 'line',
yAxisIndex: 1,
data: [65, 50, 40, 85, 95, 30, 60]
data: stockData
}
]
})
})
onMounted(() => {
fetchData()
});
const fetchData = async () => {
try {
const response = await axios.post(
// 'https://api.homilychart.com/link/api/aiEmotion/client/getAiEmotionData',
'http://39.101.133.168:8828/link/api/aiEmotion/client/getAiEmotionData',
{
token: '9ior41AF0xTIbIG2pRnnbZi0+fEeMx8pywnIlrmTwo5FbqJ9lWrSWOxp9MkpKiNtedtUafqvzIwpFKrwuMs',
market: 'usa',
code: 'TSLA',
language: 'cn'
},
{
headers: { 'Content-Type': 'application/json' }
}
)
if (response.data.code === 200) {
console.log('打印数据',response.data)
Data.value = response.data.data.code
consle.log('1111111111111111111111')
console.log('打印温度计数据',response.data.data.code)
WDRL.value = response.data.data.WDRL
// 数据清洗并四舍五入
roundedData.value = Data.value.map(([date, num1, num2]) => [
date,
Math.round(num1),
Math.round(num2)
])
// 取最后一条数据
const lastTwoNumbers = roundedData.value.at(-1)
data1.value = lastTwoNumbers[1] // 市场温度
data3.value = lastTwoNumbers[0] // 日期
// 指数代码判断逻辑
const indexCodes = [
'NDX',
'DJIA',
'SPX',
'STI',
'KLSE',
'TSX',
'N225',
'KS11',
'JKSE',
'1A0001',
'HSI',
'I63',
'VNINDE'
]
const currentCode = localStorage.getItem('localCode')
if (indexCodes.includes(currentCode)) {
data2.value = 'NA' // 股票温度为 NA
} else {
data2.value = lastTwoNumbers[2] // 股票温度
}
onMounted(fetchData)
defineExpose({ initChart })
</script>
// 渲染图表
if (priceDataList.value) {
const currentData = JSON.parse(JSON.stringify(toRaw(priceDataList.value)))
KlineCanvsEcharts(currentData)
}
} else {
ElMessage.error(response.data.msg || '请求失败')
<style scoped>
.WDRL_date {
margin-top: 2px;
text-align: center;
font-size: 1.6vw;
font-weight: bold;
padding-top: 0%;
position: relative;
}
.month-display {
position: absolute;
top: 0;
right: 0;
font-size: 1vw;
color: rgb(58, 58, 58);
}
.WDRL_data {
margin-top: 5px;
text-align: center;
font-size: 1vw;
font-weight: bold;
}
} catch (error) {
console.error('API Error:', error)
ElMessage.error('网络请求失败')
.table_header {
color: white;
background: #2a2a2a;
}
.KlineClass {
width: 100%;
height: 400px;
}
</script>
<style scoped>
.home {
min-height: 100vh;
background-color: rgb(0, 22, 65);
@ -245,16 +247,4 @@ const fetchData = async () => {
border-radius: 8px;
padding: 20px;
}
.KlineClass {
width: 100%;
height: 400px;
}
.WDRL_date, .WDRL_data {
text-align: center;
color: white;
}
.table_header {
color: white;
background: #2a2a2a;
}
</style>
Write Preview
Loading…
Cancel
Save