scout666/fiee-official-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

del no use

Browse Source
This commit is contained in:
yuanshan 2025-09-29 09:32:24 +08:00
parent fd8b03ad3e
commit 318f850885
5 changed files with 522 additions and 537 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/image/historic-stock-375.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 23 KiB

BIN
src/assets/image/historic-stock.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 36 KiB

353
src/views/historic-stock/size1440/index.vue
View File

@ -1,10 +1,5 @@
<template> <template>
<div class="historic-data-container" style="margin-bottom: 40px"> <div class="historic-data-container" style="margin-bottom: 40px">
<!-- <img
src="@/assets/image/historic-stock.png"
alt="1"
style="max-width: 100%; margin: 0 auto"
/> -->
<div class="echarts-container"> <div class="echarts-container">
<customEcharts></customEcharts> <customEcharts></customEcharts>
</div> </div>
@ -85,202 +80,202 @@
</template> </template>
<script setup> <script setup>
import { NDataTable, NButton, NDropdown, NIcon } from 'naive-ui' import { NDataTable, NButton, NDropdown, NIcon } from "naive-ui";
import { reactive, onMounted, h, computed } from 'vue' import { reactive, onMounted, h, computed } from "vue";
import axios from 'axios' import axios from "axios";
import { import {
ChevronDownOutline, ChevronDownOutline,
ChevronBackOutline, ChevronBackOutline,
ChevronForwardOutline, ChevronForwardOutline,
ArrowUpOutline, ArrowUpOutline,
} from '@vicons/ionicons5' } from "@vicons/ionicons5";
import defaultTableData from '../data' import defaultTableData from "../data";
// console.log('defaultTableData', defaultTableData) // console.log('defaultTableData', defaultTableData)
import customEcharts from '@/components/customEcharts/index.vue' import customEcharts from "@/components/customEcharts/index.vue";
// 数据筛选选项 // 数据筛选选项
const periodOptions = [ const periodOptions = [
{ label: 'Daily', key: 'Daily' }, { label: "Daily", key: "Daily" },
{ label: 'Weekly', key: 'Weekly' }, { label: "Weekly", key: "Weekly" },
{ label: 'Monthly', key: 'Monthly' }, { label: "Monthly", key: "Monthly" },
{ label: 'Quarterly', key: 'Quarterly' }, { label: "Quarterly", key: "Quarterly" },
{ label: 'Annual', key: 'Annual' }, { label: "Annual", key: "Annual" },
] ];
const durationOptions = [ const durationOptions = [
{ label: '3 Months', key: '3 Months' }, { label: "3 Months", key: "3 Months" },
{ label: '6 Months', key: '6 Months' }, { label: "6 Months", key: "6 Months" },
{ label: 'Year to Date', key: 'Year to Date' }, { label: "Year to Date", key: "Year to Date" },
{ label: '1 Year', key: '1 Year' }, { label: "1 Year", key: "1 Year" },
{ label: '5 Years', key: '5 Years' }, { label: "5 Years", key: "5 Years" },
{ label: '10 Years', key: '10 Years' }, { label: "10 Years", key: "10 Years" },
// { label: 'Full History', key: 'Full History', disabled: true }, // { label: 'Full History', key: 'Full History', disabled: true },
] ];
// 分页大小选项 // 分页大小选项
const pageSizeOptions = [ const pageSizeOptions = [
{ label: '50', key: 50 }, { label: "50", key: 50 },
{ label: '100', key: 100 }, { label: "100", key: 100 },
{ label: '500', key: 500 }, { label: "500", key: 500 },
{ label: '1000', key: 1000 }, { label: "1000", key: 1000 },
] ];
const state = reactive({ const state = reactive({
selectedPeriod: 'Daily', selectedPeriod: "Daily",
selectedDuration: '6 Months', selectedDuration: "6 Months",
tableData: [], tableData: [],
currentPage: 1, currentPage: 1,
pageSize: 50, pageSize: 50,
}) });
// 计算总页数 // 计算总页数
const totalPages = computed(() => { const totalPages = computed(() => {
return Math.ceil(state.tableData.length / state.pageSize) return Math.ceil(state.tableData.length / state.pageSize);
}) });
// 计算当前页的数据 // 计算当前页的数据
const paginatedData = computed(() => { const paginatedData = computed(() => {
const start = (state.currentPage - 1) * state.pageSize const start = (state.currentPage - 1) * state.pageSize;
const end = start + state.pageSize const end = start + state.pageSize;
return state.tableData.slice(start, end) return state.tableData.slice(start, end);
}) });
// 表格列定义 // 表格列定义
const columns = [ const columns = [
{ {
title: 'Date', title: "Date",
key: 'date', key: "date",
align: 'left', align: "left",
fixed: 'left', fixed: "left",
width: 150, width: 150,
}, },
{ {
title: 'Open', title: "Open",
key: 'open', key: "open",
align: 'center', align: "center",
}, },
{ {
title: 'High', title: "High",
key: 'high', key: "high",
align: 'center', align: "center",
}, },
{ {
title: 'Low', title: "Low",
key: 'low', key: "low",
align: 'center', align: "center",
}, },
{ {
title: 'Close', title: "Close",
key: 'close', key: "close",
align: 'center', align: "center",
}, },
{ {
title: 'Adj. Close', title: "Adj. Close",
key: 'adjClose', key: "adjClose",
align: 'center', align: "center",
}, },
{ {
title: 'Change', title: "Change",
key: 'change', key: "change",
align: 'center', align: "center",
render(row) { render(row) {
const value = parseFloat(row.change) const value = parseFloat(row.change);
const color = value < 0 ? '#ff4d4f' : value > 0 ? '#52c41a' : '' const color = value < 0 ? "#ff4d4f" : value > 0 ? "#52c41a" : "";
return h('span', { style: { color } }, row.change) return h("span", { style: { color } }, row.change);
}, },
}, },
{ {
title: 'Volume', title: "Volume",
key: 'volume', key: "volume",
align: 'center', align: "center",
}, },
] ];
// 处理下拉选项变更 // 处理下拉选项变更
const handlePeriodChange = (key) => { const handlePeriodChange = (key) => {
state.selectedPeriod = key state.selectedPeriod = key;
if (key === 'Annual') { if (key === "Annual") {
handleDurationChange('Full History') handleDurationChange("Full History");
return return;
} }
if (key === 'Monthly') { if (key === "Monthly") {
handleDurationChange('10 Years') handleDurationChange("10 Years");
return return;
} }
if (key === 'Quarterly') { if (key === "Quarterly") {
handleDurationChange('10 Years') handleDurationChange("10 Years");
return return;
} }
getPageData() getPageData();
} };
const handleDurationChange = (key) => { const handleDurationChange = (key) => {
state.selectedDuration = key state.selectedDuration = key;
state.currentPage = 1 state.currentPage = 1;
getPageData() getPageData();
} };
// 处理分页 // 处理分页
const handlePrevPage = () => { const handlePrevPage = () => {
if (state.currentPage === 1) { if (state.currentPage === 1) {
return return;
} }
state.currentPage-- state.currentPage--;
} };
const handleNextPage = () => { const handleNextPage = () => {
if (state.currentPage >= totalPages.value) { if (state.currentPage >= totalPages.value) {
return return;
} }
state.currentPage++ state.currentPage++;
} };
const handlePageSizeChange = (size) => { const handlePageSizeChange = (size) => {
state.pageSize = size state.pageSize = size;
state.currentPage = 1 // 重置到第一页 state.currentPage = 1; // 重置到第一页
} };
// 回到顶部 // 回到顶部
const scrollToTop = () => { const scrollToTop = () => {
// 尝试多种方法 // 尝试多种方法
// 1. 使用document.body // 1. 使用document.body
document.body.scrollTop = 0 document.body.scrollTop = 0;
// 2. 使用document.documentElement (HTML元素) // 2. 使用document.documentElement (HTML元素)
document.documentElement.scrollTop = 0 document.documentElement.scrollTop = 0;
// 3. 使用scrollIntoView // 3. 使用scrollIntoView
document.querySelector('.historic-data-container').scrollIntoView({ document.querySelector(".historic-data-container").scrollIntoView({
behavior: 'smooth', behavior: "smooth",
block: 'start', block: "start",
}) });
} };
onMounted(() => { onMounted(() => {
getPageData() getPageData();
}) });
const getPageDefaultData = async () => { const getPageDefaultData = async () => {
try { try {
let url = let url =
'https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=Daily&range=3M' "https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=Daily&range=3M";
const res = await axios.get(url) const res = await axios.get(url);
let originalData = res.data.data let originalData = res.data.data;
// 转换为日期格式："Nov 26, 2024" // 转换为日期格式："Nov 26, 2024"
let calcApiData = originalData.map((item) => [ let calcApiData = originalData.map((item) => [
new Date(item[0]).toLocaleDateString('en-US', { new Date(item[0]).toLocaleDateString("en-US", {
month: 'short', month: "short",
day: 'numeric', day: "numeric",
year: 'numeric', year: "numeric",
}), }),
item[1], item[1],
]) ]);
// console.log('接口数据', calcApiData) // console.log('接口数据', calcApiData)
// 使用API数据更新defaultTableData中的close和adjClose值 // 使用API数据更新defaultTableData中的close和adjClose值
const updatedTableData = defaultTableData.map((tableItem) => { const updatedTableData = defaultTableData.map((tableItem) => {
// 查找对应日期的API数据 // 查找对应日期的API数据
const matchedApiData = calcApiData.find( const matchedApiData = calcApiData.find(
(apiItem) => apiItem[0] === tableItem.date, (apiItem) => apiItem[0] === tableItem.date
) );
if (matchedApiData) { if (matchedApiData) {
// 更新close和adjClose值 // 更新close和adjClose值
@ -288,100 +283,100 @@ const getPageDefaultData = async () => {
...tableItem, ...tableItem,
close: matchedApiData[1].toFixed(2), close: matchedApiData[1].toFixed(2),
adjClose: matchedApiData[1].toFixed(2), adjClose: matchedApiData[1].toFixed(2),
} };
} }
return tableItem return tableItem;
}) });
state.tableData = updatedTableData state.tableData = updatedTableData;
} catch (error) { } catch (error) {
// console.error('获取数据失败', error) // console.error('获取数据失败', error)
} }
} };
const getPageData = async () => { const getPageData = async () => {
let range = '' let range = "";
let now = new Date() let now = new Date();
const last = new Date(now) const last = new Date(now);
last.setMonth(now.getMonth() - 6) last.setMonth(now.getMonth() - 6);
let fromDate = last let fromDate = last;
let toDate = let toDate =
now.getFullYear() + now.getFullYear() +
'-' + "-" +
String(now.getMonth() + 1).padStart(2, '0') + String(now.getMonth() + 1).padStart(2, "0") +
'-' + "-" +
String(now.getDate()).padStart(2, '0') String(now.getDate()).padStart(2, "0");
if (state.selectedDuration === '3 Months') { if (state.selectedDuration === "3 Months") {
range = '3M' range = "3M";
const last = new Date(now) const last = new Date(now);
last.setMonth(now.getMonth() - 3) last.setMonth(now.getMonth() - 3);
fromDate = last fromDate = last;
} else if (state.selectedDuration === '6 Months') { } else if (state.selectedDuration === "6 Months") {
range = '6M' range = "6M";
const last = new Date(now) const last = new Date(now);
last.setMonth(now.getMonth() - 6) last.setMonth(now.getMonth() - 6);
fromDate = last fromDate = last;
} else if (state.selectedDuration === 'Year to Date') { } else if (state.selectedDuration === "Year to Date") {
range = 'YTD' range = "YTD";
fromDate = new Date(now.getFullYear(), 0, 1) fromDate = new Date(now.getFullYear(), 0, 1);
} else if (state.selectedDuration === '1 Year') { } else if (state.selectedDuration === "1 Year") {
range = '1Y' range = "1Y";
const last = new Date(now) const last = new Date(now);
last.setFullYear(now.getFullYear() - 1) last.setFullYear(now.getFullYear() - 1);
fromDate = last fromDate = last;
} else if (state.selectedDuration === '5 Years') { } else if (state.selectedDuration === "5 Years") {
range = '5Y' range = "5Y";
const last = new Date(now) const last = new Date(now);
last.setFullYear(now.getFullYear() - 5) last.setFullYear(now.getFullYear() - 5);
fromDate = last fromDate = last;
} else if (state.selectedDuration === '10 Years') { } else if (state.selectedDuration === "10 Years") {
range = '10Y' range = "10Y";
const last = new Date(now) const last = new Date(now);
last.setFullYear(now.getFullYear() - 10) last.setFullYear(now.getFullYear() - 10);
fromDate = last fromDate = last;
} else if (state.selectedDuration === 'Full History') { } else if (state.selectedDuration === "Full History") {
range = 'Max' range = "Max";
fromDate = new Date('2009-10-07') fromDate = new Date("2009-10-07");
} }
let finalFromDate = let finalFromDate =
fromDate.getFullYear() + fromDate.getFullYear() +
'-' + "-" +
String(fromDate.getMonth() + 1).padStart(2, '0') + String(fromDate.getMonth() + 1).padStart(2, "0") +
'-' + "-" +
String(fromDate.getDate()).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://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=${state.selectedPeriod}&range=${range}`
let url = let url =
'https://common.szjixun.cn/api/stock/history/list?from=' + "https://common.szjixun.cn/api/stock/history/list?from=" +
finalFromDate + finalFromDate +
'&to=' + "&to=" +
toDate toDate;
const res = await axios.get(url) const res = await axios.get(url);
// console.error(res) // console.error(res)
if (res.status === 200) { if (res.status === 200) {
if (res.data.status === 0) { if (res.data.status === 0) {
// 转换为日期格式："Nov 26, 2024" // 转换为日期格式："Nov 26, 2024"
let resultData = res.data.data.map((item) => { let resultData = res.data.data.map((item) => {
return { return {
date: new Date(item.date).toLocaleDateString('en-US', { date: new Date(item.date).toLocaleDateString("en-US", {
month: 'short', month: "short",
day: 'numeric', day: "numeric",
year: 'numeric', year: "numeric",
}), }),
open: item.open != null ? Number(item.open).toFixed(2) : '', open: item.open != null ? Number(item.open).toFixed(2) : "",
high: item.high != null ? Number(item.high).toFixed(2) : '', high: item.high != null ? Number(item.high).toFixed(2) : "",
low: item.low != null ? Number(item.low).toFixed(2) : '', low: item.low != null ? Number(item.low).toFixed(2) : "",
close: item.close != null ? Number(item.close).toFixed(2) : '', close: item.close != null ? Number(item.close).toFixed(2) : "",
adjClose: item.close != null ? Number(item.close).toFixed(2) : '', adjClose: item.close != null ? Number(item.close).toFixed(2) : "",
change: change:
item.changePercent != null item.changePercent != null
? Number(item.changePercent).toFixed(2) + '%' ? Number(item.changePercent).toFixed(2) + "%"
: '', : "",
volume: item.volume, volume: item.volume,
} };
}) });
state.tableData = resultData state.tableData = resultData;
} }
} }
} };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">

