Skip to content

S
sass-admin
Commit 811c26f2 by chengming
Options

工作台修改

parent ad838d3a
Showing with 158 additions and 81 deletions
src/pages/Dashboard/index.js
import React, { Component } from "react";
import styles from "./style/index.less";
import {
Select,
Form,
Button,
message,
} from "antd";
import { Select, Form, Button, message } from "antd";
import { connect } from "react-redux";
import * as actions from "./redux/actions";
import { withRouter } from "react-router-dom";
......@@ -46,15 +41,14 @@ class homePage extends Component {
tgOrg1: "",
tgOrg2: "",
tgId: "",
currentPeriod: '今日', // 登录量添加周期状态
oldCurrentPeriod: '昨日', // 登录量添加对比周期状态
lllcurrentPeriod: '今日', // 浏览量添加周期状态
oldLllCurrentPeriod: '昨日', // 浏览量添加对比周期状态
hdlcurrentPeriod: '今日', // 互动量添加周期状态
oldHdlCurrentPeriod: '昨日', // 互动量添加对比周期状态
currentPeriod: "今日", // 登录量添加周期状态
oldCurrentPeriod: "昨日", // 登录量添加对比周期状态
lllcurrentPeriod: "今日", // 浏览量添加周期状态
oldLllCurrentPeriod: "昨日", // 浏览量添加对比周期状态
hdlcurrentPeriod: "今日", // 互动量添加周期状态
oldHdlCurrentPeriod: "昨日", // 互动量添加对比周期状态
};
}
getDateRange = () => {
const dates = [];
for (let i = 4; i >= 0; i--) {
......@@ -62,30 +56,61 @@ class homePage extends Component {
currentDate.setDate(currentDate.getDate() - i);
const m = currentDate.getMonth() + 1;
const d = currentDate.getDate();
dates.push(`${m}-${d < 10 ? '0' + d : d}`);
dates.push(`${m}-${d < 10 ? "0" + d : d}`);
}
return dates;
};
// 在dllChange方法中调用
dllChange = e => {
if (e == 1) {
this.setState({ dllTime: e, currentPeriod: "今年", oldCurrentPeriod: "去年", dllXtitle: [`${year - 4}年`, `${year - 3}年`, `${year - 2}年`, `${year - 1}年`, `${year}年`] }, () => {
this.getDllRes();
});
this.setState(
{
dllTime: e,
currentPeriod: "今年",
oldCurrentPeriod: "去年",
dllXtitle: [
`${year - 4}年`,
`${year - 3}年`,
`${year - 2}年`,
`${year - 1}年`,
`${year}年`,
],
},
() => {
this.getDllRes();
}
);
} else if (e == 2) {
this.setState({ dllTime: e, currentPeriod: "本月", oldCurrentPeriod: "上月", dllXtitle: [`${month - 4}月`, `${month - 3}月`, `${month - 2}月`, `${month - 1}月`, `${month}月`] }, () => {
this.getDllRes();
});
this.setState(
{
dllTime: e,
currentPeriod: "本月",
oldCurrentPeriod: "上月",
dllXtitle: [
`${month - 4}月`,
`${month - 3}月`,
`${month - 2}月`,
`${month - 1}月`,
`${month}月`,
],
},
() => {
this.getDllRes();
}
);
} else if (e == 3) {
const dateTitles = this.getDateRange();
this.setState({
dllTime: e,
currentPeriod: "今日",
oldCurrentPeriod: "昨日",
dllXtitle: dateTitles
}, () => {
this.getDllRes();
});
this.setState(
{
dllTime: e,
currentPeriod: "今日",
oldCurrentPeriod: "昨日",
dllXtitle: dateTitles,
},
() => {
this.getDllRes();
}
);
}
};
getDllRes = () => {
......@@ -157,7 +182,13 @@ class homePage extends Component {
},
},
{
data: [dllData.fifthNum, dllData.fourtNum, dllData.thirdNum, dllData.preNum, dllData.num],
data: [
dllData.fifthNum,
dllData.fourtNum,
dllData.thirdNum,
dllData.preNum,
dllData.num,
],
type: "bar",
barWidth: 20,
itemStyle: {
......@@ -181,19 +212,28 @@ class homePage extends Component {
// 浏览量
lllChange = e => {
if (e == 1) {
this.setState({ lllTime: e, lllcurrentPeriod: "今年", oldLllCurrentPeriod: "去年" }, () => {
this.getLllRes();
});
this.setState(
{ lllTime: e, lllcurrentPeriod: "今年", oldLllCurrentPeriod: "去年" },
() => {
this.getLllRes();
}
);
}
if (e == 2) {
this.setState({ lllTime: e, lllcurrentPeriod: "本月", oldLllCurrentPeriod: "上月" }, () => {
this.getLllRes();
});
this.setState(
{ lllTime: e, lllcurrentPeriod: "本月", oldLllCurrentPeriod: "上月" },
() => {
this.getLllRes();
}
);
}
if (e == 3) {
this.setState({ lllTime: e, lllcurrentPeriod: "今日", oldLllCurrentPeriod: "昨日", }, () => {
this.getLllRes();
});
this.setState(
{ lllTime: e, lllcurrentPeriod: "今日", oldLllCurrentPeriod: "昨日" },
() => {
this.getLllRes();
}
);
}
};
getLllRes = () => {
......@@ -206,19 +246,28 @@ class homePage extends Component {
hdlChange = (type, e) => {
if (type == 1) {
if (e == 1) {
this.setState({ hdlTime: e, hdlcurrentPeriod: "今年", oldHdlCurrentPeriod: "去年" }, () => {
this.getHdlRes();
});
this.setState(
{ hdlTime: e, hdlcurrentPeriod: "今年", oldHdlCurrentPeriod: "去年" },
() => {
this.getHdlRes();
}
);
}
if (e == 2) {
this.setState({ hdlTime: e, hdlcurrentPeriod: "本月", oldHdlCurrentPeriod: "上月" }, () => {
this.getHdlRes();
});
this.setState(
{ hdlTime: e, hdlcurrentPeriod: "本月", oldHdlCurrentPeriod: "上月" },
() => {
this.getHdlRes();
}
);
}
if (e == 3) {
this.setState({ hdlTime: e, hdlcurrentPeriod: "今日", oldHdlCurrentPeriod: "昨日", }, () => {
this.getHdlRes();
});
this.setState(
{ hdlTime: e, hdlcurrentPeriod: "今日", oldHdlCurrentPeriod: "昨日" },
() => {
this.getHdlRes();
}
);
}
} else if (type == 2) {
this.setState({ hdlType: e }, () => {
......@@ -534,7 +583,7 @@ class homePage extends Component {
parseFloat(zlrData.qualifidNum).toFixed(2) * 100,
],
tooltip: {
formatter: function (params) {
formatter: function(params) {
// 使用 formatter 来显示百分比
return `${params.marker}${params.name}${parseFloat(
params.value
......@@ -549,11 +598,9 @@ class homePage extends Component {
label: {
show: true, //开启显示
position: "top",
formatter: function (params) {
formatter: function(params) {
// 使用 formatter 来显示百分比
return `${parseFloat(
params.value
).toFixed(2)}%`;
return `${parseFloat(params.value).toFixed(2)}%`;
},
textStyle: {
//数值样式
......@@ -570,13 +617,37 @@ class homePage extends Component {
//投稿总数
tgChange = e => {
if (e == 1) {
this.setState({ tgTime: e, tgXtitle: [`${year - 4}年`, `${year - 3}年`, `${year - 2}年`, `${year - 1}年`, `${year}年`] }, () => {
this.getTgRes();
});
this.setState(
{
tgTime: e,
tgXtitle: [
`${year - 4}年`,
`${year - 3}年`,
`${year - 2}年`,
`${year - 1}年`,
`${year}年`,
],
},
() => {
this.getTgRes();
}
);
} else if (e == 2) {
this.setState({ tgTime: e, tgXtitle: [`${month - 4}月`, `${month - 3}月`, `${month - 2}月`, `${month - 1}月`, `${month}月`] }, () => {
this.getTgRes();
});
this.setState(
{
tgTime: e,
tgXtitle: [
`${month - 4}月`,
`${month - 3}月`,
`${month - 2}月`,
`${month - 1}月`,
`${month}月`,
],
},
() => {
this.getTgRes();
}
);
} else if (e == 3) {
this.setState({ tgTime: e, tgXtitle: this.getDateRange() }, () => {
this.getTgRes();
......@@ -660,11 +731,11 @@ class homePage extends Component {
},
{
data: [
tgData.fifthNum === '' ? 0 : Number(tgData.fifthNum),
tgData.fourtNum === '' ? 0 : Number(tgData.fourtNum),
tgData.thirdNum === '' ? 0 : Number(tgData.thirdNum),
tgData.preNum === '' ? 0 : Number(tgData.preNum),
tgData.num === '' ? 0 : Number(tgData.num)
tgData.fifthNum === "" ? 0 : Number(tgData.fifthNum),
tgData.fourtNum === "" ? 0 : Number(tgData.fourtNum),
tgData.thirdNum === "" ? 0 : Number(tgData.thirdNum),
tgData.preNum === "" ? 0 : Number(tgData.preNum),
tgData.num === "" ? 0 : Number(tgData.num),
],
type: "bar",
barWidth: 20,
......@@ -826,7 +897,7 @@ class homePage extends Component {
setTimeout(() => {
this.props.getDownload({}, res => {
if (res.code === "1000") {
message.loading("数据导出中..", 5).then(() => window.open(res.data))
message.loading("数据导出中..", 5).then(() => window.open(res.data));
}
});
}, 1000);
......@@ -914,7 +985,7 @@ class homePage extends Component {
);
};
const phbHtml = () => {
return pbhChartList?.map((item, index) => {
return pbhChartList?.slice(0, 8).map((item, index) => {
return (
<div className={styles.list} key={index}>
<p>
......@@ -993,7 +1064,7 @@ class homePage extends Component {
</p>
</div>
<div className={styles.card4}>
<p>排行榜</p>
<p>活跃度排行榜</p>
<p>支部/用户排行榜</p>
</div>
</div>
......@@ -1129,7 +1200,6 @@ class homePage extends Component {
<Option value={13} key={4}>
评论
</Option>
</Select>
<Select
className={styles.Select}
......@@ -1159,7 +1229,7 @@ class homePage extends Component {
<div>
<div>
<img src={img13} alt="" />
<p>排行榜</p>
<p>活跃度排行榜</p>
</div>
<div>
<Select
......@@ -1290,7 +1360,10 @@ class homePage extends Component {
<div>
<div className={styles.chartList}>
<p>年度测试总数及参加人数</p>
<div className={styles.chartBottom} style={{ height: "360px" }}>
<div
className={styles.chartBottom}
style={{ height: "360px" }}
>
<ReactEcharts
style={{ height: "100%", width: "100%" }}
option={this.zlrChart1()}
......@@ -1300,9 +1373,12 @@ class homePage extends Component {
/>
</div>
</div>
<div className={styles.chartList} >
<div className={styles.chartList}>
<p>年度测试合格率</p>
<div className={styles.chartBottom} style={{ height: "360px" }}>
<div
className={styles.chartBottom}
style={{ height: "360px" }}
>
<ReactEcharts
style={{ height: "100%", width: "100%" }}
option={this.zlrChart2()}
......@@ -1329,9 +1405,11 @@ class homePage extends Component {
<div>{item.deptName}</div>
{item?.eventTrackTypeNumVoList &&
item?.eventTrackTypeNumVoList.length > 0 &&
item?.eventTrackTypeNumVoList.map((element, index1) => (
<p key={index1}>{element.num}</p>
))}
item?.eventTrackTypeNumVoList.map(
(element, index1) => (
<p key={index1}>{element.num}</p>
)
)}
</div>
))}
</div>
......@@ -1371,9 +1449,7 @@ class homePage extends Component {
<div className={styles.tgchart}>
<div className={styles.chartTop}>
<div>
<div>
</div>
<div></div>
<div>
<Select
className={styles.Select}
......@@ -1478,4 +1554,4 @@ class homePage extends Component {
export default connect(state => ({ ...state.homePage }), { ...actions })(
withRouter(createForm()(homePage))
);
);
\ No newline at end of file
src/pages/Dashboard/style/index.less
......@@ -390,7 +390,7 @@
& .chartBottom {
width: 100%;
height: 228px;
margin-top: 20px;
margin-top: 10px;
& p {
margin: 0;
}
......@@ -404,7 +404,7 @@
font-weight: 400;
color: rgba(74, 81, 84, 0.7);
padding: 6px 12px;
margin-bottom: 15px;
margin-bottom: 5px;
& p:nth-child(1) {
width: 20%;
text-align: left;
......@@ -422,7 +422,7 @@
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 18px;
padding: 3px 18px;
font-size: 14px;
color: rgba(74, 81, 84, 1);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment