Merge branch 'main' of http://172.16.100.91:3000/scout666/fiee-official-website

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;

src/views/historic-stock/size1920/index.vue

@@ -1,9 +1,13 @@
 <template>
-  <div class="historic-data-container">
+  <div class="historic-data-container" style="margin-bottom: 100px">
-    <img src="@/assets/image/historic-stock.png" alt="1" />
+    <img
+      src="@/assets/image/historic-stock.png"
+      alt="1"
+      style="max-width: 100%; margin: 0 auto"
+    />
 
-    <div class="header">
+    <div class="header mt-[20px]">
-      <h1 class="title">Historical Data</h1>
+      <div class="title">Historical Data</div>
       <div class="filter-container">
         <n-dropdown
           trigger="click"
@@ -11,9 +15,10 @@
           @select="handlePeriodChange"
           :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
@@ -22,147 +27,308 @@
           @select="handleDurationChange"
           :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>
       </div>
     </div>
 
     <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 { reactive, onMounted, h, computed } from "vue";
 import axios from "axios";
-import { ChevronDownOutline } from "@vicons/ionicons5";
+import {
+  ChevronDownOutline,
+  ChevronBackOutline,
+  ChevronForwardOutline,
+  ArrowUpOutline,
+} from "@vicons/ionicons5";
 import defaultTableData from "../data";
 console.log("defaultTableData", defaultTableData);
+
 // 数据筛选选项
 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 = [
-  { 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 pageSizeOptions = [
+  { label: "50", key: 50 },
+  { label: "100", key: 100 },
+  { label: "500", key: 500 },
+  { label: "1000", key: 1000 },
 ];
 
 const state = reactive({
-  selectedPeriod: "Daily",
+  selectedPeriod: 'Daily',
-  selectedDuration: "3 Months",
+  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 = [
   {
-    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) {
-      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) => {
-  state.selectedPeriod = key;
+  if (key === 'Annual') {
-  getPageData();
+    handleDurationChange('Full History')
-};
+  }
+  state.selectedPeriod = key
+  getPageData()
+}
 
 const handleDurationChange = (key) => {
-  state.selectedDuration = key;
+  state.selectedDuration = 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(() => {
-  getPageDefaultData();
+  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;
-    // 转换为日期格式
+
+    // 转换为日期格式："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;
+
-  } catch (error) {
+    // 使用API数据更新defaultTableData中的close和adjClose值
-    console.error("获取数据失败", error);
+    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)
+  }
 }
-};
 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>
 
 <style scoped lang="scss">
 .historic-data-container {
   padding: 20px;
-  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
 
   .header {
     display: flex;
@@ -171,7 +337,7 @@ const getPageData = async () => {
     margin-bottom: 20px;
 
     .title {
-      font-size: 24px;
+      font-size: 40px;
       font-weight: bold;
       margin: 0;
     }
@@ -182,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;