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>