提交

liuwh

2024-09-17 74960e7d4f3042fb9e0ec54af823a360d4aa2bbe

 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 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>
              ))
      }
    ></NewPage>
          </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;

// 柱状图
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%' }} />;
};