Merge branch 'wyfMain-dev'

Merge branch 'main' of https://gitea-inner.fontree.cn/scout666/fiee-official-website
historic-stock
2025-05-23 11:24:04 +08:00 · 2025-05-23 11:21:03 +08:00 · 2025-05-23 11:21:02 +08:00 · 2025-05-23 11:04:16 +08:00 · 2025-05-23 11:04:14 +08:00
6 changed files with 291 additions and 42 deletions
--- a/package.json
+++ b/package.json
@ -17,6 +17,7 @@
    "@vicons/utils": "^0.1.4",
    "axios": "^1.7.3",
    "cnjm-postcss-px-to-viewport": "^1.0.1",
+    "countup.js": "^2.8.2",
    "echarts": "^5.6.0",
    "gsap": "^3.12.5",
    "jsdom": "^24.0.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -26,6 +26,9 @@ importers:
      cnjm-postcss-px-to-viewport:
        specifier: ^1.0.1
        version: 1.0.1(postcss@8.4.40)
+      countup.js:
+        specifier: ^2.8.2
+        version: 2.8.2
      echarts:
        specifier: ^5.6.0
        version: 5.6.0
@ -1810,6 +1813,9 @@ packages:
  core-util-is@1.0.3:
    resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}

+  countup.js@2.8.2:
+    resolution: {integrity: sha512-UtRoPH6udaru/MOhhZhI/GZHJKAyAxuKItD2Tr7AbrqrOPBX/uejWBBJt8q86169AMqKkE9h9/24kFWbUk/Bag==}
+
  cross-spawn@5.1.0:
    resolution: {integrity: sha512-pTgQJ5KC0d2hcY8eyL1IzlBPYjTkyH72XRZPnLyKus2mBfNjQs3klqbJU2VILqZryAZUt9JOb3h/mWMy23/f5A==}

@ -5782,6 +5788,8 @@ snapshots:

  core-util-is@1.0.3: {}

+  countup.js@2.8.2: {}
+
  cross-spawn@5.1.0:
    dependencies:
      lru-cache: 4.1.5
--- a/src/components/NumberScroll.vue
+++ b/src/components/NumberScroll.vue
@ -0,0 +1,55 @@
+<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> 
--- a/src/views/historic-stock/data.js
+++ b/src/views/historic-stock/data.js
@ -1210,6 +1210,9 @@ let defaultTableData = [
        "volume": "561"
    }
 ]
-defaultTableData.map(item=>item.close='')
+defaultTableData.map(item => {
+    item.close = ''
+    item.adjClose = ''
+})

 export default defaultTableData;
--- a/src/views/historic-stock/size1920/index.vue
+++ b/src/views/historic-stock/size1920/index.vue
@ -1,9 +1,13 @@
 <template>
-  <div class="historic-data-container">
-    <img src="@/assets/image/historic-stock.png" alt="1" />
+  <div class="historic-data-container" style="margin-bottom: 100px">
+    <img
+      src="@/assets/image/historic-stock.png"
+      alt="1"
+      style="max-width: 100%; margin: 0 auto"
+    />

-    <div class="header">
-      <h1 class="title">Historical Data</h1>
+    <div class="header mt-[20px]">
+      <div class="title">Historical Data</div>
      <div class="filter-container">
        <n-dropdown
          trigger="click"
@ -33,20 +37,58 @@

    <n-data-table
      :columns="columns"
-      :data="state.tableData"
+      :data="paginatedData"
      :bordered="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>
 </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'
