From 3ba18e8ef230afafe16d69c99b4656419ffedc65 Mon Sep 17 00:00:00 2001
From: ArvinLovegood <arvinlovegood@163.com>
Date: Tue, 8 Jul 2025 10:50:04 +0800
Subject: [PATCH] =?UTF-8?q?feat(stock):=E4=BC=98=E5=8C=96=E8=82=A1?=
 =?UTF-8?q?=E7=A5=A8=E8=BF=B7=E4=BD=A0=E5=9B=BE=E5=88=B7=E6=96=B0=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在 Stock 组件中添加 lastPrice 属性，传递当前价格给 StockSparkLine 组件
- 在 StockSparkLine 组件中接收 lastPrice 属性，并使用它来更新 K 线图数据
- 优化 StockSparkLine 组件的渲染逻辑，使用 onMounted 和 watchEffect
---
 frontend/src/components/stock.vue          |  2 +-
 frontend/src/components/stockSparkLine.vue | 28 ++++++++++++++--------
 2 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/stock.vue b/frontend/src/components/stock.vue
index b282f38..eac9759 100644
--- a/frontend/src/components/stock.vue
+++ b/frontend/src/components/stock.vue
@@ -1815,7 +1815,7 @@ function searchStockReport(stockCode) {
                 </n-text>
               </n-gi>
               <n-gi :span="6">
-                <stock-spark-line :open-price="result['昨日收盘价']" :stock-code="result['股票代码']" :stock-name="result['股票名称']" ></stock-spark-line>
+                <stock-spark-line :last-price="result['当前价格']" :open-price="result['昨日收盘价']" :stock-code="result['股票代码']" :stock-name="result['股票名称']" ></stock-spark-line>
               </n-gi>
             </n-grid>
             <n-grid :cols="2" :y-gap="4" :x-gap="4">
diff --git a/frontend/src/components/stockSparkLine.vue b/frontend/src/components/stockSparkLine.vue
index 29a5fe8..78f9a55 100644
--- a/frontend/src/components/stockSparkLine.vue
+++ b/frontend/src/components/stockSparkLine.vue
@@ -1,8 +1,8 @@
 <script setup>
-import {onMounted,onBeforeMount, ref} from "vue";
+import {onMounted, onBeforeMount, ref, watchEffect} from "vue";
 import * as echarts from 'echarts';
 import {GetStockMinutePriceLineData} from "../../wailsjs/go/main/App"; // 如果您使用多个组件，请将此样式导入放在您的主文件中
-const {stockCode,stockName,openPrice,darkTheme} = defineProps({
+const {stockCode,stockName,lastPrice,openPrice,darkTheme} = defineProps({
   stockCode: {
     type: String,
     default: ""
@@ -11,6 +11,10 @@ const {stockCode,stockName,openPrice,darkTheme} = defineProps({
     type: String,
     default: ""
   },
+  lastPrice: {
+    type: Number,
+    default: 0
+  },
   openPrice: {
     type: Number,
     default: 0
@@ -24,6 +28,7 @@ const {stockCode,stockName,openPrice,darkTheme} = defineProps({
 const chartRef=ref();
 
 function setChartData(chart) {
+  //console.log("setChartData")
   GetStockMinutePriceLineData(stockCode, stockName).then(result => {
     //console.log("GetStockMinutePriceLineData",result)
     const priceData = result.priceData
@@ -31,7 +36,6 @@ function setChartData(chart) {
     let price = []
     let min = 0
     let max = 0
-    let lastPrice = priceData[priceData.length - 1].price
     for (let i = 0; i < priceData.length; i++) {
       category.push(priceData[i].time)
       price.push(priceData[i].price)
@@ -112,16 +116,20 @@ function setChartData(chart) {
     chart.setOption(option);
   })
 }
+const chart =ref( null)
 
 onMounted(() => {
-
-  const chart = echarts.init( document.getElementById('sparkLine'+stockCode));
-  setChartData(chart);
-
-  // setInterval(() => {
-  //   setChartData(chart);
-  // }, 1000 * 5 );
+  chart.value = echarts.init( document.getElementById('sparkLine'+stockCode));
+  setChartData(chart.value);
 })
+
+
+watchEffect(() => {
+  //console.log(stockName,'lastPrice变化为:', lastPrice)
+  setChartData(chart.value);
+})
+
+
 </script>
 <template>
 <div style="height: 20px;width: 100%"  :id="'sparkLine'+stockCode">