feat(frontend):为股票公告列表添加走势图和资金趋势图

- 在 StockNoticeList 组件中添加 KLineChart 和 MoneyTrend 组件
- 实现股票代码和名称的悬停显示功能- 添加资金趋势图和 K线图的渲染
- 优化股票代码显示格式
This commit is contained in:
ArvinLovegood 2025-06-17 09:49:43 +08:00
parent 9d8af191c5
commit 0a2491d725
2 changed files with 34 additions and 3 deletions

View File

@ -4,6 +4,8 @@ import {GetStockList, StockNotice} from "../../wailsjs/go/main/App";
import {BrowserOpenURL} from "../../wailsjs/runtime"; import {BrowserOpenURL} from "../../wailsjs/runtime";
import {RefreshCircleSharp} from "@vicons/ionicons5"; import {RefreshCircleSharp} from "@vicons/ionicons5";
import _ from "lodash"; import _ from "lodash";
import KLineChart from "./KLineChart.vue";
import MoneyTrend from "./moneyTrend.vue";
const list = ref([]) const list = ref([])
@ -66,7 +68,19 @@ function getTypeColor(name){
return "info" return "info"
} }
function getmMarketCode(market,code) {
if(market==="0"){
return "sz"+code
}else if(market==="1"){
return "sh"+code
}else if(market==="2"){
return "bj"+code
}else if(market==="3"){
return "hk"+code
}else{
return code
}
}
</script> </script>
<template> <template>
@ -87,10 +101,20 @@ function getTypeColor(name){
<n-tbody> <n-tbody>
<n-tr v-for="item in list" :key="item.art_code"> <n-tr v-for="item in list" :key="item.art_code">
<n-td> <n-td>
<n-tag type="info">{{item.codes[0].stock_code }}</n-tag> <n-popover trigger="hover" placement="right">
<template #trigger>
<n-tag type="info" :bordered="false">{{item.codes[0].stock_code }}</n-tag>
</template>
<money-trend style="width: 800px" :code="getmMarketCode(item.codes[0].market_code,item.codes[0].stock_code)" :name="item.codes[0].short_name" :days="360" :dark-theme="true" :chart-height="500"></money-trend>
</n-popover>
</n-td> </n-td>
<n-td> <n-td>
<n-tag type="info">{{item.codes[0].short_name }}</n-tag> <n-popover trigger="hover" placement="right">
<template #trigger>
<n-tag type="info" :bordered="false">{{item.codes[0].short_name }}</n-tag>
</template>
<k-line-chart style="width: 800px" :code="getmMarketCode(item.codes[0].market_code,item.codes[0].stock_code)" :chart-height="500" :name="item.codes[0].short_name" :k-days="20" :dark-theme="true"></k-line-chart>
</n-popover>
</n-td> </n-td>
<n-td> <n-td>
<n-a type="info" @click="openWin(item.art_code)"><n-text :type="getTypeColor(item.columns[0].column_name)"> {{item.title}}</n-text></n-a> <n-a type="info" @click="openWin(item.art_code)"><n-text :type="getTypeColor(item.columns[0].column_name)"> {{item.title}}</n-text></n-a>

View File

@ -72,6 +72,13 @@ const handleLine = (code, days) => {
const upColor = '#ec0000'; const upColor = '#ec0000';
const downColor = '#00da3c'; const downColor = '#00da3c';
let option = { let option = {
title: {
text: name,
left: '20px',
textStyle: {
color: darkTheme?'#ccc':'#456'
}
},
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {