diff --git a/src/components/Charts/ChartOne.tsx b/src/components/Charts/ChartOne.tsx index 6050872..b53608a 100644 --- a/src/components/Charts/ChartOne.tsx +++ b/src/components/Charts/ChartOne.tsx @@ -1,119 +1,7 @@ import { ApexOptions } from 'apexcharts'; -import React, { useState } from 'react'; +import { useEffect, useState } from 'react'; import ReactApexChart from 'react-apexcharts'; - -const options: ApexOptions = { - legend: { - show: false, - position: 'top', - horizontalAlign: 'left', - }, - colors: ['#3C50E0', '#80CAEE'], - chart: { - fontFamily: 'Satoshi, sans-serif', - height: 335, - type: 'area', - dropShadow: { - enabled: true, - color: '#623CEA14', - top: 10, - blur: 4, - left: 0, - opacity: 0.1, - }, - - toolbar: { - show: false, - }, - }, - responsive: [ - { - breakpoint: 1024, - options: { - chart: { - height: 300, - }, - }, - }, - { - breakpoint: 1366, - options: { - chart: { - height: 350, - }, - }, - }, - ], - stroke: { - width: [2, 2], - curve: 'straight', - }, - // labels: { - // show: false, - // position: "top", - // }, - grid: { - xaxis: { - lines: { - show: true, - }, - }, - yaxis: { - lines: { - show: true, - }, - }, - }, - dataLabels: { - enabled: false, - }, - markers: { - size: 4, - colors: '#fff', - strokeColors: ['#3056D3', '#80CAEE'], - strokeWidth: 3, - strokeOpacity: 0.9, - strokeDashArray: 0, - fillOpacity: 1, - discrete: [], - hover: { - size: undefined, - sizeOffset: 5, - }, - }, - xaxis: { - type: 'category', - categories: [ - 'Sep', - 'Oct', - 'Nov', - 'Dec', - 'Jan', - 'Feb', - 'Mar', - 'Apr', - 'May', - 'Jun', - 'Jul', - 'Aug', - ], - axisBorder: { - show: false, - }, - axisTicks: { - show: false, - }, - }, - yaxis: { - title: { - style: { - fontSize: '0px', - }, - }, - min: 0, - max: 100, - }, -}; +import dayjs from 'dayjs' interface ChartOneState { series: { @@ -122,21 +10,140 @@ interface ChartOneState { }[]; } -const ChartOne: React.FC = () => { +const ChartOne = () => { + const [startDate, setStartDate] = useState("2024/08/13") + const [endDate, setEndDate] = useState("2024/08/15") + + const [options, setOptions] = useState({ + legend: { + show: false, + position: 'top', + horizontalAlign: 'left', + }, + colors: ['#3C50E0', '#80CAEE'], + chart: { + fontFamily: 'Satoshi, sans-serif', + height: 335, + type: 'area', + dropShadow: { + enabled: true, + color: '#623CEA14', + top: 10, + blur: 4, + left: 0, + opacity: 0.1, + }, + + toolbar: { + show: false, + }, + }, + responsive: [ + { + breakpoint: 1024, + options: { + chart: { + height: 300, + }, + }, + }, + { + breakpoint: 1366, + options: { + chart: { + height: 350, + }, + }, + }, + ], + stroke: { + width: [2, 2], + curve: 'straight', + }, + // labels: { + // show: false, + // position: "top", + // }, + grid: { + xaxis: { + lines: { + show: true, + }, + }, + yaxis: { + lines: { + show: true, + }, + }, + }, + dataLabels: { + enabled: false, + }, + markers: { + size: 4, + colors: '#fff', + strokeColors: ['#3056D3', '#80CAEE'], + strokeWidth: 3, + strokeOpacity: 0.9, + strokeDashArray: 0, + fillOpacity: 1, + discrete: [], + hover: { + size: undefined, + sizeOffset: 5, + }, + }, + xaxis: { + type: 'category', + categories: [ + '周一', + '周二', + '周三', + '周四', + '周五', + '周六', + '周日', + ], + axisBorder: { + show: false, + }, + axisTicks: { + show: false, + }, + }, + yaxis: { + title: { + style: { + fontSize: '0px', + }, + }, + min: 0, + max: 100, + }, + }) + const [state, setState] = useState({ series: [ { - name: 'Product One', - data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30, 45], + name: '访客数量', + data: [23, 11, 22, 27, 13, 22, 37, 21], }, - { - name: 'Product Two', - data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39, 51], + name: 'IP数量', + data: [30, 25, 36, 30, 45, 35, 64, 52], }, ], }); + useEffect(() => { + const siteId = import.meta.env.VITE_BAIDU_TONGJI_SITE_ID + const token = import.meta.env.VITE_BAIDU_TONGJI_ACCESS_TOKEN + // fetch(`https://openapi.baidu.com/rest/2.0/tongji/report/getData?access_token=${token}&site_id=${siteId}&start_date=${startDate}&end_date=${endDate}&metrics=pv_count%2Cvisitor_count%2Cip_count%2Cavg_visit_time&method=overview%2FgetTimeTrendRpt`).then(async res => { + fetch(`/api/rest/2.0/tongji/report/getData?access_token=${token}&site_id=${siteId}&start_date=${startDate}&end_date=${endDate}&metrics=pv_count%2Cvisitor_count%2Cip_count%2Cavg_visit_time&method=overview%2FgetTimeTrendRpt`).then(async res => { + console.log(await res.json()); + }) + }, []) + const handleReset = () => { setState((prevState) => ({ ...prevState, @@ -152,31 +159,37 @@ const ChartOne: React.FC = () => { +
-

Total Revenue

-

12.04.2022 - 12.05.2022

+

访客(UV)

+

{dayjs(new Date()).subtract(7, "day").format("YYYY.MM.DD")} - {dayjs(new Date()).format("YYYY.MM.DD")}

+
+
-

Total Sales

-

12.04.2022 - 12.05.2022

+

IP

+

{dayjs(new Date()).subtract(7, "day").format("YYYY.MM.DD")} - {dayjs(new Date()).format("YYYY.MM.DD")}

+
+ +
diff --git a/src/pages/Dashboard/ECommerce.tsx b/src/pages/Dashboard/ECommerce.tsx index 8262d47..8630a50 100644 --- a/src/pages/Dashboard/ECommerce.tsx +++ b/src/pages/Dashboard/ECommerce.tsx @@ -20,8 +20,6 @@ const ECommerce: React.FC = () => { } useEffect(() => { - console.log(import.meta.env.VITE_DATA,333); - getSystemData() }, []) diff --git a/src/types/env.d.ts b/src/types/env.d.ts new file mode 100644 index 0000000..ed5c3ca --- /dev/null +++ b/src/types/env.d.ts @@ -0,0 +1,11 @@ +interface ImportMetaEnv { + readonly VITE_BAIDU_TONGJI_KEY: string; + readonly VITE_BAIDU_TONGJI_SECRET_KEY: string; + readonly VITE_BAIDU_TONGJI_SITE_ID: string; + readonly VITE_BAIDU_TONGJI_ACCESS_TOKEN: string; + readonly VITE_BAIDU_TONGJI_REFRESH_TOKEN: string; +} + +interface ImportMeta { + readonly env: ImportMetaEnv; +} \ No newline at end of file diff --git a/vite.config.js b/vite.config.js index d17ba8e..b4a7036 100644 --- a/vite.config.js +++ b/vite.config.js @@ -20,5 +20,14 @@ export default defineConfig({ additionalData: `@import "./src/styles/var.scss";` } } - } + }, + server: { + proxy: { + '/api': { + target: 'https://openapi.baidu.com/', // 你的后端服务器地址 + changeOrigin: true, + rewrite: (path) => path.replace(/^\/api/, ''), + }, + }, + }, })