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";
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" },
];

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(() => {
  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;
    // 转换为日期格式
    let calcApiData = originalData.map((item) => [
      new Date(item[0]).toISOString().split("T")[0], // 转换时间戳为YYYY-MM-DD格式
      item[1],
    ]);
    console.log("接口数据", calcApiData);
    state.tableData = defaultTableData;
  } catch (error) {
    console.error("获取数据失败", error);
  }
};
const getPageData = async () => {
  let url =
    "https://stockanalysis.com/api/symbol/a/OTC-MINM/history?type=chart";
  const res = await axios.get(url);
};
</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>