宋杰 4 weeks ago
parent
commit
76b5365904
  1. 240
      src/views/components/marketTemperature.vue

240
src/views/components/marketTemperature.vue

@ -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>
<span v-if="shouldShowDivider(rowIndex, colIndex + 1)"> | </span>
<span v-if="getDayData(rowIndex, colIndex + 1).market_temperature">{{ getDayData(rowIndex, colIndex + 1).market_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>
</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] //
}
//
if (priceDataList.value) {
const currentData = JSON.parse(JSON.stringify(toRaw(priceDataList.value)))
KlineCanvsEcharts(currentData)
}
} else {
ElMessage.error(response.data.msg || '请求失败')
}
} catch (error) {
console.error('API Error:', error)
ElMessage.error('网络请求失败')
}
}
onMounted(fetchData)
defineExpose({ initChart })
</script>
<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;
}
.table_header {
color: white;
background: #2a2a2a;
}
.KlineClass {
width: 100%;
height: 400px;
}
.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>
Loading…
Cancel
Save