353
src/views/historic-stock/size375/index.vue
View File

@ -1,10 +1,5 @@
<template> <template>
<div class="historic-data-container" style="margin-bottom: 40px"> <div class="historic-data-container" style="margin-bottom: 40px">
<!-- <img
src="@/assets/image/historic-stock-375.png"
alt="1"
style="max-width: 100%; margin: 0 auto"
/> -->
<div class="echarts-container"> <div class="echarts-container">
<customEcharts></customEcharts> <customEcharts></customEcharts>
</div> </div>
@ -83,202 +78,202 @@
</template> </template>
<script setup> <script setup>
import { NDataTable, NButton, NDropdown, NIcon } from 'naive-ui' import { NDataTable, NButton, NDropdown, NIcon } from "naive-ui";
import { reactive, onMounted, h, computed } from 'vue' import { reactive, onMounted, h, computed } from "vue";
import axios from 'axios' import axios from "axios";
import { import {
ChevronDownOutline, ChevronDownOutline,
ChevronBackOutline, ChevronBackOutline,
ChevronForwardOutline, ChevronForwardOutline,
ArrowUpOutline, ArrowUpOutline,
} from '@vicons/ionicons5' } from "@vicons/ionicons5";
import defaultTableData from '../data' import defaultTableData from "../data";
// console.log('defaultTableData', defaultTableData) // console.log('defaultTableData', defaultTableData)
import customEcharts from '@/components/customEcharts/index.vue' import customEcharts from "@/components/customEcharts/index.vue";
// 数据筛选选项 // 数据筛选选项
const periodOptions = [ const periodOptions = [
{ label: 'Daily', key: 'Daily' }, { label: "Daily", key: "Daily" },
{ label: 'Weekly', key: 'Weekly' }, { label: "Weekly", key: "Weekly" },
{ label: 'Monthly', key: 'Monthly' }, { label: "Monthly", key: "Monthly" },
{ label: 'Quarterly', key: 'Quarterly' }, { label: "Quarterly", key: "Quarterly" },
{ label: 'Annual', key: 'Annual' }, { label: "Annual", key: "Annual" },
] ];
const durationOptions = [ const durationOptions = [
{ label: '3 Months', key: '3 Months' }, { label: "3 Months", key: "3 Months" },
{ label: '6 Months', key: '6 Months' }, { label: "6 Months", key: "6 Months" },
{ label: 'Year to Date', key: 'Year to Date' }, { label: "Year to Date", key: "Year to Date" },
{ label: '1 Year', key: '1 Year' }, { label: "1 Year", key: "1 Year" },
{ label: '5 Years', key: '5 Years' }, { label: "5 Years", key: "5 Years" },
{ label: '10 Years', key: '10 Years' }, { label: "10 Years", key: "10 Years" },
// { label: 'Full History', key: 'Full History', disabled: true }, // { label: 'Full History', key: 'Full History', disabled: true },
] ];
// 分页大小选项 // 分页大小选项
const pageSizeOptions = [ const pageSizeOptions = [
{ label: '50', key: 50 }, { label: "50", key: 50 },
{ label: '100', key: 100 }, { label: "100", key: 100 },
{ label: '500', key: 500 }, { label: "500", key: 500 },
{ label: '1000', key: 1000 }, { label: "1000", key: 1000 },
] ];
const state = reactive({ const state = reactive({
selectedPeriod: 'Daily', selectedPeriod: "Daily",
selectedDuration: '6 Months', selectedDuration: "6 Months",
tableData: [], tableData: [],
currentPage: 1, currentPage: 1,
pageSize: 50, pageSize: 50,
}) });
// 计算总页数 // 计算总页数
const totalPages = computed(() => { const totalPages = computed(() => {
return Math.ceil(state.tableData.length / state.pageSize) return Math.ceil(state.tableData.length / state.pageSize);
}) });
// 计算当前页的数据 // 计算当前页的数据
const paginatedData = computed(() => { const paginatedData = computed(() => {
const start = (state.currentPage - 1) * state.pageSize const start = (state.currentPage - 1) * state.pageSize;
const end = start + state.pageSize const end = start + state.pageSize;
return state.tableData.slice(start, end) return state.tableData.slice(start, end);
}) });
// 表格列定义 // 表格列定义
const columns = [ const columns = [
{ {
title: 'Date', title: "Date",
key: 'date', key: "date",
align: 'left', align: "left",
fixed: 'left', fixed: "left",
width: 150, width: 150,
}, },
{ {
title: 'Open', title: "Open",
key: 'open', key: "open",
align: 'center', align: "center",
}, },
{ {
title: 'High', title: "High",
key: 'high', key: "high",
align: 'center', align: "center",
}, },
{ {
title: 'Low', title: "Low",
key: 'low', key: "low",
align: 'center', align: "center",
}, },
{ {
title: 'Close', title: "Close",
key: 'close', key: "close",
align: 'center', align: "center",
}, },
{ {
title: 'Adj. Close', title: "Adj. Close",
key: 'adjClose', key: "adjClose",
align: 'center', align: "center",
}, },
{ {
title: 'Change', title: "Change",
key: 'change', key: "change",
align: 'center', align: "center",
render(row) { render(row) {
const value = parseFloat(row.change) const value = parseFloat(row.change);
const color = value < 0 ? '#ff4d4f' : value > 0 ? '#52c41a' : '' const color = value < 0 ? "#ff4d4f" : value > 0 ? "#52c41a" : "";
return h('span', { style: { color } }, row.change) return h("span", { style: { color } }, row.change);
}, },
}, },
{ {
title: 'Volume', title: "Volume",
key: 'volume', key: "volume",
align: 'center', align: "center",
}, },
] ];
// 处理下拉选项变更 // 处理下拉选项变更
const handlePeriodChange = (key) => { const handlePeriodChange = (key) => {
state.selectedPeriod = key state.selectedPeriod = key;
if (key === 'Annual') { if (key === "Annual") {
handleDurationChange('Full History') handleDurationChange("Full History");
return return;
} }
if (key === 'Monthly') { if (key === "Monthly") {
handleDurationChange('10 Years') handleDurationChange("10 Years");
return return;
} }
if (key === 'Quarterly') { if (key === "Quarterly") {
handleDurationChange('10 Years') handleDurationChange("10 Years");
return return;
} }
getPageData() getPageData();
} };
const handleDurationChange = (key) => { const handleDurationChange = (key) => {
state.selectedDuration = key state.selectedDuration = key;
state.currentPage = 1 state.currentPage = 1;
getPageData() getPageData();
} };
// 处理分页 // 处理分页
const handlePrevPage = () => { const handlePrevPage = () => {
if (state.currentPage === 1) { if (state.currentPage === 1) {
return return;
} }
state.currentPage-- state.currentPage--;
} };
const handleNextPage = () => { const handleNextPage = () => {
if (state.currentPage >= totalPages.value) { if (state.currentPage >= totalPages.value) {
return return;
} }
state.currentPage++ state.currentPage++;
} };
const handlePageSizeChange = (size) => { const handlePageSizeChange = (size) => {
state.pageSize = size state.pageSize = size;
state.currentPage = 1 // 重置到第一页 state.currentPage = 1; // 重置到第一页
} };
// 回到顶部 // 回到顶部
const scrollToTop = () => { const scrollToTop = () => {
// 尝试多种方法 // 尝试多种方法
// 1. 使用document.body // 1. 使用document.body
document.body.scrollTop = 0 document.body.scrollTop = 0;
// 2. 使用document.documentElement (HTML元素) // 2. 使用document.documentElement (HTML元素)
document.documentElement.scrollTop = 0 document.documentElement.scrollTop = 0;
// 3. 使用scrollIntoView // 3. 使用scrollIntoView
document.querySelector('.historic-data-container').scrollIntoView({ document.querySelector(".historic-data-container").scrollIntoView({
behavior: 'smooth', behavior: "smooth",
block: 'start', block: "start",
}) });
} };
onMounted(() => { onMounted(() => {
getPageData() getPageData();
}) });
const getPageDefaultData = async () => { const getPageDefaultData = async () => {
try { try {
let url = let url =
'https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=Daily&range=3M' "https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=Daily&range=3M";
const res = await axios.get(url) const res = await axios.get(url);
let originalData = res.data.data let originalData = res.data.data;
// 转换为日期格式："Nov 26, 2024" // 转换为日期格式："Nov 26, 2024"
let calcApiData = originalData.map((item) => [ let calcApiData = originalData.map((item) => [
new Date(item[0]).toLocaleDateString('en-US', { new Date(item[0]).toLocaleDateString("en-US", {
month: 'short', month: "short",
day: 'numeric', day: "numeric",
year: 'numeric', year: "numeric",
}), }),
item[1], item[1],
]) ]);
// console.log('接口数据', calcApiData) // console.log('接口数据', calcApiData)
// 使用API数据更新defaultTableData中的close和adjClose值 // 使用API数据更新defaultTableData中的close和adjClose值
const updatedTableData = defaultTableData.map((tableItem) => { const updatedTableData = defaultTableData.map((tableItem) => {
// 查找对应日期的API数据 // 查找对应日期的API数据
const matchedApiData = calcApiData.find( const matchedApiData = calcApiData.find(
(apiItem) => apiItem[0] === tableItem.date, (apiItem) => apiItem[0] === tableItem.date
) );
if (matchedApiData) { if (matchedApiData) {
// 更新close和adjClose值 // 更新close和adjClose值
@ -286,100 +281,100 @@ const getPageDefaultData = async () => {
...tableItem, ...tableItem,
close: matchedApiData[1].toFixed(2), close: matchedApiData[1].toFixed(2),
adjClose: matchedApiData[1].toFixed(2), adjClose: matchedApiData[1].toFixed(2),
} };
} }
return tableItem return tableItem;
}) });
state.tableData = updatedTableData state.tableData = updatedTableData;
} catch (error) { } catch (error) {
// console.error('获取数据失败', error) // console.error('获取数据失败', error)
} }
} };
const getPageData = async () => { const getPageData = async () => {
let range = '' let range = "";
let now = new Date() let now = new Date();
const last = new Date(now) const last = new Date(now);
last.setMonth(now.getMonth() - 6) last.setMonth(now.getMonth() - 6);
let fromDate = last let fromDate = last;
let toDate = let toDate =
now.getFullYear() + now.getFullYear() +
'-' + "-" +
String(now.getMonth() + 1).padStart(2, '0') + String(now.getMonth() + 1).padStart(2, "0") +
'-' + "-" +
String(now.getDate()).padStart(2, '0') String(now.getDate()).padStart(2, "0");
if (state.selectedDuration === '3 Months') { if (state.selectedDuration === "3 Months") {
range = '3M' range = "3M";
const last = new Date(now) const last = new Date(now);
last.setMonth(now.getMonth() - 3) last.setMonth(now.getMonth() - 3);
fromDate = last fromDate = last;
} else if (state.selectedDuration === '6 Months') { } else if (state.selectedDuration === "6 Months") {
range = '6M' range = "6M";
const last = new Date(now) const last = new Date(now);
last.setMonth(now.getMonth() - 6) last.setMonth(now.getMonth() - 6);
fromDate = last fromDate = last;
} else if (state.selectedDuration === 'Year to Date') { } else if (state.selectedDuration === "Year to Date") {
range = 'YTD' range = "YTD";
fromDate = new Date(now.getFullYear(), 0, 1) fromDate = new Date(now.getFullYear(), 0, 1);
} else if (state.selectedDuration === '1 Year') { } else if (state.selectedDuration === "1 Year") {
range = '1Y' range = "1Y";
const last = new Date(now) const last = new Date(now);
last.setFullYear(now.getFullYear() - 1) last.setFullYear(now.getFullYear() - 1);
fromDate = last fromDate = last;
} else if (state.selectedDuration === '5 Years') { } else if (state.selectedDuration === "5 Years") {
range = '5Y' range = "5Y";
const last = new Date(now) const last = new Date(now);
last.setFullYear(now.getFullYear() - 5) last.setFullYear(now.getFullYear() - 5);
fromDate = last fromDate = last;
} else if (state.selectedDuration === '10 Years') { } else if (state.selectedDuration === "10 Years") {
range = '10Y' range = "10Y";
const last = new Date(now) const last = new Date(now);
last.setFullYear(now.getFullYear() - 10) last.setFullYear(now.getFullYear() - 10);
fromDate = last fromDate = last;
} else if (state.selectedDuration === 'Full History') { } else if (state.selectedDuration === "Full History") {
range = 'Max' range = "Max";
fromDate = new Date('2009-10-07') fromDate = new Date("2009-10-07");
} }
let finalFromDate = let finalFromDate =
fromDate.getFullYear() + fromDate.getFullYear() +
'-' + "-" +
String(fromDate.getMonth() + 1).padStart(2, '0') + String(fromDate.getMonth() + 1).padStart(2, "0") +
'-' + "-" +
String(fromDate.getDate()).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://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=${state.selectedPeriod}&range=${range}`
let url = let url =
'https://common.szjixun.cn/api/stock/history/list?from=' + "https://common.szjixun.cn/api/stock/history/list?from=" +
finalFromDate + finalFromDate +
'&to=' + "&to=" +
toDate toDate;
const res = await axios.get(url) const res = await axios.get(url);
// console.error(res) // console.error(res)
if (res.status === 200) { if (res.status === 200) {
if (res.data.status === 0) { if (res.data.status === 0) {
// 转换为日期格式："Nov 26, 2024" // 转换为日期格式："Nov 26, 2024"
let resultData = res.data.data.map((item) => { let resultData = res.data.data.map((item) => {
return { return {
date: new Date(item.date).toLocaleDateString('en-US', { date: new Date(item.date).toLocaleDateString("en-US", {
month: 'short', month: "short",
day: 'numeric', day: "numeric",
year: 'numeric', year: "numeric",
}), }),
open: item.open != null ? Number(item.open).toFixed(2) : '', open: item.open != null ? Number(item.open).toFixed(2) : "",
high: item.high != null ? Number(item.high).toFixed(2) : '', high: item.high != null ? Number(item.high).toFixed(2) : "",
low: item.low != null ? Number(item.low).toFixed(2) : '', low: item.low != null ? Number(item.low).toFixed(2) : "",
close: item.close != null ? Number(item.close).toFixed(2) : '', close: item.close != null ? Number(item.close).toFixed(2) : "",
adjClose: item.close != null ? Number(item.close).toFixed(2) : '', adjClose: item.close != null ? Number(item.close).toFixed(2) : "",
change: change:
item.changePercent != null item.changePercent != null
? Number(item.changePercent).toFixed(2) + '%' ? Number(item.changePercent).toFixed(2) + "%"
: '', : "",
volume: item.volume, volume: item.volume,
} };
}) });
state.tableData = resultData state.tableData = resultData;
} }
} }
} };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">

