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

<template>
  <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 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"
    />

    <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);

// 数据筛选选项
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: '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',
    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) => {
  if (key === 'Annual') {
    handleDurationChange('Full History')
  }
  state.selectedPeriod = key
  getPageData()
}

const handleDurationChange = (key) => {
  state.selectedDuration = 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 {
    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]).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 = ''
  if (state.selectedDuration === '3 Months') {
    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;
  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>