mirror of
https://github.com/ArvinLovegood/go-stock.git
synced 2025-07-19 00:00:09 +08:00
refactor(frontend): 优化股票组件功能和布局
-调整了固定按钮的位置和样式 - 优化了股票搜索和添加功能的布局 - 移除了不必要的控制台日志输出- 调整了事件处理
This commit is contained in:
parent
975ad611df
commit
9a41560bee
@ -1,17 +1,18 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import {onBeforeMount, onBeforeUnmount, onMounted, reactive, ref} from 'vue'
|
import {onBeforeMount, onBeforeUnmount, onMounted, reactive, ref} from 'vue'
|
||||||
import {
|
import {
|
||||||
Greet,
|
|
||||||
Follow,
|
Follow,
|
||||||
UnFollow,
|
|
||||||
GetFollowList,
|
GetFollowList,
|
||||||
GetStockList,
|
GetStockList,
|
||||||
|
Greet,
|
||||||
|
SendDingDingMessage,
|
||||||
|
SetAlarmChangePercent,
|
||||||
SetCostPriceAndVolume,
|
SetCostPriceAndVolume,
|
||||||
SendDingDingMessage, SetAlarmChangePercent
|
UnFollow
|
||||||
} from '../../wailsjs/go/main/App'
|
} from '../../wailsjs/go/main/App'
|
||||||
import {NButton, NFlex, NForm, NFormItem, NInputNumber, NText, useMessage, useModal} from 'naive-ui'
|
import {NButton, NFlex, NForm, NFormItem, NInputNumber, NText, useMessage, useModal} from 'naive-ui'
|
||||||
import { WindowFullscreen,WindowUnfullscreen,EventsOn } from '../../wailsjs/runtime'
|
import {EventsOn, WindowFullscreen, WindowUnfullscreen} from '../../wailsjs/runtime'
|
||||||
import {Add, StarOutline} from '@vicons/ionicons5'
|
import {Add, Search} from '@vicons/ionicons5'
|
||||||
|
|
||||||
const message = useMessage()
|
const message = useMessage()
|
||||||
const modal = useModal()
|
const modal = useModal()
|
||||||
@ -69,7 +70,7 @@ onBeforeMount(()=>{
|
|||||||
|
|
||||||
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()){
|
||||||
@ -77,11 +78,10 @@ onMounted(() => {
|
|||||||
data.fenshiURL='http://image.sinajs.cn/newchart/min/n/'+data.code+'.gif'+"?t="+Date.now()
|
data.fenshiURL='http://image.sinajs.cn/newchart/min/n/'+data.code+'.gif'+"?t="+Date.now()
|
||||||
}
|
}
|
||||||
}, 3500)
|
}, 3500)
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|
||||||
onBeforeUnmount(() => {
|
onBeforeUnmount(() => {
|
||||||
console.log(`the component is now unmounted.`)
|
// console.log(`the component is now unmounted.`)
|
||||||
clearInterval(ticker.value)
|
clearInterval(ticker.value)
|
||||||
})
|
})
|
||||||
|
|
||||||
@ -143,7 +143,7 @@ function AddStock(){
|
|||||||
|
|
||||||
|
|
||||||
function removeMonitor(code,name) {
|
function removeMonitor(code,name) {
|
||||||
console.log("removeMonitor",name,code)
|
// console.log("removeMonitor",name,code)
|
||||||
stocks.value.splice(stocks.value.indexOf(code),1)
|
stocks.value.splice(stocks.value.indexOf(code),1)
|
||||||
delete results.value[name]
|
delete results.value[name]
|
||||||
UnFollow(code).then(result => {
|
UnFollow(code).then(result => {
|
||||||
@ -152,9 +152,9 @@ function removeMonitor(code,name) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function getStockList(value){
|
function getStockList(value){
|
||||||
console.log("getStockList",value)
|
// console.log("getStockList",value)
|
||||||
let result;
|
let result;
|
||||||
result=stockList.value.filter(item => item.name.includes(data.name)||item.ts_code.includes(data.name))
|
result=stockList.value.filter(item => item.name.includes(value)||item.ts_code.includes(value))
|
||||||
options.value=result.map(item => {
|
options.value=result.map(item => {
|
||||||
return {
|
return {
|
||||||
label: item.name+" - "+item.ts_code,
|
label: item.name+" - "+item.ts_code,
|
||||||
@ -215,7 +215,7 @@ async function monitor() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
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()
|
||||||
@ -233,7 +233,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
|
formModel.value.volume=res[0].Volume
|
||||||
@ -314,6 +314,11 @@ function SendMessage(result){
|
|||||||
SendDingDingMessage(msg,result["股票代码"])
|
SendDingDingMessage(msg,result["股票代码"])
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//获取高度
|
||||||
|
function getHeight() {
|
||||||
|
return document.documentElement.clientHeight
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@ -362,19 +367,19 @@ function SendMessage(result){
|
|||||||
</n-card >
|
</n-card >
|
||||||
</n-gi>
|
</n-gi>
|
||||||
</n-grid>
|
</n-grid>
|
||||||
<n-affix :trigger-bottom="60" v-if="addBTN">
|
<n-affix :trigger-bottom="getHeight()/2-10" style="left:0">
|
||||||
<!-- <n-card :bordered="false">-->
|
<!-- <n-card :bordered="false">-->
|
||||||
<n-input-group>
|
<n-input-group>
|
||||||
|
|
||||||
<n-button type="info" @click="addBTN=false" >隐藏</n-button>
|
<n-button type="error" @click="addBTN=!addBTN" > <n-icon :component="Search"/> <n-text v-if="addBTN">隐藏</n-text></n-button>
|
||||||
<n-auto-complete v-model:value="data.name"
|
<n-auto-complete v-model:value="data.name" v-if="addBTN"
|
||||||
:input-props="{
|
:input-props="{
|
||||||
autocomplete: 'disabled',
|
autocomplete: 'disabled',
|
||||||
}"
|
}"
|
||||||
:options="options"
|
:options="options"
|
||||||
placeholder="请输入股票/指数名称或者代码"
|
placeholder="请输入股票/指数名称或者代码"
|
||||||
clearable @update-value="getStockList" :on-select="onSelect"/>
|
clearable @update-value="getStockList" :on-select="onSelect"/>
|
||||||
<n-button type="primary" @click="AddStock">
|
<n-button type="primary" @click="AddStock" v-if="addBTN">
|
||||||
<n-icon :component="Add"/> 关注该股票
|
<n-icon :component="Add"/> 关注该股票
|
||||||
</n-button>
|
</n-button>
|
||||||
</n-input-group>
|
</n-input-group>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user