/*
|
* @Company: hugeInfo
|
* @Author: lwh
|
* @Date: 2024-09-14 15:59:17
|
* @LastEditTime: 2024-09-22 17:22:07
|
* @LastEditors: lwh
|
* @Version: 1.0.0
|
* @Description:
|
*/
|
import React, { useState, useEffect, useRef, useMemo } from 'react';
|
import * as $$ from '../../utils/utility';
|
import { Form, Typography, Row, Col, Space, Divider, Badge } from 'antd';
|
import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
|
import { workDash_1, workDash_2, workDash_3, workDash_4, workDash_5, workDash_6, workDash_7, workDash_8, workDash_9, workDash_10, workDash_11, workDash_12, workDash_13, workDash_14 } from '../../assets/images';
|
import NewPage from '../../components/NewPage/index';
|
import * as echarts from 'echarts';
|
import MyTabsNew from '../../components/MyTabsNew';
|
import TableView from '../../components/TableViewCanSort';
|
import NewTableSearch from '../../components/NewTableSearch';
|
import publicDataStatus from '../../status/publicData';
|
import './index.less'
|
|
const { Link } = Typography;
|
|
// 调度中心列表
|
function getListDataApi(submitData) {
|
return $$.ax.request({ url: 'caseInfo/statistics', type: 'get', data: submitData, service: 'mediate' });
|
}
|
|
// 获取列表分类tab
|
function getTabsDataApi() {
|
return $$.ax.request({ url: 'caseDisp/getApplyCanal', type: 'get', service: 'disp' });
|
}
|
|
|
const WorkDash = () => {
|
const [form] = Form.useForm();
|
|
// 搜索
|
const [search, setSearch] = useState({ page: 1, size: 10, });
|
|
// 数据
|
const [data, setData] = useState({});
|
|
// 调解组织select框数据
|
const [adjustOrgData, setAdjustOrgData] = useState([]);
|
|
// tab切换
|
const [tabKey, setTabKey] = useState('1');
|
|
// 搜索 or 重置
|
function handleSearch(type, session) {
|
if (type === 'recovery') {
|
// 案件详情返回时恢复跳转前查询
|
let obj = Object.assign({}, data.search);
|
if (obj.acceptStart) {
|
obj.acceptTime = [$$.myMoment(obj.acceptStart), $$.myMoment(obj.acceptEnd)];
|
}
|
if (obj.createStart) {
|
obj.createTime = [$$.myMoment(obj.createStart), $$.myMoment(obj.createEnd)];
|
}
|
form.setFieldsValue(obj);
|
getListData(data.search, data.tableActive);
|
return;
|
}
|
if (type === 'reset') {
|
form.resetFields();
|
getListData({ page: 1, size: 10, status: search.status });
|
return;
|
}
|
if (type === 'search') {
|
let values = form.getFieldsValue();
|
$$.changeTimeFormat(values, 'createTime', 'createStart', 'createEnd');
|
$$.changeTimeFormat(values, 'closeTime', 'closeStart', 'closeEnd');
|
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] : '';
|
delete values.queCode
|
getListData({ ...search, ...values, page: 1 });
|
return;
|
}
|
if (type === 'changeTabs' || type === 'changePage') {
|
let obj = type === 'changeTabs' ? { page: 1, status: data } : { page: data[0], size: data[1] };
|
getListData({ ...search, ...obj });
|
}
|
}
|
|
// 表头
|
const columns = () => {
|
const columnsData = [
|
{ title: '登记时间', width: 150, dataIndex: 'createTime', render: (text) => <span>{$$.dateFormat(text)}</span> },
|
{ title: '事项状态', width: 100, dataIndex: 'statusName' },
|
{ title: '事项等级', width: 100, dataIndex: 'caseLevel' },
|
{ title: '事项类型', width: 150, dataIndex: 'caseTypeName' },
|
{ title: '问题属地', width: 100, dataIndex: 'canalName' },
|
{ title: '登记机构', width: 150, dataIndex: 'inputUnitName' },
|
{ title: '承办部门', width: 100, dataIndex: 'assistUnitName' },
|
{ title: '办结时间', width: 100, dataIndex: 'closeTime', render: (text) => <span>{$$.dateFormat(text)}</span> },
|
// 22_00025-1 成功 22_00025-2 化解不成功
|
{ title: '化解结果', width: 100, dataIndex: 'mediResult', render: (text) => <div className={text === '22_00025-1' ? 'comprehensive-green' : text === '22_00025-2' ? 'comprehensive-red' : '-'} >{text === '22_00025-1' ? '化解成功' : text === '22_00025-2' ? '化解不成功' : '-'}</div> },
|
{ title: '申请方', width: 100, dataIndex: 'action', render: (text, record) => <div>{record.plaintiffList?.length > 0 ? record.plaintiffList?.map(i => i.trueName)?.join(',') : '-'}</div> },
|
{ title: '被申请方', width: 100, dataIndex: 'action', render: (text, record) => <div>{record.defendantList?.length > 0 ? record.defendantList?.map(i => i.trueName)?.join(',') : '-'}</div> },
|
{
|
title: '操作',
|
dataIndex: 'action',
|
width: 50,
|
render: (_, record) => {
|
return <Link onClick={() => handleJump(record)}>详情</Link>;
|
},
|
},
|
];
|
return columnsData;
|
};
|
|
// 跳转详情页
|
function handleJump(type, info) {
|
|
}
|
|
// 切换tabs页
|
function tabsOnchange(activeKey) {
|
console.log(activeKey);
|
setTabKey(activeKey);
|
// if (activeKey !== tabKey) {
|
// if (activeKey === '1') {
|
// setTaskList(taskData.dzpList || [])
|
// } else if (activeKey === '2') {
|
// setTaskList(taskData.dqsList || [])
|
// } else if (activeKey === '3') {
|
// setTaskList(taskData.dtjList || [])
|
// } else if (activeKey === '4') {
|
// setTaskList(taskData.dgdList || [])
|
// }
|
// }
|
}
|
|
// 获取数据
|
async function getListData(submitData, tableActive) {
|
global.setSpinning(true);
|
const res = await getListDataApi(submitData);
|
global.setSpinning(false);
|
if (res.type) {
|
setData(res.data || {});
|
setSearch(submitData);
|
}
|
}
|
|
// 初始化
|
useEffect(() => {
|
|
handleSearch('reset');
|
}, []);
|
|
return (
|
<NewPage pageHead={{ breadcrumbData: [{ title: '工作台' }, { title: '纠纷态势' }], title: '纠纷态势' }}>
|
<div className='comprehensive'>
|
<div className="pageSearch">
|
<div className='comprehensive-title'>查询条件</div>
|
<NewTableSearch
|
exportButtonShow={false}
|
labelLength={6}
|
rowNum={4.5}
|
form={form}
|
itemData={[
|
{ type: 'Cascader', name: 'queCode', label: '区域', placeholder: '请选择', treedata: $$.threeLocationSelect['19'] },
|
{ type: 'RangePicker', name: 'createTime', label: '登记时间', span: 8 },
|
{ type: 'RangePicker', name: 'closeTime', label: '办结时间', span: 8 },
|
{
|
type: 'Select',
|
name: 'caseType',
|
label: '纠纷类型',
|
placeholder: '请选择',
|
span: 8,
|
selectdata: [
|
{ label: '市场监管', value: '2' },
|
{ label: '劳动社保', value: '3' },
|
{ label: '城市管理', value: '4' },
|
{ label: '交通运输', value: '5' },
|
{ label: '教育医疗', value: '6' },
|
{ label: '公共服务', value: '7' },
|
],
|
},
|
{
|
type: 'Select',
|
name: 'status',
|
label: '事项状态',
|
placeholder: '请选择',
|
span: 8,
|
selectdata: [
|
// { label: '全部', value: '1' },
|
{ label: '化解中', value: '2' },
|
{ label: '化解成功', value: '3' },
|
{ label: '化解不成功', value: '4' },
|
],
|
},
|
]}
|
handleReset={() => handleSearch('reset')}
|
handleSearch={() => handleSearch('search')}
|
/>
|
</div>
|
<div style={{ width: '100%', position: 'relative' }}>
|
<MyTabsNew
|
tabs={[
|
{ key: '1', icon: <img className='workDash-tabs' src={workDash_13}></img>, label: <><div style={{ height: '22px' }}>全部</div></> },
|
{ label: <>大厅来访</>, icon: <img className='workDash-tabs' src={workDash_14}></img>, key: '2' },
|
{ label: <>线上来访</>, icon: <img className='workDash-tabs' src={workDash_14}></img>, key: '3' },
|
{ label: <>自行排查</>, icon: <img className='workDash-tabs' src={workDash_13}></img>, key: '4' },
|
{ label: <>协同推送</>, icon: <img className='workDash-tabs' src={workDash_13}></img>, key: '5' },]}
|
activeKey={tabKey}
|
onChange={(activeKey) => tabsOnchange(activeKey)}
|
/>
|
<div style={{ borderBottom: '1px solid #E5E6EB', position: 'absolute', bottom: '4px', width: '100%' }}></div>
|
</div>
|
<div className='disputeLedger-row'>
|
<div className='comprehensive-title'>数据总览</div>
|
<div>
|
<Space className='workDash-d' align='center' split={<Divider type="vertical" style={{ height: '48px' }} />}>
|
<div className='workDash-item'>
|
<div className='workDash-item-img'>
|
<img src={workDash_1} alt="" srcset="" />
|
</div>
|
<div className='workDash-item-div'>
|
<div className='workDash-item-title'>总登记</div>
|
<div className='workDash-item-value'>{data?.totalNum || 0}</div>
|
</div>
|
</div>
|
<div className='workDash-item'>
|
<div className='workDash-item-img'>
|
<img src={workDash_2} alt="" srcset="" />
|
</div>
|
<div className='workDash-item-div'>
|
<div className='workDash-item-title'>办理中</div>
|
<div className='workDash-item-value'>{data?.processNum || 0}</div>
|
</div>
|
</div>
|
<div className='workDash-item1'>
|
<div className='workDash-item-img'>
|
<img src={workDash_3} alt="" srcset="" />
|
</div>
|
<div className='workDash-item-div'>
|
<div className='workDash-item-title'><div style={{ width: '50px' }}>已结案</div><div style={{ width: '36px' }}></div> <Badge dot size='30' status="success" text={<Space split={<Divider type="vertical" />}><span style={{ color: '#4E5969', fontSize: '14px' }}>化解成功：{data?.resolveNum || 0}件 | 成功率：<span style={{ color: '#00B42A' }}>{data?.resolveRate || '0'}%</span></span></Space>} /></div>
|
<div className='workDash-item-value'><div style={{ width: '50px' }}>{data?.finishNum || 0}</div><div style={{ width: '36px' }}></div><Badge status="error" text={<Space split={<Divider type="vertical" />}><span style={{ color: '#4E5969', fontSize: '14px' }}>化解不成功：{data?.unResolveNum || 0}件</span></Space>} /></div>
|
</div>
|
</div>
|
<div className='workDash-item'>
|
<div className='workDash-item-img'>
|
<img src={workDash_4} alt="" srcset="" />
|
</div>
|
<div className='workDash-item-div'>
|
<div className='workDash-item-title'>不予受理</div>
|
<div className='workDash-item-value'>{data?.rejectNum || 0}</div>
|
</div>
|
</div>
|
</Space>
|
</div>
|
</div>
|
|
{/* 事项来源 */}
|
<div style={{ marginTop: '12px', width: '100%', display: 'flex', gap: '12px', justifyContent: 'space-between' }} >
|
<Row gutter={16}>
|
<Col span={16}>
|
<div className='workDash-main'>
|
<div style={{ width: '100%' }}>
|
<div className='big-green-main-title-display'>
|
<div className='disputeLedger-green-title'>事项来源</div>
|
</div>
|
<div className='workDash-main-card-one'>
|
<div className='workDash-main-card'>
|
<div className='workDash-main-card-head'>
|
<div className='workDash-main-card-head-l'><div className='workDash-main-card-head-l-img'><img src={workDash_6} alt="" srcset="" /></div></div>
|
<div className='workDash-main-card-head-r'><div className='workDash-main-card-head-r-title'>大厅来访</div><div className='workDash-main-card-head-r-value'>{data?.oneSource?.caseNum || 0}<span className='workDash-main-card-head-r-subValue'> | {data?.oneSource?.caseRate || 0}%</span></div></div>
|
</div>
|
<div className='workDash-main-card-body'>
|
<div className='workDash-main-card-body-flex'>
|
<div className='workDash-main-card-body-flex-title'>化解中</div>
|
<div className='workDash-main-card-body-flex-value'>{data?.oneSource?.resolveingNum || 0}</div>
|
</div>
|
<div className='workDash-main-card-body-flex'>
|
<div className='workDash-main-card-body-flex-title'>化解成功</div>
|
<div className='workDash-main-card-body-flex-value'>{data?.oneSource?.resolveNum || 0}</div>
|
</div>
|
<div className='workDash-main-card-body-flex'>
|
<div className='workDash-main-card-body-flex-title'>化解不成功</div>
|
<div className='workDash-main-card-body-flex-value'>{data?.oneSource?.unResolveNum || 0}</div>
|
</div>
|
<div className='workDash-main-card-body-flex'>
|
<div className='workDash-main-card-body-flex-title'>化解成功率</div>
|
<div className='workDash-main-card-body-flex-value'>{data?.oneSource?.resolveRate || 0}%</div>
|
</div>
|
<div className='workDash-main-card-body-flex'>
|
<div className='workDash-main-card-body-flex-title'>不予受理</div>
|
<div className='workDash-main-card-body-flex-value'>{data?.oneSource?.rejectNum || 0}</div>
|
</div>
|
</div>
|
</div>
|
|
<div className='workDash-main-card'>
|
<div className='workDash-main-card-head'>
|
<div className='workDash-main-card-head-l workDash-bg_2'><div className='workDash-main-card-head-l-img workDash-bg_2_img'><img src={workDash_7} alt="" srcset="" /></div></div>
|
<div className='workDash-main-card-head-r workDash-bg_2_r'><div className='workDash-main-card-head-r-title'>线上来访</div><div className='workDash-main-card-head-r-value'>{data?.twoSource?.caseNum || 0}<span className='workDash-main-card-head-r-subValue'> | {data?.oneSource?.caseRate || 0}%</span></div></div>
|
</div>
|
<div className='workDash-main-card-body'>
|
<div className='workDash-main-card-body-flex'>
|
<div className='workDash-main-card-body-flex-title'>化解中</div>
|
<div className='workDash-main-card-body-flex-value'>{data?.twoSource?.resolveingNum || 0}</div>
|
</div>
|
<div className='workDash-main-card-body-flex'>
|
<div className='workDash-main-card-body-flex-title'>化解成功</div>
|
<div className='workDash-main-card-body-flex-value'>{data?.twoSource?.resolveNum || 0}</div>
|
</div>
|
<div className='workDash-main-card-body-flex'>
|
<div className='workDash-main-card-body-flex-title'>化解不成功</div>
|
<div className='workDash-main-card-body-flex-value'>{data?.twoSource?.unResolveNum || 0}</div>
|
</div>
|
<div className='workDash-main-card-body-flex'>
|
<div className='workDash-main-card-body-flex-title'>化解成功率</div>
|
<div className='workDash-main-card-body-flex-value'>{data?.twoSource?.resolveRate || 0}%</div>
|
</div>
|
<div className='workDash-main-card-body-flex'>
|
<div className='workDash-main-card-body-flex-title'>不予受理</div>
|
<div className='workDash-main-card-body-flex-value'>{data?.twoSource?.rejectNum || 0}</div>
|
</div>
|
</div>
|
</div>
|
|
<div className='workDash-main-card'>
|
<div className='workDash-main-card-head'>
|
<div className='workDash-main-card-head-l workDash-bg_3'><div className='workDash-main-card-head-l-img workDash-bg_3_img'><img src={workDash_8} alt="" srcset="" /></div></div>
|
<div className='workDash-main-card-head-r workDash-bg_3_r'><div className='workDash-main-card-head-r-title'>自行排查</div><div className='workDash-main-card-head-r-value'>{data?.threeSource?.caseNum || 0}<span className='workDash-main-card-head-r-subValue'> | {data?.threeSource?.caseRate || 0}%</span></div></div>
|
</div>
|
<div className='workDash-main-card-body'>
|
<div className='workDash-main-card-body-flex'>
|
<div className='workDash-main-card-body-flex-title'>化解中</div>
|
<div className='workDash-main-card-body-flex-value'>{data?.threeSource?.resolveingNum || 0}</div>
|
</div>
|
<div className='workDash-main-card-body-flex'>
|
<div className='workDash-main-card-body-flex-title'>化解成功</div>
|
<div className='workDash-main-card-body-flex-value'>{data?.threeSource?.resolveNum || 0}</div>
|
</div>
|
<div className='workDash-main-card-body-flex'>
|
<div className='workDash-main-card-body-flex-title'>化解不成功</div>
|
<div className='workDash-main-card-body-flex-value'>{data?.threeSource?.unResolveNum || 0}</div>
|
</div>
|
<div className='workDash-main-card-body-flex'>
|
<div className='workDash-main-card-body-flex-title'>化解成功率</div>
|
<div className='workDash-main-card-body-flex-value'>{data?.threeSource?.resolveRate || 0}%</div>
|
</div>
|
<div className='workDash-main-card-body-flex'>
|
<div className='workDash-main-card-body-flex-title'>不予受理</div>
|
<div className='workDash-main-card-body-flex-value'>{data?.threeSource?.rejectNum || 0}</div>
|
</div>
|
</div>
|
</div>
|
|
<div className='workDash-main-card'>
|
<div className='workDash-main-card-head'>
|
<div className='workDash-main-card-head-l workDash-bg_4'><div className='workDash-main-card-head-l-img workDash-bg_4_img'><img src={workDash_9} alt="" srcset="" /></div></div>
|
<div className='workDash-main-card-head-r workDash-bg_4_r'><div className='workDash-main-card-head-r-title'>协同推送</div><div className='workDash-main-card-head-r-value'>{data?.fourSource?.caseNum || 0}<span className='workDash-main-card-head-r-subValue'> | {data?.fourSource?.caseRate || 0}%</span></div></div>
|
</div>
|
<div className='workDash-main-card-body'>
|
<div className='workDash-main-card-body-flex'>
|
<div className='workDash-main-card-body-flex-title'>化解中</div>
|
<div className='workDash-main-card-body-flex-value'>{data?.fourSource?.resolveingNum || 0}</div>
|
</div>
|
<div className='workDash-main-card-body-flex'>
|
<div className='workDash-main-card-body-flex-title'>化解成功</div>
|
<div className='workDash-main-card-body-flex-value'>{data?.fourSource?.resolveNum || 0}</div>
|
</div>
|
<div className='workDash-main-card-body-flex'>
|
<div className='workDash-main-card-body-flex-title'>化解不成功</div>
|
<div className='workDash-main-card-body-flex-value'>{data?.fourSource?.unResolveNum || 0}</div>
|
</div>
|
<div className='workDash-main-card-body-flex'>
|
<div className='workDash-main-card-body-flex-title'>化解成功率</div>
|
<div className='workDash-main-card-body-flex-value'>{data?.fourSource?.resolveRate || 0}%</div>
|
</div>
|
<div className='workDash-main-card-body-flex'>
|
<div className='workDash-main-card-body-flex-title'>不予受理</div>
|
<div className='workDash-main-card-body-flex-value'>{data?.fourSource?.rejectNum || 0}</div>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
</div>
|
</Col>
|
<Col span={8}>
|
<div className='workDash-main-flex_1'>
|
<div className='big-green-main-title-display'>
|
<div className='disputeLedger-green-title'>纠纷类型<span style={{ color: '#86909C' }}> / 化解状况 / 事项等级</span></div>
|
</div>
|
<div style={{ width: '100%', height: '224px', marginTop: '12px' }}>
|
<MyLTopChartPie data={
|
data?.typeList?.map(i => ({ value: i.caseRate, name: i.caseTypeName })) || []
|
} />
|
</div>
|
</div>
|
{/* <div className='workDash-main1'>
|
<div className='big-green-main-title-display'>
|
<div className='disputeLedger-green-title'>工作效能</div>
|
</div>
|
<div className='workDash-main1-chart'>
|
<div className='workDash-main1-flex'>
|
<div className='workDash-main1-flex-l'>
|
<div className='workDash-main1-flex-l-title'>事项分派</div>
|
<div className='workDash-main1-flex-l-value'>320<span className='workDash-main1-flex-l-subValue'>件</span></div>
|
</div>
|
<div className='workDash-main1-flex-r workDash-main1-flex-r-green'>平均耗时<br />1.5小时</div>
|
</div>
|
|
<div className='workDash-main1-flex'>
|
<div className='workDash-main1-flex-l'>
|
<div className='workDash-main1-flex-l-title'>事项办理</div>
|
<div className='workDash-main1-flex-l-value'>299<span className='workDash-main1-flex-l-subValue'>件</span></div>
|
</div>
|
<div className='workDash-main1-flex-r workDash-main1-flex-r-orange'>平均耗时<br />80.3小时</div>
|
</div>
|
|
<div className='workDash-main1-flex'>
|
<div className='workDash-main1-flex-l'>
|
<div className='workDash-main1-flex-l-title'>事项签收</div>
|
<div className='workDash-main1-flex-l-value'>320<span className='workDash-main1-flex-l-subValue'>件</span></div>
|
</div>
|
<div className='workDash-main1-flex-r workDash-main1-flex-r-blue'>平均耗时<br />5.5小时</div>
|
</div>
|
<div className='workDash-main1-flex'>
|
<div className='workDash-main1-flex-l'>
|
<div className='workDash-main1-flex-l-title'>申请审批</div>
|
<div className='workDash-main1-flex-l-value'>108<span className='workDash-main1-flex-l-subValue'>件</span></div>
|
</div>
|
<div className='workDash-main1-flex-r workDash-main1-flex-r-blue'>平均耗时<br />4小时</div>
|
</div>
|
<div className='workDash-main1-flex'>
|
<div className='workDash-main1-flex-l'>
|
<div className='workDash-main1-flex-l-title'>事项受理</div>
|
<div className='workDash-main1-flex-l-value'>318<span className='workDash-main1-flex-l-subValue'>件</span></div>
|
</div>
|
<div className='workDash-main1-flex-r workDash-main1-flex-r-blue'>平均耗时<br />15.5小时</div>
|
</div>
|
<div className='workDash-main1-flex'>
|
<div className='workDash-main1-flex-l'>
|
<div className='workDash-main1-flex-l-title'>督办回复</div>
|
<div className='workDash-main1-flex-l-value'>52<span className='workDash-main1-flex-l-subValue'>件</span></div>
|
</div>
|
<div className='workDash-main1-flex-r workDash-main1-flex-r-blue'>平均耗时<br />12.3小时</div>
|
</div>
|
</div>
|
</div> */}
|
</Col>
|
|
</Row>
|
</div>
|
|
{/* 图表-化解统计 */}
|
<div className='disputeLedger-green'>
|
<Space style={{ flex: '1' }} className='big-green-main-space' direction='vertical'>
|
<div className='big-green-main-title-display'>
|
<div className='disputeLedger-green-title'>化解统计</div>
|
</div>
|
<div style={{ width: '100%', height: '300px', marginTop: '12px' }}>
|
<MyChartBar data={data?.areaList?.map(i => i.resolveingNum) || []} data1={data?.areaList?.map(i => i.resolveNum) || []} data2={data?.areaList?.map(i => i.unResolveNum) || []} dataAxis={data?.areaList?.map(i => i.areaName) || []} />
|
</div>
|
</Space>
|
</div>
|
|
{/* 纠纷类型 化解状况 事项等级 */}
|
{/* <div style={{ marginBottom: '12px', width: '100%' }} >
|
<Row gutter={16}>
|
<Col span={8}>
|
<div className='workDash-main-flex_1'>
|
<div className='big-green-main-title-display'>
|
<div className='disputeLedger-green-title'>纠纷类型</div>
|
</div>
|
<div style={{ width: '100%', height: '242px', marginTop: '12px' }}>
|
<MyLTopChartPie data={
|
data?.typeList?.map(i => ({ value: i.caseRate, name: i.caseTypeName })) || []
|
} />
|
</div>
|
</div>
|
</Col>
|
<Col span={8}>
|
<div className='workDash-main-flex_1'>
|
<div className='big-green-main-title-display'>
|
<div className='disputeLedger-green-title'>化解状况</div>
|
</div>
|
<div style={{ width: '100%', height: '242px', marginTop: '12px' }}>
|
<MyLTopChartPie1 data={[
|
{ value: data?.resolveingRate || 0, name: '化解中' },
|
{ value: data?.resolveRate || 0, name: '化解成功' },
|
{ value: data?.unResolveRate || 0, name: '化解不成功' },
|
]
|
} />
|
</div>
|
</div>
|
</Col>
|
<Col span={8}>
|
<div className='workDash-main-flex_1'>
|
<div className='big-green-main-title-display'>
|
<div className='disputeLedger-green-title'>事项等级</div>
|
</div>
|
<div className='workDash-grade'>
|
<div className='workDash-grade-item workDash-grade-item-orange'>
|
<div className='workDash-grade-item-t'><div className='workDash-grade-item-t-orange'>3级事件</div><div className='workDash-grade-item-t-value'>{data?.threeLevelNum || 0}<span className='workDash-grade-item-t-unit'>件</span></div></div>
|
<div className='workDash-grade-item-b'>
|
<div className='workDash-grade-item-b-bg'>
|
<div className='workDash-grade-item-b-bg-orange' style={{ width: `${data?.threeLevelRate || 0}%` }}></div>
|
<img style={{ left: `${Number(data?.threeLevelRate || 0) - 1}%` }} src={workDash_10} alt="" srcset="" />
|
</div>
|
</div>
|
</div>
|
<div className='workDash-grade-item workDash-grade-item-blue'>
|
<div className='workDash-grade-item-t'><div className='workDash-grade-item-t-blue'>2级事件</div><div className='workDash-grade-item-t-value'>{data?.twoLevelNum || 0}<span className='workDash-grade-item-t-unit'>件</span></div></div>
|
<div className='workDash-grade-item-b'>
|
<div className='workDash-grade-item-b-bg'>
|
<div className='workDash-grade-item-b-bg-blue' style={{ width: `${data?.twoLevelRate || 0}%` }}></div>
|
<img style={{ left: `${Number(data?.twoLevelRate || 0) - 1}%` }} src={workDash_11} alt="" srcset="" />
|
</div>
|
</div>
|
</div>
|
<div className='workDash-grade-item workDash-grade-item-red'>
|
<div className='workDash-grade-item-t'><div className='workDash-grade-item-t-red'>1级事件</div><div className='workDash-grade-item-t-value'>{data?.oneLevelNum || 0}<span className='workDash-grade-item-t-unit'>件</span></div></div>
|
<div className='workDash-grade-item-b'>
|
<div className='workDash-grade-item-b-bg'>
|
<div className='workDash-grade-item-b-bg-red' style={{ width: `${data?.oneLevelRate || 0}%` }}></div>
|
<img style={{ left: `${Number(data?.oneLevelRate || 0) - 1}%` }} src={workDash_12} alt="" srcset="" />
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</Col>
|
</Row>
|
</div> */}
|
|
{/* 实时动态 */}
|
<div style={{ width: '100%', display: 'flex', gap: '12px', justifyContent: 'space-between' }} >
|
<div className='workDash-main-flex_1' style={{ marginBottom: '12px', }}>
|
<div className='big-green-main-title-display-table'>
|
<div className='disputeLedger-green-title'>实时动态</div>
|
<div style={{ padding: '4px 16px 16px' }}>
|
<TableView
|
columns={columns()}
|
dataSource={data.caseList || []}
|
/>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</NewPage >
|
)
|
}
|
|
export default WorkDash;
|
|
// 柱状图
|
const MyChartBar = ({ data, data1, data2, dataAxis }) => {
|
const myChartRef = useRef();
|
// 图表
|
const [myChart, setMyChart] = useState();
|
|
|
// 加载图表数据
|
useEffect(() => {
|
var myChart = echarts.init(document.getElementById('chartBar'), 'dark');
|
// let data = [123, 98, 245, 234, 356, 148];
|
// let dataAxis = ['低收入家庭', '单亲家庭', '流动家庭', '犯罪家庭', '无家庭', '其他']
|
|
// 绘制图表
|
myChart.setOption({
|
backgroundColor: '#fff',
|
grid: {
|
x: 10,
|
y: 20,
|
x2: 20,
|
y2: 0,
|
containLabel: true,
|
},
|
// 图例配置
|
// legend: {
|
// data: ['化解中', '化解成功', '化解不成功'],
|
// // 设置图例图形大小
|
// itemWidth: 18,
|
// itemHeight: 18,
|
// // 使用自定义图形
|
// icon: 'rect',
|
// // 自定义回调函数，根据已选择的图例数据决定复选框状态
|
// // formatter: function (name) {
|
// // var checked = myChart.isSelected(name) ? '★' : '☆';
|
// // return checked + name;
|
// // }
|
// },
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'none'
|
},
|
formatter: function (params) {
|
return params[0].name + ': ' + params[0].value + '人';
|
}
|
},
|
xAxis: [{
|
type: 'category',
|
// boundaryGap: false,
|
data: dataAxis,
|
|
axisLabel: {
|
interval: dataAxis?.length > 15 ? 1 : 0,
|
formatter: function (value) {
|
// 如果标签长度超过4，将剩余的文字替换为省略号
|
if (value.length > 4) {
|
return value.slice(0, 4) + '...';
|
} else {
|
return value;
|
}
|
}
|
},
|
}],
|
yAxis: {
|
splitLine: {
|
lineStyle: {
|
type: 'dashed',
|
color: '#ccc'
|
}
|
},
|
|
},
|
dataZoom: [
|
{
|
type: 'inside'
|
}
|
],
|
series: [
|
{
|
type: 'bar',
|
name: '化解中',
|
data: data,
|
barWidth: 24, // 设置柱子宽度
|
label: {
|
show: true,
|
position: 'top',
|
valueAnimation: false
|
},
|
emphasis: {
|
itemStyle: {
|
opacity: 0.7
|
}
|
},
|
itemStyle: {
|
color: '#57a9fb',
|
borderWidth: 2 // 设置边框宽度
|
}
|
},
|
{
|
type: 'bar',
|
name: '化解成功',
|
data: data1,
|
barWidth: 24, // 设置柱子宽度
|
label: {
|
show: true,
|
position: 'top',
|
valueAnimation: false
|
},
|
emphasis: {
|
itemStyle: {
|
opacity: 0.7
|
}
|
},
|
itemStyle: {
|
color: '#23c343',
|
borderWidth: 2, // 设置边框宽度
|
left: 0 // 设置左边距，以实现重叠效果
|
}
|
},
|
{
|
type: 'bar',
|
name: '化解不成功',
|
data: data,
|
barWidth: 24, // 设置柱子宽度
|
label: {
|
show: true,
|
position: 'top',
|
valueAnimation: false
|
},
|
emphasis: {
|
itemStyle: {
|
opacity: 0.7
|
}
|
},
|
itemStyle: {
|
color: '#F76560',
|
borderWidth: 2, // 设置边框宽度
|
left: 0 // 设置左边距，以实现重叠效果
|
}
|
}
|
]
|
});
|
}, [data]);
|
|
useEffect(() => {
|
// if (myChart && myChartRef.current.clientHeight !== 0) {
|
// myChart.forceFit();
|
// }
|
});
|
|
return <div id="chartBar" ref={myChartRef} style={{ height: '230px', width: '100%' }} />;
|
};
|
|
const MyLTopChartPie = ({ data }) => {
|
const myChartRef = useRef();
|
// 图表
|
const [myChart, setMyChart] = useState();
|
|
// 加载图表数据
|
useEffect(() => {
|
var myChart = echarts.init(document.getElementById('chartLTopPie'), 'dark');
|
|
// 绘制图表
|
myChart.setOption({
|
backgroundColor: '#fff',
|
grid: {
|
x: 5,
|
y: 12,
|
x2: 20,
|
y2: 0,
|
},
|
legend: {
|
orient: 'vertical', // 垂直排列
|
top: 'center',
|
right: 20,
|
data: data?.map(i => ({ name: i.name, icon: 'circle' }))
|
},
|
series: [
|
{
|
name: '纠纷类型',
|
type: 'pie',
|
radius: '90%',
|
center: ['40%', '50%'],
|
color: ['#FCE996', '#FFCF8B', '#86E8DD', '#FDCDC5', '#C396ED', '#9FD4FD'],
|
labelLine: { // 关闭引导线
|
show: false
|
},
|
label: {
|
show: true,
|
position: 'inside', // 设置文字在扇形区域内
|
formatter: '{d}%', // 标签文本格式器
|
rich: {
|
a: {
|
lineHeight: 25,
|
align: 'center'
|
},
|
b: {
|
lineHeight: 25,
|
align: 'center'
|
},
|
c: {
|
lineHeight: 25,
|
align: 'center'
|
},
|
d: {
|
lineHeight: 25,
|
align: 'center'
|
},
|
e: {
|
lineHeight: 25,
|
align: 'center'
|
},
|
f: {
|
lineHeight: 25,
|
align: 'center'
|
}
|
},
|
// normal: {
|
// show: false,
|
// },
|
},
|
data: data
|
},
|
]
|
});
|
}, [data]);
|
|
|
return <div id="chartLTopPie" ref={myChartRef} style={{ height: '220px', width: '100%' }} />;
|
};
|
|
const MyLTopChartPie1 = ({ data }) => {
|
const myChartRef = useRef();
|
// 图表
|
const [myChart, setMyChart] = useState();
|
|
|
// 加载图表数据
|
useEffect(() => {
|
var myChart = echarts.init(document.getElementById('chartLTopPie1'), 'dark');
|
// let data = [123, 98, 245, 234, 356, 148];
|
// let dataAxis = ['低收入家庭', '单亲家庭', '流动家庭', '犯罪家庭', '无家庭', '其他']
|
|
// 绘制图表
|
myChart.setOption({
|
backgroundColor: '#fff',
|
grid: {
|
x: 5,
|
y: 12,
|
x2: 20,
|
y2: 0,
|
containLabel: true,
|
},
|
legend: {
|
orient: 'vertical', // 垂直排列
|
top: 'center',
|
right: 20,
|
data: [
|
{
|
name: '化解中',
|
icon: 'circle', // 图例标记的形状
|
},
|
{
|
name: '化解成功',
|
icon: 'circle',
|
},
|
{
|
name: '化解不成功',
|
icon: 'circle',
|
},
|
|
]
|
},
|
series: [
|
{
|
name: '化解状况',
|
type: 'pie',
|
radius: ['60%', '90%'], // 设置饼图的内半径和外半径，实现扇形区域
|
center: ['40%', '50%'],
|
color: ['#B6DDF1', '#3A8AC6', '#094282'],
|
data: data,
|
label: {
|
show: true,
|
position: 'inside', // 设置文字在扇形区域内
|
formatter: '{d}%', // 标签文本格式器
|
rich: {
|
a: {
|
lineHeight: 25,
|
align: 'center'
|
},
|
b: {
|
lineHeight: 25,
|
align: 'center'
|
},
|
}
|
}
|
}
|
]
|
});
|
}, [data]);
|
|
useEffect(() => {
|
});
|
|
return <div id="chartLTopPie1" ref={myChartRef} style={{ height: '230px', width: '100%' }} />;
|
};
|
