-
- ${v.seriesName}
-
${v.value}
- %`;
- });
-
- return html;
- },
- extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
- axisPointer: {
- type: 'shadow',
- shadowStyle: {
- // color: "#ffffff",
- shadowColor: 'rgba(225,225,225,1)',
- shadowBlur: 5,
- },
- },
- },
- grid: {
- top: '15%',
- left: '5%',
- right: '15%', // 为图例留出空间
- bottom: '15%',
- containLabel: true,
- },
- xAxis: [
- {
- type: 'category',
- boundaryGap: false,
- axisLabel: {
- formatter: '{value}月',
- textStyle: {
- color: '#fff',
- },
- },
- axisTick: {
- show: false,
- },
- axisLine: {
- lineStyle: {
- color: '#fff',
- },
- },
- data: xAxisData,
- },
- ],
- yAxis: [
- {
- type: 'value',
- axisLabel: {
- textStyle: {
- color: '#fff',
- },
- },
- nameTextStyle: {
- color: '#fff',
- fontSize: 12,
- lineHeight: 40,
- },
- splitLine: {
- show: false,
- lineStyle: {
- type: 'dashed',
- color: '#fff',
- },
- },
- axisLine: {
- show: false,
- lineStyle: {
- color: '#00c7ff',
- width: 1,
- type: 'solid',
- },
- },
- axisTick: {
- show: false,
- },
- },
- ],
- series: seriesArr,
- };
-
- this.echartsInstances.opretionTrend.setOption(option);
- // 监听resize
- const resizeHandler = () => {
- if (this.echartsInstances.opretionTrend) {
- this.echartsInstances.opretionTrend.resize();
- }
- };
-
- if (this.trendResizeHandler) {
- window.removeEventListener('resize', this.trendResizeHandler);
- }
-
- this.trendResizeHandler = resizeHandler;
- window.addEventListener('resize', resizeHandler);
};
riskLevel = () => {
// 如果已有实例，先销毁
@@ -852,16 +189,12 @@ class FullScreen extends React.Component {
const riskLevels = document.getElementById('riskLevelFull');
if (!riskLevels) {
- console.warn('风险分级图表容器未找到');
// 使用requestAnimationFrame而不是setTimeout
requestAnimationFrame(() => {
- this.riskLevel();
+ this.executionChart();
});
return;
}
-
- console.log('初始化风险分级图表');
-
// 初始化echarts实例并保存引用
this.echartsInstances.riskLevel = echarts.init(riskLevels);
const option = {
@@ -945,7 +278,10 @@ class FullScreen extends React.Component {
show: false,
},
},
- data: this.state.riskTypeRate,
+ data: this.state.riskTypeRate.map((item) => ({
+ name: item.riskType,
+ value: item.count,
+ })),
},
],
};
@@ -967,6 +303,849 @@ class FullScreen extends React.Component {
this.riskResizeHandler = resizeHandler;
window.addEventListener('resize', resizeHandler);
};
+ transformDat = (originalData, barTopColor, num) => {
+ // 添加空值检查
+ if (!originalData || !Array.isArray(originalData) || originalData.length === 0) {
+ return {
+ companyNames: [],
+ series: [],
+ legendData: [],
+ };
+ }
+ // 获取所有的类型名称（去重）
+ let allTypes = [];
+ if (num == 1) {
+ allTypes = [...new Set(originalData.flatMap((item) => item.details?.map((detail) => detail.jobName)))];
+ } else {
+ allTypes = [...new Set(originalData.flatMap((item) => item.details?.map((detail) => detail.name)))];
+ }
+
+ // 获取所有的公司名称（作为 x 轴标签）
+ const companyNames = originalData?.map((item) => item.company);
+
+ // 为每个类型创建数据系列
+ const series = allTypes?.map((typeName, index) => {
+ return {
+ name: typeName,
+ type: 'bar',
+ itemStyle: {
+ normal: {
+ color: function (params) {
+ if (num == 1) {
+ return barTopColor[index];
+ } else {
+ return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: barTopColor[index][0],
+ },
+ {
+ offset: 1,
+ color: barTopColor[index][1],
+ },
+ ]);
+ }
+ },
+ },
+ },
+ data: originalData?.map((company) => {
+ // 找到该公司对应类型的数据，如果没有则返回 0
+ const detail = company.details?.find((d) => (num == 1 ? d.jobName : d.name) === typeName);
+ return detail ? detail.qty : 0;
+ }),
+ };
+ });
+
+ return {
+ companyNames, // x 轴数据
+ series, // 系列数据
+ legendData: allTypes, // legend 的 data
+ };
+ };
+
+ safeCheckChart = () => {
+ if (this.echartsInstances.safeCheckChart) {
+ this.echartsInstances.safeCheckChart.dispose();
+ this.echartsInstances.safeCheckChart = null;
+ }
+
+ let safeCheckCharts = document.getElementById('safeCheckChart');
+ if (!safeCheckCharts) {
+ requestAnimationFrame(() => {
+ this.safeCheckChart();
+ });
+ return;
+ }
+ const barTopColor = ['#02c3f1', '#53e568', '#a154e9'];
+
+ this.echartsInstances.safeCheckChart = echarts.init(safeCheckCharts);
+ let xdata = [];
+ xdata = this.transformDat(this.state.jobTodayTop3, barTopColor, 1);
+ this.echartsInstances.safeCheckChart.setOption({
+ title: {
+ text: '当日工作票排名前三家的数据',
+ textStyle: {
+ fontSize: 16,
+ color: '#fff',
+ },
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ // 坐标轴指示器，坐标轴触发有效
+ type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
+ },
+ },
+ legend: {
+ data: xdata.legendData,
+ align: 'right',
+ right: 10,
+ itemGap: 16,
+ itemWidth: 18,
+ itemHeight: 10,
+ textStyle: {
+ color: '#fff',
+ fontStyle: 'normal',
+ fontFamily: '微软雅黑',
+ fontSize: 14,
+ },
+ },
+ color: barTopColor,
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true,
+ },
+ xAxis: [
+ {
+ type: 'category',
+ data: xdata.companyNames,
+ textStyle: {
+ fontSize: 18,
+ color: '#ffffff',
+ },
+ //坐标轴
+ axisLine: {
+ lineStyle: {
+ color: '#3eb2e8',
+ },
+ },
+ //坐标值标注
+ axisLabel: {
+ show: true,
+ textStyle: {
+ color: '#fff',
+ },
+ },
+ },
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ textStyle: {
+ fontSize: 14,
+ color: '#ffffff',
+ },
+ //坐标轴
+ axisLine: {
+ show: false,
+ },
+ //坐标值标注
+ axisLabel: {
+ show: true,
+ textStyle: {
+ color: '#fff',
+ },
+ },
+ //分格线
+ splitLine: {
+ lineStyle: {
+ color: '#4784e8',
+ },
+ },
+ },
+ ],
+ series: xdata.series,
+ });
+
+ // 监听resize
+ const resizeHandler = () => {
+ if (this.echartsInstances.safeCheckChart) {
+ this.echartsInstances.safeCheckChart.resize();
+ }
+ };
+
+ if (this.safeCheckResizeHandler) {
+ window.removeEventListener('resize', this.safeCheckResizeHandler);
+ }
+
+ this.safeCheckResizeHandler = resizeHandler;
+ window.addEventListener('resize', resizeHandler);
+ };
+ dangerOperation = () => {
+ // 如果已有实例，先销毁
+ if (this.echartsInstances.dangerOperation) {
+ this.echartsInstances.dangerOperation.dispose();
+ this.echartsInstances.dangerOperation = null;
+ }
+
+ const dangerOperationCharts = document.getElementById('dangerOperationChart');
+ if (!dangerOperationCharts) {
+ // 使用requestAnimationFrame而不是setTimeout
+ requestAnimationFrame(() => {
+ this.executionChart();
+ });
+ return;
+ }
+
+ let legendData = [];
+ (this.state.linkSum.map((item) => {
+ legendData.push(item.name);
+ }),
+ // 初始化echarts实例并保存引用
+ (this.echartsInstances.dangerOperation = echarts.init(dangerOperationCharts)));
+
+ const option = {
+ color: [
+ '#0090FF',
+ '#36CE9E',
+ '#e690d1',
+ '#FF515A',
+ '#8B5CFF',
+ '#00CA69',
+ '#FFC107',
+ '#E91E63',
+ '#9C27B0',
+ '#3F51B5',
+ '#2196F3',
+ '#4CAF50',
+ '#FF9800',
+ '#795548',
+ '#607D8B',
+ ],
+ title: [
+ {
+ text: '各公司危险作业分类统计',
+ x: 'center',
+ y: '5%',
+ textStyle: {
+ fontSize: 16,
+ color: '#fff',
+ },
+ },
+ ],
+ legend: {
+ type: 'scroll',
+ orient: 'vertical',
+ left: '5%',
+ align: 'left',
+ top: '5%',
+ textStyle: {
+ color: '#fff',
+ },
+ height: 250,
+ },
+ tooltip: {
+ trigger: 'item',
+ formatter: function (params) {
+ const color = params.color;
+ return `
+
+ ${params.name}:
+ ${params.value}
+
`;
+ },
+ backgroundColor: 'rgba(255, 255, 255, 0.5)',
+ borderColor: '#FFFFFF',
+ borderWidth: 2,
+ textStyle: {
+ color: '#000',
+ fontSize: 14,
+ fontWeight: 'normal',
+ },
+ },
+ series: [
+ {
+ name: '访问来源',
+ type: 'pie',
+ minAngle: 20,
+ center: ['55%', '50%'],
+ radius: ['40%', '65%'],
+ clockwise: true,
+ avoidLabelOverlap: true,
+ hoverOffset: 15,
+ label: {
+ show: true,
+ position: 'outside',
+ formatter: '{a|{b}：{c}}{e|({d}%)}\n',
+ // color: '#FFFFFF',
+ textBorderWidth: 0,
+ rich: {
+ a: {
+ padding: [-15, 0, 0, 0],
+ fontSize: 15,
+ // color: '#FFFFFF',
+ textBorderWidth: 0,
+ textShadow: 'none',
+ },
+ e: {
+ fontSize: 14,
+ // color: '#FFFFFF',
+ padding: [-15, 0, 0, 5],
+ textBorderWidth: 0,
+ textShadow: 'none',
+ },
+ },
+ },
+ labelLine: {
+ normal: {
+ length: 5,
+ length2: 3,
+ smooth: true,
+ },
+ },
+ data: this.state.linkSum.map((item) => ({
+ name: item.name,
+ value: item.qty,
+ })),
+ },
+ ],
+ };
+
+ this.echartsInstances.dangerOperation.setOption(option);
+
+ // 监听窗口大小变化
+ const resizeHandler = () => {
+ if (this.echartsInstances.dangerOperation) {
+ this.echartsInstances.dangerOperation.resize();
+ }
+ };
+
+ // 移除旧的监听器
+ if (this.dangerOperationResizeHandler) {
+ window.removeEventListener('resize', this.dangerOperationResizeHandler);
+ }
+
+ this.dangerOperationResizeHandler = resizeHandler;
+ window.addEventListener('resize', resizeHandler);
+ };
+ backLog = () => {
+ if (this.echartsInstances.backLogChart) {
+ this.echartsInstances.backLogChart.dispose();
+ this.echartsInstances.backLogChart = null;
+ }
+
+ let backLogCharts = document.getElementById('backLogChart');
+ if (!backLogCharts) {
+ requestAnimationFrame(() => {
+ this.backLogChart();
+ });
+ return;
+ }
+ const barTopColor = [
+ ['#75baf3', '#2177d5'],
+ ['#ffa94d', '#f76707'],
+ ['#99ca6e', '#48a447'],
+ ];
+
+ this.echartsInstances.backLogChart = echarts.init(backLogCharts);
+ let xdata = [];
+ xdata = this.transformDat(this.state.taskTop3, barTopColor, 2);
+ // 创建图例的渐变色块
+ const legendColors = barTopColor.map((gradient) => gradient[0]);
+ this.echartsInstances.backLogChart.setOption({
+ title: {
+ text: '各事项排名前三名统计',
+ textStyle: {
+ fontSize: 16,
+ color: '#fff',
+ },
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ // 坐标轴指示器，坐标轴触发有效
+ type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
+ },
+ },
+ legend: {
+ data: xdata.legendData.map((name, index) => ({
+ name: name,
+ // 使用渐变的起始颜色作为图例颜色
+ // icon: 'rect',
+ itemStyle: {
+ color: legendColors[index],
+ borderWidth: 0,
+ },
+ textStyle: {
+ color: '#fff',
+ fontSize: 14,
+ },
+ })),
+ align: 'right',
+ right: 10,
+ itemGap: 16,
+ itemWidth: 18,
+ itemHeight: 12,
+ textStyle: {
+ color: '#fff',
+ fontStyle: 'normal',
+ fontFamily: '微软雅黑',
+ fontSize: 14,
+ },
+ },
+ color: legendColors, // 设置全局颜色
+
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true,
+ },
+ xAxis: [
+ {
+ type: 'category',
+ data: xdata.companyNames,
+ textStyle: {
+ fontSize: 18,
+ color: '#ffffff',
+ },
+ //坐标轴
+ axisLine: {
+ lineStyle: {
+ color: '#3eb2e8',
+ },
+ },
+ //坐标值标注
+ axisLabel: {
+ show: true,
+ textStyle: {
+ color: '#fff',
+ },
+ },
+ },
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ textStyle: {
+ fontSize: 14,
+ color: '#ffffff',
+ },
+ //坐标轴
+ axisLine: {
+ show: false,
+ },
+ //坐标值标注
+ axisLabel: {
+ show: true,
+ textStyle: {
+ color: '#fff',
+ },
+ },
+ //分格线
+ splitLine: {
+ lineStyle: {
+ color: '#4784e8',
+ },
+ },
+ },
+ ],
+ series: xdata.series,
+ });
+
+ // 监听resize
+ const resizeHandler = () => {
+ if (this.echartsInstances.backLogChart) {
+ this.echartsInstances.backLogChart.resize();
+ }
+ };
+
+ if (this.backLogResizeHandler) {
+ window.removeEventListener('resize', this.backLogResizeHandler);
+ }
+
+ this.backLogResizeHandler = resizeHandler;
+ window.addEventListener('resize', resizeHandler);
+ };
+ completeChart = () => {
+ if (this.echartsInstances.completeone) {
+ this.echartsInstances.completeone.dispose();
+ this.echartsInstances.completeone = null;
+ }
+
+ let completeCharts = document.getElementById('completeone');
+ if (!completeCharts) {
+ requestAnimationFrame(() => {
+ this.completeChart();
+ });
+ return;
+ }
+
+ this.echartsInstances.completeone = echarts.init(completeCharts);
+ let seriesArr = [];
+ let centerArr = [
+ ['20%', '50%'],
+ ['50%', '50%'],
+ ['80%', '50%'],
+ ];
+ const completeData = this.state.jobFinishRate
+ .filter((item) => item.name === '班前会议' || item.name === '岗位当班' || item.name === '岗位交接班')
+ .map((item) => {
+ return {
+ name: item.name,
+ value: item.rate,
+ };
+ });
+ const colorArr = [
+ [
+ [0.2, '#2ec7c9'],
+ [0.8, '#b6a2de'],
+ [1, '#5ab1ef'],
+ ],
+ [
+ [0.2, '#5470c6'],
+ [0.8, '#91cc75'],
+ [1, '#fac858'],
+ ],
+ [
+ [0.2, '#4ea397'],
+ [0.8, '#22c3aa'],
+ [1, '#7bd9a5'],
+ ],
+ ];
+ completeData.forEach((item, index) => {
+ seriesArr.push({
+ center: centerArr[index],
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: colorArr[index],
+ width: 8,
+ },
+ radius: '90%', // 控制轴线本身的半径
+ },
+ axisTick: {
+ show: false,
+ },
+ splitLine: {
+ length: 8, // 刻度线长度
+ distance: 25, // 向内移动距离，负值越大越向内
+ lineStyle: {
+ color: '#fff', // 刻度线颜色
+ width: 1, // 刻度线宽度
+ },
+ },
+ axisLabel: {
+ distance: 15, // 标签与刻度线的距离
+ textStyle: {
+ color: '#fff',
+ fontSize: 10,
+ },
+ // 调整标签偏移
+ offset: [0, 0], // [水平偏移, 垂直偏移]
+ },
+ itemStyle: {
+ normal: {
+ color: 'auto',
+ },
+ },
+ radius: '80%',
+ pointer: {
+ show: true,
+ width: '8%',
+ length: '30%',
+ },
+ title: {
+ textStyle: {
+ // fontWeight: 'bolder',
+ fontSize: 14,
+ color: '#fff',
+ },
+ offsetCenter: [0, '100%'],
+ },
+ detail: {
+ textStyle: {
+ fontWeight: 'bolder',
+ fontSize: 16,
+ color: '#fff',
+ },
+ offsetCenter: [0, '68%'],
+ formatter: '{value}%',
+ // formatter: '{value}万\n(5048人)',
+ },
+ min: 0,
+ max: 100,
+ // name: '米类仪表盘',
+ type: 'gauge',
+ show: false,
+ splitNumber: 10,
+ data: [
+ {
+ name: item.name,
+ value: item.value,
+ },
+ ],
+ });
+ });
+ this.echartsInstances.completeone.setOption({
+ series: seriesArr,
+ });
+
+ // 监听resize
+ const resizeHandler = () => {
+ if (this.echartsInstances.completeone) {
+ this.echartsInstances.completeone.resize();
+ }
+ };
+
+ if (this.completeResizeHandler) {
+ window.removeEventListener('resize', this.completeResizeHandler);
+ }
+
+ this.completeResizeHandler = resizeHandler;
+ window.addEventListener('resize', resizeHandler);
+ };
+ safedanger = () => {
+ if (this.echartsInstances.opretionTrend) {
+ this.echartsInstances.opretionTrend.dispose();
+ this.echartsInstances.opretionTrend = null;
+ }
+
+ const opretionTrends = document.getElementById('opretionTrend');
+ if (!opretionTrends) {
+ requestAnimationFrame(() => {
+ this.safedanger();
+ });
+ return;
+ }
+
+ this.echartsInstances.opretionTrend = echarts.init(opretionTrends);
+
+ // ... 原有配置代码
+ let bgColor = '#000';
+ let color = [
+ '#0090FF',
+ '#36CE9E',
+ '#e690d1',
+ '#FF515A',
+ '#8B5CFF',
+ '#00CA69',
+ '#FFC107',
+ '#E91E63',
+ '#9C27B0',
+ '#3F51B5',
+ '#2196F3',
+ '#4CAF50',
+ '#FF9800',
+ '#795548',
+ '#607D8B',
+ ];
+ const seriesNames = [];
+ this.state.listSETrainSum.map((item) => {
+ seriesNames.push(item.CN);
+ });
+
+ // 生成x轴数据（12个月）
+ let xAxisData = [];
+ xAxisData = Object.keys(
+ this.state.listSETrainSum[0] === undefined || this.state.listSETrainSum[0] === null
+ ? {}
+ : this.state.listSETrainSum[0]
+ )
+ .filter((key) => key.startsWith('dtNowYM'))
+ .map((key) => this.state.listSETrainSum[0][key].substring(0, 7))
+ .sort((a, b) => new Date(a) - new Date(b)); // 按日期升序
+
+ let yAxisData = [];
+ yAxisData = this.state.listSETrainSum.map((item) => {
+ const values = [];
+ for (let i = 0; i <= 5; i++) {
+ const key = i === 0 ? 'SUM_TRAIN_HOUR' : `SUM_TRAIN_HOUR_${i}`;
+ values.push(item[key]);
+ }
+ return values;
+ });
+
+ // 生成15个系列的数据
+ let seriesArr = [];
+ for (let i = 0; i < this.state.listSETrainSum.length; i++) {
+ seriesArr.push({
+ name: seriesNames[i],
+ type: 'line',
+ smooth: true,
+ symbolSize: 6,
+ data: yAxisData[i],
+ });
+ }
+
+ 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;
+ };
+ const option = {
+ title: [
+ {
+ text: '各家公司的安全教育培训学时统计',
+ x: 'center',
+ y: '5%',
+ textStyle: {
+ fontSize: 16,
+ color: '#fff',
+ },
+ },
+ ],
+ backgroundColor: '',
+ color: color,
+ legend: {
+ type: 'scroll', // 如果项目多可以使用滚动
+ orient: 'vertical', // 设置为垂直排列
+ right: 10, // 距离右侧的距离
+ top: 'center', // 垂直居中
+ align: 'left', // 文本左对齐
+ textStyle: {
+ color: '#fff', // 文字颜色
+ fontSize: 12,
+ },
+ itemStyle: {
+ color: 'inherit',
+ borderWidth: 0,
+ opacity: 1,
+ },
+ symbol: 'rect', // 实心矩形
+ symbolSize: [12, 8], // 大小
+ itemWidth: 10, // 图例标记的宽度
+ itemHeight: 10, // 图例标记的高度
+ itemGap: 15, // 图例每项之间的间隔
+ pageButtonItemGap: 3,
+ pageButtonGap: 5,
+ pageButtonPosition: 'end',
+ pageIconColor: '#00caf7',
+ width: 100, // 限制宽度
+ height: 250, // 限制高度，超出就会显示滚动
+ },
+ tooltip: {
+ trigger: 'axis',
+ formatter: function (params) {
+ let html = '';
+ params.forEach((v) => {
+ html += `
+
+ ${v.seriesName}
+
${v.value}
+ `;
+ });
+
+ return html;
+ },
+ extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
+ axisPointer: {
+ type: 'shadow',
+ shadowStyle: {
+ // color: "#ffffff",
+ shadowColor: 'rgba(225,225,225,1)',
+ shadowBlur: 5,
+ },
+ },
+ },
+ grid: {
+ top: '15%',
+ left: '5%',
+ right: '15%', // 为图例留出空间
+ bottom: '15%',
+ containLabel: true,
+ },
+ xAxis: [
+ {
+ type: 'category',
+ boundaryGap: false,
+ axisLabel: {
+ textStyle: {
+ color: '#fff',
+ },
+ },
+ axisTick: {
+ show: false,
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#fff',
+ },
+ },
+ data: xAxisData,
+ },
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ axisLabel: {
+ textStyle: {
+ color: '#fff',
+ },
+ },
+ nameTextStyle: {
+ color: '#fff',
+ fontSize: 12,
+ lineHeight: 40,
+ },
+ splitLine: {
+ show: false,
+ lineStyle: {
+ type: 'dashed',
+ color: '#fff',
+ },
+ },
+ axisLine: {
+ show: false,
+ lineStyle: {
+ color: '#00c7ff',
+ width: 1,
+ type: 'solid',
+ },
+ },
+ axisTick: {
+ show: false,
+ },
+ },
+ ],
+ series: seriesArr,
+ };
+
+ this.echartsInstances.opretionTrend.setOption(option);
+ // 监听resize
+ const resizeHandler = () => {
+ if (this.echartsInstances.opretionTrend) {
+ this.echartsInstances.opretionTrend.resize();
+ }
+ };
+
+ if (this.trendResizeHandler) {
+ window.removeEventListener('resize', this.trendResizeHandler);
+ }
+
+ this.trendResizeHandler = resizeHandler;
+ window.addEventListener('resize', resizeHandler);
+ };
render() {
const width = 1920,
@@ -974,6 +1153,31 @@ class FullScreen extends React.Component {
// 固定好16:9的宽高比，计算出最合适的缩放比，宽高比可根据需要自行更改
const { scale, safetySloganOne, animationDuration, sliderColor, sliderSize, activeTab } = this.state;
const renderContent = () => {
+ const riskChangeData = [
+ {
+ name: '隐患数',
+ value: this.state.hiddenRectify.qty,
+ },
+ {
+ name: '按期整改数',
+ value: this.state.hiddenRectify.ontimeQty,
+ },
+ {
+ name: '延期整改数',
+ value: this.state.hiddenRectify.delayQty,
+ },
+ ];
+ const chartConfig = {
+ data: this.state.safeCheckSum.map((item) => ({
+ name: item.company,
+ value: item.qty,
+ })),
+ showValue: true,
+ };
+ const meetingData = this.state.jobFinishRate.map((item) => ({
+ name: item.name,
+ value: item.qty,
+ }));
if (activeTab === '首页') {
return (
<>
@@ -1018,10 +1222,10 @@ class FullScreen extends React.Component {
item.riskType === '重大风险'
? '#c92a2a'
: item.riskType === '较大风险'
- ? '#FF6710'
- : item.riskType === '一般风险'
- ? '#FFDD1E'
- : '#0091FF',
+ ? '#FF6710'
+ : item.riskType === '一般风险'
+ ? '#FFDD1E'
+ : '#0091FF',
margin: '10px 20px',
padding: '5px 10px',
fontSize: '16px',
@@ -1069,6 +1273,7 @@ class FullScreen extends React.Component {
justifyContent: 'center',
width: '100%',
height: '100%',
+ padding: '10px',
}}
>
@@ -1194,11 +1412,21 @@ class FullScreen extends React.Component {
justifyContent: 'center',
width: '100%',
height: '100%',
+ padding: '10px',
}}
>
-
-
-
+