From 46e52ef694b1f15423f2b66bc0467f623d59f895 Mon Sep 17 00:00:00 2001
From: wangyifeng <812766448@qq.com>
Date: Fri, 23 May 2025 11:33:10 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=B4=E6=8A=A4=E5=8E=86=E5=8F=B2=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E6=9D=A1=E4=BB=B6=E7=AD=9B=E9=80=89=E6=97=A5=E6=9C=9F?=
 =?UTF-8?q?=E6=A0=BC=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/config/headerMenuConfig.js              |   1 +
 src/views/historic-stock/size1920/index.vue | 143 ++++++++++----------
 2 files changed, 75 insertions(+), 69 deletions(-)

diff --git a/src/config/headerMenuConfig.js b/src/config/headerMenuConfig.js
index cd0324d..60c8f5f 100644
--- a/src/config/headerMenuConfig.js
+++ b/src/config/headerMenuConfig.js
@@ -65,6 +65,7 @@ export const useHeaderMenuConfig = () => {
         {
           label: t('header_menu.stock_information.historic_stock_price'),
           key: 'historic_stock_price',
+          href: '/historic-stock',
         },
         {
           label: t('header_menu.stock_information.investment_calculator'),
diff --git a/src/views/historic-stock/size1920/index.vue b/src/views/historic-stock/size1920/index.vue
index 83dc3e4..54a658f 100644
--- a/src/views/historic-stock/size1920/index.vue
+++ b/src/views/historic-stock/size1920/index.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="historic-data-container" style="margin-bottom: 100px">
+  <div class="historic-data-container" style="margin-bottom: 100px;">
     <img
       src="@/assets/image/historic-stock.png"
       alt="1"
-      style="max-width: 100%; margin: 0 auto"
+      style="max-width: 100%; margin: 0 auto;"
     />
 
     <div class="header mt-[20px]">
@@ -44,7 +44,8 @@
 
     <div class="pagination-container">
       <n-button class="page-btn prev-btn" @click="handlePrevPage">
-        <n-icon><chevron-back-outline /></n-icon> Previous
+        <n-icon><chevron-back-outline /></n-icon>
+        Previous
       </n-button>
 
       <div class="page-info">
@@ -58,36 +59,39 @@
           @select="handlePageSizeChange"
         >
           <n-button class="rows-dropdown">
-            {{ state.pageSize }} Rows <n-icon><chevron-down-outline /></n-icon>
+            {{ state.pageSize }} Rows
+            <n-icon><chevron-down-outline /></n-icon>
           </n-button>
         </n-dropdown>
 
         <n-button class="page-btn next-btn" @click="handleNextPage">
-          Next <n-icon><chevron-forward-outline /></n-icon>
+          Next
+          <n-icon><chevron-forward-outline /></n-icon>
         </n-button>
       </div>
     </div>
 
     <div class="back-to-top-link">
-      <a href="#" @click.prevent="scrollToTop"
-        >Back to Top <n-icon><arrow-up-outline /></n-icon
-      ></a>
+      <a href="#" @click.prevent="scrollToTop">
+        Back to Top
+        <n-icon><arrow-up-outline /></n-icon>
+      </a>
     </div>
   </div>
 </template>
 
 <script setup>
-import { NDataTable, NButton, NDropdown, NIcon } from "naive-ui";
-import { reactive, onMounted, h, computed } from "vue";
-import axios from "axios";
+import { NDataTable, NButton, NDropdown, NIcon } from 'naive-ui'
+import { reactive, onMounted, h, computed } from 'vue'
+import axios from 'axios'
 import {
   ChevronDownOutline,
   ChevronBackOutline,
   ChevronForwardOutline,
   ArrowUpOutline,
-} from "@vicons/ionicons5";
-import defaultTableData from "../data";
-console.log("defaultTableData", defaultTableData);
+} from '@vicons/ionicons5'
+import defaultTableData from '../data'
+console.log('defaultTableData', defaultTableData)
 
 // 数据筛选选项
 const periodOptions = [
@@ -110,11 +114,11 @@ const durationOptions = [
 
 // 分页大小选项
 const pageSizeOptions = [
-  { label: "50", key: 50 },
-  { label: "100", key: 100 },
-  { label: "500", key: 500 },
-  { label: "1000", key: 1000 },
-];
+  { label: '50', key: 50 },
+  { label: '100', key: 100 },
+  { label: '500', key: 500 },
+  { label: '1000', key: 1000 },
+]
 
 const state = reactive({
   selectedPeriod: 'Daily',
@@ -122,19 +126,19 @@ const state = reactive({
   tableData: [],
   currentPage: 1,
   pageSize: 50,
-});
+})
 
 // 计算总页数
 const totalPages = computed(() => {
-  return Math.ceil(state.tableData.length / state.pageSize);
-});
+  return Math.ceil(state.tableData.length / state.pageSize)
+})
 
 // 计算当前页的数据
 const paginatedData = computed(() => {
-  const start = (state.currentPage - 1) * state.pageSize;
-  const end = start + state.pageSize;
-  return state.tableData.slice(start, end);
-});
+  const start = (state.currentPage - 1) * state.pageSize
+  const end = start + state.pageSize
+  return state.tableData.slice(start, end)
+})
 
 // 表格列定义
 const columns = [
@@ -187,10 +191,19 @@ const columns = [
 
 // 处理下拉选项变更
 const handlePeriodChange = (key) => {
+  state.selectedPeriod = key
   if (key === 'Annual') {
     handleDurationChange('Full History')
+    return
+  }
+  if (key === 'Monthly') {
+    handleDurationChange('10 Years')
+    return
+  }
+  if (key === 'Quarterly') {
+    handleDurationChange('10 Years')
+    return
   }
-  state.selectedPeriod = key
   getPageData()
 }
 
@@ -202,30 +215,30 @@ const handleDurationChange = (key) => {
 // 处理分页
 const handlePrevPage = () => {
   if (state.currentPage === 1) {
-    return;
+    return
   }
-  state.currentPage--;
-};
+  state.currentPage--
+}
 
 const handleNextPage = () => {
   if (state.currentPage >= totalPages.value) {
-    return;
+    return
   }
-  state.currentPage++;
-};
+  state.currentPage++
+}
 
 const handlePageSizeChange = (size) => {
-  state.pageSize = size;
-  state.currentPage = 1; // 重置到第一页
-};
+  state.pageSize = size
+  state.currentPage = 1 // 重置到第一页
+}
 
 // 回到顶部
 const scrollToTop = () => {
   window.scrollTo({
     top: 0,
-    behavior: "smooth",
-  });
-};
+    behavior: 'smooth',
+  })
+}
 
 onMounted(() => {
   getPageDefaultData()
@@ -234,27 +247,27 @@ onMounted(() => {
 const getPageDefaultData = async () => {
   try {
     let url =
-      "https://stockanalysis.com/api/symbol/a/OTC-MINM/history?type=chart";
-    const res = await axios.get(url);
-    let originalData = res.data.data;
+      'https://stockanalysis.com/api/symbol/a/OTC-MINM/history?type=chart'
+    const res = await axios.get(url)
+    let originalData = res.data.data
 
     // 转换为日期格式："Nov 26, 2024"
     let calcApiData = originalData.map((item) => [
-      new Date(item[0]).toLocaleDateString("en-US", {
-        month: "short",
-        day: "numeric",
-        year: "numeric",
+      new Date(item[0]).toLocaleDateString('en-US', {
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric',
       }),
       item[1],
-    ]);
-    console.log("接口数据", calcApiData);
+    ])
+    console.log('接口数据', calcApiData)
 
     // 使用API数据更新defaultTableData中的close和adjClose值
     const updatedTableData = defaultTableData.map((tableItem) => {
       // 查找对应日期的API数据
       const matchedApiData = calcApiData.find(
-        (apiItem) => apiItem[0] === tableItem.date
-      );
+        (apiItem) => apiItem[0] === tableItem.date,
+      )
 
       if (matchedApiData) {
         // 更新close和adjClose值
@@ -262,12 +275,12 @@ const getPageDefaultData = async () => {
           ...tableItem,
           close: matchedApiData[1].toFixed(2),
           adjClose: matchedApiData[1].toFixed(2),
-        };
+        }
       }
-      return tableItem;
-    });
+      return tableItem
+    })
 
-    state.tableData = updatedTableData;
+    state.tableData = updatedTableData
   } catch (error) {
     console.error('获取数据失败', error)
   }
@@ -291,11 +304,16 @@ const getPageData = async () => {
   }
   let url = `https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=${state.selectedPeriod}&range=${range}`
   const res = await axios.get(url)
-  if(res.data.status === 200){
+  if (res.data.status === 200) {
     console.error(res.data.data)
+    // 转换为日期格式："Nov 26, 2024"
     let resultData = res.data.data.map((item) => {
       return {
-        date: item.t,
+        date: new Date(item.t).toLocaleDateString('en-US', {
+          month: 'short',
+          day: 'numeric',
+          year: 'numeric',
+        }),
         open: item.o != null ? Number(item.o).toFixed(2) : '',
         high: item.h != null ? Number(item.h).toFixed(2) : '',
         low: item.l != null ? Number(item.l).toFixed(2) : '',
@@ -307,19 +325,6 @@ const getPageData = async () => {
     })
     console.error(resultData, 'resultData')
     state.tableData = resultData
-  } else {
-    state.tableData = [
-      {
-        date: 'May 22, 2025',
-        open: '1.87',
-        high: '2.03',
-        low: '1.85',
-        close: '',
-        adjClose: '2.00',
-        change: '-2.44%',
-        volume: '2,103',
-      },
-    ]
   }
 }
 </script>