Compare commits
No commits in common. "524caed5f29a5a999f20f0fb0fbd413cf80dd0b4" and "1c7a139732c6464ac2b391ab36e3a7b85918737d" have entirely different histories.
524caed5f2
...
1c7a139732
@ -17,7 +17,6 @@
|
|||||||
"@vicons/utils": "^0.1.4",
|
"@vicons/utils": "^0.1.4",
|
||||||
"axios": "^1.7.3",
|
"axios": "^1.7.3",
|
||||||
"cnjm-postcss-px-to-viewport": "^1.0.1",
|
"cnjm-postcss-px-to-viewport": "^1.0.1",
|
||||||
"countup.js": "^2.8.2",
|
|
||||||
"echarts": "^5.6.0",
|
"echarts": "^5.6.0",
|
||||||
"gsap": "^3.12.5",
|
"gsap": "^3.12.5",
|
||||||
"jsdom": "^24.0.0",
|
"jsdom": "^24.0.0",
|
||||||
|
|||||||
@ -26,9 +26,6 @@ importers:
|
|||||||
cnjm-postcss-px-to-viewport:
|
cnjm-postcss-px-to-viewport:
|
||||||
specifier: ^1.0.1
|
specifier: ^1.0.1
|
||||||
version: 1.0.1(postcss@8.4.40)
|
version: 1.0.1(postcss@8.4.40)
|
||||||
countup.js:
|
|
||||||
specifier: ^2.8.2
|
|
||||||
version: 2.8.2
|
|
||||||
echarts:
|
echarts:
|
||||||
specifier: ^5.6.0
|
specifier: ^5.6.0
|
||||||
version: 5.6.0
|
version: 5.6.0
|
||||||
@ -1813,9 +1810,6 @@ packages:
|
|||||||
core-util-is@1.0.3:
|
core-util-is@1.0.3:
|
||||||
resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
|
resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
|
||||||
|
|
||||||
countup.js@2.8.2:
|
|
||||||
resolution: {integrity: sha512-UtRoPH6udaru/MOhhZhI/GZHJKAyAxuKItD2Tr7AbrqrOPBX/uejWBBJt8q86169AMqKkE9h9/24kFWbUk/Bag==}
|
|
||||||
|
|
||||||
cross-spawn@5.1.0:
|
cross-spawn@5.1.0:
|
||||||
resolution: {integrity: sha512-pTgQJ5KC0d2hcY8eyL1IzlBPYjTkyH72XRZPnLyKus2mBfNjQs3klqbJU2VILqZryAZUt9JOb3h/mWMy23/f5A==}
|
resolution: {integrity: sha512-pTgQJ5KC0d2hcY8eyL1IzlBPYjTkyH72XRZPnLyKus2mBfNjQs3klqbJU2VILqZryAZUt9JOb3h/mWMy23/f5A==}
|
||||||
|
|
||||||
@ -5788,8 +5782,6 @@ snapshots:
|
|||||||
|
|
||||||
core-util-is@1.0.3: {}
|
core-util-is@1.0.3: {}
|
||||||
|
|
||||||
countup.js@2.8.2: {}
|
|
||||||
|
|
||||||
cross-spawn@5.1.0:
|
cross-spawn@5.1.0:
|
||||||
dependencies:
|
dependencies:
|
||||||
lru-cache: 4.1.5
|
lru-cache: 4.1.5
|
||||||
|
|||||||
@ -1,55 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import { ref, watch, onMounted } from 'vue'
|
|
||||||
import { CountUp } from 'countup.js'
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
endVal: {
|
|
||||||
type: [Number, String],
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
duration: {
|
|
||||||
type: Number,
|
|
||||||
default: 1.2
|
|
||||||
},
|
|
||||||
decimals: {
|
|
||||||
type: Number,
|
|
||||||
default: 2
|
|
||||||
},
|
|
||||||
prefix: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
suffix: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const el = ref(null)
|
|
||||||
let countUpInstance = null
|
|
||||||
|
|
||||||
const start = (val) => {
|
|
||||||
if (countUpInstance) countUpInstance.update(val)
|
|
||||||
else {
|
|
||||||
countUpInstance = new CountUp(el.value, val, {
|
|
||||||
duration: props.duration,
|
|
||||||
decimalPlaces: props.decimals,
|
|
||||||
prefix: props.prefix,
|
|
||||||
suffix: props.suffix
|
|
||||||
})
|
|
||||||
countUpInstance.start()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
start(props.endVal)
|
|
||||||
})
|
|
||||||
|
|
||||||
watch(() => props.endVal, (val) => {
|
|
||||||
start(val)
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<span ref="el"></span>
|
|
||||||
</template>
|
|
||||||
@ -1210,9 +1210,6 @@ let defaultTableData = [
|
|||||||
"volume": "561"
|
"volume": "561"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
defaultTableData.map(item => {
|
defaultTableData.map(item=>item.close='')
|
||||||
item.close = ''
|
|
||||||
item.adjClose = ''
|
|
||||||
})
|
|
||||||
|
|
||||||
export default defaultTableData;
|
export default defaultTableData;
|
||||||
|
|||||||
@ -1,13 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="historic-data-container" style="margin-bottom: 100px">
|
<div class="historic-data-container">
|
||||||
<img
|
<img src="@/assets/image/historic-stock.png" alt="1" />
|
||||||
src="@/assets/image/historic-stock.png"
|
|
||||||
alt="1"
|
|
||||||
style="max-width: 100%; margin: 0 auto"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="header mt-[20px]">
|
<div class="header">
|
||||||
<div class="title">Historical Data</div>
|
<h1 class="title">Historical Data</h1>
|
||||||
<div class="filter-container">
|
<div class="filter-container">
|
||||||
<n-dropdown
|
<n-dropdown
|
||||||
trigger="click"
|
trigger="click"
|
||||||
@ -37,58 +33,20 @@
|
|||||||
|
|
||||||
<n-data-table
|
<n-data-table
|
||||||
:columns="columns"
|
:columns="columns"
|
||||||
:data="paginatedData"
|
:data="state.tableData"
|
||||||
:bordered="false"
|
:bordered="false"
|
||||||
:single-line="false"
|
:single-line="false"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div class="pagination-container">
|
|
||||||
<n-button class="page-btn prev-btn" @click="handlePrevPage">
|
|
||||||
<n-icon><chevron-back-outline /></n-icon> Previous
|
|
||||||
</n-button>
|
|
||||||
|
|
||||||
<div class="page-info">
|
|
||||||
Page {{ state.currentPage }} of {{ totalPages }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="right-controls">
|
|
||||||
<n-dropdown
|
|
||||||
trigger="click"
|
|
||||||
:options="pageSizeOptions"
|
|
||||||
@select="handlePageSizeChange"
|
|
||||||
>
|
|
||||||
<n-button class="rows-dropdown">
|
|
||||||
{{ 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>
|
|
||||||
</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>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</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, computed } from "vue";
|
import { reactive, onMounted, h } from 'vue'
|
||||||
import axios from "axios";
|
import axios from 'axios'
|
||||||
import {
|
import { ChevronDownOutline } from '@vicons/ionicons5'
|
||||||
ChevronDownOutline,
|
import defaultTableData from '../data'
|
||||||
ChevronBackOutline,
|
console.log('defaultTableData', defaultTableData)
|
||||||
ChevronForwardOutline,
|
|
||||||
ArrowUpOutline,
|
|
||||||
} from "@vicons/ionicons5";
|
|
||||||
import defaultTableData from "../data";
|
|
||||||
console.log("defaultTableData", defaultTableData);
|
|
||||||
|
|
||||||
// 数据筛选选项
|
// 数据筛选选项
|
||||||
const periodOptions = [
|
const periodOptions = [
|
||||||
{ label: 'Daily', key: 'Daily' },
|
{ label: 'Daily', key: 'Daily' },
|
||||||
@ -108,33 +66,11 @@ const durationOptions = [
|
|||||||
{ label: 'Full History', key: 'Full History', disabled: true },
|
{ label: 'Full History', key: 'Full History', disabled: true },
|
||||||
]
|
]
|
||||||
|
|
||||||
// 分页大小选项
|
|
||||||
const pageSizeOptions = [
|
|
||||||
{ label: "50", key: 50 },
|
|
||||||
{ label: "100", key: 100 },
|
|
||||||
{ label: "500", key: 500 },
|
|
||||||
{ label: "1000", key: 1000 },
|
|
||||||
];
|
|
||||||
|
|
||||||
const state = reactive({
|
const state = reactive({
|
||||||
selectedPeriod: 'Daily',
|
selectedPeriod: 'Daily',
|
||||||
selectedDuration: '3 Months',
|
selectedDuration: '3 Months',
|
||||||
tableData: [],
|
tableData: [],
|
||||||
currentPage: 1,
|
})
|
||||||
pageSize: 50,
|
|
||||||
});
|
|
||||||
|
|
||||||
// 计算总页数
|
|
||||||
const totalPages = computed(() => {
|
|
||||||
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 columns = [
|
const columns = [
|
||||||
@ -199,75 +135,24 @@ const handleDurationChange = (key) => {
|
|||||||
getPageData()
|
getPageData()
|
||||||
}
|
}
|
||||||
|
|
||||||
// 处理分页
|
|
||||||
const handlePrevPage = () => {
|
|
||||||
if (state.currentPage === 1) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
state.currentPage--;
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleNextPage = () => {
|
|
||||||
if (state.currentPage >= totalPages.value) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
state.currentPage++;
|
|
||||||
};
|
|
||||||
|
|
||||||
const handlePageSizeChange = (size) => {
|
|
||||||
state.pageSize = size;
|
|
||||||
state.currentPage = 1; // 重置到第一页
|
|
||||||
};
|
|
||||||
|
|
||||||
// 回到顶部
|
|
||||||
const scrollToTop = () => {
|
|
||||||
window.scrollTo({
|
|
||||||
top: 0,
|
|
||||||
behavior: "smooth",
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
getPageDefaultData()
|
getPageDefaultData()
|
||||||
})
|
})
|
||||||
|
|
||||||
const getPageDefaultData = async () => {
|
const getPageDefaultData = async () => {
|
||||||
try {
|
try {
|
||||||
|
// 实际项目中应该根据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
|
||||||
|
// 转换为日期格式
|
||||||
// 转换为日期格式："Nov 26, 2024"
|
|
||||||
let calcApiData = originalData.map((item) => [
|
let calcApiData = originalData.map((item) => [
|
||||||
new Date(item[0]).toLocaleDateString("en-US", {
|
new Date(item[0]).toISOString().split('T')[0], // 转换时间戳为YYYY-MM-DD格式
|
||||||
month: "short",
|
|
||||||
day: "numeric",
|
|
||||||
year: "numeric",
|
|
||||||
}),
|
|
||||||
item[1],
|
item[1],
|
||||||
]);
|
])
|
||||||
console.log("接口数据", calcApiData);
|
console.log('接口数据', calcApiData)
|
||||||
|
state.tableData = defaultTableData
|
||||||
// 使用API数据更新defaultTableData中的close和adjClose值
|
|
||||||
const updatedTableData = defaultTableData.map((tableItem) => {
|
|
||||||
// 查找对应日期的API数据
|
|
||||||
const matchedApiData = calcApiData.find(
|
|
||||||
(apiItem) => apiItem[0] === tableItem.date
|
|
||||||
);
|
|
||||||
|
|
||||||
if (matchedApiData) {
|
|
||||||
// 更新close和adjClose值
|
|
||||||
return {
|
|
||||||
...tableItem,
|
|
||||||
close: matchedApiData[1].toFixed(2),
|
|
||||||
adjClose: matchedApiData[1].toFixed(2),
|
|
||||||
};
|
|
||||||
}
|
|
||||||
return tableItem;
|
|
||||||
});
|
|
||||||
|
|
||||||
state.tableData = updatedTableData;
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('获取数据失败', error)
|
console.error('获取数据失败', error)
|
||||||
}
|
}
|
||||||
@ -327,8 +212,7 @@ const getPageData = async () => {
|
|||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.historic-data-container {
|
.historic-data-container {
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
max-width: 1200px;
|
width: 100%;
|
||||||
margin: 0 auto;
|
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -337,7 +221,7 @@ const getPageData = async () => {
|
|||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
font-size: 40px;
|
font-size: 24px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
@ -348,72 +232,6 @@ const getPageData = async () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pagination-container {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 10px 16px;
|
|
||||||
border-radius: 4px;
|
|
||||||
background-color: #ffffff;
|
|
||||||
|
|
||||||
.page-btn {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 5px;
|
|
||||||
padding: 6px 12px;
|
|
||||||
font-size: 20px;
|
|
||||||
|
|
||||||
&.prev-btn {
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.next-btn {
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:disabled {
|
|
||||||
opacity: 0.5;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-info {
|
|
||||||
font-size: 16px;
|
|
||||||
color: #374151;
|
|
||||||
margin: 0 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.right-controls {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.rows-dropdown {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.back-to-top-link {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
margin-top: 16px;
|
|
||||||
|
|
||||||
a {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 5px;
|
|
||||||
color: #2563eb;
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: bold;
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.n-data-table) {
|
:deep(.n-data-table) {
|
||||||
.n-data-table-td {
|
.n-data-table-td {
|
||||||
padding: 12px 8px;
|
padding: 12px 8px;
|
||||||
|
|||||||
@ -8,38 +8,38 @@ getStockQuate()
|
|||||||
<template>
|
<template>
|
||||||
<main
|
<main
|
||||||
ref="main"
|
ref="main"
|
||||||
class="flex flex-col md:flex-row justify-center items-center gap-32 rounded-3xl "
|
class="min-h-80 flex flex-col md:flex-row justify-center items-center gap-12 p-12 rounded-3xl animate-bounce-in"
|
||||||
>
|
>
|
||||||
<!-- 左侧大号价格 -->
|
<!-- 左侧大号价格 -->
|
||||||
<section class="flex flex-col items-center justify-center glass-card p-32 rounded-2xl shadow-xl ">
|
<section class="flex flex-col items-center justify-center glass-card p-14 rounded-2xl shadow-xl animate-bounce-in">
|
||||||
<div class="text-9xl font-extrabold text-primary animate-bg-move select-none drop-shadow-lg">$1.98</div>
|
<div class="text-7xl font-extrabold text-primary animate-bg-move select-none drop-shadow-lg">$1.98</div>
|
||||||
<div class="mt-10 text-3xl text-gray-500 font-semibold tracking-widest">NASDAQ: <span class="text-black">UK</span></div>
|
<div class="mt-4 text-xl text-gray-500 font-semibold tracking-widest">NASDAQ: <span class="text-black">UK</span></div>
|
||||||
</section>
|
</section>
|
||||||
<!-- 右侧信息卡片 -->
|
<!-- 右侧信息卡片 -->
|
||||||
<section class="grid grid-cols-2 gap-16">
|
<section class="grid grid-cols-2 gap-8">
|
||||||
<div class="info-card">
|
<div class="info-card">
|
||||||
<div class="text-lg text-gray-400">Open</div>
|
<div class="text-xs text-gray-400">Open</div>
|
||||||
<div class="text-3xl font-bold">{{ stockQuote.Open }}</div>
|
<div class="text-xl font-bold">{{ stockQuote.Open }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-card">
|
<div class="info-card">
|
||||||
<div class="text-lg text-gray-400">Change</div>
|
<div class="text-xs text-gray-400">Change</div>
|
||||||
<div class="text-3xl font-bold text-red-500 ">{{ stockQuote.change?.join('') }}</div>
|
<div class="text-xl font-bold text-red-500 animate-bounce-in">{{ stockQuote.change?.join('') }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-card">
|
<div class="info-card">
|
||||||
<div class="text-lg text-gray-400">Day's Range</div>
|
<div class="text-xs text-gray-400">Day's Range</div>
|
||||||
<div class="text-3xl font-bold">{{ stockQuote.DaysRange }}</div>
|
<div class="text-xl font-bold">{{ stockQuote.DaysRange }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-card">
|
<div class="info-card">
|
||||||
<div class="text-lg text-gray-400">52-Week Range</div>
|
<div class="text-xs text-gray-400">52-Week Range</div>
|
||||||
<div class="text-3xl font-bold">{{ stockQuote.Week52Range }}</div>
|
<div class="text-xl font-bold">{{ stockQuote.Week52Range }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-card">
|
<div class="info-card">
|
||||||
<div class="text-lg text-gray-400">Volume</div>
|
<div class="text-xs text-gray-400">Volume</div>
|
||||||
<div class="text-3xl font-bold">{{ stockQuote.Volume }}</div>
|
<div class="text-xl font-bold">{{ stockQuote.Volume }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-card">
|
<div class="info-card">
|
||||||
<div class="text-lg text-gray-400">Market Cap</div>
|
<div class="text-xs text-gray-400">Market Cap</div>
|
||||||
<div class="text-3xl font-bold">{{ stockQuote.MarketCap }}</div>
|
<div class="text-xl font-bold">{{ stockQuote.MarketCap }}</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
@ -54,6 +54,6 @@ getStockQuate()
|
|||||||
box-shadow: 0 8px 32px 0 rgba(31,38,135,0.18);
|
box-shadow: 0 8px 32px 0 rgba(31,38,135,0.18);
|
||||||
}
|
}
|
||||||
.info-card {
|
.info-card {
|
||||||
@apply glass-card p-6 rounded-xl flex flex-col items-start gap-1 hover:scale-105 transition-transform duration-300;
|
@apply glass-card p-6 rounded-xl flex flex-col items-start gap-1 animate-bounce-in hover:scale-105 transition-transform duration-300;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user