|
@@ -1,13 +1,16 @@
|
|
|
import { getTokenInfo } from "@/utils/storage";
|
|
|
-import { useEffect, useMemo, useRef, useState } from "react";
|
|
|
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
|
import styles from "./index.module.scss";
|
|
|
import dayjs from "dayjs";
|
|
|
-import { Button } from "antd";
|
|
|
+import { Button, message } from "antd";
|
|
|
import classNames from "classnames";
|
|
|
import * as echarts from "echarts/core";
|
|
|
import { TooltipComponent, GridComponent } from "echarts/components";
|
|
|
import { BarChart } from "echarts/charts";
|
|
|
import { CanvasRenderer } from "echarts/renderers";
|
|
|
+import history from "@/utils/history";
|
|
|
+import { getStores2API1 } from "@/store/action/stores1";
|
|
|
+import { getHomeNumsAPI } from "@/store/action/login";
|
|
|
|
|
|
echarts.use([TooltipComponent, GridComponent, BarChart, CanvasRenderer]);
|
|
|
|
|
@@ -20,14 +23,20 @@ export default function Home() {
|
|
|
// 头部右侧
|
|
|
const tabList = useMemo(() => {
|
|
|
return [
|
|
|
- { id: 1, path: "/", name: "藏品登记" },
|
|
|
- { id: 2, path: "/object", name: "藏品总账" },
|
|
|
- { id: 3, path: "/stores", name: "入库管理" },
|
|
|
- { id: 4, path: "/system", name: "出库管理" },
|
|
|
- { id: 5, path: "/system", name: "藏品注销" },
|
|
|
+ { id: 1, path: "/object", name: "藏品登记" },
|
|
|
+ { id: 2, path: "/object/2", name: "藏品总账" },
|
|
|
+ { id: 3, path: "/object/3", name: "入库管理" },
|
|
|
+ { id: 4, path: "/object/4", name: "出库管理" },
|
|
|
+ { id: 5, path: "/object/6", name: "藏品注销" },
|
|
|
];
|
|
|
}, []);
|
|
|
|
|
|
+ // 点击头部右侧和下面右侧
|
|
|
+ const toPageFu = useCallback((path: string, flag: boolean) => {
|
|
|
+ if (flag) return message.warning("没有该模块权限!");
|
|
|
+ history.push(path);
|
|
|
+ }, []);
|
|
|
+
|
|
|
const timeRef = useRef(-1);
|
|
|
useEffect(() => {
|
|
|
timeRef.current = window.setInterval(() => {
|
|
@@ -45,7 +54,8 @@ export default function Home() {
|
|
|
}, []);
|
|
|
|
|
|
// -----------图表
|
|
|
- useEffect(() => {
|
|
|
+ const echartsFu = useCallback(async () => {
|
|
|
+ const res = await getStores2API1();
|
|
|
const chartDom: any = document.querySelector(".chart");
|
|
|
const myChart = echarts.init(chartDom);
|
|
|
const option = {
|
|
@@ -65,7 +75,7 @@ export default function Home() {
|
|
|
xAxis: [
|
|
|
{
|
|
|
type: "category",
|
|
|
- data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
|
|
|
+ data: res.data.map((v: any) => v.groupKey),
|
|
|
axisTick: {
|
|
|
show: false,
|
|
|
alignWithLabel: false,
|
|
@@ -112,8 +122,8 @@ export default function Home() {
|
|
|
{
|
|
|
name: "",
|
|
|
type: "bar",
|
|
|
- barWidth: "60%",
|
|
|
- data: [10, 52, 200, 334, 390, 330, 220],
|
|
|
+ barWidth: "20%",
|
|
|
+ data: res.data.map((v: any) => v.count),
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
@@ -139,18 +149,37 @@ export default function Home() {
|
|
|
option && myChart.setOption(option);
|
|
|
}, []);
|
|
|
|
|
|
- // -------代办提醒
|
|
|
- // 头部右侧
|
|
|
- const doneList = useMemo(() => {
|
|
|
+ const tempDone = useMemo(() => {
|
|
|
return [
|
|
|
- { id: 1, num: 0, name: "藏品登记" },
|
|
|
- { id: 2, num: 7, name: "入库管理" },
|
|
|
- { id: 3, num: 5, name: "出库管理" },
|
|
|
- { id: 4, num: 0, name: "藏品修改" },
|
|
|
- { id: 5, num: 21, name: "藏品注销" },
|
|
|
+ { id: 1, path: "/object", num: 0, name: "藏品登记" },
|
|
|
+ { id: 2, path: "/object/3", num: 0, name: "入库管理" },
|
|
|
+ { id: 3, path: "/object/4", num: 0, name: "出库管理" },
|
|
|
+ { id: 4, path: "/object/5", num: 0, name: "藏品修改" },
|
|
|
+ { id: 5, path: "/object/6", num: 0, name: "藏品注销" },
|
|
|
];
|
|
|
}, []);
|
|
|
|
|
|
+ // 代办提醒
|
|
|
+ const [doneList, setDoneList] = useState(tempDone);
|
|
|
+
|
|
|
+ const doneNumsAPIFu = useCallback(async () => {
|
|
|
+ const res = await getHomeNumsAPI();
|
|
|
+ const data = [...tempDone];
|
|
|
+ res.data.forEach((v: any) => {
|
|
|
+ if (v.groupKey === "register") data[0].num = v.count;
|
|
|
+ else if (v.groupKey === "in") data[1].num = v.count;
|
|
|
+ else if (v.groupKey === "out") data[2].num = v.count;
|
|
|
+ else if (v.groupKey === "edit") data[3].num = v.count;
|
|
|
+ else if (v.groupKey === "cancel") data[4].num = v.count;
|
|
|
+ });
|
|
|
+ setDoneList(data);
|
|
|
+ }, [tempDone]);
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ echartsFu();
|
|
|
+ doneNumsAPIFu();
|
|
|
+ }, [doneNumsAPIFu, echartsFu]);
|
|
|
+
|
|
|
return (
|
|
|
<div className={styles.Home}>
|
|
|
<div className="homeMain">
|
|
@@ -167,8 +196,12 @@ export default function Home() {
|
|
|
<p>{nowTime}</p>
|
|
|
</div>
|
|
|
<div className="titleR">
|
|
|
- {tabList.map((v) => (
|
|
|
- <div className="row" key={v.id}>
|
|
|
+ {tabList.map((v, i) => (
|
|
|
+ <div
|
|
|
+ onClick={() => toPageFu(v.path, i === 1)}
|
|
|
+ className={classNames("row", i === 1 ? "noAuth" : "")}
|
|
|
+ key={v.id}
|
|
|
+ >
|
|
|
<div className={`bac${v.id}`}></div>
|
|
|
<p>{v.name}</p>
|
|
|
</div>
|
|
@@ -190,17 +223,22 @@ export default function Home() {
|
|
|
</div>
|
|
|
<div className="flooBoxR">
|
|
|
<div className="flooTit">
|
|
|
- <div>代办提醒</div>
|
|
|
+ <div>审核提醒</div>
|
|
|
</div>
|
|
|
<div className="doneBox">
|
|
|
{doneList.map((v, i) => (
|
|
|
<div
|
|
|
- className={classNames("doneRow", i >= 4 ? "noneRow" : "")}
|
|
|
+ onClick={() => toPageFu(v.path, i === 1)}
|
|
|
+ className={classNames(
|
|
|
+ "doneRow",
|
|
|
+ i >= 4 ? "noneRow" : "",
|
|
|
+ i === 1 ? "noAuth" : ""
|
|
|
+ )}
|
|
|
key={v.id}
|
|
|
>
|
|
|
<div className="doneRow_tit">{v.name}</div>
|
|
|
<div className="doneRow_txt">
|
|
|
- 共有 <span>{v.num}</span> 代办事项
|
|
|
+ 共有 <span>{v.num}</span> 待审核事项
|
|
|
</div>
|
|
|
</div>
|
|
|
))}
|