historic-stock
This commit is contained in:
张 元山
parent
25efd2b071
commit
deb9834cd4
@ -3,8 +3,8 @@ import { computed } from "vue";
|
|||||||
import { useWindowSize } from "@vueuse/core";
|
import { useWindowSize } from "@vueuse/core";
|
||||||
|
|
||||||
import size375 from "./size375/index.vue";
|
import size375 from "./size375/index.vue";
|
||||||
import size768 from "./size768/index.vue";
|
import size768 from "./size1920/index.vue";
|
||||||
import size1440 from "./size1440/index.vue";
|
import size1440 from "./size1920/index.vue";
|
||||||
import size1920 from "./size1920/index.vue";
|
import size1920 from "./size1920/index.vue";
|
||||||
import { useRouter } from "vue-router";
|
import { useRouter } from "vue-router";
|
||||||
import { useI18n } from "vue-i18n";
|
import { useI18n } from "vue-i18n";
|
||||||
|
|||||||
@ -1,96 +1,264 @@
|
|||||||
<script setup>
|
<template>
|
||||||
import { NCarousel, NCard } from "naive-ui";
|
<div class="historic-data-container">
|
||||||
import { ref, onMounted } from "vue";
|
<img src="@/assets/image/historic-stock.png" alt="1" />
|
||||||
import * as echarts from 'echarts';
|
|
||||||
|
|
||||||
// 轮播图片示例
|
<div class="header">
|
||||||
const images = [
|
<h1 class="title">Historical Data</h1>
|
||||||
'https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=800&q=80',
|
<div class="filter-container">
|
||||||
'https://images.unsplash.com/photo-1465101046530-73398c7f28ca?auto=format&fit=crop&w=800&q=80',
|
<n-dropdown
|
||||||
'https://images.unsplash.com/photo-1519125323398-675f0ddb6308?auto=format&fit=crop&w=800&q=80',
|
trigger="click"
|
||||||
|
:options="periodOptions"
|
||||||
|
@select="handlePeriodChange"
|
||||||
|
:value="state.selectedPeriod"
|
||||||
|
>
|
||||||
|
<n-button
|
||||||
|
>{{ state.selectedPeriod }} <n-icon><chevron-down-outline /></n-icon
|
||||||
|
></n-button>
|
||||||
|
</n-dropdown>
|
||||||
|
|
||||||
|
<n-dropdown
|
||||||
|
trigger="click"
|
||||||
|
:options="durationOptions"
|
||||||
|
@select="handleDurationChange"
|
||||||
|
:value="state.selectedDuration"
|
||||||
|
>
|
||||||
|
<n-button
|
||||||
|
>{{ state.selectedDuration }}
|
||||||
|
<n-icon><chevron-down-outline /></n-icon
|
||||||
|
></n-button>
|
||||||
|
</n-dropdown>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<n-data-table
|
||||||
|
:columns="columns"
|
||||||
|
:data="state.tableData"
|
||||||
|
:bordered="false"
|
||||||
|
:single-line="false"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { NDataTable, NButton, NDropdown, NIcon } from "naive-ui";
|
||||||
|
import { reactive, onMounted, h } from "vue";
|
||||||
|
import axios from "axios";
|
||||||
|
import { ChevronDownOutline } from "@vicons/ionicons5";
|
||||||
|
|
||||||
|
// 数据筛选选项
|
||||||
|
const periodOptions = [
|
||||||
|
{ label: "Daily", key: "Daily" },
|
||||||
|
{ label: "Weekly", key: "Weekly" },
|
||||||
|
{ label: "Monthly", key: "Monthly" },
|
||||||
|
{ label: "Quarterly", key: "Quarterly" },
|
||||||
|
{ label: "Annual", key: "Annual" },
|
||||||
];
|
];
|
||||||
|
|
||||||
// ECharts 实例
|
const durationOptions = [
|
||||||
const chartRef = ref();
|
{ label: "3 Months", key: "3 Months" },
|
||||||
let chartInstance = null;
|
{ 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" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const state = reactive({
|
||||||
|
selectedPeriod: "Daily",
|
||||||
|
selectedDuration: "3 Months",
|
||||||
|
tableData: [],
|
||||||
|
});
|
||||||
|
|
||||||
|
// 表格列定义
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
title: "Date",
|
||||||
|
key: "date",
|
||||||
|
align: "left",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Open",
|
||||||
|
key: "open",
|
||||||
|
align: "center",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "High",
|
||||||
|
key: "high",
|
||||||
|
align: "center",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Low",
|
||||||
|
key: "low",
|
||||||
|
align: "center",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Close",
|
||||||
|
key: "close",
|
||||||
|
align: "center",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Adj. Close",
|
||||||
|
key: "adjClose",
|
||||||
|
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);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Volume",
|
||||||
|
key: "volume",
|
||||||
|
align: "center",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
// 处理下拉选项变更
|
||||||
|
const handlePeriodChange = (key) => {
|
||||||
|
state.selectedPeriod = key;
|
||||||
|
getPageData();
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDurationChange = (key) => {
|
||||||
|
state.selectedDuration = key;
|
||||||
|
getPageData();
|
||||||
|
};
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
if (chartRef.value) {
|
getPageData();
|
||||||
chartInstance = echarts.init(chartRef.value);
|
|
||||||
chartInstance.setOption({
|
|
||||||
title: { text: '历史数据趋势', left: 'center', textStyle: { color: '#fff', fontSize: 24 } },
|
|
||||||
tooltip: {},
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
data: ['一月', '二月', '三月', '四月', '五月', '六月'],
|
|
||||||
axisLabel: { color: '#fff' },
|
|
||||||
axisLine: { lineStyle: { color: '#fff' } }
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'value',
|
|
||||||
axisLabel: { color: '#fff' },
|
|
||||||
splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } },
|
|
||||||
axisLine: { lineStyle: { color: '#fff' } }
|
|
||||||
},
|
|
||||||
series: [{
|
|
||||||
data: [120, 200, 150, 80, 70, 110],
|
|
||||||
type: 'line',
|
|
||||||
smooth: true,
|
|
||||||
areaStyle: {
|
|
||||||
color: {
|
|
||||||
type: 'linear',
|
|
||||||
x: 0, y: 0, x2: 0, y2: 1,
|
|
||||||
colorStops: [
|
|
||||||
{ offset: 0, color: 'rgba(59,130,246,0.5)' },
|
|
||||||
{ offset: 1, color: 'rgba(59,130,246,0)' }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
lineStyle: { width: 4, color: '#3b82f6' },
|
|
||||||
symbol: 'circle',
|
|
||||||
symbolSize: 12,
|
|
||||||
itemStyle: { color: '#f59e0b', borderColor: '#fff', borderWidth: 2 },
|
|
||||||
animationDuration: 1200
|
|
||||||
}]
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const getPageData = async () => {
|
||||||
|
try {
|
||||||
|
// 实际项目中应该根据state.selectedPeriod和state.selectedDuration动态调整API请求
|
||||||
|
let url =
|
||||||
|
"https://stockanalysis.com/api/symbol/a/OTC-MINM/history?type=chart";
|
||||||
|
const res = await axios.get(url);
|
||||||
|
|
||||||
|
// 转换API返回的数据为表格需要的格式
|
||||||
|
// 注意：以下是模拟数据，实际应该根据API返回的数据结构调整
|
||||||
|
state.tableData = [
|
||||||
|
{
|
||||||
|
date: "May 22, 2025",
|
||||||
|
open: "1.87",
|
||||||
|
high: "2.03",
|
||||||
|
low: "1.85",
|
||||||
|
close: "2.00",
|
||||||
|
adjClose: "2.00",
|
||||||
|
change: "-2.44%",
|
||||||
|
volume: "2,103",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: "May 21, 2025",
|
||||||
|
open: "2.05",
|
||||||
|
high: "2.05",
|
||||||
|
low: "2.05",
|
||||||
|
close: "2.05",
|
||||||
|
adjClose: "2.05",
|
||||||
|
change: "-",
|
||||||
|
volume: "4",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: "May 20, 2025",
|
||||||
|
open: "2.05",
|
||||||
|
high: "2.05",
|
||||||
|
low: "1.86",
|
||||||
|
close: "2.05",
|
||||||
|
adjClose: "2.05",
|
||||||
|
change: "-",
|
||||||
|
volume: "11,042",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: "May 19, 2025",
|
||||||
|
open: "2.04",
|
||||||
|
high: "2.05",
|
||||||
|
low: "1.85",
|
||||||
|
close: "2.05",
|
||||||
|
adjClose: "2.05",
|
||||||
|
change: "-",
|
||||||
|
volume: "6,204",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: "May 16, 2025",
|
||||||
|
open: "2.05",
|
||||||
|
high: "2.06",
|
||||||
|
low: "1.85",
|
||||||
|
close: "2.05",
|
||||||
|
adjClose: "2.05",
|
||||||
|
change: "2.50%",
|
||||||
|
volume: "3,618",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: "May 15, 2025",
|
||||||
|
open: "2.05",
|
||||||
|
high: "2.05",
|
||||||
|
low: "1.93",
|
||||||
|
close: "2.00",
|
||||||
|
adjClose: "2.00",
|
||||||
|
change: "-1.48%",
|
||||||
|
volume: "5,413",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: "May 14, 2025",
|
||||||
|
open: "1.95",
|
||||||
|
high: "2.05",
|
||||||
|
low: "1.95",
|
||||||
|
close: "2.03",
|
||||||
|
adjClose: "2.03",
|
||||||
|
change: "4.10%",
|
||||||
|
volume: "8,886",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: "May 13, 2025",
|
||||||
|
open: "2.26",
|
||||||
|
high: "2.26",
|
||||||
|
low: "1.80",
|
||||||
|
close: "1.95",
|
||||||
|
adjClose: "1.95",
|
||||||
|
change: "-18.41%",
|
||||||
|
volume: "10,750",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
console.log("获取到的数据", state.tableData);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("获取数据失败", error);
|
||||||
}
|
}
|
||||||
});
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
|
||||||
<main ref="main" class="relative w-full h-[calc(100vh-120px)] flex flex-col items-center justify-center overflow-hidden bg-gradient-to-br from-[#1e293b] via-[#334155] to-[#0f172a] animate-bg-move">
|
|
||||||
<!-- 背景流动渐变动画 -->
|
|
||||||
<div class="absolute inset-0 -z-1 animate-bg-move bg-gradient-to-tr from-[#2563eb]/60 via-[#9333ea]/40 to-[#f59e0b]/30 blur-2xl opacity-80"></div>
|
|
||||||
<div class="relative z-10 w-full h-full flex flex-1 flex-row items-center justify-center gap-12 px-12 pt-8">
|
|
||||||
<!-- 左侧图片轮播 -->
|
|
||||||
<div class="w-1/3 h-[420px] rounded-3xl shadow-2xl overflow-hidden bg-white/10 backdrop-blur-md animate-bounce-in">
|
|
||||||
<NCarousel autoplay show-arrow effect="card" class="h-full">
|
|
||||||
<img v-for="img in images" :key="img" :src="img" class="object-cover w-full h-full" />
|
|
||||||
</NCarousel>
|
|
||||||
</div>
|
|
||||||
<!-- 右侧信息卡片 -->
|
|
||||||
<div class="w-1/3 h-[420px] flex flex-col justify-between p-8 rounded-3xl bg-white/20 backdrop-blur-2xl shadow-xl animate-blob">
|
|
||||||
<NCard class="bg-transparent border-none shadow-none text-white" content-style="background:transparent;">
|
|
||||||
<template #header>
|
|
||||||
<div class="text-3xl font-bold mb-2 animate-bounce-in">高大上数据看板</div>
|
|
||||||
</template>
|
|
||||||
<div class="text-lg mb-4 animate-delay-200 animate-bounce-in">这里可以放置一些关键指标、简介或实时数据。</div>
|
|
||||||
<ul class="space-y-2">
|
|
||||||
<li class="flex items-center gap-2 animate-delay-400 animate-bounce-in"><span class="i-uil:chart-line text-2xl text-primary"></span> 指标一：<span class="font-bold">12345</span></li>
|
|
||||||
<li class="flex items-center gap-2 animate-delay-600 animate-bounce-in"><span class="i-uil:users-alt text-2xl text-accent"></span> 指标二：<span class="font-bold">6789</span></li>
|
|
||||||
<li class="flex items-center gap-2 animate-delay-600 animate-bounce-in"><span class="i-uil:clock text-2xl text-secondary"></span> 更新时间：<span class="font-bold">2024-06-01</span></li>
|
|
||||||
</ul>
|
|
||||||
</NCard>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 下方 ECharts 图表 -->
|
|
||||||
<div class="relative z-10 w-4/5 h-[320px] mt-12 rounded-3xl bg-white/10 backdrop-blur-md shadow-2xl animate-icon-in flex items-center justify-center">
|
|
||||||
<div ref="chartRef" class="w-full h-full"></div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
// 可根据需要自定义更多样式
|
.historic-data-container {
|
||||||
</style>
|
padding: 20px;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-container {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.n-data-table) {
|
||||||
|
.n-data-table-td {
|
||||||
|
padding: 12px 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user