third_codes/go-stock
1
0
Fork 0
mirror of https://github.com/ArvinLovegood/go-stock.git synced 2025-07-19 00:00:09 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(frontend):优化股票K线组件的样式和功能

Browse Source 
-移除了多余的 console.log 语句
- 调整了图表的样式，包括颜色、背景等
- 优化了鼠标悬停时的提示信息显示
-调整了均线的透明度
- 优化了分组列表的加载逻辑
This commit is contained in:
ArvinLovegood 2025-04-22 18:03:20 +08:00
parent 4b0b3c0491
commit 3a74e0ed98
1 changed files with 85 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

139
frontend/src/components/stock.vue
View File

@ -69,7 +69,7 @@ const kLineChartRef = ref(null);
const handleProgress = (progress) => { const handleProgress = (progress) => {
console.log(`Export progress: ${progress.ratio * 100}%`); //console.log(`Export progress: ${progress.ratio * 100}%`);
}; };
const enableEditor= ref(false) const enableEditor= ref(false)
const mdPreviewRef = ref(null) const mdPreviewRef = ref(null)
@ -131,9 +131,9 @@ const danmakuColor = computed(()=> {
const icon = ref('https://raw.githubusercontent.com/ArvinLovegood/go-stock/master/build/appicon.png'); const icon = ref('https://raw.githubusercontent.com/ArvinLovegood/go-stock/master/build/appicon.png');
const sortedResults = computed(() => { const sortedResults = computed(() => {
//console.log("computed",sortedResults.value) ////console.log("computed",sortedResults.value)
const sortedKeys =keys(results.value).sort(); const sortedKeys =keys(results.value).sort();
//console.log("sortedKeys",sortedKeys) ////console.log("sortedKeys",sortedKeys)
const sortedObject = {}; const sortedObject = {};
sortedKeys.forEach(key => { sortedKeys.forEach(key => {
sortedObject[key] = results.value[key]; sortedObject[key] = results.value[key];
@ -172,7 +172,7 @@ onBeforeMount(()=>{
followedStock.StockCode="gb_"+ followedStock.StockCode.replace("us", "").toLowerCase() followedStock.StockCode="gb_"+ followedStock.StockCode.replace("us", "").toLowerCase()
} }
if (!stocks.value.includes(followedStock.StockCode)) { if (!stocks.value.includes(followedStock.StockCode)) {
//console.log("followList",followedStock.StockCode) ////console.log("followList",followedStock.StockCode)
stocks.value.push(followedStock.StockCode) stocks.value.push(followedStock.StockCode)
} }
} }
@ -196,15 +196,15 @@ onBeforeMount(()=>{
sysPromptOptions.value=promptTemplates.value.filter(item => item.type === '模型系统Prompt') sysPromptOptions.value=promptTemplates.value.filter(item => item.type === '模型系统Prompt')
userPromptOptions.value=promptTemplates.value.filter(item => item.type === '模型用户Prompt') userPromptOptions.value=promptTemplates.value.filter(item => item.type === '模型用户Prompt')
console.log("userPromptOptions",userPromptOptions.value) //console.log("userPromptOptions",userPromptOptions.value)
console.log("sysPromptOptions",sysPromptOptions.value) //console.log("sysPromptOptions",sysPromptOptions.value)
}) })
}) })
onMounted(() => { onMounted(() => {
message.loading("Loading...") message.loading("Loading...")
// console.log(`the component is now mounted.`) // //console.log(`the component is now mounted.`)
// ticker.value=setInterval(() => { // ticker.value=setInterval(() => {
// if(isTradingTime()){ // if(isTradingTime()){
@ -221,7 +221,7 @@ onMounted(() => {
//ws.value = new WebSocket('ws://localhost:16688/ws'); // 替换为你的 WebSocket 服务器地址 //ws.value = new WebSocket('ws://localhost:16688/ws'); // 替换为你的 WebSocket 服务器地址
ws.value.onopen = () => { ws.value.onopen = () => {
console.log('WebSocket 连接已打开'); //console.log('WebSocket 连接已打开');
}; };
ws.value.onmessage = (event) => { ws.value.onmessage = (event) => {
@ -235,12 +235,12 @@ onMounted(() => {
}; };
ws.value.onclose = () => { ws.value.onclose = () => {
console.log('WebSocket 连接已关闭'); //console.log('WebSocket 连接已关闭');
}; };
}) })
onBeforeUnmount(() => { onBeforeUnmount(() => {
// console.log(`the component is now unmounted.`) // //console.log(`the component is now unmounted.`)
//clearInterval(ticker.value) //clearInterval(ticker.value)
ws.value.close() ws.value.close()
message.destroyAll() message.destroyAll()
@ -276,9 +276,9 @@ EventsOn("refreshFollowList",(data)=>{
}) })
EventsOn("newChatStream",async (msg) => { EventsOn("newChatStream",async (msg) => {
//console.log("newChatStream:->",data.airesult) ////console.log("newChatStream:->",data.airesult)
data.loading = false data.loading = false
//console.log(msg) ////console.log(msg)
if (msg === "DONE") { if (msg === "DONE") {
SaveAIResponseResult(data.code, data.name, data.airesult, data.chatId,data.question) SaveAIResponseResult(data.code, data.name, data.airesult, data.chatId,data.question)
message.info("AI分析完成！") message.info("AI分析完成！")
@ -317,8 +317,8 @@ EventsOn("updateVersion",async (msg) => {
const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
console.log("GitHub UTC 时间:", utcDate); //console.log("GitHub UTC 时间:", utcDate);
console.log("转换后的本地时间:", formattedDate); //console.log("转换后的本地时间:", formattedDate);
notify.info({ notify.info({
avatar: () => avatar: () =>
h(NAvatar, { h(NAvatar, {
@ -414,13 +414,13 @@ function AddStock(){
function removeMonitor(code,name,key) { function removeMonitor(code,name,key) {
console.log("removeMonitor",name,code,key) //console.log("removeMonitor",name,code,key)
stocks.value.splice(stocks.value.indexOf(code),1) stocks.value.splice(stocks.value.indexOf(code),1)
console.log("removeMonitor-key",key) //console.log("removeMonitor-key",key)
console.log("removeMonitor-v",results.value[key]) //console.log("removeMonitor-v",results.value[key])
delete results.value[key] delete results.value[key]
console.log("removeMonitor-v",results.value[key]) //console.log("removeMonitor-v",results.value[key])
UnFollow(code).then(result => { UnFollow(code).then(result => {
message.success(result) message.success(result)
@ -430,8 +430,8 @@ function removeMonitor(code,name,key) {
function SendDanmu(){ function SendDanmu(){
//danmus.value.push(data.name) //danmus.value.push(data.name)
console.log("SendDanmu",data.name) //console.log("SendDanmu",data.name)
console.log("SendDanmu-readyState", ws.value.readyState) //console.log("SendDanmu-readyState", ws.value.readyState)
ws.value.send(data.name) ws.value.send(data.name)
} }
@ -439,7 +439,7 @@ function getStockList(value){
// console.log("getStockList",value) // //console.log("getStockList",value)
let result; let result;
result=stockList.value.filter(item => item.name.includes(value)||item.ts_code.includes(value)) result=stockList.value.filter(item => item.name.includes(value)||item.ts_code.includes(value))
options.value=result.map(item => { options.value=result.map(item => {
@ -452,7 +452,7 @@ function getStockList(value){
data.code=value data.code=value
} }
console.log("getStockList-options",data.code) //console.log("getStockList-options",data.code)
if(data.code){ if(data.code){
let findId=data.code let findId=data.code
@ -488,7 +488,7 @@ function blinkBorder(findId){
} }
async function updateData(result) { async function updateData(result) {
//console.log("stock_price",result['日期'],result['时间'],result['股票代码'],result['股票名称'],result['当前价格'],result['盘前盘后']) ////console.log("stock_price",result['日期'],result['时间'],result['股票代码'],result['股票名称'],result['当前价格'],result['盘前盘后'])
if(result["当前价格"]<=0){ if(result["当前价格"]<=0){
result["当前价格"]=result["卖一报价"] result["当前价格"]=result["卖一报价"]
@ -531,13 +531,13 @@ async function updateData(result) {
delete results.value[result.key] delete results.value[result.key]
} }
//console.log("updateData",result) ////console.log("updateData",result)
} }
async function monitor() { async function monitor() {
for (let code of stocks.value) { for (let code of stocks.value) {
// console.log(code) // //console.log(code)
Greet(code).then(result => { Greet(code).then(result => {
updateData(result) updateData(result)
}) })
@ -547,12 +547,12 @@ async function monitor() {
function GetSortKey(sort,code){ function GetSortKey(sort,code){
let sortKey= padStart(sort,8,'0')+"_"+code let sortKey= padStart(sort,8,'0')+"_"+code
//console.log("GetSortKey:",sortKey) ////console.log("GetSortKey:",sortKey)
return sortKey return sortKey
} }
function onSelect(item) { function onSelect(item) {
//console.log("onSelect",item) ////console.log("onSelect",item)
if(item.indexOf("-")>0){ if(item.indexOf("-")>0){
item=item.split("-")[1].toLowerCase() item=item.split("-")[1].toLowerCase()
@ -575,7 +575,7 @@ function search(code,name){
} }
function setStock(code,name){ function setStock(code,name){
let res=followList.value.filter(item => item.StockCode===code) let res=followList.value.filter(item => item.StockCode===code)
//console.log("res:",res) ////console.log("res:",res)
formModel.value.name=name formModel.value.name=name
formModel.value.code=code formModel.value.code=code
formModel.value.volume=res[0].Volume?res[0].Volume:0 formModel.value.volume=res[0].Volume?res[0].Volume:0
@ -619,14 +619,14 @@ function calculateMA(dayCount,values) {
} }
function handleKLine(){ function handleKLine(){
GetStockKLine(data.code,data.name,365).then(result => { GetStockKLine(data.code,data.name,365).then(result => {
console.log("GetStockKLine",result) //console.log("GetStockKLine",result)
const chart = echarts.init(kLineChartRef.value); const chart = echarts.init(kLineChartRef.value);
const categoryData = []; const categoryData = [];
const values = []; const values = [];
const volumns=[]; const volumns=[];
for (let i = 0; i < result.length; i++) { for (let i = 0; i < result.length; i++) {
let resultElement=result[i] let resultElement=result[i]
console.log("resultElement:{}",resultElement) //console.log("resultElement:{}",resultElement)
categoryData.push(resultElement.day) categoryData.push(resultElement.day)
let flag=resultElement.close>resultElement.open?1:-1 let flag=resultElement.close>resultElement.open?1:-1
values.push([ values.push([
@ -635,37 +635,68 @@ function handleKLine(){
resultElement.low, resultElement.low,
resultElement.high resultElement.high
]) ])
volumns.push([i,resultElement.volume/100,flag]) volumns.push([i,resultElement.volume/10000,flag])
} }
//console.log("categoryData",categoryData) ////console.log("categoryData",categoryData)
//console.log("values",values) ////console.log("values",values)
let option = { let option = {
backgroundColor: '#ffffff', darkMode: data.darkTheme,
color:['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'], //backgroundColor: '#1c1c1c',
// color:['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
animation: false, animation: false,
legend: { legend: {
bottom: 10, bottom: 10,
left: 'center', left: 'center',
data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30'] data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30'],
textStyle: {
color: data.darkTheme?'#ccc':'#456'
},
}, },
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
type: 'cross' type: 'cross',
lineStyle: {
color: '#376df4',
width: 1,
opacity: 1
}
}, },
borderWidth: 1, borderWidth: 2,
borderColor: '#ccc', borderColor: data.darkTheme?'#456':'#ccc',
backgroundColor: data.darkTheme?'#456':'#fff',
padding: 10, padding: 10,
textStyle: { textStyle: {
color: '#000' color: data.darkTheme?'#ccc':'#456'
}, },
position: function (pos, params, el, elRect, size) { formatter: function (params) {//修改鼠标划过显示为中文
const obj = { console.log("params",params)
top: 10 let volum=params[5].data;//ma5的值
}; let ma5=params[1].data;//ma5的值
obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30; let ma10=params[2].data;//ma10的值
return obj; let ma20=params[3].data;//ma20的值
let ma30=params[4].data;//ma30的值
params = params[0];//开盘收盘最低最高数据汇总
let currentItemData = params.data;
return params.name + '<br>' +
'开盘:' + currentItemData[1] + '<br>' +
'收盘:' + currentItemData[2] + '<br>' +
'最低:' + currentItemData[3] + '<br>' +
'最高:' + currentItemData[4] + '<br>' +
'成交量(万手):' + volum[1] + '<br>' +
'MA5日均线:' + ma5 + '<br>' +
'MA10日均线:' + ma10 + '<br>' +
'MA20日均线:' + ma20 + '<br>' +
'MA30日均线:' + ma30
} }
// position: function (pos, params, el, elRect, size) {
// const obj = {
// top: 10
// };
// obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
// return obj;
// }
// extraCssText: 'width: 170px' // extraCssText: 'width: 170px'
}, },
axisPointer: { axisPointer: {
@ -675,7 +706,7 @@ function handleKLine(){
} }
], ],
label: { label: {
backgroundColor: '#777' backgroundColor: '#888'
} }
}, },
visualMap: { visualMap: {
@ -697,7 +728,7 @@ function handleKLine(){
{ {
left: '10%', left: '10%',
right: '8%', right: '8%',
height: '50%' height: '50%',
}, },
{ {
left: '10%', left: '10%',
@ -860,7 +891,7 @@ function handleKLine(){
smooth: true, smooth: true,
showSymbol: false, showSymbol: false,
lineStyle: { lineStyle: {
opacity: 0.5 opacity: 0.6
} }
}, },
{ {
@ -870,7 +901,7 @@ function handleKLine(){
smooth: true, smooth: true,
showSymbol: false, showSymbol: false,
lineStyle: { lineStyle: {
opacity: 0.5 opacity: 0.6
} }
}, },
{ {
@ -880,7 +911,7 @@ function handleKLine(){
smooth: true, smooth: true,
showSymbol: false, showSymbol: false,
lineStyle: { lineStyle: {
opacity: 0.5 opacity: 0.6
} }
}, },
{ {
@ -890,7 +921,7 @@ function handleKLine(){
smooth: true, smooth: true,
showSymbol: false, showSymbol: false,
lineStyle: { lineStyle: {
opacity: 0.5 opacity: 0.6
} }
}, },
{ {
@ -1228,13 +1259,13 @@ function updateTab(name){
currentGroupId.value=Number(name) currentGroupId.value=Number(name)
GetFollowList(currentGroupId.value).then(result => { GetFollowList(currentGroupId.value).then(result => {
stocks.value=[] stocks.value=[]
console.log("GetFollowList",result) //console.log("GetFollowList",result)
followList.value = result followList.value = result
for (const followedStock of result) { for (const followedStock of result) {
if(followedStock.StockCode.startsWith("us")){ if(followedStock.StockCode.startsWith("us")){
followedStock.StockCode="gb_"+ followedStock.StockCode.replace("us", "").toLowerCase() followedStock.StockCode="gb_"+ followedStock.StockCode.replace("us", "").toLowerCase()
} }
//console.log("followList",followedStock.StockCode) ////console.log("followList",followedStock.StockCode)
stocks.value.push(followedStock.StockCode) stocks.value.push(followedStock.StockCode)
} }
monitor() monitor()