Skip to content

Commit a525313

Browse files
panStartpanStart
committed
feat: bug修复
1 parent eb1673e commit a525313

File tree

8 files changed

+254
-19
lines changed

8 files changed

+254
-19
lines changed

‎src/api/modules/statistics.ts

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import qs from "qs";
2+
3+
import http from "@/api";
4+
import { PORT1 } from "@/api/config/servicePort";
5+
import { Login } from "@/api/interface/index";
6+
import { IFormType } from "@/views/config";
7+
8+
/**
9+
* @name 分类模块
10+
*/
11+
12+
// 获取列表
13+
export const getPvApi = (day: number) => {
14+
return http.get(`${PORT1}/statistics/pvDayList?day=${day}`);
15+
};
16+
17+
// 删除操作
18+
export const getUvApi = (day: number) => {
19+
return http.get<Login.ResAuthButtons>(`${PORT1}/statistics/uvDayList?day=${day}`);
20+
};

‎src/layouts/components/Header/components/InfoModal.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { useState, useImperativeHandle, Ref } from "react";
2-
import { Modal, message } from "antd";
1+
import { Ref, useImperativeHandle, useState } from "react";
2+
import { message, Modal } from "antd";
33

44
interface Props {
55
innerRef: Ref<{ showModal: (params: any) => void } | undefined>;

‎src/layouts/components/Header/components/PasswordModal.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { useState, useImperativeHandle, Ref } from "react";
2-
import { Modal, message } from "antd";
1+
import { Ref, useImperativeHandle, useState } from "react";
2+
import { message, Modal } from "antd";
33

44
interface Props {
55
innerRef: Ref<{ showModal: (params: any) => void }>;

‎src/views/column/index.tsx

Lines changed: 35 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { FC, useCallback, useEffect, useState } from "react";
22
import { connect } from "react-redux";
33
import { CheckCircleOutlined, DeleteOutlined, EditOutlined, EyeOutlined } from "@ant-design/icons";
4-
import { Button, Form, Input, message, Modal, Select, Space, Table, Tag } from "antd";
4+
import { Button, Descriptions, Drawer, Form, Input, message, Modal, Select, Space, Table, Tag } from "antd";
55
import type { ColumnsType } from "antd/es/table";
66

77
import { delColumnApi, getColumnListApi, updateColumnApi } from "@/api/modules/column";
@@ -48,6 +48,8 @@ const Column: FC<IProps> = props => {
4848
const [form, setForm] = useState<IFormType>(defaultInitForm);
4949
// 弹窗
5050
const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
51+
// 弹窗
52+
const [isOpenDrawerShow, setIsOpenDrawerShow] = useState<boolean>(false);
5153
// 列表数据
5254
const [tableData, setTableData] = useState<DataType[]>([]);
5355
// 刷新函数
@@ -73,13 +75,10 @@ const Column: FC<IProps> = props => {
7375
setQuery(prev => prev + 1);
7476
}, []);
7577

76-
// 获取字典值
77-
console.log({ props });
78-
7978
// @ts-ignore
8079
const { CreamStatus, CreamStatusList } = props || {};
8180

82-
const { columnId } = form;
81+
const { columnId, column, introduction, cover, authorName, state, section } = form;
8382

8483
// 值改变
8584
const handleChange = (item: MapItem) => {
@@ -159,9 +158,20 @@ const Column: FC<IProps> = props => {
159158
render: (_, item) => {
160159
// @ts-ignore
161160
const { columnId, state } = item;
161+
162162
return (
163163
<div className="operation-btn">
164-
<Button type="primary" icon={<EyeOutlined />} style={{ marginRight: "10px" }} onClick={() => setIsModalOpen(true)}>
164+
<Button
165+
type="primary"
166+
icon={<EyeOutlined />}
167+
style={{ marginRight: "10px" }}
168+
onClick={() => {
169+
setIsOpenDrawerShow(true);
170+
setStatus(UpdateEnum.Edit);
171+
handleChange({ ...item });
172+
// formRef.setFieldsValue({ ...item, type: String(type), status: String(status) });
173+
}}
174+
>
165175
详情
166176
</Button>
167177
<Button
@@ -258,6 +268,15 @@ const Column: FC<IProps> = props => {
258268
</Form>
259269
);
260270

271+
const detailInfo = [
272+
{ label: "教程名", title: column },
273+
{ label: "简介", title: introduction },
274+
{ label: "封面URL", title: cover },
275+
{ label: "作者", title: authorName },
276+
{ label: "状态", title: CreamStatus[state] },
277+
{ label: "排序", title: section }
278+
];
279+
261280
return (
262281
<div className="Column">
263282
<ContentWrap>
@@ -268,6 +287,16 @@ const Column: FC<IProps> = props => {
268287
<Table columns={columns} dataSource={tableData} pagination={paginationInfo} />
269288
</ContentInterWrap>
270289
</ContentWrap>
290+
{/* 抽屉 */}
291+
<Drawer title="详情" placement="right" onClose={() => setIsOpenDrawerShow(false)} visible={isOpenDrawerShow}>
292+
<Descriptions column={1} labelStyle={{ width: "100px" }}>
293+
{detailInfo.map(({ label, title }) => (
294+
<Descriptions.Item label={label} key={label}>
295+
{title !== 0 ? title || "-" : 0}
296+
</Descriptions.Item>
297+
))}
298+
</Descriptions>
299+
</Drawer>
271300
{/* 弹窗 */}
272301
<Modal title="添加/修改" visible={isModalOpen} onCancel={() => setIsModalOpen(false)} onOk={handleSubmit}>
273302
{reviseModalContent}

‎src/views/columnArticle/index.tsx

Lines changed: 43 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { FC, useCallback, useEffect, useState } from "react";
22
import { connect } from "react-redux";
33
import { CheckCircleOutlined, DeleteOutlined, EditOutlined, EyeOutlined } from "@ant-design/icons";
4-
import { Button, Form, Input, message, Modal, Select, Space, Table, Tag } from "antd";
4+
import { Button, Descriptions, Drawer, Form, Input, message, Modal, Select, Space, Table, Tag } from "antd";
55
import type { ColumnsType } from "antd/es/table";
66

77
import { delColumnArticleApi, getColumnArticleListApi, updateColumnArticleApi } from "@/api/modules/column";
@@ -46,6 +46,8 @@ const ColumnArticle: FC<IProps> = props => {
4646
const [form, setForm] = useState<IFormType>(defaultInitForm);
4747
// 弹窗
4848
const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
49+
const [isOpenDrawerShow, setIsOpenDrawerShow] = useState<boolean>(false);
50+
4951
// 列表数据
5052
const [tableData, setTableData] = useState<DataType[]>([]);
5153
// 刷新函数
@@ -77,8 +79,7 @@ const ColumnArticle: FC<IProps> = props => {
7779
// @ts-ignore
7880
const { ConfigType, ConfigTypeList, ColumnStatus, ColumnStatusList, ArticleTag, ArticleTagList } = props || {};
7981

80-
const { id } = form;
81-
82+
const { id, articleId, title, columnId, column, sort } = form;
8283
// 值改变
8384
const handleChange = (item: MapItem) => {
8485
setForm({ ...form, ...item });
@@ -155,10 +156,29 @@ const ColumnArticle: FC<IProps> = props => {
155156
const { id } = item;
156157
return (
157158
<div className="operation-btn">
158-
<Button type="primary" icon={<EyeOutlined />} style={{ marginRight: "10px" }} onClick={() => setIsModalOpen(true)}>
159+
<Button
160+
type="primary"
161+
icon={<EyeOutlined />}
162+
style={{ marginRight: "10px" }}
163+
onClick={() => {
164+
setIsOpenDrawerShow(true);
165+
setStatus(UpdateEnum.Edit);
166+
handleChange({ ...item });
167+
// formRef.setFieldsValue({ ...item, type: String(type), status: String(status) });
168+
}}
169+
>
159170
详情
160171
</Button>
161-
<Button type="primary" icon={<EditOutlined />} style={{ marginRight: "10px" }} onClick={() => setIsModalOpen(true)}>
172+
<Button
173+
type="primary"
174+
icon={<EditOutlined />}
175+
style={{ marginRight: "10px" }}
176+
onClick={() => {
177+
setIsModalOpen(true);
178+
setStatus(UpdateEnum.Edit);
179+
formRef.setFieldsValue({ ...item });
180+
}}
181+
>
162182
编辑
163183
</Button>
164184
<Button type="primary" danger icon={<DeleteOutlined />} onClick={() => handleDel(id)}>
@@ -219,6 +239,14 @@ const ColumnArticle: FC<IProps> = props => {
219239
</Form>
220240
);
221241

242+
const detailInfo = [
243+
{ label: "文章ID", title: articleId },
244+
{ label: "文章标题", title: title },
245+
{ label: "教程ID", title: columnId },
246+
{ label: "教程名", title: column },
247+
{ label: "排序", title: sort }
248+
];
249+
222250
return (
223251
<div className="ColumnArticle">
224252
<ContentWrap>
@@ -229,6 +257,16 @@ const ColumnArticle: FC<IProps> = props => {
229257
<Table columns={columns} dataSource={tableData} pagination={paginationInfo} />
230258
</ContentInterWrap>
231259
</ContentWrap>
260+
{/* 抽屉 */}
261+
<Drawer title="详情" placement="right" onClose={() => setIsOpenDrawerShow(false)} visible={isOpenDrawerShow}>
262+
<Descriptions column={1} labelStyle={{ width: "100px" }}>
263+
{detailInfo.map(({ label, title }) => (
264+
<Descriptions.Item label={label} key={label}>
265+
{title !== 0 ? title || "-" : 0}
266+
</Descriptions.Item>
267+
))}
268+
</Descriptions>
269+
</Drawer>
232270
{/* 弹窗 */}
233271
<Modal title="添加/修改" visible={isModalOpen} onCancel={() => setIsModalOpen(false)} onOk={handleSubmit}>
234272
{reviseModalContent}

‎src/views/config/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -205,7 +205,7 @@ const Banner: FC<IProps> = props => {
205205
setIsOpenDrawerShow(true);
206206
setStatus(UpdateEnum.Edit);
207207
handleChange({ configId: id, ...item });
208-
formRef.setFieldsValue({ ...item, type: String(type), status: String(status) });
208+
// formRef.setFieldsValue({ ...item, type: String(type), status: String(status) });
209209
}}
210210
>
211211
详情

‎src/views/statistics/index.scss

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
.statistics {
2+
.content-wrap {
3+
overflow-x: hidden;
4+
}
5+
6+
&-pv__wrap {
7+
display: flex;
8+
flex-direction: column;
9+
align-items: flex-end;
10+
margin-bottom: 20px;
11+
border: 1px solid #ccc;
12+
background-color: #fff;
13+
padding: 24px;
14+
}
15+
16+
&-uv__wrap {
17+
@extend .statistics-pv__wrap;
18+
}
19+
20+
&-pv {
21+
width: 100%;
22+
height: 300px;
23+
}
24+
25+
&-uv {
26+
@extend .statistics-pv;
27+
}
28+
}

‎src/views/statistics/index.tsx

Lines changed: 123 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,130 @@
1-
import React, { FC } from "react";
1+
import React, { FC, useEffect, useRef, useState } from "react";
2+
import { Select } from "antd";
3+
import * as echarts from "echarts";
24

3-
// import "./index.scss";
5+
import { getPvApi, getUvApi } from "@/api/modules/statistics";
6+
import { ContentWrap } from "@/components/common-wrap";
7+
import { MapItem } from "@/typings/common";
8+
9+
import "./index.scss";
410

511
interface IProps {}
612

713
const Statistics: FC<IProps> = props => {
8-
return <div className="Name">敬请期待</div>;
14+
const pvRef = useRef<HTMLDivElement>(null);
15+
const uvRef = useRef<HTMLDivElement>(null);
16+
const [pvDay, setPvDay] = useState<string>("7");
17+
const [uvDay, setUvDay] = useState<string>("7");
18+
const [pvInfo, setPvInfo] = useState<MapItem[]>([]);
19+
const [uvInfo, setUvInfo] = useState<MapItem[]>([]);
20+
21+
const pvDate = pvInfo.map(({ date }) => date);
22+
const pvCount = pvInfo.map(({ count }) => count);
23+
const uvDate = uvInfo.map(({ date }) => date);
24+
const uvCount = uvInfo.map(({ count }) => count);
25+
26+
const getPvList = async () => {
27+
const { status, result } = await getPvApi(pvDay);
28+
if (status.code === 0) {
29+
setPvInfo(result);
30+
}
31+
};
32+
33+
const getUvList = async () => {
34+
const { status, result } = await getUvApi(uvDay);
35+
if (status.code === 0) {
36+
setUvInfo(result);
37+
}
38+
};
39+
40+
const getPvRef = () => {
41+
let myChart = echarts.init(pvRef.current);
42+
let option;
43+
44+
option = {
45+
xAxis: {
46+
type: "category",
47+
data: pvDate
48+
},
49+
yAxis: {
50+
type: "value"
51+
},
52+
series: [
53+
{
54+
data: pvCount,
55+
type: "line",
56+
smooth: true
57+
}
58+
]
59+
};
60+
61+
option && myChart.setOption(option);
62+
};
63+
64+
const getUvRef = () => {
65+
let myChart = echarts.init(uvRef.current);
66+
let option;
67+
68+
option = {
69+
xAxis: {
70+
type: "category",
71+
data: uvDate
72+
},
73+
yAxis: {
74+
type: "value"
75+
},
76+
series: [
77+
{
78+
data: uvCount,
79+
type: "line",
80+
smooth: true
81+
}
82+
]
83+
};
84+
85+
option && myChart.setOption(option);
86+
};
87+
88+
useEffect(() => {
89+
getPvList();
90+
}, [pvDay]);
91+
92+
useEffect(() => {
93+
getUvList();
94+
}, [uvDay]);
95+
96+
useEffect(() => {
97+
getPvRef();
98+
}, [pvDate, pvCount]);
99+
100+
useEffect(() => {
101+
getUvRef();
102+
}, [uvDate, uvCount]);
103+
104+
const dayLimitList = [
105+
{ value: "7", label: "7天" },
106+
{ value: "30", label: "30天" }
107+
];
108+
109+
return (
110+
<div className="statistics">
111+
<ContentWrap>
112+
<div className="statistics-pv__wrap">
113+
<Select value={pvDay} onChange={value => setPvDay(value)} options={dayLimitList} />
114+
<div className="statistics-pv" ref={pvRef}></div>
115+
</div>
116+
<div className="statistics-pv__wrap">
117+
<Select
118+
value={uvDay}
119+
onChange={value => {
120+
setUvDay(value);
121+
}}
122+
options={dayLimitList}
123+
/>
124+
<div className="statistics-uv" ref={uvRef}></div>
125+
</div>
126+
</ContentWrap>
127+
</div>
128+
);
9129
};
10130
export default Statistics;

0 commit comments

Comments
 (0)