353
src/views/historic-stock/size768/index.vue
View File

@ -1,10 +1,5 @@
<template> <template>
<div class="historic-data-container" style="margin-bottom: 40px"> <div class="historic-data-container" style="margin-bottom: 40px">
<!-- <img
src="@/assets/image/historic-stock.png"
alt="1"
style="max-width: 100%; margin: 0 auto"
/> -->
<div class="echarts-container"> <div class="echarts-container">
<customEcharts></customEcharts> <customEcharts></customEcharts>
</div> </div>
@ -85,202 +80,202 @@
</template> </template>
<script setup> <script setup>
import { NDataTable, NButton, NDropdown, NIcon } from 'naive-ui' import { NDataTable, NButton, NDropdown, NIcon } from "naive-ui";
import { reactive, onMounted, h, computed } from 'vue' import { reactive, onMounted, h, computed } from "vue";
import axios from 'axios' import axios from "axios";
import { import {
ChevronDownOutline, ChevronDownOutline,
ChevronBackOutline, ChevronBackOutline,
ChevronForwardOutline, ChevronForwardOutline,
ArrowUpOutline, ArrowUpOutline,
} from '@vicons/ionicons5' } from "@vicons/ionicons5";
import defaultTableData from '../data' import defaultTableData from "../data";
// console.log('defaultTableData', defaultTableData) // console.log('defaultTableData', defaultTableData)
import customEcharts from '@/components/customEcharts/index.vue' import customEcharts from "@/components/customEcharts/index.vue";
// 数据筛选选项 // 数据筛选选项
const periodOptions = [ const periodOptions = [
{ label: 'Daily', key: 'Daily' }, { label: "Daily", key: "Daily" },
{ label: 'Weekly', key: 'Weekly' }, { label: "Weekly", key: "Weekly" },
{ label: 'Monthly', key: 'Monthly' }, { label: "Monthly", key: "Monthly" },
{ label: 'Quarterly', key: 'Quarterly' }, { label: "Quarterly", key: "Quarterly" },
{ label: 'Annual', key: 'Annual' }, { label: "Annual", key: "Annual" },
] ];
const durationOptions = [ const durationOptions = [
{ label: '3 Months', key: '3 Months' }, { label: "3 Months", key: "3 Months" },
{ label: '6 Months', key: '6 Months' }, { label: "6 Months", key: "6 Months" },
{ label: 'Year to Date', key: 'Year to Date' }, { label: "Year to Date", key: "Year to Date" },
{ label: '1 Year', key: '1 Year' }, { label: "1 Year", key: "1 Year" },
{ label: '5 Years', key: '5 Years' }, { label: "5 Years", key: "5 Years" },
{ label: '10 Years', key: '10 Years' }, { label: "10 Years", key: "10 Years" },
// { label: 'Full History', key: 'Full History', disabled: true }, // { label: 'Full History', key: 'Full History', disabled: true },
] ];
// 分页大小选项 // 分页大小选项
const pageSizeOptions = [ const pageSizeOptions = [
{ label: '50', key: 50 }, { label: "50", key: 50 },
{ label: '100', key: 100 }, { label: "100", key: 100 },
{ label: '500', key: 500 }, { label: "500", key: 500 },
{ label: '1000', key: 1000 }, { label: "1000", key: 1000 },
] ];
const state = reactive({ const state = reactive({
selectedPeriod: 'Daily', selectedPeriod: "Daily",
selectedDuration: '6 Months', selectedDuration: "6 Months",
tableData: [], tableData: [],
currentPage: 1, currentPage: 1,
pageSize: 50, pageSize: 50,
}) });
// 计算总页数 // 计算总页数
const totalPages = computed(() => { const totalPages = computed(() => {
return Math.ceil(state.tableData.length / state.pageSize) return Math.ceil(state.tableData.length / state.pageSize);
}) });
// 计算当前页的数据 // 计算当前页的数据
const paginatedData = computed(() => { const paginatedData = computed(() => {
const start = (state.currentPage - 1) * state.pageSize const start = (state.currentPage - 1) * state.pageSize;
const end = start + state.pageSize const end = start + state.pageSize;
return state.tableData.slice(start, end) return state.tableData.slice(start, end);
}) });
// 表格列定义 // 表格列定义
const columns = [ const columns = [
{ {
title: 'Date', title: "Date",
key: 'date', key: "date",
align: 'left', align: "left",
fixed: 'left', fixed: "left",
width: 150, width: 150,
}, },
{ {
title: 'Open', title: "Open",
key: 'open', key: "open",
align: 'center', align: "center",
}, },
{ {
title: 'High', title: "High",
key: 'high', key: "high",
align: 'center', align: "center",
}, },
{ {
title: 'Low', title: "Low",
key: 'low', key: "low",
align: 'center', align: "center",
}, },
{ {
title: 'Close', title: "Close",
key: 'close', key: "close",
align: 'center', align: "center",
}, },
{ {
title: 'Adj. Close', title: "Adj. Close",
key: 'adjClose', key: "adjClose",
align: 'center', align: "center",
}, },
{ {
title: 'Change', title: "Change",
key: 'change', key: "change",
align: 'center', align: "center",
render(row) { render(row) {
const value = parseFloat(row.change) const value = parseFloat(row.change);
const color = value < 0 ? '#ff4d4f' : value > 0 ? '#52c41a' : '' const color = value < 0 ? "#ff4d4f" : value > 0 ? "#52c41a" : "";
return h('span', { style: { color } }, row.change) return h("span", { style: { color } }, row.change);
}, },
}, },
{ {
title: 'Volume', title: "Volume",
key: 'volume', key: "volume",
align: 'center', align: "center",
}, },
] ];
// 处理下拉选项变更 // 处理下拉选项变更
const handlePeriodChange = (key) => { const handlePeriodChange = (key) => {
state.selectedPeriod = key state.selectedPeriod = key;
if (key === 'Annual') { if (key === "Annual") {
handleDurationChange('Full History') handleDurationChange("Full History");
return return;
} }
if (key === 'Monthly') { if (key === "Monthly") {
handleDurationChange('10 Years') handleDurationChange("10 Years");
return return;
} }
if (key === 'Quarterly') { if (key === "Quarterly") {
handleDurationChange('10 Years') handleDurationChange("10 Years");
return return;
} }
getPageData() getPageData();
} };
const handleDurationChange = (key) => { const handleDurationChange = (key) => {
state.selectedDuration = key state.selectedDuration = key;
state.currentPage = 1 state.currentPage = 1;
getPageData() getPageData();
} };
// 处理分页 // 处理分页
const handlePrevPage = () => { const handlePrevPage = () => {
if (state.currentPage === 1) { if (state.currentPage === 1) {
return return;
} }
state.currentPage-- state.currentPage--;
} };
const handleNextPage = () => { const handleNextPage = () => {
if (state.currentPage >= totalPages.value) { if (state.currentPage >= totalPages.value) {
return return;
} }
state.currentPage++ state.currentPage++;
} };
const handlePageSizeChange = (size) => { const handlePageSizeChange = (size) => {
state.pageSize = size state.pageSize = size;
state.currentPage = 1 // 重置到第一页 state.currentPage = 1; // 重置到第一页
} };
// 回到顶部 // 回到顶部
const scrollToTop = () => { const scrollToTop = () => {
// 尝试多种方法 // 尝试多种方法
// 1. 使用document.body // 1. 使用document.body
document.body.scrollTop = 0 document.body.scrollTop = 0;
// 2. 使用document.documentElement (HTML元素) // 2. 使用document.documentElement (HTML元素)
document.documentElement.scrollTop = 0 document.documentElement.scrollTop = 0;
// 3. 使用scrollIntoView // 3. 使用scrollIntoView
document.querySelector('.historic-data-container').scrollIntoView({ document.querySelector(".historic-data-container").scrollIntoView({
behavior: 'smooth', behavior: "smooth",
block: 'start', block: "start",
}) });
} };
onMounted(() => { onMounted(() => {
getPageData() getPageData();
}) });
const getPageDefaultData = async () => { const getPageDefaultData = async () => {
try { try {
let url = let url =
'https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=Daily&range=3M' "https://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=Daily&range=3M";
const res = await axios.get(url) const res = await axios.get(url);
let originalData = res.data.data let originalData = res.data.data;
// 转换为日期格式："Nov 26, 2024" // 转换为日期格式："Nov 26, 2024"
let calcApiData = originalData.map((item) => [ let calcApiData = originalData.map((item) => [
new Date(item[0]).toLocaleDateString('en-US', { new Date(item[0]).toLocaleDateString("en-US", {
month: 'short', month: "short",
day: 'numeric', day: "numeric",
year: 'numeric', year: "numeric",
}), }),
item[1], item[1],
]) ]);
// console.log('接口数据', calcApiData) // console.log('接口数据', calcApiData)
// 使用API数据更新defaultTableData中的close和adjClose值 // 使用API数据更新defaultTableData中的close和adjClose值
const updatedTableData = defaultTableData.map((tableItem) => { const updatedTableData = defaultTableData.map((tableItem) => {
// 查找对应日期的API数据 // 查找对应日期的API数据
const matchedApiData = calcApiData.find( const matchedApiData = calcApiData.find(
(apiItem) => apiItem[0] === tableItem.date, (apiItem) => apiItem[0] === tableItem.date
) );
if (matchedApiData) { if (matchedApiData) {
// 更新close和adjClose值 // 更新close和adjClose值
@ -288,100 +283,100 @@ const getPageDefaultData = async () => {
...tableItem, ...tableItem,
close: matchedApiData[1].toFixed(2), close: matchedApiData[1].toFixed(2),
adjClose: matchedApiData[1].toFixed(2), adjClose: matchedApiData[1].toFixed(2),
} };
} }
return tableItem return tableItem;
}) });
state.tableData = updatedTableData state.tableData = updatedTableData;
} catch (error) { } catch (error) {
// console.error('获取数据失败', error) // console.error('获取数据失败', error)
} }
} };
const getPageData = async () => { const getPageData = async () => {
let range = '' let range = "";
let now = new Date() let now = new Date();
const last = new Date(now) const last = new Date(now);
last.setMonth(now.getMonth() - 6) last.setMonth(now.getMonth() - 6);
let fromDate = last let fromDate = last;
let toDate = let toDate =
now.getFullYear() + now.getFullYear() +
'-' + "-" +
String(now.getMonth() + 1).padStart(2, '0') + String(now.getMonth() + 1).padStart(2, "0") +
'-' + "-" +
String(now.getDate()).padStart(2, '0') String(now.getDate()).padStart(2, "0");
if (state.selectedDuration === '3 Months') { if (state.selectedDuration === "3 Months") {
range = '3M' range = "3M";
const last = new Date(now) const last = new Date(now);
last.setMonth(now.getMonth() - 3) last.setMonth(now.getMonth() - 3);
fromDate = last fromDate = last;
} else if (state.selectedDuration === '6 Months') { } else if (state.selectedDuration === "6 Months") {
range = '6M' range = "6M";
const last = new Date(now) const last = new Date(now);
last.setMonth(now.getMonth() - 6) last.setMonth(now.getMonth() - 6);
fromDate = last fromDate = last;
} else if (state.selectedDuration === 'Year to Date') { } else if (state.selectedDuration === "Year to Date") {
range = 'YTD' range = "YTD";
fromDate = new Date(now.getFullYear(), 0, 1) fromDate = new Date(now.getFullYear(), 0, 1);
} else if (state.selectedDuration === '1 Year') { } else if (state.selectedDuration === "1 Year") {
range = '1Y' range = "1Y";
const last = new Date(now) const last = new Date(now);
last.setFullYear(now.getFullYear() - 1) last.setFullYear(now.getFullYear() - 1);
fromDate = last fromDate = last;
} else if (state.selectedDuration === '5 Years') { } else if (state.selectedDuration === "5 Years") {
range = '5Y' range = "5Y";
const last = new Date(now) const last = new Date(now);
last.setFullYear(now.getFullYear() - 5) last.setFullYear(now.getFullYear() - 5);
fromDate = last fromDate = last;
} else if (state.selectedDuration === '10 Years') { } else if (state.selectedDuration === "10 Years") {
range = '10Y' range = "10Y";
const last = new Date(now) const last = new Date(now);
last.setFullYear(now.getFullYear() - 10) last.setFullYear(now.getFullYear() - 10);
fromDate = last fromDate = last;
} else if (state.selectedDuration === 'Full History') { } else if (state.selectedDuration === "Full History") {
range = 'Max' range = "Max";
fromDate = new Date('2009-10-07') fromDate = new Date("2009-10-07");
} }
let finalFromDate = let finalFromDate =
fromDate.getFullYear() + fromDate.getFullYear() +
'-' + "-" +
String(fromDate.getMonth() + 1).padStart(2, '0') + String(fromDate.getMonth() + 1).padStart(2, "0") +
'-' + "-" +
String(fromDate.getDate()).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://stockanalysis.com/api/symbol/a/OTC-MINM/history?period=${state.selectedPeriod}&range=${range}`
let url = let url =
'https://common.szjixun.cn/api/stock/history/list?from=' + "https://common.szjixun.cn/api/stock/history/list?from=" +
finalFromDate + finalFromDate +
'&to=' + "&to=" +
toDate toDate;
const res = await axios.get(url) const res = await axios.get(url);
// console.error(res) // console.error(res)
if (res.status === 200) { if (res.status === 200) {
if (res.data.status === 0) { if (res.data.status === 0) {
// 转换为日期格式："Nov 26, 2024" // 转换为日期格式："Nov 26, 2024"
let resultData = res.data.data.map((item) => { let resultData = res.data.data.map((item) => {
return { return {
date: new Date(item.date).toLocaleDateString('en-US', { date: new Date(item.date).toLocaleDateString("en-US", {
month: 'short', month: "short",
day: 'numeric', day: "numeric",
year: 'numeric', year: "numeric",
}), }),
open: item.open != null ? Number(item.open).toFixed(2) : '', open: item.open != null ? Number(item.open).toFixed(2) : "",
high: item.high != null ? Number(item.high).toFixed(2) : '', high: item.high != null ? Number(item.high).toFixed(2) : "",
low: item.low != null ? Number(item.low).toFixed(2) : '', low: item.low != null ? Number(item.low).toFixed(2) : "",
close: item.close != null ? Number(item.close).toFixed(2) : '', close: item.close != null ? Number(item.close).toFixed(2) : "",
adjClose: item.close != null ? Number(item.close).toFixed(2) : '', adjClose: item.close != null ? Number(item.close).toFixed(2) : "",
change: change:
item.changePercent != null item.changePercent != null
? Number(item.changePercent).toFixed(2) + '%' ? Number(item.changePercent).toFixed(2) + "%"
: '', : "",
volume: item.volume, volume: item.volume,
} };
}) });
state.tableData = resultData state.tableData = resultData;
} }
} }
} };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">