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

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

    <n-data-table
      :columns="columns"
      :data="state.tableData"
      :bordered="false"
      :single-line="false"
    />
  </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";

// 数据筛选选项
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>