1888 lines
58 KiB
JavaScript
1888 lines
58 KiB
JavaScript
import React from "react";
|
||
import { connect } from "dva";
|
||
import { initFilter, extendRule, extendOrder } from "../../../utils/common";
|
||
import { ChartPieShow, ChartBarShow } from "../../../utils/commonEcharsShow";
|
||
import {
|
||
Table,
|
||
Button,
|
||
Row,
|
||
Col,
|
||
Modal,
|
||
Form,
|
||
DatePicker,
|
||
Icon,
|
||
Progress,
|
||
Divider,
|
||
} from "antd";
|
||
import echarts from "echarts";
|
||
import styles from "../HI/StepForm1.css";
|
||
import moment from "moment";
|
||
import { T } from "antd/lib/upload/utils";
|
||
import FormPage from "../../FormPage";
|
||
|
||
class BI009FormRunAnalysis extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
tableTitle :"",
|
||
selectStartTime: moment(this.getStartDate(), "YYYY-MM-DD 00:00:00"),
|
||
selectEndTime: moment(this.getEndDate(), "YYYY-MM-DD 23:59:59"),
|
||
visible: false,
|
||
noticeTitle: "",
|
||
tmpData: {},
|
||
tableKey: "1",
|
||
timeType: 5,
|
||
ordinaryCount: 0,
|
||
crucialCount: 0,
|
||
activityCount: 0,
|
||
postCount: 0,
|
||
postChangeCount: 0,
|
||
taskCount: 0,
|
||
weekColor: "black",
|
||
monthColor: "orange",
|
||
threeMonthColor: "black",
|
||
sixMonthColor: "black",
|
||
yearColor: "black",
|
||
retData: [],
|
||
groupData: [],
|
||
detailData: [],
|
||
newData: [],
|
||
detailDataH: [],
|
||
displayHr: "none",
|
||
displaydetail: "none",
|
||
columns: [
|
||
{
|
||
width: "80px",
|
||
title: "序号",
|
||
dataIndex: "Num",
|
||
key: "Num",
|
||
render: (text, record, index) => <span>{index + 1}</span>,
|
||
},
|
||
{
|
||
width: "250px",
|
||
title: "部门",
|
||
dataIndex: "DEPARTMENT_NAME",
|
||
key: "DEPARTMENT_NAME",
|
||
// render: (text, record) => (
|
||
// <span>
|
||
// <a onClick={() => this.showEditModal(record.DEPARTMENT_ID,record.DEPARTMENT_NAME)}>{record.DEPARTMENT_NAME}</a>
|
||
// </span>
|
||
// ),
|
||
},
|
||
{
|
||
width: "250px",
|
||
title: "班组",
|
||
dataIndex: "TEAM_NAME",
|
||
key: "TEAM_NAME",
|
||
// render: (text, record) => (
|
||
// <span>
|
||
// <a onClick={() => this.showEditModal(record.DEPARTMENT_ID,record.DEPARTMENT_NAME)}>{record.DEPARTMENT_NAME}</a>
|
||
// </span>
|
||
// ),
|
||
},
|
||
{
|
||
title: "完成率",
|
||
children: [
|
||
{
|
||
title: "班前会议",
|
||
render: (text, record) => (
|
||
<span>
|
||
{record.FO01_TOTAL == 0
|
||
? "0%"
|
||
: (
|
||
((record.FO01_FINISH + record.FO01_OVERTIME) /
|
||
record.FO01_TOTAL) *
|
||
100
|
||
).toFixed(0) + "%"}
|
||
</span>
|
||
),
|
||
},
|
||
{
|
||
title: "岗位交接班",
|
||
render: (text, record) => (
|
||
<span>
|
||
{record.FO03_TOTAL == 0
|
||
? "0%"
|
||
: (
|
||
((record.FO03_FINISH + record.FO03_OVERTIME) /
|
||
record.FO03_TOTAL) *
|
||
100
|
||
).toFixed(0) + "%"}
|
||
</span>
|
||
),
|
||
},
|
||
{
|
||
title: "岗位当班记录",
|
||
render: (text, record) => (
|
||
<span>
|
||
{record.FO02_TOTAL == 0
|
||
? "0%"
|
||
: (
|
||
((record.FO02_FINISH + record.FO02_OVERTIME) /
|
||
record.FO02_TOTAL) *
|
||
100
|
||
).toFixed(0) + "%"}
|
||
</span>
|
||
),
|
||
},
|
||
],
|
||
},
|
||
// {
|
||
// title: '及时完成率',
|
||
// children: [
|
||
// {
|
||
// title: '班前会议',
|
||
// render: (text, record) => (<span>{record.FO01_TOTAL == 0?'0%':((record.FO01_FINISH/ record.FO01_TOTAL)*100).toFixed(0)+"%"}</span>)
|
||
// },
|
||
// {
|
||
// title: '岗位交接班',
|
||
// render: (text, record) => (<span>{record.FO03_TOTAL == 0?'0%':((record.FO03_FINISH / record.FO03_TOTAL)*100).toFixed(0)+"%"}</span>)
|
||
// },
|
||
// {
|
||
// title: '岗位当班记录',
|
||
// render: (text, record) => (<span>{record.FO02_TOTAL == 0?'0%':((record.FO02_FINISH / record.FO02_TOTAL)*100).toFixed(0)+"%"}</span>)
|
||
// },
|
||
// ],
|
||
// },
|
||
],
|
||
detailColumns: [
|
||
{
|
||
width: "60px",
|
||
title: "班组",
|
||
dataIndex: "DEPARTMENT_NAME",
|
||
key: "DEPARTMENT_NAME",
|
||
// render: (text, record) => (
|
||
// <span>
|
||
// <a onClick={() => this.showEditModal(record.DEPARTMENT_ID,record.DEPARTMENT_NAME)}>{record.DEPARTMENT_NAME}</a>
|
||
// </span>
|
||
// ),
|
||
},
|
||
{
|
||
width: "60px",
|
||
title: "总任务数",
|
||
dataIndex: "TOTAL_QTY",
|
||
key: "TOTAL_QTY",
|
||
},
|
||
{
|
||
width: "60px",
|
||
title: "正常已办",
|
||
dataIndex: "FINISH_QTY",
|
||
key: "FINISH_QTY",
|
||
},
|
||
{
|
||
width: "60px",
|
||
title: "超时已办",
|
||
dataIndex: "OVER_FINISH_QTY",
|
||
key: "OVER_FINISH_QTY",
|
||
},
|
||
{
|
||
width: "50px",
|
||
title: "未完成",
|
||
dataIndex: "UNFINISH_QTY",
|
||
key: "UNFINISH_QTY",
|
||
},
|
||
{
|
||
width: "100px",
|
||
title: "完成率",
|
||
dataIndex: "FINISH_RATE",
|
||
key: "FINISH_RATE",
|
||
render: (text, record) => (
|
||
<Progress percent={record.FINISH_RATE.split("%")[0]} />
|
||
// <span>
|
||
// <a onClick={() => this.showEditModal(record.DEPARTMENT_ID,record.DEPARTMENT_NAME)}>{record.DEPARTMENT_NAME}</a>
|
||
// </span>
|
||
),
|
||
},
|
||
{
|
||
width: "100px",
|
||
title: "及时完成率",
|
||
dataIndex: "NORMAL_FINISH_RATE",
|
||
key: "NORMAL_FINISH_RATE",
|
||
render: (text, record) => (
|
||
<Progress
|
||
percent={record.NORMAL_FINISH_RATE.split("%")[0]}
|
||
strokeColor={{
|
||
from: "rgba(82, 196, 26)",
|
||
to: "rgba(82, 196, 26)",
|
||
}}
|
||
/>
|
||
// <span>
|
||
// <a onClick={() => this.showEditModal(record.DEPARTMENT_ID,record.DEPARTMENT_NAME)}>{record.DEPARTMENT_NAME}</a>
|
||
// </span>
|
||
),
|
||
},
|
||
],
|
||
};
|
||
|
||
}
|
||
|
||
componentDidMount() {
|
||
this.loadData();
|
||
}
|
||
showEditModal = (departmentId, departmentName) => {
|
||
const newtmpData = {
|
||
data: {
|
||
id: departmentId,
|
||
name: departmentName,
|
||
onCancel: this.handleCancel,
|
||
tableKey: this.state.tableKey,
|
||
homeReload: true,
|
||
},
|
||
formCode: "BI007_RUNANALYSIS",
|
||
};
|
||
this.setState(
|
||
{
|
||
id: departmentId,
|
||
name: departmentName,
|
||
noticeTitle: departmentName + "安全生产标准化运行情况",
|
||
tmpData: newtmpData,
|
||
currActivatedMenu: "",
|
||
},
|
||
() =>
|
||
this.setState({
|
||
visible: true,
|
||
})
|
||
);
|
||
};
|
||
showFormModal = (record) => {
|
||
const { newData } = this.state;
|
||
let newDataTemp = [];
|
||
let temp = newData.filter(
|
||
(t) =>
|
||
t.DEPARTMENT_ID === record.departmentId &&
|
||
t.SOURCE_FORMCODE === record.formCode
|
||
);
|
||
if (temp.length > 0) {
|
||
let i = 1;
|
||
temp.forEach((t) => {
|
||
t.ROW_NO = i;
|
||
t.formName = record.formName;
|
||
newDataTemp.push(t);
|
||
i++;
|
||
});
|
||
} else {
|
||
newDataTemp = [];
|
||
}
|
||
this.setState({ displaydetail: "block", detailDataH: newDataTemp });
|
||
};
|
||
|
||
//加载数据赋值
|
||
loadData = () => {
|
||
// this.getCompany();
|
||
this.getCount();
|
||
this.workTicket();
|
||
this.workTicket2();
|
||
this.mainJobPie2();
|
||
this.getBaseInfoData();
|
||
};
|
||
// getCompany = ()=>
|
||
// {
|
||
// let json = initFilter(this.props.login.OrgId);
|
||
// extendRule(json, "PARENT_ID", 1, null);
|
||
// extendRule(json, "DEPARTMENT_TYPE", 1, 3);
|
||
// extendRule(json, "ENABLE_STATUS", 1, 0);
|
||
// this.props.dispatch({
|
||
// type: "app/getDataByPost",
|
||
// url: "FM/Department/Get",
|
||
// payload: json,
|
||
// onlyData: false,
|
||
// onComplete: (ret) => {
|
||
// if (ret && ret.Data) {
|
||
// this.setState({
|
||
// tableTitle : ret.Data.NAME+"-"
|
||
// });
|
||
// }
|
||
// },
|
||
// });
|
||
// };
|
||
getDiffDay(date_1, date_2) {
|
||
// 计算两个日期之间的差值
|
||
let totalDays, diffDate;
|
||
let myDate_1 = Date.parse(date_1);
|
||
let myDate_2 = Date.parse(date_2);
|
||
// 将两个日期都转换为毫秒格式，然后做差
|
||
diffDate = Math.abs(myDate_1 - myDate_2); // 取相差毫秒数的绝对值
|
||
|
||
totalDays = Math.floor(diffDate / (1000 * 3600 * 24)); // 向下取整
|
||
// console.log(totalDays)
|
||
|
||
return totalDays; // 相差的天数
|
||
}
|
||
|
||
//获取数据
|
||
getBaseInfoData = () => {
|
||
let json = initFilter(this.props.login.OrgId, "", "DEPARTMENT_NAME", "asc");
|
||
let startTime = this.state.selectStartTime.format("YYYY-MM-DD 00:00:00");
|
||
let endTime = this.state.selectEndTime.format("YYYY-MM-DD 23:59:59");
|
||
// 使用
|
||
let span = this.getDiffDay(startTime, endTime);
|
||
if (span <= 7) {
|
||
extendRule(json, "FILTER_TIME", 1, 1);
|
||
} else if (span > 7 && span <= 30) {
|
||
extendRule(json, "FILTER_TIME", 1, 5);
|
||
} else if (span > 30 && span <= 90) {
|
||
extendRule(json, "FILTER_TIME", 1, 10);
|
||
} else if (span > 90 && span <= 180) {
|
||
extendRule(json, "FILTER_TIME", 1, 15);
|
||
} else if (span > 180 && span <= 365) {
|
||
extendRule(json, "FILTER_TIME", 1, 20);
|
||
} else {
|
||
extendRule(json, "FILTER_TIME", 1, 0);
|
||
}
|
||
extendRule(json, "DEPARTMENT_NAME", 2, "宁化行洛坑钨矿有限公司");
|
||
extendRule(json, "DEPARTMENT_NAME", 2, "都昌金鼎钨钼矿业有限公司");
|
||
extendRule(json, "DEPARTMENT_NAME", 2, "技术管理部");
|
||
this.props.dispatch({
|
||
type: "app/getDataByPost",
|
||
url: "BI/SafetaskFinish/OrderEntities",
|
||
payload: json,
|
||
onlyData: false,
|
||
onComplete: (ret) => {
|
||
if (ret && ret.Data) {
|
||
this.state.retData = ret.Data;
|
||
}
|
||
},
|
||
});
|
||
};
|
||
getCount = () => {
|
||
var orgId = this.props.login ? this.props.login.OrgId : "";
|
||
const jsonTemp = initFilter(orgId);
|
||
let startTime = this.state.selectStartTime.format("YYYY-MM-DD 00:00:00");
|
||
let endTime = this.state.selectEndTime.format("YYYY-MM-DD 23:59:59");
|
||
extendRule(jsonTemp, "CREATE_TIME", 6, startTime);
|
||
extendRule(jsonTemp, "CREATE_TIME", 4, endTime);
|
||
this.props.dispatch({
|
||
type: "app/getDataByPost",
|
||
payload: jsonTemp,
|
||
url: "BI/BIStatiscialAnalysisController/GetTotalCount",
|
||
onComplete: (ret) => {
|
||
if (ret) {
|
||
let riskLevels = document.getElementById("mainJobPie");
|
||
if (riskLevels) {
|
||
let myChart = echarts.init(riskLevels);
|
||
myChart.setOption({
|
||
backgroundColor: "#FFFFFF",
|
||
title: [
|
||
{
|
||
text: "班前会议完成率",
|
||
bottom: "12%",
|
||
x: "center",
|
||
// borderColor: "#1598FF",
|
||
// borderWidth: 1,
|
||
borderRadius: 15,
|
||
// backgroundColor: "#1598FF",
|
||
padding: [7, 14],
|
||
textStyle: {
|
||
// fontWeight: "bold",
|
||
fontSize: 14,
|
||
color: "#000",
|
||
},
|
||
},
|
||
],
|
||
angleAxis: {
|
||
show: false,
|
||
max: (100 * 360) / 270, //-45度到225度，二者偏移值是270度除360度
|
||
type: "value",
|
||
startAngle: 225, //极坐标初始角度
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
},
|
||
barMaxWidth: 10, //圆环宽度
|
||
radiusAxis: {
|
||
show: false,
|
||
type: "category",
|
||
},
|
||
//圆环位置和大小
|
||
polar: {
|
||
center: ["50%", "50%"],
|
||
radius: "120%",
|
||
},
|
||
series: [
|
||
{
|
||
type: "bar",
|
||
data: [
|
||
{
|
||
//上层圆环，显示数据
|
||
value: 95,
|
||
itemStyle: {
|
||
color: "#1598FF",
|
||
},
|
||
},
|
||
],
|
||
barGap: "-100%", //柱间距离,上下两层圆环重合
|
||
coordinateSystem: "polar",
|
||
roundCap: true, //顶端圆角
|
||
z: 3, //圆环层级，同zindex
|
||
},
|
||
{
|
||
//下层圆环，显示最大值
|
||
type: "bar",
|
||
data: [
|
||
{
|
||
value: 100,
|
||
itemStyle: {
|
||
color: "#1598FF",
|
||
opacity: 0.2,
|
||
borderWidth: 0,
|
||
},
|
||
},
|
||
],
|
||
barGap: "-100%",
|
||
coordinateSystem: "polar",
|
||
roundCap: true,
|
||
z: 1,
|
||
},
|
||
//仪表盘
|
||
{
|
||
type: "gauge",
|
||
startAngle: 225, //起始角度，同极坐标
|
||
endAngle: -45, //终止角度，同极坐标
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
show: false,
|
||
},
|
||
splitLabel: {
|
||
show: false,
|
||
},
|
||
pointer: {
|
||
// 分隔线
|
||
shadowColor: "auto", //默认透明
|
||
shadowBlur: 5,
|
||
length: "50%",
|
||
width: "1",
|
||
},
|
||
itemStyle: {
|
||
color: "#1598FF",
|
||
borderColor: "#1598FF",
|
||
borderWidth: 2,
|
||
},
|
||
detail: {
|
||
formatter: function (params) {
|
||
return 95 + "%";
|
||
},
|
||
color: "#1598FF",
|
||
fontSize: 20,
|
||
offsetCenter: [0, 80],
|
||
},
|
||
title: {
|
||
show: false,
|
||
},
|
||
data: [
|
||
{
|
||
value: 95,
|
||
},
|
||
],
|
||
},
|
||
{
|
||
name: "外部刻度",
|
||
type: "gauge",
|
||
// center: ['20%', '50%'],
|
||
radius: "73%",
|
||
min: 0, //最小刻度
|
||
max: 100, //最大刻度
|
||
splitNumber: 10, //刻度数量
|
||
startAngle: 225,
|
||
endAngle: -45,
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
width: 1,
|
||
color: [[1, "rgba(0,0,0,0)"]],
|
||
},
|
||
}, //仪表盘轴线
|
||
axisLabel: {
|
||
show: false,
|
||
color: "#4d5bd1",
|
||
distance: 25,
|
||
}, //刻度标签。
|
||
axisTick: {
|
||
show: true,
|
||
splitNumber: 7,
|
||
lineStyle: {
|
||
color: "#C7CBCF", //用颜色渐变函数不起作用
|
||
width: 2,
|
||
},
|
||
length: -8,
|
||
}, //刻度样式
|
||
splitLine: {
|
||
show: false,
|
||
length: -20,
|
||
lineStyle: {
|
||
color: "#C7CBCF", //用颜色渐变函数不起作用
|
||
},
|
||
}, //分隔线样式
|
||
detail: {
|
||
show: false,
|
||
},
|
||
pointer: {
|
||
show: false,
|
||
},
|
||
},
|
||
{
|
||
//指针外环
|
||
type: "pie",
|
||
hoverAnimation: false,
|
||
legendHoverLink: false,
|
||
radius: ["10%", "13%"],
|
||
z: 10,
|
||
label: {
|
||
normal: {
|
||
show: false,
|
||
},
|
||
},
|
||
labelLine: {
|
||
normal: {
|
||
show: false,
|
||
},
|
||
},
|
||
data: [
|
||
{
|
||
value: 100,
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#1598FF",
|
||
},
|
||
},
|
||
},
|
||
],
|
||
},
|
||
{
|
||
//指针内环
|
||
type: "pie",
|
||
hoverAnimation: false,
|
||
legendHoverLink: false,
|
||
radius: ["0%", "10%"],
|
||
z: 10,
|
||
label: {
|
||
normal: {
|
||
show: false,
|
||
},
|
||
},
|
||
labelLine: {
|
||
normal: {
|
||
show: false,
|
||
},
|
||
},
|
||
data: [
|
||
{
|
||
value: 100,
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#FFFFFF",
|
||
},
|
||
},
|
||
},
|
||
],
|
||
},
|
||
],
|
||
});
|
||
}
|
||
let riskLevel1s = document.getElementById("mainJobPie1");
|
||
if (riskLevel1s) {
|
||
let myChart1 = echarts.init(riskLevel1s);
|
||
myChart1.setOption({
|
||
backgroundColor: "#FFFFFF",
|
||
title: [
|
||
{
|
||
text: "岗位当班记录完成率",
|
||
bottom: "12%",
|
||
x: "center",
|
||
// borderColor: "#1598FF",
|
||
// borderWidth: 1,
|
||
borderRadius: 15,
|
||
// backgroundColor: "#1598FF",
|
||
padding: [7, 14],
|
||
textStyle: {
|
||
// fontWeight: "bold",
|
||
fontSize: 14,
|
||
color: "#000",
|
||
},
|
||
},
|
||
],
|
||
angleAxis: {
|
||
show: false,
|
||
max: (100 * 360) / 270, //-45度到225度，二者偏移值是270度除360度
|
||
type: "value",
|
||
startAngle: 225, //极坐标初始角度
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
},
|
||
barMaxWidth: 10, //圆环宽度
|
||
radiusAxis: {
|
||
show: false,
|
||
type: "category",
|
||
},
|
||
//圆环位置和大小
|
||
polar: {
|
||
center: ["50%", "50%"],
|
||
radius: "120%",
|
||
},
|
||
series: [
|
||
{
|
||
type: "bar",
|
||
data: [
|
||
{
|
||
//上层圆环，显示数据
|
||
value: 97,
|
||
itemStyle: {
|
||
color: "#f8a035",
|
||
},
|
||
},
|
||
],
|
||
barGap: "-100%", //柱间距离,上下两层圆环重合
|
||
coordinateSystem: "polar",
|
||
roundCap: true, //顶端圆角
|
||
z: 3, //圆环层级，同zindex
|
||
},
|
||
{
|
||
//下层圆环，显示最大值
|
||
type: "bar",
|
||
data: [
|
||
{
|
||
value: 100,
|
||
itemStyle: {
|
||
color: "#f8a035",
|
||
opacity: 0.2,
|
||
borderWidth: 0,
|
||
},
|
||
},
|
||
],
|
||
barGap: "-100%",
|
||
coordinateSystem: "polar",
|
||
roundCap: true,
|
||
z: 1,
|
||
},
|
||
//仪表盘
|
||
{
|
||
type: "gauge",
|
||
startAngle: 225, //起始角度，同极坐标
|
||
endAngle: -45, //终止角度，同极坐标
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
show: false,
|
||
},
|
||
splitLabel: {
|
||
show: false,
|
||
},
|
||
pointer: {
|
||
// 分隔线
|
||
shadowColor: "auto", //默认透明
|
||
shadowBlur: 5,
|
||
length: "50%",
|
||
width: "1",
|
||
},
|
||
itemStyle: {
|
||
color: "#f8a035",
|
||
borderColor: "#f8a035",
|
||
borderWidth: 2,
|
||
},
|
||
detail: {
|
||
formatter: function (params) {
|
||
return 97 + "%";
|
||
},
|
||
color: "#f8a035",
|
||
fontSize: 20,
|
||
offsetCenter: [0, 80],
|
||
},
|
||
title: {
|
||
show: false,
|
||
},
|
||
data: [
|
||
{
|
||
value: 97,
|
||
},
|
||
],
|
||
},
|
||
{
|
||
name: "外部刻度",
|
||
type: "gauge",
|
||
// center: ['20%', '50%'],
|
||
radius: "73%",
|
||
min: 0, //最小刻度
|
||
max: 100, //最大刻度
|
||
splitNumber: 10, //刻度数量
|
||
startAngle: 225,
|
||
endAngle: -45,
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
width: 1,
|
||
color: [[1, "rgba(0,0,0,0)"]],
|
||
},
|
||
}, //仪表盘轴线
|
||
axisLabel: {
|
||
show: false,
|
||
color: "#4d5bd1",
|
||
distance: 25,
|
||
}, //刻度标签。
|
||
axisTick: {
|
||
show: true,
|
||
splitNumber: 7,
|
||
lineStyle: {
|
||
color: "#C7CBCF", //用颜色渐变函数不起作用
|
||
width: 2,
|
||
},
|
||
length: -8,
|
||
}, //刻度样式
|
||
splitLine: {
|
||
show: false,
|
||
length: -20,
|
||
lineStyle: {
|
||
color: "#C7CBCF", //用颜色渐变函数不起作用
|
||
},
|
||
}, //分隔线样式
|
||
detail: {
|
||
show: false,
|
||
},
|
||
pointer: {
|
||
show: false,
|
||
},
|
||
},
|
||
{
|
||
//指针外环
|
||
type: "pie",
|
||
hoverAnimation: false,
|
||
legendHoverLink: false,
|
||
radius: ["10%", "13%"],
|
||
z: 10,
|
||
label: {
|
||
normal: {
|
||
show: false,
|
||
},
|
||
},
|
||
labelLine: {
|
||
normal: {
|
||
show: false,
|
||
},
|
||
},
|
||
data: [
|
||
{
|
||
value: 100,
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#f8a035",
|
||
},
|
||
},
|
||
},
|
||
],
|
||
},
|
||
{
|
||
//指针内环
|
||
type: "pie",
|
||
hoverAnimation: false,
|
||
legendHoverLink: false,
|
||
radius: ["0%", "10%"],
|
||
z: 10,
|
||
label: {
|
||
normal: {
|
||
show: false,
|
||
},
|
||
},
|
||
labelLine: {
|
||
normal: {
|
||
show: false,
|
||
},
|
||
},
|
||
data: [
|
||
{
|
||
value: 100,
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#FFFFFF",
|
||
},
|
||
},
|
||
},
|
||
],
|
||
},
|
||
],
|
||
});
|
||
}
|
||
let riskLevel3s = document.getElementById("mainJobPie3");
|
||
if (riskLevel3s) {
|
||
let myChart3 = echarts.init(riskLevel3s);
|
||
myChart3.setOption({
|
||
backgroundColor: "#FFFFFF",
|
||
title: [
|
||
{
|
||
text: "岗位交接班完成率",
|
||
bottom: "12%",
|
||
x: "center",
|
||
// borderColor: "#1598FF",
|
||
// borderWidth: 1,
|
||
borderRadius: 15,
|
||
// backgroundColor: "#1598FF",
|
||
padding: [7, 14],
|
||
textStyle: {
|
||
// fontWeight: "bold",
|
||
fontSize: 14,
|
||
color: "#000",
|
||
},
|
||
},
|
||
],
|
||
angleAxis: {
|
||
show: false,
|
||
max: (100 * 360) / 270, //-45度到225度，二者偏移值是270度除360度
|
||
type: "value",
|
||
startAngle: 225, //极坐标初始角度
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
},
|
||
barMaxWidth: 10, //圆环宽度
|
||
radiusAxis: {
|
||
show: false,
|
||
type: "category",
|
||
},
|
||
//圆环位置和大小
|
||
polar: {
|
||
center: ["50%", "50%"],
|
||
radius: "120%",
|
||
},
|
||
series: [
|
||
{
|
||
type: "bar",
|
||
data: [
|
||
{
|
||
//上层圆环，显示数据
|
||
value: 99,
|
||
itemStyle: {
|
||
color: "#f1516d",
|
||
},
|
||
},
|
||
],
|
||
barGap: "-100%", //柱间距离,上下两层圆环重合
|
||
coordinateSystem: "polar",
|
||
roundCap: true, //顶端圆角
|
||
z: 3, //圆环层级，同zindex
|
||
},
|
||
{
|
||
//下层圆环，显示最大值
|
||
type: "bar",
|
||
data: [
|
||
{
|
||
value: 100,
|
||
itemStyle: {
|
||
color: "#f1516d",
|
||
opacity: 0.2,
|
||
borderWidth: 0,
|
||
},
|
||
},
|
||
],
|
||
barGap: "-100%",
|
||
coordinateSystem: "polar",
|
||
roundCap: true,
|
||
z: 1,
|
||
},
|
||
//仪表盘
|
||
{
|
||
type: "gauge",
|
||
startAngle: 225, //起始角度，同极坐标
|
||
endAngle: -45, //终止角度，同极坐标
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
show: false,
|
||
},
|
||
splitLabel: {
|
||
show: false,
|
||
},
|
||
pointer: {
|
||
// 分隔线
|
||
shadowColor: "auto", //默认透明
|
||
shadowBlur: 5,
|
||
length: "50%",
|
||
width: "1",
|
||
},
|
||
itemStyle: {
|
||
color: "#f1516d",
|
||
borderColor: "#f1516d",
|
||
borderWidth: 2,
|
||
},
|
||
detail: {
|
||
formatter: function (params) {
|
||
return 99 + "%";
|
||
},
|
||
color: "#f1516d",
|
||
fontSize: 20,
|
||
offsetCenter: [0, 80],
|
||
},
|
||
title: {
|
||
show: false,
|
||
},
|
||
data: [
|
||
{
|
||
value: 99,
|
||
},
|
||
],
|
||
},
|
||
{
|
||
name: "外部刻度",
|
||
type: "gauge",
|
||
// center: ['20%', '50%'],
|
||
radius: "73%",
|
||
min: 0, //最小刻度
|
||
max: 100, //最大刻度
|
||
splitNumber: 10, //刻度数量
|
||
startAngle: 225,
|
||
endAngle: -45,
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
width: 1,
|
||
color: [[1, "rgba(0,0,0,0)"]],
|
||
},
|
||
}, //仪表盘轴线
|
||
axisLabel: {
|
||
show: false,
|
||
color: "#4d5bd1",
|
||
distance: 25,
|
||
}, //刻度标签。
|
||
axisTick: {
|
||
show: true,
|
||
splitNumber: 7,
|
||
lineStyle: {
|
||
color: "#C7CBCF", //用颜色渐变函数不起作用
|
||
width: 2,
|
||
},
|
||
length: -8,
|
||
}, //刻度样式
|
||
splitLine: {
|
||
show: false,
|
||
length: -20,
|
||
lineStyle: {
|
||
color: "#C7CBCF", //用颜色渐变函数不起作用
|
||
},
|
||
}, //分隔线样式
|
||
detail: {
|
||
show: false,
|
||
},
|
||
pointer: {
|
||
show: false,
|
||
},
|
||
},
|
||
{
|
||
//指针外环
|
||
type: "pie",
|
||
hoverAnimation: false,
|
||
legendHoverLink: false,
|
||
radius: ["10%", "13%"],
|
||
z: 10,
|
||
label: {
|
||
normal: {
|
||
show: false,
|
||
},
|
||
},
|
||
labelLine: {
|
||
normal: {
|
||
show: false,
|
||
},
|
||
},
|
||
data: [
|
||
{
|
||
value: 100,
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#f1516d",
|
||
},
|
||
},
|
||
},
|
||
],
|
||
},
|
||
{
|
||
//指针内环
|
||
type: "pie",
|
||
hoverAnimation: false,
|
||
legendHoverLink: false,
|
||
radius: ["0%", "10%"],
|
||
z: 10,
|
||
label: {
|
||
normal: {
|
||
show: false,
|
||
},
|
||
},
|
||
labelLine: {
|
||
normal: {
|
||
show: false,
|
||
},
|
||
},
|
||
data: [
|
||
{
|
||
value: 100,
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#FFFFFF",
|
||
},
|
||
},
|
||
},
|
||
],
|
||
},
|
||
],
|
||
});
|
||
}
|
||
this.setState({
|
||
ordinaryCount: ret.ordinaryCount,
|
||
crucialCount: ret.crucialCount,
|
||
activityCount: ret.activityCount,
|
||
postCount: ret.postCount,
|
||
postChangeCount: ret.postChangeCount,
|
||
taskCount: ret.taskCount,
|
||
});
|
||
}
|
||
},
|
||
});
|
||
};
|
||
//
|
||
workTicket = () => {
|
||
let startTime = this.state.selectStartTime.format("YYYY-MM-DD 00:00:00");
|
||
let endTime = this.state.selectEndTime.format("YYYY-MM-DD 23:59:59");
|
||
let json = initFilter(
|
||
this.props.login.OrgId,
|
||
"10",
|
||
"NUM",
|
||
"asc",
|
||
"",
|
||
8,
|
||
startTime,
|
||
endTime
|
||
);
|
||
// extendRule(json, "DEPARTMENT_NAME", 1,"选矿部");
|
||
this.props.dispatch({
|
||
type: "app/getDataByPost",
|
||
url: "BI/BIStatiscialAnalysisController/GetDepartmentCompletionSort",
|
||
payload: json,
|
||
onlyData: false,
|
||
onComplete: (data) => {
|
||
if (data && data.IsSuccessful) {
|
||
this.teamTop = data.Data.length;
|
||
let teamName = [];
|
||
let finishQty = [];
|
||
data.Data.forEach((item) => {
|
||
teamName.push(item.TEAM_NAME);
|
||
let finishData = Number(item.CALC * 100).toFixed(2);
|
||
finishQty.push(finishData);
|
||
});
|
||
let departmentCompletions = document.getElementById("workTicket");
|
||
if (departmentCompletions) {
|
||
let myChart = echarts.init(departmentCompletions);
|
||
myChart.setOption(
|
||
{
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
// 坐标轴指示器，坐标轴触发有效
|
||
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
||
},
|
||
formatter: function (param) {
|
||
return (
|
||
param[0].name +
|
||
"<br>" +
|
||
param[0].marker +
|
||
" " +
|
||
param[0].seriesName +
|
||
"：" +
|
||
param[0].value +
|
||
"%"
|
||
);
|
||
},
|
||
},
|
||
grid: {
|
||
top: "2%",
|
||
bottom: -15,
|
||
right: "10%",
|
||
left: "10%",
|
||
containLabel: true,
|
||
},
|
||
xAxis: {
|
||
show: false,
|
||
},
|
||
yAxis: [
|
||
{
|
||
triggerEvent: true,
|
||
show: true,
|
||
inverse: true,
|
||
data: teamName,
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
interval: 0,
|
||
color: "#666",
|
||
align: "right",
|
||
margin: 20,
|
||
fontSize: 13,
|
||
|
||
rich: {
|
||
idx0: {
|
||
color: "#FB375E",
|
||
backgroundColor: "#FFE8EC",
|
||
borderRadius: 100,
|
||
padding: [5, 8],
|
||
},
|
||
idx1: {
|
||
color: "#FF9023",
|
||
backgroundColor: "#FFEACF",
|
||
borderRadius: 100,
|
||
padding: [5, 8],
|
||
},
|
||
idx2: {
|
||
color: "#01B599",
|
||
backgroundColor: "#E1F7F3",
|
||
borderRadius: 100,
|
||
padding: [5, 8],
|
||
},
|
||
idx: {
|
||
color: "#333",
|
||
borderRadius: 100,
|
||
padding: [5, 8],
|
||
},
|
||
title: {
|
||
width: 165,
|
||
},
|
||
},
|
||
},
|
||
},
|
||
{
|
||
triggerEvent: true,
|
||
show: true,
|
||
inverse: true,
|
||
data: finishQty,
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
interval: 0,
|
||
color: "#666",
|
||
align: "left",
|
||
margin: 20,
|
||
fontSize: 12,
|
||
formatter: function (value) {
|
||
return value + "%";
|
||
},
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "完成率",
|
||
type: "bar",
|
||
yAxisIndex: 0,
|
||
data: finishQty,
|
||
barWidth: 10,
|
||
itemStyle: {
|
||
color: "#1990FF",
|
||
barBorderRadius: 30,
|
||
},
|
||
formatter: "{value}%",
|
||
},
|
||
],
|
||
},
|
||
true
|
||
);
|
||
}
|
||
}
|
||
},
|
||
});
|
||
};
|
||
workTicket2 = () => {
|
||
let startTime = this.state.selectStartTime.format("YYYY-MM-DD 00:00:00");
|
||
let endTime = this.state.selectEndTime.format("YYYY-MM-DD 23:59:59");
|
||
let json = initFilter(
|
||
this.props.login.OrgId,
|
||
"30",
|
||
"NUM",
|
||
"asc",
|
||
"",
|
||
8,
|
||
startTime,
|
||
endTime
|
||
);
|
||
// extendRule(json, "DEPARTMENT_NAME", 1,"选矿部");
|
||
this.props.dispatch({
|
||
type: "app/getDataByPost",
|
||
url: "BI/BIStatiscialAnalysisController/GetDepartmentCompletionSort",
|
||
payload: json,
|
||
onlyData: false,
|
||
onComplete: (data) => {
|
||
if (data && data.IsSuccessful) {
|
||
this.teamTop = data.Data.length;
|
||
let teamName = [];
|
||
let finishQty = [];
|
||
data.Data.forEach((item) => {
|
||
teamName.push(item.TEAM_NAME);
|
||
let finishData = Number(item.CALC * 100).toFixed(2);
|
||
finishQty.push(finishData);
|
||
});
|
||
let departmentCompletions = document.getElementById("workTicket2");
|
||
if (departmentCompletions) {
|
||
let myChart = echarts.init(departmentCompletions);
|
||
myChart.setOption(
|
||
{
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
// 坐标轴指示器，坐标轴触发有效
|
||
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
||
},
|
||
formatter: function (param) {
|
||
return (
|
||
param[0].name +
|
||
"<br>" +
|
||
param[0].marker +
|
||
" " +
|
||
param[0].seriesName +
|
||
"：" +
|
||
param[0].value +
|
||
"%"
|
||
);
|
||
},
|
||
},
|
||
grid: {
|
||
top: "2%",
|
||
bottom: -15,
|
||
right: "10%",
|
||
left: "10%",
|
||
containLabel: true,
|
||
},
|
||
xAxis: {
|
||
show: false,
|
||
},
|
||
yAxis: [
|
||
{
|
||
triggerEvent: true,
|
||
show: true,
|
||
inverse: true,
|
||
data: teamName,
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
interval: 0,
|
||
color: "#666",
|
||
align: "right",
|
||
margin: 20,
|
||
fontSize: 13,
|
||
|
||
rich: {
|
||
idx0: {
|
||
color: "#FB375E",
|
||
backgroundColor: "#FFE8EC",
|
||
borderRadius: 100,
|
||
padding: [5, 8],
|
||
},
|
||
idx1: {
|
||
color: "#FF9023",
|
||
backgroundColor: "#FFEACF",
|
||
borderRadius: 100,
|
||
padding: [5, 8],
|
||
},
|
||
idx2: {
|
||
color: "#01B599",
|
||
backgroundColor: "#E1F7F3",
|
||
borderRadius: 100,
|
||
padding: [5, 8],
|
||
},
|
||
idx: {
|
||
color: "#333",
|
||
borderRadius: 100,
|
||
padding: [5, 8],
|
||
},
|
||
title: {
|
||
width: 165,
|
||
},
|
||
},
|
||
},
|
||
},
|
||
{
|
||
triggerEvent: true,
|
||
show: true,
|
||
inverse: true,
|
||
data: finishQty,
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
interval: 0,
|
||
color: "#666",
|
||
align: "left",
|
||
margin: 20,
|
||
fontSize: 12,
|
||
formatter: function (value) {
|
||
return value + "%";
|
||
},
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "完成率",
|
||
type: "bar",
|
||
yAxisIndex: 0,
|
||
data: finishQty,
|
||
barWidth: 10,
|
||
itemStyle: {
|
||
color: "#1990FF",
|
||
barBorderRadius: 30,
|
||
},
|
||
formatter: "{value}%",
|
||
},
|
||
],
|
||
},
|
||
true
|
||
);
|
||
}
|
||
}
|
||
},
|
||
});
|
||
};
|
||
//关键许可工作票（饼图）
|
||
mainJobPie2 = () => {
|
||
let json = initFilter(this.props.login.OrgId);
|
||
let startTime = this.state.selectStartTime.format("YYYY-MM-DD 00:00:00");
|
||
let endTime = this.state.selectEndTime.format("YYYY-MM-DD 23:59:59");
|
||
extendRule(json, "CREATE_TIME", 6, startTime);
|
||
extendRule(json, "CREATE_TIME", 4, endTime);
|
||
this.props.dispatch({
|
||
type: "app/getDataByPost",
|
||
url: "BI/BIStatiscialAnalysisController/GetLicenseJob",
|
||
payload: json,
|
||
onlyData: false,
|
||
onComplete: (data) => {
|
||
if (data && data.IsSuccessful) {
|
||
let riskLevel = [];
|
||
let showData = [];
|
||
let color = ["#C00000", "#FFC000", "#006600", "#00B0F0", "#00B0C0"];
|
||
let numAll = 0;
|
||
data.Data.forEach((item) => {
|
||
riskLevel.push(item.RISK_LEVEL);
|
||
showData.push({ value: item.COUNT, name: item.RISK_LEVEL });
|
||
numAll = numAll + item.COUNT;
|
||
});
|
||
|
||
let riskLevels = document.getElementById("mainJobPie2");
|
||
if (riskLevels) {
|
||
let myChart = echarts.init(riskLevels);
|
||
myChart.setOption({
|
||
color: ["#c92a2a", "#ffa94d", "#ffe066", "#4285F4", "#fa8a89"],
|
||
title: [
|
||
{
|
||
text: numAll,
|
||
x: "24%",
|
||
y: "40%",
|
||
textStyle: {
|
||
fontSize: 26,
|
||
fontWeight: "normal",
|
||
color: ["#333"],
|
||
},
|
||
},
|
||
{
|
||
text: "关键作业/许可作业",
|
||
x: "20%",
|
||
y: "55%",
|
||
textStyle: {
|
||
color: "#666",
|
||
fontSize: 12,
|
||
},
|
||
},
|
||
],
|
||
tooltip: {
|
||
trigger: "item",
|
||
formatter: "{b}:({d}%)",
|
||
},
|
||
legend: {
|
||
icon: "pin",
|
||
orient: "vartical",
|
||
// x: "right",
|
||
// top: "18%",
|
||
x: "60%",
|
||
y: "center",
|
||
// bottom: "20%",
|
||
data: riskLevel,
|
||
// 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,
|
||
},
|
||
],
|
||
});
|
||
}
|
||
}
|
||
},
|
||
});
|
||
};
|
||
compare = (val1, val2) => {
|
||
return val2.NUM - val1.NUM;
|
||
};
|
||
getStartDate = () => {
|
||
let date = new Date();
|
||
let y = date.getFullYear();
|
||
let m = date.getMonth() + 1;
|
||
let d = date.getDate();
|
||
// 当前日期
|
||
let nowDate =
|
||
y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d);
|
||
let pastDate = moment(nowDate)
|
||
.add(-1, "month")
|
||
.format("YYYY-MM-DD 00:00:00");
|
||
return pastDate;
|
||
};
|
||
|
||
getEndDate = () => {
|
||
let date = new Date();
|
||
let y = date.getFullYear();
|
||
let m = date.getMonth() + 1;
|
||
let d = date.getDate();
|
||
// 当前日期
|
||
let nowDate =
|
||
y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d);
|
||
let pastDate = moment(nowDate).format("YYYY-MM-DD 23:59:59");
|
||
return pastDate;
|
||
};
|
||
startChange = (value) => {
|
||
this.setState({
|
||
selectStartTime: value,
|
||
// startTime:value.format("YYYYMMDD")
|
||
});
|
||
};
|
||
endChange = (value) => {
|
||
this.setState({
|
||
selectEndTime: value,
|
||
// endTime:value.format("YYYYMMDD")
|
||
});
|
||
};
|
||
closeModal = () => {
|
||
// 退出弹窗
|
||
this.clearData();
|
||
};
|
||
clearData = () => {
|
||
let newtmpData = { ...this.state.tmpData };
|
||
newtmpData["data"].id = "";
|
||
newtmpData["data"].homeReload = false;
|
||
newtmpData.formCode = "";
|
||
this.setState({
|
||
visible: false,
|
||
tmpData: newtmpData,
|
||
});
|
||
};
|
||
handleCancel = () => {
|
||
// 退出弹窗
|
||
this.clearData();
|
||
};
|
||
render() {
|
||
const formItemLayout = {
|
||
labelCol: { span: 10 },
|
||
wrapperCol: { span: 14 },
|
||
};
|
||
return (
|
||
<div>
|
||
{/* className='route-home' ,boxShadow:'inset 0 0 10px #ccc' */}
|
||
<div
|
||
style={{
|
||
backgroundColor: "white",
|
||
width: "1200px",
|
||
top: "0",
|
||
bottom: "0",
|
||
left: "0",
|
||
right: "0",
|
||
margin: "auto",
|
||
borderStyle: "solid",
|
||
borderColor: "#ccc",
|
||
borderWidth: "1px",
|
||
}}
|
||
>
|
||
<Modal
|
||
visible={this.state.visible}
|
||
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>
|
||
{/* {this.props.data.name} */}
|
||
<h1
|
||
style={{
|
||
textAlign: "center",
|
||
marginTop: "30px",
|
||
fontWeight: "bold",
|
||
}}
|
||
>
|
||
|
||
{/* {this.state.tableTitle} */}
|
||
作业现场管理统计分析
|
||
</h1>
|
||
<br></br>
|
||
<Row>
|
||
<Col span={7} style={{ marginLeft: "10px" }}></Col>
|
||
<Col span={4} style={{ align: "center" }}>
|
||
<Form.Item label={"查询时间"} {...formItemLayout}>
|
||
<DatePicker
|
||
style={{ width: "150px" }}
|
||
// defaultValue={moment(this.state.startTime, 'YYYY-MM-DD 00:00:00')}
|
||
value={this.state.selectStartTime}
|
||
format="YYYY-MM-DD"
|
||
onChange={this.startChange}
|
||
/>
|
||
</Form.Item>
|
||
</Col>
|
||
|
||
<Col span={4} style={{ align: "center" }}>
|
||
<Form.Item label={"至"} {...formItemLayout}>
|
||
<DatePicker
|
||
style={{ width: "150px" }}
|
||
// defaultValue={moment(this.state.endTime, 'YYYY-MM-DD 23:59:59')}
|
||
value={this.state.selectEndTime}
|
||
format="YYYY-MM-DD"
|
||
onChange={this.endChange}
|
||
/>
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={3} style={{ marginLeft: "50px" }}>
|
||
<Button type="primary" onClick={() => this.loadData()}>
|
||
查询
|
||
</Button>
|
||
</Col>
|
||
</Row>
|
||
<div
|
||
style={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
marginTop: "10px",
|
||
// marginBottom: "20px",
|
||
}}
|
||
>
|
||
<div className={styles.menuPie}>
|
||
<li>
|
||
一般作业活动记录
|
||
<br />
|
||
<div className={styles.dataStyle}>
|
||
{this.state.ordinaryCount}
|
||
</div>
|
||
</li>
|
||
<Divider
|
||
type="vertical"
|
||
style={{ width: "1px", height: "70px", margin: "9px 0px" }}
|
||
/>
|
||
<li>
|
||
许可作业活动记录
|
||
<br />
|
||
<div className={styles.dataStyle1}>
|
||
{this.state.crucialCount}
|
||
</div>
|
||
</li>
|
||
<Divider
|
||
type="vertical"
|
||
style={{ width: "1px", height: "70px", margin: "9px 0px" }}
|
||
/>
|
||
<li>
|
||
班组安全活动
|
||
<br />
|
||
<div className={styles.dataStyle3}>
|
||
{this.state.activityCount}
|
||
</div>
|
||
</li>
|
||
<Divider
|
||
type="vertical"
|
||
style={{ width: "1px", height: "70px", margin: "9px 0px" }}
|
||
/>
|
||
<li>
|
||
岗位当班记录
|
||
<br />
|
||
<div className={styles.dataStyle2}>{this.state.postCount}</div>
|
||
{/* <a href="#" style={{ color: "red" }}> */}
|
||
{/* </a> */}
|
||
</li>
|
||
<Divider
|
||
type="vertical"
|
||
style={{ width: "1px", height: "70px", margin: "9px 0px" }}
|
||
/>
|
||
<li>
|
||
岗位交接班记录
|
||
<br />
|
||
<div className={styles.dataStyle3}>
|
||
{this.state.postChangeCount}
|
||
</div>
|
||
{/* <a href="#" style={{ color: "red" }}> */}
|
||
{/* </a> */}
|
||
</li>
|
||
<Divider
|
||
type="vertical"
|
||
style={{ width: "1px", height: "70px", margin: "9px 0px" }}
|
||
/>
|
||
<li>
|
||
作业任务库
|
||
<br />
|
||
<div className={styles.dataStyle3}>{this.state.taskCount}</div>
|
||
</li>
|
||
</div>
|
||
</div>
|
||
|
||
<hr
|
||
style={{
|
||
border: "1px dashed #ccc",
|
||
marginBottom: "20px",
|
||
marginTop: "20px",
|
||
}}
|
||
></hr>
|
||
<Row
|
||
style={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
display: "flex",
|
||
justifyContent: "space-around",
|
||
alignItems: "center",
|
||
width: "1100px",
|
||
}}
|
||
>
|
||
<Col span={12}>
|
||
<Col span={8}>
|
||
<div
|
||
id="mainJobPie"
|
||
style={{ width: "100%", height: "350px" }}
|
||
></div>
|
||
</Col>
|
||
<Col span={8}>
|
||
<div
|
||
id="mainJobPie1"
|
||
style={{ width: "100%", height: "350px" }}
|
||
></div>
|
||
</Col>
|
||
<Col span={8}>
|
||
<div
|
||
id="mainJobPie3"
|
||
style={{ width: "100%", height: "350px" }}
|
||
></div>
|
||
</Col>
|
||
</Col>
|
||
|
||
<Col span={12}>
|
||
<div
|
||
id="mainJobPie2"
|
||
style={{ width: "100%", height: "350px" }}
|
||
></div>
|
||
</Col>
|
||
</div>
|
||
</Row>
|
||
<hr
|
||
style={{
|
||
border: "1px dashed #ccc",
|
||
marginBottom: "20px",
|
||
marginTop: "20px",
|
||
}}
|
||
></hr>
|
||
<Row
|
||
style={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
display: "flex",
|
||
justifyContent: "space-around",
|
||
alignItems: "center",
|
||
width: "1100px",
|
||
}}
|
||
>
|
||
<Col span={12} style={{ borderRight: "1px solid #e7e6e4" }}>
|
||
<h3 style={{ textAlign: "center", fontWeight: "bold" }}>
|
||
矿山部-班组及时完成率排名(%)
|
||
</h3>
|
||
<div
|
||
id="workTicket2"
|
||
style={{
|
||
height: "350px",
|
||
// marginLeft: "40px",
|
||
// marginRight: "10px",
|
||
backgroundColor: "white",
|
||
}}
|
||
></div>
|
||
</Col>
|
||
<Col span={12}>
|
||
<h3 style={{ textAlign: "center", fontWeight: "bold" }}>
|
||
选矿部-班组及时完成率排名(%)
|
||
</h3>
|
||
<div
|
||
id="workTicket"
|
||
style={{
|
||
height: "350px",
|
||
// marginLeft: "40px",
|
||
// marginRight: "10px",
|
||
backgroundColor: "white",
|
||
}}
|
||
></div>
|
||
</Col>
|
||
</div>
|
||
{/* <Col span={11}>
|
||
<h3 style={{ textAlign: "center", fontWeight: "bold" }}>
|
||
关键作业/许可作业
|
||
</h3>
|
||
<div
|
||
id="mainJobPie2"
|
||
style={{
|
||
width: "560px",
|
||
height: "350px",
|
||
marginLeft: "20px",
|
||
backgroundColor: "white",
|
||
borderStyle: "solid",
|
||
borderColor: "#ccc",
|
||
borderWidth: "1px",
|
||
}}
|
||
></div>
|
||
</Col> */}
|
||
</Row>
|
||
<hr
|
||
style={{
|
||
border: "1px dashed #ccc",
|
||
marginBottom: "20px",
|
||
marginTop: "20px",
|
||
}}
|
||
></hr>
|
||
<Row
|
||
style={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
margin: "10px 0px",
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
display: "flex",
|
||
justifyContent: "space-around",
|
||
alignItems: "center",
|
||
width: "1000px",
|
||
}}
|
||
>
|
||
<Table
|
||
style={{
|
||
width: "100%",
|
||
// marginLeft: "20px",
|
||
textAlign: "center",
|
||
}}
|
||
// scroll={{ y: 400 }}
|
||
dataSource={this.state.retData}
|
||
columns={this.state.columns}
|
||
pagination={false}
|
||
loading={false}
|
||
size="small"
|
||
bordered
|
||
/>
|
||
</div>
|
||
</Row>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
}
|
||
export default connect(({ login, app }) => ({ login, app }))(
|
||
BI009FormRunAnalysis
|
||
);
|