diff --git a/src/views/historic-stock/size1920/index.vue b/src/views/historic-stock/size1920/index.vue
index 4311f64..83dc3e4 100644
--- a/src/views/historic-stock/size1920/index.vue
+++ b/src/views/historic-stock/size1920/index.vue
@@ -15,9 +15,10 @@
@select="handlePeriodChange"
:value="state.selectedPeriod"
>
- {{ state.selectedPeriod }}
+
+ {{ state.selectedPeriod }}
+
+
- {{ state.selectedDuration }}
-
+
+ {{ state.selectedDuration }}
+
+
@@ -90,21 +91,22 @@ console.log("defaultTableData", defaultTableData);
// 数据筛选选项
const periodOptions = [
- { label: "Daily", key: "Daily" },
- { label: "Weekly", key: "Weekly" },
- { label: "Monthly", key: "Monthly" },
- { label: "Quarterly", key: "Quarterly" },
- { label: "Annual", key: "Annual" },
-];
+ { label: 'Daily', key: 'Daily' },
+ { label: 'Weekly', key: 'Weekly' },
+ { label: 'Monthly', key: 'Monthly' },
+ { label: 'Quarterly', key: 'Quarterly' },
+ { label: 'Annual', key: 'Annual' },
+]
const durationOptions = [
- { label: "3 Months", key: "3 Months" },
- { label: "6 Months", key: "6 Months" },
- { label: "Year to Date", key: "Year to Date" },
- { label: "1 Year", key: "1 Year" },
- { label: "5 Years", key: "5 Years" },
- { label: "10 Years", key: "10 Years" },
-];
+ { label: '3 Months', key: '3 Months' },
+ { label: '6 Months', key: '6 Months' },
+ { label: 'Year to Date', key: 'Year to Date' },
+ { label: '1 Year', key: '1 Year' },
+ { label: '5 Years', key: '5 Years' },
+ { label: '10 Years', key: '10 Years' },
+ { label: 'Full History', key: 'Full History', disabled: true },
+]
// 分页大小选项
const pageSizeOptions = [
@@ -115,8 +117,8 @@ const pageSizeOptions = [
];
const state = reactive({
- selectedPeriod: "Daily",
- selectedDuration: "3 Months",
+ selectedPeriod: 'Daily',
+ selectedDuration: '3 Months',
tableData: [],
currentPage: 1,
pageSize: 50,
@@ -137,62 +139,65 @@ const paginatedData = computed(() => {
// 表格列定义
const columns = [
{
- title: "Date",
- key: "date",
- align: "left",
+ title: 'Date',
+ key: 'date',
+ align: 'left',
},
{
- title: "Open",
- key: "open",
- align: "center",
+ title: 'Open',
+ key: 'open',
+ align: 'center',
},
{
- title: "High",
- key: "high",
- align: "center",
+ title: 'High',
+ key: 'high',
+ align: 'center',
},
{
- title: "Low",
- key: "low",
- align: "center",
+ title: 'Low',
+ key: 'low',
+ align: 'center',
},
{
- title: "Close",
- key: "close",
- align: "center",
+ title: 'Close',
+ key: 'close',
+ align: 'center',
},
{
- title: "Adj. Close",
- key: "adjClose",
- align: "center",
+ title: 'Adj. Close',
+ key: 'adjClose',
+ align: 'center',
},
{
- title: "Change",
- key: "change",
- align: "center",
+ title: 'Change',
+ key: 'change',
+ align: 'center',
render(row) {
- const value = parseFloat(row.change);
- const color = value < 0 ? "#ff4d4f" : value > 0 ? "#52c41a" : "";
- return h("span", { style: { color } }, row.change);
+ const value = parseFloat(row.change)
+ const color = value < 0 ? '#ff4d4f' : value > 0 ? '#52c41a' : ''
+ return h('span', { style: { color } }, row.change)
},
},
{
- title: "Volume",
- key: "volume",
- align: "center",
+ title: 'Volume',
+ key: 'volume',
+ align: 'center',
},
-];
+]
// 处理下拉选项变更
const handlePeriodChange = (key) => {
- state.selectedPeriod = key;
- getPageData();
-};
+ if (key === 'Annual') {
+ handleDurationChange('Full History')
+ }
+ state.selectedPeriod = key
+ getPageData()
+}
const handleDurationChange = (key) => {
- state.selectedDuration = key;
- getPageData();
-};
+ state.selectedDuration = key
+ getPageData()
+}
// 处理分页
const handlePrevPage = () => {
@@ -223,8 +228,8 @@ const scrollToTop = () => {
};
onMounted(() => {
- getPageDefaultData();
-});
+ getPageDefaultData()
+})
const getPageDefaultData = async () => {
try {
@@ -264,14 +269,59 @@ const getPageDefaultData = async () => {
state.tableData = updatedTableData;
} catch (error) {
- console.error("获取数据失败", error);
+ console.error('获取数据失败', error)
}
-};
+}
const getPageData = async () => {
- let url =
- "https://stockanalysis.com/api/symbol/a/OTC-MINM/history?type=chart";
- const res = await axios.get(url);
-};
+ let range = ''
+ if (state.selectedDuration === '3 Months') {
+ range = '3M'
+ } else if (state.selectedDuration === '6 Months') {
+ range = '6M'
+ } else if (state.selectedDuration === 'Year to Date') {
+ range = 'YTD'
+ } else if (state.selectedDuration === '1 Year') {
+ range = '1Y'
+ } else if (state.selectedDuration === '5 Years') {
+ range = '5Y'
+ } else if (state.selectedDuration === '10 Years') {
+ range = '10Y'
+ } else if (state.selectedDuration === 'Full History') {
+ range = 'Max'
+ }
+ let url = `https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=${state.selectedPeriod}&range=${range}`
+ const res = await axios.get(url)
+ if(res.data.status === 200){
+ console.error(res.data.data)
+ let resultData = res.data.data.map((item) => {
+ return {
+ date: item.t,
+ open: item.o != null ? Number(item.o).toFixed(2) : '',
+ high: item.h != null ? Number(item.h).toFixed(2) : '',
+ low: item.l != null ? Number(item.l).toFixed(2) : '',
+ close: item.c != null ? Number(item.c).toFixed(2) : '',
+ adjClose: item.a != null ? Number(item.a).toFixed(2) : '',
+ change: item.ch != null ? Number(item.ch).toFixed(2) + '%' : '',
+ volume: item.v,
+ }
+ })
+ 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',
+ },
+ ]
+ }
+}