From deb9834cd423441c3e67bcd1a249a9926b4fd1e4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=20=E5=85=83=E5=B1=B1?= <piercezzs@outlook.com>
Date: Fri, 23 May 2025 10:22:18 +0800
Subject: [PATCH] historic-stock

---
 src/views/historic-stock/index.vue          |   4 +-
 src/views/historic-stock/size1920/index.vue | 348 +++++++++++++++-----
 2 files changed, 260 insertions(+), 92 deletions(-)

diff --git a/src/views/historic-stock/index.vue b/src/views/historic-stock/index.vue
index cfc4094..9cc908b 100644
--- a/src/views/historic-stock/index.vue
+++ b/src/views/historic-stock/index.vue
@@ -3,8 +3,8 @@ import { computed } from "vue";
 import { useWindowSize } from "@vueuse/core";
 
 import size375 from "./size375/index.vue";
-import size768 from "./size768/index.vue";
-import size1440 from "./size1440/index.vue";
+import size768 from "./size1920/index.vue";
+import size1440 from "./size1920/index.vue";
 import size1920 from "./size1920/index.vue";
 import { useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";
diff --git a/src/views/historic-stock/size1920/index.vue b/src/views/historic-stock/size1920/index.vue
index a1c48ed..b6e6372 100644
--- a/src/views/historic-stock/size1920/index.vue
+++ b/src/views/historic-stock/size1920/index.vue
@@ -1,96 +1,264 @@
-<script setup>
-import { NCarousel, NCard } from "naive-ui";
-import { ref, onMounted } from "vue";
-import * as echarts from 'echarts';
-
-// 轮播图片示例
-const images = [
-  'https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=800&q=80',
-  'https://images.unsplash.com/photo-1465101046530-73398c7f28ca?auto=format&fit=crop&w=800&q=80',
-  'https://images.unsplash.com/photo-1519125323398-675f0ddb6308?auto=format&fit=crop&w=800&q=80',
-];
-
-// ECharts 实例
-const chartRef = ref();
-let chartInstance = null;
-
-onMounted(() => {
-  if (chartRef.value) {
-    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
-      }]
-    });
-  }
-});
-</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 class="historic-data-container">
+    <img src="@/assets/image/historic-stock.png" alt="1" />
+
+    <div class="header">
+      <h1 class="title">Historical Data</h1>
+      <div class="filter-container">
+        <n-dropdown
+          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>
-    <!-- 下方 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>
+
+    <n-data-table
+      :columns="columns"
+      :data="state.tableData"
+      :bordered="false"
+      :single-line="false"
+    />
+  </div>
 </template>
 
-<style scoped lang="scss">
-// 可根据需要自定义更多样式
-</style>
+<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" },
+];
+
+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" },
+];
+
+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(() => {
+  getPageData();
+});
+
+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>
+
+<style scoped lang="scss">
+.historic-data-container {
+  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>