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