fiee-official-website/src/views/historic-stock/size375/index.vue
2025-10-15 18:26:36 +08:00

923 lines
21 KiB
Vue

<template>
<div class="historic-data-container">
<div class="echarts-container">
<customEcharts></customEcharts>
</div>
<div class="header">
<!-- 标题区域 -->
<div class="title-section">
<div class="title-decoration"></div>
<div class="title-text">{{ t("historic_stock.title") }}</div>
</div>
</div>
<div class="filter-container">
<span class="range-label">{{ t("historic_stock.range") }}</span>
<div class="filter-row">
<div
v-for="option in durationOptions"
:key="option.key"
class="filter-option"
:class="{ active: state.selectedDuration === option.key }"
@click="handleDurationChange(option.key)"
>
{{ option.label }}
</div>
</div>
</div>
<!-- reports-table from annualreports -->
<div class="reports-table">
<div class="table-container">
<div class="table-header">
<div
class="column"
v-for="col in columns"
:key="col.key"
:style="{
width: col.width ? col.width + 'px' : 'auto',
flex: col.width ? '0 0 ' + col.width + 'px' : '1 0 116px',
'text-align': col.align,
}"
>
{{ col.title }}
</div>
</div>
<div class="reports-list">
<div
class="table-row"
v-for="(row, index) in paginatedData"
:key="index"
>
<div
class="column"
v-for="col in columns"
:key="col.key"
:style="{
width: col.width ? col.width + 'px' : 'auto',
flex: col.width ? '0 0 ' + col.width + 'px' : '1 0 116px',
'text-align': col.align,
}"
>
<span
v-if="col.key === 'change'"
:style="{
color:
parseFloat(row.change) < 0
? '#cf3050'
: parseFloat(row.change) > 0
? '#18a058'
: '',
}"
>
{{ row[col.key] }}
</span>
<span v-else>
{{ row[col.key] }}
</span>
</div>
</div>
</div>
</div>
</div>
<!-- pagination-container from annualreports -->
<div class="pagination-container">
<div class="pagination-controls">
<div class="pagination-buttons">
<button
class="page-btn prev-btn"
:disabled="state.currentPage === 1"
@click="goToPrevPage"
>
<svg width="5" height="9" viewBox="0 0 5 9" fill="none">
<path
d="M4 1L1 4.5L4 8"
stroke="#455363"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</button>
<template v-for="page in getVisiblePages()" :key="page">
<button
v-if="page !== '...'"
class="page-btn"
:class="{ active: page === state.currentPage }"
@click="goToPage(page)"
>
{{ page }}
</button>
<button v-else class="page-btn disabled" disabled>...</button>
</template>
<button
class="page-btn next-btn"
:disabled="state.currentPage === totalPages"
@click="goToNextPage"
>
<svg width="5" height="9" viewBox="0 0 5 9" fill="none">
<path
d="M1 1L4 4.5L1 8"
stroke="#455363"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</button>
</div>
<div class="page-size-selector" @click="togglePageSizeMenu">
<span>{{
t("historic_stock.pagination.perPage", { size: state.pageSize })
}}</span>
<svg width="10" height="5" viewBox="0 0 10 5" fill="none">
<path
d="M1 1L5 4L9 1"
stroke="#455363"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<div v-if="showPageSizeMenu" class="page-size-menu">
<div
v-for="size in [10, 50, 100, 500, 1000]"
:key="size"
class="page-size-option"
:class="{ active: state.pageSize === size }"
@click="handlePageSizeChange(size)"
>
{{ t("historic_stock.pagination.perPage", { size: size }) }}
</div>
</div>
</div>
</div>
</div>
<div class="pagination-info">
{{
t("historic_stock.pagination.displaying", {
start: displayRange.start,
end: displayRange.end,
total: state.tableData.length,
})
}}
</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 { NDropdown, NIcon } from "naive-ui";
import { reactive, onMounted, h, computed, ref, watch, onUnmounted } from "vue";
import axios from "axios";
import { ChevronDownOutline, ArrowUpOutline } from "@vicons/ionicons5";
import defaultTableData from "../data";
import customEcharts from "@/components/customEcharts/index.vue";
import { useI18n } from "vue-i18n";
const { t, locale } = useI18n();
// 数据筛选选项
const periodOptions = computed(() => [
{ label: t("historic_stock.daily"), key: "Daily" },
{ label: t("historic_stock.weekly"), key: "Weekly" },
{ label: t("historic_stock.monthly"), key: "Monthly" },
{ label: t("historic_stock.quarterly"), key: "Quarterly" },
{ label: t("historic_stock.annual"), key: "Annual" },
]);
const durationOptions = computed(() => [
{ label: t("historic_stock.duration.3_months"), key: "3 Months" },
{ label: t("historic_stock.duration.6_months"), key: "6 Months" },
{ label: t("historic_stock.duration.ytd"), key: "Year to Date" },
{ label: t("historic_stock.duration.1_year"), key: "1 Year" },
{ label: t("historic_stock.duration.5_years"), key: "5 Years" },
{ label: t("historic_stock.duration.10_years"), key: "10 Years" },
]);
// 分页大小选项
const pageSizeOptions = [
{ label: "10", key: 10 },
{ label: "50", key: 50 },
{ label: "100", key: 100 },
{ label: "500", key: 500 },
{ label: "1000", key: 1000 },
];
const state = reactive({
selectedPeriod: "Daily",
selectedDuration: "6 Months",
tableData: [],
currentPage: 1,
pageSize: 10,
gotoPage: 1,
});
const showPageSizeMenu = ref(false);
// 计算总页数
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 = computed(() => [
{
title: t("historic_stock.date"),
key: "date",
align: "left",
fixed: "left",
width: 152,
},
{
title: t("historic_stock.open"),
key: "open",
align: "center",
width: 116,
},
{
title: t("historic_stock.high"),
key: "high",
align: "center",
width: 116,
},
{
title: t("historic_stock.low"),
key: "low",
align: "center",
width: 116,
},
{
title: t("historic_stock.close"),
key: "close",
align: "center",
width: 116,
},
{
title: t("historic_stock.adj_close"),
key: "adjClose",
align: "center",
width: 116,
},
{
title: t("historic_stock.change"),
key: "change",
align: "center",
width: 116,
},
{
title: t("historic_stock.volume"),
key: "volume",
align: "center",
width: 116,
},
]);
// 处理下拉选项变更
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;
state.currentPage = 1;
getPageData();
};
const displayRange = computed(() => {
const start = (state.currentPage - 1) * state.pageSize + 1;
const end = Math.min(
state.currentPage * state.pageSize,
state.tableData.length
);
return { start, end };
});
const goToPage = (page) => {
if (page >= 1 && page <= totalPages.value) {
state.currentPage = page;
}
};
const goToPrevPage = () => {
if (state.currentPage > 1) {
state.currentPage--;
}
};
const goToNextPage = () => {
if (state.currentPage < totalPages.value) {
state.currentPage++;
}
};
// 处理分页
const handlePageSizeChange = (size) => {
state.pageSize = size;
state.currentPage = 1; // 重置到第一页
};
const handleGoto = () => {
const page = parseInt(state.gotoPage);
if (page >= 1 && page <= totalPages.value) {
state.currentPage = page;
}
};
const togglePageSizeMenu = () => {
showPageSizeMenu.value = !showPageSizeMenu.value;
};
const getVisiblePages = () => {
const total = totalPages.value;
if (total <= 4) {
const pages = [];
for (let i = 1; i <= total; i++) {
pages.push(i);
}
return pages;
}
return [1, 2, "...", total];
};
// 回到顶部
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(() => {
getPageData();
document.addEventListener("click", handleClickOutside);
});
onUnmounted(() => {
document.removeEventListener("click", handleClickOutside);
});
const handleClickOutside = (event) => {
if (!event.target.closest(".page-size-selector")) {
showPageSizeMenu.value = false;
}
};
watch(
() => state.pageSize,
() => {
state.currentPage = 1;
}
);
watch(
() => state.currentPage,
(newPage) => {
state.gotoPage = newPage;
}
);
const getPageDefaultData = async () => {
try {
let url =
"https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=Daily&range=3M";
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 = "";
let now = new Date();
const last = new Date(now);
last.setMonth(now.getMonth() - 6);
let fromDate = last;
let toDate =
now.getFullYear() +
"-" +
String(now.getMonth() + 1).padStart(2, "0") +
"-" +
String(now.getDate()).padStart(2, "0");
if (state.selectedDuration === "3 Months") {
range = "3M";
const last = new Date(now);
last.setMonth(now.getMonth() - 3);
fromDate = last;
} else if (state.selectedDuration === "6 Months") {
range = "6M";
const last = new Date(now);
last.setMonth(now.getMonth() - 6);
fromDate = last;
} else if (state.selectedDuration === "Year to Date") {
range = "YTD";
fromDate = new Date(now.getFullYear(), 0, 1);
} else if (state.selectedDuration === "1 Year") {
range = "1Y";
const last = new Date(now);
last.setFullYear(now.getFullYear() - 1);
fromDate = last;
} else if (state.selectedDuration === "5 Years") {
range = "5Y";
const last = new Date(now);
last.setFullYear(now.getFullYear() - 5);
fromDate = last;
} else if (state.selectedDuration === "10 Years") {
range = "10Y";
const last = new Date(now);
last.setFullYear(now.getFullYear() - 10);
fromDate = last;
} else if (state.selectedDuration === "Full History") {
range = "Max";
fromDate = new Date("2009-10-07");
}
let finalFromDate =
fromDate.getFullYear() +
"-" +
String(fromDate.getMonth() + 1).padStart(2, "0") +
"-" +
String(fromDate.getDate()).padStart(2, "0");
let url =
"https://common.szjixun.cn/api/stock/history/list?from=" +
finalFromDate +
"&to=" +
toDate;
const res = await axios.get(url);
if (res.status === 200) {
if (res.data.status === 0) {
// 转换为日期格式:"Nov 26, 2024"
let resultData = res.data.data.map((item) => {
return {
date: new Date(item.date.replace(/-/g, "/")).toLocaleDateString(
"en-US",
{
month: "short",
day: "numeric",
year: "numeric",
}
),
open: item.open != null ? Number(item.open).toFixed(2) : "",
high: item.high != null ? Number(item.high).toFixed(2) : "",
low: item.low != null ? Number(item.low).toFixed(2) : "",
close: item.close != null ? Number(item.close).toFixed(2) : "",
adjClose: item.close != null ? Number(item.close).toFixed(2) : "",
change:
item.changePercent != null
? Number(item.changePercent).toFixed(2) + "%"
: "",
volume: item.volume,
};
});
state.tableData = resultData;
}
}
};
</script>
<style scoped lang="scss">
.historic-data-container {
width: 343 * 5.12px;
margin: 0 auto;
.header {
display: flex;
justify-content: space-between;
align-items: center;
.title {
font-size: 40 * 2.5 * 5.12px;
font-weight: bold;
margin: 0;
}
}
.filter-container {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8 * 5.12px;
padding: 0 16 * 5.12px;
margin-bottom: 32 * 5.12px;
.range-label {
font-family: "PingFang SC", sans-serif;
font-weight: 400;
font-size: 14 * 5.12px;
line-height: 1.4;
letter-spacing: 0.48 * 5.12px;
color: #455363;
}
.filter-row {
width: 311 * 5.12px;
display: flex;
flex-wrap: wrap;
column-gap: 16 * 5.12px;
row-gap: 8 * 5.12px;
}
.filter-option {
display: flex;
align-items: center;
justify-content: center;
height: 34 * 5.12px;
border-radius: 3 * 5.12px;
background-color: #efefef;
cursor: pointer;
font-family: "PingFang SC", sans-serif;
font-weight: 400;
font-size: 14 * 5.12px;
line-height: 1.4;
color: #000000;
transition: all 0.2s ease;
width: 93 * 5.12px;
&:hover {
background-color: #e0e0e0;
}
&.active {
background-color: #ff7bac;
color: #ffffff;
}
}
}
.back-to-top-link {
display: flex;
justify-content: center;
margin-top: 16 * 5.12px;
a {
display: flex;
align-items: center;
gap: 5 * 5.12px;
color: #2563eb;
font-size: 20 * 5.12px;
font-weight: bold;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
}
.reports-table {
width: 100%;
background: #ffffff;
border-radius: 16 * 5.12px;
box-shadow: 0 * 5.12px 3 * 5.12px 14 * 5.12px 0 * 5.12px rgba(0, 0, 0, 0.16);
padding: 16 * 5.12px;
}
.table-container {
width: 100%;
overflow-x: auto;
}
.table-container::-webkit-scrollbar {
height: 8 * 5.12px;
}
.table-container::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4 * 5.12px;
}
.table-container::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 4 * 5.12px;
}
.table-container::-webkit-scrollbar-thumb:hover {
background: #fff0f5;
cursor: pointer;
}
.column {
font-family: "PingFang SC", sans-serif;
font-weight: 400;
font-size: 14 * 5.12px;
line-height: 1.4;
letter-spacing: 0.48 * 5.12px;
color: #455363;
padding: 16 * 5.12px;
position: relative;
font-variant-numeric: tabular-nums; /* 让数字等宽对齐 */
}
.table-header {
display: flex;
border-radius: 8 * 5.12px;
margin-bottom: 4 * 5.12px;
align-items: center;
position: sticky;
top: 0;
z-index: 2;
.column {
background: #fff0f5;
font-family: "PingFang SC", sans-serif;
font-weight: 500;
font-size: 14 * 5.12px;
line-height: 1.4;
letter-spacing: 0.48 * 5.12px;
color: #000000;
}
}
.table-row {
display: flex;
align-items: center;
position: relative;
border-radius: 8 * 5.12px;
&:hover .column {
background: #fff8fb;
}
// &:last-child {
// border-bottom: none;
// }
&:nth-child(even) {
margin: 4 * 5.12px 0;
}
}
.reports-list {
display: flex;
flex-direction: column;
gap: 4 * 5.12px;
}
.table-row .column:not(:last-child)::after {
content: "";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
height: 40 * 5.12px;
border-right: 1 * 5.12px dashed #e0e0e6;
}
.table-header .column:first-child {
border-radius: 8 * 5.12px 0 0 8 * 5.12px;
}
.table-header .column:last-child,
.table-row .column:last-child {
border-radius: 0 8 * 5.12px 8 * 5.12px 0;
}
.table-row .column:first-child {
background: #ffffff;
}
.table-row:hover .column:first-child {
background: #fff8fb;
}
// 分页器样式
.pagination-container {
display: flex;
align-items: center;
margin-top: 16 * 5.12px;
justify-content: flex-end;
padding: 0 4 * 5.12px;
}
.pagination-info {
font-family: "PingFang SC", sans-serif;
font-weight: 400;
font-size: 14 * 5.12px;
line-height: 1.4;
color: #455363;
text-align: right;
margin-top: 16 * 5.12px;
margin-bottom: 16 * 5.12px;
padding: 0 4 * 5.12px;
}
.pagination-controls {
display: flex;
align-items: center;
gap: 8 * 5.12px;
}
.pagination-buttons {
display: flex;
align-items: center;
gap: 8 * 5.12px;
}
.page-btn {
display: flex;
align-items: center;
justify-content: center;
width: 28 * 5.12px;
height: 28 * 5.12px;
border: 1 * 5.12px solid #e0e0e6;
border-radius: 3 * 5.12px;
background: #ffffff;
font-family: "PingFang SC", sans-serif;
font-weight: 400;
font-size: 14 * 5.12px;
line-height: 1.4;
color: #455363;
cursor: pointer;
transition: all 0.2s ease;
&:hover:not(:disabled) {
border-color: #ff7bac;
color: #ff7bac;
}
&.active {
border-color: #ff7bac;
color: #ff7bac;
background: #fff0f5;
}
&:disabled {
cursor: not-allowed;
opacity: 0.5;
}
&.disabled {
cursor: not-allowed;
opacity: 0.5;
}
}
.page-size-selector {
position: relative;
display: flex;
align-items: center;
gap: 18 * 5.12px;
padding: 4 * 5.12px 12 * 5.12px;
height: 28 * 5.12px;
border: 1 * 5.12px solid #e0e0e6;
border-radius: 3 * 5.12px;
background: #ffffff;
font-family: "PingFang SC", sans-serif;
font-weight: 400;
font-size: 14 * 5.12px;
line-height: 1.4;
color: #455363;
cursor: pointer;
&:hover {
border-color: #ff7bac;
}
}
.page-size-menu {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background: #ffffff;
border: 1 * 5.12px solid #e0e0e6;
border-radius: 3 * 5.12px;
box-shadow: 0 2 * 5.12px 8 * 5.12px rgba(0, 0, 0, 0.1);
z-index: 1000;
margin-bottom: 5 * 5.12px;
}
.page-size-option {
padding: 8 * 5.12px 12 * 5.12px;
font-family: "PingFang SC", sans-serif;
font-weight: 400;
font-size: 14 * 5.12px;
line-height: 1.4;
color: #455363;
cursor: pointer;
transition: background-color 0.2s ease;
&:hover {
background: #fff0f5;
}
&.active {
background: #fff0f5;
color: #ff7bac;
}
}
.goto-section {
display: flex;
align-items: center;
gap: 8 * 5.12px;
font-family: "PingFang SC", sans-serif;
font-weight: 400;
font-size: 14 * 5.12px;
line-height: 1.4;
color: #455363;
margin-right: 16 * 5.12px;
}
.goto-input {
width: 60 * 5.12px;
height: 28 * 5.12px;
padding: 4 * 5.12px 12 * 5.12px;
border: 1 * 5.12px solid #e0e0e6;
border-radius: 3 * 5.12px;
font-family: "PingFang SC", sans-serif;
font-weight: 400;
font-size: 14 * 5.12px;
line-height: 1.4;
color: #455363;
text-align: center;
&:focus {
outline: none;
border-color: #ff7bac;
}
}
.title-section {
display: flex;
flex-direction: column;
gap: 16 * 5.12px;
margin-bottom: 32 * 5.12px;
margin-top: 43 * 5.12px;
padding: 0 16 * 5.12px;
}
.title-decoration {
width: 58 * 5.12px;
height: 7 * 5.12px;
background: #ff7bac;
margin: auto 0;
margin-top: 0;
}
.title-text {
font-family: "PingFang SC", sans-serif;
font-weight: 500;
font-size: 24 * 5.12px;
line-height: 1.4;
letter-spacing: 0.03em;
color: #000000;
}
</style>