3169 lines
110 KiB
JavaScript
3169 lines
110 KiB
JavaScript
import React, { useState, useEffect, useRef, Component } from 'react'
|
||
import { connect } from 'dva'
|
||
import storage from '../utils/storage'
|
||
import { initFilter, addRuleAndGroups, guid, extendInclude, extendRule, extend } from "../utils/common"
|
||
import './home.less'
|
||
// 组件库
|
||
import { Table, Modal, Row, Col, Icon, Button, Input, DatePicker, Form, Select, notification, Divider, Space, Descriptions,message } from 'antd';
|
||
|
||
import { Chart, Geom, Axis, Tooltip, Legend } from "bizcharts";
|
||
|
||
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 Slider from "react-slick";
|
||
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/flow_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/remind_icon.png';
|
||
import noticeImg from '../assets/home/noticeImg.jpg';
|
||
import scoreImg from '../assets/home/score.jpg';
|
||
import echarts from 'echarts';
|
||
import config from '../config'
|
||
|
||
const Option = Select.Option;
|
||
const RangePicker = DatePicker.RangePicker
|
||
|
||
const formItemLayout = {
|
||
labelCol: { span: 6 },
|
||
wrapperCol: { span: 14 },
|
||
};
|
||
|
||
const openNotification = placement => {
|
||
notification.info({
|
||
duration: null,
|
||
top: 43,
|
||
message: `签名照上传提示：`,
|
||
description:
|
||
'您还没上传自己的签名照片，请在我的资料中尽快上传您的签名照！',
|
||
placement,
|
||
});
|
||
};
|
||
|
||
const openNotificationMobile = placement => {
|
||
notification.info({
|
||
duration: 20,
|
||
message: `友情提示：`,
|
||
description:
|
||
'您当前用的是手机在访问，为有更好体验，建议使用电脑访问！',
|
||
placement,
|
||
});
|
||
};
|
||
|
||
class Home extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
isNaN: false,
|
||
scoreVisible: false,
|
||
scoreTotalVisible: false,
|
||
scoreNaVisible: false,
|
||
standardScore: [],
|
||
standardScoreTemp: [],
|
||
standardScoreNaN: [],
|
||
visible: false,
|
||
xlkDisplay: 'none',
|
||
lyxtDisplay: 'none',
|
||
dcjdDisplay: 'none',
|
||
noticeTitle: '',
|
||
tmpData: {},
|
||
tableKey: "1",
|
||
pagination: {},
|
||
retData: [],
|
||
chartData: [],
|
||
displayStr: null,
|
||
displayNum: 24,
|
||
columnData: [],
|
||
columnFields: [],
|
||
delayData: [],
|
||
Workbench: {
|
||
StockDetail: [],
|
||
ApprovalCount: 0,
|
||
InComingCount: 0,
|
||
OutingCount: 0,
|
||
ProductingCount: 0
|
||
},//工作台模型
|
||
showLoading: false, //待办事项数据刷新提示
|
||
searchVisible: false, //弹窗显示
|
||
searchTodayVisible: false, //弹窗显示
|
||
columns: [
|
||
|
||
],
|
||
searchColumns: [
|
||
|
||
],
|
||
scoreColumns: [],
|
||
scoreTotalColumns:[],
|
||
tableData: [{//工作台四个展示模块
|
||
key: '1',
|
||
bgImg: backlog,
|
||
title: window.navigator.userAgent.indexOf("Windows") < 1 ? '待办' : '待办事项',
|
||
total: '0',
|
||
iconImg: backlog_i,
|
||
iconDisplay: 'block',
|
||
},
|
||
{
|
||
key: '4',
|
||
bgImg: remind,
|
||
title: window.navigator.userAgent.indexOf("Windows") < 1 ? '超时' : '待办超时',
|
||
total: '0',
|
||
iconImg: remind_i,
|
||
iconDisplay: 'none',
|
||
},
|
||
{
|
||
key: '2',
|
||
bgImg: flow,
|
||
title: window.navigator.userAgent.indexOf("Windows") < 1 ? '已办' : '已办事项',
|
||
total: '0',
|
||
iconImg: flow_i,
|
||
iconDisplay: 'none',
|
||
},
|
||
{
|
||
key: '3',
|
||
bgImg: finished,
|
||
title: '今日提醒',
|
||
total: '0',
|
||
iconImg: finished_i,
|
||
iconDisplay: 'none',
|
||
}
|
||
],
|
||
visibleTitle: '',//点击title
|
||
isSearch: false, // 是否搜索
|
||
querySearch: {},//搜索集合
|
||
visibleStartTime: [],
|
||
visibleEndTime: [],
|
||
currentpageIndex: "1",
|
||
departmentName: "",
|
||
isModalVisible: false,
|
||
isModalVisible2: false,
|
||
isModalVisible3: false,
|
||
isModalVisible4: false,
|
||
isModalVisible5: false,
|
||
isModalVisible6: false,
|
||
isModalVisibleRisk: false,
|
||
stardardScoreQty: "0",
|
||
};
|
||
// this.enums = [];
|
||
this.reportType = "";
|
||
this.hiddenTop = 10;
|
||
this.jobTop = 10;
|
||
this.teamTop = 8;
|
||
this.tempTime = moment(new Date()).add(-3, "month").format('YYYY-MM-DD');
|
||
};
|
||
|
||
componentDidMount() {
|
||
if (window.navigator.userAgent.indexOf("Windows") < 1) {
|
||
openNotificationMobile('bottomRight');
|
||
this.state.displayStr = 'none';
|
||
this.state.displayNum = 24;
|
||
//alert('手机');
|
||
} else {
|
||
this.state.displayStr = '';
|
||
this.state.displayNum = 16;
|
||
//alert('PC');
|
||
}
|
||
this.state.columns = [
|
||
{
|
||
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.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.getTeam();
|
||
// this.getEnums();
|
||
// this.targetCheck();//班组作业情况(统计图)
|
||
// this.jobType();//岗位风险类别(统计图)
|
||
// this.mainJobPie();//主要工作分布(饼图)
|
||
// this.delayJobBar();// 超期事务(柱状图图)
|
||
//定时器功能，暂时不开启
|
||
this.timerID = setInterval(() => this.getBaseInfoData(1, this.state.tableKey, 5), 120000);
|
||
this.showModalSign();
|
||
this.getBaseInfoData(1, 1, 5);
|
||
this.setMessageData();
|
||
this.state.scoreNoneColumns = [
|
||
{
|
||
width: "50px",
|
||
title: '生产单元',
|
||
dataIndex: 'Nav_ProductionUnit.NAME',
|
||
key: 'Nav_ProductionUnit.NAME',
|
||
},
|
||
{
|
||
width: "50px",
|
||
title: '一级要素',
|
||
dataIndex: 'Nav_Primary.NAME',
|
||
key: 'Nav_Primary.NAME'
|
||
},
|
||
{
|
||
width: "50px",
|
||
title: '二级要素',
|
||
dataIndex: 'Nav_Second.NAME',
|
||
key: 'Nav_Second.NAME'
|
||
},
|
||
{
|
||
width: "50px",
|
||
title: '考评项目',
|
||
dataIndex: 'EVALUATION_ITEM',
|
||
key: 'EVALUATION_ITEM',
|
||
render: (text, record) => (
|
||
<span>
|
||
{this.props.app.enums?.PEEvaluationItemEnum.enums[record.EVALUATION_ITEM]}
|
||
</span>
|
||
),
|
||
}, {
|
||
// width: "450px",
|
||
title: '考评内容',
|
||
dataIndex: 'CONTENTS',
|
||
key: 'CONTENTS',
|
||
},
|
||
// {
|
||
// with: '100px',
|
||
// title: '评分办法',
|
||
// dataIndex: 'DESCRIPTION',
|
||
// key: 'DESCRIPTION',
|
||
// },
|
||
{
|
||
width: "50px",
|
||
title: '扣分分值',
|
||
dataIndex: 'NON_STANDARDIZED_SCORE',
|
||
key: 'NON_STANDARDIZED_SCORE',
|
||
},
|
||
// {
|
||
// with: '50px',
|
||
// title: '标准分',
|
||
// dataIndex: 'STANDARDIZED_SCORE',
|
||
// key: 'STANDARDIZED_SCORE',
|
||
// },
|
||
// {
|
||
// with: '50px',
|
||
// title: '实得分',
|
||
// dataIndex: 'RESULT_SCORE',
|
||
// key: 'RESULT_SCORE',
|
||
// },
|
||
{
|
||
width: "400px",
|
||
title: '不符合说明',
|
||
dataIndex: 'NON_CONFORMANCE',
|
||
key: 'NON_CONFORMANCE',
|
||
},
|
||
// {
|
||
// with: '50px',
|
||
// title: '评价结论',
|
||
// dataIndex: 'EVALUATION_RESULT',
|
||
// key: 'EVALUATION_RESULT',
|
||
// render: (text, record) => (
|
||
// <span>
|
||
// {this.props.app.enums?.PEEvaluationResultEnum.enums[record.EVALUATION_RESULT]}
|
||
// </span>
|
||
// ),
|
||
// },
|
||
{
|
||
width: "100px",
|
||
title: '评价方法',
|
||
dataIndex: 'Nav_EvaluationMethod',
|
||
key: 'Nav_EvaluationMethod',
|
||
render: (text, record) => (
|
||
<span>{
|
||
record.Nav_EvaluationMethod && record.Nav_EvaluationMethod?.map((item, i) => {
|
||
return <tr><label> {item.Nav_Method?.NAME}</label></tr>
|
||
})
|
||
}</span>
|
||
)
|
||
},
|
||
]
|
||
this.state.scoreColumns = [
|
||
{
|
||
width: "50px",
|
||
title: '生产单元',
|
||
dataIndex: 'Nav_ProductionUnit.NAME',
|
||
key: 'Nav_ProductionUnit.NAME',
|
||
},
|
||
{
|
||
width: "50px",
|
||
title: '一级要素',
|
||
dataIndex: 'Nav_Primary.NAME',
|
||
key: 'Nav_Primary.NAME'
|
||
},
|
||
{
|
||
width: "50px",
|
||
title: '二级要素',
|
||
dataIndex: 'Nav_Second.NAME',
|
||
key: 'Nav_Second.NAME'
|
||
},
|
||
{
|
||
width: "50px",
|
||
title: '三级要素',
|
||
dataIndex: 'Nav_Three.NAME',
|
||
key: 'Nav_Three.NAME',
|
||
}, {
|
||
width: "50px",
|
||
title: '考评项目',
|
||
dataIndex: 'EVALUATION_ITEM',
|
||
key: 'EVALUATION_ITEM',
|
||
render: (text, record) => (
|
||
<span>
|
||
{this.props.app.enums?.PEEvaluationItemEnum.enums[record.EVALUATION_ITEM]}
|
||
</span>
|
||
),
|
||
}, {
|
||
// width: "500px",
|
||
title: '考评内容',
|
||
dataIndex: 'CONTENTS',
|
||
key: 'CONTENTS',
|
||
},
|
||
{
|
||
width: "100px",
|
||
title: '评分办法',
|
||
dataIndex: 'DESCRIPTION',
|
||
key: 'DESCRIPTION',
|
||
}, {
|
||
width: "50px",
|
||
title: '标准分',
|
||
dataIndex: 'STANDARDIZED_SCORE',
|
||
key: 'STANDARDIZED_SCORE',
|
||
},
|
||
{
|
||
width: "50px",
|
||
title: '实得分',
|
||
dataIndex: 'RESULT_SCORE',
|
||
key: 'RESULT_SCORE',
|
||
},
|
||
{
|
||
width: "200px",
|
||
title: '不符合说明',
|
||
dataIndex: 'NON_CONFORMANCE',
|
||
key: 'NON_CONFORMANCE',
|
||
},
|
||
, {
|
||
width: "50px",
|
||
title: '评价结论',
|
||
dataIndex: 'EVALUATION_RESULT',
|
||
key: 'EVALUATION_RESULT',
|
||
render: (text, record) => (
|
||
<span>
|
||
{this.props.app.enums?.PEEvaluationResultEnum.enums[record.EVALUATION_RESULT]}
|
||
</span>
|
||
),
|
||
},
|
||
{
|
||
width: "100px",
|
||
title: '评价方法',
|
||
dataIndex: 'Nav_EvaluationMethod',
|
||
key: 'Nav_EvaluationMethod',
|
||
render: (text, record) => (
|
||
<span>{
|
||
record.Nav_EvaluationMethod && record.Nav_EvaluationMethod?.map((item, i) => {
|
||
return <tr><label> {item.Nav_Method?.NAME}</label></tr>
|
||
})
|
||
}</span>
|
||
)
|
||
},
|
||
],
|
||
this.state.scoreTotalColumns = [
|
||
{
|
||
title: '生产单元',
|
||
dataIndex: 'Nav_ProductionUnit.NAME',
|
||
key: 'Nav_ProductionUnit.NAME',
|
||
},
|
||
{
|
||
title: '标准化得分',
|
||
dataIndex: 'NON_STANDARDIZED_SCORE',
|
||
key: 'NON_STANDARDIZED_SCORE',
|
||
},
|
||
// {
|
||
// with: '100px',
|
||
// title: '一级要素',
|
||
// dataIndex: 'Nav_Primary.NAME',
|
||
// key: 'Nav_Primary.NAME'
|
||
// },
|
||
// {
|
||
// with: '50px',
|
||
// title: '标准分',
|
||
// dataIndex: 'STANDARDIZED_SCORE',
|
||
// key: 'STANDARDIZED_SCORE',
|
||
// },
|
||
// {
|
||
// with: '50px',
|
||
// title: '实得分',
|
||
// dataIndex: 'RESULT_SCORE',
|
||
// key: 'RESULT_SCORE',
|
||
// },
|
||
{
|
||
title: '操作',
|
||
dataIndex: '',
|
||
key: '',
|
||
render: (text, record) => (
|
||
<span>{
|
||
<tr> <Button onClick={() => this.showStandardScoreModal()}>全部</Button>
|
||
<Button onClick={() => this.showStandardScoreModal(1)}>不符合项</Button></tr>
|
||
}</span>
|
||
)
|
||
}
|
||
]
|
||
};
|
||
componentWillUnmount() {
|
||
this.timerID && clearTimeout(this.timerID);
|
||
}
|
||
|
||
showModalSign = () => {
|
||
var userId = storage('lacal').getItem('userid')?.val; //登录后有存储登录信息
|
||
var orgId = storage('lacal').getItem('webOrgId')?.val; //登录后有存储登录信息
|
||
|
||
let json = initFilter(orgId);
|
||
this.props.dispatch({
|
||
type: 'app/getDataByPost',
|
||
payload: json,
|
||
url: 'FM/User/UserSign', //验证是否有签名照
|
||
onComplete: (ret) => { //返回查询结果ret
|
||
if (ret) { //判断是否有记录
|
||
openNotification('topRight');
|
||
}
|
||
}
|
||
});
|
||
};
|
||
|
||
getTeam = () => {
|
||
var userId = storage('lacal').getItem('userid')?.val; //登录后有存储登录信息
|
||
var orgId = storage('lacal').getItem('webOrgId')?.val; //登录后有存储登录信息
|
||
if (orgId == '8f1cf418-8bf3-ea3f-7a6d-fc5d61247008') {
|
||
this.setState({
|
||
lyxtDisplay: 'block',
|
||
xlkDisplay: 'none',
|
||
dcjdDisplay: 'none'
|
||
});
|
||
}
|
||
else if (orgId == '8b3c41aa-51b1-7ce9-1879-248a038c1b5c') {
|
||
this.setState({
|
||
lyxtDisplay: 'none',
|
||
xlkDisplay: 'none',
|
||
dcjdDisplay: 'block'
|
||
});
|
||
}
|
||
else {
|
||
this.setState({
|
||
lyxtDisplay: 'none',
|
||
xlkDisplay: 'block',
|
||
dcjdDisplay: 'none'
|
||
});
|
||
}
|
||
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) {
|
||
this.setState({
|
||
departmentName: ret.Nav_Department.NAME
|
||
});
|
||
// this.hiddenDanger();
|
||
this.targetCheck();//班组作业情况(统计图)
|
||
this.departmentCompletion();//班组作业完成率前八(统计图)
|
||
this.workTicket();//工作票完成率前十(统计图)
|
||
this.hiddenDangerDeal();//隐患整改完成率前十(统计图)
|
||
this.riskType();//岗位风险类别(统计图)
|
||
this.riskLevel();//岗位风险等级(饼图)
|
||
this.getStandardScore(ret.MineType);//获取标准化评分
|
||
}
|
||
}
|
||
});
|
||
};
|
||
|
||
// hiddenDanger wyw
|
||
hiddenDanger = () => {
|
||
const userInfo = storage("lacal").getItem("webUserInfo").val;
|
||
let json = initFilter(this.props.login.OrgId, "", "NUM");
|
||
this.props.dispatch({
|
||
type: "app/getDataByPost",
|
||
url: "BI/BIHome/GetHomeInfo",
|
||
// payload: json,
|
||
onlyData: false,
|
||
onComplete: (data) => {
|
||
|
||
|
||
if (data && data.IsSuccessful) {
|
||
this.hiddenTop = data.Data.length;
|
||
|
||
this.setState({
|
||
dangerList: data.Data,
|
||
});
|
||
this.hiddenDangerDeal();
|
||
// this.hiddenDangerTotal();
|
||
//图标2
|
||
}
|
||
},
|
||
});
|
||
};
|
||
getStandardScore = (MineType) => {
|
||
//标准化得分
|
||
var orgId = storage('lacal').getItem('webOrgId')?.val; //登录后有存储登录信息
|
||
let json = initFilter(orgId, MineType)
|
||
this.props.dispatch({
|
||
type: 'app/getDataByPost',
|
||
payload: json,
|
||
url: 'PE/PESafetyEvaluationRecord/HomeGet',
|
||
onComplete: (ret) => {
|
||
if (ret && ret.Nav_Details) {
|
||
this.setState({
|
||
standardScore: ret,
|
||
stardardScoreQty: ret.STANDARDIZED_RESULT//(ret.RESULT_TOTAL / ret.STAND_TOTAL * 100).toFixed(2)
|
||
});
|
||
}
|
||
else
|
||
{
|
||
this.setState({
|
||
standardScore: [],
|
||
stardardScoreQty: 0
|
||
});
|
||
}
|
||
}
|
||
});
|
||
}
|
||
totalTime = () => {
|
||
var orgId = storage('lacal').getItem('webOrgId')?.val; //登录后有存储登录信息
|
||
let json = initFilter(orgId)
|
||
extendRule(json, 'SET_TYPE', 1, 85)
|
||
this.props.dispatch({
|
||
type: 'app/getDataByPost',
|
||
payload: json,
|
||
url: 'PT/TimeSet/Get',
|
||
onComplete: (ret) => {
|
||
if (ret) {
|
||
this.tempTime = moment(ret.RUNSETTIME).format('YYYY-MM-DD');
|
||
this.setState({
|
||
isModalVisible2: true
|
||
});
|
||
}
|
||
}
|
||
});
|
||
}
|
||
getEnums = () => {
|
||
this.props.dispatch({
|
||
type: 'app/getDataByGet',
|
||
url: 'PF/Extend/GetAllEnum',
|
||
onComplete: (ret) => {
|
||
if (ret) {
|
||
this.enums = ret;
|
||
}
|
||
}
|
||
});
|
||
};
|
||
|
||
//班组作业完成情况统计图
|
||
targetCheck = () => {
|
||
const { departmentName } = this.state;
|
||
const userInfo = storage('lacal').getItem('webUserInfo').val;
|
||
let json = initFilter(this.props.login.OrgId, departmentName, "WAITTING_COUNT", "desc");
|
||
this.props.dispatch({
|
||
type: 'app/getDataByPost',
|
||
url: "BI/BIStatiscialAnalysisController/GetClassCompletionSort",
|
||
payload: json,
|
||
onlyData: false,
|
||
onComplete: (data) => {
|
||
if (data && data.IsSuccessful) {
|
||
// let enumsTemp = this.enums;
|
||
// let formTypeEnums = enumsTemp ?enumsTemp.find(item => item.EnumName === "BIFormType"):[];
|
||
let formName = [];
|
||
let wattingQty = [];
|
||
let finishQty = [];
|
||
let totalQty = [];
|
||
let WattingRate = [];
|
||
let finishRate = [];
|
||
// let result = data.Data.filter(t => t.TEAM_NAME == departmentName);
|
||
if (data.Data) {
|
||
data.Data.forEach(item => {
|
||
// let enums = formTypeEnums && formTypeEnums.options?formTypeEnums.options.find(t => t.value === item.FORM_TYPE):[];
|
||
// formName.push(enums?enums.label:item.FORM_TYPE);
|
||
formName.push(item.FORM_NAME);
|
||
wattingQty.push(item.WAITTING_COUNT);
|
||
finishQty.push(item.FINISH_COUNT);
|
||
totalQty.push(item.TOTAL_COUNT);
|
||
let finishRateTemp = (item.FINISH_COUNT / item.TOTAL_COUNT * 100).toFixed(2);
|
||
let WattingRateTemp = (item.WAITTING_COUNT / item.TOTAL_COUNT * 100).toFixed(2);
|
||
finishRate.push(finishRateTemp);
|
||
WattingRate.push(WattingRateTemp);
|
||
})
|
||
|
||
var teamPre = data.Data.filter(t => t.FORM_NAME == "班前会议");
|
||
if (teamPre.length === 0) {
|
||
formName.push("班前会议");
|
||
finishRate.push(0);
|
||
WattingRate.push(100);
|
||
}
|
||
var teamCur = data.Data.filter(t => t.FORM_NAME == "岗位当班");
|
||
if (teamCur.length === 0) {
|
||
formName.push("岗位当班");
|
||
finishRate.push(0);
|
||
WattingRate.push(100);
|
||
}
|
||
var teamAft = data.Data.filter(t => t.FORM_NAME == "岗位交接班");
|
||
if (teamAft.length === 0) {
|
||
formName.push("岗位交接班");
|
||
finishRate.push(0);
|
||
WattingRate.push(100);
|
||
}
|
||
var teamAct = data.Data.filter(t => t.FORM_NAME == "班组安全活动记录");
|
||
if (teamAct.length === 0) {
|
||
formName.push("班组安全活动记录");
|
||
finishRate.push(0);
|
||
WattingRate.push(100);
|
||
}
|
||
}
|
||
let targetChecks = document.getElementById('targetCheck');
|
||
if (targetChecks) {
|
||
let myChart = echarts.init(targetChecks);
|
||
myChart.setOption({
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||
},
|
||
// formatter:function (params) {
|
||
|
||
// console.log(params); // 当我们想要自定义提示框内容时，可以先将鼠标悬浮的数据打印出来，然后根据需求提取出来即可
|
||
|
||
// let firstParams = params[0];
|
||
// let sndParams = params[1];
|
||
// let endParams = params[2];
|
||
// return firstParams.seriesName +' ' + firstParams.value +'<br>' +sndParams.seriesName +' ' + sndParams.value +'<br>' + endParams.seriesName +' ' + endParams.value;
|
||
// }
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
top: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'value',
|
||
splitLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
color: '#172749'
|
||
}
|
||
},
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
|
||
show: true,
|
||
|
||
interval: 0,
|
||
|
||
formatter: '{value} %', // 给每个数值添加%
|
||
// fontSize: '22'
|
||
},
|
||
},
|
||
legend: {
|
||
data: ['完成率', '未完成'],
|
||
bottom: '35px'
|
||
},
|
||
yAxis: {
|
||
type: 'category',
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
color: '#172749'
|
||
}
|
||
},
|
||
data: formName,
|
||
},
|
||
series: [
|
||
// {
|
||
// name: '总数',
|
||
// type: 'bar',
|
||
// stack: '',
|
||
// label: {
|
||
// show: true,
|
||
// position: 'right',
|
||
// color: '#000',
|
||
// },
|
||
// data: totalQty,
|
||
// barGap: '-100%',
|
||
// z:-1,
|
||
// itemStyle: {
|
||
// normal: {
|
||
// color: 'rgba(128, 128, 128, 0.3)'
|
||
// }
|
||
// },
|
||
// },
|
||
// {
|
||
// name: '已办',
|
||
// type: 'bar',
|
||
// stack: '',
|
||
// label: {
|
||
// show: true,
|
||
// position: 'right',
|
||
// color: '#000',
|
||
// },
|
||
// data: finishQty,
|
||
// barGap: '-100%',
|
||
// z:-1,
|
||
// itemStyle: {
|
||
// normal: {
|
||
// color: '#5B9BD5',
|
||
// }
|
||
// },
|
||
// },
|
||
// {
|
||
// name: '待办',
|
||
// type: 'bar',
|
||
// stack: '',
|
||
// label: {
|
||
// show: true,
|
||
// position: 'right',
|
||
// color: '#000',
|
||
// },
|
||
// data: wattingQty,
|
||
// barGap: '-100%',
|
||
// z:-1,
|
||
// itemStyle: {
|
||
// normal: {
|
||
// color: 'rgba(192, 192, 192)',
|
||
// }
|
||
// },
|
||
// },
|
||
{
|
||
name: '完成率',
|
||
type: 'bar',
|
||
stack: '总量',
|
||
// color: '#ED7D31',//#ED7D31、008000、ED7D31
|
||
data: finishRate.map(item => {
|
||
return {
|
||
value: item,
|
||
label: {
|
||
show: item > 0 ? true : false,
|
||
position: 'inside',
|
||
color: '#fff',
|
||
formatter: '{c}%',
|
||
fontSize: '16'
|
||
},
|
||
// 每一个条目的样式配置
|
||
itemStyle: {
|
||
// barBorderRadius: [0, 34, 34, 0], // 圆角
|
||
// 渐变色 1、指明颜色渐变的方向 2、指明不同百分比之下颜色的值
|
||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||
{ offset: 0, color: "#9999FF" },//rgba(187,162,227,0.6)
|
||
{ offset: 1, color: "#3366CC" },//rgba(102,140,218,0.6)
|
||
]),
|
||
},
|
||
}
|
||
}),//finishRate
|
||
show: false,
|
||
// 每一个条目的样式配置
|
||
itemStyle: {
|
||
// barBorderRadius: [0, 34, 34, 0], // 圆角
|
||
// 渐变色 1、指明颜色渐变的方向 2、指明不同百分比之下颜色的值
|
||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||
{ offset: 0, color: "#9999FF" },//rgba(187,162,227,0.6)
|
||
{ offset: 1, color: "#3366CC" },//rgba(102,140,218,0.6)
|
||
]),
|
||
},
|
||
},
|
||
{
|
||
name: '未完成',
|
||
type: 'bar',
|
||
stack: '总量',
|
||
// label: {
|
||
// show: true,
|
||
// position: 'inside',
|
||
// color: '#000',
|
||
// formatter:'{c}%',
|
||
// fontSize: '16'
|
||
// },
|
||
color: '#CCCCCC',//#5B9BD5、808080 rgba(192, 192, 192)
|
||
data: WattingRate
|
||
},
|
||
|
||
],
|
||
});
|
||
}
|
||
}
|
||
}
|
||
});
|
||
// let data = { "IsSuccessful": true, "Data":
|
||
// [{ "FORM_NAME": "班前会议作业情况", "WATTING_COUNT": 0, "FINISH_COUNT": 20, "TOTAL_COUNT": 20},
|
||
// { "FORM_NAME": "岗位当班作业情况", "WATTING_COUNT": 3, "FINISH_COUNT": 10, "TOTAL_COUNT": 0},
|
||
// {"FORM_NAME": "岗位交接班作业情况", "WATTING_COUNT": 5, "FINISH_COUNT": 8, "TOTAL_COUNT": 0},
|
||
// {"FORM_NAME": "岗位交接2班作业情况", "WATTING_COUNT": 5, "FINISH_COUNT": 10, "TOTAL_COUNT": 0}
|
||
// ], "TotalCount": 0, "ErrorMessage": null }
|
||
}
|
||
//班组作业完成率前八
|
||
departmentCompletion = () => {
|
||
const userInfo = storage('lacal').getItem('webUserInfo').val;
|
||
let json = initFilter(this.props.login.OrgId, "", "NUM", "desc");
|
||
this.props.dispatch({
|
||
type: 'app/getDataByPost',
|
||
url: "FM/DepartmentCompletionSort/OrderPaged",
|
||
payload: json,
|
||
onlyData: false,
|
||
onComplete: (data) => {
|
||
if (data && data.IsSuccessful) {
|
||
this.teamTop = data.Data.length;
|
||
// let enumsTemp = this.enums;
|
||
// let formTypeEnums = enumsTemp ?enumsTemp.find(item => item.EnumName === "BIFormType"):[];
|
||
let teamName = [];
|
||
let finishQty = [];
|
||
let wattingQty = [];
|
||
let totalQty = [];
|
||
let finishRate = [];
|
||
let WattingRate = [];
|
||
data.Data.forEach(item => {
|
||
// let enums = formTypeEnums && formTypeEnums.options?formTypeEnums.options.find(t => t.value === item.FORM_TYPE):[];
|
||
// formName.push(enums?enums.label:item.FORM_TYPE);
|
||
teamName.push(item.TEAM_NAME);
|
||
let totalTemp = item.TEAM_TOTAL_COUNT + item.POST_TOTAL_COUNT + item.HANDOVER_TOTAL_COUNT;
|
||
let finishTemp = item.TEAM_FINISH_COUNT + item.POST_FINISH_COUNT + item.HANDOVER_FINISH_COUNT;
|
||
let waittingTemp = totalTemp - finishTemp;
|
||
finishQty.push(finishTemp);
|
||
totalQty.push(totalTemp);
|
||
wattingQty.push(waittingTemp);
|
||
let finishRateTemp = (finishTemp / totalTemp * 100).toFixed(2);
|
||
let WattingRateTemp = (waittingTemp / totalTemp * 100).toFixed(2);
|
||
finishRate.push(finishRateTemp);
|
||
WattingRate.push(WattingRateTemp);
|
||
})
|
||
let departmentCompletions = document.getElementById('departmentCompletion');
|
||
if (departmentCompletions) {
|
||
let myChart = echarts.init(departmentCompletions);
|
||
myChart.setOption({
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||
},
|
||
// formatter:function (params) {
|
||
|
||
// console.log(params); // 当我们想要自定义提示框内容时，可以先将鼠标悬浮的数据打印出来，然后根据需求提取出来即可
|
||
|
||
// let firstParams = params[0];
|
||
// let sndParams = params[1];
|
||
// let endParams = params[2];
|
||
// return firstParams.seriesName +' ' + firstParams.value +'<br>' +sndParams.seriesName +' ' + sndParams.value +'<br>' + endParams.seriesName +' ' + endParams.value;
|
||
// }
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
top: '10%',
|
||
bottom: '10%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'value',
|
||
splitLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
color: '#172749'
|
||
}
|
||
},
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
|
||
show: true,
|
||
|
||
interval: 0,
|
||
|
||
formatter: '{value} %', // 给每个数值添加%
|
||
// fontSize: '22'
|
||
},
|
||
},
|
||
legend: {
|
||
data: ['完成率', '未完成'],
|
||
bottom: '00px'
|
||
},
|
||
yAxis: {
|
||
type: 'category',
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
color: '#172749'
|
||
}
|
||
},
|
||
data: teamName,
|
||
},
|
||
series: [
|
||
// {
|
||
// name: '总数',
|
||
// type: 'bar',
|
||
// stack: '',
|
||
// label: {
|
||
// show: true,
|
||
// position: 'right',
|
||
// color: '#000',
|
||
// },
|
||
// data: totalQty,
|
||
// barGap: '-100%',
|
||
// z:-1,
|
||
// itemStyle: {
|
||
// normal: {
|
||
// color: 'rgba(128, 128, 128, 0.3)'
|
||
// }
|
||
// },
|
||
// },
|
||
// {
|
||
// name: '已办',
|
||
// type: 'bar',
|
||
// stack: '',
|
||
// label: {
|
||
// show: true,
|
||
// position: 'right',
|
||
// color: '#000',
|
||
// },
|
||
// data: finishQty,
|
||
// barGap: '-100%',
|
||
// z:-1,
|
||
// itemStyle: {
|
||
// normal: {
|
||
// color: '#5B9BD5',
|
||
// }
|
||
// },
|
||
// },
|
||
// {
|
||
// name: '待办',
|
||
// type: 'bar',
|
||
// stack: '',
|
||
// label: {
|
||
// show: true,
|
||
// position: 'right',
|
||
// color: '#000',
|
||
// },
|
||
// data: wattingQty,
|
||
// barGap: '-100%',
|
||
// z:-1,
|
||
// itemStyle: {
|
||
// normal: {
|
||
// color: 'rgba(192, 192, 192)',
|
||
// }
|
||
// },
|
||
// },
|
||
{
|
||
name: '完成率',
|
||
type: 'bar',
|
||
stack: '总量',
|
||
label: {
|
||
show: true,
|
||
position: 'inside',
|
||
color: '#fff',
|
||
formatter: '{c}%',
|
||
fontSize: '12'
|
||
},
|
||
// 每一个条目的样式配置
|
||
itemStyle: {
|
||
// barBorderRadius: [0, 34, 34, 0], // 圆角
|
||
// 渐变色 1、指明颜色渐变的方向 2、指明不同百分比之下颜色的值
|
||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||
{ offset: 0, color: "#01AEF6" },
|
||
{ offset: 1, color: "#9999FF" },//rgba(16,36,95,0.6)
|
||
]),
|
||
},
|
||
// color: '#5B9BD5',//#ED7D31、008000、ED7D31
|
||
data: finishRate,
|
||
show: false
|
||
|
||
},
|
||
{
|
||
name: '未完成',
|
||
type: 'bar',
|
||
stack: '总量',
|
||
// label: {
|
||
// show: true,
|
||
// position: 'inside',
|
||
// color: '#000',
|
||
// formatter:'{c}%',
|
||
// fontSize: '16'
|
||
// },
|
||
color: '#CCCCCC',//#5B9BD5、808080 rgba(192, 192, 192)
|
||
data: WattingRate
|
||
},
|
||
|
||
],
|
||
});
|
||
}
|
||
}
|
||
}
|
||
});
|
||
// let data = { "IsSuccessful": true, "Data":
|
||
// [{ "FORM_NAME": "班前会议作业情况", "WATTING_COUNT": 0, "FINISH_COUNT": 20, "TOTAL_COUNT": 20},
|
||
// { "FORM_NAME": "岗位当班作业情况", "WATTING_COUNT": 3, "FINISH_COUNT": 10, "TOTAL_COUNT": 0},
|
||
// {"FORM_NAME": "岗位交接班作业情况", "WATTING_COUNT": 5, "FINISH_COUNT": 8, "TOTAL_COUNT": 0},
|
||
// {"FORM_NAME": "岗位交接2班作业情况", "WATTING_COUNT": 5, "FINISH_COUNT": 10, "TOTAL_COUNT": 0}
|
||
// ], "TotalCount": 0, "ErrorMessage": null }
|
||
}
|
||
//工作票完成情况统计图
|
||
workTicket = () => {
|
||
const userInfo = storage('lacal').getItem('webUserInfo').val;
|
||
let json = initFilter(this.props.login.OrgId, "", "NUM");
|
||
this.props.dispatch({
|
||
type: 'app/getDataByPost',
|
||
url: "FM/WorkTicketCompletion/OrderPaged",
|
||
payload: json,
|
||
onlyData: false,
|
||
onComplete: (data) => {
|
||
if (data && data.IsSuccessful) {
|
||
this.jobTop = data.Data.length;
|
||
let teamName = [];
|
||
let wattingQty = [];
|
||
let finishQty = [];
|
||
let overFinishQty = [];
|
||
let totalQty = [];
|
||
data.Data.forEach(item => {
|
||
teamName.push(item.TEAM_NAME);
|
||
wattingQty.push(item.WAITTING_COUNT);
|
||
finishQty.push(item.FINISH_COUNT);
|
||
overFinishQty.push(item.OVER_FINISH_COUNT);
|
||
totalQty.push(item.TOTAL_COUNT);
|
||
})
|
||
//图标2
|
||
let workTickets = document.getElementById('workTicket');
|
||
if (workTickets) {
|
||
let myChart = echarts.init(workTickets);
|
||
myChart.setOption({
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||
},
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
top: '10%',
|
||
bottom: '10%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: teamName,
|
||
axisLine: {
|
||
show: false,
|
||
// lineStyle: {
|
||
// color: 'rgba(192, 192, 102)'
|
||
// }
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
color: '#000',
|
||
rotate: 40,
|
||
formatter: function (value) { // 自定义文字超出部分 ...
|
||
if (value.length > 5) {
|
||
return `${value.slice(0, 5)}...`;
|
||
}
|
||
return value;
|
||
}
|
||
}
|
||
},
|
||
legend: {
|
||
data: ['正常已办', '超时已办'],
|
||
bottom: '0px'
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
splitLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
color: '#172749'
|
||
}
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
// lineStyle: {
|
||
// color: 'rgba(192, 192, 102)'
|
||
// }
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: '总数',
|
||
type: 'bar',
|
||
stack: '',
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
color: '#000',
|
||
},
|
||
data: totalQty,
|
||
barGap: '-100%',
|
||
z: -1,
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#CCCCCC'//rgba(128, 128, 128, 0.3)
|
||
}
|
||
},
|
||
},
|
||
{
|
||
name: '正常已办',
|
||
type: 'bar',
|
||
stack: '总量',
|
||
label: {
|
||
show: true,
|
||
position: 'inside',
|
||
color: '#000',
|
||
},
|
||
emphasis: {//折线图的高亮状态。
|
||
focus: "series",//聚焦当前高亮的数据所在的系列的所有图形。
|
||
},
|
||
data: finishQty,
|
||
barGap: '-100%',
|
||
z: -1,
|
||
itemStyle: {
|
||
// 渐变色 1、指明颜色渐变的方向 2、指明不同百分比之下颜色的值
|
||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||
{ offset: 0, color: "#01AEF6" },
|
||
{ offset: 1, color: "rgba(16,36,95,0.6)" },//rgba(16,36,95,0.6) #9999FF
|
||
]),
|
||
// normal: {
|
||
// color: '#5B9BD5',
|
||
// }
|
||
},
|
||
},
|
||
{
|
||
name: '超时已办',
|
||
type: 'bar',
|
||
stack: '总量',
|
||
label: {
|
||
show: true,
|
||
position: 'inside',
|
||
color: '#000',
|
||
},
|
||
emphasis: {//折线图的高亮状态。
|
||
focus: "series",//聚焦当前高亮的数据所在的系列的所有图形。
|
||
},
|
||
data: overFinishQty,
|
||
barGap: '-100%',
|
||
z: -1,
|
||
itemStyle: {
|
||
// 渐变色 1、指明颜色渐变的方向 2、指明不同百分比之下颜色的值
|
||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||
{ offset: 0, color: "#ED7D31" },
|
||
{ offset: 1, color: "#FFFF33" },//rgba(255,255,0,0.6)
|
||
]),
|
||
// normal: {
|
||
// color: '#ED7D31',
|
||
// }
|
||
},
|
||
},
|
||
],
|
||
});
|
||
}
|
||
}
|
||
}
|
||
});
|
||
}
|
||
// //工作票完成情况统计图
|
||
// workTicket = () => {
|
||
// const userInfo = storage('lacal').getItem('webUserInfo').val;
|
||
// let json = initFilter(this.props.login.OrgId, "", "NUM");
|
||
// this.props.dispatch({
|
||
// type: 'app/getDataByPost',
|
||
// url: "FM/WorkTicketCompletion/OrderPaged",
|
||
// payload: json,
|
||
// onlyData: false,
|
||
// onComplete: (data) => {
|
||
// if (data && data.IsSuccessful) {
|
||
// let teamName = [];
|
||
// let wattingQty = [];
|
||
// let finishQty = [];
|
||
// let overFinishQty = [];
|
||
// let totalQty = [];
|
||
// data.Data.forEach(item => {
|
||
// teamName.push(item.TEAM_NAME);
|
||
// wattingQty.push(item.WAITTING_COUNT);
|
||
// finishQty.push(item.FINISH_COUNT);
|
||
// overFinishQty.push(item.OVER_FINISH_COUNT);
|
||
// totalQty.push(item.TOTAL_COUNT);
|
||
// })
|
||
// //图标2
|
||
// let myChart = echarts.init(document.getElementById('workTicket'));
|
||
// // x y 用来设置柱状的大小
|
||
// const offsetX = 12;
|
||
// const offsetY = 6;
|
||
// // 绘制左侧面
|
||
// const CubeLeft = echarts.graphic.extendShape({
|
||
// shape: {
|
||
// x: 0,
|
||
// y: 0
|
||
// },
|
||
// buildPath: function (ctx, shape) {
|
||
// // 会canvas的应该都能看得懂，shape是从custom传入的
|
||
// const xAxisPoint = shape.xAxisPoint;
|
||
// // console.log(shape);
|
||
// const c0 = [shape.x, shape.y];
|
||
// const c1 = [shape.x - offsetX, shape.y - offsetY];
|
||
// const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
|
||
// const c3 = [xAxisPoint[0], xAxisPoint[1]];
|
||
// ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
|
||
// }
|
||
// });
|
||
// // 绘制右侧面
|
||
// const CubeRight = echarts.graphic.extendShape({
|
||
// shape: {
|
||
// x: 0,
|
||
// y: 0
|
||
// },
|
||
// buildPath: function (ctx, shape) {
|
||
// const xAxisPoint = shape.xAxisPoint;
|
||
// const c1 = [shape.x, shape.y];
|
||
// const c2 = [xAxisPoint[0], xAxisPoint[1]];
|
||
// const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
|
||
// const c4 = [shape.x + offsetX, shape.y - offsetY];
|
||
// ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
|
||
// }
|
||
// });
|
||
// // 绘制顶面
|
||
// const CubeTop = echarts.graphic.extendShape({
|
||
// shape: {
|
||
// x: 0,
|
||
// y: 0
|
||
// },
|
||
// buildPath: function (ctx, shape) {
|
||
// const c1 = [shape.x, shape.y];
|
||
// const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
|
||
// const c3 = [shape.x, shape.y - offsetX];
|
||
// const c4 = [shape.x - offsetX, shape.y - offsetY];
|
||
// ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
|
||
// }
|
||
// });
|
||
// // 注册三个面图形
|
||
// echarts.graphic.registerShape('CubeLeft', CubeLeft);
|
||
// echarts.graphic.registerShape('CubeRight', CubeRight);
|
||
// echarts.graphic.registerShape('CubeTop', CubeTop);
|
||
|
||
// myChart.setOption({
|
||
// tooltip: {
|
||
// show: true,
|
||
// trigger: 'axis',
|
||
// axisPointer: {
|
||
// type: 'shadow'
|
||
// },
|
||
// formatter: function (params, ticket, callback) {
|
||
// const item = params[1];
|
||
// return item.name + ' : ' + item.value;
|
||
// }
|
||
// },
|
||
// grid: {
|
||
// top: '12%',
|
||
// left: '3%',
|
||
// right: '5%',
|
||
// bottom: '10%',
|
||
// containLabel: true
|
||
// },
|
||
// xAxis: {
|
||
// type: 'category',
|
||
// data: teamName,
|
||
// axisLine: {
|
||
// show: false,
|
||
// lineStyle: {
|
||
// width: 1,
|
||
// color: '#344761'
|
||
// }
|
||
// },
|
||
// axisTick: {
|
||
// show: false
|
||
// },
|
||
// axisLabel: {
|
||
// color: '#000',
|
||
// rotate: 40,
|
||
// formatter: function (value) { // 自定义文字超出部分 ...
|
||
// if (value.length > 5) {
|
||
// return `${value.slice(0, 5)}...`;
|
||
// }
|
||
// return value;
|
||
// }
|
||
// }
|
||
// },
|
||
// legend: {
|
||
// data: ['正常已办', '超时已办'],
|
||
// bottom: '0px'
|
||
// },
|
||
// yAxis: {
|
||
// type: 'value',
|
||
// name: '',
|
||
// nameTextStyle: {
|
||
// color: '#fff'
|
||
// },
|
||
// axisLine: {
|
||
// show: false,
|
||
// lineStyle: {
|
||
// width: 1,
|
||
// color: '#344761'
|
||
// }
|
||
// },
|
||
// splitLine: {
|
||
// show: false,
|
||
// lineStyle: {
|
||
// color: '#172749'
|
||
// }
|
||
// },
|
||
// axisTick: {
|
||
// show: false
|
||
// },
|
||
// axisLabel: {
|
||
// color: '#000'
|
||
// }
|
||
// },
|
||
// series: [
|
||
// {
|
||
// type: 'custom',
|
||
// renderItem: (params, api) => {
|
||
// const location = api.coord([api.value(0), api.value(1)]);
|
||
// return {
|
||
// type: 'group',
|
||
// children: [
|
||
// {
|
||
// type: 'CubeLeft',
|
||
// barWidth: 20,
|
||
// shape: {
|
||
// api,
|
||
// xValue: api.value(0),
|
||
// yValue: api.value(1),
|
||
// x: location[0],
|
||
// y: location[1],
|
||
// xAxisPoint: api.coord([api.value(0), 0])
|
||
// },
|
||
// style: {
|
||
// fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
// {
|
||
// offset: 0,
|
||
// color: '#01f0ff'
|
||
// },
|
||
// {
|
||
// offset: 1,
|
||
// color: '#005559'
|
||
// }
|
||
// ])
|
||
// }
|
||
// },
|
||
// {
|
||
// type: 'CubeRight',
|
||
// shape: {
|
||
// api,
|
||
// xValue: api.value(0),
|
||
// yValue: api.value(1),
|
||
// x: location[0],
|
||
// y: location[1],
|
||
// xAxisPoint: api.coord([api.value(0), 0])
|
||
// },
|
||
// style: {
|
||
// fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
// {
|
||
// offset: 0,
|
||
// color: '#01f0ff'
|
||
// },
|
||
// {
|
||
// offset: 1,
|
||
// color: '#005559'
|
||
// }
|
||
// ])
|
||
// }
|
||
// },
|
||
// {
|
||
// type: 'CubeTop',
|
||
// shape: {
|
||
// api,
|
||
// xValue: api.value(0),
|
||
// yValue: api.value(1),
|
||
// x: location[0],
|
||
// y: location[1],
|
||
// xAxisPoint: api.coord([api.value(0), 0])
|
||
// },
|
||
// style: {
|
||
// fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
// {
|
||
// offset: 0,
|
||
// color: '#01f0ff'
|
||
// },
|
||
// {
|
||
// offset: 1,
|
||
// color: '#005559'
|
||
// }
|
||
// ])
|
||
// }
|
||
// }
|
||
// ]
|
||
// };
|
||
// },
|
||
// data: totalQty
|
||
// },
|
||
// {
|
||
// type: 'bar',
|
||
// label: {
|
||
// normal: {
|
||
// show: true,
|
||
// position: 'top',
|
||
// fontSize: 16,
|
||
// color: '#000',
|
||
// offset: [0, -5]
|
||
// }
|
||
// },
|
||
// itemStyle: {
|
||
// color: 'transparent'
|
||
// },
|
||
// tooltip: {},
|
||
// data: totalQty
|
||
// }
|
||
// ]
|
||
// });
|
||
// }
|
||
// }
|
||
// });
|
||
// }
|
||
//隐患整改完成情况统计图
|
||
hiddenDangerDeal = () => {
|
||
const userInfo = storage('lacal').getItem('webUserInfo').val;
|
||
let json = initFilter(this.props.login.OrgId, "", "NUM");
|
||
this.props.dispatch({
|
||
type: 'app/getDataByPost',
|
||
url: "FM/HiddenDangerRectification/OrderPaged",
|
||
payload: json,
|
||
onlyData: false,
|
||
onComplete: (data) => {
|
||
if (data && data.IsSuccessful) {
|
||
this.hiddenTop = data.Data.length;
|
||
let teamName = [];
|
||
let wattingQty = [];
|
||
let finishQty = [];
|
||
let overFinishQty = [];
|
||
let totalQty = [];
|
||
let dataList = [];
|
||
data.Data.forEach(item => {
|
||
teamName.push(item.TEAM_NAME);
|
||
wattingQty.push(item.WAITTING_COUNT);
|
||
finishQty.push(item.FINISH_COUNT);
|
||
overFinishQty.push(item.OVER_FINISH_COUNT);
|
||
totalQty.push(item.TOTAL_COUNT);
|
||
dataList.push({ value: item.FINISH_COUNT, name: item.TEAM_NAME })
|
||
})
|
||
//图标2
|
||
let hiddenDangerDeals = document.getElementById('hiddenDangerDeal');
|
||
if (hiddenDangerDeals) {
|
||
let myChart = echarts.init(hiddenDangerDeals);
|
||
myChart.setOption({
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||
},
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
top: '10%',
|
||
bottom: '10%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: teamName,
|
||
axisLine: {
|
||
show: false,
|
||
// lineStyle: {
|
||
// color: 'rgba(192, 192, 102)'
|
||
// }
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
color: '#000',
|
||
rotate: 40,
|
||
formatter: function (value) { // 自定义文字超出部分 ...
|
||
if (value.length > 5) {
|
||
return `${value.slice(0, 5)}...`;
|
||
}
|
||
return value;
|
||
}
|
||
}
|
||
},
|
||
legend: {
|
||
data: ['按时完成', '超时完成'],
|
||
bottom: '0px'
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
splitLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
color: '#172749'
|
||
}
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
// lineStyle: {
|
||
// color: 'rgba(192, 192, 102)'
|
||
// }
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: '隐患总数',
|
||
type: 'bar',
|
||
stack: '',
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
color: '#000',
|
||
},
|
||
data: totalQty,
|
||
barGap: '-100%',
|
||
z: -1,
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#CCCCCC'//rgba(128, 128, 128, 0.3)
|
||
}
|
||
},
|
||
},
|
||
{
|
||
name: '按时完成',
|
||
type: 'bar',
|
||
stack: '总量',
|
||
label: {
|
||
show: true,
|
||
position: 'inside',
|
||
color: '#000',
|
||
},
|
||
emphasis: {//折线图的高亮状态。
|
||
focus: "series",//聚焦当前高亮的数据所在的系列的所有图形。
|
||
},
|
||
data: finishQty,
|
||
barGap: '-100%',
|
||
z: -1,
|
||
itemStyle: {
|
||
// 渐变色 1、指明颜色渐变的方向 2、指明不同百分比之下颜色的值
|
||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||
{ offset: 0, color: "#99FF99" },//rgba(128,255,128)
|
||
{ offset: 1, color: "#333366" },//rgba(16,36,95,0.6)
|
||
]),
|
||
// normal: {
|
||
// color: '#ED7D31',
|
||
// }
|
||
},
|
||
},
|
||
{
|
||
name: '超时完成',
|
||
type: 'bar',
|
||
stack: '总量',
|
||
label: {
|
||
show: true,
|
||
position: 'inside',
|
||
color: '#000',
|
||
},
|
||
emphasis: {//折线图的高亮状态。
|
||
focus: "series",//聚焦当前高亮的数据所在的系列的所有图形。
|
||
},
|
||
data: overFinishQty,
|
||
barGap: '-100%',
|
||
z: -1,
|
||
itemStyle: {
|
||
// 渐变色 1、指明颜色渐变的方向 2、指明不同百分比之下颜色的值
|
||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||
{ offset: 0, color: "#ED7D31" },
|
||
{ offset: 1, color: "#FFFF33" },//rgba(255,255,0,0.6)
|
||
]),
|
||
// normal: {
|
||
// color: '#ED7D31',
|
||
// }
|
||
},
|
||
},
|
||
],
|
||
});
|
||
}
|
||
}
|
||
}
|
||
});
|
||
}
|
||
// //隐患整改完成情况统计图
|
||
// hiddenDangerDeal = () => {
|
||
// const userInfo = storage('lacal').getItem('webUserInfo').val;
|
||
// let json = initFilter(this.props.login.OrgId, "", "NUM");
|
||
// this.props.dispatch({
|
||
// type: 'app/getDataByPost',
|
||
// url: "FM/HiddenDangerRectification/OrderPaged",
|
||
// payload: json,
|
||
// onlyData: false,
|
||
// onComplete: (data) => {
|
||
// if (data && data.IsSuccessful) {
|
||
// let teamName = [];
|
||
// let wattingQty = [];
|
||
// let finishQty = [];
|
||
// let overFinishQty = [];
|
||
// let totalQty = [];
|
||
// let dataList = [];
|
||
// let bdata = [];
|
||
// data.Data.forEach(item => {
|
||
// teamName.push(item.TEAM_NAME);
|
||
// wattingQty.push(item.WAITTING_COUNT);
|
||
// finishQty.push(item.FINISH_COUNT);
|
||
// overFinishQty.push(item.OVER_FINISH_COUNT);
|
||
// totalQty.push(item.TOTAL_COUNT);
|
||
// dataList.push({ value: item.TOTAL_COUNT, name: item.TEAM_NAME})
|
||
// bdata.push(1)
|
||
// })
|
||
// //图标2
|
||
// let myChart = echarts.init(document.getElementById('hiddenDangerDeal'));
|
||
// myChart.setOption({
|
||
|
||
|
||
// });
|
||
// }
|
||
// }
|
||
// });
|
||
// }
|
||
// //隐患整改情况
|
||
// defectTreatment = () => {
|
||
// const userInfo = storage('lacal').getItem('webUserInfo').val;
|
||
// let json = initFilter(this.props.login.OrgId);
|
||
// // this.props.dispatch({
|
||
// // type: 'app/getDataByPost',
|
||
// // url: "FM/MainRpt/GetRNQCount",
|
||
// // payload: json,
|
||
// // onlyData: false,
|
||
// // onComplete: (data) => {
|
||
// let data = {
|
||
// "IsSuccessful": true, "Data": [{ "USER_ID": "37c527b6-86cf-4549-8b2d-8528af5600d1", "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-08-01 00:00:00", "MONTHStr": "八月", "C_COUNT": 1, "D_COUNT": 2, "W_COUNT": 3, "T_COUNT": 4, "P_COUNT": 5, "C_F_COUNT": 6, "D_F_COUNT": 7, "W_F_COUNT": 5, "T_F_COUNT": 2, "P_F_COUNT": 1 },
|
||
// { "USER_ID": "37c527b6-86cf-4549-8b2d-8528af5600d1", "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-09-01 00:00:00", "MONTHStr": "九月", "C_COUNT": 4, "D_COUNT": 5, "W_COUNT": 1, "T_COUNT": 3, "P_COUNT": 1, "C_F_COUNT": 4, "D_F_COUNT": 6, "W_F_COUNT": 3, "T_F_COUNT": 3, "P_F_COUNT": 1 },
|
||
// { "USER_ID": "37c527b6-86cf-4549-8b2d-8528af5600d1", "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-10-01 00:00:00", "MONTHStr": "十月", "C_COUNT": 3, "D_COUNT": 5, "W_COUNT": 2, "T_COUNT": 4, "P_COUNT": 6, "C_F_COUNT": 3, "D_F_COUNT": 1, "W_F_COUNT": 2, "T_F_COUNT": 5, "P_F_COUNT": 2 },
|
||
// { "USER_ID": "37c527b6-86cf-4549-8b2d-8528af5600d1", "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-11-01 00:00:00", "MONTHStr": "十一月", "C_COUNT": 2, "D_COUNT": 6, "W_COUNT": 3, "T_COUNT": 4, "P_COUNT": 1, "C_F_COUNT": 5, "D_F_COUNT": 3, "W_F_COUNT": 1, "T_F_COUNT": 5, "P_F_COUNT": 3 },
|
||
// { "USER_ID": "37c527b6-86cf-4549-8b2d-8528af5600d1", "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-12-01 00:00:00", "MONTHStr": "十二月", "C_COUNT": 1, "D_COUNT": 4, "W_COUNT": 5, "T_COUNT": 3, "P_COUNT": 2, "C_F_COUNT": 1, "D_F_COUNT": 3, "W_F_COUNT": 6, "T_F_COUNT": 4, "P_F_COUNT": 4 },
|
||
// { "USER_ID": "37c527b6-86cf-4549-8b2d-8528af5600d1", "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2022-01-01 00:00:00", "MONTHStr": "一月", "C_COUNT": 5, "D_COUNT": 6, "W_COUNT": 2, "T_COUNT": 1, "P_COUNT": 2, "C_F_COUNT": 4, "D_F_COUNT": 5, "W_F_COUNT": 2, "T_F_COUNT": 6, "P_F_COUNT": 5 }], "TotalCount": 0, "ErrorMessage": null
|
||
// }
|
||
// if (data && data.IsSuccessful) {
|
||
// let month = [];
|
||
// let company = [];
|
||
// let department = [];
|
||
// let workshop = [];
|
||
// let team = [];
|
||
// let personal = [];
|
||
// data.Data.forEach(item => {
|
||
// month.push(item.MONTHStr);
|
||
// company.push(item.C_COUNT);
|
||
// department.push(item.D_COUNT);
|
||
// workshop.push(item.W_COUNT);
|
||
// team.push(item.T_COUNT);
|
||
// personal.push(item.P_COUNT);
|
||
// })
|
||
// let myChart = echarts.init(document.getElementById('defectTreatment'));
|
||
// myChart.setOption({
|
||
// // title: {
|
||
// // text: '折线图堆叠'
|
||
// // },
|
||
// tooltip: {
|
||
// trigger: 'axis'
|
||
// },
|
||
// legend: {
|
||
// // data: ['部门'],
|
||
// data: ['公司', '部门', '车间', '班组', '个人'],
|
||
// bottom: '10px'
|
||
// },
|
||
// grid: {
|
||
// left: '3%',
|
||
// right: '4%',
|
||
// top: '3%',
|
||
// containLabel: true
|
||
// },
|
||
// toolbox: {
|
||
// feature: {
|
||
// // saveAsImage: {}
|
||
// }
|
||
// },
|
||
// xAxis: {
|
||
// type: 'category',
|
||
// boundaryGap: false,
|
||
// data: month
|
||
// },
|
||
// yAxis: {
|
||
// type: 'value',
|
||
// },
|
||
// series: [
|
||
// {
|
||
// name: '公司',
|
||
// type: 'line',
|
||
// color: '#4b9bf3',
|
||
// data: company
|
||
// },
|
||
// {
|
||
// name: '部门',
|
||
// type: 'line',
|
||
// color: '#d61c7e',
|
||
// data: department
|
||
// },
|
||
// {
|
||
// name: '车间',
|
||
// type: 'line',
|
||
// color: '#6052ea',
|
||
// data: workshop
|
||
// }
|
||
// ,
|
||
// {
|
||
// name: '班组',
|
||
// type: 'line',
|
||
// color: '#8cc539',
|
||
// data: team
|
||
// }
|
||
// ,
|
||
// {
|
||
// name: '个人',
|
||
// type: 'line',
|
||
// color: '#FCD149',
|
||
// data: personal
|
||
// }
|
||
// ]
|
||
// })
|
||
// }
|
||
// // }
|
||
// // });
|
||
// }
|
||
|
||
//岗位风险类别
|
||
jobType = () => {
|
||
let jobTypes = document.getElementById('jobType');
|
||
if (jobType) {
|
||
let myChart = echarts.init(jobTypes);
|
||
myChart.setOption({
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{b}:({d}%)'
|
||
},
|
||
legend: {
|
||
bottom: '0px',
|
||
// left: 'center',
|
||
data: ['高空坠落', '火药爆炸', '机械伤害', '物体打击']
|
||
},
|
||
series: [
|
||
|
||
{
|
||
name: '访问来源',
|
||
type: 'pie',
|
||
radius: ['40%', '55%'],
|
||
center: ['50%', '42%'],
|
||
label: {
|
||
formatter: '{b}:({d}%)',
|
||
rich: {
|
||
a: {
|
||
color: '#999',
|
||
lineHeight: 22,
|
||
align: 'center'
|
||
},
|
||
hr: {
|
||
borderColor: '#aaa',
|
||
width: '100%',
|
||
borderWidth: 0.5,
|
||
height: 0
|
||
},
|
||
b: {
|
||
fontSize: 16,
|
||
lineHeight: 33
|
||
},
|
||
per: {
|
||
color: '#eee',
|
||
backgroundColor: '#334455',
|
||
padding: [2, 4],
|
||
borderRadius: 2
|
||
}
|
||
}
|
||
},
|
||
color: ['#CD0505', '#F6861B', '#FCD149', '#60A9F8'],
|
||
data: [
|
||
{ value: 335, name: '高空坠落' },
|
||
{ value: 310, name: '火药爆炸' },
|
||
{ value: 234, name: '机械伤害' },
|
||
{ value: 135, name: '物体打击' },
|
||
]
|
||
}
|
||
]
|
||
})
|
||
}
|
||
}
|
||
//风险类别占比
|
||
riskType = () => {
|
||
let json = initFilter(this.props.login.OrgId);
|
||
this.props.dispatch({
|
||
type: 'app/getDataByPost',
|
||
url: "FM/RiskTypeProportion/OrderPaged",
|
||
payload: json,
|
||
onlyData: false,
|
||
onComplete: (data) => {
|
||
if (data && data.IsSuccessful) {
|
||
let riskType = []
|
||
let color = []
|
||
let showData = []
|
||
data.Data.forEach(item => {
|
||
riskType.push(item.RISK_TYPE)
|
||
color.push(item.COLOR)
|
||
showData.push({ value: item.COUNT, name: item.RISK_TYPE })
|
||
})
|
||
let riskTypes = document.getElementById('riskType');
|
||
if (riskTypes) {
|
||
let myChart = echarts.init(riskTypes);
|
||
myChart.setOption({
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{b}:({d}%)'
|
||
},
|
||
legend: {
|
||
bottom: '0px',
|
||
// left: 'center',
|
||
data: riskType
|
||
},
|
||
series: [
|
||
{
|
||
name: '访问来源',
|
||
type: 'pie',
|
||
radius: ['30%', '45%'],
|
||
center: ['45%', '37%'],
|
||
label: {
|
||
formatter: '{b}:({d}%)',
|
||
rich: {
|
||
a: {
|
||
color: '#999',
|
||
lineHeight: 22,
|
||
align: 'center'
|
||
},
|
||
hr: {
|
||
borderColor: '#aaa',
|
||
width: '100%',
|
||
borderWidth: 0.5,
|
||
height: 0
|
||
},
|
||
b: {
|
||
fontSize: 16,
|
||
lineHeight: 33
|
||
},
|
||
per: {
|
||
color: '#eee',
|
||
backgroundColor: '#334455',
|
||
padding: [2, 4],
|
||
borderRadius: 2
|
||
}
|
||
}
|
||
},
|
||
color: color,
|
||
data: showData,
|
||
}
|
||
]
|
||
})
|
||
}
|
||
}
|
||
}
|
||
});
|
||
}
|
||
//风险等级占比
|
||
riskLevel = () => {
|
||
const userInfo = storage('lacal').getItem('webUserInfo').val;
|
||
let json = initFilter(this.props.login.OrgId);
|
||
this.props.dispatch({
|
||
type: 'app/getDataByPost',
|
||
url: "FM/RiskLevelProportion/OrderPaged",
|
||
payload: json,
|
||
onlyData: false,
|
||
onComplete: (data) => {
|
||
if (data && data.IsSuccessful) {
|
||
let riskLevel = []
|
||
let showData = []
|
||
let color = []
|
||
data.Data.forEach(item => {
|
||
riskLevel.push(item.RISK_LEVEL)
|
||
color.push(item.COLOR)
|
||
showData.push({ value: item.COUNT, name: item.RISK_LEVEL })
|
||
})
|
||
let riskLevels = document.getElementById('riskLevel');
|
||
if (riskLevels) {
|
||
let myChart = echarts.init(riskLevels);
|
||
myChart.setOption({
|
||
tooltip: {
|
||
trigger: 'item',
|
||
//formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||
formatter: '{b} : {c} ({d}%)'
|
||
},
|
||
legend: {
|
||
bottom: '0px',
|
||
data: riskLevel
|
||
},
|
||
series: [
|
||
{
|
||
name: '主要工作分布',
|
||
type: 'pie',
|
||
radius: '55%',
|
||
center: ['50%', '42%'],
|
||
label: {
|
||
formatter: '{b}:({d}%)',
|
||
},
|
||
data: showData,
|
||
color: color,
|
||
emphasis: {
|
||
itemStyle: {
|
||
shadowBlur: 10,
|
||
shadowOffsetX: 0,
|
||
//shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||
}
|
||
}
|
||
}
|
||
]
|
||
});
|
||
}
|
||
}
|
||
}
|
||
});
|
||
}
|
||
//主要工作分布图（饼图）
|
||
mainJobPie = () => {
|
||
const userInfo = storage('lacal').getItem('webUserInfo').val;
|
||
let json = initFilter(this.props.login.OrgId);
|
||
// this.props.dispatch({
|
||
// type: 'app/getDataByPost',
|
||
// url: "FM/MainRpt/GetPersonalWorkCount",
|
||
// payload: json,
|
||
// onlyData: false,
|
||
// onComplete: (data) => {
|
||
let data = { "IsSuccessful": true, "Data": [{ "USER_ID": "37c527b6-86cf-4549-8b2d-8528af5600d1", "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MODULE": "安全检查", "COUNT": 3, "COLOR": "#CD0505" }, { "USER_ID": "37c527b6-86cf-4549-8b2d-8528af5600d1", "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MODULE": "作业现场", "COUNT": 2, "COLOR": "#FCD149" }, { "USER_ID": "37c527b6-86cf-4549-8b2d-8528af5600d1", "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MODULE": "应急管理", "COUNT": 1, "COLOR": "#60A9F8" }], "TotalCount": 0, "ErrorMessage": null }
|
||
if (data && data.IsSuccessful) {
|
||
let moduleData = []
|
||
let showData = []
|
||
let dataColor = []
|
||
data.Data.forEach(item => {
|
||
moduleData.push(item.MODULE)
|
||
showData.push({ value: item.COUNT, name: item.MODULE })
|
||
dataColor.push(item.COLOR)
|
||
})
|
||
let myChart = echarts.init(document.getElementById('mainJobPie'));
|
||
myChart.setOption({
|
||
tooltip: {
|
||
trigger: 'item',
|
||
//formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||
formatter: '{b} : {c} ({d}%)'
|
||
},
|
||
legend: {
|
||
bottom: '10px',
|
||
data: moduleData
|
||
},
|
||
series: [
|
||
{
|
||
name: '主要工作分布',
|
||
type: 'pie',
|
||
radius: '55%',
|
||
center: ['50%', '42%'],
|
||
label: {
|
||
formatter: '{b}:({d}%)',
|
||
},
|
||
data: showData,
|
||
color: dataColor,
|
||
emphasis: {
|
||
itemStyle: {
|
||
shadowBlur: 10,
|
||
shadowOffsetX: 0,
|
||
//shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||
}
|
||
}
|
||
}
|
||
]
|
||
});
|
||
}
|
||
// }
|
||
// });
|
||
}
|
||
//主要工作分布图（柱状图）
|
||
delayJobBar = () => {
|
||
const userInfo = storage('lacal').getItem('webUserInfo').val;
|
||
let json = initFilter(this.props.login.OrgId);
|
||
// this.props.dispatch({
|
||
// type: 'app/getDataByPost',
|
||
// url: "FM/MainRpt/GetPersonalDelayCount",
|
||
// payload: json,
|
||
// onlyData: false,
|
||
// onComplete: (data) => {
|
||
let data = { "IsSuccessful": true, "Data": [{ "USER_ID": "37c527b6-86cf-4549-8b2d-8528af5600d1", "DEPARTMENT_ID": null, "MONTH": "2021-08-01 00:00:00", "MONTHStr": "八月", "COUNT": 1 }, { "USER_ID": "37c527b6-86cf-4549-8b2d-8528af5600d1", "DEPARTMENT_ID": null, "MONTH": "2021-09-01 00:00:00", "MONTHStr": "九月", "COUNT": 2 }, { "USER_ID": "37c527b6-86cf-4549-8b2d-8528af5600d1", "DEPARTMENT_ID": null, "MONTH": "2021-10-01 00:00:00", "MONTHStr": "十月", "COUNT": 3 }, { "USER_ID": "37c527b6-86cf-4549-8b2d-8528af5600d1", "DEPARTMENT_ID": null, "MONTH": "2021-11-01 00:00:00", "MONTHStr": "十一月", "COUNT": 4 }, { "USER_ID": "37c527b6-86cf-4549-8b2d-8528af5600d1", "DEPARTMENT_ID": null, "MONTH": "2021-12-01 00:00:00", "MONTHStr": "十二月", "COUNT": 5 }, { "USER_ID": "37c527b6-86cf-4549-8b2d-8528af5600d1", "DEPARTMENT_ID": null, "MONTH": "2022-01-01 00:00:00", "MONTHStr": "一月", "COUNT": 6 }], "TotalCount": 21, "ErrorMessage": null }
|
||
if (data && data.IsSuccessful) {
|
||
let monthList = []
|
||
let countList = []
|
||
let dataList = []
|
||
data.Data.forEach(item => {
|
||
monthList.push(item.MONTHStr)
|
||
dataList.push({ value: item.COUNT, name: item.MONTHStr })
|
||
countList.push(item.COUNT)
|
||
})
|
||
this.setState({ delayData: dataList });
|
||
}
|
||
}
|
||
// });
|
||
// }
|
||
loadWorkBench = () => {
|
||
const userInfo = storage('lacal').getItem('webUserInfo').val || {};
|
||
if (!userInfo) {
|
||
this.props.dispatch(routerRedux.push('/login'));
|
||
return;
|
||
}
|
||
let json = initQueryFilter(userInfo.ORG_ID, 1, 12, "CREATE_TIME", 1);
|
||
this.props.dispatch({
|
||
type: 'app/getDataByPost',
|
||
url: "BR/PanelInfos/Workbench",
|
||
payload: json,
|
||
onlyData: false,
|
||
onComplete: (data) => {
|
||
if (data && data.IsSuccessful) {
|
||
var tmpCharData = [];
|
||
var tmpColumnData = [];
|
||
var tmpColumnFields = [];
|
||
if (data.Data && data.Data.OrderOnTimes) {
|
||
data.Data.OrderOnTimes.forEach((n) => {
|
||
let dayJson = {
|
||
day: n.Time,
|
||
'交付率': n.Rate,
|
||
'标准': 0.8
|
||
};
|
||
tmpCharData.push(dayJson);
|
||
});
|
||
}
|
||
|
||
if (data.Data && data.Data.OrderTotals) {
|
||
data.Data.OrderTotals.forEach((n) => {
|
||
let dayJson = {
|
||
name: n.Name
|
||
}
|
||
if (n.DayCounts) {
|
||
n.DayCounts.forEach((m) => {
|
||
let day = m.Day.substring(0, 10).replace('-', '').replace('-', '');
|
||
dayJson[day] = m.Count;
|
||
if (tmpColumnFields.indexOf(day) < 0) {
|
||
tmpColumnFields.push(day);
|
||
}
|
||
});
|
||
}
|
||
tmpColumnData.push(dayJson);
|
||
});
|
||
}
|
||
|
||
this.setState({
|
||
Workbench: data.Data ? data.Data : {},
|
||
chartData: tmpCharData,
|
||
columnData: tmpColumnData,
|
||
columnFields: tmpColumnFields
|
||
});
|
||
}
|
||
|
||
}
|
||
});
|
||
}
|
||
//获取数据
|
||
getBaseInfoData = (pagination, key, limit) => {
|
||
const current = pagination ? pagination.current : 1
|
||
const json = initFilter(this.props.login.OrgId, "", "", 1, current)
|
||
//extendRule(json, "NOTICE_STATUS", 1, 0);
|
||
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])
|
||
}
|
||
}
|
||
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: (re) => {
|
||
if (re && re.IsSuccessful && re.Data.newData) {
|
||
this.state.tableData[0].total = re.Data.todoCount;
|
||
this.state.tableData[1].total = re.Data.timeOverCount;
|
||
this.state.tableData[2].total = re.Data.doneCount;
|
||
this.state.tableData[3].total = re.Data.todayNewCount;
|
||
|
||
if (limit != null || limit != undefined) {
|
||
this.setState({
|
||
retData: re.Data.newData,
|
||
})
|
||
} else {
|
||
var pageInfo = {}
|
||
pageInfo.current = current;
|
||
pageInfo.total = Math.ceil(re.Data.TotalCount, 10);
|
||
this.setState({
|
||
retDataAll: re.Data.newData,
|
||
pagination: pageInfo,
|
||
})
|
||
}
|
||
}
|
||
}
|
||
})
|
||
};
|
||
|
||
clearData = () => {
|
||
let newtmpData = { ...this.state.tmpData }
|
||
newtmpData["data"].id = '';
|
||
newtmpData["data"].homeReload = false;
|
||
newtmpData.formCode = '';
|
||
this.setState({
|
||
visible: false,
|
||
tmpData: [],//newtmpData
|
||
})
|
||
}
|
||
clearScoreData = () => {
|
||
this.setState({
|
||
scoreVisible: false,
|
||
// standardScore: [],//newtmpData
|
||
})
|
||
}
|
||
clearScoreTotalData = () => {
|
||
this.setState({
|
||
scoreTotalVisible:false
|
||
// standardScore: [],//newtmpData
|
||
})
|
||
}
|
||
clearScoreNaData = () => {
|
||
this.setState({
|
||
scoreNaVisible:false
|
||
// standardScore: [],//newtmpData
|
||
})
|
||
}
|
||
handleCancel = () => { // 退出弹窗
|
||
this.getBaseInfoData(1, this.state.tableKey, 5);
|
||
this.clearData();
|
||
}
|
||
closeModal = () => { // 退出弹窗
|
||
this.clearData();
|
||
}
|
||
|
||
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({
|
||
visible: true
|
||
}));
|
||
}
|
||
showTodayModal = (dataId, formCode, TaskID, title, taskCode, taskStartdt, taskStatus) => {
|
||
|
||
|
||
const newtmpData = {
|
||
data: {
|
||
id: dataId, TaskID: TaskID, onCancel: this.handleCancel, taskCode: taskCode, tableKey: this.state.tableKey, noticeTitle: title, taskStartdt: taskStartdt, taskStatus: taskStatus,
|
||
homeReload: true
|
||
},
|
||
formCode: 'PF135',
|
||
}
|
||
this.setState({
|
||
noticeTitle: "今日提醒",
|
||
taskCode: taskCode,
|
||
tmpData: newtmpData,
|
||
currActivatedMenu: ''
|
||
}, () => this.setState({
|
||
visible: true
|
||
}));
|
||
}
|
||
|
||
setMessageData = (dataSource) => {
|
||
const data = dataSource ? dataSource : this.props.taskData;
|
||
}
|
||
//点击切换四个统计模块更改列表数据
|
||
totalModuleClick = (item) => {
|
||
const { tableData } = this.state;
|
||
tableData.map((_item, i) => {
|
||
if (_item.key == item.key) {
|
||
if (item.key == '2') {
|
||
this.state.columns = [
|
||
{
|
||
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',
|
||
},]
|
||
} else if (item.key == '3') {
|
||
this.state.columns = [
|
||
{
|
||
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>
|
||
),
|
||
},
|
||
{
|
||
width: "150px",
|
||
title: '提醒时间',
|
||
dataIndex: 'TASK_STARTDT',
|
||
key: 'TASK_STARTDT'
|
||
},
|
||
{
|
||
width: "150px",
|
||
title: '状态',
|
||
dataIndex: 'NOTICE_STATUS',
|
||
key: 'NOTICE_STATUS',
|
||
render: (text, record) => this.ShowStatus(record)
|
||
},]
|
||
} else {
|
||
this.state.columns = [
|
||
{
|
||
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)
|
||
},]
|
||
}
|
||
_item.iconDisplay = 'block';
|
||
this.setState({
|
||
tableKey: item.key
|
||
})
|
||
if (window.navigator.userAgent.indexOf("Windows") < 1) {
|
||
this.getBaseInfoData(1, item.key, 10);
|
||
} else {
|
||
this.getBaseInfoData(1, item.key, 5);
|
||
}
|
||
} else {
|
||
_item.iconDisplay = 'none';
|
||
}
|
||
});
|
||
};
|
||
// 双击切换四个统计模块获取全部信息
|
||
totalMoonDoubleClick = (item) => {
|
||
const { tableData } = this.state;
|
||
tableData.map((_item) => {
|
||
if (_item.key == item.key) {
|
||
if (item.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 (item.key === '3') {
|
||
this.state.searchColumns = [
|
||
{
|
||
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>
|
||
),
|
||
},
|
||
{
|
||
width: "200px",
|
||
title: '提醒时间',
|
||
dataIndex: 'TASK_STARTDT',
|
||
key: 'TASK_STARTDT'
|
||
},
|
||
{
|
||
width: "150px",
|
||
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: item.key
|
||
}, () => {
|
||
this.getBaseInfoData(1, item.key);
|
||
})
|
||
}
|
||
// 开始时间
|
||
selectChange = (value) => {
|
||
const { querySearch } = this.state
|
||
querySearch.searchStatus = value;
|
||
this.setState({
|
||
querySearch
|
||
}, () => {
|
||
})
|
||
}
|
||
// 开始时间
|
||
startChange = (dates, dateStr) => {
|
||
const { querySearch } = this.state
|
||
if (dates.length != 2) {
|
||
// querySearch['startTime1'] = ''
|
||
// querySearch['startTime2'] = ''
|
||
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
|
||
// visibleStartTime: dates
|
||
}, () => {
|
||
})
|
||
}
|
||
// 结束时间
|
||
endChange = (dates, dateStr) => {
|
||
const { querySearch } = this.state
|
||
if (dates.length != 2) {
|
||
// querySearch['endTime1'] = ''
|
||
// querySearch['endTime2'] = ''
|
||
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 })
|
||
}
|
||
// 搜索
|
||
handleSearch = (item) => {
|
||
this.getBaseInfoData(1, item, null);
|
||
}
|
||
// input输入
|
||
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: {} })
|
||
}
|
||
}
|
||
closeModal = () => {
|
||
this.setState({
|
||
searchVisible: false,
|
||
searchTodayVisible: false,
|
||
})
|
||
}
|
||
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 ('已办');
|
||
}
|
||
}
|
||
handleSelect = (e) => {
|
||
const { querySearch } = this.state
|
||
if (e != undefined) {
|
||
querySearch.status = e
|
||
} else {
|
||
querySearch.status = ''
|
||
}
|
||
this.setState({ querySearch })
|
||
}
|
||
showDescriptionModal = (value) => {
|
||
if (value === "1") {
|
||
this.setState({
|
||
isModalVisible: true
|
||
});
|
||
}
|
||
else if (value === "2") {
|
||
this.totalTime();
|
||
}
|
||
else if (value === "3") {
|
||
this.setState({
|
||
isModalVisible3: true
|
||
});
|
||
}
|
||
else if (value === "4") {
|
||
this.setState({
|
||
isModalVisible4: true
|
||
});
|
||
}
|
||
else if (value === "5") {
|
||
this.setState({
|
||
isModalVisible5: true
|
||
});
|
||
}
|
||
else if (value === "6") {
|
||
this.setState({
|
||
isModalVisible6: true
|
||
});
|
||
}
|
||
else if (value === "risk") {
|
||
this.setState({
|
||
isModalVisibleRisk: true
|
||
});
|
||
}
|
||
};
|
||
closeDescriptionModal = () => {
|
||
this.setState({
|
||
isModalVisible: false,
|
||
isModalVisible2: false,
|
||
isModalVisible3: false,
|
||
isModalVisible4: false,
|
||
isModalVisible5: false,
|
||
isModalVisible6: false,
|
||
isModalVisibleRisk: false,
|
||
});
|
||
};
|
||
showStandardScoreTotalModal = () => {
|
||
// const newtmpData = {
|
||
// data: {
|
||
// tempData:this.state.standardScore , onCancel: this.handleCancel, noticeTitle: "标准化得分明细",
|
||
// homeReload: true
|
||
// },
|
||
// formCode: 'PF136',
|
||
// }
|
||
this.setState({
|
||
scoreTotalVisible: true
|
||
});
|
||
}
|
||
showStandardScoreModal = (item) => {
|
||
// const newtmpData = {
|
||
// data: {
|
||
// tempData:this.state.standardScore , onCancel: this.handleCancel, noticeTitle: "标准化得分明细",
|
||
// homeReload: true
|
||
// },
|
||
// formCode: 'PF136',
|
||
// }
|
||
let temp = false;
|
||
if (this.state.standardScore && this.state.standardScore.Nav_Details) {
|
||
this.state.standardScore.Nav_Details.forEach(t => {
|
||
if (t.THREE_ELEMENTS_ID) {
|
||
temp = true;
|
||
}
|
||
});
|
||
}
|
||
if(item)
|
||
{
|
||
let dataTemp=this.state.standardScore.Nav_Details.filter(t=>t.NON_CONFORMANCE !=null && t.NON_CONFORMANCE !="")
|
||
let tmpData = dataTemp.map((item, i) => {
|
||
item['ROW_NO'] = i + 1;
|
||
return item;
|
||
});
|
||
let aa={"CONTENTS":"合计扣分：","NON_STANDARDIZED_SCORE":this.state.standardScore.NON_STANDARDIZED_SCORE}
|
||
tmpData.push(aa)
|
||
this.setState({
|
||
isNaN: temp,
|
||
standardScoreNaN:tmpData,
|
||
scoreNaVisible: true
|
||
});
|
||
}
|
||
else
|
||
{
|
||
let dataTemp=this.state.standardScore.Nav_Details;
|
||
let tmpData = dataTemp.map((item, i) => {
|
||
item['ROW_NO'] = i + 1;
|
||
return item;
|
||
});
|
||
let aa={"DESCRIPTION":"合计：","STANDARDIZED_SCORE":this.state.standardScore.STAND_TOTAL,"RESULT_SCORE":this.state.standardScore.RESULT_TOTAL,"NON_CONFORMANCE":"标准化得分："+this.state.standardScore.STANDARDIZED_RESULT}
|
||
tmpData.push(aa)
|
||
this.setState({
|
||
isNaN: temp,
|
||
standardScoreTemp:tmpData,
|
||
scoreVisible: true
|
||
});
|
||
}
|
||
}
|
||
render() {
|
||
const { tableData } = this.state;
|
||
const thingsData = this.state.delayData;
|
||
const settings = {
|
||
dots: true,
|
||
autoplay: false,
|
||
infinite: true,
|
||
speed: 500,
|
||
slidesToShow: 1,
|
||
slidesToScroll: 1,
|
||
className: styles.slideHeight,
|
||
fade: true,
|
||
};
|
||
const empty = (
|
||
<Col md={6} sm={24}></Col>
|
||
);
|
||
return (
|
||
<div className='route-home' style={{ backgroundColor: '#ecf4f6', padding: '0 10px', minHeight: '735px' }}>
|
||
<div style={{ display: 'inline-block' }}>
|
||
<Modal
|
||
visible={this.state.scoreTotalVisible}
|
||
title="标准化得分汇总"
|
||
maskClosable={false}
|
||
onCancel={this.clearScoreTotalData}
|
||
footer={null}
|
||
className='antd-modal-fullscreen'
|
||
closeModal={this.clearScoreTotalData}
|
||
>
|
||
{/* <div>
|
||
<Button type='primary' style={{marginRight: "10px",marginTop:"10px",marginBottom:"10px"}} onClick={()=>this.getStandardScore(30)}>露天矿</Button>
|
||
<Button type='primary' style={{marginRight: "10px",marginTop:"10px",marginBottom:"10px"}} onClick={()=>this.getStandardScore(10)}>选矿厂</Button>
|
||
<Button type='primary' style={{marginRight: "10px",marginTop:"10px",marginBottom:"10px"}} onClick={()=>this.getStandardScore(20)}>尾矿库</Button>
|
||
</div> */}
|
||
<Table
|
||
dataSource={this.state.standardScore.Nav_IngoreDetails}
|
||
columns={this.state.scoreTotalColumns}
|
||
pagination={false}
|
||
bordered
|
||
loading={this.state.showLoading}
|
||
size="small"
|
||
/>
|
||
</Modal>
|
||
<Modal
|
||
visible={this.state.scoreVisible}
|
||
title="标准化得分明细"
|
||
maskClosable={false}
|
||
onCancel={this.clearScoreData}
|
||
footer={null}
|
||
className='antd-modal-fullscreen'
|
||
closeModal={this.clearScoreData}
|
||
>
|
||
<Table
|
||
dataSource={this.state.standardScoreTemp}
|
||
columns={this.state.scoreColumns}
|
||
pagination={false}
|
||
bordered
|
||
loading={this.state.showLoading}
|
||
size="small"
|
||
/>
|
||
</Modal>
|
||
<Modal
|
||
visible={this.state.scoreNaVisible}
|
||
title="不符合项明细"
|
||
maskClosable={false}
|
||
onCancel={this.clearScoreNaData}
|
||
footer={null}
|
||
className='antd-modal-fullscreen'
|
||
closeModal={this.clearScoreNaData}
|
||
>
|
||
<Table
|
||
dataSource={this.state.standardScoreNaN}
|
||
columns={this.state.scoreNoneColumns}
|
||
pagination={false}
|
||
bordered
|
||
loading={this.state.showLoading}
|
||
size="small"
|
||
/>
|
||
</Modal>
|
||
<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>
|
||
<Modal title="详细说明" visible={this.state.isModalVisible}
|
||
closeModal={this.closeDescriptionModal}
|
||
onCancel={this.closeDescriptionModal}
|
||
onOk={this.closeDescriptionModal}
|
||
footer={null}
|
||
style={{ width: '100%', height: '100%', top: "300px" }}
|
||
>
|
||
<p>计算规则：完成率 = 已办数 / 总数 * 100%</p>
|
||
</Modal>
|
||
<Modal title="详细说明" visible={this.state.isModalVisible2}
|
||
closeModal={this.closeDescriptionModal}
|
||
onCancel={this.closeDescriptionModal}
|
||
onOk={this.closeDescriptionModal}
|
||
footer={null}
|
||
style={{ width: '100%', height: '100%', top: "300px" }}
|
||
>
|
||
<p>计算规则：完成率 = (班前会议已办数 + 岗位当班已办数 + 岗位交接已办数) / (班前会议总数 + 岗位当班总数 + 岗位交接总数) * 100%</p>
|
||
<p>统计时间：{this.tempTime} ~ 至今</p>
|
||
</Modal>
|
||
<Modal title="详细说明" visible={this.state.isModalVisible3}
|
||
closeModal={this.closeDescriptionModal}
|
||
onCancel={this.closeDescriptionModal}
|
||
onOk={this.closeDescriptionModal}
|
||
footer={null}
|
||
style={{ width: '100%', height: '100%', top: "300px" }}
|
||
>
|
||
<p>计算规则：待办 = 总数 - 正常已办 - 超时已办</p>
|
||
</Modal>
|
||
<Modal title="详细说明" visible={this.state.isModalVisible4}
|
||
closeModal={this.closeDescriptionModal}
|
||
onCancel={this.closeDescriptionModal}
|
||
onOk={this.closeDescriptionModal}
|
||
footer={null}
|
||
style={{ width: '100%', height: '100%', top: "300px" }}
|
||
>
|
||
<p>公司、部门、车间、班组、个人，每个月的隐患整改数量</p>
|
||
</Modal>
|
||
<Modal title="详细说明" visible={this.state.isModalVisible5}
|
||
closeModal={this.closeDescriptionModal}
|
||
onCancel={this.closeDescriptionModal}
|
||
onOk={this.closeDescriptionModal}
|
||
footer={null}
|
||
style={{ width: '100%', height: '100%', top: "300px" }}
|
||
>
|
||
<p>计算规则：占比率= 当前风险类别数量 / 风险类别总数 * 100%</p>
|
||
</Modal>
|
||
<Modal title="详细说明" visible={this.state.isModalVisible6}
|
||
closeModal={this.closeDescriptionModal}
|
||
onCancel={this.closeDescriptionModal}
|
||
onOk={this.closeDescriptionModal}
|
||
footer={null}
|
||
style={{ width: '100%', height: '100%', top: "300px" }}
|
||
>
|
||
<p>计算规则：占比率 = 当前风险等级数量 / 风险等级总数 * 100%</p>
|
||
</Modal>
|
||
|
||
<Modal title="详细说明" visible={this.state.isModalVisibleRisk}
|
||
closeModal={this.closeDescriptionModal}
|
||
onCancel={this.closeDescriptionModal}
|
||
onOk={this.closeDescriptionModal}
|
||
footer={null}
|
||
style={{ width: '100%', height: '100%', top: "300px" }}
|
||
>
|
||
<p>计算规则：待办 = 隐患总数 - 按时完成 - 超时完成</p>
|
||
</Modal>
|
||
|
||
</div>
|
||
<Row gutter={12}>
|
||
{/* 五个图标模块 */}
|
||
<Col span={this.state.displayNum}>
|
||
<Row gutter={10} >
|
||
<Col span={4} style={{ display: this.state.displayStr }}>
|
||
<div style={{ background: `url(${scoreImg}) 0 0 no-repeat`, height: '176px', backgroundSize: '100% 100%', borderRadius: '0px 0px 16px 16px' }}>
|
||
<div className='score-title-style'>标准化得分</div>
|
||
<div style={{ textAlign: 'center' }}>
|
||
<div className='score-num-style' style={{ width: 'auto', fontSize: '30pt', display: 'inline-block', marginTop: '45px' }} onClick={() => this.showStandardScoreTotalModal()}>{this.state.stardardScoreQty}</div>
|
||
{/* {this.state.stardardScoreQty} */}
|
||
{/* <div style={{ display: 'inline-block', fontSize: '30pt' }}><Icon type="arrow-up" className='score-icon-style' style={{ fontSize: '20pt', marginTop: '-27px' }} /></div> */}
|
||
</div>
|
||
</div>
|
||
</Col>
|
||
<Col span={this.state.displayStr ? 24 : 20}>
|
||
<Col span={24}>
|
||
<div className='slide-style' >
|
||
<p style={{ display: this.state.xlkDisplay }} className='slide-text-style'>安全第一、综合治理、控制风险、科学发展。</p>
|
||
<p style={{ display: this.state.lyxtDisplay }} className='slide-text-style'>以人为本、关注健康、依法治企、安全发展。</p>
|
||
<p style={{ display: this.state.dcjdDisplay }} className='slide-text-style'>安全第一，预防为主，科学管理，持续改进。</p>
|
||
</div>
|
||
</Col>
|
||
<Row gutter={12} >
|
||
{
|
||
tableData.map((item, key) => {
|
||
return (
|
||
<Col span={6} key={key}>
|
||
<div
|
||
onClick={() => this.totalModuleClick(item)}
|
||
onDoubleClick={() => this.totalMoonDoubleClick(item)}
|
||
style={{ padding: '0px', background: `url(${item.bgImg}) 0 0 no-repeat`, height: '126px', backgroundSize: '100% 100%', borderRadius: '10px', cursor: 'pointer' }}
|
||
>
|
||
<div className='backlog-title-style'>{item.title}</div>
|
||
<div className={item.total > 9999 ? 'backlog-style4' : 'backlog-style'}>{item.total}</div>
|
||
<img src={item.iconImg} className='backlog-icon-style' style={{ display: item.iconDisplay }} />
|
||
</div>
|
||
</Col>
|
||
)
|
||
})
|
||
}
|
||
</Row>
|
||
</Col>
|
||
</Row>
|
||
</Col>
|
||
{/* 通知 */}
|
||
<Col span={8} rowSpan={2} style={{ display: this.state.displayStr, height: '100%' }}>
|
||
{/* <div style={{ padding: '0px', background: `url(${noticeImg}) 0 0 no-repeat`, height: '176px', backgroundSize: '100% 100%', borderRadius: '10px' }}>
|
||
<div className='notice-title-style'>通知 <span>更多</span></div>
|
||
<div className='notice-content-style'>
|
||
<div><span>1</span>工程整改截止时间20200622</div>
|
||
<div><span>2</span>工程整改截止时间20200622</div>
|
||
<div><span>3</span>工程整改截止时间20200622</div>
|
||
</div>
|
||
</div> */}
|
||
<div className="dashboard-div-style" style={{ borderRadius: '10px', height: '100%', backgroundColor: 'white', padding: '0px', height: '176px' }}>
|
||
<div className="statistical-title-style"><div className="badge-style"></div>{this.state.departmentName}作业完成情况
|
||
<span style={{ fontSize: '14px', float: 'right', marginRight: "16px", marginTop: "4px" }}>
|
||
<a onClick={() => this.showDescriptionModal("1")}>详细说明</a>
|
||
</span>
|
||
</div>
|
||
<div id="targetCheck" style={{ width: '100%', height: '176px' }}></div>
|
||
</div>
|
||
</Col>
|
||
</Row>
|
||
<Row gutter={12} style={{ marginTop: "14px", height: 'calc((100% - 250px) / 2)', minHeight: '260px' }}>
|
||
{/* 列表 */}
|
||
<Col span={this.state.displayNum} style={{ height: '100%' }}>
|
||
<div className="dashboard-div-style" style={{ boxShadow: '0px 0px 10px rgba(0,0,0,.15)', overflow: 'auto' }}>
|
||
<Table
|
||
rowKey={e => e.ID}
|
||
dataSource={this.state.retData}
|
||
columns={this.state.columns}
|
||
pagination={false}
|
||
loading={this.state.showLoading}
|
||
size="small"
|
||
padding="100px"
|
||
/>
|
||
</div>
|
||
</Col>
|
||
<Modal
|
||
visible={this.state.searchVisible}
|
||
zIndex={999}
|
||
title={this.state.visibleTitle}
|
||
maskClosable={false}
|
||
onCancel={this.closeModal}
|
||
footer={false}
|
||
className='antd-modal-fullscreen'
|
||
>
|
||
<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}
|
||
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
|
||
dataSource={this.state.retDataAll}
|
||
columns={this.state.searchColumns}
|
||
pagination={this.state.pagination}
|
||
onChange={(num) => this.getBaseInfoData(num, this.state.currentpageIndex, null)}
|
||
loading={this.state.showLoading}
|
||
size="small"
|
||
/>
|
||
</div>
|
||
</Modal>
|
||
<Modal
|
||
visible={this.state.searchTodayVisible}
|
||
title={this.state.visibleTitle}
|
||
maskClosable={false}
|
||
zIndex={999}
|
||
onCancel={this.closeModal}
|
||
footer={false}
|
||
className='antd-modal-fullscreen'
|
||
>
|
||
<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="1">已办</Option>
|
||
</Select>
|
||
</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
|
||
dataSource={this.state.retDataAll}
|
||
columns={this.state.searchColumns}
|
||
pagination={this.state.pagination}
|
||
onChange={(num) => this.getBaseInfoData(num, this.state.currentpageIndex, null)}
|
||
loading={this.state.showLoading}
|
||
size="small"
|
||
/>
|
||
</div>
|
||
</Modal>
|
||
{/* 岗位风险类别 */}
|
||
<Col span={8} style={{ display: this.state.displayStr, height: '100%' }} >
|
||
<div className="dashboard-div-style" style={{ borderRadius: '10px', height: '100%', backgroundColor: 'white', boxShadow: '0px 0px 10px rgba(0,0,0,.15)' }}>
|
||
<div className="statistical-title-style"><div className="badge-style"></div>班组作业完成率TOP {this.teamTop}
|
||
<span style={{ fontSize: '14px', float: 'right', marginRight: "16px", marginTop: "4px" }}>
|
||
<a onClick={() => this.showDescriptionModal("2")}>详细说明</a>
|
||
</span>
|
||
</div>
|
||
<br />
|
||
<div id="departmentCompletion" style={{ width: '100%', height: '70%' }}></div>
|
||
</div>
|
||
</Col>
|
||
</Row>
|
||
|
||
<Row gutter={12} style={{ display: this.state.displayStr, marginTop: "12px", height: 'calc((100% - 250px) / 2)', minHeight: '260px' }}>
|
||
{/* 工作票完成情况前十 */}{/* 隐患整改完成情况排名前十 */}
|
||
<Col span={8} style={{ display: this.state.displayStr, height: '100%' }} >
|
||
<div className="dashboard-div-style" style={{ borderRadius: '10px', height: '100%', backgroundColor: 'white', boxShadow: '0px 0px 10px rgba(0,0,0,.15)' }}>
|
||
<div className="statistical-title-style"><div className="badge-style"></div>工作票完成数TOP {this.jobTop}
|
||
<span style={{ fontSize: '14px', float: 'right', marginRight: "16px", marginTop: "4px" }}>
|
||
<a onClick={() => this.showDescriptionModal("3")}>详细说明</a>
|
||
</span>
|
||
</div>
|
||
<br />
|
||
<div id="workTicket" style={{ width: '100%', height: '70%' }}></div>
|
||
{/* <div className="statistical-title-style"><div className="badge-style"></div>隐患整改情况
|
||
<span style={{ fontSize: '14px', float: 'right', marginRight: "16px", marginTop: "4px" }}>
|
||
<a onClick={()=>this.showDescriptionModal("4")}>详细说明</a>
|
||
</span>
|
||
</div>
|
||
<br />
|
||
<div id="defectTreatment" style={{ width: '100%', height: '230px' }}></div> */}
|
||
</div>
|
||
</Col>
|
||
|
||
{/* 工作票完成情况前十 */}
|
||
{/* <Col span={8} style={{ height: '100%' }}>
|
||
<div className="dashboard-div-style" style={{ borderRadius: '10px', height: '100%', backgroundColor: 'white', boxShadow: '0px 0px 10px rgba(0,0,0,.15)' }}>
|
||
<div className="statistical-title-style"><div className="badge-style"></div>工作票完成数排名前十</div>
|
||
<div id="workTicket" style={{ width: '100%', height: '230px' }}></div>
|
||
</div>
|
||
</Col> */}
|
||
{/* 隐患整改情况 */}
|
||
<Col span={8} style={{ display: this.state.displayStr, height: '100%' }} >
|
||
<div className="dashboard-div-style" style={{ borderRadius: '10px', height: '100%', backgroundColor: 'white', boxShadow: '0px 0px 10px rgba(0,0,0,.15)' }}>
|
||
<div className="statistical-title-style"><div className="badge-style"></div>隐患整改完成情况TOP {this.hiddenTop}
|
||
<span style={{ fontSize: '14px', float: 'right', marginRight: "16px", marginTop: "4px" }}>
|
||
<a onClick={() => this.showDescriptionModal("risk")}>详细说明</a>
|
||
</span>
|
||
</div>
|
||
<br />
|
||
<div id="hiddenDangerDeal" style={{ width: '100%', height: '70%' }}></div>
|
||
{/* <div className="statistical-title-style"><div className="badge-style"></div>隐患整改情况
|
||
<span style={{ fontSize: '14px', float: 'right', marginRight: "16px", marginTop: "4px" }}>
|
||
<a onClick={()=>this.showDescriptionModal("4")}>详细说明</a>
|
||
</span>
|
||
</div>
|
||
<br />
|
||
<div id="defectTreatment" style={{ width: '100%', height: '230px' }}></div> */}
|
||
</div>
|
||
</Col>
|
||
{/* 风险类别占比、风险等级占比 */}
|
||
<Col span={8} style={{ display: this.state.displayStr, height: '100%' }}>
|
||
<div className="dashboard-div-style" style={{ boxShadow: '0px 0px 10px rgba(0,0,0,.15)' }}>
|
||
<Slider {...settings}>
|
||
<div className="dashboard-div-style" style={{ boxShadow: '0px 0px 10px rgba(0,0,0,.15)' }}>
|
||
<div className="statistical-title-style"><div className="badge-style"></div>风险类别占比
|
||
<span style={{ fontSize: '14px', float: 'right', marginRight: "16px", marginTop: "4px" }}>
|
||
<a onClick={() => this.showDescriptionModal("5")}>详细说明</a>
|
||
</span>
|
||
</div>
|
||
<div id="riskType" style={{ width: '100%', height: 'calc((100% - 250px) / 2)', minHeight: '230px' }}></div>
|
||
</div>
|
||
|
||
<div className="dashboard-div-style" style={{ boxShadow: '0px 0px 10px rgba(0,0,0,.15)' }}>
|
||
<div className="statistical-title-style"><div className="badge-style"></div>风险等级占比
|
||
<span style={{ fontSize: '14px', float: 'right', marginRight: "16px", marginTop: "4px" }}>
|
||
<a onClick={() => this.showDescriptionModal("6")}>详细说明</a>
|
||
</span>
|
||
</div>
|
||
<div id="riskLevel" style={{ width: '100%', height: 'calc((100% - 250px) / 2)', minHeight: '230px' }}></div>
|
||
{/* <Chart height={'230'} width={'100%'} data={thingsData} forceFit>
|
||
<Axis name="name"></Axis>
|
||
<Axis name="value"></Axis>
|
||
<Tooltip crosshairs={{ type: 'y' }}></Tooltip>
|
||
<Legend />
|
||
<Geom type="interval" position="name*value" color='#3398DB' tooltip={['name*value', (name, value) => {
|
||
return {
|
||
name: '超期数量',
|
||
value: value
|
||
};
|
||
}]}
|
||
></Geom>
|
||
</Chart> */}
|
||
</div>
|
||
</Slider>
|
||
</div>
|
||
</Col>
|
||
</Row>
|
||
</div>
|
||
)
|
||
}
|
||
}
|
||
export default connect(({ login, app }) => ({ login, app }))(Home)
|