-import defaultTableData from '../data'
-console.log('defaultTableData', defaultTableData)
+import { NDataTable, NButton, NDropdown, NIcon } from "naive-ui";
+import { reactive, onMounted, h, computed } from "vue";
+import axios from "axios";
+import {
+  ChevronDownOutline,
+  ChevronBackOutline,
+  ChevronForwardOutline,
+  ArrowUpOutline,
+} from "@vicons/ionicons5";
+import defaultTableData from "../data";
+console.log("defaultTableData", defaultTableData);
+
 // 数据筛选选项
 const periodOptions = [
  { label: 'Daily', key: 'Daily' },
@ -66,11 +108,33 @@ const durationOptions = [
  { 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({
  selectedPeriod: 'Daily',
  selectedDuration: '3 Months',
  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 = [
@ -135,24 +199,75 @@ const handleDurationChange = (key) => {
  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(() => {
  getPageDefaultData()
 })

 const getPageDefaultData = 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)
-    let originalData = res.data.data
-    // 转换为日期格式
+      "https://stockanalysis.com/api/symbol/a/OTC-MINM/history?type=chart";
+    const res = await axios.get(url);
+    let originalData = res.data.data;
+
+    // 转换为日期格式："Nov 26, 2024"
    let calcApiData = originalData.map((item) => [
-      new Date(item[0]).toISOString().split('T')[0], // 转换时间戳为YYYY-MM-DD格式
+      new Date(item[0]).toLocaleDateString("en-US", {
+        month: "short",
+        day: "numeric",
+        year: "numeric",
+      }),
      item[1],
-    ])
-    console.log('接口数据', calcApiData)
-    state.tableData = defaultTableData
+    ]);
+    console.log("接口数据", calcApiData);
+
+    // 使用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) {
    console.error('获取数据失败', error)
  }
@ -212,7 +327,8 @@ const getPageData = async () => {
 <style scoped lang="scss">
 .historic-data-container {
  padding: 20px;
-  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;

  .header {
    display: flex;
@ -221,7 +337,7 @@ const getPageData = async () => {
    margin-bottom: 20px;

    .title {
-      font-size: 24px;
+      font-size: 40px;
      font-weight: bold;
      margin: 0;
    }
@ -232,6 +348,72 @@ 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) {
    .n-data-table-td {
      padding: 12px 8px;
--- a/src/views/stock-quote/size1920/index.vue
+++ b/src/views/stock-quote/size1920/index.vue
@ -8,38 +8,38 @@ getStockQuate()
 <template>
  <main
    ref="main"
-    class="min-h-80 flex flex-col md:flex-row justify-center items-center gap-12   p-12 rounded-3xl  animate-bounce-in"
+    class="flex flex-col md:flex-row justify-center items-center gap-32 rounded-3xl "
  >
    <!-- 左侧大号价格 -->
-    <section class="flex flex-col items-center justify-center glass-card p-14 rounded-2xl shadow-xl animate-bounce-in">
-      <div class="text-7xl font-extrabold text-primary animate-bg-move select-none drop-shadow-lg">$1.98</div>
-      <div class="mt-4 text-xl text-gray-500 font-semibold tracking-widest">NASDAQ: <span class="text-black">UK</span></div>
+    <section class="flex flex-col items-center justify-center glass-card p-32 rounded-2xl shadow-xl ">
+      <div class="text-9xl 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>
    </section>
    <!-- 右侧信息卡片 -->
-    <section class="grid grid-cols-2 gap-8">
+    <section class="grid grid-cols-2 gap-16">
      <div class="info-card">
-        <div class="text-xs text-gray-400">Open</div>
-        <div class="text-xl font-bold">{{ stockQuote.Open }}</div>
+        <div class="text-lg text-gray-400">Open</div>
+        <div class="text-3xl font-bold">{{ stockQuote.Open }}</div>
      </div>
      <div class="info-card">
-        <div class="text-xs text-gray-400">Change</div>
-        <div class="text-xl font-bold text-red-500 animate-bounce-in">{{ stockQuote.change?.join('') }}</div>
+        <div class="text-lg text-gray-400">Change</div>
+        <div class="text-3xl font-bold text-red-500 ">{{ stockQuote.change?.join('') }}</div>
      </div>
      <div class="info-card">
-        <div class="text-xs text-gray-400">Day's Range</div>
-        <div class="text-xl font-bold">{{ stockQuote.DaysRange }}</div>
+        <div class="text-lg text-gray-400">Day's Range</div>
+        <div class="text-3xl font-bold">{{ stockQuote.DaysRange }}</div>
      </div>
      <div class="info-card">
-        <div class="text-xs text-gray-400">52-Week Range</div>
-        <div class="text-xl font-bold">{{ stockQuote.Week52Range }}</div>
+        <div class="text-lg text-gray-400">52-Week Range</div>
+        <div class="text-3xl font-bold">{{ stockQuote.Week52Range }}</div>
      </div>
      <div class="info-card">
-        <div class="text-xs text-gray-400">Volume</div>
-        <div class="text-xl font-bold">{{ stockQuote.Volume }}</div>
+        <div class="text-lg text-gray-400">Volume</div>
+        <div class="text-3xl font-bold">{{ stockQuote.Volume }}</div>
      </div>
      <div class="info-card">
-        <div class="text-xs text-gray-400">Market Cap</div>
-        <div class="text-xl font-bold">{{ stockQuote.MarketCap }}</div>
+        <div class="text-lg text-gray-400">Market Cap</div>
+        <div class="text-3xl font-bold">{{ stockQuote.MarketCap }}</div>
      </div>
    </section>
  </main>
@ -54,6 +54,6 @@ getStockQuate()
  box-shadow: 0 8px 32px 0 rgba(31,38,135,0.18);
 }
 .info-card {
-  @apply glass-card p-6 rounded-xl flex flex-col items-start gap-1 animate-bounce-in hover:scale-105 transition-transform duration-300;
+  @apply glass-card p-6 rounded-xl flex flex-col items-start gap-1  hover:scale-105 transition-transform duration-300;
 }
 </style>
Author	SHA1	Message	Date
wangyifeng	524caed5f2	Merge branch 'wyfMain-dev'	2025-05-23 11:24:04 +08:00
张元山	b59215e5b0	Merge branch 'main' of https://gitea-inner.fontree.cn/scout666/fiee-official-website	2025-05-23 11:21:03 +08:00
张元山	77fe06694c	historic-stock	2025-05-23 11:21:02 +08:00
Phoenix	cfc22f0b1e	Merge branch 'main' of http://172.16.100.91:3000/scout666/fiee-official-website	2025-05-23 11:04:16 +08:00
Phoenix	a206bcbc4e	新增 countup.js 依赖，并优化股票报价组件样式，调整信息展示的排版和大小。	2025-05-23 11:04:14 +08:00