431 lines
9.8 KiB
Vue
431 lines
9.8 KiB
Vue
<template>
|
|
<div class="historic-data-container" style="margin-bottom: 40px">
|
|
<img
|
|
src="@/assets/image/historic-stock-375.png"
|
|
alt="1"
|
|
style="max-width: 100%; margin: 0 auto"
|
|
/>
|
|
|
|
<div class="header mt-[80px]">
|
|
<div class="title">Historical Data</div>
|
|
<div class="filter-container">
|
|
<n-dropdown
|
|
trigger="click"
|
|
:options="periodOptions"
|
|
@select="handlePeriodChange"
|
|
:value="state.selectedPeriod"
|
|
>
|
|
<n-button>
|
|
{{ state.selectedPeriod }}
|
|
<n-icon><chevron-down-outline /></n-icon>
|
|
</n-button>
|
|
</n-dropdown>
|
|
|
|
<n-dropdown
|
|
trigger="click"
|
|
:options="durationOptions"
|
|
@select="handleDurationChange"
|
|
:value="state.selectedDuration"
|
|
>
|
|
<n-button>
|
|
{{ state.selectedDuration }}
|
|
<n-icon><chevron-down-outline /></n-icon>
|
|
</n-button>
|
|
</n-dropdown>
|
|
</div>
|
|
</div>
|
|
|
|
<n-data-table
|
|
:columns="columns"
|
|
:data="paginatedData"
|
|
:bordered="false"
|
|
:single-line="false"
|
|
:scroll-x="600"
|
|
/>
|
|
|
|
<div class="pagination-container">
|
|
<n-button class="page-btn prev-btn" @click="handlePrevPage">
|
|
<n-icon><chevron-back-outline /></n-icon>
|
|
</n-button>
|
|
|
|
<div class="page-info mr-[40px]">
|
|
{{ state.currentPage }} of {{ totalPages }}
|
|
</div>
|
|
|
|
<div class="right-controls">
|
|
<n-dropdown
|
|
trigger="click"
|
|
:options="pageSizeOptions"
|
|
@select="handlePageSizeChange"
|
|
>
|
|
<n-button class="rows-dropdown">
|
|
{{ state.pageSize }} Rows
|
|
<n-icon><chevron-down-outline /></n-icon>
|
|
</n-button>
|
|
</n-dropdown>
|
|
|
|
<n-button class="page-btn next-btn" @click="handleNextPage">
|
|
<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>
|
|
</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 {
|
|
ChevronDownOutline,
|
|
ChevronBackOutline,
|
|
ChevronForwardOutline,
|
|
ArrowUpOutline,
|
|
} from "@vicons/ionicons5";
|
|
import defaultTableData from "../data";
|
|
console.log("defaultTableData", defaultTableData);
|
|
|
|
// 数据筛选选项
|
|
const periodOptions = [
|
|
{ label: "Daily", key: "Daily" },
|
|
{ label: "Weekly", key: "Weekly" },
|
|
{ label: "Monthly", key: "Monthly" },
|
|
{ label: "Quarterly", key: "Quarterly" },
|
|
{ label: "Annual", key: "Annual" },
|
|
];
|
|
|
|
const durationOptions = [
|
|
{ label: "3 Months", key: "3 Months" },
|
|
{ label: "6 Months", key: "6 Months" },
|
|
{ label: "Year to Date", key: "Year to Date" },
|
|
{ label: "1 Year", key: "1 Year" },
|
|
{ label: "5 Years", key: "5 Years" },
|
|
{ label: "10 Years", key: "10 Years" },
|
|
{ label: "Full History", key: "Full History", disabled: true },
|
|
];
|
|
|
|
// 分页大小选项
|
|
const pageSizeOptions = [
|
|
{ label: "50", key: 50 },
|
|
{ label: "100", key: 100 },
|
|
{ label: "500", key: 500 },
|
|
{ label: "1000", key: 1000 },
|
|
];
|
|
|
|
const state = reactive({
|
|
selectedPeriod: "Daily",
|
|
selectedDuration: "3 Months",
|
|
tableData: [],
|
|
currentPage: 1,
|
|
pageSize: 50,
|
|
});
|
|
|
|
// 计算总页数
|
|
const totalPages = computed(() => {
|
|
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 columns = [
|
|
{
|
|
width: 100,
|
|
title: "Date",
|
|
key: "date",
|
|
align: "left",
|
|
fixed: "left",
|
|
},
|
|
{
|
|
title: "Open",
|
|
key: "open",
|
|
align: "center",
|
|
fixed: "left",
|
|
},
|
|
{
|
|
title: "High",
|
|
key: "high",
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "Low",
|
|
key: "low",
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "Close",
|
|
key: "close",
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "Adj. Close",
|
|
key: "adjClose",
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "Change",
|
|
key: "change",
|
|
align: "center",
|
|
render(row) {
|
|
const value = parseFloat(row.change);
|
|
const color = value < 0 ? "#ff4d4f" : value > 0 ? "#52c41a" : "";
|
|
return h("span", { style: { color } }, row.change);
|
|
},
|
|
},
|
|
{
|
|
title: "Volume",
|
|
key: "volume",
|
|
align: "center",
|
|
},
|
|
];
|
|
|
|
// 处理下拉选项变更
|
|
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;
|
|
}
|
|
getPageData();
|
|
};
|
|
|
|
const handleDurationChange = (key) => {
|
|
state.selectedDuration = key;
|
|
getPageData();
|
|
};
|
|
|
|
// 处理分页
|
|
const handlePrevPage = () => {
|
|
if (state.currentPage === 1) {
|
|
return;
|
|
}
|
|
state.currentPage--;
|
|
};
|
|
|
|
const handleNextPage = () => {
|
|
if (state.currentPage >= totalPages.value) {
|
|
return;
|
|
}
|
|
state.currentPage++;
|
|
};
|
|
|
|
const handlePageSizeChange = (size) => {
|
|
state.pageSize = size;
|
|
state.currentPage = 1; // 重置到第一页
|
|
};
|
|
|
|
// 回到顶部
|
|
const scrollToTop = () => {
|
|
// 尝试多种方法
|
|
// 1. 使用document.body
|
|
document.body.scrollTop = 0;
|
|
// 2. 使用document.documentElement (HTML元素)
|
|
document.documentElement.scrollTop = 0;
|
|
// 3. 使用scrollIntoView
|
|
document.querySelector(".historic-data-container").scrollIntoView({
|
|
behavior: "smooth",
|
|
block: "start",
|
|
});
|
|
};
|
|
onMounted(() => {
|
|
getPageDefaultData();
|
|
});
|
|
|
|
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;
|
|
|
|
// 转换为日期格式："Nov 26, 2024"
|
|
let calcApiData = originalData.map((item) => [
|
|
new Date(item[0]).toLocaleDateString("en-US", {
|
|
month: "short",
|
|
day: "numeric",
|
|
year: "numeric",
|
|
}),
|
|
item[1],
|
|
]);
|
|
console.log("接口数据", calcApiData);
|
|
|
|
// 使用API数据更新defaultTableData中的close和adjClose值
|
|
const updatedTableData = defaultTableData.map((tableItem) => {
|
|
// 查找对应日期的API数据
|
|
const matchedApiData = calcApiData.find(
|
|
(apiItem) => apiItem[0] === tableItem.date
|
|
);
|
|
|
|
if (matchedApiData) {
|
|
// 更新close和adjClose值
|
|
return {
|
|
...tableItem,
|
|
close: matchedApiData[1].toFixed(2),
|
|
adjClose: matchedApiData[1].toFixed(2),
|
|
};
|
|
}
|
|
return tableItem;
|
|
});
|
|
|
|
state.tableData = updatedTableData;
|
|
} catch (error) {
|
|
console.error("获取数据失败", error);
|
|
}
|
|
};
|
|
const getPageData = async () => {
|
|
let range = "";
|
|
if (state.selectedDuration === "3 Months") {
|
|
range = "3M";
|
|
} else if (state.selectedDuration === "6 Months") {
|
|
range = "6M";
|
|
} else if (state.selectedDuration === "Year to Date") {
|
|
range = "YTD";
|
|
} else if (state.selectedDuration === "1 Year") {
|
|
range = "1Y";
|
|
} else if (state.selectedDuration === "5 Years") {
|
|
range = "5Y";
|
|
} else if (state.selectedDuration === "10 Years") {
|
|
range = "10Y";
|
|
} else if (state.selectedDuration === "Full History") {
|
|
range = "Max";
|
|
}
|
|
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) {
|
|
// 转换为日期格式："Nov 26, 2024"
|
|
let resultData = res.data.data.map((item) => {
|
|
return {
|
|
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) : "",
|
|
close: item.c != null ? Number(item.c).toFixed(2) : "",
|
|
adjClose: item.a != null ? Number(item.a).toFixed(2) : "",
|
|
change: item.ch != null ? Number(item.ch).toFixed(2) + "%" : "",
|
|
volume: item.v,
|
|
};
|
|
});
|
|
state.tableData = resultData;
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.historic-data-container {
|
|
padding: 80px;
|
|
|
|
.header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
|
|
.title {
|
|
font-size: 80px;
|
|
font-weight: bold;
|
|
margin: 0;
|
|
}
|
|
|
|
.filter-container {
|
|
display: flex;
|
|
gap: 40px;
|
|
}
|
|
}
|
|
|
|
.pagination-container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: 60px;
|
|
padding: 10px 16px;
|
|
border-radius: 4px;
|
|
background-color: #ffffff;
|
|
|
|
.page-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
padding: 6px 12px;
|
|
font-size: 92px;
|
|
|
|
&.prev-btn {
|
|
margin-right: auto;
|
|
}
|
|
|
|
&.next-btn {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
&:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
|
|
.page-info {
|
|
font-size: 72px;
|
|
color: #374151;
|
|
}
|
|
|
|
.right-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.rows-dropdown {
|
|
font-size: 72px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.back-to-top-link {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 56px;
|
|
|
|
a {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
color: #2563eb;
|
|
font-size: 92px;
|
|
font-weight: bold;
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
|
|
:deep(.n-data-table) {
|
|
.n-data-table-td {
|
|
padding: 12px 8px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|