import React, { useEffect, useState } from 'react';
|
import NewPage from '@/components/NewPage';
|
import NewTableSearch from '@/components/NewTableSearch';
|
import * as $$ from '@/utils/utility';
|
import { Form, Spin } from 'antd';
|
import { analysis } from '@/assets/images'
|
import { Modal, Alert } from '@arco-design/web-react';
|
import * as echarts from 'echarts';
|
import './index.less';
|
import TimeoutDialog from './component/TimeoutDialog.jsx';
|
|
function treeByUserIdApi(data) {
|
return $$.ax.request({ url: 'syRegion/treeByUserId2', type: 'get', service: 'sys', data });
|
}
|
|
function getStatisticsData(data) {
|
return $$.ax.request({ url: 'analysis/statistics', type: 'get', service: 'mediate', data });
|
}
|
|
function getTimeLineData(data) {
|
return $$.ax.request({ url: 'analysis/countRepeatedCasesByTime', type: 'post', service: 'mediate', data });
|
}
|
|
function getAreaBarData(data) {
|
return $$.ax.request({ url: 'analysis/countRepeatedCasesByArea', type: 'post', service: 'mediate', data });
|
}
|
|
function getTypePieData(data) {
|
return $$.ax.request({ url: 'analysis/countRepeatedCasesByCaseType', type: 'post', service: 'mediate', data });
|
}
|
|
const WorkEfficiency = () => {
|
const [form] = Form.useForm();
|
//静态数据
|
let timeoutChart, evaluateEcharts, dateVisitsLine, areaVisitsBar, repeatVisitsPie;
|
const list = [
|
{
|
name: 'fp',
|
style: {
|
border: '1px solid #B6DDF1',
|
background: '#e8f8ff',
|
},
|
label: '事项分派',
|
className: 'img1',
|
},
|
// {
|
// name: 'qs',
|
// style: {
|
// border: '1px solid #aff0b5',
|
// background: '#e8ffea',
|
// },
|
// label: '事项签收',
|
// className: 'img2',
|
// },
|
{
|
name: 'sl',
|
style: {
|
border: '1px solid #ddbef6',
|
background: '#f5e8ff',
|
},
|
label: '事项受理',
|
className: 'img3',
|
},
|
{
|
name: 'blz',
|
style: {
|
border: '1px solid #b5f5ec',
|
background: '#e6fffb',
|
},
|
label: '事项办理',
|
className: 'img4',
|
},
|
{
|
name: 'sp',
|
style: {
|
border: '1px solid #c3e7fe',
|
background: '#e8f7ff',
|
},
|
label: '申请审批',
|
className: 'img5',
|
},
|
{
|
name: 'db',
|
style: {
|
border: '1px solid #ffe7ba',
|
background: '#fff7e6',
|
},
|
label: '督办回复',
|
className: 'img6',
|
},
|
]//平均时长list
|
const timeoutList = [
|
{
|
name: 'fpcs',
|
label: '分派超时',
|
},
|
// {
|
// name: 'qscs',
|
// label: '签收超时',
|
// },
|
{
|
name: 'slcs',
|
label: '受理超时',
|
},
|
{
|
name: 'dbcs',
|
label: '督办回复超时',
|
},
|
]//超时list
|
const attackSourcesColor = [
|
new echarts.graphic.LinearGradient(0, 1, 1, 1, [
|
{ offset: 0, color: 'rgba(26,111,184,1)' },
|
{ offset: 1, color: 'rgba(26,111,184,0.1)' },
|
]),
|
new echarts.graphic.LinearGradient(0, 1, 1, 1, [
|
{ offset: 0, color: 'rgba(52,145,250,1)' },
|
{ offset: 1, color: 'rgba(52,145,250,0.1)' },
|
]),
|
new echarts.graphic.LinearGradient(0, 1, 1, 1, [
|
{ offset: 0, color: 'rgba(19,194,194,1)' },
|
{ offset: 1, color: 'rgba(19,194,194,0.1)' },
|
]),
|
new echarts.graphic.LinearGradient(0, 1, 1, 1, [
|
{ offset: 0, color: 'rgba(239,108,36,1)' },
|
{ offset: 1, color: 'rgba(239,108,36,0.1)' },
|
]),
|
new echarts.graphic.LinearGradient(0, 1, 1, 1, [
|
{ offset: 0, color: 'rgba(245,63,63,1)' },
|
{ offset: 1, color: 'rgba(245,63,63,0.1)' },
|
]),
|
];//当事人评价柱状图颜色
|
const dialogNameMap = {
|
'fpcs': '分派超时列表',
|
'qscs': '签收超时列表',
|
'slcs': '受理超时列表',
|
'dbcs': '督办回复超时列表',
|
}
|
//响应式数据
|
const [timeoutKey, setTimeoutKey] = useState('');//超时任务选中key
|
const [visible, setVisible] = useState(false);//超时任务弹窗
|
const [loading, setLoading] = useState(false);//页面loading
|
const [treeList, setTreeList] = useState([]);//查询的区域树数据
|
const [labels, setLabels] = useState([]); // 筛选区域的中文
|
const [search, setSearch] = useState({});// 搜索数据
|
const [caseTypeNames, setCaseTypeNames] = useState([]);// 显示纠纷类型中文
|
const [temporaryCaseType, setTemporaryCaseType] = useState([]);// 筛选纠纷类型的中文
|
const [avgDurationDTO, setAvgDurationDTO] = useState({});//平均时长数据
|
const [statisticsGroupDTO, setStatisticsGroupDTO] = useState({});//超时任务数据
|
const [normalSearch, setNormalSearch] = useState({});// 默认查询询条件
|
|
useEffect(() => {
|
treeByUserId()
|
handleTimeoutEcharts()
|
// hanldeEvaluateEcharts()
|
// handleVisitsLine()
|
// handleVisitsBar()
|
// handleVisitsPie()
|
return () => {
|
//销毁事件
|
window.removeEventListener('resize', timeoutChart.resize);
|
// window.removeEventListener('resize', evaluateEcharts.resize);
|
// window.removeEventListener('resize', dateVisitsLine.resize);
|
// window.removeEventListener('resize', areaVisitsBar.resize);
|
// window.removeEventListener('resize', repeatVisitsPie.resize);
|
}
|
}, [])
|
|
useEffect(() => {
|
if (normalSearch.level) {
|
handleAllRequest()
|
}
|
}, [normalSearch])
|
|
//超时任务echarts
|
const handleTimeoutEcharts = (xData, yData) => {
|
let chartDom = document.getElementById('timeoutEcharts');
|
timeoutChart = echarts.init(chartDom);
|
let option = {
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'shadow'
|
}
|
},
|
grid: {
|
left: 30,
|
top: 40,
|
right: 0,
|
bottom: 60,
|
},
|
xAxis: {
|
type: 'category',
|
axisTick: { show: false },
|
nameTextStyle: {
|
color: '#1d2129',
|
fontSize: 14,
|
},
|
axisLabel: {
|
interval: 'auto', // 自动旋转标签
|
rotate: 45
|
},
|
data: xData || []
|
},
|
yAxis: {
|
type: 'value',
|
name: '件',
|
nameTextStyle: {
|
color: '#86909c',
|
padding: [0, 24, 0, 0]
|
},
|
},
|
series: [
|
{
|
data: yData || [],
|
type: 'bar',
|
itemStyle: {
|
normal: {
|
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{//右下左上
|
offset: 0,
|
color: '#57A9FB', // 0% 处的颜色
|
}, {
|
offset: 1,
|
color: '#3491FA', // 100% 处的颜色
|
}], false),
|
}
|
},
|
label: {
|
normal: {
|
show: true,
|
position: 'top',
|
fontSize: 14,
|
color: 'rgba(0,0,0,0.85)',
|
},
|
},
|
barWidth: 16,//柱子宽度
|
}
|
]
|
};
|
|
option && timeoutChart.setOption(option);
|
window.addEventListener("resize", timeoutChart.resize);
|
}
|
|
//当事人评价echarts
|
const hanldeEvaluateEcharts = (data = []) => {
|
let chartDom = document.getElementById('evaluateEcharts');
|
evaluateEcharts = echarts.init(chartDom);
|
|
let option = {
|
grid: {
|
top: 15,
|
bottom: -15,
|
right: 0,
|
left: 0,
|
},
|
xAxis: {
|
show: false
|
},
|
yAxis: [
|
{
|
type: 'category',
|
triggerEvent: true,
|
show: true,
|
inverse: true,
|
data: data.map(item => item.name),
|
axisLine: {
|
show: false
|
},
|
splitLine: {
|
show: false
|
},
|
axisTick: {
|
show: false
|
},
|
axisLabel: {
|
interval: 0,
|
color: '#3491FA',
|
align: 'left',
|
verticalAlign: 'bottom',
|
lineHeight: 30,
|
fontSize: 14,
|
padding: [0, 0, 0, 40],
|
formatter: function (value, index) {
|
let sum = 0
|
data.forEach(item => {
|
sum += item.value
|
})
|
return data[index].value + '人/' + ((data[index].value / sum) * 100 || 0).toFixed(2) + '%'
|
},
|
}
|
},
|
],
|
series: [{
|
name: '条',
|
type: 'bar',
|
barBorderRadius: 2,
|
yAxisIndex: 0,
|
data: data,
|
barWidth: 6,
|
itemStyle: {
|
color: function (params) {
|
// 根据dataIndex获取对应的渐变色配置
|
return attackSourcesColor[params.dataIndex]
|
},
|
barBorderRadius: 10 // 可选：设置柱子圆角
|
},
|
label: {
|
normal: {
|
color: '#1d2129',
|
show: true,
|
position: [0, '-20px'],
|
textStyle: {
|
fontSize: 14,
|
fontWeight: 400,
|
fontFamily: 'PingFang SC, PingFang SC-400'
|
},
|
formatter: function (a, b) {
|
return a.name
|
}
|
}
|
}
|
}]
|
};
|
option && evaluateEcharts.setOption(option);
|
window.addEventListener("resize", evaluateEcharts.resize);
|
}
|
|
//重复来访折线图
|
const handleVisitsLine = (data = {}) => {
|
let chartDom = document.getElementById('dateVisitsLine');
|
dateVisitsLine = echarts.init(chartDom);
|
let option = {
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'shadow'
|
}
|
},
|
legend: {
|
icon: 'circle',
|
right: 0,
|
itemWidth: 8,
|
itemGap: 20,
|
data: ['未办结重复来访', '已办结重复来访'],
|
itemStyle: {
|
},
|
},
|
grid: {
|
left: 30,
|
top: 40,
|
right: 0,
|
bottom: 28,
|
},
|
xAxis: {
|
type: 'category',
|
axisTick: { show: false },
|
nameTextStyle: {
|
color: '#1d2129',
|
fontSize: 14,
|
},
|
data: data['已办结重复来访']?.map(item => item.groupByType) || []
|
},
|
yAxis: {
|
type: 'value',
|
name: '件',
|
nameTextStyle: {
|
color: '#86909c',
|
padding: [0, 24, 0, 0]
|
},
|
},
|
series: [
|
{
|
name: '未办结重复来访',
|
data: data['未办结重复来访']?.map(item => item.repeatCount) || [],
|
type: 'line',
|
itemStyle: {
|
normal: {
|
color: '#13C2C2'
|
}
|
},
|
},
|
{
|
name: '已办结重复来访',
|
data: data['已办结重复来访']?.map(item => item.repeatCount) || [],
|
type: 'line',
|
itemStyle: {
|
normal: {
|
color: '#F53F3F'
|
}
|
},
|
}
|
]
|
};
|
|
option && dateVisitsLine.setOption(option);
|
window.addEventListener("resize", dateVisitsLine.resize);
|
}
|
|
//重复来访柱状图
|
const handleVisitsBar = (data = {}) => {
|
let chartDom = document.getElementById('areaVisitsBar');
|
areaVisitsBar = echarts.init(chartDom);
|
let option = {
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'shadow'
|
}
|
},
|
legend: {
|
icon: 'circle',
|
right: 0,
|
itemWidth: 8,
|
itemGap: 20,
|
data: ['未办结重复来访', '已办结重复来访'],
|
itemStyle: {
|
},
|
},
|
grid: {
|
left: 30,
|
top: 40,
|
right: 0,
|
bottom: 28,
|
},
|
xAxis: {
|
type: 'category',
|
axisTick: { show: false },
|
nameTextStyle: {
|
color: '#1d2129',
|
fontSize: 14,
|
},
|
data: data['已办结重复来访']?.map(item => item.groupByType) || []
|
},
|
yAxis: {
|
type: 'value',
|
name: '件',
|
nameTextStyle: {
|
color: '#86909c',
|
padding: [0, 24, 0, 0]
|
},
|
},
|
series: [
|
{
|
name: '未办结重复来访',
|
data: data['未办结重复来访']?.map(item => item.repeatCount) || [],
|
type: 'bar',
|
itemStyle: {
|
normal: {
|
color: '#13C2C2'
|
}
|
},
|
label: {
|
normal: {
|
show: true,
|
position: 'top',
|
fontSize: 14,
|
color: 'rgba(0,0,0,0.85)',
|
},
|
},
|
barWidth: 16,//柱子宽度
|
},
|
{
|
name: '已办结重复来访',
|
data: data['已办结重复来访']?.map(item => item.repeatCount) || [],
|
type: 'bar',
|
itemStyle: {
|
normal: {
|
color: '#F53F3F'
|
}
|
},
|
label: {
|
normal: {
|
show: true,
|
position: 'top',
|
fontSize: 14,
|
color: 'rgba(0,0,0,0.85)',
|
},
|
},
|
barWidth: 16,//柱子宽度
|
}
|
]
|
};
|
|
option && areaVisitsBar.setOption(option);
|
window.addEventListener("resize", areaVisitsBar.resize);
|
}
|
|
//重复来访饼图
|
const handleVisitsPie = (data) => {
|
let chartDom = document.getElementById('repeatVisitsPie');
|
repeatVisitsPie = echarts.init(chartDom);
|
let option = {
|
tooltip: {
|
trigger: 'item',
|
formatter: '{b} : {c} ({d}%)'
|
},
|
color: ['#FFCF8B', '#86E8DD', '#FDCDC5', '#C396ED', '#9FD4FD', '#FCE996'],
|
series: [
|
{
|
name: '分类',
|
type: 'pie',
|
radius: '50%',
|
data: data || [],
|
label: {
|
normal: {
|
formatter: ['{b|{b}}', '{c|{c}件}'].join('\n'),
|
rich: {
|
b: {
|
color: '#000',
|
fontSize: 14,
|
height: 40,
|
fontWeight: 400,
|
},
|
c: {
|
color: '#1a6fb8',
|
fontSize: 14,
|
lineHeight: 5,
|
fontWeight: 400,
|
},
|
},
|
}
|
},
|
labelLine: {
|
normal: {
|
lineStyle: {
|
color: '#E5E5E5',
|
width: 2,
|
},
|
}
|
},
|
}
|
]
|
};
|
|
option && repeatVisitsPie.setOption(option);
|
window.addEventListener("resize", repeatVisitsPie.resize);
|
}
|
|
//点击超时任务
|
const handleClickTiimeout = (item) => {
|
setVisible(true)
|
setTimeoutKey(item.name)
|
}
|
|
// 获取区域字典值
|
const treeByUserId = async () => {
|
const res = await treeByUserIdApi({ areaType: '3' });
|
if (res.type) {
|
let list = res.data || []
|
setTreeList(list);
|
form.setFieldValue('queCode', [list[0].value])
|
setLabels([list[0].label]);
|
setNormalSearch({ level: list[0].level })
|
}
|
}
|
|
//查询、重置、请求集合
|
const handleAllRequest = (data) => {
|
setLoading(true)
|
let values = form.getFieldsValue();
|
//删除原本的时间字段，添加开始结束时间
|
$$.changeTimNeweFormat(values, 'createTime', 'createStart', 'createEnd');
|
$$.changeTimNeweFormat(values, 'closeTime', 'closeStart', 'closeEnd');
|
//转换成开始时间结束时间字段
|
values.createStart = values.createStart ? $$.dateFormat(values.createStart) : '';
|
values.createEnd = values.createEnd ? $$.dateFormat(values.createEnd) : '';
|
values.closeStart = values.closeStart ? $$.dateFormat(values.closeStart) : '';
|
values.closeEnd = values.closeEnd ? $$.dateFormat(values.closeEnd) : '';
|
//纠纷类型处理
|
values.caseType = values.caseType?.length > 0 ? values.caseType[1] : '';
|
//区域处理
|
if (normalSearch.level === '1') {
|
values.queCity = values.queCode?.length >= 1 ? values.queCode[0] : '';
|
values.queArea = values.queCode?.length >= 2 ? values.queCode[1] : '';
|
values.queRoad = values.queCode?.length >= 3 ? values.queCode[2] : '';
|
} else if (normalSearch.level === '2') {
|
values.queArea = values.queCode?.length >= 1 ? values.queCode[0] : '';
|
values.queRoad = values.queCode?.length >= 2 ? values.queCode[1] : '';
|
} else if (normalSearch.level === '3') {
|
values.queRoad = values.queCode?.length >= 1 ? values.queCode[0] : '';
|
}
|
delete values.queCode
|
Promise.all([
|
getAnalysisData(values),
|
// getLineData(values),
|
// getBarData(values),
|
// getPieData(values),
|
]).then(res => {
|
//请求完成
|
setSearch(values);
|
if (temporaryCaseType?.length > 0) {
|
setCaseTypeNames(temporaryCaseType);
|
setTemporaryCaseType([]);
|
}
|
setLoading(false)
|
})
|
}
|
|
//获取效能分析接口
|
const getAnalysisData = async (data) => {
|
const response = await getStatisticsData(data)
|
if (response.type) {
|
const { avgDurationDTO, timeoutTaskDTO, evaluateGroupDTOList } = response.data
|
setAvgDurationDTO(avgDurationDTO)
|
setStatisticsGroupDTO(timeoutTaskDTO.statisticsGroupDTO)
|
let xData = []
|
let yData = []
|
timeoutTaskDTO?.levelGroupDTOList?.forEach(item => {
|
xData.push(item.name)
|
yData.push(item.total)
|
})
|
handleTimeoutEcharts(xData, yData)
|
// hanldeEvaluateEcharts(evaluateGroupDTOList?.map(item => {
|
// return {
|
// name: item.evaluateGrade + '星',
|
// value: item.total
|
// }
|
// }))
|
}
|
}
|
|
//获取时间分组的echarts数据
|
const getLineData = async (data) => {
|
const response = await getTimeLineData(data)
|
if (response.type) {
|
const newData = mergeData(response.data)
|
handleVisitsLine(newData)
|
}
|
}
|
|
//获取地方分组的echarts数据
|
const getBarData = async (data) => {
|
const response = await getAreaBarData(data)
|
if (response.type) {
|
const newData = mergeData(response.data)
|
handleVisitsBar(newData)
|
}
|
}
|
|
//获取类型分组的echarts数据
|
const getPieData = async (data) => {
|
const response = await getTypePieData(data)
|
if (response.type) {
|
handleVisitsPie(response.data?.map(item => {
|
return {
|
name: item.groupByType,
|
value: item.repeatCount
|
}
|
}))
|
}
|
}
|
|
//合并数据算法
|
const mergeData = (data) => {
|
const result = {
|
'未办结重复来访': [],
|
'已办结重复来访': [],
|
};
|
|
// 创建一个集合用于存储所有的 groupByType
|
const groupSet = new Set();
|
|
// 遍历 '未办结重复来访' 数组
|
data['未办结重复来访'].forEach(item => {
|
groupSet.add(item.groupByType);
|
result['未办结重复来访'].push({ ...item });
|
});
|
|
// 遍历 '已办结重复来访' 数组
|
data['已办结重复来访'].forEach(item => {
|
groupSet.add(item.groupByType);
|
result['已办结重复来访'].push({ ...item });
|
});
|
|
// 将所有 unique groupByType 转换为数组
|
const allGroups = Array.from(groupSet);
|
|
// 填充 '未办结重复来访' 数组中的缺失项
|
allGroups.forEach(group => {
|
if (!data['未办结重复来访'].find(item => item.groupByType === group)) {
|
result['未办结重复来访'].push({ groupByType: group, repeatCount: 0 });
|
}
|
if (!data['已办结重复来访'].find(item => item.groupByType === group)) {
|
result['已办结重复来访'].push({ groupByType: group, repeatCount: 0 });
|
}
|
});
|
|
// 按 result['未办结重复来访'] 的顺序对 result['已办结重复来访'] 进行排序
|
let newList = []
|
result['未办结重复来访'].forEach(item => {
|
let obj = result['已办结重复来访'].find(res => res.groupByType == item.groupByType)
|
newList.push(obj)
|
})
|
result['已办结重复来访'] = newList
|
|
return result;
|
}
|
|
return (
|
<NewPage
|
pageHead={
|
{ breadcrumbData: [{ title: '工作台' }, { title: '效能分析' }], title: '效能分析' }
|
}
|
>
|
<div style={{ padding: '0 16px 0 16px' }}>
|
<Spin spinning={loading}>
|
<div className="card">
|
<div className='comprehensive-title'>查询条件</div>
|
<NewTableSearch
|
exportButtonShow={false}
|
labelLength={6}
|
rowNum={4.5}
|
form={form}
|
itemData={[
|
{ type: 'Cascader', name: 'queCode', label: '区域', placeholder: '请选择', changeSelect: true, treedata: treeList },
|
{ type: 'RangePicker', name: 'createTime', label: '登记时间', shortcutsPlacementLeft: true, shortcuts: $$.shortcutsList(), span: 8 },
|
{ type: 'RangePicker', name: 'closeTime', label: '办结时间', shortcutsPlacementLeft: true, shortcuts: $$.shortcutsList(), span: 8 },
|
{
|
type: 'Cascader',
|
name: 'caseType',
|
label: '纠纷类型',
|
placeholder: '请选择',
|
onChange: (value, selectedOptions) => {
|
const names = selectedOptions.map(option => option.label);
|
setTemporaryCaseType(names)
|
},
|
span: 8,
|
treedata: $$.caseTypeSelect.caseTypeSelect,
|
},
|
]}
|
handleReset={() => {
|
form.resetFields();
|
handleAllRequest();
|
}}
|
handleSearch={() => {
|
handleAllRequest()
|
}}
|
searchDom={<div style={{}}><img style={{ width: '14px' }} src={analysis} /> 分析</div>}
|
initialValues={{
|
queCode: [treeList[0]?.value],
|
createTime: [$$.myMoment().startOf('month'), $$.myMoment().endOf('month')]
|
}}
|
/>
|
</div>
|
<div style={{ marginTop: '12px' }}>
|
<Alert
|
type='success'
|
content={<span className='alertTips'>已为您生成
|
<i>{labels.join('/')}</i>{(search.createStart || search.closeStart || search.caseType) && '在'}
|
{search.createStart && <i>登记时间({$$.myTimeFormat(search.createStart, 'YYYY.M.D')}-{$$.myTimeFormat(search.createEnd, 'YYYY.M.D')})</i>}
|
{search.closeStart && <i>{search.createStart && '、'}办结时间({$$.myTimeFormat(search.closeStart, 'YYYY.M.D')}-{$$.myTimeFormat(search.closeEnd, 'YYYY.M.D')})</i>}
|
{search.caseType && <i>{(search.createStart || search.closeStart) && '、'}纠纷类型({caseTypeNames.join('/')})</i>}
|
的效能分析数据
|
</span>}
|
/>
|
</div>
|
<div className='card' style={{ marginTop: '12px' }}>
|
<div className='comprehensive-title'>平均时长</div>
|
<div className='cardList'>
|
{list?.map((item, index) => {
|
return <div className='timeCard' key={item.name}>
|
{index !== 0 && <div className='cardLine'></div>}
|
<div style={{ flex: 1 }}>
|
<div className='cardTop'>
|
<div className='cardImg' style={{ ...item.style }}>
|
<div className={item.className}></div>
|
</div>
|
<div className='cardText'>
|
<div>{item.label}</div>
|
<div>
|
<span>{avgDurationDTO[item.name] || 0}</span>小时/件
|
</div>
|
</div>
|
</div>
|
<div className='cardBottom'>
|
<div className='cardPoint' style={{ background: avgDurationDTO[item.name + 'pjz'] > 0 ? '#F53F3F' : avgDurationDTO[item.name + 'pjz'] < 0 ? '#00B42A' : '#3491FA' }}></div>
|
<div className='cardTip'>
|
{avgDurationDTO[item.name + 'pjz'] > 0 ? '低于' : avgDurationDTO[item.name + 'pjz'] < 0 ? '高于' : '与'}
|
<span style={{ color: '#1A6FB8' }}>平均值</span>
|
<span
|
style={{ color: avgDurationDTO[item.name + 'pjz'] > 0 ? '#F53F3F' : avgDurationDTO[item.name + 'pjz'] < 0 ? '#00B42A' : '' }}
|
>
|
{(avgDurationDTO[item.name + 'pjz'] && avgDurationDTO[item.name + 'pjz'] != 0) ? Math.abs(avgDurationDTO[item.name + 'pjz'] || 0).toFixed(2) + '%' : '相同'}
|
</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
})}
|
</div>
|
</div>
|
<div style={{ marginBottom: '16px', display: 'flex' }}>
|
<div className='card' style={{ flex: 2 }}>
|
<div className='comprehensive-title'>超时任务</div>
|
<div className='timeoutList'>
|
{timeoutList?.map((item, index) => {
|
return <div
|
className='timeoutCard'
|
style={{
|
background: statisticsGroupDTO[item.name] > 0 ? '#ffece8' : '#e8ffea',
|
marginLeft: index !== 0 ? '12px' : 0,
|
border: item.name == timeoutKey ? `1px solid ${statisticsGroupDTO[item.name] > 0 ? '#F53F3F' : '#00B42A'}` : '',
|
boxShadow: item.name == timeoutKey ? `-4px 0px 0px 0px ${statisticsGroupDTO[item.name] > 0 ? '#F53F3F' : '#00B42A'}` : ''
|
}}
|
key={item.name}
|
onClick={() => { handleClickTiimeout(item) }}
|
>
|
<div style={{ marginBottom: '8px' }}>{item.label}</div>
|
<div><span style={{ color: statisticsGroupDTO[item.name] > 0 ? '#F53F3F' : '#00B42A', marginRight: '5px', fontSize: '18px' }}>{statisticsGroupDTO[item.name] || 0}</span>件</div>
|
</div>
|
})}
|
</div>
|
<div id='timeoutEcharts'></div>
|
</div>
|
{/* <div className='card' style={{ flex: 1, , marginLeft: '12px' }}>
|
<div className='comprehensive-title'>当事人评价</div>
|
<div style={{ display: 'flex', height: 'calc(100% - 41px)' }}>
|
<div className='evaluate'>
|
<div className='flowerBox'>
|
<div className='flower'></div>
|
</div>
|
<div style={{ margin: '8px 0' }}>平均得分</div>
|
<div><span style={{ fontSize: '18px', color: '#1a6fb8' }}>{'4.2'}</span>分</div>
|
<div style={{ margin: '8px 0', color: '#86909c' }}>共{'320'}人评价</div>
|
</div>
|
<div id='evaluateEcharts'></div>
|
</div>
|
</div> */}
|
</div>
|
{/* <div className='card' style={{ marginBottom: '16px' }}>
|
<div className='comprehensive-title'>重复来访</div>
|
<div style={{ display: 'flex', height: '300px' }}>
|
<div id='dateVisitsLine'></div>
|
<div id='areaVisitsBar'></div>
|
<div id='repeatVisitsPie'></div>
|
</div>
|
</div> */}
|
<Modal
|
title={
|
<div style={{ textAlign: 'left', fontWeight: '600' }}>
|
{dialogNameMap[timeoutKey]}
|
</div>
|
}
|
style={{ width: '80%' }}
|
onCancel={() => { setVisible(false) }}
|
visible={visible}
|
footer={null}
|
unmountOnExit={true}
|
maskClosable={false}
|
>
|
<TimeoutDialog timeoutKey={timeoutKey} search={search} />
|
</Modal>
|
</Spin>
|
</div>
|
</NewPage>
|
)
|
}
|
|
export default WorkEfficiency;
|
