/*
|
* @Company: hugeInfo
|
* @Author: lwh
|
* @Date: 2024-09-14 15:59:17
|
* @LastEditTime: 2024-09-20 15:00:46
|
* @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, disputeLedger_1, disputeLedger_2, disputeLedger_3, disputeLedger_4, disputeLedger_5, disputeLedger_6, disputeLedger_7 } from '../../assets/images';
|
import NewPage from '../../components/NewPage/index';
|
import * as echarts from 'echarts';
|
import TableView from '../../components/TableViewCanSort';
|
import NewTableSearch from '../../components/NewTableSearch';
|
import publicDataStatus from '../../status/publicData';
|
import './index.less'
|
|
const { Link } = Typography;
|
|
// 调度中心列表
|
function getMyMediationDataApi(submitData) {
|
return $$.ax.request({ url: 'caseDisp/pageQuery', type: 'get', data: submitData, service: 'disp' });
|
}
|
|
// 获取列表分类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({
|
tableData: [
|
{ createTime: '2024-09-14 15:59:17', statusName: '已关闭', caseLevel: '一般', caseTypeName: '城市管理', canalName: '综合执法', inputUnitName: '综合执法', assistUnitName: '综合执法', closeTime: '2024-09-14 15:59:17', mediResult: '22_00025-1', plaintiffList: [{ trueName: '张三' }, { trueName: '李四' }], defendantList: [{ trueName: '王五' }] },
|
{ createTime: '2024-09-14 15:59:17', statusName: '已关闭', caseLevel: '一般', caseTypeName: '城市管理', canalName: '综合执法', inputUnitName: '综合执法', assistUnitName: '综合执法', closeTime: '2024-09-14 15:59:17', mediResult: '22_00025-1', plaintiffList: [{ trueName: '张三' }, { trueName: '李四' }], defendantList: [{ trueName: '王五' }] },
|
{ createTime: '2024-09-14 15:59:17', statusName: '已关闭', caseLevel: '一般', caseTypeName: '城市管理', canalName: '综合执法', inputUnitName: '综合执法', assistUnitName: '综合执法', closeTime: '2024-09-14 15:59:17', mediResult: '22_00025-1', plaintiffList: [{ trueName: '张三' }, { trueName: '李四' }], defendantList: [{ trueName: '王五' }] },
|
{ createTime: '2024-09-14 15:59:17', statusName: '已关闭', caseLevel: '一般', caseTypeName: '城市管理', canalName: '综合执法', inputUnitName: '综合执法', assistUnitName: '综合执法', closeTime: '2024-09-14 15:59:17', mediResult: '22_00025-1', plaintiffList: [{ trueName: '张三' }, { trueName: '李四' }], defendantList: [{ trueName: '王五' }] },
|
{ createTime: '2024-09-14 15:59:17', statusName: '已关闭', caseLevel: '一般', caseTypeName: '城市管理', canalName: '综合执法', inputUnitName: '综合执法', assistUnitName: '综合执法', closeTime: '2024-09-14 15:59:17', mediResult: '22_00025-1', plaintiffList: [{ trueName: '张三' }, { trueName: '李四' }], defendantList: [{ trueName: '王五' }] },
|
]
|
});
|
|
// 调解组织select框数据
|
const [adjustOrgData, setAdjustOrgData] = useState([]);
|
|
|
|
|
// 搜索 or 重置
|
function handleSearch(type, session) {
|
|
}
|
|
// 表头
|
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) {
|
|
}
|
|
// 初始化
|
useEffect(() => {
|
// publicDataStatus.getUnitData((data) => setAdjustOrgData(data));
|
|
}, []);
|
|
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: 'name', label: '区域', placeholder: '请选择', treedata: $$.threeLocationSelect['19'] },
|
{ type: 'RangePicker', name: 'createTime', label: '登记时间', span: 8 },
|
{ type: 'RangePicker', name: 'closeTime', label: '办结时间', span: 8 },
|
{
|
type: 'Select',
|
name: 'name1',
|
label: '纠纷类型',
|
span: 8,
|
selectdata: [
|
{ label: '全部', value: '1' },
|
{ label: '市场监管', value: '2' },
|
{ label: '劳动社保', value: '3' },
|
{ label: '城市管理', value: '4' },
|
{ label: '交通运输', value: '5' },
|
{ label: '教育医疗', value: '6' },
|
{ label: '公共服务', value: '7' },
|
],
|
},
|
{
|
type: 'Select',
|
name: 'name2',
|
label: '事项状态',
|
span: 8,
|
selectdata: [
|
{ label: '全部', value: '1' },
|
{ label: '化解中', value: '2' },
|
{ label: '化解成功', value: '3' },
|
{ label: '化解不成功', value: '4' },
|
],
|
},
|
]}
|
handleReset={() => handleSearch('reset')}
|
handleSearch={() => handleSearch('search')}
|
/>
|
</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'>3301</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'>103</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' }}>化解成功：3066件 | 成功率：<span style={{ color: '#00B42A' }}>90.3%</span></span></Space>} /></div>
|
<div className='workDash-item-value'><div style={{ width: '50px' }}>3166</div><div style={{ width: '36px' }}></div><Badge status="error" text={<Space split={<Divider type="vertical" />}><span style={{ color: '#4E5969', fontSize: '14px' }}>化解不成功：100件</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'>32</div>
|
</div>
|
</div>
|
</Space>
|
</div>
|
</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={[220, 5211, 2500, 3152, 8362, 26220, 8442, 2600, 1850, 1302, 850, 1048]} dataAxis={['本级', '越秀区', '海珠区', '荔湾区', '天河区', '白云区', '黄埔区', '花都区', '番禺区', '南沙区', '从化区', '增城区']} />
|
</div>
|
</Space>
|
</div>
|
<div style={{ marginBottom: '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'>2233<span className='workDash-main-card-head-r-subValue'> | 40%</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'>100</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'>2132</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'>50</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'>84.3%</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'>3</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'>430<span className='workDash-main-card-head-r-subValue'> | 17%</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'>30</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'>400</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'>7</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'>95.3%</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'>3</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'>672<span className='workDash-main-card-head-r-subValue'> | 20%</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'>80</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'>520</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'>70</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'>92.3%</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'>2</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'>1094<span className='workDash-main-card-head-r-subValue'> | 33%</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'>165</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'>776</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'>150</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'>94.3%</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'>31</div>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
</div>
|
</Col>
|
<Col span={8}>
|
<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 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={
|
[
|
{ value: 22, name: '市场监管' },
|
{ value: 28, name: '劳动社保' },
|
{ value: 15, name: '城市管理' },
|
{ value: 10, name: '交通运输' },
|
{ value: 5, name: '教育医疗' },
|
{ value: 20, 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 style={{ width: '100%', height: '242px', marginTop: '12px' }}>
|
<MyLTopChartPie1 data={
|
[
|
{ value: 90, name: '小学' },
|
{ value: 200, name: '初中' },
|
{ value: 100, name: '高中' },
|
{ value: 300, name: '大学本科' },
|
{ value: 200, name: '硕士' },
|
{ value: 100, 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'>3201<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'></div>
|
</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'>104<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'></div>
|
</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'>52<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'></div>
|
</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.tableData}
|
/>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</NewPage >
|
)
|
}
|
|
export default WorkDash;
|
|
// 柱状图
|
const MyChartBar = ({ data, 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,
|
},
|
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: [1320, 1320, 1320, 1320, 1320, 1320, 1320, 1320, 1320, 1320, 1320, 1320],
|
barWidth: 24, // 设置柱子宽度
|
label: {
|
show: true,
|
position: 'top',
|
valueAnimation: false
|
},
|
emphasis: {
|
itemStyle: {
|
opacity: 0.7
|
}
|
},
|
itemStyle: {
|
color: '#57a9fb',
|
borderWidth: 2 // 设置边框宽度
|
}
|
},
|
{
|
type: 'bar',
|
name: '化解成功',
|
data: [920, 920, 920, 920, 920, 920, 920, 920, 920, 920, 920, 920],
|
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: [400, 400, 400, 400, 400, 400, 400, 400, 400, 400, 400, 400],
|
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: [
|
{
|
name: '市场监管',
|
icon: 'circle', // 图例标记的形状
|
},
|
{
|
name: '劳动社保',
|
icon: 'circle',
|
},
|
{
|
name: '城市管理',
|
icon: 'circle',
|
},
|
{
|
name: '交通运输',
|
icon: 'circle',
|
},
|
{
|
name: '教育医疗',
|
icon: 'circle',
|
},
|
{
|
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: '230px', 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: [
|
{ value: 24, name: '化解中' },
|
{ value: 30, name: '化解成功' },
|
{ value: 46, name: '化解不成功' },
|
],
|
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%' }} />;
|
};
|
