Compare commits
No commits in common. "main" and "1.0.0" have entirely different histories.
3
env/.env.prod
vendored
3
env/.env.prod
vendored
@ -5,6 +5,3 @@ VITE_DELETE_CONSOLE = true
|
||||
# 是否开启sourcemap
|
||||
VITE_SHOW_SOURCEMAP = false
|
||||
VITE_BASEURL = '//appointteam.szjixun.cn'
|
||||
|
||||
# 文档查看
|
||||
VITE_PAGE_URL="https://www.fiee.com"
|
||||
|
||||
4
env/.env.test
vendored
4
env/.env.test
vendored
@ -3,7 +3,3 @@ NODE_ENV = 'test'
|
||||
# 是否去除console 和 debugger
|
||||
VITE_DELETE_CONSOLE = false
|
||||
VITE_BASEURL = '//kid-art-test.szjixun.cn'
|
||||
|
||||
# 文档查看
|
||||
VITE_PAGE_URL="http://172.16.100.22:8045"
|
||||
# VITE_PAGE_URL="http://192.168.88.50:5878"
|
||||
|
||||
@ -1 +0,0 @@
|
||||
google-site-verification: googledeec2461668656b4.html
|
||||
@ -2,7 +2,7 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<link rel="icon" type="image/svg+xml" href="/src/assets/image/icon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<title>FiEE</title>
|
||||
</head>
|
||||
|
||||
15822
package-lock.json
generated
15822
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -12,14 +12,12 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@fingerprintjs/fingerprintjs": "^4.4.3",
|
||||
"@onlyoffice/document-editor-vue": "^1.5.0",
|
||||
"@unocss/reset": "^0.61.9",
|
||||
"@vicons/ionicons5": "^0.13.0",
|
||||
"@vicons/utils": "^0.1.4",
|
||||
"axios": "^1.7.3",
|
||||
"cnjm-postcss-px-to-viewport": "^1.0.1",
|
||||
"countup.js": "^2.8.2",
|
||||
"dayjs": "^1.11.13",
|
||||
"echarts": "^5.6.0",
|
||||
"gsap": "^3.12.5",
|
||||
"jsdom": "^24.0.0",
|
||||
|
||||
@ -11,9 +11,6 @@ importers:
|
||||
'@fingerprintjs/fingerprintjs':
|
||||
specifier: ^4.4.3
|
||||
version: 4.4.3
|
||||
'@onlyoffice/document-editor-vue':
|
||||
specifier: ^1.5.0
|
||||
version: 1.5.0(vue@3.4.35)
|
||||
'@unocss/reset':
|
||||
specifier: ^0.61.9
|
||||
version: 0.61.9
|
||||
@ -32,9 +29,6 @@ importers:
|
||||
countup.js:
|
||||
specifier: ^2.8.2
|
||||
version: 2.8.2
|
||||
dayjs:
|
||||
specifier: ^1.11.13
|
||||
version: 1.11.13
|
||||
echarts:
|
||||
specifier: ^5.6.0
|
||||
version: 5.6.0
|
||||
@ -1282,11 +1276,6 @@ packages:
|
||||
resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
|
||||
engines: {node: '>= 8'}
|
||||
|
||||
'@onlyoffice/document-editor-vue@1.5.0':
|
||||
resolution: {integrity: sha512-HZEebUhBloP4LomspI5BddgoQdhtPq91h57yA9K/Lk70MMc1vgOTQ4Wq+N5TZYXNxdDTv+TSsEVFLnBCl1Y71A==}
|
||||
peerDependencies:
|
||||
vue: ^3.0.0
|
||||
|
||||
'@polka/url@1.0.0-next.25':
|
||||
resolution: {integrity: sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==}
|
||||
|
||||
@ -2079,9 +2068,6 @@ packages:
|
||||
date-fns@3.6.0:
|
||||
resolution: {integrity: sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==}
|
||||
|
||||
dayjs@1.11.13:
|
||||
resolution: {integrity: sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==}
|
||||
|
||||
debug@4.3.6:
|
||||
resolution: {integrity: sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==}
|
||||
engines: {node: '>=6.0'}
|
||||
@ -5544,11 +5530,6 @@ snapshots:
|
||||
'@nodelib/fs.scandir': 2.1.5
|
||||
fastq: 1.17.1
|
||||
|
||||
'@onlyoffice/document-editor-vue@1.5.0(vue@3.4.35)':
|
||||
dependencies:
|
||||
lodash: 4.17.21
|
||||
vue: 3.4.35
|
||||
|
||||
'@polka/url@1.0.0-next.25': {}
|
||||
|
||||
'@rollup/plugin-babel@6.0.4(@babel/core@7.25.2)(rollup@4.20.0)':
|
||||
@ -6497,8 +6478,6 @@ snapshots:
|
||||
|
||||
date-fns@3.6.0: {}
|
||||
|
||||
dayjs@1.11.13: {}
|
||||
|
||||
debug@4.3.6:
|
||||
dependencies:
|
||||
ms: 2.1.2
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 63 KiB |
BIN
public/icon.png
Normal file
BIN
public/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 105 KiB |
BIN
src/assets/file/2023 Q1 Quarterly Results.pdf
Normal file
BIN
src/assets/file/2023 Q1 Quarterly Results.pdf
Normal file
Binary file not shown.
BIN
src/assets/file/2023 Q2 Quarterly Results.pdf
Normal file
BIN
src/assets/file/2023 Q2 Quarterly Results.pdf
Normal file
Binary file not shown.
BIN
src/assets/file/2024 Annual Report.pdf
Normal file
BIN
src/assets/file/2024 Annual Report.pdf
Normal file
Binary file not shown.
Binary file not shown.
BIN
src/assets/file/AUDIT COMMITTEE CHARTER.pdf
Normal file
BIN
src/assets/file/AUDIT COMMITTEE CHARTER.pdf
Normal file
Binary file not shown.
BIN
src/assets/file/CODE OF BUSINESS CONDUCT AND ETHICS.pdf
Normal file
BIN
src/assets/file/CODE OF BUSINESS CONDUCT AND ETHICS.pdf
Normal file
Binary file not shown.
BIN
src/assets/file/COMPENSATION COMMITTEE CHARTER.pdf
Normal file
BIN
src/assets/file/COMPENSATION COMMITTEE CHARTER.pdf
Normal file
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 63 KiB After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 176 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 184 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 210 KiB |
BIN
src/assets/image/logo.png
Normal file
BIN
src/assets/image/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
@ -1,34 +0,0 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { useWindowSize } from '@vueuse/core'
|
||||
|
||||
import size375 from '@/components/customEcharts/size375/index.vue'
|
||||
import size768 from '@/components/customEcharts/size375/index.vue'
|
||||
import size1440 from '@/components/customEcharts/size1920/index.vue'
|
||||
import size1920 from '@/components/customEcharts/size1920/index.vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
const router = useRouter()
|
||||
const { width } = useWindowSize()
|
||||
const { t } = useI18n()
|
||||
|
||||
const viewComponent = computed(() => {
|
||||
const viewWidth = width.value
|
||||
if (viewWidth <= 500) {
|
||||
return size375
|
||||
} else if (viewWidth <= 960) {
|
||||
return size768
|
||||
} else if (viewWidth <= 1500) {
|
||||
return size1440
|
||||
} else if (viewWidth <= 1920 || viewWidth > 1920) {
|
||||
return size1920
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<component :is="viewComponent" />
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
@ -1,602 +0,0 @@
|
||||
<template>
|
||||
<div class="custom-echarts">
|
||||
<div>
|
||||
<div class="echarts-header">
|
||||
<div class="echarts-header-title">
|
||||
<span>FiEE, Inc. Stock Price History</span>
|
||||
</div>
|
||||
<div class="echarts-search-area">
|
||||
<div class="echarts-search-byRange">
|
||||
<text style="font-size: 0.9rem; font-weight: 400; color: #666666;">
|
||||
Range
|
||||
</text>
|
||||
<div class="search-range-list">
|
||||
<div
|
||||
class="search-range-list-each"
|
||||
v-for="(item, index) in state.searchRange"
|
||||
:key="index"
|
||||
@click="changeSearchRange(item)"
|
||||
>
|
||||
<span>{{ item }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="echarts-search-byDate">
|
||||
<n-date-picker
|
||||
v-model:value="state.selectHistoricStartDate"
|
||||
type="date"
|
||||
:is-date-disabled="disableAfterDate"
|
||||
@update:value="changeSearchRangeStartDate"
|
||||
input-readonly
|
||||
/>
|
||||
<!-- <n-icon size="16">
|
||||
<ArrowForwardOutline />
|
||||
</n-icon> -->
|
||||
<span>to</span>
|
||||
<n-date-picker
|
||||
v-model:value="state.selectHistoricEndDate"
|
||||
type="date"
|
||||
:is-date-disabled="disablePreviousDate"
|
||||
@update:value="changeSearchRangeEndDate"
|
||||
input-readonly
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="myEcharts" class="myChart"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { onMounted, watch, reactive } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
import markPointerIcon from '@/assets/image/icon/echarts_markPointer.png'
|
||||
import axios from 'axios'
|
||||
import { NDatePicker, NIcon } from 'naive-ui'
|
||||
import { ArrowForwardOutline } from '@vicons/ionicons5'
|
||||
|
||||
const state = reactive({
|
||||
searchRange: ['1m', '3m', 'YTD', '1Y', '5Y', '10Y', 'Max'],
|
||||
selectHistoricStartDate: '2009-10-07',
|
||||
selectHistoricEndDate: new Date(),
|
||||
})
|
||||
|
||||
let myCharts = null
|
||||
let historicData = []
|
||||
let xAxisData = []
|
||||
|
||||
//初始化eCharts
|
||||
const initEcharts = (data) => {
|
||||
historicData = data
|
||||
xAxisData = data.map((item) => {
|
||||
return new Date(item.date).toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
})
|
||||
})
|
||||
const yAxisData = data.map((item) => item.price)
|
||||
// console.error(xAxisData, yAxisData)
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
myCharts = echarts.init(document.getElementById('myEcharts'), null, {
|
||||
renderer: 'canvas',
|
||||
useDirtyRect: true
|
||||
})
|
||||
// 绘制图表
|
||||
myCharts.setOption({
|
||||
animation: false,
|
||||
progressive: 500,
|
||||
progressiveThreshold: 3000,
|
||||
// title: {
|
||||
// text: 'FiEE, Inc. Stock Price History',
|
||||
// },
|
||||
grid: {
|
||||
left: '8%', // 或 '2%'，根据实际情况调整
|
||||
right: '12%', // 给右侧y轴留空间，数值可根据y轴label宽度调整
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'line',
|
||||
label: {
|
||||
backgroundColor: '#6a7985',
|
||||
},
|
||||
},
|
||||
formatter: function (params) {
|
||||
const p = params[0]
|
||||
return `<span style="font-size: 1.1rem; font-weight: 600;">${p.axisValue}</span><br/><span style="font-size: 0.9rem; font-weight: 400;">Price: ${p.data}</span>`
|
||||
},
|
||||
triggerOn: 'mousemove',
|
||||
confine: true,
|
||||
hideDelay: 1500
|
||||
},
|
||||
xAxis: {
|
||||
data: xAxisData,
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
inverse: true,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#CCD6EB',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#323232',
|
||||
fontWeight: 'bold',
|
||||
interval: 'auto',
|
||||
hideOverlap: true
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
position: 'right',
|
||||
interval: 25,
|
||||
// max: 75.0,
|
||||
show: true,
|
||||
axisLabel: {
|
||||
color: '#323232',
|
||||
fontWeight: 'bold',
|
||||
formatter: function (value) {
|
||||
return value > 0 ? value.toFixed(2) : value
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: yAxisData,
|
||||
type: 'line',
|
||||
sampling: 'lttb',
|
||||
symbol: 'none',
|
||||
lineStyle: {
|
||||
color: '#2c6288',
|
||||
},
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#2c6288',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#F4F6F8',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
markPoint: {
|
||||
symbol: 'image://' + markPointerIcon,
|
||||
symbolSize: 24,
|
||||
data: [],
|
||||
},
|
||||
progressive: 500,
|
||||
progressiveThreshold: 3000,
|
||||
large: true,
|
||||
largeThreshold: 2000
|
||||
},
|
||||
],
|
||||
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside',
|
||||
},
|
||||
{
|
||||
type: 'slider',
|
||||
show: true,
|
||||
dataBackground: {
|
||||
lineStyle: {
|
||||
color: '#2C6288',
|
||||
},
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 1, color: '#2c6288' },
|
||||
{ offset: 0, color: '#F4F6F8' },
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
selectedDataBackground: {
|
||||
lineStyle: {
|
||||
color: '#2C6288',
|
||||
},
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 1, color: '#2c6288' },
|
||||
{ offset: 0, color: '#F4F6F8' },
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
fillerColor: 'rgba(44, 98, 136, 0.3)',
|
||||
realtime: false,
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
// 监听 showTip 事件，动态显示 markPoint
|
||||
myCharts.on('showTip', function (params) {
|
||||
if (params) {
|
||||
const dataIndex = params.dataIndex
|
||||
const x = myCharts.getOption().xAxis[0].data[dataIndex]
|
||||
const y = myCharts.getOption().series[0].data[dataIndex]
|
||||
myCharts.setOption({
|
||||
series: [
|
||||
{
|
||||
markPoint: {
|
||||
symbol: 'image://' + markPointerIcon,
|
||||
symbolSize: 24,
|
||||
data: [{ coord: [x, y] }],
|
||||
},
|
||||
},
|
||||
],
|
||||
})
|
||||
}
|
||||
})
|
||||
// 鼠标移出时，清除 markPoint
|
||||
myCharts.on('globalout', function () {
|
||||
myCharts.setOption({
|
||||
series: [
|
||||
{
|
||||
markPoint: {
|
||||
symbol: 'image://' + markPointerIcon,
|
||||
symbolSize: 24,
|
||||
data: [],
|
||||
},
|
||||
},
|
||||
],
|
||||
})
|
||||
})
|
||||
myCharts.on('dataZoom', function (params) {
|
||||
// 获取当前 dataZoom 范围
|
||||
const option = myCharts.getOption()
|
||||
const xAxisData = option.xAxis[0].data
|
||||
const dataZoom = option.dataZoom[1] || option.dataZoom[0]
|
||||
|
||||
// 获取 dataZoom 的 startValue 和 endValue
|
||||
let startValue = dataZoom.endValue
|
||||
let endValue = dataZoom.startValue
|
||||
|
||||
// 如果是索引，转为日期
|
||||
if (typeof startValue === 'number') {
|
||||
startValue = xAxisData[startValue]
|
||||
}
|
||||
if (typeof endValue === 'number') {
|
||||
endValue = xAxisData[endValue]
|
||||
}
|
||||
|
||||
// 更新日期选择器
|
||||
state.selectHistoricStartDate = new Date(startValue)
|
||||
state.selectHistoricEndDate = new Date(endValue)
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getHistoricalData()
|
||||
})
|
||||
|
||||
//获取历史数据
|
||||
const getHistoricalData = async () => {
|
||||
let now = new Date()
|
||||
let toDate =
|
||||
now.getFullYear() +
|
||||
'-' +
|
||||
String(now.getMonth() + 1).padStart(2, '0') +
|
||||
'-' +
|
||||
String(now.getDate()).padStart(2, '0')
|
||||
let url =
|
||||
'https://common.szjixun.cn/api/stock/history/base/list?from=2009-10-07&to=' +
|
||||
toDate
|
||||
const res = await axios.get(url)
|
||||
if (res.status === 200) {
|
||||
if (res.data.status === 0) {
|
||||
initEcharts(res.data.data)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 适配倒序数据，返回大于等于目标日期的最近一天索引
|
||||
function findClosestDateIndex(data, targetDateStr) {
|
||||
let left = 0,
|
||||
right = data.length - 1
|
||||
const target = new Date(targetDateStr).getTime()
|
||||
let res = data.length - 1 // 默认返回最后一个
|
||||
while (left <= right) {
|
||||
const mid = Math.floor((left + right) / 2)
|
||||
const midTime = new Date(data[mid].date).getTime()
|
||||
if (midTime > target) {
|
||||
left = mid + 1
|
||||
} else {
|
||||
res = mid
|
||||
right = mid - 1
|
||||
}
|
||||
}
|
||||
return res
|
||||
}
|
||||
|
||||
// 适配倒序数据，返回小于等于目标日期的最近一天索引
|
||||
function findClosestDateIndexDescLeft(data, targetDateStr) {
|
||||
let left = 0,
|
||||
right = data.length - 1
|
||||
const target = new Date(targetDateStr).getTime()
|
||||
let res = -1
|
||||
while (left <= right) {
|
||||
const mid = Math.floor((left + right) / 2)
|
||||
const midTime = new Date(data[mid].date).getTime()
|
||||
if (midTime > target) {
|
||||
left = mid + 1 // mid 比目标新，往更旧的方向找
|
||||
} else {
|
||||
res = mid // mid <= target，记录下来，继续往更新的方向找
|
||||
right = mid - 1
|
||||
}
|
||||
}
|
||||
return res
|
||||
}
|
||||
|
||||
//点击切换搜索区间
|
||||
const changeSearchRange = (range, dateTime) => {
|
||||
const now = new Date()
|
||||
let startDate = ''
|
||||
let endDate = ''
|
||||
if (range === '1m') {
|
||||
const last = new Date(now)
|
||||
last.setMonth(now.getMonth() - 1)
|
||||
startDate = last.toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
})
|
||||
endDate = new Date(new Date()).toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
})
|
||||
} else if (range === '3m') {
|
||||
const last = new Date(now)
|
||||
last.setMonth(now.getMonth() - 3)
|
||||
startDate = last.toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
})
|
||||
endDate = new Date(new Date()).toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
})
|
||||
} else if (range === 'YTD') {
|
||||
startDate = new Date(now.getFullYear(), 0, 1).toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
})
|
||||
endDate = new Date(new Date()).toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
})
|
||||
} else if (range === '1Y') {
|
||||
const last = new Date(now)
|
||||
last.setFullYear(now.getFullYear() - 1)
|
||||
startDate = last.toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
})
|
||||
endDate = new Date(new Date()).toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
})
|
||||
} else if (range === '5Y') {
|
||||
const last = new Date(now)
|
||||
last.setFullYear(now.getFullYear() - 5)
|
||||
startDate = last.toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
})
|
||||
endDate = new Date(new Date()).toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
})
|
||||
} else if (range === '10Y') {
|
||||
const last = new Date(now)
|
||||
last.setFullYear(now.getFullYear() - 10)
|
||||
startDate = last.toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
})
|
||||
endDate = new Date(new Date()).toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
})
|
||||
} else if (range === 'Max') {
|
||||
startDate = ''
|
||||
endDate = ''
|
||||
} else if (range === 'startDateTime') {
|
||||
startDate = dateTime
|
||||
endDate = ''
|
||||
} else if (range === 'endDateTime') {
|
||||
startDate = ''
|
||||
endDate = dateTime
|
||||
}
|
||||
if (startDate || endDate) {
|
||||
// historicData 和 xAxisData 需在 initEcharts 作用域可用
|
||||
if (
|
||||
typeof historicData !== 'undefined' &&
|
||||
typeof xAxisData !== 'undefined'
|
||||
) {
|
||||
let startValue = xAxisData[0]
|
||||
if (startDate) {
|
||||
const idx = findClosestDateIndex(historicData, startDate)
|
||||
// 用 historicData[idx].date 格式化为 xAxisData 的格式
|
||||
startValue = new Date(historicData[idx].date).toLocaleDateString(
|
||||
'en-US',
|
||||
{
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
},
|
||||
)
|
||||
}
|
||||
let endValue = endDate
|
||||
if (endDate) {
|
||||
// console.warn(endDate)
|
||||
const idx = findClosestDateIndexDescLeft(historicData, endDate)
|
||||
// console.warn(idx)
|
||||
// 用 historicData[idx].date 格式化为 xAxisData 的格式
|
||||
endValue = new Date(historicData[idx].date).toLocaleDateString(
|
||||
'en-US',
|
||||
{
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
},
|
||||
)
|
||||
// console.warn(endValue)
|
||||
}
|
||||
|
||||
if (startDate) {
|
||||
myCharts.setOption({
|
||||
dataZoom: {
|
||||
endValue: startValue,
|
||||
},
|
||||
})
|
||||
state.selectHistoricStartDate = new Date(startValue)
|
||||
}
|
||||
if (endDate) {
|
||||
myCharts.setOption({
|
||||
dataZoom: {
|
||||
startValue: endValue,
|
||||
},
|
||||
})
|
||||
state.selectHistoricEndDate = new Date(endValue)
|
||||
}
|
||||
}
|
||||
} else {
|
||||
myCharts.setOption({
|
||||
dataZoom: {
|
||||
startValue: '',
|
||||
endValue: '',
|
||||
},
|
||||
})
|
||||
|
||||
state.selectHistoricStartDate = new Date('2009-10-07')
|
||||
state.selectHistoricEndDate = new Date()
|
||||
}
|
||||
}
|
||||
|
||||
// 禁用2009-10-07之后的日期
|
||||
const disableAfterDate = (date) => {
|
||||
return date < new Date('2009-10-06') || date > new Date()
|
||||
}
|
||||
|
||||
// 禁用过去的日期
|
||||
const disablePreviousDate = (date) => {
|
||||
return date < new Date(state.selectHistoricStartDate) || date > new Date()
|
||||
}
|
||||
|
||||
// 切换搜索区间开始日期
|
||||
const changeSearchRangeStartDate = (date) => {
|
||||
// console.error(date)
|
||||
changeSearchRange(
|
||||
'startDateTime',
|
||||
new Date(date).toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
}),
|
||||
)
|
||||
}
|
||||
|
||||
// 切换搜索区间结束日期
|
||||
const changeSearchRangeEndDate = (date) => {
|
||||
// console.error(date)
|
||||
changeSearchRange(
|
||||
'endDateTime',
|
||||
new Date(date).toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
}),
|
||||
)
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.custom-echarts {
|
||||
.myChart {
|
||||
width: 100%;
|
||||
height: 25rem;
|
||||
}
|
||||
|
||||
.echarts-header {
|
||||
.echarts-header-title {
|
||||
span {
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
color: #323232;
|
||||
}
|
||||
}
|
||||
.echarts-search-area {
|
||||
padding: 2rem 0 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.echarts-search-byRange {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 10px;
|
||||
.search-range-list {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 10px;
|
||||
.search-range-list-each {
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
background-color: #f3f4f6;
|
||||
cursor: pointer;
|
||||
span {
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.echarts-search-byDate {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,604 +0,0 @@
|
||||
<template>
|
||||
<div class="custom-echarts">
|
||||
<div>
|
||||
<div class="echarts-header">
|
||||
<div class="echarts-header-title">
|
||||
<span>FiEE, Inc. Stock Price History</span>
|
||||
</div>
|
||||
<div class="echarts-search-area">
|
||||
<div class="echarts-search-byRange">
|
||||
<text style="font-size: 0.9rem; font-weight: 400; color: #666666;">
|
||||
Range
|
||||
</text>
|
||||
<div class="search-range-list">
|
||||
<div
|
||||
class="search-range-list-each"
|
||||
v-for="(item, index) in state.searchRange"
|
||||
:key="index"
|
||||
@click="changeSearchRange(item)"
|
||||
>
|
||||
<span>{{ item }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="echarts-search-byDate">
|
||||
<n-date-picker
|
||||
v-model:value="state.selectHistoricStartDate"
|
||||
type="date"
|
||||
:is-date-disabled="disableAfterDate"
|
||||
@update:value="changeSearchRangeStartDate"
|
||||
input-readonly
|
||||
/>
|
||||
<!-- <n-icon size="30">
|
||||
<ArrowForwardOutline />
|
||||
</n-icon> -->
|
||||
<span>to</span>
|
||||
<n-date-picker
|
||||
v-model:value="state.selectHistoricEndDate"
|
||||
type="date"
|
||||
:is-date-disabled="disablePreviousDate"
|
||||
@update:value="changeSearchRangeEndDate"
|
||||
input-readonly
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="myEcharts" class="myChart"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { onMounted, watch, reactive } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
import markPointerIcon from '@/assets/image/icon/echarts_markPointer.png'
|
||||
import axios from 'axios'
|
||||
import { NDatePicker } from 'naive-ui'
|
||||
import { ArrowForwardOutline } from '@vicons/ionicons5'
|
||||
|
||||
const state = reactive({
|
||||
searchRange: ['1m', '3m', 'YTD', '1Y', '5Y', '10Y', 'Max'],
|
||||
selectHistoricStartDate: '2009-10-07',
|
||||
selectHistoricEndDate: new Date(),
|
||||
})
|
||||
|
||||
let myCharts = null
|
||||
let historicData = []
|
||||
let xAxisData = []
|
||||
|
||||
//初始化eCharts
|
||||
const initEcharts = (data) => {
|
||||
historicData = data
|
||||
xAxisData = data.map((item) => {
|
||||
return new Date(item.date).toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
})
|
||||
})
|
||||
const yAxisData = data.map((item) => item.price)
|
||||
// console.error(xAxisData, yAxisData)
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
myCharts = echarts.init(document.getElementById('myEcharts'))
|
||||
// 绘制图表
|
||||
myCharts.setOption({
|
||||
animation: false,
|
||||
progressive: 500,
|
||||
progressiveThreshold: 3000,
|
||||
// title: {
|
||||
// text: 'FiEE, Inc. Stock Price History',
|
||||
// },
|
||||
grid: {
|
||||
left: '8%', // 或 '2%'，根据实际情况调整
|
||||
right: '15%', // 给右侧y轴留空间，数值可根据y轴label宽度调整
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'line',
|
||||
snap: true,
|
||||
label: {
|
||||
backgroundColor: '#6a7985',
|
||||
},
|
||||
},
|
||||
formatter: function (params) {
|
||||
const p = params[0]
|
||||
return `<span style="font-size: 1.1rem; font-weight: 600;">${p.axisValue}</span><br/><span style="font-size: 0.9rem; font-weight: 400;">Price: ${p.data}</span>`
|
||||
},
|
||||
confine: true,
|
||||
hideDelay: 1500
|
||||
},
|
||||
xAxis: {
|
||||
data: xAxisData,
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
inverse: true,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#CCD6EB',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#323232',
|
||||
fontWeight: 'bold',
|
||||
// formatter: function (value) {
|
||||
// return value ? value.split('-')[0] : ''
|
||||
// },
|
||||
// interval: function (index, value) {
|
||||
// if (index === 0) return true;
|
||||
// const axisData = this && this.axis && this.axis.data ? this.axis.data : [];
|
||||
// if (!axisData[index - 1]) return true;
|
||||
// return value.split('-')[0] !== axisData[index - 1].split('-')[0];
|
||||
// },
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
position: 'right',
|
||||
interval: 25,
|
||||
// max: 75.0,
|
||||
show: true,
|
||||
axisLabel: {
|
||||
color: '#323232',
|
||||
fontWeight: 'bold',
|
||||
formatter: function (value) {
|
||||
return value > 0 ? value.toFixed(2) : value
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: yAxisData,
|
||||
type: 'line',
|
||||
sampling: 'lttb',
|
||||
symbol: 'none',
|
||||
lineStyle: {
|
||||
color: '#2c6288',
|
||||
},
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#2c6288',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#F4F6F8',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
markPoint: {
|
||||
symbol: 'image://' + markPointerIcon,
|
||||
symbolSize: 24,
|
||||
data: [],
|
||||
},
|
||||
},
|
||||
],
|
||||
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside',
|
||||
},
|
||||
{
|
||||
type: 'slider',
|
||||
show: true,
|
||||
dataBackground: {
|
||||
lineStyle: {
|
||||
color: '#2C6288',
|
||||
},
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 1, color: '#2c6288' },
|
||||
{ offset: 0, color: '#F4F6F8' },
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
selectedDataBackground: {
|
||||
lineStyle: {
|
||||
color: '#2C6288',
|
||||
},
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 1, color: '#2c6288' },
|
||||
{ offset: 0, color: '#F4F6F8' },
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
fillerColor: 'rgba(44, 98, 136, 0.3)',
|
||||
realtime: false,
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
// 监听 showTip 事件，动态显示 markPoint
|
||||
myCharts.on('showTip', function (params) {
|
||||
if (params) {
|
||||
const dataIndex = params.dataIndex
|
||||
const x = myCharts.getOption().xAxis[0].data[dataIndex]
|
||||
const y = myCharts.getOption().series[0].data[dataIndex]
|
||||
myCharts.setOption({
|
||||
series: [
|
||||
{
|
||||
markPoint: {
|
||||
symbol: 'image://' + markPointerIcon,
|
||||
symbolSize: 24,
|
||||
data: [{ coord: [x, y] }],
|
||||
},
|
||||
},
|
||||
],
|
||||
})
|
||||
}
|
||||
})
|
||||
// 鼠标移出时，清除 markPoint
|
||||
myCharts.on('globalout', function () {
|
||||
myCharts.setOption({
|
||||
series: [
|
||||
{
|
||||
markPoint: {
|
||||
symbol: 'image://' + markPointerIcon,
|
||||
symbolSize: 24,
|
||||
data: [],
|
||||
},
|
||||
},
|
||||
],
|
||||
})
|
||||
})
|
||||
|
||||
myCharts.on('dataZoom', function (params) {
|
||||
// 获取当前 dataZoom 范围
|
||||
const option = myCharts.getOption()
|
||||
const xAxisData = option.xAxis[0].data
|
||||
const dataZoom = option.dataZoom[1] || option.dataZoom[0]
|
||||
|
||||
// 获取 dataZoom 的 startValue 和 endValue
|
||||
let startValue = dataZoom.endValue
|
||||
let endValue = dataZoom.startValue
|
||||
|
||||
// 如果是索引，转为日期
|
||||
if (typeof startValue === 'number') {
|
||||
startValue = xAxisData[startValue]
|
||||
}
|
||||
if (typeof endValue === 'number') {
|
||||
endValue = xAxisData[endValue]
|
||||
}
|
||||
|
||||
// 更新日期选择器
|
||||
state.selectHistoricStartDate = new Date(startValue)
|
||||
state.selectHistoricEndDate = new Date(endValue)
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getHistoricalData()
|
||||
})
|
||||
|
||||
//获取历史数据
|
||||
const getHistoricalData = async () => {
|
||||
let now = new Date()
|
||||
let toDate =
|
||||
now.getFullYear() +
|
||||
'-' +
|
||||
String(now.getMonth() + 1).padStart(2, '0') +
|
||||
'-' +
|
||||
String(now.getDate()).padStart(2, '0')
|
||||
let url =
|
||||
'https://common.szjixun.cn/api/stock/history/base/list?from=2009-10-07&to=' +
|
||||
toDate
|
||||
const res = await axios.get(url)
|
||||
if (res.status === 200) {
|
||||
if (res.data.status === 0) {
|
||||
initEcharts(res.data.data)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 适配倒序数据，返回大于等于目标日期的最近一天索引
|
||||
function findClosestDateIndex(data, targetDateStr) {
|
||||
let left = 0,
|
||||
right = data.length - 1
|
||||
const target = new Date(targetDateStr).getTime()
|
||||
let res = data.length - 1 // 默认返回最后一个
|
||||
while (left <= right) {
|
||||
const mid = Math.floor((left + right) / 2)
|
||||
const midTime = new Date(data[mid].date).getTime()
|
||||
if (midTime > target) {
|
||||
left = mid + 1
|
||||
} else {
|
||||
res = mid
|
||||
right = mid - 1
|
||||
}
|
||||
}
|
||||
return res
|
||||
}
|
||||
|
||||
// 适配倒序数据，返回小于等于目标日期的最近一天索引
|
||||
function findClosestDateIndexDescLeft(data, targetDateStr) {
|
||||
let left = 0,
|
||||
right = data.length - 1
|
||||
const target = new Date(targetDateStr).getTime()
|
||||
let res = -1
|
||||
while (left <= right) {
|
||||
const mid = Math.floor((left + right) / 2)
|
||||
const midTime = new Date(data[mid].date).getTime()
|
||||
if (midTime > target) {
|
||||
left = mid + 1 // mid 比目标新，往更旧的方向找
|
||||
} else {
|
||||
res = mid // mid <= target，记录下来，继续往更新的方向找
|
||||
right = mid - 1
|
||||
}
|
||||
}
|
||||
return res
|
||||
}
|
||||
|
||||
//点击切换搜索区间
|
||||
const changeSearchRange = (range, dateTime) => {
|
||||
const now = new Date()
|
||||
let startDate = ''
|
||||
let endDate = ''
|
||||
if (range === '1m') {
|
||||
const last = new Date(now)
|
||||
last.setMonth(now.getMonth() - 1)
|
||||
startDate = last.toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
})
|
||||
endDate = new Date(new Date()).toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
})
|
||||
} else if (range === '3m') {
|
||||
const last = new Date(now)
|
||||
last.setMonth(now.getMonth() - 3)
|
||||
startDate = last.toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
})
|
||||
endDate = new Date(new Date()).toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
})
|
||||
} else if (range === 'YTD') {
|
||||
startDate = new Date(now.getFullYear(), 0, 1).toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
})
|
||||
endDate = new Date(new Date()).toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
})
|
||||
} else if (range === '1Y') {
|
||||
const last = new Date(now)
|
||||
last.setFullYear(now.getFullYear() - 1)
|
||||
startDate = last.toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
})
|
||||
endDate = new Date(new Date()).toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
})
|
||||
} else if (range === '5Y') {
|
||||
const last = new Date(now)
|
||||
last.setFullYear(now.getFullYear() - 5)
|
||||
startDate = last.toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
})
|
||||
endDate = new Date(new Date()).toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
})
|
||||
} else if (range === '10Y') {
|
||||
const last = new Date(now)
|
||||
last.setFullYear(now.getFullYear() - 10)
|
||||
startDate = last.toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
})
|
||||
endDate = new Date(new Date()).toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
})
|
||||
} else if (range === 'Max') {
|
||||
startDate = ''
|
||||
endDate = ''
|
||||
} else if (range === 'startDateTime') {
|
||||
startDate = dateTime
|
||||
endDate = ''
|
||||
} else if (range === 'endDateTime') {
|
||||
startDate = ''
|
||||
endDate = dateTime
|
||||
}
|
||||
if (startDate || endDate) {
|
||||
// historicData 和 xAxisData 需在 initEcharts 作用域可用
|
||||
if (
|
||||
typeof historicData !== 'undefined' &&
|
||||
typeof xAxisData !== 'undefined'
|
||||
) {
|
||||
let startValue = xAxisData[0]
|
||||
if (startDate) {
|
||||
const idx = findClosestDateIndex(historicData, startDate)
|
||||
// 用 historicData[idx].date 格式化为 xAxisData 的格式
|
||||
startValue = new Date(historicData[idx].date).toLocaleDateString(
|
||||
'en-US',
|
||||
{
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
},
|
||||
)
|
||||
}
|
||||
let endValue = endDate
|
||||
if (endDate) {
|
||||
// console.warn(endDate)
|
||||
const idx = findClosestDateIndexDescLeft(historicData, endDate)
|
||||
// console.warn(idx)
|
||||
// 用 historicData[idx].date 格式化为 xAxisData 的格式
|
||||
endValue = new Date(historicData[idx].date).toLocaleDateString(
|
||||
'en-US',
|
||||
{
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
},
|
||||
)
|
||||
// console.warn(endValue)
|
||||
}
|
||||
|
||||
if (startDate) {
|
||||
myCharts.setOption({
|
||||
dataZoom: {
|
||||
endValue: startValue,
|
||||
},
|
||||
})
|
||||
state.selectHistoricStartDate = new Date(startValue)
|
||||
}
|
||||
if (endDate) {
|
||||
myCharts.setOption({
|
||||
dataZoom: {
|
||||
startValue: endValue,
|
||||
},
|
||||
})
|
||||
state.selectHistoricEndDate = new Date(endValue)
|
||||
}
|
||||
}
|
||||
} else {
|
||||
myCharts.setOption({
|
||||
dataZoom: {
|
||||
startValue: '',
|
||||
endValue: '',
|
||||
},
|
||||
})
|
||||
|
||||
state.selectHistoricStartDate = new Date('2009-10-07')
|
||||
state.selectHistoricEndDate = new Date()
|
||||
}
|
||||
}
|
||||
|
||||
// 禁用2009-10-07之后的日期
|
||||
const disableAfterDate = (date) => {
|
||||
return date < new Date('2009-10-06') || date > new Date()
|
||||
}
|
||||
|
||||
// 禁用过去的日期
|
||||
const disablePreviousDate = (date) => {
|
||||
return date < new Date(state.selectHistoricStartDate) || date > new Date()
|
||||
}
|
||||
|
||||
// 切换搜索区间开始日期
|
||||
const changeSearchRangeStartDate = (date) => {
|
||||
// console.error(date)
|
||||
changeSearchRange(
|
||||
'startDateTime',
|
||||
new Date(date).toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
}),
|
||||
)
|
||||
}
|
||||
|
||||
// 切换搜索区间结束日期
|
||||
const changeSearchRangeEndDate = (date) => {
|
||||
// console.error(date)
|
||||
changeSearchRange(
|
||||
'endDateTime',
|
||||
new Date(date).toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
}),
|
||||
)
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.custom-echarts {
|
||||
.myChart {
|
||||
width: 100%;
|
||||
height: 25rem;
|
||||
}
|
||||
|
||||
.echarts-header {
|
||||
.echarts-header-title {
|
||||
span {
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
color: #323232;
|
||||
}
|
||||
}
|
||||
.echarts-search-area {
|
||||
padding: 2rem 0 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
|
||||
.echarts-search-byRange {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 0.7rem;
|
||||
.search-range-list {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 0.7rem;
|
||||
.search-range-list-each {
|
||||
padding: 0.2rem 0.3rem;
|
||||
border-radius: 5px;
|
||||
background-color: #f3f4f6;
|
||||
cursor: pointer;
|
||||
span {
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.echarts-search-byDate {
|
||||
padding: 1.5rem 0 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -3,7 +3,7 @@ import { computed } from 'vue'
|
||||
import { useWindowSize } from '@vueuse/core'
|
||||
|
||||
import size375 from '@/components/customFooter/size375/index.vue'
|
||||
import size768 from '@/components/customFooter/size768/index.vue'
|
||||
import size768 from '@/components/customFooter/size1920/index.vue'
|
||||
import size1440 from '@/components/customFooter/size1920/index.vue'
|
||||
import size1920 from '@/components/customFooter/size1920/index.vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
@ -15,7 +15,7 @@ const { t } = useI18n()
|
||||
|
||||
const viewComponent = computed(() => {
|
||||
const viewWidth = width.value
|
||||
if (viewWidth <= 500) {
|
||||
if (viewWidth <= 450) {
|
||||
return size375
|
||||
} else if (viewWidth <= 1100) {
|
||||
return size768
|
||||
|
||||
@ -1,69 +1,23 @@
|
||||
<template>
|
||||
<!-- 通用页脚 -->
|
||||
<div class="custom-footer">
|
||||
<div class="custom-footer-box">
|
||||
<span>© 2025 FiEE, Inc. All Rights Reserved.</span>
|
||||
<div class="footer-links">
|
||||
<span @click="handleLink('privacyPolicy')">Privacy Policy</span>
|
||||
<span @click="handleLink('termsOfUse')">Terms of use</span>
|
||||
<span @click="handleLink('siteMap')">Site Map</span>
|
||||
</div>
|
||||
</div>
|
||||
<span>Copyright © 2024-2027 FiEE</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useRouter } from "vue-router";
|
||||
const router = useRouter();
|
||||
import privacyPolicy from "@/assets/file/footer/FiEE, Inc. _ Privacy policy.pdf";
|
||||
import termsOfUse from "@/assets/file/footer/FiEE, Inc. _ Terms of Use.pdf";
|
||||
import siteMap from "@/assets/file/footer/FiEE, Inc. _ Site Map.pdf";
|
||||
|
||||
//点击跳转到对应的链接页面
|
||||
const handleLink = (link) => {
|
||||
// if (link === "privacyPolicy") {
|
||||
// window.open(privacyPolicy, "_blank");
|
||||
// } else if (link === "termsOfUse") {
|
||||
// window.open(termsOfUse, "_blank");
|
||||
// } else if (link === "siteMap") {
|
||||
// window.open(siteMap, "_blank");
|
||||
// }
|
||||
router.push(link)
|
||||
};
|
||||
</script>
|
||||
<script setup></script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.custom-footer {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 24px 0;
|
||||
color: #888;
|
||||
// font-size: 15px;
|
||||
font-size: 1.05rem;
|
||||
background: #f7f8fa;
|
||||
letter-spacing: 1px;
|
||||
border-top: 1px solid #ececec;
|
||||
z-index: 100;
|
||||
|
||||
.custom-footer-box {
|
||||
max-width: 1700px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
letter-spacing: 1px;
|
||||
color: #888;
|
||||
// font-size: 15px;
|
||||
font-size: 1.05rem;
|
||||
padding: 1rem 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
margin: 0.4rem 0 0;
|
||||
span {
|
||||
border-right: 1px solid #d2d2d7;
|
||||
padding: 0 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
span:nth-last-child(1) {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,70 +1,23 @@
|
||||
<template>
|
||||
<!-- 通用页脚 -->
|
||||
<div class="custom-footer">
|
||||
<span>© 2025 FiEE, Inc. All Rights Reserved.</span>
|
||||
<div class="footer-links-box">
|
||||
<div class="footer-links">
|
||||
<span @click="handleLink('privacyPolicy')">Privacy Policy</span>
|
||||
<span @click="handleLink('termsOfUse')">Terms of use</span>
|
||||
<span @click="handleLink('siteMap')">Site Map</span>
|
||||
</div>
|
||||
<!-- 通用页脚 -->
|
||||
<div class="custom-footer">
|
||||
<span>Copyright © 2024-2027 FiEE</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useRouter } from "vue-router";
|
||||
const router = useRouter();
|
||||
|
||||
import privacyPolicy from "@/assets/file/footer/FiEE, Inc. _ Privacy policy.pdf";
|
||||
import termsOfUse from "@/assets/file/footer/FiEE, Inc. _ Terms of Use.pdf";
|
||||
import siteMap from "@/assets/file/footer/FiEE, Inc. _ Site Map.pdf";
|
||||
|
||||
//点击跳转到对应的链接页面
|
||||
const handleLink = (link) => {
|
||||
// if (link === "privacyPolicy") {
|
||||
// window.open(privacyPolicy, "_blank");
|
||||
// } else if (link === "termsOfUse") {
|
||||
// window.open(termsOfUse, "_blank");
|
||||
// } else if (link === "siteMap") {
|
||||
// window.open(siteMap, "_blank");
|
||||
// }
|
||||
router.push(link)
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.custom-footer {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 1rem 0;
|
||||
color: #888;
|
||||
font-size: 0.9rem;
|
||||
background: #f7f8fa;
|
||||
letter-spacing: 5px;
|
||||
border-top: 5px solid #ececec;
|
||||
z-index: 100;
|
||||
|
||||
.footer-links-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0.6rem 0 0;
|
||||
|
||||
.footer-links {
|
||||
span {
|
||||
border-right: 1px solid #d2d2d7;
|
||||
padding: 0 0.8rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.75rem;
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
}
|
||||
span:nth-last-child(1) {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
</template>
|
||||
|
||||
<script setup></script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.custom-footer {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 120px 0;
|
||||
color: #888;
|
||||
font-size: 75px;
|
||||
background: #f7f8fa;
|
||||
letter-spacing: 5px;
|
||||
border-top: 5px solid #ececec;
|
||||
z-index: 100;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -1,59 +0,0 @@
|
||||
<template>
|
||||
<!-- 通用页脚 -->
|
||||
<div class="custom-footer">
|
||||
<span>© 2025 FiEE, Inc. All Rights Reserved.</span>
|
||||
<div class="footer-links">
|
||||
<span @click="handleLink('privacyPolicy')">Privacy Policy</span>
|
||||
<span @click="handleLink('termsOfUse')">Terms of use</span>
|
||||
<span @click="handleLink('siteMap')">Site Map</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useRouter } from "vue-router";
|
||||
const router = useRouter();
|
||||
import privacyPolicy from "@/assets/file/footer/FiEE, Inc. _ Privacy policy.pdf";
|
||||
import termsOfUse from "@/assets/file/footer/FiEE, Inc. _ Terms of Use.pdf";
|
||||
import siteMap from "@/assets/file/footer/FiEE, Inc. _ Site Map.pdf";
|
||||
|
||||
//点击跳转到对应的链接页面
|
||||
const handleLink = (link) => {
|
||||
// if (link === "privacyPolicy") {
|
||||
// window.open(privacyPolicy, "_blank");
|
||||
// } else if (link === "termsOfUse") {
|
||||
// window.open(termsOfUse, "_blank");
|
||||
// } else if (link === "siteMap") {
|
||||
// window.open(siteMap, "_blank");
|
||||
// }
|
||||
router.push(link)
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.custom-footer {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 24px 0;
|
||||
color: #888;
|
||||
// font-size: 15px;
|
||||
font-size: 1.05rem;
|
||||
background: #f7f8fa;
|
||||
letter-spacing: 1px;
|
||||
border-top: 1px solid #ececec;
|
||||
z-index: 100;
|
||||
padding: 1rem 0;
|
||||
|
||||
.footer-links {
|
||||
margin: 0.4rem 0 0;
|
||||
span {
|
||||
border-right: 1px solid #d2d2d7;
|
||||
padding: 0 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
span:nth-last-child(1) {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -4,7 +4,7 @@ import { useWindowSize } from '@vueuse/core'
|
||||
|
||||
import size375 from '@/components/customHeader/size375/index.vue'
|
||||
import size768 from '@/components/customHeader/size375/index.vue'
|
||||
import size1440 from '@/components/customHeader/size1440/index.vue'
|
||||
import size1440 from '@/components/customHeader/size1920/index.vue'
|
||||
import size1920 from '@/components/customHeader/size1920/index.vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
@ -17,9 +17,9 @@ const viewComponent = computed(() => {
|
||||
const viewWidth = width.value
|
||||
if (viewWidth <= 450) {
|
||||
return size375
|
||||
} else if (viewWidth <= 835) {
|
||||
} else if (viewWidth <= 768) {
|
||||
return size768
|
||||
} else if (viewWidth <= 1640) {
|
||||
} else if (viewWidth <= 1500) {
|
||||
return size1440
|
||||
} else if (viewWidth <= 1920 || viewWidth > 1920) {
|
||||
return size1920
|
||||
|
||||
@ -1,230 +0,0 @@
|
||||
<template>
|
||||
<!-- 通用页头 -->
|
||||
<NLayoutHeader
|
||||
class="custom-header"
|
||||
:class="{ 'header-scrolled': isScrolled }"
|
||||
>
|
||||
<div class="header-container">
|
||||
<div class="logo" @click="handleToHome">
|
||||
<NImage width="80" height="80" :src="FiEELogo" preview-disabled />
|
||||
</div>
|
||||
<div class="header-menu">
|
||||
<NMenu
|
||||
mode="horizontal"
|
||||
:options="menuOptions"
|
||||
:inverted="isScrolled"
|
||||
v-model:value="selectedKey"
|
||||
@update:value="handleMenuSelect"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</NLayoutHeader>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import FiEELogo from "@/assets/image/header/logo.png";
|
||||
import { ref, onMounted, onUnmounted } from "vue";
|
||||
import { NMenu, NLayoutHeader, NImage } from "naive-ui";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useHeaderMenuConfig } from "@/config/headerMenuConfig";
|
||||
|
||||
const { t } = useI18n();
|
||||
const router = useRouter();
|
||||
|
||||
// 使用统一的菜单配置
|
||||
const menuOptions = useHeaderMenuConfig();
|
||||
const selectedKey = ref(null);
|
||||
|
||||
const isScrolled = ref(false);
|
||||
|
||||
// 递归查找菜单项
|
||||
function findMenuOptionByKey(options, key) {
|
||||
for (const option of options) {
|
||||
if (option.key === key) return option;
|
||||
if (option.children) {
|
||||
const found = findMenuOptionByKey(option.children, key);
|
||||
if (found) return found;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
// 菜单点击跳转
|
||||
const handleMenuSelect = (key) => {
|
||||
const option = findMenuOptionByKey(menuOptions, key);
|
||||
if (option && option.href) {
|
||||
router.push(option.href);
|
||||
}
|
||||
};
|
||||
|
||||
// 监听滚动事件
|
||||
const handleScroll = () => {
|
||||
//滚动距离大于100px时，处理对应的header样式
|
||||
isScrolled.value = window.scrollY >= 100;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener("scroll", handleScroll);
|
||||
});
|
||||
|
||||
//点击回到首页
|
||||
const handleToHome = () => {
|
||||
router.push("/myhome");
|
||||
selectedKey.value = null; // 重置菜单选中状态
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.custom-header {
|
||||
--header-height: 5rem;
|
||||
--primary-color: #8b59f7;
|
||||
transition: all 0.3s ease;
|
||||
background: transparent;
|
||||
height: var(--header-height);
|
||||
|
||||
&.header-scrolled {
|
||||
background: rgba(220, 207, 248, 0.95);
|
||||
backdrop-filter: blur(8px);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.header-container {
|
||||
max-width: 1700px;
|
||||
margin: 0 auto;
|
||||
padding: 0 40px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.logo {
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s ease;
|
||||
margin-left: 100px;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
}
|
||||
|
||||
.header-menu {
|
||||
display: block;
|
||||
flex: 1;
|
||||
|
||||
:deep(.n-menu) {
|
||||
background: transparent;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
:deep(.n-menu-item) {
|
||||
position: relative;
|
||||
margin: 0 10px;
|
||||
transition: all 0.3s ease;
|
||||
font-weight: 700;
|
||||
// font-size: 16px;
|
||||
font-size: 0.875rem;
|
||||
min-width: 120px;
|
||||
text-align: center;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background: var(--primary-color);
|
||||
transition: all 0.3s ease;
|
||||
transform: translateX(-50%);
|
||||
opacity: 0;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::after {
|
||||
width: 80px;
|
||||
height: 3px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// 选中状态的样式
|
||||
&.n-menu-item--selected {
|
||||
&::after {
|
||||
width: 40px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 子菜单样式
|
||||
:deep(.n-submenu) {
|
||||
.n-submenu-children {
|
||||
backdrop-filter: blur(16px);
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border-radius: 12px;
|
||||
padding: 8px 0;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
||||
transform-origin: top;
|
||||
animation: dropDown 0.3s ease;
|
||||
|
||||
.n-menu-item {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--primary-color);
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.3s ease;
|
||||
opacity: 0.1;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::before {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dropDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px) scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.header-menu .n-menu .n-menu-item-content .n-menu-item-content-header {
|
||||
word-break: break-word;
|
||||
white-space: unset !important;
|
||||
}
|
||||
.header-menu .n-menu .n-submenu .n-menu-item-content {
|
||||
padding: 0 8px !important;
|
||||
}
|
||||
</style>
|
||||
@ -6,7 +6,7 @@
|
||||
>
|
||||
<div class="header-container">
|
||||
<div class="logo" @click="handleToHome">
|
||||
<NImage width="80" height="80" :src="FiEELogo" preview-disabled />
|
||||
<NImage width="160" height="50" :src="FiEELogo" preview-disabled />
|
||||
</div>
|
||||
<div class="header-menu">
|
||||
<NMenu
|
||||
@ -22,61 +22,61 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import FiEELogo from "@/assets/image/header/logo.png";
|
||||
import { ref, onMounted, onUnmounted } from "vue";
|
||||
import { NMenu, NLayoutHeader, NImage } from "naive-ui";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useHeaderMenuConfig } from "@/config/headerMenuConfig";
|
||||
import FiEELogo from '@/assets/image/header/logo.png'
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import { NMenu, NLayoutHeader, NImage } from 'naive-ui'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useHeaderMenuConfig } from '@/config/headerMenuConfig'
|
||||
|
||||
const { t } = useI18n();
|
||||
const router = useRouter();
|
||||
const { t } = useI18n()
|
||||
const router = useRouter()
|
||||
|
||||
// 使用统一的菜单配置
|
||||
const menuOptions = useHeaderMenuConfig();
|
||||
const selectedKey = ref(null);
|
||||
const menuOptions = useHeaderMenuConfig()
|
||||
const selectedKey = ref(null)
|
||||
|
||||
const isScrolled = ref(false);
|
||||
const isScrolled = ref(false)
|
||||
|
||||
// 递归查找菜单项
|
||||
function findMenuOptionByKey(options, key) {
|
||||
for (const option of options) {
|
||||
if (option.key === key) return option;
|
||||
if (option.key === key) return option
|
||||
if (option.children) {
|
||||
const found = findMenuOptionByKey(option.children, key);
|
||||
if (found) return found;
|
||||
const found = findMenuOptionByKey(option.children, key)
|
||||
if (found) return found
|
||||
}
|
||||
}
|
||||
return null;
|
||||
return null
|
||||
}
|
||||
|
||||
// 菜单点击跳转
|
||||
const handleMenuSelect = (key) => {
|
||||
const option = findMenuOptionByKey(menuOptions, key);
|
||||
const option = findMenuOptionByKey(menuOptions, key)
|
||||
if (option && option.href) {
|
||||
router.push(option.href);
|
||||
router.push(option.href)
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// 监听滚动事件
|
||||
const handleScroll = () => {
|
||||
//滚动距离大于100px时，处理对应的header样式
|
||||
isScrolled.value = window.scrollY >= 100;
|
||||
};
|
||||
isScrolled.value = window.scrollY >= 100
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
});
|
||||
window.addEventListener('scroll', handleScroll)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener("scroll", handleScroll);
|
||||
});
|
||||
window.removeEventListener('scroll', handleScroll)
|
||||
})
|
||||
|
||||
//点击回到首页
|
||||
const handleToHome = () => {
|
||||
router.push("/myhome");
|
||||
selectedKey.value = null; // 重置菜单选中状态
|
||||
};
|
||||
router.push('/myhome')
|
||||
selectedKey.value = null // 重置菜单选中状态
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@ -108,7 +108,7 @@ const handleToHome = () => {
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s ease;
|
||||
margin-left: 100px;
|
||||
margin-right: 100px;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
@ -139,7 +139,7 @@ const handleToHome = () => {
|
||||
text-align: center;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
@ -185,7 +185,7 @@ const handleToHome = () => {
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
@ -7,16 +7,12 @@
|
||||
<div class="header-container">
|
||||
<div class="logo" @click="handleToHome">
|
||||
<NImage
|
||||
style="width: 60px; height: 60px; max-width: 100%"
|
||||
style="width: 108px; height: 33px; max-width: 100%"
|
||||
:src="FiEELogo"
|
||||
preview-disabled
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="menu-btn"
|
||||
:class="{ 'menu-open': showMenu }"
|
||||
@click="toggleMenu"
|
||||
>
|
||||
<div class="menu-btn" :class="{ 'menu-open': showMenu }" @click="toggleMenu">
|
||||
<n-icon size="28" class="menu-icon menu-icon-menu">
|
||||
<menu-sharp />
|
||||
</n-icon>
|
||||
@ -42,20 +38,20 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import FiEELogo from "@/assets/image/header/logo.png";
|
||||
import { ref, onMounted, onUnmounted } from "vue";
|
||||
import { NMenu, NLayoutHeader, NImage, NIcon } from "naive-ui";
|
||||
import { MenuSharp, CloseSharp } from "@vicons/ionicons5";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useHeaderMenuConfig } from "@/config/headerMenuConfig";
|
||||
import FiEELogo from '@/assets/image/header/logo.png'
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import { NMenu, NLayoutHeader, NImage, NIcon } from 'naive-ui'
|
||||
import { MenuSharp, CloseSharp } from '@vicons/ionicons5'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useHeaderMenuConfig } from '@/config/headerMenuConfig'
|
||||
|
||||
const { t } = useI18n();
|
||||
const router = useRouter();
|
||||
const { t } = useI18n()
|
||||
const router = useRouter()
|
||||
|
||||
const isScrolled = ref(false);
|
||||
const showMenu = ref(false);
|
||||
const selectedKey = ref(null);
|
||||
const isScrolled = ref(false)
|
||||
const showMenu = ref(false)
|
||||
const selectedKey = ref(null)
|
||||
|
||||
const toggleMenu = () => {
|
||||
showMenu.value = !showMenu.value;
|
||||
@ -86,7 +82,7 @@ const handleMenuSelect = (key) => {
|
||||
};
|
||||
|
||||
// 使用统一的菜单配置
|
||||
const menuOptions = useHeaderMenuConfig();
|
||||
const menuOptions = useHeaderMenuConfig()
|
||||
|
||||
// 监听滚动事件
|
||||
const handleScroll = () => {
|
||||
@ -99,15 +95,15 @@ onMounted(() => {
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener("scroll", handleScroll);
|
||||
});
|
||||
window.removeEventListener('scroll', handleScroll)
|
||||
})
|
||||
|
||||
//点击回到首页
|
||||
const handleToHome = () => {
|
||||
router.push("/");
|
||||
selectedKey.value = null; // 重置菜单选中状态
|
||||
showMenu.value = false; // 在移动端同时关闭菜单
|
||||
};
|
||||
router.push('/')
|
||||
selectedKey.value = null // 重置菜单选中状态
|
||||
showMenu.value = false // 在移动端同时关闭菜单
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@ -164,7 +160,8 @@ const handleToHome = () => {
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%) rotate(0deg);
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
transition:
|
||||
opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user