From 74960e7d4f3042fb9e0ec54af823a360d4aa2bbe Mon Sep 17 00:00:00 2001
From: liuwh <964324856@qq.com>
Date: Tue, 17 Sep 2024 17:17:45 +0800
Subject: [PATCH] 提交
---
gz-customerSystem/src/views/disputeLedger/index.jsx | 451 +++++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 442 insertions(+), 9 deletions(-)
diff --git a/gz-customerSystem/src/views/disputeLedger/index.jsx b/gz-customerSystem/src/views/disputeLedger/index.jsx
index 402ed27..bbb53eb 100644
--- a/gz-customerSystem/src/views/disputeLedger/index.jsx
+++ b/gz-customerSystem/src/views/disputeLedger/index.jsx
@@ -2,16 +2,20 @@
* @Company: hugeInfo
* @Author: lwh
* @Date: 2024-09-14 15:59:17
- * @LastEditTime: 2024-09-14 16:03:34
+ * @LastEditTime: 2024-09-17 17:12:37
* @LastEditors: lwh
* @Version: 1.0.0
* @Description:
*/
-import React, { useState, useEffect, useMemo } from 'react';
+import React, { useState, useEffect, useRef, useMemo } from 'react';
import * as $$ from '../../utils/utility';
-import { Form, Typography, Button, Space } from 'antd';
+import { Form, Typography, Row, Col, Space } from 'antd';
import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
+import { 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 NewTableSearch from '../../components/NewTableSearch';
+import './index.less'
const { Link } = Typography;
@@ -26,14 +30,443 @@
}
const DisputeLedger = () => {
+ const [form] = Form.useForm();
+ // 数据汇总选择
+ const [activeKey, setActiveKey] = useState(0)
+ const [tabsData, setTabsData] = useState([
+ { icon: disputeLedger_1, title: '全部', value: '5032', active: true },
+ { icon: disputeLedger_2, title: '综治中心', value: '1022', per: '20.3%' },
+ { icon: disputeLedger_3, title: '12345', value: '1006', per: '19.8%' },
+ { icon: disputeLedger_4, title: '人民调解', value: '2201', per: '40.3%' },
+ { icon: disputeLedger_5, title: '信访', value: '221', per: '4.2%' },
+ { icon: disputeLedger_6, title: '劳动仲裁', value: '98', per: '1.8%' },
+ { icon: disputeLedger_7, title: '非警务纠纷', value: '432', per: '8.3%' },
+ ]);
+
+ // 搜索 or 重置
+ function handleSearch(type, session) {
+
+ }
return (
- <NewPage
- pageHead={
- { breadcrumbData: [{ title: '工作台' }, { title: '纠纷台账' }], title: '纠纷台账' }
- }
- ></NewPage>
+ <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: 'TreeSelect', name: 'mediateUnitId', label: '区域', placeholder: '请选择', treedata: [] },
+ { type: 'RangePicker', name: 'createTime', label: '登记时间', span: 8 },
+ { type: 'RangePicker', name: 'endTime', 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' },
+ ],
+ },
+ {
+ type: 'Select',
+ name: 'name3',
+ label: '重大矛盾纠纷',
+ span: 8,
+ selectdata: [
+ { label: '不限', value: '1' },
+ ],
+ },
+ {
+ type: 'Select',
+ name: 'name4',
+ label: '重点人员',
+ span: 8,
+ selectdata: [
+ { label: '不限', value: '1' },
+ ],
+ },
+ ]}
+ handleReset={() => handleSearch('reset')}
+ handleSearch={() => handleSearch('search')}
+ />
+ </div>
+ <div className='disputeLedger-row'>
+ <div className='comprehensive-title'>数据汇总</div>
+ <div className='disputeLedger-d'>
+ {
+ tabsData.map((item, index) => (
+ <div onClick={() => setActiveKey(index)} className={`disputeLedger-card ${activeKey === index ? 'disputeLedger-card-active' : ''}`} span={3.4} key={index}>
+ <div >
+ <div className='disputeLedger-card-content'>
+ <div className={`disputeLedger-card-content-t ${activeKey === index ? 'disputeLedger-card-content-t-active' : ''}`}>{item.title}</div>
+ <div><span className='disputeLedger-card-title'>{item.value}</span> <span className='disputeLedger-unit'>件</span> {item.per && < span className='disputeLedger-unit'>| {item.per}</span>}</div>
+ </div>
+ {activeKey === index && <img src={item.icon} alt="" />}
+ </div>
+ </div>
+ ))
+ }
+ </div>
+ </div>
+
+ {/* 图表 */}
+ <div className='disputeLedger-green'>
+ <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginBottom: '12px' }}>
+ <Space className='big-green-main-space' direction='vertical'>
+ <div style={{ margin: '0 12px' }}>
+ <div className='disputeLedger-green-title'>纠纷类型（全部）</div>
+ <div style={{ paddingBottom: '12px' }}>
+ <MyLTopChartPie data={
+ [
+ { value: 22, name: '市场监管' },
+ { value: 28, name: '劳动社保' },
+ { value: 15, name: '城市管理' },
+ { value: 10, name: '交通运输' },
+ { value: 5, name: '教育医疗' },
+ { value: 20, name: '公共服务' },
+ ]
+ } />
+ </div>
+ </div>
+ </Space>
+ <Space style={{ position: 'relative' }} className='big-green-main-space' direction='vertical'>
+ <div style={{ margin: '0 12px' }}>
+ <div className='disputeLedger-green-title'>化解状况（全部）</div>
+ <div style={{ paddingBottom: '12px' }}>
+ <MyLTopChartPie1 data={
+ [
+ { value: 90, name: '小学' },
+ { value: 200, name: '初中' },
+ { value: 100, name: '高中' },
+ { value: 300, name: '大学本科' },
+ { value: 200, name: '硕士' },
+ { value: 100, name: '其他' },
+ ]
+ } />
+ </div>
+ </div>
+ </Space>
+ </div>
+ <Space style={{ flex: '1', marginBottom: '12px' }} 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: '200px', marginTop: '12px' }}>
+ <MyChartBar data={[220, 5211, 2500, 3152, 8362, 26220, 8442, 2600, 1850, 1302, 850, 1048]} dataAxis={['本级', '越秀区', '海珠区', '荔湾区', '天河区', '白云区', '黄埔区', '花都区', '番禺区', '南沙区', '从化区', '增城区']} />
+
+ </div>
+ </Space>
+ </div>
+ </div >
+ </NewPage >
)
}
-export default DisputeLedger;
\ No newline at end of file
+export default DisputeLedger;
+
+// 柱状图
+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: 'bar1',
+ stack: 'one',
+ showBackground: false,
+ barWidth: 28, // 柱子宽度
+ itemStyle: {
+ color: '#3788C5'
+ },
+ label: {
+ show: true,
+ position: 'top',
+ valueAnimation: false
+ },
+ emphasis: {
+ itemStyle: {
+ opacity: 0.7
+ }
+ },
+ data: data
+ },
+ ]
+ });
+ }, [data]);
+
+ useEffect(() => {
+ // if (myChart && myChartRef.current.clientHeight !== 0) {
+ // myChart.forceFit();
+ // }
+ });
+
+ return <div id="chartBar" ref={myChartRef} style={{ height: '494px', 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: 10,
+ 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: ['30%', '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: 10,
+ data: [
+ {
+ name: '化解中',
+ icon: 'circle', // 图例标记的形状
+ },
+ {
+ name: '化解成功',
+ icon: 'circle',
+ },
+ {
+ name: '化解不成功',
+ icon: 'circle',
+ },
+
+ ]
+ },
+ series: [
+ {
+ name: '化解状况',
+ type: 'pie',
+ radius: ['60%', '90%'], // 设置饼图的内半径和外半径，实现扇形区域
+ center: ['30%', '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(() => {
+ // if (myChart && myChartRef.current.clientHeight !== 0) {
+ // myChart.forceFit();
+ // }
+ });
+
+ return <div id="chartLTopPie1" ref={myChartRef} style={{ height: '230px', width: '100%' }} />;
+};
--
Gitblit v1.8.0