Skip to content

S
sass-admin
Commit 811c26f2 by chengming
Options

工作台修改

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