fiee-official-website/src/views/historic-stock/size1440/index.vue

<template>
  <div class="historic-data-container" style="margin-bottom: 40px">
    <div class="echarts-container">
      <customEcharts></customEcharts>
    </div>

    <div class="header mt-[20px]">
      <div class="title">Historical Data</div>
      <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>

    <n-data-table
      :columns="columns"
      :data="paginatedData"
      :bordered="false"
      :single-line="false"
      :scroll-x="1200"
    />

    <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, computed } from "vue";
import axios from "axios";
import {
  ChevronDownOutline,
  ChevronBackOutline,
  ChevronForwardOutline,
  ArrowUpOutline,
} from "@vicons/ionicons5";
import defaultTableData from "../data";
// console.log('defaultTableData', defaultTableData)
import customEcharts from "@/components/customEcharts/index.vue";

// 数据筛选选项
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" },
  // { 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: "6 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",
    key: "date",
    align: "left",
    fixed: "left",
    width: 150,
  },
  {
    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;
  if (key === "Annual") {
    handleDurationChange("Full History");
    return;
  }
  if (key === "Monthly") {
    handleDurationChange("10 Years");
    return;
  }
  if (key === "Quarterly") {
    handleDurationChange("10 Years");
    return;
  }
  getPageData();
};

const handleDurationChange = (key) => {
  state.selectedDuration = key;
  state.currentPage = 1;
  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 = () => {
  // 尝试多种方法
  // 1. 使用document.body
  document.body.scrollTop = 0;
  // 2. 使用document.documentElement (HTML元素)
  document.documentElement.scrollTop = 0;
  // 3. 使用scrollIntoView
  document.querySelector(".historic-data-container").scrollIntoView({
    behavior: "smooth",
    block: "start",
  });
};
onMounted(() => {
  getPageData();
});

const getPageDefaultData = async () => {
  try {
    let url =
      "https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=Daily&range=3M";
    const res = await axios.get(url);
    let originalData = res.data.data;

    // 转换为日期格式："Nov 26, 2024"
    let calcApiData = originalData.map((item) => [
      new Date(item[0]).toLocaleDateString("en-US", {
        month: "short",
        day: "numeric",
        year: "numeric",
      }),
      item[1],
    ]);
    // 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)
  }
};
const getPageData = async () => {
  let range = "";
  let now = new Date();
  const last = new Date(now);
  last.setMonth(now.getMonth() - 6);
  let fromDate = last;
  let toDate =
    now.getFullYear() +
    "-" +
    String(now.getMonth() + 1).padStart(2, "0") +
    "-" +
    String(now.getDate()).padStart(2, "0");
  if (state.selectedDuration === "3 Months") {
    range = "3M";
    const last = new Date(now);
    last.setMonth(now.getMonth() - 3);
    fromDate = last;
  } else if (state.selectedDuration === "6 Months") {
    range = "6M";
    const last = new Date(now);
    last.setMonth(now.getMonth() - 6);
    fromDate = last;
  } else if (state.selectedDuration === "Year to Date") {
    range = "YTD";
    fromDate = new Date(now.getFullYear(), 0, 1);
  } else if (state.selectedDuration === "1 Year") {
    range = "1Y";
    const last = new Date(now);
    last.setFullYear(now.getFullYear() - 1);
    fromDate = last;
  } else if (state.selectedDuration === "5 Years") {
    range = "5Y";
    const last = new Date(now);
    last.setFullYear(now.getFullYear() - 5);
    fromDate = last;
  } else if (state.selectedDuration === "10 Years") {
    range = "10Y";
    const last = new Date(now);
    last.setFullYear(now.getFullYear() - 10);
    fromDate = last;
  } else if (state.selectedDuration === "Full History") {
    range = "Max";
    fromDate = new Date("2009-10-07");
  }
  let finalFromDate =
    fromDate.getFullYear() +
    "-" +
    String(fromDate.getMonth() + 1).padStart(2, "0") +
    "-" +
    String(fromDate.getDate()).padStart(2, "0");
  // let url = `https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=${state.selectedPeriod}&range=${range}`
  let url =
    "https://common.szjixun.cn/api/stock/history/list?from=" +
    finalFromDate +
    "&to=" +
    toDate;
  const res = await axios.get(url);
  // console.error(res)
  if (res.status === 200) {
    if (res.data.status === 0) {
      // 转换为日期格式："Nov 26, 2024"
      let resultData = res.data.data.map((item) => {
        return {
          date: new Date(item.date).toLocaleDateString("en-US", {
            month: "short",
            day: "numeric",
            year: "numeric",
          }),
          open: item.open != null ? Number(item.open).toFixed(2) : "",
          high: item.high != null ? Number(item.high).toFixed(2) : "",
          low: item.low != null ? Number(item.low).toFixed(2) : "",
          close: item.close != null ? Number(item.close).toFixed(2) : "",
          adjClose: item.close != null ? Number(item.close).toFixed(2) : "",
          change:
            item.changePercent != null
              ? Number(item.changePercent).toFixed(2) + "%"
              : "",
          volume: item.volume,
        };
      });
      state.tableData = resultData;
    }
  }
};
</script>

<style scoped lang="scss">
.historic-data-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    .title {
      font-size: 40px;
      font-weight: bold;
      margin: 0;
    }

    .filter-container {
      display: flex;
      gap: 10px;
    }
  }

  .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;
    }
  }
}
</style>