fix secfilings
This commit is contained in:
张 元山
parent
f55a24ea63
commit
81de59b9eb
@ -1,15 +0,0 @@
|
||||
export const fileList = [
|
||||
{
|
||||
filingDate: '2016-05-29',
|
||||
form: '10-K',
|
||||
description: 'Report of foreign issuer rules 13a-16 and 15d-16 of the Securities Exchange Act',
|
||||
link: 'https://www.sec.gov/Archives/edgar/data/1000000/0001000000-19-000001.txt',
|
||||
dataFiles:[
|
||||
{
|
||||
description: 'Report of foreign',
|
||||
link: 'https://www.sec.gov/Archives/edgar/data/1000000/0001000000-19-000001.txt',
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
]
|
||||
@ -1,168 +1,309 @@
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<div class="financials-container">
|
||||
<div class="sec-filings-container">
|
||||
<!-- 标题 -->
|
||||
<div class="financials-title">
|
||||
{{ t("financialinformation.secfilings.title") }}
|
||||
<div class="page-title">SEC Filings</div>
|
||||
|
||||
<!-- 筛选器 -->
|
||||
<div class="filters">
|
||||
<div class="filter-group">
|
||||
<label class="filter-label">Filing year</label>
|
||||
<n-select
|
||||
v-model:value="state.selectedYear"
|
||||
:options="state.yearOptions"
|
||||
placeholder="- Any -"
|
||||
style="width: 150px"
|
||||
clearable
|
||||
@update:value="handleYearChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 公司财务概览 -->
|
||||
<section class="section">
|
||||
<div class="section-title">
|
||||
{{ t("financialinformation.secfilings.overview.title") }}
|
||||
<div class="filter-group">
|
||||
<label class="filter-label">Items per page:</label>
|
||||
<n-select
|
||||
v-model:value="state.pageSize"
|
||||
:options="state.pageSizeOptions"
|
||||
style="width: 150px"
|
||||
@update:value="handlePageSizeChange"
|
||||
/>
|
||||
</div>
|
||||
<p
|
||||
class="overview-text"
|
||||
v-html="t('financialinformation.secfilings.overview.desc')"
|
||||
></p>
|
||||
</section>
|
||||
|
||||
<!-- 年度报告 -->
|
||||
<section class="section">
|
||||
<div class="section-title">
|
||||
{{ t("financialinformation.secfilings.annual_reports.title") }}
|
||||
</div>
|
||||
|
||||
<!-- 报告表格 -->
|
||||
<div class="reports-table">
|
||||
<div class="table-header">
|
||||
<div class="column file-name">
|
||||
{{
|
||||
t("financialinformation.secfilings.annual_reports.file_name")
|
||||
}}
|
||||
</div>
|
||||
<div class="column date">
|
||||
{{ t("financialinformation.secfilings.annual_reports.date") }}
|
||||
</div>
|
||||
<div class="column download"></div>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="table-container">
|
||||
<n-data-table
|
||||
:columns="columns"
|
||||
:data="paginatedData"
|
||||
:pagination="false"
|
||||
:bordered="false"
|
||||
:size="'medium'"
|
||||
:row-key="(row) => row.index"
|
||||
/>
|
||||
|
||||
<!-- 报告列表 -->
|
||||
<div class="reports-list">
|
||||
<div
|
||||
class="table-row"
|
||||
v-for="(report, index) in annualReports"
|
||||
:key="index"
|
||||
<!-- 分页器 -->
|
||||
<div class="pagination-container">
|
||||
<n-pagination
|
||||
v-model:page="state.currentPage"
|
||||
v-model:page-size="state.pageSize"
|
||||
show-size-picker
|
||||
show-quick-jumper
|
||||
:item-count="filteredData.length"
|
||||
:page-sizes="[10, 25, 50]"
|
||||
@update:page="handlePageChange"
|
||||
@update:page-size="handlePageSizeChange"
|
||||
>
|
||||
<div class="column file-name">{{ report.fileName }}</div>
|
||||
<div class="column date">{{ report.date }}</div>
|
||||
<div class="column download">
|
||||
<a :href="report.downloadUrl" class="download-link">{{
|
||||
t("financialinformation.secfilings.annual_reports.view")
|
||||
}}</a>
|
||||
<template #prev>
|
||||
<span>‹ Previous</span>
|
||||
</template>
|
||||
<template #next>
|
||||
<span>Next ›</span>
|
||||
</template>
|
||||
</n-pagination>
|
||||
|
||||
<div class="pagination-info">
|
||||
Displaying {{ startIndex }} - {{ endIndex }} of
|
||||
{{ filteredData.length }} results
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { reactive, computed, h, onMounted } from "vue";
|
||||
import { NSelect, NDataTable, NPagination, NButton, NIcon } from "naive-ui";
|
||||
import { useI18n } from "vue-i18n";
|
||||
|
||||
import { useRouter } from "vue-router";
|
||||
import { fileList } from "@/dict/secFiles.js";
|
||||
const { t } = useI18n();
|
||||
// 年度报告数据
|
||||
const annualReports = ref([
|
||||
const router = useRouter();
|
||||
import iconLink from "@/assets/image/icon/icon-link.png";
|
||||
// 使用 reactive 管理所有状态
|
||||
const state = reactive({
|
||||
selectedYear: null,
|
||||
pageSize: 10,
|
||||
currentPage: 1,
|
||||
|
||||
// 年份选项
|
||||
yearOptions: [
|
||||
{ label: "- Any -", value: null },
|
||||
{ label: "2025", value: 2025 },
|
||||
{ label: "2024", value: 2024 },
|
||||
{ label: "2023", value: 2023 },
|
||||
{ label: "2022", value: 2022 },
|
||||
{ label: "2021", value: 2021 },
|
||||
{ label: "2020", value: 2020 },
|
||||
{ label: "2019", value: 2019 },
|
||||
{ label: "2018", value: 2018 },
|
||||
],
|
||||
|
||||
// 每页条数选项
|
||||
pageSizeOptions: [
|
||||
{ label: "10", value: 10 },
|
||||
{ label: "25", value: 25 },
|
||||
{ label: "50", value: 50 },
|
||||
],
|
||||
|
||||
// SEC文件数据
|
||||
secFilingsData: [],
|
||||
});
|
||||
onMounted(() => {
|
||||
// 月份名称映射
|
||||
const monthNames = [
|
||||
"Jan",
|
||||
"Feb",
|
||||
"Mar",
|
||||
"Apr",
|
||||
"May",
|
||||
"Jun",
|
||||
"Jul",
|
||||
"Aug",
|
||||
"Sep",
|
||||
"Oct",
|
||||
"Nov",
|
||||
"Dec",
|
||||
];
|
||||
|
||||
state.secFilingsData = fileList.map((item, index) => {
|
||||
// 从 filingDate 中提取年份，支持两种格式：
|
||||
// 1. "Feb 04, 2019" 格式（英文）
|
||||
// 2. "2025-10-24" 格式（ISO格式）转换为英文格式
|
||||
let year = null;
|
||||
let formattedDate = item.filingDate;
|
||||
|
||||
if (item.filingDate) {
|
||||
if (item.filingDate.includes(", ")) {
|
||||
// "Feb 04, 2019" 格式，已经是英文格式，保持不变
|
||||
year = parseInt(item.filingDate.split(", ")[1]);
|
||||
} else if (item.filingDate.includes("-")) {
|
||||
// "2025-10-24" 格式，转换为 "Oct 24, 2025" 英文格式
|
||||
const dateParts = item.filingDate.split("-");
|
||||
const yearPart = parseInt(dateParts[0]);
|
||||
const monthPart = parseInt(dateParts[1]);
|
||||
const dayPart = parseInt(dateParts[2]);
|
||||
|
||||
year = yearPart;
|
||||
const monthName = monthNames[monthPart - 1]; // 月份从1开始，数组从0开始
|
||||
const dayFormatted = dayPart.toString().padStart(2, "0");
|
||||
formattedDate = `${monthName} ${dayFormatted}, ${yearPart}`;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
index: index,
|
||||
...item,
|
||||
formattedDate: formattedDate, // 更新为统一的英文格式
|
||||
year: year,
|
||||
};
|
||||
});
|
||||
});
|
||||
// 表格列定义
|
||||
const columns = [
|
||||
{
|
||||
fileName: "2024 Annual Report",
|
||||
date: "April 10, 2025",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912625002538/fieeinc_10k.htm",
|
||||
title: "Filing Date",
|
||||
key: "formattedDate",
|
||||
sorter: "default",
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
fileName: "2023 Annual Report",
|
||||
date: "April 12, 2024",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912624002449/miniminc_10k.htm",
|
||||
title: "Form",
|
||||
key: "form",
|
||||
sorter: "default",
|
||||
width: 120,
|
||||
render: (row) => {
|
||||
return h(
|
||||
"a",
|
||||
{
|
||||
href: "javascript:void(0)",
|
||||
style: {
|
||||
color: "#0078d7",
|
||||
textDecoration: "none",
|
||||
cursor: "pointer",
|
||||
},
|
||||
onClick: (e) => {
|
||||
e.preventDefault();
|
||||
router.push({
|
||||
path: "/secfilingsDefail",
|
||||
query: {
|
||||
filingDate: row.filingDate,
|
||||
},
|
||||
});
|
||||
},
|
||||
onMouseover: (e) => {
|
||||
e.target.style.textDecoration = "underline";
|
||||
},
|
||||
onMouseout: (e) => {
|
||||
e.target.style.textDecoration = "none";
|
||||
},
|
||||
},
|
||||
row.form
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
fileName: "2022 Annual Report",
|
||||
date: "March 31, 2023",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315223010335/form10-k.htm",
|
||||
title: "Description",
|
||||
key: "description",
|
||||
sorter: "default",
|
||||
ellipsis: {
|
||||
tooltip: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
fileName: "2021 Annual Report",
|
||||
date: "March 31, 2022",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315222008365/form10-k.htm",
|
||||
},
|
||||
title: "View",
|
||||
key: "view",
|
||||
width: 150,
|
||||
render: (row) => {
|
||||
return h(
|
||||
"div",
|
||||
{
|
||||
fileName: "2020 Annual Report",
|
||||
date: "April 13, 2021",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000165495421004133/zmtp_10k.htm",
|
||||
style: {
|
||||
display: "flex",
|
||||
gap: "8px",
|
||||
},
|
||||
},
|
||||
[
|
||||
h(
|
||||
"a",
|
||||
{
|
||||
fileName: "2019 Annual Report",
|
||||
date: "April 15, 2020",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000165495420004069/zmtp_10k.htm",
|
||||
href: row.fileLink,
|
||||
style: {
|
||||
color: "#0078d7",
|
||||
textDecoration: "none",
|
||||
fontSize: "12px",
|
||||
},
|
||||
{
|
||||
fileName: "2018 Annual Report",
|
||||
date: "April 1, 2019",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000165495419003878/zmtp_10k.htm",
|
||||
onMouseover: (e) => {
|
||||
e.target.style.textDecoration = "underline";
|
||||
},
|
||||
{
|
||||
fileName: "2017 Annual Report",
|
||||
date: "March 30, 2018",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000165495418003402/zmtp_10k.htm",
|
||||
onMouseout: (e) => {
|
||||
e.target.style.textDecoration = "none";
|
||||
},
|
||||
{
|
||||
fileName: "2016 Annual Report",
|
||||
date: "March 22, 2017",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000165495417002279/zmtp_10k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2015 Annual Report",
|
||||
date: "March 15, 2016",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000135448816006596/zmtp_10k.htm",
|
||||
h("img", {
|
||||
src: iconLink,
|
||||
alt: "link",
|
||||
style: {
|
||||
width: "24px",
|
||||
height: "24px",
|
||||
},
|
||||
{
|
||||
fileName: "2014 Annual Report",
|
||||
date: "March 24, 2015",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000135448815001308/zmtp_10k.htm",
|
||||
})
|
||||
),
|
||||
]
|
||||
);
|
||||
},
|
||||
{
|
||||
fileName: "2013 Annual Report",
|
||||
date: "March 31, 2014",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000135448814001518/zmpt_10k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2012 Annual Report",
|
||||
date: "March 29, 2013",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000135448813001584/zmtp_10k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2011 Annual Report",
|
||||
date: "March 30, 2012",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000135448812001548/zoom_10k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2010 Annual Report",
|
||||
date: "March 29, 2011",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000135448811000969/zmtp_10k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2009 Annual Report",
|
||||
date: "March 31, 2010",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000135448810001043/zmtp_10k.htm",
|
||||
},
|
||||
]);
|
||||
];
|
||||
|
||||
// 筛选后的数据
|
||||
const filteredData = computed(() => {
|
||||
let data = state.secFilingsData;
|
||||
|
||||
if (state.selectedYear) {
|
||||
data = data.filter((item) => item.year === state.selectedYear);
|
||||
}
|
||||
|
||||
return data;
|
||||
});
|
||||
|
||||
// 分页数据
|
||||
const paginatedData = computed(() => {
|
||||
const start = (state.currentPage - 1) * state.pageSize;
|
||||
const end = start + state.pageSize;
|
||||
return filteredData.value.slice(start, end);
|
||||
});
|
||||
|
||||
// 总页数
|
||||
const totalPages = computed(() => {
|
||||
return Math.ceil(filteredData.value.length / state.pageSize);
|
||||
});
|
||||
|
||||
// 当前页起始索引
|
||||
const startIndex = computed(() => {
|
||||
return (state.currentPage - 1) * state.pageSize + 1;
|
||||
});
|
||||
|
||||
// 当前页结束索引
|
||||
const endIndex = computed(() => {
|
||||
const end = state.currentPage * state.pageSize;
|
||||
return Math.min(end, filteredData.value.length);
|
||||
});
|
||||
|
||||
// 处理年份变化
|
||||
const handleYearChange = (value) => {
|
||||
state.selectedYear = value;
|
||||
state.currentPage = 1;
|
||||
};
|
||||
|
||||
// 处理页码变化
|
||||
const handlePageChange = (page) => {
|
||||
state.currentPage = page;
|
||||
};
|
||||
|
||||
// 处理每页条数变化
|
||||
const handlePageSizeChange = (size) => {
|
||||
state.pageSize = size;
|
||||
state.currentPage = 1;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@ -171,117 +312,103 @@ const annualReports = ref([
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.financials-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.financials-title {
|
||||
.sec-filings-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 40px;
|
||||
text-align: center;
|
||||
margin-bottom: 60px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
margin-bottom: 20px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.overview-text {
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
.filters {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
margin-bottom: 30px;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
.filter-group {
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 10px 20px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
border-bottom: 2px solid transparent;
|
||||
.filter-label {
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-bottom: 2px solid #333;
|
||||
.table-container {
|
||||
.n-data-table {
|
||||
--n-th-color: #f5f5f5;
|
||||
--n-th-text-color: #333;
|
||||
--n-td-color: #fff;
|
||||
--n-border-color: #e0e0e0;
|
||||
}
|
||||
}
|
||||
|
||||
.reports-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
.pagination-container {
|
||||
display: flex;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid #ccc;
|
||||
font-weight: bold;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
display: flex;
|
||||
padding: 15px 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.reports-list {
|
||||
// max-height: 600px;
|
||||
// overflow-y: auto;
|
||||
}
|
||||
.column {
|
||||
&.file-name {
|
||||
width: 25%;
|
||||
}
|
||||
&.date {
|
||||
width: 25%;
|
||||
margin-top: 20px;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
&.download {
|
||||
width: 25%;
|
||||
text-align: right;
|
||||
margin-right: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.pdf-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.download-link {
|
||||
color: #0078d7;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.sec-text {
|
||||
.pagination-info {
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: #f00;
|
||||
text-decoration: none;
|
||||
:deep(.n-data-table-th) {
|
||||
background-color: #9e9e9e !important;
|
||||
color: white !important;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
:deep(.n-data-table-td) {
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
:deep(.n-data-table-tr:hover .n-data-table-td) {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
:deep(.n-select) {
|
||||
.n-base-selection {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.n-pagination) {
|
||||
.n-pagination-item {
|
||||
border: 1px solid #ccc;
|
||||
|
||||
&.n-pagination-item--active {
|
||||
background-color: #969696;
|
||||
border-color: #969696;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.n-pagination-quick-jumper {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.n-pagination-sizes {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -37,7 +37,7 @@
|
||||
:pagination="false"
|
||||
:bordered="false"
|
||||
:size="'medium'"
|
||||
:row-key="(row) => row.filingDate"
|
||||
:row-key="(row) => row.index"
|
||||
/>
|
||||
|
||||
<!-- 分页器 -->
|
||||
@ -75,7 +75,7 @@ import { reactive, computed, h, onMounted } from "vue";
|
||||
import { NSelect, NDataTable, NPagination, NButton, NIcon } from "naive-ui";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useRouter } from "vue-router";
|
||||
import { fileList } from "@/dict/secTestData.js";
|
||||
import { fileList } from "@/dict/secFiles.js";
|
||||
const { t } = useI18n();
|
||||
const router = useRouter();
|
||||
import iconLink from "@/assets/image/icon/icon-link.png";
|
||||
@ -125,7 +125,7 @@ onMounted(() => {
|
||||
"Dec",
|
||||
];
|
||||
|
||||
state.secFilingsData = fileList.map((item) => {
|
||||
state.secFilingsData = fileList.map((item, index) => {
|
||||
// 从 filingDate 中提取年份，支持两种格式：
|
||||
// 1. "Feb 04, 2019" 格式（英文）
|
||||
// 2. "2025-10-24" 格式（ISO格式）转换为英文格式
|
||||
@ -151,6 +151,7 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
return {
|
||||
index: index,
|
||||
...item,
|
||||
formattedDate: formattedDate, // 更新为统一的英文格式
|
||||
year: year,
|
||||
@ -162,12 +163,13 @@ const columns = [
|
||||
{
|
||||
title: "Filing Date",
|
||||
key: "formattedDate",
|
||||
sorter: true,
|
||||
sorter: "default",
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: "Form",
|
||||
key: "form",
|
||||
sorter: "default",
|
||||
width: 120,
|
||||
render: (row) => {
|
||||
return h(
|
||||
@ -202,6 +204,7 @@ const columns = [
|
||||
{
|
||||
title: "Description",
|
||||
key: "description",
|
||||
sorter: "default",
|
||||
ellipsis: {
|
||||
tooltip: true,
|
||||
},
|
||||
@ -223,7 +226,7 @@ const columns = [
|
||||
h(
|
||||
"a",
|
||||
{
|
||||
href: row.link,
|
||||
href: row.fileLink,
|
||||
style: {
|
||||
color: "#0078d7",
|
||||
textDecoration: "none",
|
||||
@ -316,7 +319,6 @@ const handlePageSizeChange = (size) => {
|
||||
.sec-filings-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
background: white;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
|
||||
@ -1,286 +1,414 @@
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<div class="financials-container">
|
||||
<div class="sec-filings-container">
|
||||
<!-- 标题 -->
|
||||
<div class="financials-title">
|
||||
{{ t("financialinformation.secfilings.title") }}
|
||||
<div class="page-title">SEC Filings</div>
|
||||
|
||||
<!-- 筛选器 -->
|
||||
<div class="filters">
|
||||
<div class="filter-group">
|
||||
<label class="filter-label">Filing year</label>
|
||||
<n-select
|
||||
v-model:value="state.selectedYear"
|
||||
:options="state.yearOptions"
|
||||
placeholder="- Any -"
|
||||
style="width: 150px"
|
||||
clearable
|
||||
@update:value="handleYearChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 公司财务概览 -->
|
||||
<section class="section">
|
||||
<div class="section-title">
|
||||
{{ t("financialinformation.secfilings.overview.title") }}
|
||||
<div class="filter-group">
|
||||
<label class="filter-label">Items per page:</label>
|
||||
<n-select
|
||||
v-model:value="state.pageSize"
|
||||
:options="state.pageSizeOptions"
|
||||
style="width: 150px"
|
||||
@update:value="handlePageSizeChange"
|
||||
/>
|
||||
</div>
|
||||
<p
|
||||
class="overview-text"
|
||||
v-html="t('financialinformation.secfilings.overview.desc')"
|
||||
></p>
|
||||
</section>
|
||||
|
||||
<!-- 年度报告 -->
|
||||
<section class="section">
|
||||
<div class="section-title">
|
||||
{{ t("financialinformation.secfilings.annual_reports.title") }}
|
||||
</div>
|
||||
|
||||
<!-- 报告表格 -->
|
||||
<div class="reports-table">
|
||||
<div class="table-header">
|
||||
<div class="column file-name">
|
||||
{{
|
||||
t("financialinformation.secfilings.annual_reports.file_name")
|
||||
}}
|
||||
</div>
|
||||
<div class="column date">
|
||||
{{ t("financialinformation.secfilings.annual_reports.date") }}
|
||||
</div>
|
||||
<div class="column download"></div>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="table-container">
|
||||
<n-data-table
|
||||
:columns="columns"
|
||||
:data="paginatedData"
|
||||
:pagination="false"
|
||||
:row-key="(row) => row.index"
|
||||
:bordered="false"
|
||||
:single-line="false"
|
||||
:scroll-x="600"
|
||||
/>
|
||||
|
||||
<!-- 报告列表 -->
|
||||
<div class="reports-list">
|
||||
<div
|
||||
class="table-row"
|
||||
v-for="(report, index) in annualReports"
|
||||
:key="index"
|
||||
<!-- 分页器 -->
|
||||
<div class="pagination-container mt-[40px]">
|
||||
<n-pagination
|
||||
v-model:page="state.currentPage"
|
||||
v-model:page-size="state.pageSize"
|
||||
show-size-picker
|
||||
:item-count="filteredData.length"
|
||||
:page-sizes="[10, 25, 50]"
|
||||
@update:page="handlePageChange"
|
||||
@update:page-size="handlePageSizeChange"
|
||||
>
|
||||
<div class="column file-name">{{ report.fileName }}</div>
|
||||
<div class="column date">{{ report.date }}</div>
|
||||
<div class="column download">
|
||||
<a :href="report.downloadUrl" class="download-link">{{
|
||||
t("financialinformation.secfilings.annual_reports.view")
|
||||
}}</a>
|
||||
<template #prev>
|
||||
<span>‹</span>
|
||||
</template>
|
||||
<template #next>
|
||||
<span> ›</span>
|
||||
</template>
|
||||
</n-pagination>
|
||||
|
||||
<div class="pagination-info mt-[40px]">
|
||||
Displaying {{ startIndex }} - {{ endIndex }} of
|
||||
{{ filteredData.length }} results
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { reactive, computed, h, onMounted } from "vue";
|
||||
import { NSelect, NDataTable, NPagination, NButton, NIcon } from "naive-ui";
|
||||
import { useI18n } from "vue-i18n";
|
||||
|
||||
import { useRouter } from "vue-router";
|
||||
import { fileList } from "@/dict/secFiles.js";
|
||||
const { t } = useI18n();
|
||||
const router = useRouter();
|
||||
import iconLink from "@/assets/image/icon/icon-link.png";
|
||||
// 使用 reactive 管理所有状态
|
||||
const state = reactive({
|
||||
selectedYear: null,
|
||||
pageSize: 10,
|
||||
currentPage: 1,
|
||||
|
||||
// 年度报告数据
|
||||
const annualReports = ref([
|
||||
// 年份选项
|
||||
yearOptions: [
|
||||
{ label: "- Any -", value: null },
|
||||
{ label: "2025", value: 2025 },
|
||||
{ label: "2024", value: 2024 },
|
||||
{ label: "2023", value: 2023 },
|
||||
{ label: "2022", value: 2022 },
|
||||
{ label: "2021", value: 2021 },
|
||||
{ label: "2020", value: 2020 },
|
||||
{ label: "2019", value: 2019 },
|
||||
{ label: "2018", value: 2018 },
|
||||
],
|
||||
|
||||
// 每页条数选项
|
||||
pageSizeOptions: [
|
||||
{ label: "10", value: 10 },
|
||||
{ label: "25", value: 25 },
|
||||
{ label: "50", value: 50 },
|
||||
],
|
||||
|
||||
// SEC文件数据
|
||||
secFilingsData: [],
|
||||
});
|
||||
onMounted(() => {
|
||||
// 月份名称映射
|
||||
const monthNames = [
|
||||
"Jan",
|
||||
"Feb",
|
||||
"Mar",
|
||||
"Apr",
|
||||
"May",
|
||||
"Jun",
|
||||
"Jul",
|
||||
"Aug",
|
||||
"Sep",
|
||||
"Oct",
|
||||
"Nov",
|
||||
"Dec",
|
||||
];
|
||||
|
||||
state.secFilingsData = fileList.map((item, index) => {
|
||||
// 从 filingDate 中提取年份，支持两种格式：
|
||||
// 1. "Feb 04, 2019" 格式（英文）
|
||||
// 2. "2025-10-24" 格式（ISO格式）转换为英文格式
|
||||
let year = null;
|
||||
let formattedDate = item.filingDate;
|
||||
|
||||
if (item.filingDate) {
|
||||
if (item.filingDate.includes(", ")) {
|
||||
// "Feb 04, 2019" 格式，已经是英文格式，保持不变
|
||||
year = parseInt(item.filingDate.split(", ")[1]);
|
||||
} else if (item.filingDate.includes("-")) {
|
||||
// "2025-10-24" 格式，转换为 "Oct 24, 2025" 英文格式
|
||||
const dateParts = item.filingDate.split("-");
|
||||
const yearPart = parseInt(dateParts[0]);
|
||||
const monthPart = parseInt(dateParts[1]);
|
||||
const dayPart = parseInt(dateParts[2]);
|
||||
|
||||
year = yearPart;
|
||||
const monthName = monthNames[monthPart - 1]; // 月份从1开始，数组从0开始
|
||||
const dayFormatted = dayPart.toString().padStart(2, "0");
|
||||
formattedDate = `${monthName} ${dayFormatted}, ${yearPart}`;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
index: index,
|
||||
...item,
|
||||
formattedDate: formattedDate, // 更新为统一的英文格式
|
||||
year: year,
|
||||
};
|
||||
});
|
||||
});
|
||||
// 表格列定义
|
||||
const columns = [
|
||||
{
|
||||
fileName: "2024 Annual Report",
|
||||
date: "April 10, 2025",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912625002538/fieeinc_10k.htm",
|
||||
title: "Filing Date",
|
||||
key: "formattedDate",
|
||||
sorter: "default",
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
fileName: "2023 Annual Report",
|
||||
date: "April 12, 2024",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912624002449/miniminc_10k.htm",
|
||||
title: "Form",
|
||||
key: "form",
|
||||
sorter: "default",
|
||||
width: 120,
|
||||
render: (row) => {
|
||||
return h(
|
||||
"a",
|
||||
{
|
||||
href: "javascript:void(0)",
|
||||
style: {
|
||||
color: "#0078d7",
|
||||
textDecoration: "none",
|
||||
cursor: "pointer",
|
||||
},
|
||||
onClick: (e) => {
|
||||
e.preventDefault();
|
||||
router.push({
|
||||
path: "/secfilingsDefail",
|
||||
query: {
|
||||
filingDate: row.filingDate,
|
||||
},
|
||||
});
|
||||
},
|
||||
onMouseover: (e) => {
|
||||
e.target.style.textDecoration = "underline";
|
||||
},
|
||||
onMouseout: (e) => {
|
||||
e.target.style.textDecoration = "none";
|
||||
},
|
||||
},
|
||||
row.form
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
fileName: "2022 Annual Report",
|
||||
date: "March 31, 2023",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315223010335/form10-k.htm",
|
||||
title: "Description",
|
||||
key: "description",
|
||||
sorter: "default",
|
||||
ellipsis: {
|
||||
tooltip: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
fileName: "2021 Annual Report",
|
||||
date: "March 31, 2022",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315222008365/form10-k.htm",
|
||||
},
|
||||
title: "View",
|
||||
key: "view",
|
||||
width: 80,
|
||||
render: (row) => {
|
||||
return h(
|
||||
"div",
|
||||
{
|
||||
fileName: "2020 Annual Report",
|
||||
date: "April 13, 2021",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000165495421004133/zmtp_10k.htm",
|
||||
style: {
|
||||
display: "flex",
|
||||
gap: "8px",
|
||||
},
|
||||
},
|
||||
[
|
||||
h(
|
||||
"a",
|
||||
{
|
||||
fileName: "2019 Annual Report",
|
||||
date: "April 15, 2020",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000165495420004069/zmtp_10k.htm",
|
||||
href: row.fileLink,
|
||||
style: {
|
||||
color: "#0078d7",
|
||||
textDecoration: "none",
|
||||
fontSize: "12px",
|
||||
},
|
||||
{
|
||||
fileName: "2018 Annual Report",
|
||||
date: "April 1, 2019",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000165495419003878/zmtp_10k.htm",
|
||||
onMouseover: (e) => {
|
||||
e.target.style.textDecoration = "underline";
|
||||
},
|
||||
{
|
||||
fileName: "2017 Annual Report",
|
||||
date: "March 30, 2018",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000165495418003402/zmtp_10k.htm",
|
||||
onMouseout: (e) => {
|
||||
e.target.style.textDecoration = "none";
|
||||
},
|
||||
{
|
||||
fileName: "2016 Annual Report",
|
||||
date: "March 22, 2017",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000165495417002279/zmtp_10k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2015 Annual Report",
|
||||
date: "March 15, 2016",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000135448816006596/zmtp_10k.htm",
|
||||
h("img", {
|
||||
src: iconLink,
|
||||
alt: "link",
|
||||
style: {
|
||||
width: "24px",
|
||||
height: "24px",
|
||||
},
|
||||
{
|
||||
fileName: "2014 Annual Report",
|
||||
date: "March 24, 2015",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000135448815001308/zmtp_10k.htm",
|
||||
})
|
||||
),
|
||||
]
|
||||
);
|
||||
},
|
||||
{
|
||||
fileName: "2013 Annual Report",
|
||||
date: "March 31, 2014",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000135448814001518/zmpt_10k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2012 Annual Report",
|
||||
date: "March 29, 2013",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000135448813001584/zmtp_10k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2011 Annual Report",
|
||||
date: "March 30, 2012",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000135448812001548/zoom_10k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2010 Annual Report",
|
||||
date: "March 29, 2011",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000135448811000969/zmtp_10k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2009 Annual Report",
|
||||
date: "March 31, 2010",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000135448810001043/zmtp_10k.htm",
|
||||
},
|
||||
]);
|
||||
];
|
||||
|
||||
// 筛选后的数据
|
||||
const filteredData = computed(() => {
|
||||
let data = state.secFilingsData;
|
||||
|
||||
if (state.selectedYear) {
|
||||
data = data.filter((item) => item.year === state.selectedYear);
|
||||
}
|
||||
|
||||
return data;
|
||||
});
|
||||
|
||||
// 分页数据
|
||||
const paginatedData = computed(() => {
|
||||
const start = (state.currentPage - 1) * state.pageSize;
|
||||
const end = start + state.pageSize;
|
||||
return filteredData.value.slice(start, end);
|
||||
});
|
||||
|
||||
// 总页数
|
||||
const totalPages = computed(() => {
|
||||
return Math.ceil(filteredData.value.length / state.pageSize);
|
||||
});
|
||||
|
||||
// 当前页起始索引
|
||||
const startIndex = computed(() => {
|
||||
return (state.currentPage - 1) * state.pageSize + 1;
|
||||
});
|
||||
|
||||
// 当前页结束索引
|
||||
const endIndex = computed(() => {
|
||||
const end = state.currentPage * state.pageSize;
|
||||
return Math.min(end, filteredData.value.length);
|
||||
});
|
||||
|
||||
// 处理年份变化
|
||||
const handleYearChange = (value) => {
|
||||
state.selectedYear = value;
|
||||
state.currentPage = 1;
|
||||
};
|
||||
|
||||
// 处理页码变化
|
||||
const handlePageChange = (page) => {
|
||||
state.currentPage = page;
|
||||
};
|
||||
|
||||
// 处理每页条数变化
|
||||
const handlePageSizeChange = (size) => {
|
||||
state.pageSize = size;
|
||||
state.currentPage = 1;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.page-container {
|
||||
background-image: url("@/assets/image/bg-375.png");
|
||||
background-image: url("@/assets/image/bg.png");
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
}
|
||||
.financials-container {
|
||||
|
||||
.sec-filings-container {
|
||||
margin: 0 auto;
|
||||
padding: 80px;
|
||||
}
|
||||
|
||||
.financials-title {
|
||||
.page-title {
|
||||
font-size: 113px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
margin-bottom: 60px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 92px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.overview-text {
|
||||
font-size: 72px;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
.filters {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
margin-bottom: 30px;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
.filter-group {
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
flex-direction: column;
|
||||
gap: 26px;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 10px 20px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
border-bottom: 2px solid transparent;
|
||||
.filter-label {
|
||||
font-size: 92px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-bottom: 2px solid #333;
|
||||
.table-container {
|
||||
.n-data-table {
|
||||
--n-th-color: #f5f5f5;
|
||||
--n-th-text-color: #333;
|
||||
--n-td-color: #fff;
|
||||
--n-border-color: #e0e0e0;
|
||||
}
|
||||
}
|
||||
|
||||
.reports-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
.pagination-container {
|
||||
display: flex;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid #ccc;
|
||||
font-weight: bold;
|
||||
flex-wrap: wrap; // 添加这行
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
display: flex;
|
||||
padding: 45px 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.reports-list {
|
||||
// max-height: 600px;
|
||||
// overflow-y: auto;
|
||||
}
|
||||
.column {
|
||||
&.file-name {
|
||||
width: 35%;
|
||||
}
|
||||
&.date {
|
||||
width: 35%;
|
||||
}
|
||||
&.download {
|
||||
margin-right: 100px;
|
||||
}
|
||||
margin-top: 60px;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.pdf-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.download-link {
|
||||
color: #0078d7;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.sec-text {
|
||||
.pagination-info {
|
||||
font-size: 72px;
|
||||
line-height: 1.6;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: #f00;
|
||||
text-decoration: none;
|
||||
:deep(.n-data-table-th) {
|
||||
background-color: #9e9e9e !important;
|
||||
color: white !important;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
:deep(.n-data-table-td) {
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
:deep(.n-data-table-tr:hover .n-data-table-td) {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
:deep(.n-select) {
|
||||
.n-base-selection {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.n-pagination) {
|
||||
.n-pagination-item {
|
||||
border: 1px solid #ccc;
|
||||
|
||||
&.n-pagination-item--active {
|
||||
background-color: #969696;
|
||||
border-color: #969696;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.n-pagination-quick-jumper {
|
||||
font-size: 72px;
|
||||
}
|
||||
|
||||
.n-pagination-sizes {
|
||||
font-size: 72px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,168 +1,309 @@
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<div class="financials-container">
|
||||
<div class="sec-filings-container">
|
||||
<!-- 标题 -->
|
||||
<div class="financials-title">
|
||||
{{ t("financialinformation.secfilings.title") }}
|
||||
<div class="page-title">SEC Filings</div>
|
||||
|
||||
<!-- 筛选器 -->
|
||||
<div class="filters">
|
||||
<div class="filter-group">
|
||||
<label class="filter-label">Filing year</label>
|
||||
<n-select
|
||||
v-model:value="state.selectedYear"
|
||||
:options="state.yearOptions"
|
||||
placeholder="- Any -"
|
||||
style="width: 150px"
|
||||
clearable
|
||||
@update:value="handleYearChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 公司财务概览 -->
|
||||
<section class="section">
|
||||
<div class="section-title">
|
||||
{{ t("financialinformation.secfilings.overview.title") }}
|
||||
<div class="filter-group">
|
||||
<label class="filter-label">Items per page:</label>
|
||||
<n-select
|
||||
v-model:value="state.pageSize"
|
||||
:options="state.pageSizeOptions"
|
||||
style="width: 150px"
|
||||
@update:value="handlePageSizeChange"
|
||||
/>
|
||||
</div>
|
||||
<p
|
||||
class="overview-text"
|
||||
v-html="t('financialinformation.secfilings.overview.desc')"
|
||||
></p>
|
||||
</section>
|
||||
|
||||
<!-- 年度报告 -->
|
||||
<section class="section">
|
||||
<div class="section-title">
|
||||
{{ t("financialinformation.secfilings.annual_reports.title") }}
|
||||
</div>
|
||||
|
||||
<!-- 报告表格 -->
|
||||
<div class="reports-table">
|
||||
<div class="table-header">
|
||||
<div class="column file-name">
|
||||
{{
|
||||
t("financialinformation.secfilings.annual_reports.file_name")
|
||||
}}
|
||||
</div>
|
||||
<div class="column date">
|
||||
{{ t("financialinformation.secfilings.annual_reports.date") }}
|
||||
</div>
|
||||
<div class="column download"></div>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="table-container">
|
||||
<n-data-table
|
||||
:columns="columns"
|
||||
:data="paginatedData"
|
||||
:pagination="false"
|
||||
:bordered="false"
|
||||
:size="'medium'"
|
||||
:row-key="(row) => row.index"
|
||||
/>
|
||||
|
||||
<!-- 报告列表 -->
|
||||
<div class="reports-list">
|
||||
<div
|
||||
class="table-row"
|
||||
v-for="(report, index) in annualReports"
|
||||
:key="index"
|
||||
<!-- 分页器 -->
|
||||
<div class="pagination-container">
|
||||
<n-pagination
|
||||
class="w-full"
|
||||
v-model:page="state.currentPage"
|
||||
v-model:page-size="state.pageSize"
|
||||
show-size-picker
|
||||
show-quick-jumper
|
||||
:item-count="filteredData.length"
|
||||
:page-sizes="[10, 25, 50]"
|
||||
@update:page="handlePageChange"
|
||||
@update:page-size="handlePageSizeChange"
|
||||
>
|
||||
<div class="column file-name">{{ report.fileName }}</div>
|
||||
<div class="column date">{{ report.date }}</div>
|
||||
<div class="column download">
|
||||
<a :href="report.downloadUrl" class="download-link">{{
|
||||
t("financialinformation.secfilings.annual_reports.view")
|
||||
}}</a>
|
||||
<template #prev>
|
||||
<span>‹ Previous</span>
|
||||
</template>
|
||||
<template #next>
|
||||
<span>Next ›</span>
|
||||
</template>
|
||||
</n-pagination>
|
||||
|
||||
<div class="pagination-info w-full mt-[20px]">
|
||||
Displaying {{ startIndex }} - {{ endIndex }} of
|
||||
{{ filteredData.length }} results
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { reactive, computed, h, onMounted } from "vue";
|
||||
import { NSelect, NDataTable, NPagination, NButton, NIcon } from "naive-ui";
|
||||
import { useI18n } from "vue-i18n";
|
||||
|
||||
import { useRouter } from "vue-router";
|
||||
import { fileList } from "@/dict/secFiles.js";
|
||||
const { t } = useI18n();
|
||||
// 年度报告数据
|
||||
const annualReports = ref([
|
||||
const router = useRouter();
|
||||
import iconLink from "@/assets/image/icon/icon-link.png";
|
||||
// 使用 reactive 管理所有状态
|
||||
const state = reactive({
|
||||
selectedYear: null,
|
||||
pageSize: 10,
|
||||
currentPage: 1,
|
||||
|
||||
// 年份选项
|
||||
yearOptions: [
|
||||
{ label: "- Any -", value: null },
|
||||
{ label: "2025", value: 2025 },
|
||||
{ label: "2024", value: 2024 },
|
||||
{ label: "2023", value: 2023 },
|
||||
{ label: "2022", value: 2022 },
|
||||
{ label: "2021", value: 2021 },
|
||||
{ label: "2020", value: 2020 },
|
||||
{ label: "2019", value: 2019 },
|
||||
{ label: "2018", value: 2018 },
|
||||
],
|
||||
|
||||
// 每页条数选项
|
||||
pageSizeOptions: [
|
||||
{ label: "10", value: 10 },
|
||||
{ label: "25", value: 25 },
|
||||
{ label: "50", value: 50 },
|
||||
],
|
||||
|
||||
// SEC文件数据
|
||||
secFilingsData: [],
|
||||
});
|
||||
onMounted(() => {
|
||||
// 月份名称映射
|
||||
const monthNames = [
|
||||
"Jan",
|
||||
"Feb",
|
||||
"Mar",
|
||||
"Apr",
|
||||
"May",
|
||||
"Jun",
|
||||
"Jul",
|
||||
"Aug",
|
||||
"Sep",
|
||||
"Oct",
|
||||
"Nov",
|
||||
"Dec",
|
||||
];
|
||||
|
||||
state.secFilingsData = fileList.map((item, index) => {
|
||||
// 从 filingDate 中提取年份，支持两种格式：
|
||||
// 1. "Feb 04, 2019" 格式（英文）
|
||||
// 2. "2025-10-24" 格式（ISO格式）转换为英文格式
|
||||
let year = null;
|
||||
let formattedDate = item.filingDate;
|
||||
|
||||
if (item.filingDate) {
|
||||
if (item.filingDate.includes(", ")) {
|
||||
// "Feb 04, 2019" 格式，已经是英文格式，保持不变
|
||||
year = parseInt(item.filingDate.split(", ")[1]);
|
||||
} else if (item.filingDate.includes("-")) {
|
||||
// "2025-10-24" 格式，转换为 "Oct 24, 2025" 英文格式
|
||||
const dateParts = item.filingDate.split("-");
|
||||
const yearPart = parseInt(dateParts[0]);
|
||||
const monthPart = parseInt(dateParts[1]);
|
||||
const dayPart = parseInt(dateParts[2]);
|
||||
|
||||
year = yearPart;
|
||||
const monthName = monthNames[monthPart - 1]; // 月份从1开始，数组从0开始
|
||||
const dayFormatted = dayPart.toString().padStart(2, "0");
|
||||
formattedDate = `${monthName} ${dayFormatted}, ${yearPart}`;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
index: index,
|
||||
...item,
|
||||
formattedDate: formattedDate, // 更新为统一的英文格式
|
||||
year: year,
|
||||
};
|
||||
});
|
||||
});
|
||||
// 表格列定义
|
||||
const columns = [
|
||||
{
|
||||
fileName: "2024 Annual Report",
|
||||
date: "April 10, 2025",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912625002538/fieeinc_10k.htm",
|
||||
title: "Filing Date",
|
||||
key: "formattedDate",
|
||||
sorter: "default",
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
fileName: "2023 Annual Report",
|
||||
date: "April 12, 2024",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912624002449/miniminc_10k.htm",
|
||||
title: "Form",
|
||||
key: "form",
|
||||
sorter: "default",
|
||||
width: 120,
|
||||
render: (row) => {
|
||||
return h(
|
||||
"a",
|
||||
{
|
||||
href: "javascript:void(0)",
|
||||
style: {
|
||||
color: "#0078d7",
|
||||
textDecoration: "none",
|
||||
cursor: "pointer",
|
||||
},
|
||||
onClick: (e) => {
|
||||
e.preventDefault();
|
||||
router.push({
|
||||
path: "/secfilingsDefail",
|
||||
query: {
|
||||
filingDate: row.filingDate,
|
||||
},
|
||||
});
|
||||
},
|
||||
onMouseover: (e) => {
|
||||
e.target.style.textDecoration = "underline";
|
||||
},
|
||||
onMouseout: (e) => {
|
||||
e.target.style.textDecoration = "none";
|
||||
},
|
||||
},
|
||||
row.form
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
fileName: "2022 Annual Report",
|
||||
date: "March 31, 2023",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315223010335/form10-k.htm",
|
||||
title: "Description",
|
||||
key: "description",
|
||||
sorter: "default",
|
||||
ellipsis: {
|
||||
tooltip: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
fileName: "2021 Annual Report",
|
||||
date: "March 31, 2022",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315222008365/form10-k.htm",
|
||||
},
|
||||
title: "View",
|
||||
key: "view",
|
||||
render: (row) => {
|
||||
return h(
|
||||
"div",
|
||||
{
|
||||
fileName: "2020 Annual Report",
|
||||
date: "April 13, 2021",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000165495421004133/zmtp_10k.htm",
|
||||
style: {
|
||||
display: "flex",
|
||||
gap: "8px",
|
||||
},
|
||||
},
|
||||
[
|
||||
h(
|
||||
"a",
|
||||
{
|
||||
fileName: "2019 Annual Report",
|
||||
date: "April 15, 2020",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000165495420004069/zmtp_10k.htm",
|
||||
href: row.fileLink,
|
||||
style: {
|
||||
color: "#0078d7",
|
||||
textDecoration: "none",
|
||||
fontSize: "12px",
|
||||
},
|
||||
{
|
||||
fileName: "2018 Annual Report",
|
||||
date: "April 1, 2019",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000165495419003878/zmtp_10k.htm",
|
||||
onMouseover: (e) => {
|
||||
e.target.style.textDecoration = "underline";
|
||||
},
|
||||
{
|
||||
fileName: "2017 Annual Report",
|
||||
date: "March 30, 2018",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000165495418003402/zmtp_10k.htm",
|
||||
onMouseout: (e) => {
|
||||
e.target.style.textDecoration = "none";
|
||||
},
|
||||
{
|
||||
fileName: "2016 Annual Report",
|
||||
date: "March 22, 2017",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000165495417002279/zmtp_10k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2015 Annual Report",
|
||||
date: "March 15, 2016",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000135448816006596/zmtp_10k.htm",
|
||||
h("img", {
|
||||
src: iconLink,
|
||||
alt: "link",
|
||||
style: {
|
||||
width: "24px",
|
||||
height: "24px",
|
||||
},
|
||||
{
|
||||
fileName: "2014 Annual Report",
|
||||
date: "March 24, 2015",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000135448815001308/zmtp_10k.htm",
|
||||
})
|
||||
),
|
||||
]
|
||||
);
|
||||
},
|
||||
{
|
||||
fileName: "2013 Annual Report",
|
||||
date: "March 31, 2014",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000135448814001518/zmpt_10k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2012 Annual Report",
|
||||
date: "March 29, 2013",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000135448813001584/zmtp_10k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2011 Annual Report",
|
||||
date: "March 30, 2012",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000135448812001548/zoom_10k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2010 Annual Report",
|
||||
date: "March 29, 2011",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000135448811000969/zmtp_10k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2009 Annual Report",
|
||||
date: "March 31, 2010",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000135448810001043/zmtp_10k.htm",
|
||||
},
|
||||
]);
|
||||
];
|
||||
|
||||
// 筛选后的数据
|
||||
const filteredData = computed(() => {
|
||||
let data = state.secFilingsData;
|
||||
|
||||
if (state.selectedYear) {
|
||||
data = data.filter((item) => item.year === state.selectedYear);
|
||||
}
|
||||
|
||||
return data;
|
||||
});
|
||||
|
||||
// 分页数据
|
||||
const paginatedData = computed(() => {
|
||||
const start = (state.currentPage - 1) * state.pageSize;
|
||||
const end = start + state.pageSize;
|
||||
return filteredData.value.slice(start, end);
|
||||
});
|
||||
|
||||
// 总页数
|
||||
const totalPages = computed(() => {
|
||||
return Math.ceil(filteredData.value.length / state.pageSize);
|
||||
});
|
||||
|
||||
// 当前页起始索引
|
||||
const startIndex = computed(() => {
|
||||
return (state.currentPage - 1) * state.pageSize + 1;
|
||||
});
|
||||
|
||||
// 当前页结束索引
|
||||
const endIndex = computed(() => {
|
||||
const end = state.currentPage * state.pageSize;
|
||||
return Math.min(end, filteredData.value.length);
|
||||
});
|
||||
|
||||
// 处理年份变化
|
||||
const handleYearChange = (value) => {
|
||||
state.selectedYear = value;
|
||||
state.currentPage = 1;
|
||||
};
|
||||
|
||||
// 处理页码变化
|
||||
const handlePageChange = (page) => {
|
||||
state.currentPage = page;
|
||||
};
|
||||
|
||||
// 处理每页条数变化
|
||||
const handlePageSizeChange = (size) => {
|
||||
state.pageSize = size;
|
||||
state.currentPage = 1;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@ -171,117 +312,104 @@ const annualReports = ref([
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
}
|
||||
.financials-container {
|
||||
|
||||
.sec-filings-container {
|
||||
max-width: calc(100% - 300px);
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.financials-title {
|
||||
.page-title {
|
||||
font-size: 85px;
|
||||
text-align: center;
|
||||
margin-bottom: 60px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 50px;
|
||||
margin-bottom: 20px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.overview-text {
|
||||
font-size: 40px;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
.filters {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
margin-bottom: 30px;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
.filter-group {
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 10px 20px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
border-bottom: 2px solid transparent;
|
||||
.filter-label {
|
||||
font-size: 50px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-bottom: 2px solid #333;
|
||||
.table-container {
|
||||
.n-data-table {
|
||||
--n-th-color: #f5f5f5;
|
||||
--n-th-text-color: #333;
|
||||
--n-td-color: #fff;
|
||||
--n-border-color: #e0e0e0;
|
||||
}
|
||||
}
|
||||
|
||||
.reports-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
.pagination-container {
|
||||
display: flex;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid #ccc;
|
||||
font-weight: bold;
|
||||
flex-wrap: wrap; // 添加这行
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
display: flex;
|
||||
padding: 15px 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.reports-list {
|
||||
// max-height: 600px;
|
||||
// overflow-y: auto;
|
||||
}
|
||||
.column {
|
||||
&.file-name {
|
||||
width: 25%;
|
||||
}
|
||||
&.date {
|
||||
width: 25%;
|
||||
margin-top: 20px;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
&.download {
|
||||
width: 25%;
|
||||
text-align: right;
|
||||
margin-right: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.pdf-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.download-link {
|
||||
color: #0078d7;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.sec-text {
|
||||
.pagination-info {
|
||||
font-size: 40px;
|
||||
line-height: 1.6;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: #f00;
|
||||
text-decoration: none;
|
||||
:deep(.n-data-table-th) {
|
||||
background-color: #9e9e9e !important;
|
||||
color: white !important;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
:deep(.n-data-table-td) {
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
:deep(.n-data-table-tr:hover .n-data-table-td) {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
:deep(.n-select) {
|
||||
.n-base-selection {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.n-pagination) {
|
||||
.n-pagination-item {
|
||||
border: 1px solid #ccc;
|
||||
|
||||
&.n-pagination-item--active {
|
||||
background-color: #969696;
|
||||
border-color: #969696;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.n-pagination-quick-jumper {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.n-pagination-sizes {
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,168 +1,110 @@
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<div class="financials-container">
|
||||
<div class="sec-filing-detail-container">
|
||||
<!-- 标题 -->
|
||||
<div class="financials-title">
|
||||
{{ t("financialinformation.secfilings.title") }}
|
||||
<div class="page-title">SEC Filing Details</div>
|
||||
|
||||
<!-- Document Details 部分 -->
|
||||
<div class="section">
|
||||
<h2 class="section-title">Document Details</h2>
|
||||
<div class="details-grid">
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Form:</span>
|
||||
<a :href="filingData.htmlLink" class="detail-value link">{{
|
||||
filingData.form
|
||||
}}</a>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Filing Date:</span>
|
||||
<span class="detail-value">{{ filingData.filingDate }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Form Description:</span>
|
||||
<span class="detail-value">{{ filingData.formDescription }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Company:</span>
|
||||
<span class="detail-value">{{ filingData.company }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Issuer:</span>
|
||||
<span class="detail-value">{{ filingData.issuer }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 公司财务概览 -->
|
||||
<section class="section">
|
||||
<div class="section-title">
|
||||
{{ t("financialinformation.secfilings.overview.title") }}
|
||||
</div>
|
||||
<p
|
||||
class="overview-text"
|
||||
v-html="t('financialinformation.secfilings.overview.desc')"
|
||||
></p>
|
||||
</section>
|
||||
|
||||
<!-- 年度报告 -->
|
||||
<section class="section">
|
||||
<div class="section-title">
|
||||
{{ t("financialinformation.secfilings.annual_reports.title") }}
|
||||
</div>
|
||||
|
||||
<!-- 报告表格 -->
|
||||
<div class="reports-table">
|
||||
<div class="table-header">
|
||||
<div class="column file-name">
|
||||
{{
|
||||
t("financialinformation.secfilings.annual_reports.file_name")
|
||||
}}
|
||||
</div>
|
||||
<div class="column date">
|
||||
{{ t("financialinformation.secfilings.annual_reports.date") }}
|
||||
</div>
|
||||
<div class="column download"></div>
|
||||
</div>
|
||||
|
||||
<!-- 报告列表 -->
|
||||
<div class="reports-list">
|
||||
<div
|
||||
class="table-row"
|
||||
v-for="(report, index) in annualReports"
|
||||
:key="index"
|
||||
<!-- Filing Formats 部分 -->
|
||||
<div class="section">
|
||||
<h2 class="section-title">Filing Formats</h2>
|
||||
<div class="formats-list">
|
||||
<div class="format-item">
|
||||
<img :src="iconLink" alt="link" class="format-icon" />
|
||||
<a :href="filingData.htmlLink" class="format-link" target="_blank"
|
||||
>View HTML</a
|
||||
>
|
||||
<div class="column file-name">{{ report.fileName }}</div>
|
||||
<div class="column date">{{ report.date }}</div>
|
||||
<div class="column download">
|
||||
<a :href="report.downloadUrl" class="download-link">{{
|
||||
t("financialinformation.secfilings.annual_reports.view")
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- XBRL 部分 -->
|
||||
<div
|
||||
v-if="
|
||||
Array.isArray(filingData.dataFiles) && filingData.dataFiles.length > 0
|
||||
"
|
||||
class="section"
|
||||
>
|
||||
<h2 class="section-title">XBRL</h2>
|
||||
<div class="formats-list">
|
||||
<div
|
||||
class="format-item"
|
||||
v-for="(item, idx) in filingData.dataFiles"
|
||||
:key="idx"
|
||||
>
|
||||
<img :src="iconLink" alt="link" class="format-icon" />
|
||||
<a :href="item.fileUrl" class="format-link" target="_blank">{{
|
||||
item.description
|
||||
}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { ref, onMounted } from "vue";
|
||||
import iconLink from "@/assets/image/icon/icon-link.png";
|
||||
import { fileList } from "@/dict/secFiles.js";
|
||||
import { useRoute } from "vue-router";
|
||||
|
||||
const { t } = useI18n();
|
||||
// 年度报告数据
|
||||
const annualReports = ref([
|
||||
{
|
||||
fileName: "2024 Annual Report",
|
||||
date: "April 10, 2025",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912625002538/fieeinc_10k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2023 Annual Report",
|
||||
date: "April 12, 2024",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912624002449/miniminc_10k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2022 Annual Report",
|
||||
date: "March 31, 2023",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315223010335/form10-k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2021 Annual Report",
|
||||
date: "March 31, 2022",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315222008365/form10-k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2020 Annual Report",
|
||||
date: "April 13, 2021",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000165495421004133/zmtp_10k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2019 Annual Report",
|
||||
date: "April 15, 2020",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000165495420004069/zmtp_10k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2018 Annual Report",
|
||||
date: "April 1, 2019",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000165495419003878/zmtp_10k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2017 Annual Report",
|
||||
date: "March 30, 2018",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000165495418003402/zmtp_10k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2016 Annual Report",
|
||||
date: "March 22, 2017",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000165495417002279/zmtp_10k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2015 Annual Report",
|
||||
date: "March 15, 2016",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000135448816006596/zmtp_10k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2014 Annual Report",
|
||||
date: "March 24, 2015",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000135448815001308/zmtp_10k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2013 Annual Report",
|
||||
date: "March 31, 2014",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000135448814001518/zmpt_10k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2012 Annual Report",
|
||||
date: "March 29, 2013",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000135448813001584/zmtp_10k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2011 Annual Report",
|
||||
date: "March 30, 2012",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000135448812001548/zoom_10k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2010 Annual Report",
|
||||
date: "March 29, 2011",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000135448811000969/zmtp_10k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2009 Annual Report",
|
||||
date: "March 31, 2010",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000135448810001043/zmtp_10k.htm",
|
||||
},
|
||||
]);
|
||||
// 这里可以根据路由参数或props获取具体的文件详情
|
||||
const filingData = ref({
|
||||
form: "",
|
||||
filingDate: "",
|
||||
formDescription: "",
|
||||
company: "",
|
||||
issuer: "",
|
||||
htmlLink: "#",
|
||||
});
|
||||
|
||||
const route = useRoute();
|
||||
|
||||
onMounted(() => {
|
||||
const { filingDate } = route.query;
|
||||
const file = fileList.find((item) => item.filingDate === filingDate);
|
||||
if (file) {
|
||||
filingData.value = {
|
||||
form: file.form,
|
||||
filingDate: file.filingDate,
|
||||
formDescription: file.formDescription,
|
||||
htmlLink: file.fileLink || "#",
|
||||
dataFiles: file.dataFiles || [],
|
||||
company: "PDD Holdings",
|
||||
issuer: "PDD HOLDINGS INC.",
|
||||
};
|
||||
}
|
||||
console.log(filingData.value);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@ -171,117 +113,89 @@ const annualReports = ref([
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.financials-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.financials-title {
|
||||
.sec-filing-detail-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 40px;
|
||||
text-align: center;
|
||||
margin-bottom: 60px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 60px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
margin-bottom: 20px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.overview-text {
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 10px 20px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
border-bottom: 2px solid transparent;
|
||||
|
||||
&.active {
|
||||
border-bottom: 2px solid #333;
|
||||
}
|
||||
.details-grid {
|
||||
display: grid;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.reports-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
.detail-item {
|
||||
display: flex;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid #ccc;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
font-weight: bold;
|
||||
justify-content: space-between;
|
||||
color: #333;
|
||||
min-width: 150px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
display: flex;
|
||||
padding: 15px 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.reports-list {
|
||||
// max-height: 600px;
|
||||
// overflow-y: auto;
|
||||
}
|
||||
.column {
|
||||
&.file-name {
|
||||
width: 25%;
|
||||
}
|
||||
&.date {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
&.download {
|
||||
width: 25%;
|
||||
text-align: right;
|
||||
margin-right: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.pdf-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.download-link {
|
||||
color: #0078d7;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.sec-text {
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
.detail-value {
|
||||
color: #333;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: #f00;
|
||||
color: #0078d7;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
.formats-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.format-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.format-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.format-link {
|
||||
color: #0078d7;
|
||||
text-decoration: underline;
|
||||
font-size: 14px;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -74,7 +74,7 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import iconLink from "@/assets/image/icon/icon-link.png";
|
||||
import { fileList } from "@/dict/secTestData.js";
|
||||
import { fileList } from "@/dict/secFiles.js";
|
||||
import { useRoute } from "vue-router";
|
||||
|
||||
// 这里可以根据路由参数或props获取具体的文件详情
|
||||
@ -96,11 +96,11 @@ onMounted(() => {
|
||||
filingData.value = {
|
||||
form: file.form,
|
||||
filingDate: file.filingDate,
|
||||
formDescription: file.description,
|
||||
company: file.company,
|
||||
issuer: file.issuer,
|
||||
htmlLink: file.link || "#",
|
||||
formDescription: file.formDescription,
|
||||
htmlLink: file.fileLink || "#",
|
||||
dataFiles: file.dataFiles || [],
|
||||
company: "PDD Holdings",
|
||||
issuer: "PDD HOLDINGS INC.",
|
||||
};
|
||||
}
|
||||
console.log(filingData.value);
|
||||
@ -120,7 +120,6 @@ onMounted(() => {
|
||||
.sec-filing-detail-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
background: white;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
|
||||
@ -1,286 +1,200 @@
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<div class="financials-container">
|
||||
<div class="sec-filing-detail-container">
|
||||
<!-- 标题 -->
|
||||
<div class="financials-title">
|
||||
{{ t("financialinformation.secfilings.title") }}
|
||||
<div class="page-title">SEC Filing Details</div>
|
||||
|
||||
<!-- Document Details 部分 -->
|
||||
<div class="section">
|
||||
<h2 class="section-title">Document Details</h2>
|
||||
<div class="details-grid">
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Form:</span>
|
||||
<a :href="filingData.htmlLink" class="detail-value link">{{
|
||||
filingData.form
|
||||
}}</a>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Filing Date:</span>
|
||||
<span class="detail-value">{{ filingData.filingDate }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Form Description:</span>
|
||||
<span class="detail-value">{{ filingData.formDescription }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Company:</span>
|
||||
<span class="detail-value">{{ filingData.company }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Issuer:</span>
|
||||
<span class="detail-value">{{ filingData.issuer }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 公司财务概览 -->
|
||||
<section class="section">
|
||||
<div class="section-title">
|
||||
{{ t("financialinformation.secfilings.overview.title") }}
|
||||
</div>
|
||||
<p
|
||||
class="overview-text"
|
||||
v-html="t('financialinformation.secfilings.overview.desc')"
|
||||
></p>
|
||||
</section>
|
||||
|
||||
<!-- 年度报告 -->
|
||||
<section class="section">
|
||||
<div class="section-title">
|
||||
{{ t("financialinformation.secfilings.annual_reports.title") }}
|
||||
</div>
|
||||
|
||||
<!-- 报告表格 -->
|
||||
<div class="reports-table">
|
||||
<div class="table-header">
|
||||
<div class="column file-name">
|
||||
{{
|
||||
t("financialinformation.secfilings.annual_reports.file_name")
|
||||
}}
|
||||
</div>
|
||||
<div class="column date">
|
||||
{{ t("financialinformation.secfilings.annual_reports.date") }}
|
||||
</div>
|
||||
<div class="column download"></div>
|
||||
</div>
|
||||
|
||||
<!-- 报告列表 -->
|
||||
<div class="reports-list">
|
||||
<div
|
||||
class="table-row"
|
||||
v-for="(report, index) in annualReports"
|
||||
:key="index"
|
||||
<!-- Filing Formats 部分 -->
|
||||
<div class="section">
|
||||
<h2 class="section-title">Filing Formats</h2>
|
||||
<div class="formats-list">
|
||||
<div class="format-item">
|
||||
<img :src="iconLink" alt="link" class="format-icon" />
|
||||
<a :href="filingData.htmlLink" class="format-link" target="_blank"
|
||||
>View HTML</a
|
||||
>
|
||||
<div class="column file-name">{{ report.fileName }}</div>
|
||||
<div class="column date">{{ report.date }}</div>
|
||||
<div class="column download">
|
||||
<a :href="report.downloadUrl" class="download-link">{{
|
||||
t("financialinformation.secfilings.annual_reports.view")
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- XBRL 部分 -->
|
||||
<div
|
||||
v-if="
|
||||
Array.isArray(filingData.dataFiles) && filingData.dataFiles.length > 0
|
||||
"
|
||||
class="section"
|
||||
>
|
||||
<h2 class="section-title">XBRL</h2>
|
||||
<div class="formats-list">
|
||||
<div
|
||||
class="format-item"
|
||||
v-for="(item, idx) in filingData.dataFiles"
|
||||
:key="idx"
|
||||
>
|
||||
<img :src="iconLink" alt="link" class="format-icon" />
|
||||
<a :href="item.fileUrl" class="format-link" target="_blank">{{
|
||||
item.description
|
||||
}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { ref, onMounted } from "vue";
|
||||
import iconLink from "@/assets/image/icon/icon-link.png";
|
||||
import { fileList } from "@/dict/secFiles.js";
|
||||
import { useRoute } from "vue-router";
|
||||
|
||||
const { t } = useI18n();
|
||||
// 这里可以根据路由参数或props获取具体的文件详情
|
||||
const filingData = ref({
|
||||
form: "",
|
||||
filingDate: "",
|
||||
formDescription: "",
|
||||
company: "",
|
||||
issuer: "",
|
||||
htmlLink: "#",
|
||||
});
|
||||
|
||||
// 年度报告数据
|
||||
const annualReports = ref([
|
||||
{
|
||||
fileName: "2024 Annual Report",
|
||||
date: "April 10, 2025",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912625002538/fieeinc_10k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2023 Annual Report",
|
||||
date: "April 12, 2024",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912624002449/miniminc_10k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2022 Annual Report",
|
||||
date: "March 31, 2023",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315223010335/form10-k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2021 Annual Report",
|
||||
date: "March 31, 2022",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315222008365/form10-k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2020 Annual Report",
|
||||
date: "April 13, 2021",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000165495421004133/zmtp_10k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2019 Annual Report",
|
||||
date: "April 15, 2020",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000165495420004069/zmtp_10k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2018 Annual Report",
|
||||
date: "April 1, 2019",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000165495419003878/zmtp_10k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2017 Annual Report",
|
||||
date: "March 30, 2018",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000165495418003402/zmtp_10k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2016 Annual Report",
|
||||
date: "March 22, 2017",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000165495417002279/zmtp_10k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2015 Annual Report",
|
||||
date: "March 15, 2016",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000135448816006596/zmtp_10k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2014 Annual Report",
|
||||
date: "March 24, 2015",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000135448815001308/zmtp_10k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2013 Annual Report",
|
||||
date: "March 31, 2014",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000135448814001518/zmpt_10k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2012 Annual Report",
|
||||
date: "March 29, 2013",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000135448813001584/zmtp_10k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2011 Annual Report",
|
||||
date: "March 30, 2012",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000135448812001548/zoom_10k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2010 Annual Report",
|
||||
date: "March 29, 2011",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000135448811000969/zmtp_10k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2009 Annual Report",
|
||||
date: "March 31, 2010",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000135448810001043/zmtp_10k.htm",
|
||||
},
|
||||
]);
|
||||
const route = useRoute();
|
||||
|
||||
onMounted(() => {
|
||||
const { filingDate } = route.query;
|
||||
const file = fileList.find((item) => item.filingDate === filingDate);
|
||||
if (file) {
|
||||
filingData.value = {
|
||||
form: file.form,
|
||||
filingDate: file.filingDate,
|
||||
formDescription: file.formDescription,
|
||||
htmlLink: file.fileLink || "#",
|
||||
dataFiles: file.dataFiles || [],
|
||||
company: "PDD Holdings",
|
||||
issuer: "PDD HOLDINGS INC.",
|
||||
};
|
||||
}
|
||||
console.log(filingData.value);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.page-container {
|
||||
background-image: url("@/assets/image/bg-375.png");
|
||||
background-image: url("@/assets/image/bg.png");
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
}
|
||||
.financials-container {
|
||||
|
||||
.sec-filing-detail-container {
|
||||
margin: 0 auto;
|
||||
padding: 80px;
|
||||
}
|
||||
|
||||
.financials-title {
|
||||
.page-title {
|
||||
font-size: 113px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
margin-bottom: 60px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 60px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 92px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.overview-text {
|
||||
font-size: 72px;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 10px 20px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
border-bottom: 2px solid transparent;
|
||||
|
||||
&.active {
|
||||
border-bottom: 2px solid #333;
|
||||
}
|
||||
.details-grid {
|
||||
display: grid;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.reports-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
.detail-item {
|
||||
display: flex;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid #ccc;
|
||||
align-items: flex-start;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
font-weight: bold;
|
||||
justify-content: space-between;
|
||||
color: #333;
|
||||
min-width: 150px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
display: flex;
|
||||
padding: 45px 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.reports-list {
|
||||
// max-height: 600px;
|
||||
// overflow-y: auto;
|
||||
}
|
||||
.column {
|
||||
&.file-name {
|
||||
width: 35%;
|
||||
}
|
||||
&.date {
|
||||
width: 35%;
|
||||
}
|
||||
&.download {
|
||||
margin-right: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.pdf-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.download-link {
|
||||
color: #0078d7;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.sec-text {
|
||||
font-size: 72px;
|
||||
line-height: 1.6;
|
||||
.detail-value {
|
||||
color: #333;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: #f00;
|
||||
color: #0078d7;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
.formats-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.format-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.format-icon {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
}
|
||||
|
||||
.format-link {
|
||||
color: #0078d7;
|
||||
text-decoration: underline;
|
||||
font-size: 72px;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,168 +1,110 @@
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<div class="financials-container">
|
||||
<div class="sec-filing-detail-container">
|
||||
<!-- 标题 -->
|
||||
<div class="financials-title">
|
||||
{{ t("financialinformation.secfilings.title") }}
|
||||
<div class="page-title">SEC Filing Details</div>
|
||||
|
||||
<!-- Document Details 部分 -->
|
||||
<div class="section">
|
||||
<h2 class="section-title">Document Details</h2>
|
||||
<div class="details-grid">
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Form:</span>
|
||||
<a :href="filingData.htmlLink" class="detail-value link">{{
|
||||
filingData.form
|
||||
}}</a>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Filing Date:</span>
|
||||
<span class="detail-value">{{ filingData.filingDate }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Form Description:</span>
|
||||
<span class="detail-value">{{ filingData.formDescription }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Company:</span>
|
||||
<span class="detail-value">{{ filingData.company }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Issuer:</span>
|
||||
<span class="detail-value">{{ filingData.issuer }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 公司财务概览 -->
|
||||
<section class="section">
|
||||
<div class="section-title">
|
||||
{{ t("financialinformation.secfilings.overview.title") }}
|
||||
</div>
|
||||
<p
|
||||
class="overview-text"
|
||||
v-html="t('financialinformation.secfilings.overview.desc')"
|
||||
></p>
|
||||
</section>
|
||||
|
||||
<!-- 年度报告 -->
|
||||
<section class="section">
|
||||
<div class="section-title">
|
||||
{{ t("financialinformation.secfilings.annual_reports.title") }}
|
||||
</div>
|
||||
|
||||
<!-- 报告表格 -->
|
||||
<div class="reports-table">
|
||||
<div class="table-header">
|
||||
<div class="column file-name">
|
||||
{{
|
||||
t("financialinformation.secfilings.annual_reports.file_name")
|
||||
}}
|
||||
</div>
|
||||
<div class="column date">
|
||||
{{ t("financialinformation.secfilings.annual_reports.date") }}
|
||||
</div>
|
||||
<div class="column download"></div>
|
||||
</div>
|
||||
|
||||
<!-- 报告列表 -->
|
||||
<div class="reports-list">
|
||||
<div
|
||||
class="table-row"
|
||||
v-for="(report, index) in annualReports"
|
||||
:key="index"
|
||||
<!-- Filing Formats 部分 -->
|
||||
<div class="section">
|
||||
<h2 class="section-title">Filing Formats</h2>
|
||||
<div class="formats-list">
|
||||
<div class="format-item">
|
||||
<img :src="iconLink" alt="link" class="format-icon" />
|
||||
<a :href="filingData.htmlLink" class="format-link" target="_blank"
|
||||
>View HTML</a
|
||||
>
|
||||
<div class="column file-name">{{ report.fileName }}</div>
|
||||
<div class="column date">{{ report.date }}</div>
|
||||
<div class="column download">
|
||||
<a :href="report.downloadUrl" class="download-link">{{
|
||||
t("financialinformation.secfilings.annual_reports.view")
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- XBRL 部分 -->
|
||||
<div
|
||||
v-if="
|
||||
Array.isArray(filingData.dataFiles) && filingData.dataFiles.length > 0
|
||||
"
|
||||
class="section"
|
||||
>
|
||||
<h2 class="section-title">XBRL</h2>
|
||||
<div class="formats-list">
|
||||
<div
|
||||
class="format-item"
|
||||
v-for="(item, idx) in filingData.dataFiles"
|
||||
:key="idx"
|
||||
>
|
||||
<img :src="iconLink" alt="link" class="format-icon" />
|
||||
<a :href="item.fileUrl" class="format-link" target="_blank">{{
|
||||
item.description
|
||||
}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { ref, onMounted } from "vue";
|
||||
import iconLink from "@/assets/image/icon/icon-link.png";
|
||||
import { fileList } from "@/dict/secFiles.js";
|
||||
import { useRoute } from "vue-router";
|
||||
|
||||
const { t } = useI18n();
|
||||
// 年度报告数据
|
||||
const annualReports = ref([
|
||||
{
|
||||
fileName: "2024 Annual Report",
|
||||
date: "April 10, 2025",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912625002538/fieeinc_10k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2023 Annual Report",
|
||||
date: "April 12, 2024",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000182912624002449/miniminc_10k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2022 Annual Report",
|
||||
date: "March 31, 2023",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315223010335/form10-k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2021 Annual Report",
|
||||
date: "March 31, 2022",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/ix?doc=/Archives/edgar/data/1467761/000149315222008365/form10-k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2020 Annual Report",
|
||||
date: "April 13, 2021",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000165495421004133/zmtp_10k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2019 Annual Report",
|
||||
date: "April 15, 2020",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000165495420004069/zmtp_10k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2018 Annual Report",
|
||||
date: "April 1, 2019",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000165495419003878/zmtp_10k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2017 Annual Report",
|
||||
date: "March 30, 2018",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000165495418003402/zmtp_10k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2016 Annual Report",
|
||||
date: "March 22, 2017",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000165495417002279/zmtp_10k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2015 Annual Report",
|
||||
date: "March 15, 2016",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000135448816006596/zmtp_10k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2014 Annual Report",
|
||||
date: "March 24, 2015",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000135448815001308/zmtp_10k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2013 Annual Report",
|
||||
date: "March 31, 2014",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000135448814001518/zmpt_10k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2012 Annual Report",
|
||||
date: "March 29, 2013",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000135448813001584/zmtp_10k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2011 Annual Report",
|
||||
date: "March 30, 2012",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000135448812001548/zoom_10k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2010 Annual Report",
|
||||
date: "March 29, 2011",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000135448811000969/zmtp_10k.htm",
|
||||
},
|
||||
{
|
||||
fileName: "2009 Annual Report",
|
||||
date: "March 31, 2010",
|
||||
downloadUrl:
|
||||
"https://www.sec.gov/Archives/edgar/data/1467761/000135448810001043/zmtp_10k.htm",
|
||||
},
|
||||
]);
|
||||
// 这里可以根据路由参数或props获取具体的文件详情
|
||||
const filingData = ref({
|
||||
form: "",
|
||||
filingDate: "",
|
||||
formDescription: "",
|
||||
company: "",
|
||||
issuer: "",
|
||||
htmlLink: "#",
|
||||
});
|
||||
|
||||
const route = useRoute();
|
||||
|
||||
onMounted(() => {
|
||||
const { filingDate } = route.query;
|
||||
const file = fileList.find((item) => item.filingDate === filingDate);
|
||||
if (file) {
|
||||
filingData.value = {
|
||||
form: file.form,
|
||||
filingDate: file.filingDate,
|
||||
formDescription: file.formDescription,
|
||||
htmlLink: file.fileLink || "#",
|
||||
dataFiles: file.dataFiles || [],
|
||||
company: "PDD Holdings",
|
||||
issuer: "PDD HOLDINGS INC.",
|
||||
};
|
||||
}
|
||||
console.log(filingData.value);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@ -171,117 +113,89 @@ const annualReports = ref([
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
}
|
||||
.financials-container {
|
||||
|
||||
.sec-filing-detail-container {
|
||||
max-width: calc(100% - 300px);
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.financials-title {
|
||||
.page-title {
|
||||
font-size: 85px;
|
||||
text-align: center;
|
||||
margin-bottom: 60px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 60px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 50px;
|
||||
margin-bottom: 20px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.overview-text {
|
||||
font-size: 40px;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 10px 20px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
border-bottom: 2px solid transparent;
|
||||
|
||||
&.active {
|
||||
border-bottom: 2px solid #333;
|
||||
}
|
||||
.details-grid {
|
||||
display: grid;
|
||||
gap: 25px;
|
||||
}
|
||||
|
||||
.reports-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
.detail-item {
|
||||
display: flex;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid #ccc;
|
||||
align-items: flex-start;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
font-weight: bold;
|
||||
justify-content: space-between;
|
||||
color: #333;
|
||||
min-width: 150px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
display: flex;
|
||||
padding: 15px 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.reports-list {
|
||||
// max-height: 600px;
|
||||
// overflow-y: auto;
|
||||
}
|
||||
.column {
|
||||
&.file-name {
|
||||
width: 25%;
|
||||
}
|
||||
&.date {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
&.download {
|
||||
width: 25%;
|
||||
text-align: right;
|
||||
margin-right: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.pdf-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.download-link {
|
||||
color: #0078d7;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.sec-text {
|
||||
font-size: 40px;
|
||||
line-height: 1.6;
|
||||
.detail-value {
|
||||
color: #333;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: #f00;
|
||||
color: #0078d7;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
.formats-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.format-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.format-icon {
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
}
|
||||
|
||||
.format-link {
|
||||
color: #0078d7;
|
||||
text-decoration: underline;
|
||||
font-size: 40px;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user