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', + }, + ] + } +}