From e1e128096d20d5afe9f9ddeefc5e5cd719cefd34 Mon Sep 17 00:00:00 2001 From: yunkexin <760754045@qq.com> Date: Tue, 16 Apr 2024 09:07:50 +0800 Subject: [PATCH] =?UTF-8?q?=E9=A3=8E=E9=99=A9=E7=AE=A1=E7=90=86=E7=BB=9F?= =?UTF-8?q?=E8=AE=A1=E5=88=86=E6=9E=90=E3=80=81=E5=AE=89=E5=85=A8=E6=95=99?= =?UTF-8?q?=E8=82=B2=E4=B8=8E=E5=9F=B9=E8=AE=AD=E7=BB=9F=E8=AE=A1=E6=8A=A5?= =?UTF-8?q?=E8=A1=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CustomPages/BI/BI009RiskAnalysis.js | 866 +++++++++++++----- .../CustomPages/BI/BI011TrainSafeAnalysis.js | 394 ++++++-- 2 files changed, 934 insertions(+), 326 deletions(-) diff --git a/src/components/CustomPages/BI/BI009RiskAnalysis.js b/src/components/CustomPages/BI/BI009RiskAnalysis.js index ef77aed..e389c59 100644 --- a/src/components/CustomPages/BI/BI009RiskAnalysis.js +++ b/src/components/CustomPages/BI/BI009RiskAnalysis.js @@ -1,9 +1,18 @@ -import React, { useState, useEffect, useRef, Component } from 'react' -import { connect } from 'dva' -import { initFilter, addRuleAndGroups, guid, extendInclude, extendRule, extendOrder, extend, initQueryFilter } from "../../../utils/common" -import { Table, Row, Col, Button, Select, DatePicker, message } from 'antd'; -import echarts from 'echarts'; -import moment from 'moment' +import React, { useState, useEffect, useRef, Component } from "react"; +import { connect } from "dva"; +import { + initFilter, + addRuleAndGroups, + guid, + extendInclude, + extendRule, + extendOrder, + extend, + initQueryFilter, +} from "../../../utils/common"; +import { Table, Row, Col, Button, Select, DatePicker, message } from "antd"; +import echarts from "echarts"; +import moment from "moment"; class BI008RiskAnalysis extends React.Component { constructor(props) { super(props); @@ -19,44 +28,44 @@ class BI008RiskAnalysis extends React.Component { LEVEL4TOTAL: 0, HAZARDTOTALCOUNT: 0, RISKTOTALCOUNT: 0, - MEASURESTOTALCOUNT: 0 + MEASURESTOTALCOUNT: 0, }; - }; + } componentDidMount() { this.state.columns1 = [ { - title: '部门', - dataIndex: 'NAME', + title: "部门", + dataIndex: "NAME", }, { - title: '一级风险', - dataIndex: 'LEVEL1', + title: "一级风险", + dataIndex: "LEVEL1", }, { - title: '二级风险', - dataIndex: 'LEVEL2', + title: "二级风险", + dataIndex: "LEVEL2", }, { - title: '三级风险', - dataIndex: 'LEVEL3', + title: "三级风险", + dataIndex: "LEVEL3", }, { - title: '四级风险', - dataIndex: 'LEVEL4', + title: "四级风险", + dataIndex: "LEVEL4", }, - ] + ]; const json = initFilter(this.props.login.OrgId); this.getBaseInfoData(); - }; + } //获取数据 getBaseInfoData = () => { - const json2 = initFilter(this.props.login.OrgId) + const json2 = initFilter(this.props.login.OrgId); extendOrder(json2, "CREATE_TIME", 1); this.props.dispatch({ - type: 'app/getDataByPost', - url: 'BI/BIController/getRiskData', + type: "app/getDataByPost", + url: "BI/BIController/getRiskData", payload: json2, onlyData: false, onComplete: (ret) => { @@ -79,317 +88,569 @@ class BI008RiskAnalysis extends React.Component { this.state.HAZARDTOTALCOUNT = ret.Data.HAZARDTOTALCOUNT; this.state.RISKTOTALCOUNT = ret.Data.RISKTOTALCOUNT; this.state.MEASURESTOTALCOUNT = ret.Data.MEASURESTOTALCOUNT; - } this.chart1(); - this.chart2(ret?.Data.AREACOUNTS.filter(t => t.AREATYPE == 0).slice(0, 10)); - this.chart3(ret?.Data.AREACOUNTS.filter(t => t.AREATYPE == 1).slice(0, 10)); + this.chart2( + ret?.Data.AREACOUNTS.filter((t) => t.AREATYPE == 0).slice(0, 10) + ); + this.chart3( + ret?.Data.AREACOUNTS.filter((t) => t.AREATYPE == 1).slice(0, 10) + ); this.chart4(ret?.Data.DATECOUNTS); - } - }) + }, + }); }; chart1 = () => { - let chart1s = document.getElementById('chart1'); + let showData = [ + { value: this.state.LEVEL1TOTAL, name: "一级风险" }, + { value: this.state.LEVEL2TOTAL, name: "二级风险" }, + { value: this.state.LEVEL3TOTAL, name: "三级风险" }, + { value: this.state.LEVEL4TOTAL, name: "四级风险" }, + ]; + let chart1s = document.getElementById("chart1"); let myChart = echarts.init(chart1s); - myChart.setOption( - { - grid: { - top: '2%', - left: '1%', - right: '1%', + myChart.setOption({ + color: ["#c92a2a", "#ffa94d", "#ffe066", "#4285F4", "#fa8a89"], + title: [ + { + text:this.state.LEVEL1TOTAL+this.state.LEVEL2TOTAL+this.state.LEVEL3TOTAL+this.state.LEVEL4TOTAL , + x: "24%", + y: "40%", + textStyle: { + fontSize: 26, + fontWeight: "normal", + color: ["#333"], + }, }, - title: { + { text: "风险分级占比", - left: 'center', - top: "2%" + x: "23%", + y: "55%", + textStyle: { + color: "#666", + fontSize: 12, + }, }, - tooltip: { - trigger: 'item' + ], + tooltip: { + trigger: "item", + formatter: "{b} : ( {c} | {d}% )", + }, + legend: { + icon: "pin", + orient: "vartical", + x: "60%", + y: "center", + data: showData, + // itemWidth: 20, + // itemHeight: 14, + itemGap: 25, + formatter: function (name) { + //通过name获取到数组对象中的单个对象 + let singleData = showData.filter(function (item) { + return item.name == name; + }); + let countAll = 0; + showData.map((item) => { + countAll = countAll + item.value; + }); + + return ( + name + + " | " + + singleData[0].value + + " | " + + Number((singleData[0].value / countAll) * 100).toFixed(2) + + "%" + ); }, - legend: { - bottom: '2%' - }, - series: [ - { - type: 'pie', - radius: ['40%', '70%'], - avoidLabelOverlap: false, - label: { - show: false, - position: 'center' + }, + grid: { + left: 30, + containLabel: true, + bottom: 10, + top: 10, + right: 30, + }, + series: [ + { + name: "访问来源", + type: "pie", + clockwise: false, + // minAngle: 20, + avoidLabelOverlap: false, + radius: ["50%", "65%"], + center: ["30%", "50%"], + itemStyle: { + //图形样式 + normal: { + borderColor: "#ffffff", + borderWidth: 4, + padding: "0 20px", + borderRadius: 50, }, - - labelLine: { - show: false - }, - data: [ - { value: this.state.LEVEL1TOTAL, name: '一级风险' }, - { value: this.state.LEVEL2TOTAL, name: '二级风险' }, - { value: this.state.LEVEL3TOTAL, name: '三级风险' }, - { value: this.state.LEVEL4TOTAL, name: '四级风险' }, - ], - itemStyle: { - normal: { - color: function (colors) { - var colorList = [ "red","orange","yellow","blue" ]; - return colorList [colors.dataIndex]; - } - }, - } - } - ] - } - ); - } + }, + label: { + show: false, + }, + // color: color, + data: showData, + }, + ], + }); + }; chart2 = (data) => { let areaName = []; let areaCount = []; - data.forEach(item => { + data.forEach((item) => { areaName.push(item.AREANAME); areaCount.push(item.AREACOUNT); - }) - let chart2s = document.getElementById('chart2'); + }); + let chart2s = document.getElementById("chart2"); if (chart2s) { let myChart = echarts.init(chart2s); myChart.setOption({ title: { text: "矿山-风险区域统计TOP10", - left: 'center', - top: "2%" + left: "center", + top: "2%", }, tooltip: { - trigger: 'axis', + trigger: "axis", axisPointer: { - type: 'shadow' + type: "shadow", }, }, grid: { - left: '3%', - right: '4%', - top: '10%', - bottom: '1%', - containLabel: true + left: "3%", + right: "4%", + top: "10%", + bottom: "1%", + containLabel: true, }, xAxis: { - type: 'value', - splitLine: { - show: false, - lineStyle: { - color: '#172749' - } - }, - axisLine: { - show: false - }, - axisTick: { - show: false - }, - axisLabel: { + show: false, + }, + yAxis: [ + { + triggerEvent: true, show: true, - interval: 0, - formatter: '{value}', // 给每个数值添加% + inverse: false, + data: areaName, + axisLine: { + show: false, + }, + splitLine: { + show: false, + }, + axisTick: { + show: false, + }, + axisLabel: { + interval: 0, + color: "#666", + align: "right", + margin: 20, + fontSize: 13, + + rich: { + idx0: { + color: "#FB375E", + backgroundColor: "#FFE8EC", + borderRadius: 100, + padding: [5, 8], + }, + idx1: { + color: "#FF9023", + backgroundColor: "#FFEACF", + borderRadius: 100, + padding: [5, 8], + }, + idx2: { + color: "#01B599", + backgroundColor: "#E1F7F3", + borderRadius: 100, + padding: [5, 8], + }, + idx: { + color: "#333", + borderRadius: 100, + padding: [5, 8], + }, + title: { + width: 165, + }, + }, + }, }, - }, - yAxis: { - type: 'category', - axisTick: { - show: false + { + triggerEvent: true, + show: true, + inverse: false, + data: areaCount, + axisLine: { + show: false, + }, + splitLine: { + show: false, + }, + axisTick: { + show: false, + }, + axisLabel: { + interval: 0, + color: "#666", + align: "left", + margin: 20, + fontSize: 12, + }, }, - axisLine: { - show: false - }, - splitLine: { - show: false, - lineStyle: { - color: '#172749' - } - }, - data: areaName, - }, + ], series: [ { - name: '数量', - type: 'bar', - label: { - show: true, - position: 'insideRight', - color: '#fff', - formatter: '{c}', - fontSize: '12' - }, + name: "数量", + type: "bar", + barWidth: 10, itemStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ - { offset: 0, color: "#01AEF6" }, - { offset: 1, color: "#9999FF" }, - ]), + color: "#1990FF", + barBorderRadius: 30, }, data: areaCount, - show: false - + show: false, }, ], }); } - } + }; chart3 = (data) => { let areaName = []; let areaCount = []; - data.forEach(item => { + data.forEach((item) => { areaName.push(item.AREANAME); areaCount.push(item.AREACOUNT); - }) - let chart3s = document.getElementById('chart3'); + }); + let chart3s = document.getElementById("chart3"); if (chart3s) { let myChart = echarts.init(chart3s); myChart.setOption({ title: { text: "选矿-风险区域统计TOP10", - left: 'center', - top: "2%" + left: "center", + top: "2%", }, tooltip: { - trigger: 'axis', + trigger: "axis", axisPointer: { - type: 'shadow' + type: "shadow", }, }, grid: { - left: '3%', - right: '4%', - top: '10%', - bottom: '1%', - containLabel: true + left: "3%", + right: "4%", + top: "10%", + bottom: "1%", + containLabel: true, }, xAxis: { - type: 'value', - splitLine: { - show: false, - lineStyle: { - color: '#172749' - } - }, - axisLine: { - show: false - }, - axisTick: { - show: false - }, - axisLabel: { + show: false, + }, + yAxis: [ + { + triggerEvent: true, show: true, - interval: 0, - formatter: '{value}', // 给每个数值添加% + inverse: false, + data: areaName, + axisLine: { + show: false, + }, + splitLine: { + show: false, + }, + axisTick: { + show: false, + }, + axisLabel: { + interval: 0, + color: "#666", + align: "right", + margin: 20, + fontSize: 13, + + rich: { + idx0: { + color: "#FB375E", + backgroundColor: "#FFE8EC", + borderRadius: 100, + padding: [5, 8], + }, + idx1: { + color: "#FF9023", + backgroundColor: "#FFEACF", + borderRadius: 100, + padding: [5, 8], + }, + idx2: { + color: "#01B599", + backgroundColor: "#E1F7F3", + borderRadius: 100, + padding: [5, 8], + }, + idx: { + color: "#333", + borderRadius: 100, + padding: [5, 8], + }, + title: { + width: 165, + }, + }, + }, }, - }, - yAxis: { - type: 'category', - axisTick: { - show: false + { + triggerEvent: true, + show: true, + inverse: false, + data: areaCount, + axisLine: { + show: false, + }, + splitLine: { + show: false, + }, + axisTick: { + show: false, + }, + axisLabel: { + interval: 0, + color: "#666", + align: "left", + margin: 20, + fontSize: 12, + }, }, - axisLine: { - show: false - }, - splitLine: { - show: false, - lineStyle: { - color: '#172749' - } - }, - data: areaName, - }, + ], series: [ { - name: '数量', - type: 'bar', - label: { - show: true, - position: 'insideRight', - color: '#fff', - formatter: '{c}', - fontSize: '12' - }, + name: "数量", + type: "bar", + barWidth: 10, itemStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ - { offset: 0, color: "#01AEF6" }, - { offset: 1, color: "#9999FF" }, - ]), + color: "#1990FF", + barBorderRadius: 30, }, data: areaCount, - show: false - + show: false, }, ], }); } - } + }; chart4 = (data) => { let riskArr = []; let hazardArr = []; let dates = []; + 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; + }; for (let i = 0; i < data.length; i++) { if (data[i].TYPE == 0) { riskArr.push(data[i].COUNT); - dates.push(moment(data[i].DATE).format('YYYY/MM')) + dates.push(moment(data[i].DATE).format("YYYY/MM")); } else { hazardArr.push(data[i].COUNT); } } - let currMonth=dates.length; - for (let i = 1; i < (13 - currMonth); i++) { - dates.push(moment(dates[dates.length]).add(i, 'months').format('YYYY/MM')) + let currMonth = dates.length; + for (let i = 1; i < 13 - currMonth; i++) { + dates.push( + moment(dates[dates.length]).add(i, "months").format("YYYY/MM") + ); } - let chart4s = document.getElementById('chart4'); + let chart4s = document.getElementById("chart4"); if (chart4s) { let myChart = echarts.init(chart4s); myChart.setOption({ + color: color, grid: { - left: '5%', - right: '5%', + left: "5%", + right: "5%", }, legend: { - bottom: '0px' + bottom: "0px", }, title: { text: "月度风险辨识统计走势", - left: 'center', - top: "2%" + left: "center", + top: "2%", }, tooltip: { - trigger: 'axis', + trigger: "axis", axisPointer: { - type: 'shadow' + type: "shadow", }, }, xAxis: { - type: 'category', + type: "category", data: dates, + boundaryGap: false, axisLabel: { - showMaxLabel: true - } + textStyle: { + color: "#333", + }, + }, + axisLine: { + lineStyle: { + color: "#D9D9D9", + }, + }, }, yAxis: { - type: 'value', + 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: '危险源/风险库', + name: "危险源/风险库", data: riskArr, - type: 'line', - }, { - name: '职业危害库', + type: "line", + 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: "职业危害库", data: hazardArr, - type: 'line', - } - ] + type: "line", + 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, + }, + }, + }, + ], }); } - } + }; render() { return ( -
-

