处理历史表格数据根据筛选条件调用接口
This commit is contained in:
parent
17753d48b3
commit
1c7a139732
@ -11,9 +11,10 @@
|
|||||||
@select="handlePeriodChange"
|
@select="handlePeriodChange"
|
||||||
:value="state.selectedPeriod"
|
:value="state.selectedPeriod"
|
||||||
>
|
>
|
||||||
<n-button
|
<n-button>
|
||||||
>{{ state.selectedPeriod }} <n-icon><chevron-down-outline /></n-icon
|
{{ state.selectedPeriod }}
|
||||||
></n-button>
|
<n-icon><chevron-down-outline /></n-icon>
|
||||||
|
</n-button>
|
||||||
</n-dropdown>
|
</n-dropdown>
|
||||||
|
|
||||||
<n-dropdown
|
<n-dropdown
|
||||||
@ -22,10 +23,10 @@
|
|||||||
@select="handleDurationChange"
|
@select="handleDurationChange"
|
||||||
:value="state.selectedDuration"
|
:value="state.selectedDuration"
|
||||||
>
|
>
|
||||||
<n-button
|
<n-button>
|
||||||
>{{ state.selectedDuration }}
|
{{ state.selectedDuration }}
|
||||||
<n-icon><chevron-down-outline /></n-icon
|
<n-icon><chevron-down-outline /></n-icon>
|
||||||
></n-button>
|
</n-button>
|
||||||
</n-dropdown>
|
</n-dropdown>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -40,123 +41,172 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { NDataTable, NButton, NDropdown, NIcon } from "naive-ui";
|
import { NDataTable, NButton, NDropdown, NIcon } from 'naive-ui'
|
||||||
import { reactive, onMounted, h } from "vue";
|
import { reactive, onMounted, h } from 'vue'
|
||||||
import axios from "axios";
|
import axios from 'axios'
|
||||||
import { ChevronDownOutline } from "@vicons/ionicons5";
|
import { ChevronDownOutline } from '@vicons/ionicons5'
|
||||||
import defaultTableData from "../data";
|
import defaultTableData from '../data'
|
||||||
console.log("defaultTableData", defaultTableData);
|
console.log('defaultTableData', defaultTableData)
|
||||||
// 数据筛选选项
|
// 数据筛选选项
|
||||||
const periodOptions = [
|
const periodOptions = [
|
||||||
{ label: "Daily", key: "Daily" },
|
{ label: 'Daily', key: 'Daily' },
|
||||||
{ label: "Weekly", key: "Weekly" },
|
{ label: 'Weekly', key: 'Weekly' },
|
||||||
{ label: "Monthly", key: "Monthly" },
|
{ label: 'Monthly', key: 'Monthly' },
|
||||||
{ label: "Quarterly", key: "Quarterly" },
|
{ label: 'Quarterly', key: 'Quarterly' },
|
||||||
{ label: "Annual", key: "Annual" },
|
{ label: 'Annual', key: 'Annual' },
|
||||||
];
|
]
|
||||||
|
|
||||||
const durationOptions = [
|
const durationOptions = [
|
||||||
{ label: "3 Months", key: "3 Months" },
|
{ label: '3 Months', key: '3 Months' },
|
||||||
{ label: "6 Months", key: "6 Months" },
|
{ label: '6 Months', key: '6 Months' },
|
||||||
{ label: "Year to Date", key: "Year to Date" },
|
{ label: 'Year to Date', key: 'Year to Date' },
|
||||||
{ label: "1 Year", key: "1 Year" },
|
{ label: '1 Year', key: '1 Year' },
|
||||||
{ label: "5 Years", key: "5 Years" },
|
{ label: '5 Years', key: '5 Years' },
|
||||||
{ label: "10 Years", key: "10 Years" },
|
{ label: '10 Years', key: '10 Years' },
|
||||||
];
|
{ label: 'Full History', key: 'Full History', disabled: true },
|
||||||
|
]
|
||||||
|
|
||||||
const state = reactive({
|
const state = reactive({
|
||||||
selectedPeriod: "Daily",
|
selectedPeriod: 'Daily',
|
||||||
selectedDuration: "3 Months",
|
selectedDuration: '3 Months',
|
||||||
tableData: [],
|
tableData: [],
|
||||||
});
|
})
|
||||||
|
|
||||||
// 表格列定义
|
// 表格列定义
|
||||||
const columns = [
|
const columns = [
|
||||||
{
|
{
|
||||||
title: "Date",
|
title: 'Date',
|
||||||
key: "date",
|
key: 'date',
|
||||||
align: "left",
|
align: 'left',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Open",
|
title: 'Open',
|
||||||
key: "open",
|
key: 'open',
|
||||||
align: "center",
|
align: 'center',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "High",
|
title: 'High',
|
||||||
key: "high",
|
key: 'high',
|
||||||
align: "center",
|
align: 'center',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Low",
|
title: 'Low',
|
||||||
key: "low",
|
key: 'low',
|
||||||
align: "center",
|
align: 'center',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Close",
|
title: 'Close',
|
||||||
key: "close",
|
key: 'close',
|
||||||
align: "center",
|
align: 'center',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Adj. Close",
|
title: 'Adj. Close',
|
||||||
key: "adjClose",
|
key: 'adjClose',
|
||||||
align: "center",
|
align: 'center',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Change",
|
title: 'Change',
|
||||||
key: "change",
|
key: 'change',
|
||||||
align: "center",
|
align: 'center',
|
||||||
render(row) {
|
render(row) {
|
||||||
const value = parseFloat(row.change);
|
const value = parseFloat(row.change)
|
||||||
const color = value < 0 ? "#ff4d4f" : value > 0 ? "#52c41a" : "";
|
const color = value < 0 ? '#ff4d4f' : value > 0 ? '#52c41a' : ''
|
||||||
return h("span", { style: { color } }, row.change);
|
return h('span', { style: { color } }, row.change)
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Volume",
|
title: 'Volume',
|
||||||
key: "volume",
|
key: 'volume',
|
||||||
align: "center",
|
align: 'center',
|
||||||
},
|
},
|
||||||
];
|
]
|
||||||
|
|
||||||
// 处理下拉选项变更
|
// 处理下拉选项变更
|
||||||
const handlePeriodChange = (key) => {
|
const handlePeriodChange = (key) => {
|
||||||
state.selectedPeriod = key;
|
if (key === 'Annual') {
|
||||||
getPageData();
|
handleDurationChange('Full History')
|
||||||
};
|
}
|
||||||
|
state.selectedPeriod = key
|
||||||
|
getPageData()
|
||||||
|
}
|
||||||
|
|
||||||
const handleDurationChange = (key) => {
|
const handleDurationChange = (key) => {
|
||||||
state.selectedDuration = key;
|
state.selectedDuration = key
|
||||||
getPageData();
|
getPageData()
|
||||||
};
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
getPageDefaultData();
|
getPageDefaultData()
|
||||||
});
|
})
|
||||||
|
|
||||||
const getPageDefaultData = async () => {
|
const getPageDefaultData = async () => {
|
||||||
try {
|
try {
|
||||||
// 实际项目中应该根据state.selectedPeriod和state.selectedDuration动态调整API请求
|
// 实际项目中应该根据state.selectedPeriod和state.selectedDuration动态调整API请求
|
||||||
let url =
|
let url =
|
||||||
"https://stockanalysis.com/api/symbol/a/OTC-MINM/history?type=chart";
|
'https://stockanalysis.com/api/symbol/a/OTC-MINM/history?type=chart'
|
||||||
const res = await axios.get(url);
|
const res = await axios.get(url)
|
||||||
let originalData = res.data.data;
|
let originalData = res.data.data
|
||||||
// 转换为日期格式
|
// 转换为日期格式
|
||||||
let calcApiData = originalData.map((item) => [
|
let calcApiData = originalData.map((item) => [
|
||||||
new Date(item[0]).toISOString().split("T")[0], // 转换时间戳为YYYY-MM-DD格式
|
new Date(item[0]).toISOString().split('T')[0], // 转换时间戳为YYYY-MM-DD格式
|
||||||
item[1],
|
item[1],
|
||||||
]);
|
])
|
||||||
console.log("接口数据", calcApiData);
|
console.log('接口数据', calcApiData)
|
||||||
state.tableData = defaultTableData;
|
state.tableData = defaultTableData
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("获取数据失败", error);
|
console.error('获取数据失败', error)
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
const getPageData = async () => {
|
const getPageData = async () => {
|
||||||
let url =
|
let range = ''
|
||||||
"https://stockanalysis.com/api/symbol/a/OTC-MINM/history?type=chart";
|
if (state.selectedDuration === '3 Months') {
|
||||||
const res = await axios.get(url);
|
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',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user