feat🔫: bar点击 & fix🛠️: 修改部署脚本

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"

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"

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(() => {

src/components/charts/pie/index.module.scss

@@ -1,4 +1,4 @@
 .pie {
-  width: 100%;
+  width: 400px;
-  height: 100%;
+  height: 400px;
 }

src/main.tsx

@@ -6,9 +6,9 @@ import 'antd/dist/antd.css';
 import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-  <React.StrictMode>
+  // <React.StrictMode>
     <BrowserRouter>
       <App />
     </BrowserRouter>
-  </React.StrictMode>
+  // </React.StrictMode>
 )

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 (
         <div className={styles.home}>
             <div className={styles.total}>
@@ -75,16 +89,33 @@ const Home = () => {
                 </Space>
             </div>
             <div className={styles.monthBar}>
-                <Bar data={transformer(billStore.groupByDate(billType))} />
+                <Bar
+                    data={transformer(billStore.groupByDate(billType))}
+                    onClickItem={date => {
+                        setIsModalOpen(true)
+                        setModalTitle(date)
+                        setModalData(transformer(billStore.groupByClass(billType, date)))
+                    }}
+                />
             </div>
             <div className={styles.cards}>
-                <Card bodyStyle={{ height: 400, width: 400 }}>
+                <Card >
                     <Pie
                         title="本月消费分类"
                         data={transformer(billStore.groupByClass(billType))}
                     />
                 </Card>
             </div>
+            <Modal
+                visible={isModalOpen}
+                onOk={() => setIsModalOpen(false)}
+                onCancel={() => setIsModalOpen(false)}
+                title={modalTitle}
+            >
+                <Pie
+                    data={modalData}
+                />
+            </Modal>
         </div>
     )
 }

src/store/index.ts

@@ -34,8 +34,8 @@ export class Bill {
         return functions(this._bills)
     }
 
-    groupByClass(type?: BillType) {
+    groupByClass(type?: BillType, date?: string) {
-        const classFun = R.filter((bill: IBill) => R.of(bill.type).length === 0 || bill.type === type)
+        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,

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/, ""),
       }