From 1c7a139732c6464ac2b391ab36e3a7b85918737d Mon Sep 17 00:00:00 2001
From: wangyifeng <812766448@qq.com>
Date: Fri, 23 May 2025 11:21:41 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=84=E7=90=86=E5=8E=86=E5=8F=B2=E8=A1=A8?=
 =?UTF-8?q?=E6=A0=BC=E6=95=B0=E6=8D=AE=E6=A0=B9=E6=8D=AE=E7=AD=9B=E9=80=89?=
 =?UTF-8?q?=E6=9D=A1=E4=BB=B6=E8=B0=83=E7=94=A8=E6=8E=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/historic-stock/size1920/index.vue | 206 ++++++++++++--------
 1 file changed, 128 insertions(+), 78 deletions(-)

diff --git a/src/views/historic-stock/size1920/index.vue b/src/views/historic-stock/size1920/index.vue
index a1c5402..83170ba 100644
--- a/src/views/historic-stock/size1920/index.vue
+++ b/src/views/historic-stock/size1920/index.vue
@@ -11,9 +11,10 @@
           @select="handlePeriodChange"
           :value="state.selectedPeriod"
         >
-          <n-button
-            >{{ state.selectedPeriod }} <n-icon><chevron-down-outline /></n-icon
-          ></n-button>
+          <n-button>
+            {{ state.selectedPeriod }}
+            <n-icon><chevron-down-outline /></n-icon>
+          </n-button>
         </n-dropdown>
 
         <n-dropdown
@@ -22,10 +23,10 @@
           @select="handleDurationChange"
           :value="state.selectedDuration"
         >
-          <n-button
-            >{{ state.selectedDuration }}
-            <n-icon><chevron-down-outline /></n-icon
-          ></n-button>
+          <n-button>
+            {{ state.selectedDuration }}
+            <n-icon><chevron-down-outline /></n-icon>
+          </n-button>
         </n-dropdown>
       </div>
     </div>
@@ -40,123 +41,172 @@
 </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);
+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" },
-];
+  { 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: '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 state = reactive({
-  selectedPeriod: "Daily",
-  selectedDuration: "3 Months",
+  selectedPeriod: 'Daily',
+  selectedDuration: '3 Months',
   tableData: [],
-});
+})
 
 // 表格列定义
 const columns = [
   {
-    title: "Date",
-    key: "date",
-    align: "left",
+    title: 'Date',
+    key: 'date',
+    align: 'left',
   },
   {
-    title: "Open",
-    key: "open",
-    align: "center",
+    title: 'Open',
+    key: 'open',
+    align: 'center',
   },
   {
-    title: "High",
-    key: "high",
-    align: "center",
+    title: 'High',
+    key: 'high',
+    align: 'center',
   },
   {
-    title: "Low",
-    key: "low",
-    align: "center",
+    title: 'Low',
+    key: 'low',
+    align: 'center',
   },
   {
-    title: "Close",
-    key: "close",
-    align: "center",
+    title: 'Close',
+    key: 'close',
+    align: 'center',
   },
   {
-    title: "Adj. Close",
-    key: "adjClose",
-    align: "center",
+    title: 'Adj. Close',
+    key: 'adjClose',
+    align: 'center',
   },
   {
-    title: "Change",
-    key: "change",
-    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);
+      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",
+    title: 'Volume',
+    key: 'volume',
+    align: 'center',
   },
-];
+]
 
 // 处理下拉选项变更
 const handlePeriodChange = (key) => {
-  state.selectedPeriod = key;
-  getPageData();
-};
+  if (key === 'Annual') {
+    handleDurationChange('Full History')
+  }
+  state.selectedPeriod = key
+  getPageData()
+}
 
 const handleDurationChange = (key) => {
-  state.selectedDuration = key;
-  getPageData();
-};
+  state.selectedDuration = key
+  getPageData()
+}
 
 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;
+      '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格式
+      new Date(item[0]).toISOString().split('T')[0], // 转换时间戳为YYYY-MM-DD格式
       item[1],
-    ]);
-    console.log("接口数据", calcApiData);
-    state.tableData = defaultTableData;
+    ])
+    console.log('接口数据', calcApiData)
+    state.tableData = defaultTableData
   } catch (error) {
-    console.error("获取数据失败", 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);
-};
+  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">