2024-01-22 09:18:38 +08:00
|
|
|
|
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 {
|
|
|
|
|
|
Table,
|
|
|
|
|
|
Modal,
|
|
|
|
|
|
Row,
|
|
|
|
|
|
Col,
|
|
|
|
|
|
Icon,
|
2024-03-13 11:19:42 +08:00
|
|
|
|
Progress,
|
|
|
|
|
|
Tabs,
|
2024-01-22 09:18:38 +08:00
|
|
|
|
Button,
|
|
|
|
|
|
Input,
|
|
|
|
|
|
DatePicker,
|
|
|
|
|
|
Form,
|
|
|
|
|
|
Select,
|
|
|
|
|
|
notification,
|
|
|
|
|
|
Popconfirm,
|
|
|
|
|
|
Divider,
|
|
|
|
|
|
Space,
|
|
|
|
|
|
Descriptions,
|
|
|
|
|
|
message,
|
|
|
|
|
|
Carousel,
|
|
|
|
|
|
} from "antd";
|
|
|
|
|
|
import FormPage from "../components/FormPage";
|
|
|
|
|
|
import backlog from "../assets/home/backlog.png";
|
|
|
|
|
|
import backlog_i from "../assets/home/backlog_icon.png";
|
|
|
|
|
|
import styles from "./dashboard.css";
|
|
|
|
|
|
import "slick-carousel/slick/slick.css";
|
|
|
|
|
|
import "slick-carousel/slick/slick-theme.css";
|
|
|
|
|
|
import moment from "moment";
|
|
|
|
|
|
import flow from "../assets/home/flow.png";
|
|
|
|
|
|
import flow_i from "../assets/home/remind_icon.png";
|
|
|
|
|
|
import finished from "../assets/home/finished.png";
|
|
|
|
|
|
import finished_i from "../assets/home/finished_icon.png";
|
|
|
|
|
|
import remind from "../assets/home/remind.png";
|
|
|
|
|
|
import remind_i from "../assets/home/red-err.png";
|
|
|
|
|
|
import echarts from "echarts";
|
|
|
|
|
|
import config from "../config";
|
|
|
|
|
|
import Toggle from "./toggle";
|
|
|
|
|
|
import RisiLevel from "../components/MainPage/RiskLevel";
|
|
|
|
|
|
import ClassCompletion from "../components/MainPage/ClassCompletion";
|
|
|
|
|
|
import WorkTicket from "../components/MainPage/WorkTicket";
|
|
|
|
|
|
import MonthDanger from "../components/MainPage/MonthDanger";
|
|
|
|
|
|
import SafeCheck from "../components/MainPage/SafeCheck";
|
2024-03-13 11:19:42 +08:00
|
|
|
|
const { TabPane } = Tabs;
|
2024-01-22 09:18:38 +08:00
|
|
|
|
|
|
|
|
|
|
class Home extends React.Component {
|
|
|
|
|
|
constructor(props) {
|
|
|
|
|
|
super(props);
|
|
|
|
|
|
this.state = {
|
2024-03-13 11:19:42 +08:00
|
|
|
|
roleType: 0,
|
|
|
|
|
|
completeName: [
|
|
|
|
|
|
{
|
|
|
|
|
|
name: "张森友",
|
|
|
|
|
|
value: 100,
|
|
|
|
|
|
},
|
2024-01-22 09:18:38 +08:00
|
|
|
|
{
|
2024-03-13 11:19:42 +08:00
|
|
|
|
name: "李友军",
|
|
|
|
|
|
value: 99,
|
2024-01-22 09:18:38 +08:00
|
|
|
|
},
|
|
|
|
|
|
{
|
2024-03-13 11:19:42 +08:00
|
|
|
|
name: "洪虎林",
|
|
|
|
|
|
value: 97,
|
2024-01-22 09:18:38 +08:00
|
|
|
|
},
|
|
|
|
|
|
{
|
2024-03-13 11:19:42 +08:00
|
|
|
|
name: "李彦斌",
|
|
|
|
|
|
value: 95,
|
2024-01-22 09:18:38 +08:00
|
|
|
|
},
|
|
|
|
|
|
{
|
2024-03-13 11:19:42 +08:00
|
|
|
|
name: "王志文",
|
|
|
|
|
|
value: 93,
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: "黄海林",
|
|
|
|
|
|
value: 90,
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: "赵无极",
|
|
|
|
|
|
value: 67,
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: "林佑君",
|
|
|
|
|
|
value: 43,
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
prepareJob: [
|
|
|
|
|
|
{
|
|
|
|
|
|
person: "阮保级",
|
|
|
|
|
|
content: "手动隐患上报-指定责任单位",
|
|
|
|
|
|
data: "2023-06-08 03:38",
|
|
|
|
|
|
type: "超期", //0超期 1正常 2已办 3未读 4已读
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
person: "张建华",
|
|
|
|
|
|
content: "A类隐患上报-待审批A类隐患上报-待审批A类隐患上报-待审批",
|
|
|
|
|
|
data: "2023-03-08 04:38",
|
|
|
|
|
|
type: "正常",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
person: "李国富",
|
|
|
|
|
|
content: "纠正与预防措施通知单",
|
|
|
|
|
|
data: "2023-05-08 03:28",
|
|
|
|
|
|
type: "超期",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
person: "王思涵",
|
|
|
|
|
|
content: "公司级例行检查任务表",
|
|
|
|
|
|
data: "2023-06-28 14:38",
|
|
|
|
|
|
type: "正常",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
person: "赵武娣",
|
|
|
|
|
|
content: "公司级库区检查指定表",
|
|
|
|
|
|
data: "2023-10-08 23:38",
|
|
|
|
|
|
type: "超期",
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
overtimeJob: [
|
|
|
|
|
|
{
|
|
|
|
|
|
person: "阮保级",
|
|
|
|
|
|
content: "手动隐患上报-指定责任单位",
|
|
|
|
|
|
data: "2023-06-08 03:38",
|
|
|
|
|
|
type: "超期", //0超期 1正常 2已办 3未读 4已读
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
person: "张建华",
|
|
|
|
|
|
content: "A类隐患上报-待审批A类隐患上报-待审批A类隐患上报-待审批",
|
|
|
|
|
|
data: "2023-03-08 04:38",
|
|
|
|
|
|
type: "超期",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
person: "李国富",
|
|
|
|
|
|
content: "纠正与预防措施通知单",
|
|
|
|
|
|
data: "2023-05-08 03:28",
|
|
|
|
|
|
type: "超期",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
person: "王思涵",
|
|
|
|
|
|
content: "公司级例行检查任务表",
|
|
|
|
|
|
data: "2023-06-28 14:38",
|
|
|
|
|
|
type: "超期",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
person: "赵武娣",
|
|
|
|
|
|
content: "公司级库区检查指定表",
|
|
|
|
|
|
data: "2023-10-08 23:38",
|
|
|
|
|
|
type: "超期",
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
overJob: [
|
|
|
|
|
|
{
|
|
|
|
|
|
person: "阮保级",
|
|
|
|
|
|
content: "手动隐患上报-指定责任单位",
|
|
|
|
|
|
data: "2023-06-08 03:38",
|
|
|
|
|
|
type: "已办", //0超期 1正常 2已办 3未读 4已读
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
person: "张建华",
|
|
|
|
|
|
content: "A类隐患上报-待审批A类隐患上报-待审批A类隐患上报-待审批",
|
|
|
|
|
|
data: "2023-03-08 04:38",
|
|
|
|
|
|
type: "正常",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
person: "李国富",
|
|
|
|
|
|
content: "纠正与预防措施通知单",
|
|
|
|
|
|
data: "2023-05-08 03:28",
|
|
|
|
|
|
type: "已办",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
person: "王思涵",
|
|
|
|
|
|
content: "公司级例行检查任务表",
|
|
|
|
|
|
data: "2023-06-28 14:38",
|
|
|
|
|
|
type: "已办",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
person: "赵武娣",
|
|
|
|
|
|
content: "公司级库区检查指定表",
|
|
|
|
|
|
data: "2023-10-08 23:38",
|
|
|
|
|
|
type: "正常",
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
noticeJob: [
|
|
|
|
|
|
{
|
|
|
|
|
|
person: "阮保级",
|
|
|
|
|
|
content: "手动隐患上报-指定责任单位",
|
|
|
|
|
|
data: "2023-06-08 03:38",
|
|
|
|
|
|
type: "未读", //0超期 1正常 2已办 3未读 4已读
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
person: "张建华",
|
|
|
|
|
|
content: "A类隐患上报-待审批A类隐患上报-待审批A类隐患上报-待审批",
|
|
|
|
|
|
data: "2023-03-08 04:38",
|
|
|
|
|
|
type: "已读",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
person: "李国富",
|
|
|
|
|
|
content: "纠正与预防措施通知单",
|
|
|
|
|
|
data: "2023-05-08 03:28",
|
|
|
|
|
|
type: "未读",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
person: "王思涵",
|
|
|
|
|
|
content: "公司级例行检查任务表",
|
|
|
|
|
|
data: "2023-06-28 14:38",
|
|
|
|
|
|
type: "已办",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
person: "赵武娣",
|
|
|
|
|
|
content: "公司级库区检查指定表",
|
|
|
|
|
|
data: "2023-10-08 23:38",
|
|
|
|
|
|
type: "已读",
|
2024-01-22 09:18:38 +08:00
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
};
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
componentDidMount() {
|
|
|
|
|
|
if (window.navigator.userAgent.indexOf("Windows") < 1) {
|
|
|
|
|
|
window.location.replace(config.guideH5Host);
|
|
|
|
|
|
//alert('手机');
|
|
|
|
|
|
}
|
2024-03-13 11:19:42 +08:00
|
|
|
|
this.riskLevel();
|
|
|
|
|
|
// this.homeRound();
|
|
|
|
|
|
this.completeRate();
|
|
|
|
|
|
this.timelyRate();
|
|
|
|
|
|
this.safeCheck();
|
|
|
|
|
|
this.dangerChange();
|
|
|
|
|
|
this.getUser();
|
2024-01-22 09:18:38 +08:00
|
|
|
|
}
|
2024-03-13 11:19:42 +08:00
|
|
|
|
getUser = () => {
|
2024-01-22 09:18:38 +08:00
|
|
|
|
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 && ret.Nav_Department) {
|
2024-03-13 11:19:42 +08:00
|
|
|
|
console.log(ret,'08080897878')
|
2024-01-22 09:18:38 +08:00
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
});
|
2024-03-13 11:19:42 +08:00
|
|
|
|
}
|
|
|
|
|
|
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 = [
|
|
|
|
|
|
"2023年4月",
|
|
|
|
|
|
"2023年5月",
|
|
|
|
|
|
"2023年6月",
|
|
|
|
|
|
"2023年7月",
|
|
|
|
|
|
"2023年8月",
|
|
|
|
|
|
"2023年9月",
|
|
|
|
|
|
"2023年10月",
|
|
|
|
|
|
"2023年11月",
|
|
|
|
|
|
"2023年12月",
|
|
|
|
|
|
"2024年1月",
|
|
|
|
|
|
"2024年2月",
|
|
|
|
|
|
"2024年3月",
|
|
|
|
|
|
];
|
|
|
|
|
|
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,
|
|
|
|
|
|
// }
|
|
|
|
|
|
});
|
2024-01-22 09:18:38 +08:00
|
|
|
|
}
|
2024-03-13 11:19:42 +08:00
|
|
|
|
let safeChecks = document.getElementById("safeCheck");
|
|
|
|
|
|
if (safeChecks) {
|
|
|
|
|
|
let myChart = echarts.init(safeChecks);
|
|
|
|
|
|
myChart.setOption({
|
|
|
|
|
|
color: ["#4285F4", "#72b85b", "#c92a2a", "#ffa94d"],
|
2024-01-22 09:18:38 +08:00
|
|
|
|
|
2024-03-13 11:19:42 +08:00
|
|
|
|
tooltip: {
|
|
|
|
|
|
trigger: "axis",
|
|
|
|
|
|
axisPointer: {
|
|
|
|
|
|
// 坐标轴指示器，坐标轴触发有效
|
|
|
|
|
|
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
|
|
|
|
|
},
|
|
|
|
|
|
transitionDuration: 0,
|
|
|
|
|
|
},
|
|
|
|
|
|
grid: {
|
|
|
|
|
|
left: "5%",
|
|
|
|
|
|
right: "5%",
|
|
|
|
|
|
bottom: "15%",
|
|
|
|
|
|
top: "5%",
|
|
|
|
|
|
containLabel: true,
|
|
|
|
|
|
z: 22,
|
|
|
|
|
|
},
|
|
|
|
|
|
xAxis: {
|
|
|
|
|
|
type: "category",
|
|
|
|
|
|
data: xData,
|
|
|
|
|
|
axisLine: {
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: "#0c3b71",
|
2024-01-22 09:18:38 +08:00
|
|
|
|
},
|
2024-03-13 11:19:42 +08:00
|
|
|
|
},
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
color: "rgb(170,170,170)",
|
|
|
|
|
|
interval: 0,
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
lineHeight: 14,
|
2024-01-22 09:18:38 +08:00
|
|
|
|
},
|
2024-03-13 11:19:42 +08:00
|
|
|
|
formatter: function (param) {
|
|
|
|
|
|
return param.split("年")[1];
|
2024-01-22 09:18:38 +08:00
|
|
|
|
},
|
2024-03-13 11:19:42 +08:00
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
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"],
|
2024-01-22 09:18:38 +08:00
|
|
|
|
},
|
2024-03-13 11:19:42 +08:00
|
|
|
|
},
|
|
|
|
|
|
axisLine: {
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: "#0c3b71",
|
2024-01-22 09:18:38 +08:00
|
|
|
|
},
|
2024-03-13 11:19:42 +08:00
|
|
|
|
},
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
color: "rgb(170,170,170)",
|
|
|
|
|
|
formatter: "{value} ",
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
series: series,
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
2024-01-22 09:18:38 +08:00
|
|
|
|
};
|
2024-03-13 11:19:42 +08:00
|
|
|
|
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 xData = [
|
|
|
|
|
|
["2023-10", "2023-11", "2023-12", "2024-01", "2024-02", "2024-03"],
|
|
|
|
|
|
["2023-10", "2023-11", "2023-12", "2024-01", "2024-02", "2024-03"],
|
|
|
|
|
|
["2023-10", "2023-11", "2023-12", "2024-01", "2024-02", "2024-03"],
|
|
|
|
|
|
["2023-10", "2023-11", "2023-12", "2024-01", "2024-02", "2024-03"],
|
|
|
|
|
|
];
|
|
|
|
|
|
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: "10%",
|
|
|
|
|
|
// right: "10%",
|
|
|
|
|
|
bottom: "15%",
|
|
|
|
|
|
top: "5%",
|
|
|
|
|
|
containLabel: true,
|
|
|
|
|
|
z: 22,
|
|
|
|
|
|
},
|
|
|
|
|
|
xAxis: {
|
|
|
|
|
|
type: "category",
|
|
|
|
|
|
data: xData[0],
|
|
|
|
|
|
axisLine: {
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: "#0c3b71",
|
2024-01-22 09:18:38 +08:00
|
|
|
|
},
|
2024-03-13 11:19:42 +08:00
|
|
|
|
},
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
color: "rgb(170,170,170)",
|
|
|
|
|
|
interval: 0,
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
lineHeight: 14,
|
2024-01-22 09:18:38 +08:00
|
|
|
|
},
|
2024-03-13 11:19:42 +08:00
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
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,
|
|
|
|
|
|
},
|
2024-01-22 09:18:38 +08:00
|
|
|
|
},
|
2024-03-13 11:19:42 +08:00
|
|
|
|
axisLine: {
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: "#0c3b71",
|
|
|
|
|
|
},
|
2024-01-22 09:18:38 +08:00
|
|
|
|
},
|
2024-03-13 11:19:42 +08:00
|
|
|
|
axisLabel: {
|
|
|
|
|
|
color: "rgb(170,170,170)",
|
|
|
|
|
|
formatter: "{value} ",
|
2024-01-22 09:18:38 +08:00
|
|
|
|
},
|
2024-03-13 11:19:42 +08:00
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
type: "value",
|
|
|
|
|
|
position: "right",
|
|
|
|
|
|
splitLine: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: ["#f2f2f2"],
|
|
|
|
|
|
},
|
2024-01-22 09:18:38 +08:00
|
|
|
|
},
|
2024-03-13 11:19:42 +08:00
|
|
|
|
axisLine: {
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: "#f2f2f2",
|
|
|
|
|
|
},
|
2024-01-22 09:18:38 +08:00
|
|
|
|
},
|
2024-03-13 11:19:42 +08:00
|
|
|
|
axisLabel: {
|
|
|
|
|
|
color: "rgb(170,170,170)",
|
|
|
|
|
|
formatter: "{value} %",
|
2024-01-22 09:18:38 +08:00
|
|
|
|
},
|
2024-03-13 11:19:42 +08:00
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
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,
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
2024-01-22 09:18:38 +08:00
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
};
|
2024-03-13 11:19:42 +08:00
|
|
|
|
timelyRate = () => {
|
|
|
|
|
|
let timelyRates = document.getElementById("timelyRate");
|
|
|
|
|
|
if (timelyRates) {
|
|
|
|
|
|
let myChart = echarts.init(timelyRates);
|
|
|
|
|
|
myChart.setOption(
|
|
|
|
|
|
{
|
|
|
|
|
|
backgroundColor: "#fff",
|
|
|
|
|
|
title: {
|
|
|
|
|
|
text: [83] + "%",
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: "#ffa94d",
|
|
|
|
|
|
fontSize: 20,
|
|
|
|
|
|
},
|
|
|
|
|
|
left: "center",
|
|
|
|
|
|
top: "43%",
|
|
|
|
|
|
},
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
formatter: function (params) {
|
|
|
|
|
|
return (
|
|
|
|
|
|
'<span style="color: #fff;">及时完成任务数：' +
|
|
|
|
|
|
[1265] +
|
|
|
|
|
|
"</span>"
|
|
|
|
|
|
);
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
angleAxis: {
|
|
|
|
|
|
max: 100,
|
|
|
|
|
|
clockwise: true, // 逆时针
|
|
|
|
|
|
// 隐藏刻度线
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
},
|
|
|
|
|
|
radiusAxis: {
|
|
|
|
|
|
type: "category",
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
},
|
|
|
|
|
|
axisLine: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
},
|
|
|
|
|
|
axisTick: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
polar: {
|
|
|
|
|
|
center: ["50%", "50%"],
|
|
|
|
|
|
radius: "130%", //图形大小
|
|
|
|
|
|
},
|
|
|
|
|
|
series: [
|
|
|
|
|
|
{
|
|
|
|
|
|
stack: "测试",
|
|
|
|
|
|
type: "bar",
|
|
|
|
|
|
data: [83],
|
|
|
|
|
|
showBackground: true,
|
|
|
|
|
|
backgroundStyle: {
|
|
|
|
|
|
color: "#EFF2F5",
|
|
|
|
|
|
borderColor: "#EFF2F5",
|
|
|
|
|
|
borderWidth: 3,
|
|
|
|
|
|
},
|
|
|
|
|
|
coordinateSystem: "polar",
|
|
|
|
|
|
roundCap: true,
|
|
|
|
|
|
barWidth: 10,
|
|
|
|
|
|
silent: true,
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
opacity: 1,
|
|
|
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
|
|
|
{
|
|
|
|
|
|
offset: 0,
|
|
|
|
|
|
color: "#ffa94d",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
offset: 1,
|
|
|
|
|
|
color: "#f76707",
|
|
|
|
|
|
},
|
|
|
|
|
|
]),
|
|
|
|
|
|
borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
|
|
|
{
|
|
|
|
|
|
offset: 0,
|
|
|
|
|
|
color: "#ffa94d",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
offset: 1,
|
|
|
|
|
|
color: "#f76707",
|
|
|
|
|
|
},
|
|
|
|
|
|
]),
|
|
|
|
|
|
borderWidth: 1,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
stack: "测试",
|
|
|
|
|
|
type: "bar",
|
|
|
|
|
|
data: [0.01],
|
|
|
|
|
|
showBackground: true,
|
|
|
|
|
|
backgroundStyle: {
|
|
|
|
|
|
color: "#fff9f4",
|
|
|
|
|
|
shadowColor: "rgba(0, 0, 0, 0.2)",
|
|
|
|
|
|
shadowBlur: 10,
|
|
|
|
|
|
shadowOffsetY: 2,
|
|
|
|
|
|
},
|
|
|
|
|
|
coordinateSystem: "polar",
|
|
|
|
|
|
roundCap: true,
|
|
|
|
|
|
barWidth: 10,
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
color: "#ffd5b7",
|
|
|
|
|
|
borderColor: "rgba(255,132,44, 1)",
|
|
|
|
|
|
borderWidth: 3,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
},
|
|
|
|
|
|
true
|
|
|
|
|
|
);
|
|
|
|
|
|
}
|
2024-01-22 09:18:38 +08:00
|
|
|
|
};
|
|
|
|
|
|
|
2024-03-13 11:19:42 +08:00
|
|
|
|
completeRate = () => {
|
|
|
|
|
|
let completeRates = document.getElementById("completeRate");
|
|
|
|
|
|
if (completeRates) {
|
|
|
|
|
|
let myChart = echarts.init(completeRates);
|
|
|
|
|
|
myChart.setOption({
|
|
|
|
|
|
title: {
|
|
|
|
|
|
text: "93%",
|
|
|
|
|
|
x: "center",
|
|
|
|
|
|
y: "center",
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
fontWeight: "normal",
|
|
|
|
|
|
color: "#0580f2",
|
|
|
|
|
|
fontSize: "20",
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
color: ["rgba(176, 212, 251, 1)"],
|
|
|
|
|
|
legend: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
itemGap: 12,
|
|
|
|
|
|
data: ["01", "02"],
|
|
|
|
|
|
},
|
2024-01-22 09:18:38 +08:00
|
|
|
|
|
2024-03-13 11:19:42 +08:00
|
|
|
|
series: [
|
|
|
|
|
|
{
|
|
|
|
|
|
name: "Line 1",
|
|
|
|
|
|
type: "pie",
|
|
|
|
|
|
clockWise: true,
|
|
|
|
|
|
radius: ["60%", "76%"],
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
label: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
},
|
|
|
|
|
|
labelLine: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
hoverAnimation: false,
|
|
|
|
|
|
data: [
|
|
|
|
|
|
{
|
|
|
|
|
|
value: 93,
|
|
|
|
|
|
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: 7,
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
2024-01-22 09:18:38 +08:00
|
|
|
|
});
|
2024-03-13 11:19:42 +08:00
|
|
|
|
}
|
2024-01-22 09:18:38 +08:00
|
|
|
|
};
|
|
|
|
|
|
|
2024-03-13 11:19:42 +08:00
|
|
|
|
riskLevel = () => {
|
|
|
|
|
|
let riskLevel = [];
|
|
|
|
|
|
let showData = [
|
|
|
|
|
|
{ value: 20, name: "一级" },
|
|
|
|
|
|
{ value: 10, 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: "60",
|
|
|
|
|
|
x: "26%",
|
|
|
|
|
|
y: "center",
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
fontSize: 16,
|
|
|
|
|
|
fontWeight: "normal",
|
|
|
|
|
|
color: ["#333"],
|
|
|
|
|
|
},
|
|
|
|
|
|
subtextStyle: {
|
|
|
|
|
|
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,
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
2024-01-22 09:18:38 +08:00
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
render() {
|
|
|
|
|
|
return (
|
|
|
|
|
|
<div
|
|
|
|
|
|
className="route-home"
|
|
|
|
|
|
style={{
|
|
|
|
|
|
padding: "0 10px",
|
|
|
|
|
|
minHeight: "735px",
|
2024-03-13 11:19:42 +08:00
|
|
|
|
height: "100%",
|
|
|
|
|
|
width: "100%",
|
2024-01-22 09:18:38 +08:00
|
|
|
|
}}
|
|
|
|
|
|
ref={this.resizeRef}
|
|
|
|
|
|
>
|
2024-03-13 11:19:42 +08:00
|
|
|
|
<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",
|
|
|
|
|
|
// justifyContent: "space-between",
|
|
|
|
|
|
// backgroundColor: "#fff",
|
|
|
|
|
|
}}
|
2024-01-22 09:18:38 +08:00
|
|
|
|
>
|
2024-03-13 11:19:42 +08:00
|
|
|
|
<Col
|
|
|
|
|
|
span={8}
|
|
|
|
|
|
style={{
|
|
|
|
|
|
backgroundColor: "#fff",
|
|
|
|
|
|
height: "100%",
|
|
|
|
|
|
display: "flex",
|
|
|
|
|
|
flexDirection: "column",
|
|
|
|
|
|
padding: "0px 20px",
|
|
|
|
|
|
borderRadius: "5px",
|
|
|
|
|
|
minWidth: "578px",
|
|
|
|
|
|
}}
|
|
|
|
|
|
>
|
2024-01-22 09:18:38 +08:00
|
|
|
|
<div
|
|
|
|
|
|
style={{
|
2024-03-13 11:19:42 +08:00
|
|
|
|
height: "50%",
|
|
|
|
|
|
width: "100%",
|
|
|
|
|
|
display: "flex",
|
|
|
|
|
|
flexDirection: "row",
|
|
|
|
|
|
alignItems: "center",
|
|
|
|
|
|
borderBottom: "2px solid #f6f6f6",
|
2024-01-22 09:18:38 +08:00
|
|
|
|
}}
|
|
|
|
|
|
>
|
2024-03-13 11:19:42 +08:00
|
|
|
|
<div
|
2024-01-22 09:18:38 +08:00
|
|
|
|
style={{
|
2024-03-13 11:19:42 +08:00
|
|
|
|
width: "80px",
|
|
|
|
|
|
height: "80px",
|
|
|
|
|
|
borderRadius: "40px",
|
|
|
|
|
|
backgroundColor: "#fafafa",
|
|
|
|
|
|
fontSize: "18px",
|
|
|
|
|
|
display: "flex",
|
|
|
|
|
|
alignItems: "center",
|
|
|
|
|
|
justifyContent: "center",
|
|
|
|
|
|
marginRight: "10px",
|
2024-01-22 09:18:38 +08:00
|
|
|
|
}}
|
2024-03-13 11:19:42 +08:00
|
|
|
|
>
|
|
|
|
|
|
{this.state.roleType == 0 ? (
|
|
|
|
|
|
<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>
|
2024-01-22 09:18:38 +08:00
|
|
|
|
<div
|
|
|
|
|
|
style={{
|
|
|
|
|
|
display: "flex",
|
|
|
|
|
|
flexDirection: "column",
|
2024-03-13 11:19:42 +08:00
|
|
|
|
height: "60px",
|
2024-01-22 09:18:38 +08:00
|
|
|
|
justifyContent: "space-between",
|
|
|
|
|
|
}}
|
|
|
|
|
|
>
|
|
|
|
|
|
<div
|
|
|
|
|
|
style={{
|
2024-03-13 11:19:42 +08:00
|
|
|
|
color: "#303133",
|
|
|
|
|
|
fontSize: "16px",
|
|
|
|
|
|
marginLeft: "5px",
|
|
|
|
|
|
fontWeight: "bold",
|
2024-01-22 09:18:38 +08:00
|
|
|
|
}}
|
|
|
|
|
|
>
|
2024-03-13 11:19:42 +08:00
|
|
|
|
李阳，下午好
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div style={{ display: "flex", flexDirection: "row" }}>
|
|
|
|
|
|
<div
|
|
|
|
|
|
className="home-userInfo-tabs"
|
|
|
|
|
|
style={{
|
|
|
|
|
|
marginRight: "10px",
|
|
|
|
|
|
}}
|
|
|
|
|
|
>
|
|
|
|
|
|
工号：xlk001004
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div
|
|
|
|
|
|
className="home-userInfo-tabs"
|
|
|
|
|
|
style={{
|
|
|
|
|
|
marginRight: "10px",
|
|
|
|
|
|
}}
|
|
|
|
|
|
>
|
|
|
|
|
|
手机号：15398220010
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div className="home-userInfo-tabs">岗位：运输二班</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div className="home-userInfo-card">
|
|
|
|
|
|
<div className="home-userInfo">
|
|
|
|
|
|
<div className="home-userInfo-pad">
|
|
|
|
|
|
<Icon
|
|
|
|
|
|
type="schedule"
|
|
|
|
|
|
className="home-userInfo-Icon"
|
|
|
|
|
|
style={{ color: "#2177d5" }}
|
|
|
|
|
|
></Icon>
|
|
|
|
|
|
<div className="home-userInfo-title">待办事项</div>
|
2024-01-22 09:18:38 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
<div
|
2024-03-13 11:19:42 +08:00
|
|
|
|
className="home-userInfo-content"
|
|
|
|
|
|
style={{ color: "#2177d5" }}
|
2024-01-22 09:18:38 +08:00
|
|
|
|
>
|
2024-03-13 11:19:42 +08:00
|
|
|
|
300
|
2024-01-22 09:18:38 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2024-03-13 11:19:42 +08:00
|
|
|
|
<div className="home-userInfo">
|
|
|
|
|
|
<div className="home-userInfo-pad">
|
|
|
|
|
|
<Icon
|
|
|
|
|
|
type="hourglass"
|
|
|
|
|
|
className="home-userInfo-Icon"
|
|
|
|
|
|
style={{ color: "#f76707" }}
|
|
|
|
|
|
></Icon>
|
|
|
|
|
|
<div className="home-userInfo-title">待办超时</div>
|
2024-01-22 09:18:38 +08:00
|
|
|
|
</div>
|
2024-03-13 11:19:42 +08:00
|
|
|
|
<div
|
|
|
|
|
|
className="home-userInfo-content"
|
|
|
|
|
|
style={{ color: "#f76707" }}
|
|
|
|
|
|
>
|
|
|
|
|
|
951
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div className="home-userInfo">
|
|
|
|
|
|
<div className="home-userInfo-pad">
|
|
|
|
|
|
<Icon
|
|
|
|
|
|
type="check-circle"
|
|
|
|
|
|
className="home-userInfo-Icon"
|
|
|
|
|
|
style={{ color: "#48a447" }}
|
|
|
|
|
|
></Icon>
|
|
|
|
|
|
<div className="home-userInfo-title">已办事项</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div
|
|
|
|
|
|
className="home-userInfo-content"
|
|
|
|
|
|
style={{ color: "#48a447" }}
|
|
|
|
|
|
>
|
|
|
|
|
|
1328
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div className="home-userInfo">
|
|
|
|
|
|
<div className="home-userInfo-pad">
|
|
|
|
|
|
<Icon
|
|
|
|
|
|
type="bulb"
|
|
|
|
|
|
className="home-userInfo-Icon"
|
|
|
|
|
|
style={{ color: "#fcc419" }}
|
|
|
|
|
|
></Icon>
|
|
|
|
|
|
<div className="home-userInfo-title">今日提醒</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div
|
|
|
|
|
|
className="home-userInfo-content"
|
|
|
|
|
|
style={{ color: "#fcc419" }}
|
|
|
|
|
|
>
|
|
|
|
|
|
49
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2024-01-22 09:18:38 +08:00
|
|
|
|
</Col>
|
2024-03-13 11:19:42 +08:00
|
|
|
|
<div style={{ width: "30px" }}></div>
|
|
|
|
|
|
<Col
|
|
|
|
|
|
span={9}
|
2024-01-22 09:18:38 +08:00
|
|
|
|
style={{
|
2024-03-13 11:19:42 +08:00
|
|
|
|
backgroundColor: "#fff",
|
|
|
|
|
|
height: "100%",
|
|
|
|
|
|
borderRadius: "5px",
|
|
|
|
|
|
padding: "0px",
|
|
|
|
|
|
display: "flex",
|
|
|
|
|
|
flexDirection: "row",
|
|
|
|
|
|
flex: 1,
|
|
|
|
|
|
minWidth: "320px",
|
2024-01-22 09:18:38 +08:00
|
|
|
|
}}
|
|
|
|
|
|
>
|
2024-03-13 11:19:42 +08:00
|
|
|
|
<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>
|
2024-01-22 09:18:38 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2024-03-13 11:19:42 +08:00
|
|
|
|
<div style={{ flex: 1, height: "100%", padding: "0px" }}>
|
|
|
|
|
|
<div
|
|
|
|
|
|
id="completeRate"
|
|
|
|
|
|
style={{
|
|
|
|
|
|
width: "100%",
|
|
|
|
|
|
height: "100%",
|
|
|
|
|
|
// minHeight: "180px",
|
|
|
|
|
|
}}
|
|
|
|
|
|
></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div
|
|
|
|
|
|
style={{
|
|
|
|
|
|
width: "20px",
|
|
|
|
|
|
height: "100%",
|
|
|
|
|
|
backgroundColor: "#f4f7ff",
|
|
|
|
|
|
}}
|
|
|
|
|
|
></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>
|
2024-01-22 09:18:38 +08:00
|
|
|
|
</div>
|
2024-03-13 11:19:42 +08:00
|
|
|
|
</Col>
|
|
|
|
|
|
<div style={{ width: "30px" }}></div>
|
|
|
|
|
|
<Col
|
|
|
|
|
|
span={6}
|
2024-01-22 09:18:38 +08:00
|
|
|
|
style={{
|
2024-03-13 11:19:42 +08:00
|
|
|
|
backgroundColor: "#fff",
|
|
|
|
|
|
height: "100%",
|
|
|
|
|
|
padding: "0px",
|
|
|
|
|
|
borderRadius: "5px",
|
|
|
|
|
|
display: "flex",
|
|
|
|
|
|
flexDirection: "column",
|
|
|
|
|
|
minWidth: "466px",
|
2024-01-22 09:18:38 +08:00
|
|
|
|
}}
|
|
|
|
|
|
>
|
2024-03-13 11:19:42 +08:00
|
|
|
|
<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%" }}>
|
|
|
|
|
|
<Col span={6} className="home-tech-col">
|
|
|
|
|
|
<div className="home-tech-back">
|
|
|
|
|
|
<IconFont
|
|
|
|
|
|
type="icon-a-zu57"
|
|
|
|
|
|
className="home-tech-icon"
|
|
|
|
|
|
></IconFont>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<span className="home-tech-name">用户列表</span>
|
2024-01-22 09:18:38 +08:00
|
|
|
|
</Col>
|
2024-03-13 11:19:42 +08:00
|
|
|
|
<Col span={6} className="home-tech-col">
|
|
|
|
|
|
<div className="home-tech-back">
|
|
|
|
|
|
<IconFont
|
|
|
|
|
|
type="icon-a-zu198"
|
|
|
|
|
|
className="home-tech-icon"
|
|
|
|
|
|
></IconFont>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<span className="home-tech-name">菜单配置</span>
|
2024-01-22 09:18:38 +08:00
|
|
|
|
</Col>
|
2024-03-13 11:19:42 +08:00
|
|
|
|
<Col span={6} className="home-tech-col">
|
|
|
|
|
|
<div className="home-tech-back">
|
|
|
|
|
|
<IconFont
|
|
|
|
|
|
type="icon-a-zu83"
|
|
|
|
|
|
className="home-tech-icon"
|
|
|
|
|
|
></IconFont>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<span className="home-tech-name">排班日历</span>
|
2024-01-22 09:18:38 +08:00
|
|
|
|
</Col>
|
2024-03-13 11:19:42 +08:00
|
|
|
|
<Col span={6} className="home-tech-col">
|
|
|
|
|
|
<div className="home-tech-back">
|
|
|
|
|
|
<IconFont
|
|
|
|
|
|
type="icon-a-zu291"
|
|
|
|
|
|
className="home-tech-icon"
|
|
|
|
|
|
></IconFont>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<span className="home-tech-name">角色列表</span>
|
2024-01-22 09:18:38 +08:00
|
|
|
|
</Col>
|
|
|
|
|
|
</Row>
|
2024-03-13 11:19:42 +08:00
|
|
|
|
<Row style={{ height: "50%" }}>
|
|
|
|
|
|
<Col span={6} className="home-tech-col">
|
|
|
|
|
|
<div className="home-tech-back">
|
|
|
|
|
|
<IconFont
|
|
|
|
|
|
type="icon-a-zu73"
|
|
|
|
|
|
className="home-tech-icon"
|
|
|
|
|
|
></IconFont>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<span className="home-tech-name">模版表单</span>
|
2024-01-22 09:18:38 +08:00
|
|
|
|
</Col>
|
2024-03-13 11:19:42 +08:00
|
|
|
|
<Col span={6} className="home-tech-col">
|
|
|
|
|
|
<div className="home-tech-back">
|
|
|
|
|
|
<IconFont
|
|
|
|
|
|
type="icon-a-zu164"
|
|
|
|
|
|
className="home-tech-icon"
|
|
|
|
|
|
></IconFont>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<span className="home-tech-name">排班明细</span>
|
2024-01-22 09:18:38 +08:00
|
|
|
|
</Col>
|
2024-03-13 11:19:42 +08:00
|
|
|
|
<Col span={6} className="home-tech-col">
|
|
|
|
|
|
<div className="home-tech-back">
|
|
|
|
|
|
<IconFont
|
|
|
|
|
|
type="icon-a-zu203"
|
|
|
|
|
|
className="home-tech-icon"
|
|
|
|
|
|
></IconFont>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<span className="home-tech-name">会议记录</span>
|
2024-01-22 09:18:38 +08:00
|
|
|
|
</Col>
|
2024-03-13 11:19:42 +08:00
|
|
|
|
<Col span={6} className="home-tech-col">
|
|
|
|
|
|
<div className="home-tech-back">
|
|
|
|
|
|
<IconFont
|
|
|
|
|
|
type="icon-a-zu196"
|
|
|
|
|
|
className="home-tech-icon"
|
|
|
|
|
|
></IconFont>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<span className="home-tech-name">工作记录</span>
|
2024-01-22 09:18:38 +08:00
|
|
|
|
</Col>
|
|
|
|
|
|
</Row>
|
2024-03-13 11:19:42 +08:00
|
|
|
|
</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",
|
|
|
|
|
|
// backgroundColor: "#fff",
|
|
|
|
|
|
}}
|
2024-01-22 09:18:38 +08:00
|
|
|
|
>
|
2024-03-13 11:19:42 +08:00
|
|
|
|
<Col
|
|
|
|
|
|
span={17}
|
2024-01-22 09:18:38 +08:00
|
|
|
|
style={{
|
2024-03-13 11:19:42 +08:00
|
|
|
|
backgroundColor: "#fff",
|
2024-01-22 09:18:38 +08:00
|
|
|
|
height: "100%",
|
2024-03-13 11:19:42 +08:00
|
|
|
|
display: "flex",
|
|
|
|
|
|
flexDirection: "column",
|
|
|
|
|
|
padding: "0px",
|
|
|
|
|
|
borderRadius: "5px",
|
|
|
|
|
|
flex: 1,
|
2024-01-22 09:18:38 +08:00
|
|
|
|
}}
|
|
|
|
|
|
>
|
2024-03-13 11:19:42 +08:00
|
|
|
|
<div className="home-always-title">
|
|
|
|
|
|
<div className="home-always-left">
|
|
|
|
|
|
<div className="home-always-badge"></div>
|
|
|
|
|
|
<div className="home-always-name">我的工作</div>
|
2024-01-22 09:18:38 +08:00
|
|
|
|
</div>
|
2024-03-13 11:19:42 +08:00
|
|
|
|
|
|
|
|
|
|
{/* <Icon type="edit" className="home-always-icon"></Icon> */}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div style={{ flex: 1, height: "100%", padding: "5px 0px" }}>
|
|
|
|
|
|
<Tabs defaultActiveKey="1">
|
|
|
|
|
|
<TabPane
|
|
|
|
|
|
tab={
|
|
|
|
|
|
<span className="home-job-title">
|
|
|
|
|
|
<Icon
|
|
|
|
|
|
type="schedule"
|
|
|
|
|
|
className="home-userInfo-Icon"
|
|
|
|
|
|
style={{ color: "#2177d5" }}
|
|
|
|
|
|
></Icon>
|
|
|
|
|
|
待处理工单
|
|
|
|
|
|
</span>
|
|
|
|
|
|
}
|
|
|
|
|
|
key="1"
|
2024-01-22 09:18:38 +08:00
|
|
|
|
>
|
2024-03-13 11:19:42 +08:00
|
|
|
|
<div className="home-job-content">
|
|
|
|
|
|
{this.state.prepareJob.map((item, index) => {
|
|
|
|
|
|
return (
|
|
|
|
|
|
<div className="home-work-wrap">
|
|
|
|
|
|
<div className="home-work-icon">
|
|
|
|
|
|
<IconFont
|
|
|
|
|
|
type="icon-Pin"
|
|
|
|
|
|
className="home-job-icon"
|
|
|
|
|
|
></IconFont>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div className="home-work-right">
|
|
|
|
|
|
<div className="home-work-top">
|
|
|
|
|
|
<div
|
|
|
|
|
|
className={
|
|
|
|
|
|
item.type == "超期"
|
|
|
|
|
|
? "home-work-type-red"
|
|
|
|
|
|
: item.type == "未办"
|
|
|
|
|
|
? "home-work-type-yellow"
|
|
|
|
|
|
: "home-work-type-black"
|
|
|
|
|
|
}
|
|
|
|
|
|
>
|
|
|
|
|
|
{item.type}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div className="home-work-person">
|
|
|
|
|
|
发起人：{item.person}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div className="home-work-title">
|
|
|
|
|
|
{item.content}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div className="home-work-date">{item.data}</div>
|
|
|
|
|
|
<div className="home-work-detail">查看详情</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
);
|
|
|
|
|
|
})}
|
|
|
|
|
|
<div className="home-work-more">
|
|
|
|
|
|
<div className="badge-style">
|
|
|
|
|
|
查看更多
|
|
|
|
|
|
<Icon type="right" className="home-more-icon"></Icon>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<img
|
|
|
|
|
|
src={require("./../assets/home/图层_11.png")}
|
|
|
|
|
|
alt=""
|
|
|
|
|
|
></img>
|
|
|
|
|
|
</div>
|
2024-01-22 09:18:38 +08:00
|
|
|
|
</div>
|
2024-03-13 11:19:42 +08:00
|
|
|
|
</TabPane>
|
|
|
|
|
|
<TabPane
|
|
|
|
|
|
tab={
|
|
|
|
|
|
<span className="home-job-title">
|
|
|
|
|
|
<Icon
|
|
|
|
|
|
type="hourglass"
|
|
|
|
|
|
className="home-userInfo-Icon"
|
|
|
|
|
|
style={{ color: "#f76707" }}
|
|
|
|
|
|
></Icon>
|
|
|
|
|
|
超时工单
|
|
|
|
|
|
</span>
|
|
|
|
|
|
}
|
|
|
|
|
|
key="2"
|
|
|
|
|
|
>
|
|
|
|
|
|
<div className="home-job-content">
|
|
|
|
|
|
{this.state.overtimeJob.map((item, index) => {
|
|
|
|
|
|
return (
|
|
|
|
|
|
<div className="home-work-wrap-overtime">
|
|
|
|
|
|
<div className="home-work-icon">
|
|
|
|
|
|
<IconFont
|
|
|
|
|
|
type="icon-Clock"
|
|
|
|
|
|
className="home-job-icon"
|
|
|
|
|
|
></IconFont>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div className="home-work-right">
|
|
|
|
|
|
<div className="home-work-top">
|
|
|
|
|
|
<div
|
|
|
|
|
|
className={
|
|
|
|
|
|
item.type == "超期"
|
|
|
|
|
|
? "home-work-type-red"
|
|
|
|
|
|
: item.type == "未办"
|
|
|
|
|
|
? "home-work-type-yellow"
|
|
|
|
|
|
: "home-work-type-black"
|
|
|
|
|
|
}
|
|
|
|
|
|
>
|
|
|
|
|
|
{item.type}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div className="home-work-person">
|
|
|
|
|
|
发起人：{item.person}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div className="home-work-title">
|
|
|
|
|
|
{item.content}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div className="home-work-date">{item.data}</div>
|
|
|
|
|
|
<div className="home-work-detail">查看详情</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
);
|
|
|
|
|
|
})}
|
|
|
|
|
|
<div className="home-work-more">
|
|
|
|
|
|
<div className="badge-style">
|
|
|
|
|
|
查看更多
|
|
|
|
|
|
<Icon type="right" className="home-more-icon"></Icon>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<img
|
|
|
|
|
|
src={require("./../assets/home/图层_11.png")}
|
|
|
|
|
|
alt=""
|
|
|
|
|
|
></img>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</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 className="home-job-content">
|
|
|
|
|
|
{this.state.overJob.map((item, index) => {
|
|
|
|
|
|
return (
|
|
|
|
|
|
<div className="home-work-wrap-over">
|
|
|
|
|
|
<div className="home-work-icon">
|
|
|
|
|
|
<IconFont
|
|
|
|
|
|
type="icon-a-phonebook"
|
|
|
|
|
|
className="home-job-icon"
|
|
|
|
|
|
></IconFont>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div className="home-work-right">
|
|
|
|
|
|
<div className="home-work-top">
|
|
|
|
|
|
<div
|
|
|
|
|
|
className={
|
|
|
|
|
|
item.type == "超期"
|
|
|
|
|
|
? "home-work-type-red"
|
|
|
|
|
|
: item.type == "未办"
|
|
|
|
|
|
? "home-work-type-yellow"
|
|
|
|
|
|
: "home-work-type-black"
|
|
|
|
|
|
}
|
|
|
|
|
|
>
|
|
|
|
|
|
{item.type}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div className="home-work-person">
|
|
|
|
|
|
发起人：{item.person}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div className="home-work-title">
|
|
|
|
|
|
{item.content}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div className="home-work-date">{item.data}</div>
|
|
|
|
|
|
<div className="home-work-detail">查看详情</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
);
|
|
|
|
|
|
})}
|
|
|
|
|
|
<div className="home-work-more">
|
|
|
|
|
|
<div className="badge-style">
|
|
|
|
|
|
查看更多
|
|
|
|
|
|
<Icon type="right" className="home-more-icon"></Icon>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<img
|
|
|
|
|
|
src={require("./../assets/home/图层_11.png")}
|
|
|
|
|
|
alt=""
|
|
|
|
|
|
></img>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</TabPane>
|
|
|
|
|
|
<TabPane
|
|
|
|
|
|
tab={
|
|
|
|
|
|
<span className="home-job-title">
|
|
|
|
|
|
<Icon
|
|
|
|
|
|
type="bulb"
|
|
|
|
|
|
className="home-userInfo-Icon"
|
|
|
|
|
|
style={{ color: "#fcc419" }}
|
|
|
|
|
|
></Icon>
|
|
|
|
|
|
今日提醒
|
|
|
|
|
|
</span>
|
2024-01-22 09:18:38 +08:00
|
|
|
|
}
|
2024-03-13 11:19:42 +08:00
|
|
|
|
key="4"
|
|
|
|
|
|
>
|
|
|
|
|
|
<div className="home-job-content">
|
|
|
|
|
|
{this.state.noticeJob.map((item, index) => {
|
|
|
|
|
|
return (
|
|
|
|
|
|
<div className="home-work-wrap-warn">
|
|
|
|
|
|
<div className="home-work-icon">
|
|
|
|
|
|
<IconFont
|
|
|
|
|
|
type="icon-bell"
|
|
|
|
|
|
className="home-job-icon"
|
|
|
|
|
|
></IconFont>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div className="home-work-right">
|
|
|
|
|
|
<div className="home-work-top">
|
|
|
|
|
|
<div
|
|
|
|
|
|
className={
|
|
|
|
|
|
item.type == "超期"
|
|
|
|
|
|
? "home-work-type-red"
|
|
|
|
|
|
: item.type == "未办" ||
|
|
|
|
|
|
item.type == "未读"
|
|
|
|
|
|
? "home-work-type-yellow"
|
|
|
|
|
|
: "home-work-type-black"
|
|
|
|
|
|
}
|
|
|
|
|
|
>
|
|
|
|
|
|
{item.type}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div className="home-work-person">
|
|
|
|
|
|
发起人：{item.person}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div className="home-work-title">
|
|
|
|
|
|
{item.content}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div className="home-work-date">{item.data}</div>
|
|
|
|
|
|
<div className="home-work-detail">查看详情</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
);
|
|
|
|
|
|
})}
|
|
|
|
|
|
<div className="home-work-more">
|
|
|
|
|
|
<div className="badge-style">
|
|
|
|
|
|
查看更多
|
|
|
|
|
|
<Icon type="right" className="home-more-icon"></Icon>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<img
|
|
|
|
|
|
src={require("./../assets/home/图层_11.png")}
|
|
|
|
|
|
alt=""
|
|
|
|
|
|
></img>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</TabPane>
|
|
|
|
|
|
</Tabs>
|
|
|
|
|
|
,
|
2024-01-22 09:18:38 +08:00
|
|
|
|
</div>
|
2024-03-13 11:19:42 +08:00
|
|
|
|
</Col>
|
|
|
|
|
|
<div style={{ width: "30px" }}></div>
|
|
|
|
|
|
|
|
|
|
|
|
<Col
|
|
|
|
|
|
span={6}
|
2024-01-22 09:18:38 +08:00
|
|
|
|
style={{
|
2024-03-13 11:19:42 +08:00
|
|
|
|
backgroundColor: "#fff",
|
2024-01-22 09:18:38 +08:00
|
|
|
|
height: "100%",
|
2024-03-13 11:19:42 +08:00
|
|
|
|
padding: "0px",
|
|
|
|
|
|
borderRadius: "5px",
|
|
|
|
|
|
display: "flex",
|
|
|
|
|
|
flexDirection: "column",
|
2024-01-22 09:18:38 +08:00
|
|
|
|
}}
|
|
|
|
|
|
>
|
2024-03-13 11:19:42 +08:00
|
|
|
|
<div className="home-always-title">
|
|
|
|
|
|
<div className="home-always-left">
|
|
|
|
|
|
<div className="home-always-badge"></div>
|
|
|
|
|
|
<div className="home-always-name">完成率排名</div>
|
2024-01-22 09:18:38 +08:00
|
|
|
|
</div>
|
2024-03-13 11:19:42 +08:00
|
|
|
|
|
|
|
|
|
|
{/* <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>
|
2024-01-22 09:18:38 +08:00
|
|
|
|
</div>
|
2024-03-13 11:19:42 +08:00
|
|
|
|
);
|
|
|
|
|
|
})}
|
2024-01-22 09:18:38 +08:00
|
|
|
|
</div>
|
2024-03-13 11:19:42 +08:00
|
|
|
|
</Col>
|
|
|
|
|
|
</Row>
|
|
|
|
|
|
<Row
|
|
|
|
|
|
gutter={12}
|
|
|
|
|
|
className="home-row"
|
|
|
|
|
|
style={{
|
|
|
|
|
|
margin: "0px 0px 10px 0px",
|
|
|
|
|
|
minHeight: "275px",
|
|
|
|
|
|
}}
|
2024-01-22 09:18:38 +08:00
|
|
|
|
>
|
2024-03-13 11:19:42 +08:00
|
|
|
|
<Col
|
|
|
|
|
|
span={17}
|
2024-01-22 09:18:38 +08:00
|
|
|
|
style={{
|
|
|
|
|
|
height: "100%",
|
2024-03-13 11:19:42 +08:00
|
|
|
|
display: "flex",
|
|
|
|
|
|
flexDirection: "row",
|
|
|
|
|
|
padding: "0px",
|
|
|
|
|
|
borderRadius: "5px",
|
|
|
|
|
|
flex: 1,
|
2024-01-22 09:18:38 +08:00
|
|
|
|
}}
|
|
|
|
|
|
>
|
2024-03-13 11:19:42 +08:00
|
|
|
|
<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>
|
2024-01-22 09:18:38 +08:00
|
|
|
|
</div>
|
2024-03-13 11:19:42 +08:00
|
|
|
|
<div style={{ flex: 1, height: "100%", padding: "0px" }}>
|
|
|
|
|
|
<div
|
|
|
|
|
|
id="safeCheck"
|
2024-01-22 09:18:38 +08:00
|
|
|
|
style={{
|
2024-03-13 11:19:42 +08:00
|
|
|
|
width: "100%",
|
|
|
|
|
|
height: "100%",
|
|
|
|
|
|
// minHeight: "180px",
|
2024-01-22 09:18:38 +08:00
|
|
|
|
}}
|
2024-03-13 11:19:42 +08:00
|
|
|
|
></div>
|
|
|
|
|
|
</div>
|
2024-01-22 09:18:38 +08:00
|
|
|
|
</div>
|
2024-03-13 11:19:42 +08:00
|
|
|
|
<div style={{ width: "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>
|
2024-01-22 09:18:38 +08:00
|
|
|
|
</div>
|
2024-03-13 11:19:42 +08:00
|
|
|
|
<div style={{ flex: 1, height: "100%", padding: "0px" }}>
|
|
|
|
|
|
<div
|
|
|
|
|
|
id="dangerChange"
|
2024-01-22 09:18:38 +08:00
|
|
|
|
style={{
|
2024-03-13 11:19:42 +08:00
|
|
|
|
width: "100%",
|
|
|
|
|
|
height: "100%",
|
|
|
|
|
|
// minHeight: "180px",
|
2024-01-22 09:18:38 +08:00
|
|
|
|
}}
|
2024-03-13 11:19:42 +08:00
|
|
|
|
></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</Col>
|
|
|
|
|
|
<div style={{ width: "30px" }}></div>
|
|
|
|
|
|
|
|
|
|
|
|
<Col
|
|
|
|
|
|
span={6}
|
|
|
|
|
|
style={{
|
|
|
|
|
|
backgroundColor: "#fff",
|
|
|
|
|
|
height: "100%",
|
|
|
|
|
|
padding: "0px",
|
|
|
|
|
|
borderRadius: "5px",
|
|
|
|
|
|
display: "flex",
|
|
|
|
|
|
flexDirection: "column",
|
|
|
|
|
|
}}
|
|
|
|
|
|
>
|
|
|
|
|
|
<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>
|
2024-01-22 09:18:38 +08:00
|
|
|
|
</div>
|
2024-03-13 11:19:42 +08:00
|
|
|
|
</Col>
|
|
|
|
|
|
</Row>
|
|
|
|
|
|
</Col>
|
2024-01-22 09:18:38 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
export default connect(({ login, app }) => ({ login, app }))(Home);
|
