diff --git a/scripts/build.ps1 b/scripts/build.ps1 index 9ae9476..d1a52aa 100644 --- a/scripts/build.ps1 +++ b/scripts/build.ps1 @@ -2,7 +2,7 @@ docker build . -t registry.cn-hangzhou.aliyuncs.com/fadinglight/bill-react:dev docker push registry.cn-hangzhou.aliyuncs.com/fadinglight/bill-react:dev -ssh aliyun "cd /root/docker/bill-sys/; +ssh fadinglight "cd /root/docker/bill-sys/; docker compose down; docker pull registry.cn-hangzhou.aliyuncs.com/fadinglight/bill-react:dev; docker compose up -d" diff --git a/scripts/build.sh b/scripts/build.sh index 98bb0ce..1207ae2 100644 --- a/scripts/build.sh +++ b/scripts/build.sh @@ -2,7 +2,7 @@ docker build . -t registry.cn-hangzhou.aliyuncs.com/fadinglight/bill-react:dev docker push registry.cn-hangzhou.aliyuncs.com/fadinglight/bill-react:dev -ssh aliyun "cd /root/docker/bill-sys/; +ssh fadinglight "cd /root/docker/bill-sys/; docker compose down; docker pull registry.cn-hangzhou.aliyuncs.com/fadinglight/bill-go:dev; docker compose up -d" diff --git a/src/components/charts/bar/index.tsx b/src/components/charts/bar/index.tsx index cab5237..0600202 100644 --- a/src/components/charts/bar/index.tsx +++ b/src/components/charts/bar/index.tsx @@ -17,6 +17,7 @@ interface IProps { data: BarData[]; title?: string; subTitle?: string; + onClickItem?: (date: string) => void; } export const Bar = (props: IProps) => { @@ -84,9 +85,13 @@ export const Bar = (props: IProps) => { }; }, [data, title, subTitle]) - const bar = useMemo(() => { - return chartRef.current ? echarts.init(chartRef.current, undefined, { renderer: "svg" }) : null; + const chart = chartRef.current ? echarts.init(chartRef.current, undefined, { renderer: "svg" }) : null; + chart?.on('click', (params) => { + const date = dayjs(props.data[0].x).format("YYYY-") + params.name + if (props.onClickItem) props.onClickItem(date) + }) + return chart }, [chartRef.current]) useEffect(() => { diff --git a/src/components/charts/pie/index.module.scss b/src/components/charts/pie/index.module.scss index 1402b81..0bda96f 100644 --- a/src/components/charts/pie/index.module.scss +++ b/src/components/charts/pie/index.module.scss @@ -1,4 +1,4 @@ .pie { - width: 100%; - height: 100%; + width: 400px; + height: 400px; } diff --git a/src/main.tsx b/src/main.tsx index ca0e4f7..0518dfe 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -6,9 +6,9 @@ import 'antd/dist/antd.css'; import './index.css' ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( - + // - + // ) diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx index e1f5d21..0695ad2 100644 --- a/src/pages/Home/Home.tsx +++ b/src/pages/Home/Home.tsx @@ -6,7 +6,13 @@ import { useContext, useEffect, useState } from "react"; import { BillContext } from "../../store"; import { observer } from "mobx-react-lite"; import Pie from "../../components/charts/pie"; -import { Card, DatePicker, Radio, Space } from "antd"; +import { + Card, + Modal, + DatePicker, + Radio, + Space, +} from "antd"; import moment from 'moment'; import 'moment/locale/zh-cn'; import dayjs from 'dayjs' @@ -52,6 +58,14 @@ const Home = () => { ]; const [billType, setBillType] = useState(BillType.consume) + // 点击bar弹出当天pie + const [isModalOpen, setIsModalOpen] = useState(false); + const [modalTitle, setModalTitle] = useState(""); + const [modalData, setModalData] = useState<{ + x: string + y: number + }[]>([]); + return (
@@ -75,16 +89,33 @@ const Home = () => {
- + { + setIsModalOpen(true) + setModalTitle(date) + setModalData(transformer(billStore.groupByClass(billType, date))) + }} + />
- +
+ setIsModalOpen(false)} + onCancel={() => setIsModalOpen(false)} + title={modalTitle} + > + +
) } diff --git a/src/store/index.ts b/src/store/index.ts index 872c48b..5ce0866 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -34,8 +34,8 @@ export class Bill { return functions(this._bills) } - groupByClass(type?: BillType) { - const classFun = R.filter((bill: IBill) => R.of(bill.type).length === 0 || bill.type === type) + groupByClass(type?: BillType, date?: string) { + const classFun = R.filter((bill: IBill) => R.of(bill.type).length === 0 || bill.type === type && (date ? bill.date === date : true)) const functions = R.compose( R.groupBy((bill: IBill) => bill.cls), classFun, diff --git a/vite.config.ts b/vite.config.ts index 954cdec..42d2d5c 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -7,7 +7,7 @@ export default defineConfig({ server: { proxy: { "/api/": { - target: "http://www.fadinglight.cn:8080/", + target: "http://www.fadinglight.cn:8088/", changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, ""), }