2164 lines
63 KiB
JavaScript
2164 lines
63 KiB
JavaScript
import React, { useState, useEffect, useRef, Component } from "react";
|
||
import { connect } from "dva";
|
||
import storage from "../utils/storage";
|
||
import IconFont from "../utils/iconFont";
|
||
import {
|
||
initFilter,
|
||
addRuleAndGroups,
|
||
guid,
|
||
extendInclude,
|
||
extendRule,
|
||
extend,
|
||
extendOrder,
|
||
} from "../utils/common";
|
||
import "./home.less";
|
||
// 组件库
|
||
import {
|
||
Row,
|
||
Col,
|
||
Icon,
|
||
Progress,
|
||
Tabs,
|
||
message,
|
||
Dropdown,
|
||
Menu,
|
||
Empty,
|
||
Modal,
|
||
Divider,
|
||
Form,
|
||
Input,
|
||
Table,
|
||
Button,
|
||
DatePicker,
|
||
Select,
|
||
} from "antd";
|
||
import styles from "./dashboard.css";
|
||
import "slick-carousel/slick/slick.css";
|
||
import "slick-carousel/slick/slick-theme.css";
|
||
import echarts from "echarts";
|
||
import config from "../config";
|
||
import ModifyPassword from "../components/MainPage/ModifyPassword";
|
||
import FoUserInfoShow from "../components/MainPage/FoUserInfoShow";
|
||
import FormPage from "../components/FormPage";
|
||
const { TabPane } = Tabs;
|
||
const Option = Select.Option;
|
||
const RangePicker = DatePicker.RangePicker;
|
||
const formItemLayout = {
|
||
labelCol: { span: 6 },
|
||
wrapperCol: { span: 14 },
|
||
};
|
||
const AllTech = (props) => {
|
||
return (
|
||
<Col
|
||
span={6}
|
||
className="home-tech-col"
|
||
onClick={() => {
|
||
props.techClick()
|
||
}}
|
||
>
|
||
<div className="home-tech-back">
|
||
<IconFont type={props.icon} className="home-tech-icon"></IconFont>
|
||
</div>
|
||
<span className="home-tech-name">{props.title}</span>
|
||
</Col>
|
||
);
|
||
};
|
||
const WorkBench = (props) => {
|
||
return (
|
||
<div>
|
||
{props.data.map((item, index) => {
|
||
const result =
|
||
(Date.parse(item.TASK_ENDDT) - Date.parse(Date())) / 3600 / 1000;
|
||
const prepare = result > 0 ? "正常" : "超期";
|
||
const warning =
|
||
item.NOTICE_STATUS == 0
|
||
? "未读"
|
||
: item.NOTICE_STATUS == 3
|
||
? "已读"
|
||
: "已办";
|
||
const type = props.index == 1 || props.index == 2 ? prepare : warning;
|
||
|
||
return (
|
||
<div
|
||
style={{
|
||
display: "flex",
|
||
flexDirection: "row",
|
||
padding: "10px",
|
||
alignItems: "center",
|
||
justifyContent: "space-between",
|
||
borderBottom:
|
||
index !== props.data.length - 1 ? "1px solid #e7e6e4" : "",
|
||
}}
|
||
className="home-work-back"
|
||
onClick={() => {
|
||
props.benchCLick(item);
|
||
}}
|
||
>
|
||
<div
|
||
className={
|
||
type == "超期"
|
||
? "home-work-type-red"
|
||
: type == "未办" || type == "未读"
|
||
? "home-work-type-yellow"
|
||
: type == "已办"
|
||
? "home-work-type-green"
|
||
: "home-work-type-black"
|
||
}
|
||
style={{
|
||
marginLeft: "20px",
|
||
marginRight: "20px",
|
||
}}
|
||
>
|
||
{type}
|
||
</div>
|
||
|
||
<div
|
||
className="home-work-title"
|
||
style={{ flex: 1, alignItems: "flex-start" }}
|
||
>
|
||
{item.NOTICE_TITLE}
|
||
</div>
|
||
<div
|
||
className="home-work-date"
|
||
style={{
|
||
width: "200px",
|
||
marginRight: "100px",
|
||
}}
|
||
>
|
||
开始时间：{item.TASK_STARTDT}
|
||
</div>
|
||
<div
|
||
className="home-work-date"
|
||
style={{
|
||
width: "200px",
|
||
marginRight: "50px",
|
||
}}
|
||
>
|
||
结束时间：{item.TASK_ENDDT}
|
||
</div>
|
||
{/* <div className="home-work-person" style={{ width: "140px" }}>
|
||
发起人：{item.person}
|
||
</div> */}
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
);
|
||
};
|
||
const UserInfo = (props) => {
|
||
return (
|
||
<div
|
||
className="home-userInfo"
|
||
onClick={() => {
|
||
props.showAll();
|
||
}}
|
||
>
|
||
<div className="home-userInfo-pad">
|
||
<Icon
|
||
type="schedule"
|
||
className="home-userInfo-Icon"
|
||
style={{ color: props.color }}
|
||
></Icon>
|
||
<div className="home-userInfo-title">{props.title}</div>
|
||
</div>
|
||
<div className="home-userInfo-content" style={{ color: props.color }}>
|
||
{props.data}
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
class Home extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
visible: false,
|
||
userInfo: "",
|
||
timeNow: "上午好",
|
||
workData: [],
|
||
workTotal: "",
|
||
tableKey: "1",
|
||
formVisible: false,
|
||
noticeTitle: "",
|
||
searchVisible: false,
|
||
visibleTitle: "",
|
||
searchTodayVisible: false,
|
||
taskSelects: [],
|
||
tmpData: {},
|
||
querySearch: {},
|
||
currentpageIndex: "1",
|
||
visibleStartTime: [],
|
||
visibleEndTime: [],
|
||
completeName: [
|
||
{
|
||
name: "张森友",
|
||
value: 100,
|
||
},
|
||
{
|
||
name: "李友军",
|
||
value: 99,
|
||
},
|
||
{
|
||
name: "洪虎林",
|
||
value: 97,
|
||
},
|
||
{
|
||
name: "李彦斌",
|
||
value: 95,
|
||
},
|
||
{
|
||
name: "王志文",
|
||
value: 93,
|
||
},
|
||
{
|
||
name: "黄海林",
|
||
value: 90,
|
||
},
|
||
{
|
||
name: "赵无极",
|
||
value: 67,
|
||
},
|
||
{
|
||
name: "林佑君",
|
||
value: 43,
|
||
},
|
||
],
|
||
};
|
||
}
|
||
|
||
componentDidMount() {
|
||
if (window.navigator.userAgent.indexOf("Windows") < 1) {
|
||
window.location.replace(config.guideH5Host);
|
||
//alert('手机');
|
||
}
|
||
this.getBaseData(1, "1", 5);
|
||
this.timeJudg();
|
||
this.riskLevel();
|
||
// this.homeRound();
|
||
this.completeRate();
|
||
this.timelyRate();
|
||
this.safeCheck();
|
||
this.dangerChange();
|
||
this.getUser();
|
||
}
|
||
getSixMonth = (number, yearString = "", monthString = "") => {
|
||
let nowdate = new Date();
|
||
nowdate.setMonth(nowdate.getMonth() + number);
|
||
let y = nowdate.getFullYear();
|
||
let m = nowdate.getMonth() + 1;
|
||
// let d = nowdate.getDate();
|
||
let retrundate = y + yearString + m + monthString;
|
||
|
||
return retrundate;
|
||
};
|
||
showAll = (key) => {
|
||
const { tableData } = this.state;
|
||
|
||
if (key == "2") {
|
||
this.state.searchColumns = [
|
||
{
|
||
width: "450px",
|
||
title: "任务名称",
|
||
dataIndex: "NOTICE_TITLE",
|
||
key: "NOTICE_TITLE",
|
||
render: (text, record) => (
|
||
<span>
|
||
<a
|
||
onClick={() =>
|
||
this.showEditModal(
|
||
record.SOURCE_DATA_ID,
|
||
record.SOURCE_FORMCODE,
|
||
record.ID,
|
||
record.NOTICE_TITLE,
|
||
record.CODE
|
||
)
|
||
}
|
||
>
|
||
{record.NOTICE_TITLE}
|
||
</a>
|
||
</span>
|
||
),
|
||
},
|
||
{
|
||
title: "开始时间",
|
||
dataIndex: "TASK_STARTDT",
|
||
key: "TASK_STARTDT",
|
||
},
|
||
{
|
||
title: "结束时间",
|
||
dataIndex: "TASK_ENDDT",
|
||
key: "TASK_ENDDT",
|
||
},
|
||
{
|
||
title: "办结时间",
|
||
dataIndex: "TASK_DT",
|
||
key: "TASK_DT",
|
||
},
|
||
];
|
||
this.setState({
|
||
searchVisible: true,
|
||
searchTodayVisible: false,
|
||
querySearch: {},
|
||
});
|
||
} else if (key === "3") {
|
||
this.state.searchColumns = [
|
||
{
|
||
width: "450px",
|
||
title: "提醒内容",
|
||
dataIndex: "NOTICE_TITLE",
|
||
key: "NOTICE_TITLE",
|
||
render: (text, record) => (
|
||
<span>
|
||
<a
|
||
onClick={() =>
|
||
this.showTodayModal(
|
||
record.SOURCE_DATA_ID,
|
||
record.SOURCE_FORMCODE,
|
||
record.ID,
|
||
record.NOTICE_TITLE,
|
||
record.CODE,
|
||
record.TASK_STARTDT,
|
||
record.NOTICE_STATUS
|
||
)
|
||
}
|
||
>
|
||
{record.NOTICE_TITLE}
|
||
</a>
|
||
</span>
|
||
),
|
||
},
|
||
{
|
||
title: "提醒时间",
|
||
dataIndex: "TASK_STARTDT",
|
||
key: "TASK_STARTDT",
|
||
},
|
||
{
|
||
title: "状态",
|
||
dataIndex: "NOTICE_STATUS",
|
||
key: "NOTICE_STATUS",
|
||
render: (text, record) => this.ShowStatus(record),
|
||
},
|
||
];
|
||
this.setState({
|
||
searchVisible: false,
|
||
searchTodayVisible: true,
|
||
querySearch: {},
|
||
});
|
||
} else {
|
||
this.state.searchColumns = [
|
||
{
|
||
width: "450px",
|
||
title: "任务名称",
|
||
dataIndex: "NOTICE_TITLE",
|
||
key: "NOTICE_TITLE",
|
||
render: (text, record) => (
|
||
<span>
|
||
<a
|
||
onClick={() =>
|
||
this.showEditModal(
|
||
record.SOURCE_DATA_ID,
|
||
record.SOURCE_FORMCODE,
|
||
record.ID,
|
||
record.NOTICE_TITLE,
|
||
record.CODE
|
||
)
|
||
}
|
||
>
|
||
{record.NOTICE_TITLE}
|
||
</a>
|
||
</span>
|
||
),
|
||
},
|
||
{
|
||
title: "开始时间",
|
||
dataIndex: "TASK_STARTDT",
|
||
key: "TASK_STARTDT",
|
||
},
|
||
{
|
||
title: "结束时间",
|
||
dataIndex: "TASK_ENDDT",
|
||
key: "TASK_ENDDT",
|
||
},
|
||
{
|
||
title: "预警状态",
|
||
dataIndex: "NOTICE_TYPE",
|
||
key: "NOTICE_TYPE",
|
||
render: (text, record) => this.ShowState(record),
|
||
},
|
||
];
|
||
this.setState({
|
||
searchVisible: true,
|
||
searchTodayVisible: false,
|
||
querySearch: {},
|
||
});
|
||
}
|
||
this.setState(
|
||
{
|
||
tableData,
|
||
currentpageIndex: key,
|
||
},
|
||
() => {
|
||
this.getBaseData(1, key);
|
||
}
|
||
);
|
||
};
|
||
tabsCallback = (key) => {
|
||
if (key == 1) {
|
||
this.getBaseData(1, "1", 5);
|
||
this.setState({
|
||
tableKey: "1",
|
||
});
|
||
} else if (key == 2) {
|
||
this.getBaseData(1, "4", 5);
|
||
this.setState({
|
||
tableKey: "4",
|
||
});
|
||
} else if (key == 3) {
|
||
this.getBaseData(1, "2", 5);
|
||
this.setState({
|
||
tableKey: "2",
|
||
});
|
||
} else {
|
||
this.getBaseData(1, "3", 5);
|
||
this.setState({
|
||
tableKey: "3",
|
||
});
|
||
}
|
||
};
|
||
workClick = (e) => {
|
||
this.showEditModal(
|
||
e.SOURCE_DATA_ID,
|
||
e.SOURCE_FORMCODE,
|
||
e.ID,
|
||
e.NOTICE_TITLE,
|
||
e.CODE
|
||
);
|
||
};
|
||
ShowState(obj) {
|
||
var thisResult =
|
||
(Date.parse(obj.TASK_ENDDT) - Date.parse(Date())) / 3600 / 1000;
|
||
if (thisResult > 0) {
|
||
return "正常";
|
||
} else {
|
||
return <span style={{ color: "red" }}>超期</span>;
|
||
}
|
||
}
|
||
ShowStatus(obj) {
|
||
if (obj.NOTICE_STATUS === 0) {
|
||
return <span style={{ color: "red" }}>未读</span>;
|
||
} else if (obj.NOTICE_STATUS === 3) {
|
||
return "已读";
|
||
} else {
|
||
return "已办";
|
||
}
|
||
}
|
||
showEditModal = (dataId, formCode, TaskID, title, taskCode) => {
|
||
this.props.dispatch({
|
||
type: "app/getDataByPost",
|
||
url: "BI/BIController/getVersion",
|
||
onComplete: (ret) => {
|
||
if (ret > config.version) {
|
||
window.localStorage.clear();
|
||
message.success("清除成功，即将重新加载页面", 2, () => {
|
||
setTimeout(() => window.location.reload(true), 500);
|
||
});
|
||
}
|
||
},
|
||
});
|
||
const newtmpData = {
|
||
data: {
|
||
id: dataId,
|
||
TaskID: TaskID,
|
||
onCancel: this.handleCancel,
|
||
taskCode: taskCode,
|
||
tableKey: this.state.tableKey,
|
||
homeReload: true,
|
||
},
|
||
formCode: formCode,
|
||
};
|
||
this.setState(
|
||
{
|
||
noticeTitle: title,
|
||
taskCode: taskCode,
|
||
tmpData: newtmpData,
|
||
currActivatedMenu: "",
|
||
},
|
||
() => {
|
||
this.setState({
|
||
formVisible: true,
|
||
});
|
||
}
|
||
);
|
||
};
|
||
clearData = () => {
|
||
let newtmpData = { ...this.state.tmpData };
|
||
newtmpData["data"].id = "";
|
||
newtmpData["data"].homeReload = false;
|
||
newtmpData.formCode = "";
|
||
this.setState({
|
||
formVisible: false,
|
||
tmpData: [], //newtmpData
|
||
});
|
||
};
|
||
handleCancel = () => {
|
||
// 退出弹窗
|
||
this.getBaseData(1, this.state.tableKey, 5);
|
||
this.clearData();
|
||
};
|
||
closeModal = () => {
|
||
this.setState({
|
||
formVisible: false,
|
||
});
|
||
};
|
||
getBaseData = (pagination, key, limit) => {
|
||
const current = pagination ? pagination.current : 1;
|
||
const json = initFilter(this.props.login.OrgId, "", "CODE", 1, current);
|
||
const querySearch = this.state.querySearch;
|
||
for (var item in querySearch) {
|
||
if (item == "searchName") {
|
||
extendRule(json, "NOTICE_TITLE", 9, querySearch[item]);
|
||
}
|
||
if (item == "searchCode") {
|
||
extendRule(json, "CODE", 9, querySearch[item]);
|
||
}
|
||
if (item == "startTime1") {
|
||
extendRule(json, "TASK_STARTDT", 6, querySearch[item]);
|
||
}
|
||
if (item == "startTime2") {
|
||
extendRule(json, "TASK_STARTDT", 4, querySearch[item]);
|
||
}
|
||
if (item == "endTime1") {
|
||
extendRule(json, "TASK_ENDDT", 6, querySearch[item]);
|
||
}
|
||
if (item == "endTime2") {
|
||
extendRule(json, "TASK_ENDDT", 4, querySearch[item]);
|
||
}
|
||
if (item == "searchStatus") {
|
||
extendRule(json, "NOTICE_STATUS", 1, querySearch[item]);
|
||
}
|
||
}
|
||
//extendRule(json, "NOTICE_STATUS", 1, 0);
|
||
json.Limit = limit;
|
||
//json.Limit = 10;
|
||
json.Parameter1 = key; //1待办事项2已办事项3今日新增4待办超时
|
||
|
||
this.props.dispatch({
|
||
type: "app/getDataByPost",
|
||
url: "FM/FMNotificationTask/HomeOrderPaged",
|
||
payload: json,
|
||
onlyData: false,
|
||
onComplete: (ret) => {
|
||
if (ret && ret.IsSuccessful && ret.Data.newData) {
|
||
this.setState({
|
||
workData: ret.Data.newData,
|
||
workTotal: ret.Data,
|
||
});
|
||
}
|
||
},
|
||
});
|
||
};
|
||
timeJudg = () => {
|
||
let time = new Date();
|
||
let hour = time.getHours();
|
||
if (hour >= 6 && hour <= 11) {
|
||
this.setState({
|
||
timeNow: "上午好",
|
||
});
|
||
} else if (hour > 11 && hour <= 13) {
|
||
this.setState({
|
||
timeNow: "中午好",
|
||
});
|
||
} else if (hour > 13 && hour <= 18) {
|
||
this.setState({
|
||
timeNow: "下午好",
|
||
});
|
||
} else {
|
||
this.setState({
|
||
timeNow: "晚上好",
|
||
});
|
||
}
|
||
};
|
||
getUser = () => {
|
||
var userId = storage("lacal").getItem("userid")?.val; //登录后有存储登录信息
|
||
var orgId = storage("lacal").getItem("webOrgId")?.val; //登录后有存储登录信息
|
||
let json = initFilter(orgId);
|
||
extendRule(json, "ID", 1, userId);
|
||
extendInclude(json, "Nav_Department");
|
||
this.props.dispatch({
|
||
type: "app/getDataByPost",
|
||
payload: json,
|
||
url: "FM/User/Get",
|
||
onComplete: (ret) => {
|
||
if (ret) {
|
||
this.setState({
|
||
userInfo: ret,
|
||
});
|
||
}
|
||
},
|
||
});
|
||
};
|
||
safeCheck = () => {
|
||
let series = [];
|
||
let seriesName = ["巡回检查", "例行检查", "专业检查", "综合检查"];
|
||
let data3 = [
|
||
[17, 20, 16, 20, 16, 16, 20, 16, 16, 20, 16, 4],
|
||
[43, 41, 43, 32, 47, 33, 57, 38, 46, 42, 49, 39],
|
||
[23, 21, 43, 12, 15, 13, 15, 16, 17, 14, 19, 24],
|
||
[17, 20, 23, 42, 12, 17, 13, 15, 12, 17, 19, 34],
|
||
];
|
||
let xData = [];
|
||
for (let i = 0; i < 12; i++) {
|
||
xData.unshift(this.getSixMonth(-i, "年", "月"));
|
||
}
|
||
for (let i = 0; i < data3.length; i++) {
|
||
series.push({
|
||
name: seriesName[i],
|
||
type: "bar",
|
||
stack: "总量",
|
||
data: data3[i],
|
||
barWidth: "20%",
|
||
// itemStyle:{
|
||
// borderWidth:2,
|
||
// borderColor:'#fff',
|
||
// barBorderRadius:5,
|
||
// }
|
||
});
|
||
}
|
||
let safeChecks = document.getElementById("safeCheck");
|
||
if (safeChecks) {
|
||
let myChart = echarts.init(safeChecks);
|
||
myChart.setOption({
|
||
color: ["#4285F4", "#72b85b", "#c92a2a", "#ffa94d"],
|
||
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
// 坐标轴指示器，坐标轴触发有效
|
||
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
||
},
|
||
transitionDuration: 0,
|
||
},
|
||
grid: {
|
||
left: "5%",
|
||
right: "5%",
|
||
bottom: "15%",
|
||
top: "10%",
|
||
containLabel: true,
|
||
z: 22,
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
data: xData,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#0c3b71",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
color: "rgb(170,170,170)",
|
||
interval: 0,
|
||
textStyle: {
|
||
lineHeight: 14,
|
||
},
|
||
formatter: function (param) {
|
||
return param.split("年")[1];
|
||
},
|
||
},
|
||
},
|
||
legend: {
|
||
data: ["巡回检查", "例行检查", "专业检查", "综合检查"],
|
||
left: "center",
|
||
align: "left",
|
||
bottom: "2%",
|
||
textStyle: {
|
||
color: "#000",
|
||
},
|
||
itemWidth: 10,
|
||
itemHeight: 10,
|
||
// itemGap: 15,
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: ["#f2f2f2"],
|
||
},
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#0c3b71",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
color: "rgb(170,170,170)",
|
||
formatter: "{value} ",
|
||
},
|
||
},
|
||
series: series,
|
||
});
|
||
}
|
||
};
|
||
dangerChange = () => {
|
||
let sourceName = [
|
||
"按时整改隐患",
|
||
"超期整改隐患",
|
||
"未整改隐患",
|
||
"隐患整改率",
|
||
];
|
||
let ydata = [
|
||
["2", "5", "6", "8", "10", "9"],
|
||
["1", "7", "1", "2", "5", "4"],
|
||
["0", "1", "0", "3", "0", "1"],
|
||
["100.00", "92.31", "100.00", "76.92", "100.00", "92.86"],
|
||
];
|
||
let date = new Date();
|
||
let year = date.getFullYear();
|
||
let month = date.getMonth() + 1;
|
||
let xData = [];
|
||
for (let i = 0; i < 6; i++) {
|
||
xData.unshift(this.getSixMonth(-i, "-", ""));
|
||
}
|
||
let dangerChanges = document.getElementById("dangerChange");
|
||
if (dangerChanges) {
|
||
let myChart = echarts.init(dangerChanges);
|
||
myChart.setOption({
|
||
color: ["#72b85b", "#f6841a", "#cc0404", "#4285F4"],
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
// 坐标轴指示器，坐标轴触发有效
|
||
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
||
},
|
||
transitionDuration: 0,
|
||
formatter: function (params) {
|
||
return (
|
||
params[0].name +
|
||
"</br>" +
|
||
params[0].marker +
|
||
params[0].seriesName +
|
||
" : " +
|
||
params[0].value +
|
||
"</br>" +
|
||
params[1].marker +
|
||
params[1].seriesName +
|
||
" : " +
|
||
params[1].value +
|
||
"</br>" +
|
||
params[2].marker +
|
||
params[2].seriesName +
|
||
" : " +
|
||
params[2].value +
|
||
"</br>" +
|
||
params[3].marker +
|
||
params[3].seriesName +
|
||
" : " +
|
||
params[3].value +
|
||
"%"
|
||
);
|
||
},
|
||
},
|
||
grid: {
|
||
left: "5%",
|
||
right: "5%",
|
||
bottom: "15%",
|
||
top: "10%",
|
||
containLabel: true,
|
||
z: 22,
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
data: xData,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#0c3b71",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
color: "rgb(170,170,170)",
|
||
interval: 0,
|
||
textStyle: {
|
||
lineHeight: 14,
|
||
},
|
||
},
|
||
},
|
||
legend: {
|
||
data: sourceName,
|
||
left: "center",
|
||
align: "left",
|
||
bottom: "2%",
|
||
textStyle: {
|
||
color: "#000",
|
||
},
|
||
itemWidth: 10,
|
||
itemHeight: 10,
|
||
// itemGap: 35,
|
||
},
|
||
yAxis: [
|
||
{
|
||
type: "value",
|
||
position: "left",
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: ["#f2f2f2"],
|
||
// opacity:0.2
|
||
// zlevel: -1,
|
||
},
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#0c3b71",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
color: "rgb(170,170,170)",
|
||
formatter: "{value} ",
|
||
},
|
||
},
|
||
{
|
||
type: "value",
|
||
position: "right",
|
||
splitLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
color: ["#f2f2f2"],
|
||
},
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#f2f2f2",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
color: "rgb(170,170,170)",
|
||
formatter: "{value} %",
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: sourceName[0],
|
||
type: "bar",
|
||
data: ydata[0],
|
||
barWidth: "10%",
|
||
barGap: "10%",
|
||
stack: null,
|
||
},
|
||
{
|
||
name: sourceName[1],
|
||
type: "bar",
|
||
data: ydata[1],
|
||
barWidth: "10%",
|
||
barGap: "10%",
|
||
stack: null,
|
||
},
|
||
{
|
||
name: sourceName[2],
|
||
type: "bar",
|
||
data: ydata[2],
|
||
barWidth: "10%",
|
||
barGap: "10%",
|
||
stack: null,
|
||
// zlevel: 99,
|
||
},
|
||
{
|
||
name: sourceName[3],
|
||
type: "line",
|
||
smooth: false,
|
||
data: ydata[3],
|
||
yAxisIndex: 1,
|
||
itemStyle: {
|
||
normal: {
|
||
lineStyle: {
|
||
type: "dotted",
|
||
},
|
||
},
|
||
},
|
||
// zlevel:100,
|
||
},
|
||
],
|
||
});
|
||
}
|
||
};
|
||
timelyRate = () => {
|
||
let timelyRates = document.getElementById("timelyRate");
|
||
if (timelyRates) {
|
||
let myChart = echarts.init(timelyRates);
|
||
myChart.setOption(
|
||
{
|
||
title: [
|
||
{
|
||
text: "83%",
|
||
x: "center",
|
||
top: "40%",
|
||
textStyle: {
|
||
fontWeight: "normal",
|
||
color: "#ffa94d",
|
||
fontSize: "26",
|
||
},
|
||
},
|
||
{
|
||
text: "及时完成率",
|
||
x: "center",
|
||
top: "55%",
|
||
textStyle: {
|
||
fontWeight: "normal",
|
||
|
||
fontSize: "14",
|
||
},
|
||
},
|
||
],
|
||
color: "#ffd6b5",
|
||
legend: {
|
||
show: false,
|
||
itemGap: 12,
|
||
data: ["01", "02"],
|
||
},
|
||
|
||
series: [
|
||
{
|
||
name: "Line 1",
|
||
type: "pie",
|
||
clockWise: true,
|
||
radius: ["60%", "76%"],
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: false,
|
||
},
|
||
labelLine: {
|
||
show: false,
|
||
},
|
||
},
|
||
},
|
||
hoverAnimation: false,
|
||
data: [
|
||
{
|
||
value: 83,
|
||
name: "01",
|
||
itemStyle: {
|
||
normal: {
|
||
color: {
|
||
// 完成的圆环的颜色
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: "#ffa94d", // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#f76707", // 100% 处的颜色
|
||
},
|
||
],
|
||
},
|
||
label: {
|
||
show: false,
|
||
},
|
||
labelLine: {
|
||
show: false,
|
||
},
|
||
},
|
||
},
|
||
},
|
||
{
|
||
name: "02",
|
||
value: 17,
|
||
},
|
||
],
|
||
},
|
||
],
|
||
},
|
||
true
|
||
);
|
||
}
|
||
};
|
||
|
||
completeRate = () => {
|
||
let completeRates = document.getElementById("completeRate");
|
||
if (completeRates) {
|
||
let myChart = echarts.init(completeRates);
|
||
myChart.setOption({
|
||
title: [
|
||
{
|
||
text: "99%",
|
||
x: "center",
|
||
top: "40%",
|
||
textStyle: {
|
||
fontWeight: "normal",
|
||
color: "#0580f2",
|
||
fontSize: "26",
|
||
},
|
||
},
|
||
{
|
||
text: "个人完成率",
|
||
x: "center",
|
||
top: "55%",
|
||
textStyle: {
|
||
fontWeight: "normal",
|
||
|
||
fontSize: "14",
|
||
},
|
||
},
|
||
],
|
||
color: ["rgba(176, 212, 251, 1)"],
|
||
legend: {
|
||
show: false,
|
||
itemGap: 12,
|
||
data: ["01", "02"],
|
||
},
|
||
|
||
series: [
|
||
{
|
||
name: "Line 1",
|
||
type: "pie",
|
||
clockWise: true,
|
||
radius: ["60%", "76%"],
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: false,
|
||
},
|
||
labelLine: {
|
||
show: false,
|
||
},
|
||
},
|
||
},
|
||
hoverAnimation: false,
|
||
data: [
|
||
{
|
||
value: 99,
|
||
name: "01",
|
||
itemStyle: {
|
||
normal: {
|
||
color: {
|
||
// 完成的圆环的颜色
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: "#00cefc", // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#367bec", // 100% 处的颜色
|
||
},
|
||
],
|
||
},
|
||
label: {
|
||
show: false,
|
||
},
|
||
labelLine: {
|
||
show: false,
|
||
},
|
||
},
|
||
},
|
||
},
|
||
{
|
||
name: "02",
|
||
value: 1,
|
||
},
|
||
],
|
||
},
|
||
],
|
||
});
|
||
}
|
||
};
|
||
|
||
riskLevel = () => {
|
||
let riskLevel = [];
|
||
let showData = [
|
||
{ value: 2, name: "一级" },
|
||
{ value: 5, name: "二级" },
|
||
{ value: 15, name: "三级" },
|
||
{ value: 30, name: "四级" },
|
||
];
|
||
|
||
let riskLevels = document.getElementById("riskLevel");
|
||
if (riskLevels) {
|
||
let myChart = echarts.init(riskLevels);
|
||
myChart.setOption({
|
||
color: ["#c92a2a", "#ffa94d", "#ffe066", "#4285F4", "#fa8a89"],
|
||
title: [
|
||
{
|
||
text: "52",
|
||
x: "26%",
|
||
y: "40%",
|
||
textStyle: {
|
||
fontSize: 26,
|
||
fontWeight: "normal",
|
||
color: ["#333"],
|
||
},
|
||
},
|
||
{
|
||
text: "风险总数",
|
||
x: "24%",
|
||
y: "55%",
|
||
textStyle: {
|
||
color: "#666",
|
||
fontSize: 12,
|
||
},
|
||
},
|
||
],
|
||
tooltip: {
|
||
trigger: "item",
|
||
formatter: "{b}:({d}%)",
|
||
},
|
||
legend: {
|
||
icon: "pin",
|
||
orient: "vartical",
|
||
// x: "right",
|
||
top: "18%",
|
||
right: "15%",
|
||
bottom: "20%",
|
||
data: showData,
|
||
// itemWidth: 20,
|
||
// itemHeight: 14,
|
||
itemGap: 25,
|
||
formatter: function (name) {
|
||
//通过name获取到数组对象中的单个对象
|
||
let singleData = showData.filter(function (item) {
|
||
return item.name == name;
|
||
});
|
||
let countAll = 0;
|
||
showData.map((item) => {
|
||
countAll = countAll + item.value;
|
||
});
|
||
|
||
return (
|
||
name +
|
||
" | " +
|
||
// singleData[0].value +
|
||
// " | " +
|
||
Number((singleData[0].value / countAll) * 100).toFixed(2) +
|
||
"%"
|
||
);
|
||
},
|
||
},
|
||
grid: {
|
||
left: 30,
|
||
containLabel: true,
|
||
bottom: 10,
|
||
top: 10,
|
||
right: 30,
|
||
},
|
||
series: [
|
||
{
|
||
name: "访问来源",
|
||
type: "pie",
|
||
clockwise: false,
|
||
// minAngle: 20,
|
||
avoidLabelOverlap: false,
|
||
radius: ["50%", "65%"],
|
||
center: ["30%", "50%"],
|
||
itemStyle: {
|
||
//图形样式
|
||
normal: {
|
||
borderColor: "#ffffff",
|
||
borderWidth: 4,
|
||
padding: "0 20px",
|
||
borderRadius: 50,
|
||
},
|
||
},
|
||
label: {
|
||
show: false,
|
||
},
|
||
// color: color,
|
||
data: showData,
|
||
},
|
||
],
|
||
});
|
||
}
|
||
};
|
||
navToMenu = (ID) => {
|
||
this.props.history.push({ pathname: `/main/${ID}` });
|
||
};
|
||
/**
|
||
* 注销登录
|
||
*/
|
||
handleLogout = () => {
|
||
const { OrgId, userId } = this.props.login;
|
||
const logJson = initFilter(OrgId, userId, "", 0, 1, 0);
|
||
this.props.dispatch({
|
||
type: "app/addLoginOut",
|
||
payload: logJson,
|
||
});
|
||
localStorage.removeItem("accessToken");
|
||
this.props.history.push({ pathname: "/login" });
|
||
};
|
||
|
||
handleUserMenuClick = (evt) => {
|
||
switch (evt.key) {
|
||
case "user-menu-logout":
|
||
this.handleLogout();
|
||
break;
|
||
case "user-menu-cacheclean":
|
||
window.localStorage.clear();
|
||
message.success("清除成功，即将重新加载页面", 2, () => {
|
||
setTimeout(() => window.location.reload(true), 500);
|
||
});
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
this.setState({
|
||
visible: false,
|
||
});
|
||
};
|
||
doubleClear = () => {
|
||
if (this.state.searchVisible === true) {
|
||
this.setState({ searchVisible: false });
|
||
} else if (this.state.searchTodayVisible === true) {
|
||
this.setState({ searchTodayVisible: false });
|
||
}
|
||
|
||
this.getBaseData(1, this.state.tableKey, 5);
|
||
};
|
||
vauleChange = (e) => {
|
||
const { querySearch } = this.state;
|
||
if (e.target.value) {
|
||
switch (e.target.name) {
|
||
case "searchName":
|
||
querySearch[e.target.name] = e.target.value;
|
||
this.setState({ querySearch });
|
||
break;
|
||
case "searchCode":
|
||
querySearch[e.target.name] = e.target.value;
|
||
this.setState({ querySearch });
|
||
break;
|
||
case "searchType":
|
||
querySearch[e.target.name] = e.target.value;
|
||
this.setState({ querySearch });
|
||
break;
|
||
case "searchContent":
|
||
querySearch[e.target.name] = e.target.value;
|
||
this.setState({ querySearch });
|
||
break;
|
||
}
|
||
} else {
|
||
this.setState({ querySearch: {} });
|
||
}
|
||
};
|
||
handleSearch = (item) => {
|
||
this.getBaseData(1, item, null);
|
||
};
|
||
selectChange = (value) => {
|
||
const { querySearch } = this.state;
|
||
querySearch.searchStatus = value;
|
||
this.setState(
|
||
{
|
||
querySearch,
|
||
},
|
||
() => {}
|
||
);
|
||
};
|
||
// 开始时间
|
||
startChange = (dates, dateStr) => {
|
||
const { querySearch } = this.state;
|
||
if (dates.length != 2) {
|
||
this.setState({
|
||
visibleStartTime: [],
|
||
querySearch: {},
|
||
});
|
||
return;
|
||
}
|
||
this.state.visibleStartTime = dates;
|
||
querySearch.startTime1 = this.state.visibleStartTime[0].format(
|
||
"YYYY-MM-DD HH:mm:ss"
|
||
);
|
||
querySearch.startTime2 = this.state.visibleStartTime[1].format(
|
||
"YYYY-MM-DD HH:mm:ss"
|
||
);
|
||
this.setState(
|
||
{
|
||
querySearch,
|
||
},
|
||
() => {}
|
||
);
|
||
};
|
||
// 结束时间
|
||
endChange = (dates, dateStr) => {
|
||
const { querySearch } = this.state;
|
||
if (dates.length != 2) {
|
||
this.setState({
|
||
visibleEndTime: [],
|
||
querySearch: {},
|
||
});
|
||
return;
|
||
}
|
||
this.state.visibleEndTime = dates;
|
||
querySearch.endTime1 = this.state.visibleEndTime[0].format(
|
||
"YYYY-MM-DD HH:mm:ss"
|
||
);
|
||
querySearch.endTime2 = this.state.visibleEndTime[1].format(
|
||
"YYYY-MM-DD HH:mm:ss"
|
||
);
|
||
this.setState({ querySearch });
|
||
};
|
||
|
||
render() {
|
||
const rowSelection = {
|
||
onChange: (selectedRowKeys, selectedRows) => {
|
||
this.state.taskSelects = selectedRows;
|
||
},
|
||
};
|
||
return (
|
||
<div
|
||
className="route-home"
|
||
style={{
|
||
padding: "0 10px",
|
||
minHeight: "735px",
|
||
height: "100%",
|
||
width: "100%",
|
||
}}
|
||
ref={this.resizeRef}
|
||
>
|
||
<Modal
|
||
visible={this.state.formVisible}
|
||
title={this.state.noticeTitle}
|
||
maskClosable={false}
|
||
onCancel={this.handleCancel}
|
||
footer={null}
|
||
className="antd-modal-fullscreen"
|
||
closeModal={this.closeModal}
|
||
// forceRender={true}
|
||
>
|
||
<FormPage {...this.state.tmpData} />
|
||
</Modal>
|
||
<Modal
|
||
visible={this.state.searchVisible}
|
||
zIndex={999}
|
||
title={this.state.visibleTitle}
|
||
maskClosable={false}
|
||
onCancel={this.doubleClear}
|
||
footer={false}
|
||
className="antd-modal-homescreen"
|
||
>
|
||
<div>
|
||
<Form>
|
||
<Row style={{ marginTop: "50px" }}>
|
||
<Col span={5}>
|
||
<Form.Item label={"名称"} {...formItemLayout}>
|
||
<Input
|
||
value={this.state.querySearch.searchName}
|
||
placeholder={"请输入任务名称"}
|
||
name="searchName"
|
||
onChange={this.vauleChange}
|
||
/>
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={6}>
|
||
<Form.Item label={"开始时间"} {...formItemLayout}>
|
||
<RangePicker
|
||
value={this.state.visibleStartTime}
|
||
onChange={this.startChange}
|
||
/>
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={6}>
|
||
<Form.Item label={"结束时间"} {...formItemLayout}>
|
||
<RangePicker
|
||
value={this.state.visibleEndTime}
|
||
onChange={this.endChange}
|
||
/>
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={2}>
|
||
<Button
|
||
type={"primary"}
|
||
icon={"search"}
|
||
onClick={() =>
|
||
this.handleSearch(this.state.currentpageIndex)
|
||
}
|
||
>
|
||
搜索
|
||
</Button>
|
||
</Col>
|
||
</Row>
|
||
</Form>
|
||
<Table
|
||
// rowSelection={rowSelection}
|
||
dataSource={this.state.workData}
|
||
columns={this.state.searchColumns}
|
||
onChange={(num) =>
|
||
this.getBaseInfoData(num, this.state.currentpageIndex, null)
|
||
}
|
||
loading={this.state.showLoading}
|
||
size="small"
|
||
style={{ padding: "0px 20px" }}
|
||
/>
|
||
</div>
|
||
</Modal>
|
||
<Modal
|
||
visible={this.state.searchTodayVisible}
|
||
title={this.state.visibleTitle}
|
||
maskClosable={false}
|
||
zIndex={999}
|
||
onCancel={this.doubleClear}
|
||
footer={false}
|
||
className="antd-modal-homescreen"
|
||
>
|
||
<div>
|
||
<Form>
|
||
<Row style={{ marginTop: "50px" }}>
|
||
<Col span={5}>
|
||
<Form.Item label={"提醒内容"} {...formItemLayout}>
|
||
<Input
|
||
value={this.state.querySearch.searchName}
|
||
placeholder={"请输入提醒内容"}
|
||
name="searchName"
|
||
onChange={this.vauleChange}
|
||
/>
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={6}>
|
||
<Form.Item label={"开始时间"} {...formItemLayout}>
|
||
<RangePicker
|
||
value={this.state.visibleStartTime}
|
||
// defaultValue={[moment(moment(this.state.querySearch.startTime1), "YYYY-MM-DD"), moment(moment(this.state.querySearch.startTime2), "YYYY-MM-DD")]}
|
||
onChange={this.startChange}
|
||
/>
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={6}>
|
||
<Form.Item label={"结束时间"} {...formItemLayout}>
|
||
<RangePicker
|
||
value={this.state.visibleEndTime}
|
||
// defaultValue={[moment(moment(this.state.querySearch.startTime1), "YYYY-MM-DD"), moment(moment(this.state.querySearch.startTime2), "YYYY-MM-DD")]}
|
||
onChange={this.endChange}
|
||
/>
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={3}>
|
||
<Form.Item label={"状态"} {...formItemLayout}>
|
||
<Select
|
||
value={this.state.querySearch.searchStatus}
|
||
// defaultValue={[moment(moment(this.state.querySearch.startTime1), "YYYY-MM-DD"), moment(moment(this.state.querySearch.startTime2), "YYYY-MM-DD")]}
|
||
onChange={this.selectChange}
|
||
>
|
||
<Option value="0">未读</Option>
|
||
<Option value="3">已读</Option>
|
||
<Option value="1">已办</Option>
|
||
</Select>
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={2}>
|
||
<Button
|
||
type={"primary"}
|
||
icon={"search"}
|
||
onClick={() =>
|
||
this.handleSearch(this.state.currentpageIndex)
|
||
}
|
||
>
|
||
搜索
|
||
</Button>
|
||
</Col>
|
||
</Row>
|
||
</Form>
|
||
<Table
|
||
dataSource={this.state.workData}
|
||
columns={this.state.searchColumns}
|
||
onChange={(num) =>
|
||
this.getBaseInfoData(num, this.state.currentpageIndex, null)
|
||
}
|
||
loading={this.state.showLoading}
|
||
size="small"
|
||
style={{ padding: "0px 20px" }}
|
||
/>
|
||
</div>
|
||
</Modal>
|
||
|
||
<Col span={24} style={{ width: "100%", height: "100%" }}>
|
||
<Row
|
||
gutter={12}
|
||
style={{
|
||
width: "100%",
|
||
height: "25%",
|
||
display: "flex",
|
||
padding: "0px 20px",
|
||
margin: "0px",
|
||
minHeight: "242px",
|
||
minWidth: "1704px",
|
||
// justifyContent: "space-between",
|
||
// backgroundColor: "#fff",
|
||
}}
|
||
>
|
||
<Col
|
||
span={10}
|
||
style={{
|
||
backgroundColor: "#fff",
|
||
height: "100%",
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
padding: "0px 20px",
|
||
borderRadius: "5px 0px 0px 5px",
|
||
minWidth: "578px",
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
height: "50%",
|
||
width: "100%",
|
||
display: "flex",
|
||
flexDirection: "row",
|
||
alignItems: "center",
|
||
borderBottom: "2px solid #f6f6f6",
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
width: "80px",
|
||
height: "80px",
|
||
borderRadius: "40px",
|
||
backgroundColor: "#fafafa",
|
||
fontSize: "18px",
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
marginRight: "10px",
|
||
}}
|
||
>
|
||
{this.state.userInfo.SEX == 1 ? (
|
||
<img
|
||
src={require("../assets/home/avaB.png")}
|
||
style={{
|
||
height: "60px",
|
||
width: "60px",
|
||
alignItems: "center",
|
||
objectFit: "contain",
|
||
}}
|
||
alt="homeuser"
|
||
/>
|
||
) : (
|
||
<img
|
||
src={require("../assets/home/avaG.png")}
|
||
style={{
|
||
height: "60px",
|
||
width: "auto",
|
||
alignItems: "center",
|
||
objectFit: "contain",
|
||
}}
|
||
alt="homeuser"
|
||
/>
|
||
)}
|
||
</div>
|
||
<div
|
||
style={{
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
height: "60px",
|
||
justifyContent: "space-between",
|
||
flex: 1,
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
display: "flex",
|
||
flexDirection: "row",
|
||
justifyContent: "space-between",
|
||
alignItems: "center",
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
color: "#303133",
|
||
fontSize: "16px",
|
||
marginLeft: "5px",
|
||
fontWeight: "bold",
|
||
}}
|
||
>
|
||
{this.state.userInfo.NAME}，{this.state.timeNow}
|
||
</div>
|
||
<div>
|
||
<Dropdown
|
||
visible={this.state.visible}
|
||
onVisibleChange={() => {
|
||
this.setState({ visible: !this.state.visible });
|
||
}}
|
||
overlay={
|
||
<Menu onClick={this.handleUserMenuClick}>
|
||
<Menu.Item
|
||
key="user-menu-UserInfoShow"
|
||
className="home-setting"
|
||
>
|
||
<Icon
|
||
type="pushpin"
|
||
style={{ fontSize: "14px", color: "" }}
|
||
></Icon>
|
||
<FoUserInfoShow>我的资料</FoUserInfoShow>
|
||
</Menu.Item>
|
||
<Menu.Item
|
||
key="user-menu-updatepwd"
|
||
className="home-setting"
|
||
>
|
||
<Icon
|
||
type="edit"
|
||
style={{ fontSize: "14px" }}
|
||
></Icon>
|
||
<ModifyPassword>修改密码</ModifyPassword>
|
||
</Menu.Item>
|
||
<Menu.Item
|
||
key="user-menu-cacheclean"
|
||
className="home-setting"
|
||
>
|
||
<Icon
|
||
type="tool"
|
||
style={{ fontSize: "14px" }}
|
||
></Icon>
|
||
清除缓存
|
||
</Menu.Item>
|
||
{/* <Menu.Item>版本号:{config.version}</Menu.Item> */}
|
||
<Menu.Item
|
||
key="user-menu-logout"
|
||
className="home-setting"
|
||
>
|
||
<Icon
|
||
type="poweroff"
|
||
style={{ fontSize: "14px" }}
|
||
></Icon>
|
||
退出登录
|
||
</Menu.Item>
|
||
</Menu>
|
||
}
|
||
placement="topLeft"
|
||
trigger={["click"]}
|
||
>
|
||
<Icon
|
||
type="setting"
|
||
className="home-setting-icon"
|
||
></Icon>
|
||
</Dropdown>
|
||
</div>
|
||
</div>
|
||
|
||
<div style={{ display: "flex", flexDirection: "row" }}>
|
||
<div
|
||
className="home-userInfo-tabs"
|
||
style={{
|
||
marginRight: "10px",
|
||
}}
|
||
>
|
||
工号：{this.state.userInfo.CODE}
|
||
</div>
|
||
<div
|
||
className="home-userInfo-tabs"
|
||
style={{
|
||
marginRight: "10px",
|
||
}}
|
||
>
|
||
手机号：{this.state.userInfo.PHONE}
|
||
</div>
|
||
{this.state.userInfo.Nav_Department ? (
|
||
<div className="home-userInfo-tabs">
|
||
部门：{this.state.userInfo.Nav_Department.NAME}
|
||
</div>
|
||
) : (
|
||
""
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="home-userInfo-card">
|
||
<UserInfo
|
||
data={this.state.workTotal.todoCount}
|
||
title="待办事项"
|
||
color="#2177d5"
|
||
showAll={() => {
|
||
this.showAll("1");
|
||
}}
|
||
/>
|
||
<UserInfo
|
||
data={this.state.workTotal.timeOverCount}
|
||
title="待办超时"
|
||
color="#f76707"
|
||
showAll={() => {
|
||
this.showAll("4");
|
||
}}
|
||
/>
|
||
<UserInfo
|
||
data={this.state.workTotal.doneCount}
|
||
title="已办事项"
|
||
color="#48a447"
|
||
showAll={() => {
|
||
this.showAll("2");
|
||
}}
|
||
/>
|
||
<UserInfo
|
||
data={this.state.workTotal.todayNewCount}
|
||
title="今日提醒"
|
||
color="#fcc419"
|
||
showAll={() => {
|
||
this.showAll("3");
|
||
}}
|
||
/>
|
||
</div>
|
||
</Col>
|
||
{/* <div style={{ width: "30px" }}></div> */}
|
||
|
||
<Col
|
||
span={7}
|
||
style={{
|
||
backgroundColor: "#fff",
|
||
height: "100%",
|
||
borderRadius: "0px 5px 5px 0px",
|
||
padding: "0px",
|
||
display: "flex",
|
||
flexDirection: "row",
|
||
flex: 1,
|
||
alignItems: " center",
|
||
justifyContent: "center",
|
||
}}
|
||
>
|
||
<Divider
|
||
type="vertical"
|
||
dashed={true}
|
||
style={{ height: "80%", backgroundColor: "#fff" }}
|
||
/>
|
||
<div className="home-rate">
|
||
{/* <div className="home-always-title">
|
||
<div className="home-always-left">
|
||
<div className="home-always-badge"></div>
|
||
<div className="home-always-name">完成率</div>
|
||
</div>
|
||
</div> */}
|
||
<div style={{ flex: 1, height: "100%", padding: "0px" }}>
|
||
<div
|
||
id="completeRate"
|
||
style={{
|
||
width: "100%",
|
||
height: "100%",
|
||
// minHeight: "180px",
|
||
}}
|
||
></div>
|
||
</div>
|
||
</div>
|
||
<Divider
|
||
type="vertical"
|
||
dashed={true}
|
||
className="home-rate-divider"
|
||
/>
|
||
{/* <div
|
||
style={{
|
||
width: "20px",
|
||
height: "100%",
|
||
backgroundColor: "#f4f7ff",
|
||
minWidth: "20px",
|
||
}}
|
||
></div> */}
|
||
<div className="home-rate">
|
||
{/* <div className="home-always-title">
|
||
<div className="home-always-left">
|
||
<div className="home-always-badge"></div>
|
||
<div className="home-always-name">及时完成率</div>
|
||
</div>
|
||
</div> */}
|
||
<div style={{ flex: 1, height: "100%", padding: "0px" }}>
|
||
<div
|
||
id="timelyRate"
|
||
style={{
|
||
width: "100%",
|
||
height: "100%",
|
||
// minHeight: "180px",
|
||
}}
|
||
></div>
|
||
</div>
|
||
</div>
|
||
</Col>
|
||
<div style={{ width: "30px", minWidth: "30px" }}></div>
|
||
<Col
|
||
span={6}
|
||
style={{
|
||
backgroundColor: "#fff",
|
||
height: "100%",
|
||
padding: "0px",
|
||
borderRadius: "5px",
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
minWidth: "466px",
|
||
}}
|
||
>
|
||
<div className="home-always-title">
|
||
<div className="home-always-left">
|
||
<div className="home-always-badge"></div>
|
||
<div className="home-always-name">我的常用功能</div>
|
||
</div>
|
||
|
||
{/* <Icon type="edit" className="home-always-icon"></Icon> */}
|
||
</div>
|
||
<div style={{ flex: 1, height: "100%", padding: "10px 20px" }}>
|
||
<Row style={{ height: "50%" }}>
|
||
<AllTech
|
||
icon={"icon-a-zu291"}
|
||
title={"排班明细"}
|
||
techClick={()=>{this.navToMenu("6dc35aee-dd5e-4b31-b7ca-5f62d337d0c1")}}
|
||
/>
|
||
<AllTech
|
||
icon={"icon-a-zu196"}
|
||
title={"作业票"}
|
||
techClick={()=>{this.navToMenu("b3767117-f0aa-4122-97c1-2fc58fbaf934")}}
|
||
/>
|
||
<AllTech
|
||
icon={"icon-a-zu185"}
|
||
title={"外包作业票"}
|
||
techClick={()=>{this.navToMenu("7a9b51b1-3d56-4199-b450-f9f5f9cc3235")}}
|
||
/>
|
||
<AllTech
|
||
icon={"icon-a-zu65"}
|
||
title={"作业任务识别"}
|
||
techClick={()=>{this.navToMenu("2beef9b3-e4b9-4b0b-9e82-238c4bf3be5d")}}
|
||
/>
|
||
</Row>
|
||
<Row style={{ height: "50%" }}>
|
||
<AllTech
|
||
icon={"icon-a-zu203"}
|
||
title={"检查任务制定"}
|
||
techClick={()=>{this.navToMenu("21b685c9-d298-4a14-9700-c9ab1bb8a918")}}
|
||
/>
|
||
<AllTech
|
||
icon={"icon-a-zu181"}
|
||
title={"手动隐患上报"}
|
||
techClick={()=>{this.navToMenu("2e7835ef-0e5a-41b5-8bb7-ad9c64a6b2f4")}}
|
||
/>
|
||
<AllTech
|
||
icon={"icon-a-zu198"}
|
||
title={"培训通知发起"}
|
||
techClick={()=>{this.navToMenu("818ab476-b29f-4db5-9393-fd13e1d2a565")}}
|
||
/>
|
||
<AllTech
|
||
icon={"icon-a-zu196"}
|
||
title={"普通会议通知"}
|
||
techClick={()=>{this.navToMenu("800abe55-a2cf-4e23-a2b6-1caf2dca816c")}}
|
||
/>
|
||
</Row>
|
||
</div>
|
||
</Col>
|
||
</Row>
|
||
<Row
|
||
gutter={12}
|
||
style={{
|
||
width: "100%",
|
||
height: "40%",
|
||
display: "flex",
|
||
padding: "0px 20px",
|
||
margin: "30px 0px",
|
||
justifyContent: "space-between",
|
||
alignItems: "center",
|
||
minHeight: "388px",
|
||
minWidth: "1704px",
|
||
// backgroundColor: "#fff",
|
||
}}
|
||
>
|
||
<Col
|
||
span={17}
|
||
style={{
|
||
backgroundColor: "#fff",
|
||
height: "100%",
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
padding: "0px",
|
||
borderRadius: "5px",
|
||
flex: 1,
|
||
minWidth: "1168px",
|
||
}}
|
||
>
|
||
<div className="home-always-title">
|
||
<div className="home-always-left">
|
||
<div className="home-always-badge"></div>
|
||
<div className="home-always-name">我的工作</div>
|
||
</div>
|
||
|
||
{/* <Icon type="edit" className="home-always-icon"></Icon> */}
|
||
</div>
|
||
<div style={{ flex: 1, height: "100%", padding: "5px 0px" }}>
|
||
<Tabs defaultActiveKey="1" onChange={this.tabsCallback}>
|
||
<TabPane
|
||
tab={
|
||
<span className="home-job-title">
|
||
<Icon
|
||
type="schedule"
|
||
className="home-userInfo-Icon"
|
||
style={{ color: "#2177d5" }}
|
||
></Icon>
|
||
待办事项{" "}
|
||
</span>
|
||
}
|
||
key="1"
|
||
>
|
||
<div
|
||
style={{
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
justifyContent: "space-between",
|
||
}}
|
||
>
|
||
{this.state.workData.length > 0 ? (
|
||
<WorkBench
|
||
data={this.state.workData}
|
||
index={1}
|
||
benchCLick={this.workClick}
|
||
/>
|
||
) : (
|
||
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
|
||
)}
|
||
</div>
|
||
</TabPane>
|
||
<TabPane
|
||
tab={
|
||
<span className="home-job-title">
|
||
<Icon
|
||
type="hourglass"
|
||
className="home-userInfo-Icon"
|
||
style={{ color: "#f76707" }}
|
||
></Icon>
|
||
待办超时
|
||
</span>
|
||
}
|
||
key="2"
|
||
>
|
||
<div
|
||
style={{
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
justifyContent: "space-between",
|
||
}}
|
||
>
|
||
{this.state.workData.length > 0 ? (
|
||
<WorkBench
|
||
data={this.state.workData}
|
||
index={2}
|
||
benchCLick={this.workClick}
|
||
/>
|
||
) : (
|
||
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
|
||
)}
|
||
</div>
|
||
</TabPane>
|
||
<TabPane
|
||
tab={
|
||
<span className="home-job-title">
|
||
<Icon
|
||
type="check-circle"
|
||
className="home-userInfo-Icon"
|
||
style={{ color: "#48a447" }}
|
||
></Icon>
|
||
已办事项
|
||
</span>
|
||
}
|
||
key="3"
|
||
>
|
||
<div
|
||
style={{
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
justifyContent: "space-between",
|
||
}}
|
||
>
|
||
{this.state.workData.length > 0 ? (
|
||
<WorkBench
|
||
data={this.state.workData}
|
||
index={3}
|
||
benchCLick={this.workClick}
|
||
/>
|
||
) : (
|
||
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
|
||
)}
|
||
</div>
|
||
</TabPane>
|
||
<TabPane
|
||
tab={
|
||
<span className="home-job-title">
|
||
<Icon
|
||
type="bulb"
|
||
className="home-userInfo-Icon"
|
||
style={{ color: "#fcc419" }}
|
||
></Icon>
|
||
今日提醒
|
||
</span>
|
||
}
|
||
key="4"
|
||
>
|
||
<div
|
||
style={{
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
justifyContent: "space-between",
|
||
}}
|
||
>
|
||
{this.state.workData.length > 0 ? (
|
||
<WorkBench
|
||
data={this.state.workData}
|
||
index={4}
|
||
benchCLick={this.workClick}
|
||
/>
|
||
) : (
|
||
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
|
||
)}
|
||
</div>
|
||
</TabPane>
|
||
</Tabs>
|
||
</div>
|
||
</Col>
|
||
<div style={{ width: "30px", minWidth: "30px" }}></div>
|
||
|
||
<Col
|
||
span={6}
|
||
style={{
|
||
backgroundColor: "#fff",
|
||
height: "100%",
|
||
padding: "0px",
|
||
borderRadius: "5px",
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
minWidth: "466px",
|
||
}}
|
||
>
|
||
<div className="home-always-title">
|
||
<div className="home-always-left">
|
||
<div className="home-always-badge"></div>
|
||
<div className="home-always-name">完成率排名</div>
|
||
</div>
|
||
|
||
{/* <Icon type="edit" className="home-always-icon"></Icon> */}
|
||
</div>
|
||
<div
|
||
style={{
|
||
flex: 1,
|
||
height: "100%",
|
||
padding: "15px 20px 15px 50px",
|
||
}}
|
||
>
|
||
{this.state.completeName.map((item, index) => {
|
||
return (
|
||
<div className="home-rank">
|
||
{index == 0 ? (
|
||
<img
|
||
src={require("./../assets/home/4-1.png")}
|
||
className="home-img"
|
||
alt="4-1"
|
||
/>
|
||
) : index == 1 ? (
|
||
<img
|
||
src={require("./../assets/home/4-2.png")}
|
||
className="home-img"
|
||
alt="4-2"
|
||
/>
|
||
) : index == 2 ? (
|
||
<img
|
||
src={require("./../assets/home/4-3.png")}
|
||
className="home-img"
|
||
alt="4-3"
|
||
/>
|
||
) : (
|
||
<div className="home-rank-index">{index + 1}</div>
|
||
)}
|
||
|
||
<div className="home-rank-name">{item.name}</div>
|
||
<Progress
|
||
percent={item.value}
|
||
status="active"
|
||
style={{ width: "50%" }}
|
||
></Progress>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</Col>
|
||
</Row>
|
||
<Row
|
||
gutter={12}
|
||
className="home-row"
|
||
style={{
|
||
margin: "0px 0px 10px 0px",
|
||
minHeight: "275px",
|
||
minWidth: "1704px",
|
||
}}
|
||
>
|
||
<Col
|
||
span={17}
|
||
style={{
|
||
height: "100%",
|
||
display: "flex",
|
||
flexDirection: "row",
|
||
padding: "0px",
|
||
borderRadius: "5px",
|
||
flex: 1,
|
||
}}
|
||
>
|
||
<div className="home-chart">
|
||
<div className="home-always-title">
|
||
<div className="home-always-left">
|
||
<div className="home-always-badge"></div>
|
||
<div className="home-always-name">安全检查次数统计</div>
|
||
</div>
|
||
</div>
|
||
<div style={{ flex: 1, height: "100%", padding: "0px" }}>
|
||
<div
|
||
id="safeCheck"
|
||
style={{
|
||
width: "100%",
|
||
height: "100%",
|
||
// minHeight: "180px",
|
||
}}
|
||
></div>
|
||
</div>
|
||
</div>
|
||
<div style={{ width: "20px", minWidth: "20px" }}></div>
|
||
<div className="home-chart">
|
||
<div className="home-always-title">
|
||
<div className="home-always-left">
|
||
<div className="home-always-badge"></div>
|
||
<div className="home-always-name">月度隐患整改情况</div>
|
||
</div>
|
||
</div>
|
||
<div style={{ flex: 1, height: "100%", padding: "0px" }}>
|
||
<div
|
||
id="dangerChange"
|
||
style={{
|
||
width: "100%",
|
||
height: "100%",
|
||
// minHeight: "180px",
|
||
}}
|
||
></div>
|
||
</div>
|
||
</div>
|
||
</Col>
|
||
<div style={{ width: "30px", minWidth: "30px" }}></div>
|
||
|
||
<Col
|
||
span={6}
|
||
style={{
|
||
backgroundColor: "#fff",
|
||
height: "100%",
|
||
padding: "0px",
|
||
borderRadius: "5px",
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
minWidth: "466px",
|
||
}}
|
||
>
|
||
<div className="home-always-title">
|
||
<div className="home-always-left">
|
||
<div className="home-always-badge"></div>
|
||
<div className="home-always-name">风险等级占比</div>
|
||
</div>
|
||
</div>
|
||
<div style={{ flex: 1, height: "100%", padding: "0px" }}>
|
||
<div
|
||
id="riskLevel"
|
||
style={{
|
||
width: "100%",
|
||
height: "100%",
|
||
// minHeight: "180px",
|
||
}}
|
||
></div>
|
||
</div>
|
||
</Col>
|
||
</Row>
|
||
</Col>
|
||
</div>
|
||
);
|
||
}
|
||
}
|
||
export default connect(({ login, app }) => ({ login, app }))(Home);
|