风险管理统计分析

+
+

+ 风险管理统计分析 +

- + {/*
- - -
-
+ */} + +
+
- +
-
- + {/*
*/} + - -
- - - -
- - -
-
+
+
+
+ 危险源/风险库 + {/*

*/} +
+ + {this.state.RISKTOTALCOUNT} + + 条 +
+
+
+ 职业危害库 + {/*

*/} +
+ + {this.state.HAZARDTOTALCOUNT} + + 条 +
+
+
+ 管控措施 + {/*

*/} +
+ + {this.state.MEASURESTOTALCOUNT} + + 条 +
+
-
- -
-
+
+
+
+
+ + + {/*
*/} + + + +
+
-
-
+
+

- ) + ); } } -export default connect(({ login, app }) => ({ login, app }))(BI008RiskAnalysis) +export default connect(({ login, app }) => ({ login, app }))(BI008RiskAnalysis); diff --git a/src/components/CustomPages/BI/BI011TrainSafeAnalysis.js b/src/components/CustomPages/BI/BI011TrainSafeAnalysis.js index 0f31612..6699428 100644 --- a/src/components/CustomPages/BI/BI011TrainSafeAnalysis.js +++ b/src/components/CustomPages/BI/BI011TrainSafeAnalysis.js @@ -1,9 +1,18 @@ -import React, { useState, useEffect, useRef, Component } from 'react' -import { connect } from 'dva' -import { initFilter, addRuleAndGroups, guid, extendInclude, extendRule, extendOrder, extend, initQueryFilter } from "../../../utils/common" -import { Table, Row, Col, Button, Select, DatePicker, message } from 'antd'; -import echarts from 'echarts'; -import moment from 'moment' +import React, { useState, useEffect, useRef, Component } from "react"; +import { connect } from "dva"; +import { + initFilter, + addRuleAndGroups, + guid, + extendInclude, + extendRule, + extendOrder, + extend, + initQueryFilter, +} from "../../../utils/common"; +import { Table, Row, Col, Button, Select, DatePicker, message } from "antd"; +import echarts from "echarts"; +import moment from "moment"; const { Option } = Select; class TrainSafeAnalysis extends React.Component { constructor(props) { @@ -25,61 +34,72 @@ class TrainSafeAnalysis extends React.Component { NUM5: 0, NUM6: 0, NUM7: 0, - searchMonth: moment().format('YYYY-MM'), - showLoading: false + searchMonth: moment().format("YYYY-MM"), + showLoading: false, }; - }; + } componentDidMount() { this.state.columns1 = [ { - title: '序号', - render: (text, record, index) => `${index + 1}` + title: "序号", + render: (text, record, index) => `${index + 1}`, }, { - title: '课程名称', - dataIndex: 'NAME', + title: "课程名称", + dataIndex: "NAME", }, { - title: '培训起止时间', - dataIndex: 'TIMERANGE', + width: "270px", + title: "培训起止时间", + dataIndex: "TIMERANGE", }, { - title: '应参训人数', - dataIndex: 'SHOULD_TRAINER', + title: "应参训人数", + dataIndex: "SHOULD_TRAINER", }, { - title: '实际参训人数', - dataIndex: 'ACTUAL_TRAINER', - }, { - title: '参训率', - render: (text, record) => ({((record.ACTUAL_TRAINER / record.SHOULD_TRAINER) * 100).toFixed(0) + "%"}), + title: "实际参训人数", + dataIndex: "ACTUAL_TRAINER", }, { - title: '考核方式', - dataIndex: 'METHOD', + title: "参训率", + render: (text, record) => ( + + {((record.ACTUAL_TRAINER / record.SHOULD_TRAINER) * 100).toFixed( + 0 + ) + "%"} + + ), }, { - title: '通过率', - dataIndex: 'PASS_RATE', - render: (text, record) => ({(record.PASS_RATE * 100).toFixed(0) + "%"}), - + title: "考核方式", + dataIndex: "METHOD", }, { - title: '效果评估(优良率)', - dataIndex: 'EFFORT_RATE', - render: (text, record) => ({(record.EFFORT_RATE*1).toFixed(0) + "%"}), + title: "通过率", + dataIndex: "PASS_RATE", + render: (text, record) => ( + {(record.PASS_RATE * 100).toFixed(0) + "%"} + ), }, - ] + { + title: "效果评估(优良率)", + dataIndex: "EFFORT_RATE", + render: (text, record) => ( + {(record.EFFORT_RATE * 1).toFixed(0) + "%"} + ), + }, + ]; this.loadData(this.state.searchMonth); - }; + } loadData = (startTime) => { const json = initFilter(this.props.login.OrgId); this.state.showLoading = true; json.Parameter1 = startTime; this.props.dispatch({ - type: 'app/getDataByPost', - url: 'BI/BIController/getSafeTrainData', + type: "app/getDataByPost", + url: "BI/BIController/getSafeTrainData", payload: json, onlyData: false, onComplete: (ret) => { @@ -95,106 +115,320 @@ class TrainSafeAnalysis extends React.Component { this.state.retData = ret.Data.trainRecords; this.chart1(ret.Data.dateCountModel); } - } - }) - } + }, + }); + }; chart1 = (ret) => { this.state.recordNums = []; this.state.dates = []; + 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; + }; for (let i = 0; i < ret.length; i++) { this.state.recordNums.push(ret[i].COUNT); - this.state.dates.push(moment(ret[i].DATE).format('YYYY-MM')); + this.state.dates.push(moment(ret[i].DATE).format("YYYY-MM")); } - let chart1s = document.getElementById('chart1'); + let chart1s = document.getElementById("chart1"); if (chart1s) { let myChart = echarts.init(chart1s); - myChart.on('click', (params) => { + myChart.on("click", (params) => { this.loadData(params.name); }); myChart.setOption({ + color: color, grid: { - left: '5%', - right: '5%', + left: "5%", + right: "5%", }, legend: { - bottom: '0px' + bottom: "0px", }, title: { text: "月度培训完成走势图", - left: 'center' + left: "center", + top: "2%", }, tooltip: { - trigger: 'axis', + trigger: "axis", axisPointer: { - type: 'shadow' + type: "shadow", }, }, xAxis: { - type: 'category', + type: "category", data: this.state.dates, + boundaryGap: false, axisLabel: { - showMaxLabel: true - } + textStyle: { + color: "#333", + }, + }, + axisLine: { + lineStyle: { + color: "#D9D9D9", + }, + }, }, yAxis: { - type: 'value', + 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: '培训记录数', + name: "培训记录数", data: this.state.recordNums, - type: 'line', + type: "line", + 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, + }, + }, }, - ] + ], }); } - } + }; onChange = (type, value) => { this.setState({ - [type]: value - }) - } + [type]: value, + }); + }; paginationConfig = { - pageSizeOptions: ['10', '20', '50'], + // pageSizeOptions: ["10", "20", "50"], pageSize: 20, - showSizeChanger: true, - size: 'small', - } + // showSizeChanger: true, + size: "small", + }; render() { return ( -
-

安全教育与培训统计分析

+
+

+ 安全教育与培训统计分析 +

-
- - {/* */} - + + + {/* */} + {/* {/* */} {/* */} {/* */} - - - -
-
+ {/* */} +
+
+ 安全培训教育 + {/*

*/} +
+ + {this.state.NUM2} + + 次 +
+
+
+ 三级安全教育 + {/*

*/} +
+ + {this.state.NUM3} + + 次 +
+
+
+ 题库总条数 + {/*

*/} +
+ + {this.state.NUM7} + + 条 +
+
-
+ + + +
+
+
+ + + + {/*
*/} - -
+
+
@@ -202,7 +436,7 @@ class TrainSafeAnalysis extends React.Component {
- ) + ); } } -export default connect(({ login, app }) => ({ login, app }))(TrainSafeAnalysis) +export default connect(({ login, app }) => ({ login, app }))(TrainSafeAnalysis);