From e6474c3f7eadf886f13937dfa7a7867d4526d017 Mon Sep 17 00:00:00 2001 From: yunkexin <760754045@qq.com> Date: Thu, 11 Apr 2024 15:37:16 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BB=BB=E5=8A=A1=E5=AE=8C=E6=88=90=E6=83=85?= =?UTF-8?q?=E5=86=B5=E7=BB=9F=E8=AE=A1=E5=88=86=E6=9E=90=EF=BC=88=E4=B8=AA?= =?UTF-8?q?=E4=BA=BA=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CustomPages/BI/BI011FormRunAnalysis.js | 981 ++++++++++++------ 1 file changed, 656 insertions(+), 325 deletions(-) diff --git a/src/components/CustomPages/BI/BI011FormRunAnalysis.js b/src/components/CustomPages/BI/BI011FormRunAnalysis.js index c9ca390..f76b7c2 100644 --- a/src/components/CustomPages/BI/BI011FormRunAnalysis.js +++ b/src/components/CustomPages/BI/BI011FormRunAnalysis.js @@ -1,193 +1,224 @@ -import React from 'react' -import { connect } from 'dva' -import { initFilter, extendRule, extendOrder } from "../../../utils/common" -import { ChartPieShow, ChartBarShow } from "../../../utils/commonEcharsShow" -import { Table, Button,Input, Row, Col,Modal ,Icon,Progress} from 'antd'; -import echarts from 'echarts'; -import styles from '../HI/StepForm.css'; -import moment from 'moment' -import { T } from 'antd/lib/upload/utils'; -import FormPage from '../../FormPage' +import React from "react"; +import { connect } from "dva"; +import { initFilter, extendRule, extendOrder } from "../../../utils/common"; +import { ChartPieShow, ChartBarShow } from "../../../utils/commonEcharsShow"; +import { + Table, + Button, + Input, + Row, + Col, + Modal, + 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 BI011FormRunAnalysis extends React.Component { - constructor(props) { super(props); this.state = { visible: false, - loading:false, - noticeTitle: '', + loading: false, + noticeTitle: "", tmpData: {}, tableKey: "1", - startTime: moment(new Date().setDate(1)).subtract(5,'months').format("YYYY-MM-DD"), - endTime:moment(new Date()).format("YYYY-MM-DD"), - timeType: 5, - totalCount:0, - finishCount:0, - overtimeCount:0, - unfinishCount:0, - dtotalCount:0, - dfinishCount:0, - dovertimeCount:0, - dunfinishCount:0, - inputText:this.props.login.user.NAME, - drate:'0%', - dnormalRate:'0%', - weekColor:'black', - monthColor:'orange', - threeMonthColor:'black', - sixMonthColor:'black', - yearColor:'black', - retData:[], - groupData:[], - detailData:[], - newData:[], - detailDataH:[], - displayHr:'none', - displaydetail:'none', - columns: [ - { - width: "30px", - title: '月份', - dataIndex: 'MONTHStr', - key: 'MONTHStr', - // render: (text, record) => ( - // - // this.showEditModal(record.DEPARTMENT_ID,record.DEPARTMENT_NAME)}>{record.DEPARTMENT_NAME} - // - // ), - }, - { - width: "30px", - title: '任务数', - dataIndex: 'TOTAL_QTY', - key: 'TOTAL_QTY' - },{ - width: "30px", - title: '完成率', - dataIndex: 'FINISH_RATE', - key: 'FINISH_RATE', - render: (text, record) => ( - - - // - // this.showEditModal(record.DEPARTMENT_ID,record.DEPARTMENT_NAME)}>{record.DEPARTMENT_NAME} - // - ), - }, - { - width: "30px", - title: '及时完成率', - dataIndex: 'NORMAL_FINISH_RATE', - key: 'NORMAL_FINISH_RATE', - render: (text, record) => ( - - // - // this.showEditModal(record.DEPARTMENT_ID,record.DEPARTMENT_NAME)}>{record.DEPARTMENT_NAME} - // - ), - } - ], - detailColumns: [ - // { - // width: "55px", - // title: '序号', - // dataIndex: 'NUM', - // key: 'NUM', - // }, - { - width: "100px", - title: '模块名称', - dataIndex: 'MOUDLE_NAME', - key: 'MOUDLE_NAME', - // render: (text, record) => ( - // - // this.showFormModal(record.MOUDLE_NAME)}>{record.MOUDLE_NAME} - // - // ), - }, - { - 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: "50px", - title: '完成率', - dataIndex: 'FINISH_RATE', - key: 'FINISH_RATE', - }, - { - width: "70px", - title: '及时完成率', - dataIndex: 'NORMAL_FINISH_RATE', - key: 'NORMAL_FINISH_RATE', - render: (text, record) => ( - - {record.NORMAL_FINISH_RATE}{"%"} - - ), - } + startTime: moment(new Date().setDate(1)) + .subtract(5, "months") + .format("YYYY-MM-DD"), + endTime: moment(new Date()).format("YYYY-MM-DD"), + timeType: 5, + totalCount: 0, + finishCount: 0, + overtimeCount: 0, + unfinishCount: 0, + dtotalCount: 0, + dfinishCount: 0, + dovertimeCount: 0, + dunfinishCount: 0, + inputText: this.props.login.user.NAME, + drate: "0%", + dnormalRate: "0%", + weekColor: "black", + monthColor: "orange", + threeMonthColor: "black", + sixMonthColor: "black", + yearColor: "black", + retData: [], + groupData: [], + detailData: [], + newData: [], + detailDataH: [], + displayHr: "none", + displaydetail: "none", + columns: [ + { + width: "30px", + title: "月份", + dataIndex: "MONTHStr", + key: "MONTHStr", + // render: (text, record) => ( + // + // this.showEditModal(record.DEPARTMENT_ID,record.DEPARTMENT_NAME)}>{record.DEPARTMENT_NAME} + // + // ), + }, + { + width: "30px", + title: "任务数", + dataIndex: "TOTAL_QTY", + key: "TOTAL_QTY", + }, + { + width: "30px", + title: "完成率", + dataIndex: "FINISH_RATE", + key: "FINISH_RATE", + render: (text, record) => ( + + // + // this.showEditModal(record.DEPARTMENT_ID,record.DEPARTMENT_NAME)}>{record.DEPARTMENT_NAME} + // + ), + }, + { + width: "30px", + title: "及时完成率", + dataIndex: "NORMAL_FINISH_RATE", + key: "NORMAL_FINISH_RATE", + render: (text, record) => ( + + // + // this.showEditModal(record.DEPARTMENT_ID,record.DEPARTMENT_NAME)}>{record.DEPARTMENT_NAME} + // + ), + }, ], - }; - }; + detailColumns: [ + // { + // width: "55px", + // title: '序号', + // dataIndex: 'NUM', + // key: 'NUM', + // }, + { + width: "100px", + title: "模块名称", + dataIndex: "MOUDLE_NAME", + key: "MOUDLE_NAME", + // render: (text, record) => ( + // + // this.showFormModal(record.MOUDLE_NAME)}>{record.MOUDLE_NAME} + // + // ), + }, + { + 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: "50px", + title: "完成率", + dataIndex: "FINISH_RATE", + key: "FINISH_RATE", + }, + { + width: "70px", + title: "及时完成率", + dataIndex: "NORMAL_FINISH_RATE", + key: "NORMAL_FINISH_RATE", + render: (text, record) => ( + + {record.NORMAL_FINISH_RATE} + {"%"} + + ), + }, + ], + }; + } componentDidMount() { - this.loadData() - }; + this.loadData(); + } showEditModal = (departmentId, departmentName) => { const newtmpData = { data: { - id: departmentId, name: departmentName, onCancel: this.handleCancel, tableKey: this.state.tableKey, - homeReload: true + 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=(mouldName)=>{ + }; + this.setState( + { + id: departmentId, + name: departmentName, + noticeTitle: departmentName + "安全生产标准化运行情况", + tmpData: newtmpData, + currActivatedMenu: "", + }, + () => + this.setState({ + visible: true, + }) + ); + }; + showFormModal = (mouldName) => { const newtmpData = { data: { - name: mouldName, onCancel: this.handleCancel, tableKey: this.state.tableKey, - homeReload: true + name: mouldName, + onCancel: this.handleCancel, + tableKey: this.state.tableKey, + homeReload: true, }, formCode: "BI008_RUNANALYSIS", - } - this.setState({ - name: mouldName, - noticeTitle: mouldName+"安全生产标准化运行情况", - tmpData: newtmpData, - currActivatedMenu: '' - }, () => this.setState({ - visible: true - })); - } + }; + this.setState( + { + name: mouldName, + noticeTitle: mouldName + "安全生产标准化运行情况", + tmpData: newtmpData, + currActivatedMenu: "", + }, + () => + this.setState({ + visible: true, + }) + ); + }; // showEditModal = (dataId, formCode, TaskID, title, taskCode) => { // const newtmpData = { @@ -206,13 +237,13 @@ class BI011FormRunAnalysis extends React.Component { // visible: true // })); // } - + //加载数据赋值 loadData = () => { // this.ksRun(); this.getMould(this.props.login.user.NAME); // this.getDepartment(); - } + }; //矿山 ksRun = (data) => { // let data = { @@ -233,197 +264,501 @@ class BI011FormRunAnalysis extends React.Component { let month = []; let company = []; let department = []; - data.forEach(item => { + let color = [ + "#0090FF", + "#36CE9E", + "#FFC005", + "#FF515A", + "#8B5CFF", + "#00CA69", + ]; + const hexToRgba = (hex, opacity) => { + let rgbaColor = ""; + let reg = /^#[\da-f]{6}$/i; + if (reg.test(hex)) { + rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt( + "0x" + hex.slice(3, 5) + )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`; + } + return rgbaColor; + }; + data.forEach((item) => { month.push(item.MONTHStr); company.push(item.FINISH_RATE); department.push(item.NORMAL_FINISH_RATE); - }) - let myChart = echarts.init(document.getElementById('ksRun')); + }); + let myChart = echarts.init(document.getElementById("ksRun")); myChart.setOption({ + color: color, title: { - text: "任务及时完成率（近6个月）", - left: 'center', - top:'2%' - }, - tooltip: { - trigger: 'axis', - formatter: function (params) { - let temp='' - params.forEach(t=>{ - temp=temp+t.marker + t.seriesName +":"+t.value+"%"+'
'; - - }) - return temp; - } + text: "任务及时完成率（近6个月）", + left: "center", + top: "2%", }, - legend: { - // data: ['部门'], - data: ['完成率', '及时完成率'], - bottom: '5px' + tooltip: { + trigger: "axis", + formatter: function (params) { + let temp = ""; + params.forEach((t) => { + temp = + temp + t.marker + t.seriesName + ":" + t.value + "%" + "
"; + }); + return temp; + }, }, grid: { - left: '3%', - right: '4%', - top: '12%', - containLabel: true + left: "10%", + right: "5%", }, - toolbox: { - feature: { - // saveAsImage: {} - } + legend: { + left: "center", + align: "left", + bottom: "2%", + textStyle: { + color: "#000", + }, + itemWidth: 10, + itemHeight: 10, }, xAxis: { - type: 'category', - boundaryGap: false, + type: "category", data: month, - axisLine: { - show: false, - // lineStyle: { - // color: 'rgba(192, 192, 102)' - // } - }, - axisTick: { - show: false - }, + boundaryGap: false, axisLabel: { - color: '#000', - rotate: 40, - formatter: function (value) { // 自定义文字超出部分 ... - if (value.length > 10) { - return `${value.slice(0, 10)}...`; - } - return value; - } - } + textStyle: { + color: "#333", + }, + }, + axisLine: { + lineStyle: { + color: "#D9D9D9", + }, + }, }, yAxis: { - axisLabel: { - formatter: function (val) { - return (val)+ '%'; - } + type: "value", + axisLabel: { + textStyle: { + color: "#666", + }, + }, + nameTextStyle: { + color: "#666", + fontSize: 12, + lineHeight: 40, + }, + splitLine: { + lineStyle: { + type: "dashed", + color: "#E9E9E9", + }, + }, + axisLine: { + show: false, + }, + axisTick: { + show: false, }, }, series: [ { - name: '完成率', - type: 'line', - color: '#4b9bf3', + name: "完成率", + type: "line", data: company, - smooth: true + smooth: true, + symbolSize: 8, + zlevel: 3, + lineStyle: { + normal: { + color: color[0], + shadowBlur: 3, + shadowColor: hexToRgba(color[0], 0.5), + shadowOffsetY: 8, + }, + }, + areaStyle: { + normal: { + color: new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: hexToRgba(color[0], 0.3), + }, + { + offset: 1, + color: hexToRgba(color[0], 0.1), + }, + ], + false + ), + shadowColor: hexToRgba(color[0], 0.1), + shadowBlur: 10, + }, + }, }, { - name: '及时完成率', - type: 'line', - color: '#FCD149', + name: "及时完成率", + type: "line", data: department, - smooth: true + smooth: true, + symbolSize: 8, + zlevel: 3, + lineStyle: { + normal: { + color: color[1], + shadowBlur: 3, + shadowColor: hexToRgba(color[1], 0.5), + shadowOffsetY: 8, + }, + }, + areaStyle: { + normal: { + color: new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: hexToRgba(color[1], 0.3), + }, + { + offset: 1, + color: hexToRgba(color[1], 0.1), + }, + ], + false + ), + shadowColor: hexToRgba(color[1], 0.1), + shadowBlur: 10, + }, + }, }, - ] - }) + ], + }); } - } - getMould=(inputText)=>{ - this.setState({loading:true - }) - var orgId = this.props.login ? this.props.login.OrgId : ''; - let json = initFilter(orgId,inputText,"","","",this.state.startTime,this.state.endTime); - this.props.dispatch({ - type: 'app/getDataByPost', - payload: json, - url: 'BI/BIStatiscialAnalysisController/GetPersonAnalyze', - onComplete: (ret) => { - if (ret) { - this.setState({ - retData:ret.groupData, - totalCount:ret.TotalCount, - finishCount:ret.doneCount, - overtimeCount:ret.timeOverCount, - unfinishCount:ret.unfinishCount, - dovertimeCount:ret.timeOverWaitCount, - loading:false - }) - this.ksRun(ret.groupDataLine); - } - else - { - this.setState({ - retData:[], - totalCount:0, - finishCount:0, - overtimeCount:0, - unfinishCount:0, - dovertimeCount:0, - loading:false - }) - } - } - }) - } - - closeModal = () => { // 退出弹窗 + }; + getMould = (inputText) => { + this.setState({ loading: true }); + var orgId = this.props.login ? this.props.login.OrgId : ""; + let json = initFilter( + orgId, + inputText, + "", + "", + "", + this.state.startTime, + this.state.endTime + ); + this.props.dispatch({ + type: "app/getDataByPost", + payload: json, + url: "BI/BIStatiscialAnalysisController/GetPersonAnalyze", + onComplete: (ret) => { + if (ret) { + this.setState({ + retData: ret.groupData, + totalCount: ret.TotalCount, + finishCount: ret.doneCount, + overtimeCount: ret.timeOverCount, + unfinishCount: ret.unfinishCount, + dovertimeCount: ret.timeOverWaitCount, + loading: false, + }); + this.ksRun(ret.groupDataLine); + } else { + this.setState({ + retData: [], + totalCount: 0, + finishCount: 0, + overtimeCount: 0, + unfinishCount: 0, + dovertimeCount: 0, + loading: false, + }); + } + }, + }); + }; + + closeModal = () => { + // 退出弹窗 this.clearData(); - } + }; clearData = () => { - let newtmpData = { ...this.state.tmpData } - newtmpData["data"].id = ''; + let newtmpData = { ...this.state.tmpData }; + newtmpData["data"].id = ""; newtmpData["data"].homeReload = false; - newtmpData.formCode = ''; + newtmpData.formCode = ""; this.setState({ visible: false, tmpData: newtmpData, - }) - } - handleCancel = () => { // 退出弹窗 + }); + }; + handleCancel = () => { + // 退出弹窗 this.clearData(); - } + }; handleSearch = (evt) => { - const { value } = evt.target - this.setState({ inputText: value ? value : this.props.login.user.NAME }) - } + const { value } = evt.target; + this.setState({ inputText: value ? value : this.props.login.user.NAME }); + }; render() { - const { startTime, endTime,finishCount,overtimeCount,totalCount,unfinishCount,inputText, - weekColor,monthColor,threeMonthColor,sixMonthColor,yearColor,dovertimeCount - } = this.state; - let allFinishRate=(totalCount ===0||totalCount==undefined) ?0:((finishCount+overtimeCount)/totalCount * 100).toFixed(1); - let finishRate=(totalCount ===0||totalCount==undefined)?0:(finishCount/totalCount * 100).toFixed(1); - return
- {/* className='route-home' ,boxShadow:'inset 0 0 10px #ccc' */} -
- + {/* className='route-home' ,boxShadow:'inset 0 0 10px #ccc' */} +
+ -

任务完成情况统计分析(个人)

- - 姓名：{inputText} - 统计区间：{startTime} - {endTime} - - - -
-

- +

+ 任务完成情况统计分析(个人) +

+ + + 姓名： + {inputText} + + + 统计区间： + {startTime} - {endTime} + + + + + + + + {/*
*/} +

+
+
+
  • + 总任务数 +
    +
    + {totalCount ? totalCount : 0} +
    +
    • + +
  • + 待办数 +
    +
    + {unfinishCount ? unfinishCount : 0} +
    +
    • + +
  • + 超时待办数 +
    +
    + {dovertimeCount ? dovertimeCount : 0} +
    +
    • + +
  • + 已办事项 +
    +
    + {finishCount + overtimeCount + ? finishCount + overtimeCount + : 0} +
    + {/* */} + {/* */} +
    • + +
  • + 完成率 +
    +
    + {allFinishRate ? allFinishRate : 0}% +
    + {/* */} + {/* */} +
    • + +
  • + 及时完成率 +
    +
    + {finishRate ? finishRate : 0}% +
    +
    • +
    +
    + {/* - - {/*
    */} - - - {/*

    部门统计分析

    */} - */} + {/*
    */} + + + {/*

    任务及时完成率（近12个月）

    */} +
    + {/*

    */} + {/* + * 统计时间：{moment(new Date()).format("YYYY-MM-DD HH:mm:ss")} +

    +

    +     */} + + + + + {/*

    部门统计分析

    */} +
    - - {/*

    任务及时完成率（近12个月）

    */} -
    -

    - * 统计时间：{moment(new Date()).format("YYYY-MM-DD HH:mm:ss")}



     - - - + + - + ); } } -export default connect(({ login, app,loading }) => ({ login, app ,loading}))(BI011FormRunAnalysis) +export default connect(({ login, app, loading }) => ({ login, app, loading }))( + BI011FormRunAnalysis +);