/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-03-18 10:21:49
|
* @LastEditTime: 2024-08-22 11:55:25
|
* @LastEditors: dminyi 1301963064@qq.com
|
* @Version: 1.0.0
|
* @Description: 调解大数据
|
*/
|
import React, { useState, useEffect, useMemo, useRef } from 'react';
|
import * as $$ from '../../../utils/utility';
|
import { useOutletContext } from 'react-router-dom';
|
import Page from '../../../components/Page';
|
import {
|
Col, Empty, Row, TreeSelect, Button, DatePicker, Space, Radio, Divider, Alert, Table, Tooltip
|
} from 'antd';
|
import './index.less';
|
import { Chart } from '@antv/g2';
|
import { Pie, measureTextWidth, Progress, Column } from '@ant-design/plots';
|
import { mediateBigData_1, mediateBigData_2, mediateBigData_3, mediateBigData_4, mediateBigData_5, mediateBigData_6, mediateBigData_7, mediateBigData_8 } from '../../../assets/images/';
|
|
// 获取大部分数据
|
function getAllDataApi(submitData) {
|
return $$.ax.request({ url: 'caseInfo/getMediBigData', type: 'get', data: submitData, service: 'mediate' });
|
}
|
|
// 获取折线图数据
|
function getChartDataApi(submitData) {
|
return $$.ax.request({ url: 'caseInfo/trendAnalysisList', type: 'get', data: submitData, service: 'mediate' });
|
}
|
|
// 获取类型分布数据
|
function getTypeDistrDataApi(submitData) {
|
return $$.ax.request({ url: 'caseInfo/typeDistributionList', type: 'get', data: submitData, service: 'mediate' });
|
}
|
// 获取工作排名数据
|
function getWorkTopDataApi(submitData) {
|
return $$.ax.request({ url: 'caseInfo/workTopList', type: 'get', data: submitData, service: 'mediate' });
|
}
|
|
// 获取报表统计数据
|
function getRepoStatDataApi(submitData) {
|
return $$.ax.request({ url: 'caseInfo/reportStatisticsList', type: 'get', data: submitData, service: 'mediate' });
|
}
|
|
// 获取TreeSelect数据
|
function getUnitSelectTermApi(submitData) {
|
return $$.ax.request({ url: 'ctUnit/listUnitSelectTerm', type: 'get', data: submitData, service: 'cust' });
|
}
|
|
// 导出报表统计
|
function getToExcelDataApi(submitData) {
|
return $$.ax.request({ url: 'ctUnit/listUnitSelectTerm', type: 'get', data: submitData, service: 'cust' });
|
}
|
|
// 折线图
|
const MyChart = ({ trendAnalysisList, roleId, originOfTreAnaly }) => {
|
const myChartRef = useRef();
|
// 图表
|
const [myChart, setMyChart] = useState();
|
|
// 加载趋势分析-折线图数据
|
useEffect(() => {
|
let isMounted = true;
|
if (!roleId) return;
|
async function getChartData() {
|
let data = trendAnalysisList;
|
if (myChart) { myChart.changeData(data); };
|
if (isMounted) {
|
if (!myChart) {
|
const chart = new Chart({ container: 'container', autoFit: true });
|
chart.data(data);
|
chart.tooltip({ showCrosshairs: true, shared: true, axisPointer: { type: 'line' } });
|
chart.scale({ MONTH: { range: [0, 1] }, num: { min: 0, nice: true } });
|
chart.line().position('MONTH*num').color('type', ['#1890FF', '#05AEAE', '#EF6C24', '#D10269']).shape('line');
|
chart.axis('MONTH', {
|
line: {
|
style: {
|
stroke: 'rgba(0,0,0,0.15)',
|
},
|
},
|
grid: {
|
line: {
|
style: {
|
stroke: 'rgba(0,0,0,0.20)',
|
lineDash: [1, 1]
|
},
|
},
|
},
|
});
|
chart.axis('num', {
|
line: {
|
style: {
|
stroke: 'rgba(0,0,0,0.15)',
|
},
|
},
|
grid: {
|
line: {
|
style: {
|
stroke: 'rgba(0,0,0,0.20)',
|
lineDash: [1, 1]
|
},
|
},
|
},
|
});
|
// chart.point().position('month*num').color('type', ['#1890FF', '#05AEAE', '#EF6C24']).shape('circle');
|
chart.render();
|
setMyChart(chart);
|
} else {
|
if (originOfTreAnaly === '调解成功率') {
|
const data1 = data.map(item => ({
|
...item,
|
num: item["调解成功率"] // 将"机构登记调解成功率"赋值给"num"
|
}));
|
myChart.changeData(data1);
|
}
|
else {
|
myChart.changeData(data);
|
}
|
}
|
}
|
}
|
getChartData();
|
return () => {
|
isMounted = false;
|
};
|
}, [trendAnalysisList, roleId, originOfTreAnaly]);
|
//适应大小
|
useEffect(() => {
|
if (myChart && myChartRef.current.clientHeight !== 0) {
|
myChart.forceFit();
|
}
|
});
|
|
return <div id="container" ref={myChartRef} style={{ height: '100%' }} />;
|
};
|
|
//环图
|
const TypeDistribution_Pie = ({ typeDistributionList }) => {
|
function renderStatistic(containerWidth, text, style) {
|
const { width: textWidth, height: textHeight } = measureTextWidth(text, style);
|
const R = containerWidth / 2; // r^2 = (w / 2)^2 + (h - offsetY)^2
|
|
let scale = 1;
|
|
if (containerWidth < textWidth) {
|
scale = Math.min(Math.sqrt(Math.abs(Math.pow(R, 2) / (Math.pow(textWidth / 2, 2) + Math.pow(textHeight, 2)))), 1);
|
}
|
|
const textStyleStr = `width:${containerWidth}px`;
|
return `<div style="${textStyleStr};font-size:14px;line-height:${scale < 1 ? 1 : 'inherit'};">${text}</div>`;
|
}
|
const data = typeDistributionList;
|
const config = {
|
appendPadding: 10,
|
data,
|
angleField: 'countBl',
|
colorField: 'case_type_name',
|
color: ['#FFE6E6', '#FFD1D1', '#FFA6A6', '#EB4D58', '#D1021C'], //可以判断着显示
|
radius: 1,
|
innerRadius: 0.64,
|
meta: {
|
value: {
|
formatter: (v) => `${(v / data.reduce((total, item) => total + item.value, 0) * 100)}`,
|
},
|
},
|
legend: {
|
position: 'right',
|
offsetX: -20, //调整样例的位置
|
},
|
label: {
|
type: 'inner',
|
offset: '-50%',
|
style: {
|
fill: 'RGB(0, 0, 0)',
|
textAlign: 'center',
|
fontSize: 12,
|
fontWeight: 'bold',
|
},
|
autoRotate: false,
|
content: '{value}%', //这个值是环图各部分显示的值
|
},
|
statistic: {
|
title: {
|
offsetY: 0,
|
customHtml: (container, view, datum) => {
|
const { width, height } = container.getBoundingClientRect();
|
const d = Math.sqrt(Math.pow(width / 2, 2) + Math.pow(height / 2, 2));
|
const text = datum ? datum.case_type_name : '收案总数'; //图中间的文字
|
return renderStatistic(d, text, {
|
fontSize: 12,
|
});
|
},
|
},
|
content: {
|
offsetY: 4,
|
style: {
|
fontSize: 14
|
},
|
customHtml: (container, view, datum, data) => {
|
const { width } = container.getBoundingClientRect();
|
const sum = `${data.reduce((r, d) => r + d.value, 0)}`;
|
const text = datum ? `${datum.countBl}%` : `${(data.reduce((r, d) => r + d.count, 0))}`; //图中间的数字
|
return renderStatistic(width, text, {
|
fontSize: 32,
|
});
|
},
|
},
|
},
|
// 添加 中心统计文本 交互
|
interactions: [
|
{
|
type: 'element-selected',
|
},
|
{
|
type: 'element-active',
|
},
|
{
|
type: 'pie-statistic-active',
|
},
|
],
|
};
|
return <Pie {...config} />;
|
};
|
|
// Progress
|
const RankProgress = ({ percent, color }) => {
|
const config = {
|
height: 27.1,
|
autoFit: true,
|
percent: percent,
|
barWidthRatio: 0.3,
|
color: color
|
}
|
return <Progress {...config} />;
|
};
|
|
const MediateBigData = () => {
|
//起始时间 和 结束时间
|
//每年第一天 default值
|
const formattedDate = new Date(new Date().getFullYear(), 0, 2).toISOString().substring(0, 10);
|
//default结束时间-即当日
|
const timeEndtemp = new Date().toISOString().substring(0, 10);
|
const firstDayOfMonth = new Date(new Date().getFullYear(), new Date().getMonth(), 2).toISOString().substring(0, 10);
|
|
//请求api所需参数
|
const [countRange, setCountRange] = useState(1);
|
const [timeType, setTimeType] = useState(1);
|
const [timeStart, setTimeStart] = useState(formattedDate);
|
const [timeEnd, setTimeEnd] = useState(timeEndtemp);
|
const [mediateUnitIds, setMediateUnitIds] = useState('');
|
const [oldSumitData, setOldSumitData] = useState({ countRange: '1', timeType: '1', timeStart, timeEnd, mediateUnitIds: '', workTopType: '1', sortType: '1', sortField: '1', canal: '22_00001-1' });
|
const [sortField, setSortField] = useState(0);
|
//录入总数：1；调解成功数：2；调解中：3；司法确认数：4；小程序数：5；本月新增：6；调解失败数：7；线上转诉：8
|
const [sortType, setSortType] = useState(1);
|
|
//权限管理
|
const { powerMap, roleId } = useOutletContext();
|
//所有案件信息-用于调解总览部分
|
const [allCanal, setAllCanal] = useState([]);
|
//工作排名
|
const [workTopList, setWorkTopList] = useState([]);
|
//实时动态-表格
|
const [realTimeDynamicList, setRealTimeDynamicList] = useState([]);
|
//趋势分析
|
const [trendAnalysisList, setTrendAnalysisList] = useState([]);
|
//本月新增
|
const [thisMonthIncrease, setThisMonthIncrease] = useState([]);
|
//报表统计
|
const [reportStatisticsList, setReportStatisticsList] = useState([]);
|
//类型分布
|
const [typeDistributionList, setTypeDistributionList] = useState([]);
|
|
//时间选择的值
|
const [timeRadioValue, setTimeRadioValue] = useState(1);
|
//组件是否显示
|
const [showSelect, setShowSelect] = useState(false);
|
const [showRangePicker, setRangePicker] = useState(false);
|
const [showMonthCard, setShowMonthCard] = useState(true);
|
|
//单选框-
|
const [statisticalRange, setStatisticalRange] = useState('本单位和全部下级单位');
|
//提示框显示的统计范围 开始和结束时间
|
const [alertRange, setAlertRange] = useState('本单位和全部下级单位');
|
const [alertStartTime, setAlertStartTime] = useState('全年（' + formattedDate);
|
const [alertEndTime, setAlertEndTime] = useState('今)');
|
//统计范围的TreeSelect
|
const [selectedOption, setSelectedOption] = useState('全部');
|
//日期框-开始时间和结束时间 同于提示框显示
|
const { RangePicker } = DatePicker;
|
|
//饼图-单选框值
|
const [originOfTypeDistribution, setOriginOfTypeDistribution] = useState('机构');
|
|
//趋势分析-单选框值
|
const [originOfTrendAnalysis, setOriginOfTrendAnalysis] = useState('收集情况');
|
|
//工作排名-单选框值 百分比分母
|
const [originOfWorkloadRanking, setOriginOfWorkloadRanking] = useState('收案数');
|
const [percentNum, setPercentNum] = useState(0);
|
//提示框Alter是否可见
|
const [alertVisible, setAlertVisible] = useState(true);
|
|
// 搜索
|
const [search, setSearch] = useState({ page: 1, size: 10 });
|
|
// 数据
|
const [data, setData] = useState({ key: new Date() });
|
|
//统计筛选的折线图的列名和 数据
|
const reportStatisticsColumns = [
|
{
|
title: '序号',
|
render: reportStatisticsList.length === 0 ? null : (text, record, index) => `${index + 1}`,
|
width: 50
|
},
|
{
|
title: '调解组织',
|
dataIndex: 'name',
|
ellipsis: true,
|
width: 210
|
},
|
{
|
title: '调解总数',
|
dataIndex: '录入总数',
|
sorter: {
|
compare: (a, b, sorter) => {
|
return (a.录入总数 - b.录入总数)
|
},
|
// multiple: 8,
|
order: 'descend'
|
},
|
defaultSortOrder: 'descend' // 设置默认排序方式为降序
|
},
|
{
|
title: '调解成功数',
|
dataIndex: '调解成功数',
|
sorter: {
|
compare: (a, b) => a.调解成功数 - b.调解成功数,
|
// multiple: 7,
|
},
|
order: 'descend'
|
},
|
{
|
title: '正在调解数',
|
dataIndex: '调解中',
|
sorter: {
|
compare: (a, b) => a.调解中 - b.调解中,
|
// multiple: 6,
|
},
|
order: null
|
},
|
{
|
title: '司法确认数',
|
dataIndex: '司法确认数',
|
sorter: {
|
compare: (a, b) => a.司法确认数 - b.司法确认数,
|
// multiple: 5,
|
},
|
order: null
|
},
|
{
|
title: '小程序申请案件数',
|
dataIndex: '小程序数',
|
sorter: {
|
compare: (a, b) => a.小程序数 - b.小程序数,
|
// multiple: 4,
|
},
|
width: 145,
|
order: null
|
},
|
{
|
title: '本月新增数',
|
dataIndex: '本月新增',
|
sorter: {
|
compare: (a, b) => a.本月新增 - b.本月新增,
|
// multiple: 3,
|
},
|
order: null
|
},
|
{
|
title: '调解失败数',
|
dataIndex: '调解失败数',
|
sorter: {
|
compare: (a, b) => a.调解失败数 - b.调解失败数,
|
// multiple: 2,
|
},
|
order: null
|
},
|
{
|
title: '线上转诉案件数',
|
dataIndex: '线上转诉',
|
sorter: {
|
compare: (a, b) => a.线上转诉 - b.线上转诉,
|
// multiple: 1,
|
},
|
width: 135,
|
order: null
|
}
|
];
|
// 调解总览
|
const mediationOverviewData = [{
|
name: '收案总数',
|
title1: '未开始',
|
title2: '调解中',
|
title3: '已结束',
|
sum: allCanal.总数,
|
num1: allCanal.未开始,
|
num2: allCanal.调解中,
|
num3: allCanal.已结束,
|
name2: '本月新增',
|
// title4: '同比',
|
title5: '比上月',
|
title6: '已结束',
|
// num4: thisMonthIncrease.新增同比 === undefined ? '0.0': thisMonthIncrease.新增同比 >= 0 ? `+${Number(thisMonthIncrease.新增同比 || 0).toFixed(1)}`:`- ${Number(Math.abs(thisMonthIncrease.新增同比 || 0)).toFixed(1)}`,
|
num5: thisMonthIncrease.新增环比 === undefined ? '0.0' : thisMonthIncrease.新增环比 >= 0 ? `+${Number(thisMonthIncrease.新增环比 || 0).toFixed(1)}` : `- ${Number(Math.abs(thisMonthIncrease.新增环比 || 0)).toFixed(1)}`,
|
num6: thisMonthIncrease.本月新增 || 0
|
|
},
|
{
|
name: '调解成功率',
|
title1: '成功',
|
title2: '不成功',
|
title3: '转诉讼',
|
sum: allCanal.总调解成功率,
|
num1: allCanal.调解成功数,
|
num2: allCanal.调解不成功数,
|
num3: allCanal.转诉讼,
|
name2: '本月调解成功率',
|
// title4: '同比',
|
title5: '比上月',
|
// num4: thisMonthIncrease.本月调解成功同比 === undefined ? '0.0':thisMonthIncrease.本月调解成功同比 >= 0 ? `+${Number(thisMonthIncrease.本月调解成功同比 || 0).toFixed(1)}`:`- ${Number(Math.abs(thisMonthIncrease.本月调解成功同比 || 0)).toFixed(1)}` ,
|
num5: thisMonthIncrease.本月调解成功环比 === undefined ? '0.0' : thisMonthIncrease.本月调解成功环比 >= 0 ? `+${Number(thisMonthIncrease.本月调解成功环比 || 0).toFixed(1)}` : `- ${Number(Math.abs(thisMonthIncrease.本月调解成功环比 || 0)).toFixed(1)}`,
|
num6: thisMonthIncrease.本月调解成功率 || 0
|
}];
|
// 四张卡片的数据
|
const fourCardData1 = [{
|
title: '机构登记',
|
name1: '调解成功',
|
name2: '调解成功率',
|
name3: '调解不成功',
|
name4: '待受理',
|
name5: '待调解',
|
name6: '调解中',
|
name7: '退回申请人',
|
name8: '不予受理',
|
name9: '申请人撤回',
|
sum: allCanal.机构登记,
|
num1: allCanal.机构登记调解成功,
|
num2: allCanal.机构登记调解成功率,
|
num3: allCanal.机构登记调解不成功,
|
num4: allCanal.机构登记待受理,
|
num5: allCanal.机构登记待调解,
|
num6: allCanal.机构登记调解中,
|
num7: allCanal.机构登记退回申请人,
|
num8: allCanal.机构登记不予受理,
|
num9: allCanal.机构登记申请人撤回,
|
}, {
|
title: '小程序申请',
|
name1: '调解成功',
|
name2: '调解成功率',
|
name3: '调解不成功',
|
name4: '待受理',
|
name5: '待调解',
|
name6: '调解中',
|
name7: '退回申请人',
|
name8: '不予受理',
|
name9: '申请人撤回',
|
sum: allCanal.小程序,
|
num1: allCanal.小程序调解成功,
|
num2: allCanal.小程序调解成功率,
|
num3: allCanal.小程序调解不成功,
|
num4: allCanal.小程序待受理,
|
num5: allCanal.小程序待调解,
|
num6: allCanal.小程序调解中,
|
num7: allCanal.小程序退回申请人,
|
num8: allCanal.小程序不予受理,
|
num9: allCanal.小程序申请人撤回,
|
}];
|
const fourCardData2 = [{
|
title: '人民调解系统联动',
|
name1: '调解成功',
|
name2: '调解中',
|
name3: '调解不成功',
|
name4: '调解成功率',
|
sum: allCanal.市人民调解系统,
|
num1: allCanal.市人民调解系统调解成功,
|
num2: allCanal.市人民调解系统调解中,
|
num3: allCanal.市人民调解系统调解不成功,
|
num4: allCanal.人民调解系统转入调解成功率,
|
},
|
// {
|
// title: '网格系统',
|
// name1: '调解成功',
|
// name2: '调解中',
|
// name3: '调解不成功',
|
// name4: '调解成功率',
|
// sum: allCanal.网格联动,
|
// num1: allCanal.网格联动调解成功,
|
// num2: allCanal.网格联动调解中,
|
// num3: allCanal.网格联动调解不成功,
|
// num4: allCanal.网格系统转入调解成功率,
|
// }
|
];
|
// 实时动态
|
const realTimeData_tableColumns = [
|
{
|
title: '案件标题',
|
dataIndex: 'case_title',
|
width: 230,
|
ellipsis: true, // 是否显示……text. 默认false. 如果为true，则会隐藏原始数据
|
},
|
{
|
title: '办理进度',
|
dataIndex: 'task_node_name',
|
},
|
{
|
title: '办理时间',
|
dataIndex: 'finish_time',
|
width: 150,
|
ellipsis: true,
|
},
|
{
|
title: '调解组织',
|
dataIndex: 'mediate_unit_name',
|
width: 180,
|
ellipsis: true,
|
},
|
{
|
title: '调解员',
|
dataIndex: 'mediator',
|
}
|
];
|
// selectTree 的数据
|
const [options, setOptions] = useState([]);
|
|
//饼图-函数
|
function changeOriginOfTypeDistribution(e) {
|
setOriginOfTypeDistribution(e.target.value);
|
//判断并发送对应请求 获取数据
|
if (e.target.value === '机构') {
|
const sumitdate = { ...oldSumitData, canal: '22_00001-1' };
|
getTypeDistrData(sumitdate);
|
} else if (e.target.value === '小程序') {
|
const sumitdate = { ...oldSumitData, canal: '22_00001-2' };
|
getTypeDistrData(sumitdate);
|
} else if (e.target.value === '人民调解系统') {
|
const sumitdate = { ...oldSumitData, canal: '22_00001-4' };
|
getTypeDistrData(sumitdate);
|
}
|
else {
|
const sumitdate = { ...oldSumitData, canal: '22_00001-5' };
|
getTypeDistrData(sumitdate);
|
}
|
};
|
|
//获取工作排名的个数，便于遍历
|
const [workRankDataLength, setWorkRankDataLength] = useState(10);
|
const [workRankData, setWorkRankData] = useState([
|
{
|
id: '1',
|
name: '',
|
color: ['l(0) 0:#f85859 1:#fe9f81', '#EDEEF2'],
|
num: ''
|
}, {
|
id: '2',
|
name: '',
|
color: ['l(0) 0:#fd8643 0.2:#fd8643 1:#fdc47f', '#EDEEF2'],
|
num: ''
|
}, {
|
id: '3',
|
name: '',
|
color: ['l(0) 0:#ffb103 1:#ffe09b', '#EDEEF2'],
|
num: ''
|
}, {
|
id: '4',
|
name: '',
|
color: ['l(0) 0:#006ed3 1:#48a7ff', '#EDEEF2'],
|
num: ''
|
}, {
|
id: '5',
|
name: '',
|
color: ['l(0) 0:#006ed3 1:#48a7ff', '#EDEEF2'],
|
num: ''
|
}, {
|
id: '6',
|
name: '',
|
color: ['l(0) 0:#006ed3 1:#48a7ff', '#EDEEF2'],
|
num: ''
|
}, {
|
id: '7',
|
name: '',
|
color: ['l(0) 0:#006ed3 1:#48a7ff', '#EDEEF2'],
|
num: ''
|
}, {
|
id: '8',
|
name: '',
|
color: ['l(0) 0:#006ed3 1:#48a7ff', '#EDEEF2'],
|
num: ''
|
}, {
|
id: '9',
|
name: '',
|
color: ['l(0) 0:#006ed3 1:#48a7ff', '#EDEEF2'],
|
num: ''
|
}, {
|
id: '10',
|
name: '',
|
color: ['l(0) 0:#006ed3 1:#48a7ff', '#EDEEF2'],
|
num: ''
|
}
|
]);
|
// 按钮点击
|
const drawRef = useRef(null);
|
|
//4张卡片滑动需要的参数
|
const [downX, setDownX] = useState(0);
|
const [moveX, setMoveX] = useState(0);
|
const [scrollX, setScrollX] = useState(0);
|
// const drawRef = useRef(null);
|
const [scrollFlag, setScrollFlag] = useState(true);
|
const [scrollPosition, setScrollPosition] = useState(0);
|
|
function getMouseStart(e) {
|
setScrollFlag(true)
|
setDownX(e.clientX)
|
setScrollPosition(drawRef.current.scrollLeft)
|
};
|
|
function getMouseMove(e) {
|
if (scrollFlag) {
|
const container = drawRef.current;
|
setMoveX(e.clientX);
|
setScrollX(moveX - downX);
|
if (scrollX < 0 && scrollPosition > 0) {
|
container.scrollLeft = scrollPosition - scrollX;
|
setScrollPosition(scrollPosition - scrollX);
|
} else {
|
container.scrollLeft = scrollPosition - scrollX;
|
setScrollPosition(scrollPosition - scrollX);
|
}
|
}
|
};
|
|
function getMouseUp(e) {
|
setScrollFlag(false)
|
};
|
// 开启定时器
|
function InitialScroll(data, type) {
|
let v = document.getElementsByClassName("ant-table-tbody")[0];
|
// 只有当大于4条数据的时候 才会滚动
|
|
if (data.length > 5) {
|
const animation = v?.animate([
|
// 动画的初始样式
|
{ transform: 'translateY(0)' },
|
// 动画的结束样式
|
{ transform: `translateY(-90%)` },
|
], {
|
// 动画的持续时间
|
duration: 60000, // 60秒
|
iterations: Infinity,
|
});
|
if (type === 'start' && data.length > 5) {
|
animation.play();
|
}
|
if (type === 'stop') {
|
animation.pause();
|
}
|
}
|
if (data.length <= 5) {
|
if (type === 'stop') {
|
// animation.pause();
|
}
|
if (type === 'start') {
|
// animation.play();
|
}
|
}
|
|
}
|
//工作排名-单选框函数
|
async function changeOriginOfWorkloadRanking(e) {
|
setOriginOfWorkloadRanking(e.target.value);
|
//这里判断类型 改变数据 需要备份变量改变数据
|
if (e.target.value === "收案数") {
|
const caseData = JSON.parse(JSON.stringify(await getSelectWorkTopData({ countRange: oldSumitData.countRange, timeType: oldSumitData.timeType, timeStart: oldSumitData.timeStart, timeEnd: oldSumitData.timeEnd, workTopType: '1' })));
|
//处理caseData数据为空的情况
|
if (caseData.length !== 0) {
|
setPercentNum(caseData[0]['收案数'] * 1.2);
|
}
|
setWorkRankData(workRankData.map((item, index) => {
|
if (index <= caseData.length - 1) {
|
return {
|
...item,
|
num: caseData[index]['收案数'],
|
name: caseData[index]["name"],
|
};
|
}
|
return item;
|
}));
|
} else {
|
const successData = JSON.parse(JSON.stringify(await getSelectWorkTopData({ countRange: oldSumitData.countRange, timeType: oldSumitData.timeType, timeStart: oldSumitData.timeStart, timeEnd: oldSumitData.timeEnd, workTopType: '2' })));
|
if (successData.length !== 0) {
|
setPercentNum(successData[0]['调解成功数'] * 1.2);
|
}
|
setWorkRankData(workRankData.map((item, index) => {
|
if (index <= successData.length - 1) {
|
return {
|
...item,
|
num: successData[index]['调解成功数'],
|
name: successData[index]["name"],
|
};
|
}
|
return item;
|
}));
|
}
|
};
|
|
//选择器
|
function handleSelection(value, title) {
|
console.log(value, title, typeof value, typeof title, 'value', 'title')
|
console.log(selectedOption, 'selectedOption')
|
setSelectedOption(title);
|
setMediateUnitIds(title[0] === '全部' ? '' : value);
|
};
|
|
//statisticalRange 选择器是否显示&设置传参值
|
function onStatisticalRangeChange(e) {
|
setStatisticalRange(e.target.value);
|
if (e.target.value === '全部下级单位') {
|
setCountRange(3);
|
// 当选中自定义时，显示日期选择框
|
setShowSelect(true);
|
} else if (e.target.value === '本单位和全部下级单位') {
|
setMediateUnitIds();
|
setCountRange(1);
|
setShowSelect(false);
|
} else {
|
setMediateUnitIds();
|
setCountRange(2);
|
setShowSelect(false);
|
}
|
};
|
|
//日期选择框是否显示&设置传参值
|
function onTimeRadioChange(e) {
|
setTimeRadioValue(e.target.value);
|
if (e.target.value === 1) {
|
setTimeStart(formattedDate);
|
setTimeEnd(timeEndtemp);
|
setRangePicker(false);
|
setShowMonthCard(true);
|
setTimeType(1);
|
} else {
|
setTimeType(2);
|
setRangePicker(true);
|
//设置总览的2张卡片不展示
|
setShowMonthCard(false);
|
}
|
};
|
|
//获取日期框的开始日期和结束日期
|
function handleRangeChange(dates, dateStrings) {
|
setTimeStart(dateStrings[0]);
|
setTimeEnd(dateStrings[1]);
|
};
|
|
// 搜索 or 重置
|
async function handleSearch(type, data) {
|
setAlertVisible(true);
|
if (type === 'search') {
|
// 当选中自定义时，显示日期选择框
|
if (statisticalRange === '全部下级单位') {
|
setAlertRange(selectedOption);
|
} else {
|
setAlertRange(statisticalRange);
|
}
|
if (timeRadioValue === 1) {
|
setAlertStartTime('全年（' + formattedDate)
|
setAlertEndTime('今)')
|
setRangePicker(false);
|
} else {
|
setAlertStartTime(timeStart);
|
setAlertEndTime(timeEnd);
|
setRangePicker(true);
|
}
|
const submitData = { countRange, timeType, timeStart, timeEnd, mediateUnitIds, workTopType: '1', sortType: '1', sortField: '1', canal: '22_00001-1' };
|
getViewData(submitData);
|
setOldSumitData(submitData);
|
return;
|
}
|
if (type === 'reset') {
|
setAlertVisible(true);
|
setTimeRadioValue(1);
|
setShowSelect(false);
|
setRangePicker(false);
|
setStatisticalRange('本单位和全部下级单位');
|
setAlertEndTime('今)')
|
setAlertStartTime('全年（' + formattedDate);
|
setCountRange(1);
|
setTimeType(1);
|
setTimeStart(formattedDate);
|
setTimeEnd(timeEndtemp);
|
setOriginOfTypeDistribution('机构');
|
setOriginOfTrendAnalysis('收集情况');
|
setShowMonthCard(true);
|
setAlertRange('本单位和全部下级单位');
|
//重置工作排名
|
setOriginOfWorkloadRanking('收案数');
|
setSortField(1);
|
setSortType(1);
|
const submitData = { countRange: '1', timeType: '1', timeStart: formattedDate, timeEnd: timeEndtemp, mediateUnitIds: '', workTopType: '1', sortType: '1', sortField: '1', canal: '22_00001-1' };
|
getViewData(submitData);
|
let v = document.getElementsByClassName("ant-table-tbody")[0];
|
const animation = v?.animate([
|
// 动画的初始样式
|
{ transform: 'translateY(0)' },
|
// 动画的结束样式
|
{ transform: `translateY(-90%)` },
|
], {
|
// 动画的持续时间
|
duration: 60000, // 60秒
|
iterations: Infinity,
|
});
|
animation.play();
|
setOldSumitData(submitData);
|
return;
|
}
|
}
|
|
//大部分数据
|
async function getViewData(submitData) {
|
global.setSpinning(true);
|
const res = await getAllDataApi(submitData);
|
global.setSpinning(false);
|
if (res.type) {
|
const data = res.data;
|
setAllCanal(res.data.allCanal || []);
|
setRealTimeDynamicList(res.data.realTimeDynamicList || []);
|
setThisMonthIncrease(res.data.thisMonthIncrease || []);
|
let v = document.getElementsByClassName("reportStatistics-table")[0];
|
if (res.data.realTimeDynamicList.length < 5) {
|
const animation = v?.animate([
|
// 动画的初始样式
|
{ transform: 'translateY(0)' },
|
// 动画的结束样式
|
{ transform: `translateY(-90%)` },
|
], {
|
// 动画的持续时间
|
duration: 60000, // 60秒
|
iterations: Infinity,
|
});
|
animation.pause();
|
}
|
setTrendAnalysisList(res.data.trendAnalysisList || []);
|
setTypeDistributionList(res.data.typeDistributionList);
|
const workRankDataJson = JSON.parse(JSON.stringify(res.data.workTopList));
|
setWorkRankDataLength(workRankDataJson.length);
|
if (workRankDataJson.length !== 0) {
|
setPercentNum(workRankDataJson[0]['收案数'] * 1.2);
|
}
|
setWorkRankData(workRankData.map((item, index) => {
|
if (index <= workRankDataJson.length - 1) {
|
return {
|
...item,
|
num: workRankDataJson[index]['收案数'],
|
name: workRankDataJson[index]["name"],
|
};
|
}
|
return item;
|
}));
|
setReportStatisticsList(res.data.reportStatisticsList || []);
|
return data;
|
}
|
}
|
//fun-工作排名
|
async function getWorkTopData(submitData) {
|
global.setSpinning(true);
|
const res = await getWorkTopDataApi(submitData);
|
global.setSpinning(false);
|
if (res.type) {
|
const data = res.data || [];
|
const jsonData = JSON.parse(JSON.stringify(data));
|
const length = res.data.length;
|
setWorkRankDataLength(length); //获取长度 用于判断展示多少条工作排名数据
|
if (res.data.length !== 0) {
|
setPercentNum(jsonData[0]['收案数'] * 1.2);
|
}
|
setWorkRankData(workRankData.map((item, index) => {
|
if (index < length) {
|
return {
|
...item,
|
num: jsonData[index]['收案数'],
|
name: jsonData[index]["name"],
|
};
|
}
|
return item;
|
}));
|
return data;
|
}
|
}
|
|
//fun-工作排名
|
async function getSelectWorkTopData(submitData) {
|
global.setSpinning(true);
|
const res = await getWorkTopDataApi(submitData);
|
global.setSpinning(false);
|
if (res.type) {
|
const data = res.data || [];
|
return data;
|
}
|
}
|
//类型分布
|
async function getTypeDistrData(submitData) {
|
global.setSpinning(true);
|
const res = await getTypeDistrDataApi(submitData);
|
global.setSpinning(false);
|
if (res.type) {
|
const data = res.data;
|
setTypeDistributionList(res.data);
|
return data;
|
}
|
}
|
|
//趋势分析
|
async function getChartData(submitData) {
|
global.setSpinning(true);
|
const res = await getChartDataApi(submitData);
|
global.setSpinning(false);
|
if (res.type) {
|
setTrendAnalysisList(res.data || []);
|
return data;
|
}
|
}
|
|
//报表统计
|
async function getResReportData(submitData) {
|
global.setSpinning(true);
|
const res = await getRepoStatDataApi(submitData);
|
global.setSpinning(false);
|
if (res.type) {
|
setReportStatisticsList(res.data || []);
|
return data;
|
}
|
}
|
|
// 导出表格
|
async function ExportTable() {
|
let list = [];
|
list = realTimeDynamicList;
|
if (list.length === 0) {
|
$$.info({ type: 'error', content: '暂无数据可以导出' });
|
} else {
|
$$.modalInfo({
|
title: '导出报表统计数据确认',
|
content: <span>确认导出当前报表统计包含的<span className='ledger-main-title'>全部案件信息</span> 吗？</span>,
|
okText: '确定导出',
|
cancelText: '我再想想',
|
onOk: async () => {
|
let data = JSON.parse(JSON.stringify(search));
|
let params = $$.getQueryObj(data);
|
let userId = $$.getLocal('customerSystemUser')?.userId;
|
let role = $$.getSessionStorage('role');
|
let countRange = oldSumitData.countRange;
|
let timeType = oldSumitData.timeType;
|
let timeStart = oldSumitData.timeStart;
|
let timeEnd = oldSumitData.timeEnd;
|
let sortTypeToExcel = sortType;
|
let sortFieldToExcel = sortField;
|
// window.open(`${$$.appUrl.baseUrl}${$$.appUrl.mediate}/api/v1/caseInfo/exportListToExcel?${params}userId${userId}`);
|
window.location.href = `${$$.appUrl.baseUrl}/${$$.appUrl.mediate}/api/v1/caseInfo/reportStatisticsListToExcel?userId=${userId}&roleId=${role.roleId}&countRange=${countRange}&timeType=${timeType}&timeStart=${timeStart}&timeEnd=${timeEnd}&sortType=${sortTypeToExcel}&sortField=${sortFieldToExcel}`;
|
},
|
});
|
}
|
}
|
|
async function getAllData() {
|
global.setSpinning(true);
|
//发起多个并发请求 存储在res 1 2 3
|
$$.ax.ax.all([getAllDataApi({ countRange: '1', timeType: '1', timeStart, timeEnd, mediateUnitIds: '' }),
|
getUnitSelectTermApi()
|
]).then(
|
$$.ax.ax.spread(function (res1, res2) {
|
global.setSpinning(false);
|
if (res2.type) {
|
let newData = res2.data.slice();
|
newData[0].label = "全部";
|
// newData[0].value = null;
|
console.log(newData, 'newData')
|
const data = newData || [];
|
setOptions(data);
|
}
|
if (res1.type) {
|
setAllCanal(res1.data.allCanal || []);
|
setRealTimeDynamicList(res1.data.realTimeDynamicList || []);
|
const realTimeDynamicListLength = res1.data?.realTimeDynamicList?.length;
|
setThisMonthIncrease(res1.data.thisMonthIncrease || []);
|
//change
|
setTrendAnalysisList(res1.data.trendAnalysisList || []);
|
setTypeDistributionList(res1.data.typeDistributionList);
|
const workRankDataJson = JSON.parse(JSON.stringify(res1.data.workTopList));
|
setWorkRankDataLength(workRankDataJson.length);
|
if (workRankDataJson.length !== 0) {
|
setPercentNum(workRankDataJson[0]['收案数'] * 1.2);
|
}
|
setWorkRankData(workRankData.map((item, index) => {
|
if (index <= workRankDataJson.length - 1) {
|
return {
|
...item,
|
num: workRankDataJson[index]['收案数'],
|
name: workRankDataJson[index]["name"],
|
};
|
} else {
|
return item;
|
}
|
}));
|
setReportStatisticsList(res1.data.reportStatisticsList || []);
|
console.log('111');
|
// 只有当大于4条数据的时候，实时动态才会滚动
|
if (res1.data?.realTimeDynamicList.length > 0) {
|
if (realTimeDynamicListLength > 5) {
|
let v = document.getElementsByClassName("aant-table-tbody")[0];
|
v?.animate([
|
// 动画的初始样式
|
{ transform: 'translateY(0)' },
|
// 动画的结束样式
|
{ transform: `translateY(-90%)` },
|
], {
|
// 动画的持续时间
|
duration: 60000, // 60秒
|
iterations: Infinity,
|
});
|
}
|
}
|
}
|
})
|
);
|
}
|
|
|
console.log('options', options);
|
|
// 初始化
|
useEffect(() => {
|
if (!roleId) return; //判断角色信息
|
getAllData();
|
}, [roleId]);
|
return (
|
<Page pageHead={{
|
title: '调解大数据', subtitle: <span>实时统计分析不同渠道进入多元化解平台的<span className='font-red'>调解案件</span>数据，利用数字化技术生成纠纷化解的最新态势</span>
|
}}>
|
<div>
|
<div className='mediateBigData mediateBigData-card statisticalflterin-size' >
|
<div className='statisticalflterin-title' >
|
<div className='red-icon' ></div>
|
<span>统计筛选</span>
|
</div>
|
<Row >
|
<Col span={12} >
|
<div className='statisticalflterin-body'>
|
<span>统计范围：</span>
|
<Radio.Group onChange={onStatisticalRangeChange} value={statisticalRange} defaultValue={'本单位和全部下级单位'}>
|
<Radio value={'本单位和全部下级单位'}>全部</Radio>
|
<Radio value={'本单位'}>本单位</Radio>
|
<Radio value={'全部下级单位'}>下级单位</Radio>
|
</Radio.Group>
|
{showSelect && <TreeSelect defaultValue='全部' fieldNames={{ label: 'label', value: 'value', children: 'children' }} className='select' onChange={handleSelection} treeData={options} treeDefaultExpandAll popupMatchSelectWidth='false'
|
dropdownStyle={{ minWidth: 350, maxHeight: 500, }}
|
/>}
|
</div>
|
</Col>
|
<Col span={12} >
|
<div className='statisticalflterin-body' >
|
<span >统计时间：</span>
|
<Radio.Group onChange={onTimeRadioChange} value={timeRadioValue} >
|
<Radio value={1}>全年</Radio>
|
<Radio value={2}>自定义</Radio>
|
</Radio.Group>
|
{showRangePicker && <RangePicker onChange={handleRangeChange} className='rangePicker' />}
|
<Space className='statisticalflterin-button'>
|
<Button onClick={() => handleSearch('reset', statisticalRange)} >
|
重置
|
</Button>
|
<Button type="primary" htmlType="submit" onClick={() => handleSearch('search', statisticalRange)} >
|
统计
|
</Button>
|
</Space>
|
</div>
|
</Col>
|
</Row>
|
</div>
|
{alertVisible && (
|
<Alert className='alertStyle' message={
|
<span>已为您生成
|
<span className='font-red'>{alertRange === '全部' ? '全部下级单位' : alertRange}</span>
|
在
|
<span className='font-red'>{alertStartTime}</span>
|
<span className='font-red'>至</span>
|
<span className='font-red'>{alertEndTime}</span>
|
<span>的调解大数据统计分析看板</span>
|
</span>
|
} type="info" closable afterClose={() => { setAlertVisible(false) }} showIcon icon={<img src={mediateBigData_1} className='alertIcon' alt="info-icon" />} />
|
)}
|
|
{/* 这是调解总览 */}
|
<Row className='marginRight' >
|
<Col span={7}>
|
<div className='mediationOverview mediateBigData-card'>
|
<div className='mediationOverview-title' >
|
<div className='red-icon'></div>
|
<span >调解总览</span>
|
</div>
|
<Row className='rowset' >
|
{mediationOverviewData.map((item, index) => {
|
return (
|
<Row className='rowset' >
|
<Col className='overviewcard-border1' style={{
|
width: showMonthCard ? '48.6%' : '100%'
|
}}>
|
<div className='overviewbody-title'>
|
<div className="mediationOverview-font gridd-title">{item.name}</div>
|
<div className="gridd-sumNum mediationOverview-num">{item.sum}{index === 1 ? '%' : ''}</div>
|
</div>
|
<Divider className="divider-margin" />
|
<div className='body-flex' >
|
<div className='griddOne-fontbackgroundCommon'>
|
<span className="mediationOverview-font griddoneAndThree-title2">{item.title1}</span>
|
<span className="mediationOverview-num griddOne-num1Bg' griddOne-num1">{item.num1}</span>
|
</div>
|
<span className="mediationOverview-space"></span>
|
<div className="griddOne-fontbackgroundCommon ">
|
<span className="mediationOverview-font griddOneAndThree-title3">{item.title2}</span>
|
<span className={index === 1 ? 'mediationOverview-num griddOne-num3Bg griddOne-num3' : "mediationOverview-num griddOne-num2Bg griddOne-num2"}>{item.num2}</span>
|
</div>
|
<span className="mediationOverview-space"></span>
|
<div className="griddOne-fontbackgroundCommon ">
|
<span className="mediationOverview-font griddOneAndThree-title4">{item.title3}</span>
|
<span className={index === 1 ? 'mediationOverview-num griddThree-num3Bg griddThree-num3' : "mediationOverview-num griddOne-num3Bg griddOne-num3"}>{item.num3}</span>
|
</div>
|
</div>
|
</Col>
|
{
|
showMonthCard && <Col className='overviewcard-border' >
|
<div className='overviewbody-title'>
|
<div className="mediationOverview-font gridd-title">{item.name2}</div>
|
<div className="gridd-sumNum mediationOverview-num">{item.num6}{index === 1 ? '%' : ''}</div>
|
</div>
|
<Divider className="divider-margin" />
|
{/* <div className='griddTwoAndFour-tongBi' >
|
<span className='mediationOverview-margin mediationOverview-font griddTwoAndFour-title1'
|
>{item.title4}</span>
|
<span className='mediationOverview-margin mediationOverview-num griddTwoAndFour-num1'
|
style={{backgroundColor: index === 0&&thisMonthIncrease.新增同比>0 ? '#FFE1E2' : index === 0&&thisMonthIncrease.新增同比<0?'#E5FFCB':
|
index === 1&&thisMonthIncrease.本月调解成功同比>0 ? '#FFE1E2' : index === 1&&thisMonthIncrease.本月调解成功同比<0?'#E5FFCB':'',
|
color:index === 0&&thisMonthIncrease.新增同比>0 ? '#D1021C' : index === 0&&thisMonthIncrease.新增同比<0?'#52C41A':
|
index === 1&&thisMonthIncrease.本月调解成功同比>0 ? '#D1021C' : index === 1&&thisMonthIncrease.本月调解成功同比<0?'#52C41A':''
|
}}
|
>
|
{item.num4}%
|
</span>
|
</div> */}
|
<div className='griddTwoAndFour-tongBi '>
|
<span className='mediationOverview-margin mediationOverview-font griddTwoAndFour-title2'>{item.title5}</span>
|
<span className='mediationOverview-margin mediationOverview-num griddTwoAndFour-num2'
|
style={{
|
backgroundColor: index === 0 && thisMonthIncrease.新增环比 >= 0 ? '#FFE1E2' : index === 0 && thisMonthIncrease.新增环比 < 0 ? '#E5FFCB' :
|
index === 1 && thisMonthIncrease.本月调解成功环比 >= 0 ? '#FFE1E2' : index === 1 && thisMonthIncrease.本月调解成功环比 < 0 ? '#E5FFCB' : '',
|
color: index === 0 && thisMonthIncrease.新增环比 >= 0 ? '#D1021C' : index === 0 && thisMonthIncrease.新增环比 < 0 ? '#52C41A' :
|
index === 1 && thisMonthIncrease.本月调解成功环比 >= 0 ? '#D1021C' : index === 1 && thisMonthIncrease.本月调解成功环比 < 0 ? '#52C41A' : ''
|
}}
|
>{item.num5}%</span>
|
</div>
|
</Col>
|
}
|
</Row>
|
);
|
})}
|
</Row>
|
</div>
|
</Col>
|
{/*三种情况的案件数 和 4张卡片*/}
|
<Col span={17} >
|
<Row className='mediateBigData-card countByIssueCard' >
|
<Col className='countByIssueCard-div' >
|
<span className='countByIssueCard-serious' >
|
<img className='serious-img' src={mediateBigData_2} />
|
<span >
|
<Row className='countByIssueCard-divider'>
|
<Col className='divider-colInline' >
|
<div className='divider1-paddingTop' >
|
<div className='countByIssueCard-divider1'></div>
|
</div>
|
</Col>
|
<Col className='divider-colInline'>
|
<Row>
|
<span className='mediationOverview-font'>严重超过处置时限<span className='mediationOverview-num serious-num'>0</span>件</span>
|
</Row>
|
</Col>
|
<Row>
|
<div className='countByIssueCard-divider2' ></div>
|
<div className='countByIssueCard-divider3' ></div>
|
</Row>
|
</Row>
|
</span>
|
</span>
|
<span style={{ width: '10%', display: 'inline-block' }}></span>
|
<span className='countByIssueCard-warn'>
|
<img className='warn-img' src={mediateBigData_3} />
|
<span >
|
<Row className='countByIssueCard-divider '>
|
<Col className='divider-colInline'>
|
<div className='divider1-paddingTop' >
|
<div className='countByIssueCard-divider1'></div>
|
</div>
|
</Col>
|
<Col className='divider-colInline'>
|
<Row>
|
<span className='mediationOverview-font'>轻微超过处置时限<span className='mediationOverview-num serious-num'>0</span>件</span>
|
</Row>
|
</Col>
|
<Row>
|
<div className='countByIssueCard-divider2' ></div>
|
<div className='countByIssueCard-divider3' ></div>
|
</Row>
|
</Row>
|
</span>
|
</span>
|
<span style={{ width: '10%', display: 'inline-block' }}></span>
|
<span className='countByIssueCard-info'>
|
<img className='info-img' src={mediateBigData_4} />
|
<span >
|
<Row className='countByIssueCard-divider'>
|
<Col className='divider-colInline'>
|
<div className='divider1-paddingTop' >
|
<div className='countByIssueCard-divider1'></div>
|
</div>
|
</Col>
|
<Col className='divider-colInline'>
|
<Row>
|
<span className='mediationOverview-font'>处置进度正常<span className='mediationOverview-num serious-num'>0</span>件</span>
|
</Row>
|
</Col>
|
<Row>
|
<div className='countByIssueCard-divider2' ></div>
|
<div className='countByIssueCard-divider4'></div>
|
</Row>
|
</Row>
|
</span>
|
</span>
|
</Col>
|
</Row>
|
{/* 四张卡片 */}
|
<Row >
|
<Col flex='auto' >
|
<div class='outer-container'>
|
|
<div className='scroll-container no_copy' ref={drawRef} onMouseDown={getMouseStart} onMouseMove={getMouseMove} onMouseUp={getMouseUp} >
|
{/* <button className='scroll-button' onClick={() => { drawRef.current.scrollLeft = 300 }} >123</button> */}
|
{fourCardData1.map((item, index) => {
|
return (
|
<div className='scroll-item' >
|
<div >
|
<Row>
|
<Col className={index === 0 ? 'item1-headBg1' : 'item2-headBg1'}>
|
<div className={index === 0 ? 'headLeft1-Bg' : 'headLeft2-Bg'}>
|
<img className='fourCard-img' src={index === 0 ? mediateBigData_5 : mediateBigData_6} />
|
</div>
|
</Col>
|
<Col className={index === 0 ? 'item1-headBg2' : 'item2-headBg2'} flex='auto'>
|
<div className='headRight-title'>{item.title}</div>
|
<div className='headRight-num'>{item.sum}</div>
|
</Col>
|
</Row>
|
</div>
|
<div>
|
<span className='scrollCardMargin mediationOverview-font body-title1'>{item.name1}</span>
|
<span className=' mediationOverview-font body-title2'>{item.name2}</span>
|
<span className=' mediationOverview-font body-title3'>{item.name3}</span>
|
</div>
|
<div>
|
<span className='scrollCardMargin mediationOverview-num body-num1'>{item.num1}</span>
|
<span className='mediationOverview-num body-num2'>{item.num2}%</span>
|
<span className='mediationOverview-num body-num3'>{item.num3}</span>
|
</div>
|
<div >
|
<span className='mediationOverview-font body-title4 scrollCardMargin'>{item.name4}</span>
|
<span className='mediationOverview-font body-title5' >{item.name5}</span>
|
<span className='mediationOverview-font body-title6'>{item.name6}</span>
|
</div>
|
<div>
|
<span className=' mediationOverview-num body-num4 scrollCardMargin'>{item.num4}</span>
|
<span className='mediationOverview-num body-num5'>{item.num5}</span>
|
<span className='mediationOverview-num body-num6'>{item.num6}</span>
|
</div>
|
<div>
|
<span className='scrollCardMargin mediationOverview-font body-title7'>{item.name7}</span>
|
<span className='mediationOverview-font body-title8' >{item.name8}</span>
|
<span className='mediationOverview-font body-title9'>{item.name9}</span>
|
</div>
|
<div>
|
<span className='scrollCardMargin mediationOverview-num body-num7'>{item.num7}</span>
|
<span className='mediationOverview-num body-num8'>{item.num8}</span>
|
<span className='mediationOverview-num body-num9'>{item.num9}</span>
|
</div>
|
</div>
|
);
|
})}
|
|
{fourCardData2.map((item, index) => {
|
return (
|
<div className='scroll-item'>
|
<div >
|
<Row className='verticalSetting'>
|
<Col className={index === 0 ? 'item3-headBg1' : 'item4-headBg1'}>
|
<div className={index === 0 ? 'headLeft3-Bg' : 'headLeft4-Bg'}>
|
<img className='fourCard-img' src={index === 0 ? mediateBigData_7 : mediateBigData_8} />
|
</div>
|
</Col>
|
<Col className={index === 0 ? 'item3-headBg2' : 'item4-headBg2'} flex='auto'>
|
<div className='headRight-title'>{item.title}</div>
|
<div className='headRight-num'>{item.sum}</div>
|
</Col>
|
</Row>
|
</div>
|
<div className='item3-body'>
|
<div>
|
<span className='mediationOverview-font item3-title1'>{item.name1}</span>
|
<span className='mediationOverview-font item3-title2' >{item.name2}</span>
|
<span className='mediationOverview-font item3-title3'>{item.name3}</span>
|
</div>
|
<div>
|
<span className='mediationOverview-num item3-num1'>{item.num1}</span>
|
<span className='mediationOverview-num item3-num2'>{item.num2}</span>
|
<span className='mediationOverview-num item3-num3'>{item.num3}</span>
|
</div>
|
<div>
|
<span className='mediationOverview-font item3-title4'>{item.name4}</span>
|
</div>
|
<div>
|
<span className='mediationOverview-num item3-num4'>{item.num4}%</span>
|
</div>
|
<div>
|
<span className=' verticalSetting'></span>
|
</div>
|
</div>
|
</div>
|
);
|
})}
|
</div>
|
</div>
|
</Col>
|
</Row>
|
</Col>
|
</Row>
|
{/* 这是实时动态 和 类型分布 */}
|
<Row className='cardMargin2' gutter={[23, 0]} >
|
<Col span={14}>
|
<div className='mediateBigData-card realTimeData-card'>
|
<Col>
|
<div className='realTimeData-title' >
|
<div className='red-icon'></div>
|
<span >实时动态</span>
|
</div>
|
<div className='testBG' onMouseLeave={() => {
|
InitialScroll(realTimeDynamicList, 'start');
|
}}
|
onMouseEnter={() => {
|
InitialScroll(realTimeDynamicList, 'stop');
|
}}>
|
<Table className='realTimeData-table' size='small' pagination={false} columns={realTimeData_tableColumns} dataSource={realTimeDynamicList} scroll={{ y: 176 }}
|
/>
|
</div>
|
</Col>
|
</div>
|
</Col>
|
<Col span={10}>
|
<div className='mediateBigData-card typeDistribution-card' >
|
<div className='typeDistribution-head'>
|
<div className='typeDistribution-title' >
|
<div className='red-icon'></div>
|
<span >类型分布</span>
|
</div>
|
<div className='typeDistribution-RadioPos'>
|
<Radio.Group size="small" className='typeDistribution-radioGroup' value={originOfTypeDistribution} onChange={changeOriginOfTypeDistribution}>
|
<Radio.Button className='typeDistribution-radioItem1' value="机构">机构</Radio.Button>
|
<Radio.Button className='typeDistribution-radioItem2' value="小程序">小程序</Radio.Button>
|
<Radio.Button className='typeDistribution-radioItem3' value="人民调解系统">人民调解系统</Radio.Button>
|
<Radio.Button className='typeDistribution-radioItem4' value="网格">网格</Radio.Button>
|
</Radio.Group>
|
</div>
|
</div>
|
|
{typeDistributionList.length !== 0 ?
|
<div className='pie_style'><TypeDistribution_Pie typeDistributionList={typeDistributionList} /></div>
|
:
|
<div className='typeDistEmpty'> <Empty /></div>}
|
</div>
|
|
</Col>
|
</Row>
|
{/* 这是趋势分析 */}
|
<Row Row className='cardMargin2' gutter={[23, 0]} >
|
<Col span={14} className='mediateBigData-card trendAnalysis-card' >
|
<div>
|
<div className='typeDistribution-head'>
|
<div className='trendAnalysis-title' >
|
<div className='red-icon'></div>
|
<span >趋势分析</span>
|
</div>
|
<div className='typeDistribution-RadioPos'>
|
<Radio.Group size="small" className='typeDistribution-radioGroup' value={originOfTrendAnalysis} onChange={(e) => { getChartData(oldSumitData); setOriginOfTrendAnalysis(e.target.value) }}>
|
<Radio.Button className='typeDistribution-radioItem1' value="收集情况">收集情况</Radio.Button>
|
<Radio.Button className='typeDistribution-radioItem2' value="调解成功率">调解成功率</Radio.Button>
|
</Radio.Group>
|
</div>
|
</div>
|
{trendAnalysisList.length !== 0 ?
|
<div className='mychartMargin'>
|
<MyChart trendAnalysisList={trendAnalysisList} roleId={roleId} originOfTreAnaly={originOfTrendAnalysis} />
|
</div> :
|
<Empty style={{ marginTop: '80px' }} />
|
}
|
</div>
|
</Col>
|
{/* 工作排名 */}
|
<Col span={10}>
|
<div className='mediateBigData-card workloadRanking-card'>
|
<div className='typeDistribution-head'>
|
<div className='workloadRanking-title' >
|
<div className='red-icon'>
|
</div>
|
<span >工作排名</span>
|
</div>
|
<div className='typeDistribution-RadioPos'>
|
<Radio.Group size="small" className='typeDistribution-radioGroup' value={originOfWorkloadRanking} onChange={changeOriginOfWorkloadRanking} defaultValue={'收案数'}>
|
<Radio.Button className='typeDistribution-radioItem1' value="收案数">收案数</Radio.Button>
|
<Radio.Button className='typeDistribution-radioItem2' value="调解成功数">调解成功数</Radio.Button>
|
</Radio.Group>
|
</div>
|
</div>
|
<div className='workloadRanking-body'>
|
{workRankData.map((item, index) => {
|
if (index < workRankDataLength && workRankDataLength !== 0) {
|
return (
|
<div className='rankingItem'>
|
<div className={index === 0 ? 'item-num item-numFirst' : index === 1 ? ' item-num item-numSecond' : index === 2 ? 'item-num item-numThird' : 'item-num'}>
|
<div>{item.id}</div>
|
</div>
|
<Tooltip className='item-name' title={item.name}>
|
<span >{item.name}</span>
|
</Tooltip>
|
<div className='test1' style={{ width: '65%' }} >
|
<RankProgress percent={item.num / percentNum} color={item.color} />
|
</div>
|
<div className='item-count'>{item.num}</div>
|
</div>
|
|
);
|
}
|
})}
|
{workRankDataLength === 0 ? <Empty style={{ marginTop: '80px' }} /> : null}
|
</div>
|
</div>
|
</Col>
|
</Row>
|
{/* 报表统计 */}
|
<div className='mediateBigData-card reportStatistics-card' >
|
<div className='reportStatistics-head'>
|
<div className='reportStatistics-title' >
|
<div className='red-icon'>
|
</div>
|
<span >报表统计</span>
|
</div>
|
<div className='reportStatistics-buttonWide'>
|
<Button htmlType="submit" className='reportStatistics-button' onClick={() => ExportTable()}>
|
导出
|
</Button>
|
</div>
|
</div>
|
<div className='reportStatistics-body'>
|
<Table className='reportStatistics-table' columns={reportStatisticsColumns} dataSource={reportStatisticsList} size="small" pagination={false} scroll={{ y: 400 }} onChange={(pagination, filters, sorter) => {
|
const fieldData = [
|
{ name: '录入总数', value: 1 },
|
{ name: '调解成功数', value: 2 },
|
{ name: '调解中', value: 3 },
|
{ name: '司法确认数', value: 4 },
|
{ name: '小程序数', value: 5 },
|
{ name: '本月新增', value: 6 },
|
{ name: '调解失败数', value: 7 },
|
{ name: '线上转诉', value: 8 }
|
];
|
fieldData.map((item, index) => {
|
if (item.name === sorter.field) {
|
setSortField(item.value);
|
if (sorter.order === 'ascend') {
|
setSortType(2);
|
}
|
if (sorter.order === 'descend') {
|
setSortType(1);
|
}
|
}
|
})
|
}} />
|
</div>
|
</div>
|
</div >
|
</Page >
|
);
|
};
|
export default MediateBigData;
|
