fix:优化统计功能

liuwh

5 days ago bd4e6eb3d29de84c00f5e448f5839300873a6abe

fix:优化统计功能

 src/api/appUrl.js

@@ -2,7 +2,7 @@
 * @Company: hugeInfo
 * @Author: ldh
 * @Date: 2022-02-16 11:25:57
 * @LastEditTime: 2025-06-10 17:33:34
 * @LastEditTime: 2025-06-20 10:59:40
 * @LastEditors: lwh
 * @Version: 1.0.0
 * @Description: api地址
@@ -12,12 +12,12 @@
    // baseUrl: 'http://gz.hugeinfo.com.cn',
    // baseUrl: "http://192.168.3.131:9002",
    // baseUrl: 'http://192.168.1.101:9002',
    baseUrl: 'http://10.202.1.71:80',
    baseUrl: 'http://10.200.1.89:9002',
    // baseUrl: 'http://192.168.1.158:9002',

    // 附件服务
    // fileUrl: 'http://192.168.1.101:9002',
  fileUrl: 'http://localhost:9002',
  fileUrl: 'http://10.200.1.89:9002',
    // fileUrl: 'http://192.168.1.158:9002',
    // fileUrl: 'http://gz.hugeinfo.com.cn',


 src/assets/images/index.js

@@ -118,6 +118,10 @@
import workDash_24 from './workDash_24.png';
import workDash_25 from './workDash_25.png';
import workDash_26 from './workDash_26.png';
import workDash_27 from './workDash_27.png';
import workDash_28 from './workDash_28.png';
import workDash_29 from './workDash_29.png';
import workDash_30 from './workDash_30.png';

import visitWorkBench_1 from './visitWorkBench_1.png';
import visitWorkBench_2 from './visitWorkBench_2.png';
@@ -278,6 +282,10 @@
    workDash_24,
    workDash_25,
    workDash_26,
    workDash_27,
    workDash_28,
    workDash_29,
  workDash_30,
    visitWorkBench_1,
    visitWorkBench_2,
    visitWorkBench_3,

 src/assets/images/workDash_27.png

 src/assets/images/workDash_28.png

 src/assets/images/workDash_29.png

 src/assets/images/workDash_30.png

 src/components/SelectObjModal/newSelectPerson.jsx

@@ -2,7 +2,7 @@
 * @Author: dminyi 1301963064@qq.com
 * @Date: 2024-08-29 17:41:09
 * @LastEditors: lwh
 * @LastEditTime: 2025-06-06 09:48:10
 * @LastEditTime: 2025-06-21 11:56:05
 * @FilePath: \gzDyh\gz-customerSystem\src\components\SelectObjModal\selectPerson.jsx
 * @Description: 选择经办人
 */
@@ -48,7 +48,7 @@

/**
 * visible, // 传入参数控制modal显示
 * checkKeys, // 选中，数据格式 [{value:'',label:''}]
 * checkKeys, // 选中，数据格式 [{value:'',label':''}]
 * type, // 'person': 选择人员 'unit': 选择组织 'dept': 选择部门 'supUnit': 督办组织
 * isCheckbox, // 是否多选
 * searchData, // 搜索条件
@@ -65,8 +65,13 @@
  const [autoExpandParent, setAutoExpandParent] = useState(true);
  const [dataList, setDataList] = useState([]);
  const [loading, setLoading] = useState(false);
  // 新增状态：用于区分是否为搜索状态
  const [isSearchMode, setIsSearchMode] = useState(false);


  // 获取第一层级的key
  const getFirstLevelKeys = (treeData) => {
    return treeData.map(item => item.value);
  };

  // tree复选框选择
  function handleCheck(checkedKeys, e) {
@@ -116,44 +121,84 @@
    return parents;
  };

  // 检查节点或其子节点是否包含搜索值
  const hasMatchingChild = (node, searchValue) => {
    if (node.label.indexOf(searchValue) > -1) {
      return true;
    }
    if (node.children) {
      return node.children.some(child => hasMatchingChild(child, searchValue));
    }
    return false;
  };

  // 获取搜索时需要展开的所有节点key
  const getExpandedKeysForSearch = (searchValue, treeData) => {
    const expandedKeys = [];
    
    const traverse = (nodes, parentKeys = []) => {
      nodes.forEach(node => {
        const currentPath = [...parentKeys, node.value];
        
        // 如果当前节点匹配搜索值
        if (node.label.indexOf(searchValue) > -1) {
          // 添加所有父节点到展开列表
          expandedKeys.push(...parentKeys);
          // 添加当前节点到展开列表
          expandedKeys.push(node.value);
        }
        
        // 如果当前节点有子节点，继续遍历
        if (node.children && node.children.length > 0) {
          traverse(node.children, currentPath);
        }
      });
    };
    
    traverse(treeData);
    return Array.from(new Set(expandedKeys));
  };

  function handleSearch(value, dataList) {
    let newExpandedKeys = [];
    // 找到所有包含关键字的节点
    const matchedKeys = dataList
      .filter((item) => item.label.indexOf(value) > -1)
      .map((item) => item.value);
    if (!value.trim()) {
      // 如果搜索值为空，恢复到初始状态
      const firstLevelKeys = getFirstLevelKeys(data);
      setExpandedKeys(firstLevelKeys);
      setSearchValue('');
      setAutoExpandParent(false);
      setIsSearchMode(false);
      return;
    }

    // 获取所有相关父节点
    matchedKeys.forEach((key) => {
      const parents = getAllParentKeys(key, data);
      newExpandedKeys = newExpandedKeys.concat(parents);
    });

    // 去重
    newExpandedKeys = Array.from(new Set(newExpandedKeys));
    // 使用新的函数来精确计算需要展开的节点
    const newExpandedKeys = getExpandedKeysForSearch(value, data);

    setExpandedKeys(newExpandedKeys);
    setSearchValue(value);
    setAutoExpandParent(true);
    // 设置为搜索模式
    setIsSearchMode(true);
  }

  function handleSearch1(value, dataList) {
    let newExpandedKeys = [];
    // 找到所有包含关键字的节点
    const matchedKeys = dataList
      .filter((item) => item.label.indexOf(value) > -1)
      .map((item) => item.value);
    if (!value.trim()) {
      // 如果搜索值为空，恢复到初始状态
      const firstLevelKeys = getFirstLevelKeys(data);
      setExpandedKeys(firstLevelKeys);
      setSearchValue('');
      setAutoExpandParent(false);
      setIsSearchMode(false);
      return;
    }

    // 获取所有相关父节点
    matchedKeys.forEach((key) => {
      const parents = getAllParentKeys(key, data);
      newExpandedKeys = newExpandedKeys.concat(parents);
    });
    // 使用新的函数来精确计算需要展开的节点
    const newExpandedKeys = getExpandedKeysForSearch(value, data);

    // 去重
    newExpandedKeys = Array.from(new Set(newExpandedKeys));
    setExpandedKeys(newExpandedKeys);
    setSearchValue(value);
    setAutoExpandParent(true);
    // 设置为搜索模式
    setIsSearchMode(true);
  }

  useEffect(() => {
@@ -172,11 +217,12 @@
    } else {
      setCheckedKeys({ keys: [], items: [] });
    }
    // 重置搜索模式
    setIsSearchMode(false);
    getData();
  }, [type, visible]);

  console.log('checkedKeys', checkedKeys);


  // 搜索
  useEffect(() => {
@@ -194,7 +240,13 @@
    };
    generateList(data);
    setDataList(arr);
    handleSearch('', arr);
    
    // 初始化时只展开第一层级，不调用handleSearch
    if (data.length > 0 && !isSearchMode) {
      const firstLevelKeys = getFirstLevelKeys(data);
      setExpandedKeys(firstLevelKeys);
      setAutoExpandParent(false);
    }
  }, [data]);

  const treeData = useMemo(() => {
@@ -204,8 +256,8 @@
        const strTitle = item.label;
        const index = strTitle.indexOf(searchValue);

        // 只保留包含 searchValue 的项
        if (index <= -1 && !item.children) {
        // 如果有搜索值，只保留包含 searchValue 的项或有匹配子节点的项
        if (searchValue && index <= -1 && !hasMatchingChild(item, searchValue)) {
          return null; // 返回 null 表示不包含在最终结果中
        }

@@ -259,20 +311,42 @@
      <div className="selectObjModal-main">
        <div style={{ width: "100%" }}>
          <div className="selectObjModal-left-search" style={{ paddingRight: '0px' }}>
            <Search placeholder={`查询${nameStr}名称`} onSearch={(e) => handleSearch1(e, dataList)} />
            <Search 
              placeholder={`查询${nameStr}名称`} 
              value={searchValue}
              onChange={(e) => {
                const value = e.target.value;
                if (!value.trim()) {
                  // 清空搜索时恢复到初始状态
                  const firstLevelKeys = getFirstLevelKeys(data);
                  setExpandedKeys(firstLevelKeys);
                  setSearchValue('');
                  setAutoExpandParent(false);
                  setIsSearchMode(false);
                } else {
                  // 实时搜索，使用相同的展开逻辑
                  const newExpandedKeys = getExpandedKeysForSearch(value, data);
                  setExpandedKeys(newExpandedKeys);
                  setSearchValue(value);
                  setAutoExpandParent(true);
                  setIsSearchMode(true);
                }
              }}
              onSearch={(e) => handleSearch1(e, dataList)} 
            />
          </div>
          <div className="selectObjModal-left-main">
            <Spin loading={loading} style={{ width: '100%', height: '100%' }}>
              {data.length > 0 ? (
                <Tree
                  checkStrictly
                  defaultExpandAll
                  // defaultExpandAll
                  onExpand={(newExpandedKeys) => {
                    setExpandedKeys(newExpandedKeys);
                    setAutoExpandParent(false);
                  }}
                  expandedKeys={expandedKeys}
                  autoExpandParent={autoExpandParent}
                  // autoExpandParent={autoExpandParent}
                  onSelect={(checkedKeys, e) => {
                    handleCheck(checkedKeys, e);
                    onOk && onOk(e.node)

 src/utils/selectOption.js

@@ -2,7 +2,7 @@
 * @Company: hugeInfo
 * @Author: ldh
 * @Date: 2022-03-07 15:26:41
 * @LastEditTime: 2024-11-13 18:10:52
 * @LastEditTime: 2025-06-20 11:01:50
 * @LastEditors: lwh
 * @Version: 1.0.0
 * @Description: 公共下拉框数据
@@ -21,10 +21,30 @@
    {
        value: '22_00001-3',
        label: '自行排查',
        children: [
            {
                value: '22_00003-8',
                label: '部门排查',
            },
            {
                value: '22_00003-2',
                label: '网格上报',
            },
            {
                value: '22_00003-7',
                label: '专项治理',
            },
        ],
    },
    {
        value: '22_00001-4',
        label: '协同推送',
        children: [
            {
                value: '22_00003-1',
                label: '非警务纠纷',
            },
        ],
    },
];
// 来访形式
@@ -93,78 +113,78 @@
];
//上传材料类型
const fileOwnerType = [
  {
    value: '22_00018-101',
    label: '申请材料',
  },
  {
    value: '22_00018-102',
    label: '证据材料',
  },
  {
    value: '22_00018-202',
    label: '身份证明材料',
  },
  {
    value: '22_00018-207',
    label: '代理人授权委托书',
  },
  {
    value: '22_00018-203',
    label: '企业(机构)登记材料',
  },
  {
    value: '22_00018-204',
    label: '法定(机构)代表人身份证明材料',
  },
  {
    value: '22_00018-501',
    label: '办理附件',
  },
  {
    value: '22_00018-506',
    label: '督办附件',
  },
  {
    value: '22_00018-507',
    label: '督办回复附件',
  },
  {
    value: '22_00018-508',
    label: '联合处置申请附件',
  },
  {
    value: '22_00018-509',
    label: '联合处置申请审核附件',
  },
  {
    value: '22_00018-520',
    label: '回退申请附件',
  },
  {
    value: '22_00018-511',
    label: '回退审核附件',
  },
  {
    value: '22_00018-512',
    label: '上报申请附件',
  },
  {
    value: '22_00018-513',
    label: '上报审核附件',
  },
  {
    value: '22_00018-302',
    label: '协议文书',
  },
  {
    value: '22_00018-514',
    label: '结案审核附件',
  },
  {
    value: '22_00018-515',
    label: '不予受理附件',
  },
    {
        value: '22_00018-101',
        label: '申请材料',
    },
    {
        value: '22_00018-102',
        label: '证据材料',
    },
    {
        value: '22_00018-202',
        label: '身份证明材料',
    },
    {
        value: '22_00018-207',
        label: '代理人授权委托书',
    },
    {
        value: '22_00018-203',
        label: '企业(机构)登记材料',
    },
    {
        value: '22_00018-204',
        label: '法定(机构)代表人身份证明材料',
    },
    {
        value: '22_00018-501',
        label: '办理附件',
    },
    {
        value: '22_00018-506',
        label: '督办附件',
    },
    {
        value: '22_00018-507',
        label: '督办回复附件',
    },
    {
        value: '22_00018-508',
        label: '联合处置申请附件',
    },
    {
        value: '22_00018-509',
        label: '联合处置申请审核附件',
    },
    {
        value: '22_00018-520',
        label: '回退申请附件',
    },
    {
        value: '22_00018-511',
        label: '回退审核附件',
    },
    {
        value: '22_00018-512',
        label: '上报申请附件',
    },
    {
        value: '22_00018-513',
        label: '上报审核附件',
    },
    {
        value: '22_00018-302',
        label: '协议文书',
    },
    {
        value: '22_00018-514',
        label: '结案审核附件',
    },
    {
        value: '22_00018-515',
        label: '不予受理附件',
    },
];
// 附件上传人类型
const uploaderType = [
@@ -761,7 +781,7 @@
        value: '1',
        label: '合并',
    },
  {
    {
        value: '2',
        label: '未合并',
    },
@@ -1476,7 +1496,7 @@
        value: '2',
        label: '未通过',
    },
]
];

const rmtjList = [
    {
@@ -1495,7 +1515,7 @@
        value: '4',
        label: '转入失败',
    },
]
];

const inputWay = [
    {
@@ -1506,8 +1526,7 @@
        value: '2',
        label: '案件导入',
    },
]

];

const systemSource = [
    {
@@ -1518,7 +1537,7 @@
        value: '1',
        label: '白云区平台',
    },
]
];

const obj = {
    systemSource,

 src/utils/utility.js

@@ -17,7 +17,7 @@
import { pdf, jpg, file, word, excel } from '../assets/images/icon';
import { empty } from '@/assets/images';

export const isDebug = false; // 是否开发环境
export const isDebug = true; // 是否开发环境
export const isTest = true; // 是否测试环境

export const appUrl = isDebug ? debug : isTest ? test : web; // api

 src/views/comprehensive/index.jsx

@@ -1,4 +1,3 @@

import React, { useRef, useEffect, useState } from 'react';
import NewPage from '../../components/NewPage/index';
import { Form, Typography, Space, Tooltip } from 'antd';
@@ -7,350 +6,494 @@
import TableView from '../../components/TableViewCanSort';
import NewTableSearch from '../../components/NewTableSearch';
import SelectObjModal from '@/components/SelectObjModal/newSelectPerson';
import './index.less'
import './index.less';
const { Link } = Typography;

// 获取数据
function getCaseInfoDataApi(submitData) {
  return $$.ax.request({ url: 'caseInfo/pageQueryAll', type: 'get', data: submitData, service: 'mediate' });
    return $$.ax.request({ url: 'caseInfo/pageQueryAll', type: 'get', data: submitData, service: 'mediate' });
}

// 区域字典值
function treeByUserIdApi(submitData) {
  return $$.ax.request({ url: 'syRegion/treeByUserId', type: 'get', data: submitData, service: 'sys' });
    return $$.ax.request({ url: 'syRegion/treeByUserId', type: 'get', data: submitData, service: 'sys' });
}


const Comprehensive = () => {
  const [form] = Form.useForm();
  const formRef = useRef();
  let location = useLocation();
    const [form] = Form.useForm();
    const formRef = useRef();
    let location = useLocation();

  let navigate = useNavigate();
    let navigate = useNavigate();

  // 区域字典值
  const [treeList, setTreeList] = useState([]);
  // 筛选区域的中文
  const [labels, setLabels] = useState([]);
  // 默认查询询条件
  const [normalSearch, setNormalSearch] = useState({});
  // 搜索
  const [search, setSearch] = useState({ page: 1, size: 10, sortColmn: 1, sortType: 2 });
    // 区域字典值
    const [treeList, setTreeList] = useState([]);
    // 筛选区域的中文
    const [labels, setLabels] = useState([]);
    // 默认查询询条件
    const [normalSearch, setNormalSearch] = useState({});
    // 搜索
    const [search, setSearch] = useState({ page: 1, size: 10, sortColmn: 1, sortType: 2 });

  // 数据
  const [data, setData] = useState({ tableData: [] });
    // 数据
    const [data, setData] = useState({ tableData: [] });

  // 承办配合部门select框数据
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [selectObjModalData, setSelectObjModalData] = useState({})
    // 承办配合部门select框数据
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [selectObjModalData, setSelectObjModalData] = useState({});

  // 选择部门弹窗
  function onChange(key) {
    if (key === 'mediateUnitId') {
      setSelectObjModalData({ ...selectObjModalData, key, title: '承办部门' })
    } else if (key === 'assistUnitId') {
      setSelectObjModalData({ ...selectObjModalData, key, title: '配合部门' })
    } else {
      setSelectObjModalData({ ...selectObjModalData, key, type: 'person', title: '经办人' })
    }
    setIsModalVisible(true)
  }
    // 选择部门弹窗
    function onChange(key) {
        if (key === 'mediateUnitId') {
            setSelectObjModalData({ ...selectObjModalData, key, title: '承办部门' });
        } else if (key === 'assistUnitId') {
            setSelectObjModalData({ ...selectObjModalData, key, title: '配合部门' });
        } else {
            setSelectObjModalData({ ...selectObjModalData, key, type: 'person', title: '经办人' });
        }
        setIsModalVisible(true);
    }

  // 表头
  const columns = () => {
    const columnsData = [
      {
        title: '登记时间', width: 140, dataIndex: 'createTime', defaultSortOrder: 'descend', order: 'ascend',
        sorter: { compare: (a, b) => { } }, 			
        render: (text, record, index) => {
          return (
            <div style={{ display: 'flex', gap: '8px' }}>
              <div>{$$.dateFormat(text)}</div>
              {record?.isRisk === '1' && <div className="public-tag public-tag-tagRed">扬言</div>}
            </div>
          );
        },
      },
      { title: '登记机构', width: 150, dataIndex: 'inputUnitName' },
      { title: '问题属地', width: 100, dataIndex: 'areaName' },
      { title: '事项来源', width: 100, dataIndex: 'canalName' },
      { title: '事项等级', width: 100, dataIndex: 'caseLevel' },
      { title: '纠纷类型', width: 100, dataIndex: 'caseTypeName' },
      { title: '承办部门', width: 120, dataIndex: 'mediateUnitName' },
      { title: '配合部门', width: 120, dataIndex: 'assistUnitName' },
      { title: '事项状态', width: 100, dataIndex: 'statusName' },
      {
        title: '办结时间', width: 100, dataIndex: 'closeTime', order: 'ascend',
        sorter: { compare: (a, b) => { } }, render: (text) => <span>{$$.dateFormat(text)}</span>
      },
      {
        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> },
    // 表头
    const columns = () => {
        const columnsData = [
            {
                title: '登记时间',
                width: 140,
                dataIndex: 'createTime',
                defaultSortOrder: 'descend',
                order: 'ascend',
                sorter: { compare: (a, b) => {} },
                render: (text, record, index) => {
                    return (
                        <div style={{ display: 'flex', gap: '8px' }}>
                            <div>{$$.dateFormat(text)}</div>
                            {record?.isRisk === '1' && <div className="public-tag public-tag-tagRed">扬言</div>}
                        </div>
                    );
                },
            },
            { title: '登记机构', width: 150, dataIndex: 'inputUnitName' },
            { title: '问题属地', width: 100, dataIndex: 'areaName' },
            { title: '事项来源', width: 100, dataIndex: 'canalName' },
            { title: '事项等级', width: 100, dataIndex: 'caseLevel' },
            { title: '纠纷类型', width: 100, dataIndex: 'caseTypeName' },
            { title: '承办部门', width: 120, dataIndex: 'mediateUnitName' },
            { title: '配合部门', width: 120, dataIndex: 'assistUnitName' },
            { title: '事项状态', width: 100, dataIndex: 'statusName' },
            {
                title: '办结时间',
                width: 100,
                dataIndex: 'closeTime',
                order: 'ascend',
                sorter: { compare: (a, b) => {} },
                render: (text) => <span>{$$.dateFormat(text)}</span>,
            },
            {
                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 <Space>
            <span onClick={() => window.open(`${$$.windowUrl}/windowDetail?caseTaskId=${record.caseTaskId}&caseId=${record.id}`)} className='public-color public-a'>详情</span>
          </Space>;
        },
        // render: (_, record) => {
        //   return <Link onClick={() => {
        //     $$.setSessionStorage(location.pathname, { search: search, treeList: treeList, normalSearch: normalSearch });
        //     navigate(`/mediate/visit/fileMessage?caseTaskId=${record.caseTaskId}&caseId=${record.id}`)
        //   }}>详情</Link>;
        // },
      },
    ];
    return columnsData;
  };
            {
                title: '操作',
                dataIndex: 'action',
                width: 50,
                render: (_, record) => {
                    return (
                        <Space>
                            <span
                                onClick={() => window.open(`${$$.windowUrl}/windowDetail?caseTaskId=${record.caseTaskId}&caseId=${record.id}`)}
                                className="public-color public-a"
                            >
                                详情
                            </span>
                        </Space>
                    );
                },
                // render: (_, record) => {
                //   return <Link onClick={() => {
                //     $$.setSessionStorage(location.pathname, { search: search, treeList: treeList, normalSearch: normalSearch });
                //     navigate(`/mediate/visit/fileMessage?caseTaskId=${record.caseTaskId}&caseId=${record.id}`)
                //   }}>详情</Link>;
                // },
            },
        ];
        return columnsData;
    };

  // 页码修改
  function handleChangePage(page, pageSize, field, order) {
    let paramsObj = Object.assign(search, { page, size: pageSize });
    let sortColmn = '';
    let sortType = '';
    sortColmn = field === 'createTime' ? 1 : field === 'closeTime' ? 2 : '';
    sortType = order === 'ascend' ? 1 : order === 'descend' ? 2 : ''
    setSearch({ ...paramsObj, sortColmn, sortType });
    getCaseInfoData({ ...paramsObj, sortColmn, sortType });
  }
    // 页码修改
    function handleChangePage(page, pageSize, field, order) {
        let paramsObj = Object.assign(search, { page, size: pageSize });
        let sortColmn = '';
        let sortType = '';
        sortColmn = field === 'createTime' ? 1 : field === 'closeTime' ? 2 : '';
        sortType = order === 'ascend' ? 1 : order === 'descend' ? 2 : '';
        setSearch({ ...paramsObj, sortColmn, sortType });
        getCaseInfoData({ ...paramsObj, sortColmn, sortType });
    }

    // 导出数据
    function downloadXls() {
        const keysToFilter = ['page', 'size'];
        const filteredObj = Object.fromEntries(Object.entries(search).filter(([key, value]) => value !== undefined && !keysToFilter.includes(key)));

  // 导出数据
  function downloadXls() {
    const keysToFilter = ['page', 'size'];
    const filteredObj = Object.fromEntries(
      Object.entries(search)
        .filter(([key, value]) => value !== undefined && !keysToFilter.includes(key))
    );
        window.open(`${$$.appUrl.baseUrl}/${$$.appUrl.mediate}/api/web/caseInfo/exportQueryAll?${$$.useQueryParams(filteredObj)}`);
    }

    window.open(`${$$.appUrl.baseUrl}/${$$.appUrl.mediate}/api/web/caseInfo/exportQueryAll?${$$.useQueryParams(filteredObj)}`);
  };
    // 搜索 or 重置
    function handleSearch(type, session) {
        if (type === 'search') {
            let values = form.getFieldsValue();
            $$.changeTimNeweFormat(values, 'createTime', 'createStart', 'createEnd');
            $$.changeTimNeweFormat(values, 'closeTime', 'closeStart', 'closeEnd');
            $$.changeTimNeweFormat(values, 'fileTime', 'fileStart', 'fileEnd');
            $$.searchCascader(values, 'queCode', normalSearch.level, ['queCity', 'queArea', 'queRoad', 'queVillage']);
            $$.searchCascader(values, 'caseType', 1, ['caseType', 'caseType']);
            $$.searchCascader(search, 'caseType', 1, ['caseType', 'caseType']);
            $$.searchCascader(values, 'canal', 1, ['canal', 'canalSecond']);
            $$.searchCascader(search, 'canal', 1, ['canal', 'canalSecond']);

  // 搜索 or 重置
  function handleSearch(type, session) {
    if (type === 'search') {
      let values = form.getFieldsValue();
      $$.changeTimNeweFormat(values, 'createTime', 'createStart', 'createEnd');
      $$.changeTimNeweFormat(values, 'closeTime', 'closeStart', 'closeEnd');
      $$.changeTimNeweFormat(values, 'fileTime', 'fileStart', 'fileEnd');
      $$.searchCascader(values, 'queCode', normalSearch.level, ['queCity', 'queArea', 'queRoad', 'queVillage'])
      $$.searchCascader(values, 'caseType', 1, ['caseType', 'caseType'])
      $$.searchCascader(search, 'caseType', 1, ['caseType', 'caseType'])
      if (form.getFieldsValue()?.caseType) {
        values.caseType1 = form.getFieldsValue()?.caseType[0]
      }
      if (values.mediateUnitId) {
        values.mediateUnitId = selectObjModalData?.mediateUnitId?.key
      } else {
        delete values.mediateUnitId;
        delete search.mediateUnitId;
      }
      if (values.assistUnitId) {
        values.assistUnitId = selectObjModalData?.assistUnitId?.key
      } else {
        delete values.assistUnitId;
        delete search.assistUnitId;
      }
      if (values.mediatorId) {
        values.mediatorId = selectObjModalData?.mediatorId?.key
      } else {
        delete values.mediatorId;
        delete search.mediatorId;
      }
      getCaseInfoData({ page: search.page, size: search.size, sortColmn: search.sortColmn, sortType: search.sortType, ...values });
    }
    if (type === 'reset') {
      let paramsObj = { page: 1, size: 10, sortColmn: 1, sortType: 2 };
      getCaseInfoData({ ...paramsObj, [session.key]: session.value[0], createStart: $$.dateFormat(session.createStart), createEnd: $$.dateFormat(session.createEnd) });
      return;
    }
    if (type === 'recurrent') {
      let paramsObj = { ...search, ...session.search };
      let copyObj = { ...paramsObj };
      if (copyObj.createStart) {
        copyObj.createTime = [$$.dateFormat($$.myMoment(copyObj.createStart)), $$.dateFormat($$.myMoment(copyObj.createEnd))];
      }
      if (copyObj.closeTime) {
        copyObj.closeTime = [$$.dateFormat($$.myMoment(copyObj.closeStart)), $$.dateFormat($$.myMoment(copyObj.closeEnd))];
      }
      if (copyObj.fileTime) {
        copyObj.fileTime = [$$.dateFormat($$.myMoment(copyObj.fileStart)), $$.dateFormat($$.myMoment(copyObj.fileEnd))];
      }
      if (copyObj.queCity) {
        copyObj.queCode = [copyObj.queCity];
      }
      if (copyObj.queArea) {
        let arrayList = $$.convertStringToArray(copyObj.queArea)
        console.log('arrayList', arrayList);
            if (form.getFieldsValue()?.caseType) {
                values.caseType1 = form.getFieldsValue()?.caseType[0];
            }
            if (form.getFieldsValue()?.canal) {
                values.caseType1 = form.getFieldsValue()?.canal[0];
            }
            if (values.mediateUnitId) {
                values.mediateUnitId = selectObjModalData?.mediateUnitId?.key;
            } else {
                delete values.mediateUnitId;
                delete search.mediateUnitId;
            }
            if (values.assistUnitId) {
                values.assistUnitId = selectObjModalData?.assistUnitId?.key;
            } else {
                delete values.assistUnitId;
                delete search.assistUnitId;
            }
            if (values.mediatorId) {
                values.mediatorId = selectObjModalData?.mediatorId?.key;
            } else {
                delete values.mediatorId;
                delete search.mediatorId;
            }
            getCaseInfoData({ page: search.page, size: search.size, sortColmn: search.sortColmn, sortType: search.sortType, ...values });
        }
        if (type === 'reset') {
            let paramsObj = { page: 1, size: 10, sortColmn: 1, sortType: 2 };
            getCaseInfoData({
                ...paramsObj,
                [session.key]: session.value[0],
                createStart: $$.dateFormat(session.createStart),
                createEnd: $$.dateFormat(session.createEnd),
            });
            return;
        }
        if (type === 'recurrent') {
            let paramsObj = { ...search, ...session.search };
            let copyObj = { ...paramsObj };
            if (copyObj.createStart) {
                copyObj.createTime = [$$.dateFormat($$.myMoment(copyObj.createStart)), $$.dateFormat($$.myMoment(copyObj.createEnd))];
            }
            if (copyObj.closeTime) {
                copyObj.closeTime = [$$.dateFormat($$.myMoment(copyObj.closeStart)), $$.dateFormat($$.myMoment(copyObj.closeEnd))];
            }
            if (copyObj.fileTime) {
                copyObj.fileTime = [$$.dateFormat($$.myMoment(copyObj.fileStart)), $$.dateFormat($$.myMoment(copyObj.fileEnd))];
            }
            if (copyObj.queCity) {
                copyObj.queCode = [copyObj.queCity];
            }
            if (copyObj.queArea) {
                let arrayList = $$.convertStringToArray(copyObj.queArea);
                console.log('arrayList', arrayList);

        copyObj.queCode = arrayList
      }
      if (copyObj.queRoad) {
        let arrayList = $$.convertStringToArray(copyObj.queRoad)
        console.log('arrayList', arrayList);
        copyObj.queCode = arrayList
      }
      if (copyObj.queVillage) {
        let arrayList = $$.convertStringToArray(copyObj.queVillage)
        copyObj.queCode = arrayList
      }
      if (copyObj.caseType) {
        copyObj.caseType = [copyObj.caseType1, copyObj.caseType]
      }
      form.setFieldsValue(copyObj);
      getCaseInfoData(paramsObj);
      return;
    }
                copyObj.queCode = arrayList;
            }
            if (copyObj.queRoad) {
                let arrayList = $$.convertStringToArray(copyObj.queRoad);
                console.log('arrayList', arrayList);
                copyObj.queCode = arrayList;
            }
            if (copyObj.queVillage) {
                let arrayList = $$.convertStringToArray(copyObj.queVillage);
                copyObj.queCode = arrayList;
            }
            if (copyObj.caseType) {
                copyObj.caseType = [copyObj.caseType1, copyObj.caseType];
            }
            if (copyObj.canal) {
                copyObj.canal = [copyObj.canalSecond, copyObj.canal];
            }
            form.setFieldsValue(copyObj);
            getCaseInfoData(paramsObj);
            return;
        }
    }

  }
    // 获取数据
    async function getCaseInfoData(submitData) {
        global.setSpinning(true);
        const res = await getCaseInfoDataApi(submitData);
        global.setSpinning(false);
        if (res.type) {
            setSearch(submitData);
            setData({
                total: res?.data?.totalElements || 0,
                tableData: res?.data?.content || [],
            });
        }
    }

  // 获取数据
  async function getCaseInfoData(submitData) {
    global.setSpinning(true);
    const res = await getCaseInfoDataApi(submitData);
    global.setSpinning(false);
    if (res.type) {
      setSearch(submitData);
      setData({
        total: res?.data?.totalElements || 0,
        tableData: res?.data?.content || [],
      });
    }
  }
    // 获取区域字典值
    async function treeByUserId() {
        global.setSpinning(true);
        const res = await treeByUserIdApi();
        global.setSpinning(false);
        if (res.type) {
            let list = res.data || [];
            setTreeList(list);
            let values = form.getFieldsValue();
            let key = levelKey(list[0].level || '1');
            values.queCode = [list[0].value];
            values.createTime = [
                $$.myMoment().subtract(0, 'months').startOf('month').format('YYYY-MM-DD'),
                $$.myMoment().subtract(0, 'months').endOf('month').format('YYYY-MM-DD'),
            ];
            form.setFieldsValue(values);
            setLabels([list[0].label]);
            setNormalSearch({
                key,
                value: [list[0].value],
                level: list[0].level,
                createStart: $$.myMoment().subtract(0, 'months').startOf('month').format('YYYY-MM-DD'),
                createEnd: $$.myMoment().subtract(0, 'months').endOf('month').format('YYYY-MM-DD'),
            });
            handleSearch('reset', {
                key,
                value: [list[0].value],
                createStart: $$.myMoment().subtract(0, 'months').startOf('month').format('YYYY-MM-DD'),
                createEnd: $$.myMoment().subtract(0, 'months').endOf('month').format('YYYY-MM-DD'),
            });
        }
    }

    function levelKey(KeyIndex) {
        return {
            1: 'queCity',
            2: 'queArea',
            3: 'queRoad',
            4: 'queVillage',
        }[KeyIndex];
    }

  // 获取区域字典值
  async function treeByUserId() {
    global.setSpinning(true);
    const res = await treeByUserIdApi();
    global.setSpinning(false);
    if (res.type) {
      let list = res.data || []
      setTreeList(list);
      let values = form.getFieldsValue();
      let key = levelKey(list[0].level || '1');
      values.queCode = [list[0].value]
      values.createTime = [$$.myMoment().subtract(0, 'months').startOf('month').format('YYYY-MM-DD'), $$.myMoment().subtract(0, 'months').endOf('month').format('YYYY-MM-DD')]
      form.setFieldsValue(values);
      setLabels([list[0].label]);
      setNormalSearch({ key, value: [list[0].value], level: list[0].level, createStart: $$.myMoment().subtract(0, 'months').startOf('month').format('YYYY-MM-DD'), createEnd: $$.myMoment().subtract(0, 'months').endOf('month').format('YYYY-MM-DD') })
      handleSearch('reset', { key, value: [list[0].value], createStart: $$.myMoment().subtract(0, 'months').startOf('month').format('YYYY-MM-DD'), createEnd: $$.myMoment().subtract(0, 'months').endOf('month').format('YYYY-MM-DD') });
    }
  }
    // 初始化
    useEffect(() => {
        let values = $$.getSessionStorage(location.pathname);
        console.log('values', values);

  function levelKey(KeyIndex) {
    return {
      1: 'queCity',
      2: 'queArea',
      3: 'queRoad',
      4: 'queVillage'
    }[KeyIndex]
  }
        if (!!values) {
            setTreeList(values?.treeList || []);
            setNormalSearch(values?.normalSearch || {});
            handleSearch('recurrent', values);
            $$.clearSessionStorage(location.pathname);
        } else {
            treeByUserId();
        }
    }, []);

  // 初始化
  useEffect(() => {
    let values = $$.getSessionStorage(location.pathname);
    console.log('values', values);
    return (
        <NewPage pageHead={{ breadcrumbData: [{ title: '工作台' }, { title: '综合查询' }], title: '综合查询' }}>
            <div className="comprehensive">
                <div className="pageSearch">
                    <div className="comprehensive-title">查询条件</div>
                    <NewTableSearch
                        exportButton={downloadXls}
                        labelLength={6}
                        form={form}
                        itemData={[
                            {
                                type: 'Cascader',
                                name: 'queCode',
                                label: '问题属地',
                                placeholder: '请选择',
                                changeSelect: true,
                                allowClear: false,
                                treedata: treeList || [],
                            },
                            {
                                type: 'RangePicker',
                                name: 'createTime',
                                label: '登记时间',
                                shortcutsPlacementLeft: true,
                                allowClear: false,
                                shortcuts: $$.shortcutsList(),
                                span: 8,
                            },
                            { type: 'RangePicker', name: 'closeTime', label: '办结时间', shortcutsPlacementLeft: true, shortcuts: $$.shortcutsList(), span: 8 },
                            { type: 'RangePicker', name: 'fileTime', label: '归档时间', shortcutsPlacementLeft: true, shortcuts: $$.shortcutsList(), span: 8 },
                            {
                                type: 'Cascader',
                                name: 'caseType',
                                label: '纠纷类型',
                                placeholder: '请选择',
                                span: 8,
                                changeSelect: true,
                                treedata: $$.caseTypeSelect.caseTypeSelect,
                            },
                            { type: 'Select', name: 'mediResult', label: '化解结果', placeholder: '请选择', span: 8, selectdata: $$.options.mediResult },
                            { type: 'Input', name: 'caseRef', label: '事项编号' },
                            {
                                type: 'Cascader',
                                name: 'canal',
                                label: '事项来源',
                                placeholder: '请选择',
                                span: 8,
                                changeSelect: true,
                                treedata: $$.options.caseCanal,
                            },
                            { type: 'Select', name: 'status', label: '事项状态', placeholder: '请选择', span: 8, selectdata: $$.options.caseStatus },
                            { type: 'Select', name: 'caseLevel', label: '事项等级', placeholder: '请选择', span: 8, selectdata: $$.options.caseLevelList },
                            { type: 'Select', name: 'systemSource', label: '系统来源', placeholder: '请选择', span: 8, selectdata: $$.options.systemSource },
                            { type: 'Input', name: 'inputUnitName', label: '登记机构' },
                            {
                                type: 'searchButton',
                                name: 'mediateUnitId',
                                maxLength: 0,
                                onClear: () => {
                                    console.log('clear');
                                    setSelectObjModalData({ ...selectObjModalData, mediateUnitId: {} });
                                    form.setFieldValue('mediateUnitId', '');
                                },
                                onSearch: () => {
                                    onChange('mediateUnitId');
                                },
                                searchButton: '选择',
                                placeholder: '请选择',
                                label: '承办部门',
                            },
                            {
                                type: 'searchButton',
                                name: 'assistUnitId',
                                maxLength: 0,
                                onClear: () => {
                                    setSelectObjModalData({ ...selectObjModalData, assistUnitId: {} });
                                    form.setFieldValue('assistUnitId', '');
                                },
                                onSearch: () => {
                                    onChange('assistUnitId');
                                },
                                searchButton: '选择',
                                placeholder: '请选择',
                                label: '配合部门',
                            },
                            { type: 'Input', name: 'plaintiffs', label: '申请方', labelStyle: { width: '56px' } },
                            { type: 'Input', name: 'defendants', label: '被申请方' },
                            { type: 'Select', name: 'peopleNum', placeholder: '请选择', label: '涉及人数', selectdata: $$.options.peopleNum },
                            { type: 'Select', name: 'amount', placeholder: '请选择', label: '涉及金额', selectdata: $$.options.amount },
                            { type: 'Select', name: 'evaluateGrade', placeholder: '请选择', label: '评价等级', selectdata: $$.options.evaluateGrade },
                            {
                                type: 'Select',
                                name: 'majorStatus',
                                placeholder: '请选择',
                                label: '是否重大矛盾',
                                selectdata: [
                                    { label: '是', value: '1' },
                                    { label: '否', value: '0' },
                                ],
                            },
                            {
                                type: 'searchButton',
                                name: 'mediatorId',
                                maxLength: 0,
                                onClear: () => {
                                    setSelectObjModalData({ ...selectObjModalData, mediatorId: {} });
                                    form.setFieldValue('mediatorId', '');
                                },
                                onSearch: () => {
                                    onChange('mediatorId');
                                },
                                searchButton: '选择',
                                placeholder: '请选择',
                                label: '经办人',
                            },
                            {
                                type: 'Select',
                                name: 'isRisk',
                                placeholder: '请选择',
                                label: '是否扬言极端',
                                selectdata: [
                                    { label: '是', value: '1' },
                                    { label: '否', value: '0' },
                                ],
                            },
                            { type: 'Select', name: 'agreeType', placeholder: '请选择', label: '结案协议类型', selectdata: $$.options.caseAgreeType },
                            { type: 'Select', name: 'repeatCase', placeholder: '请选择', label: '合并事项', selectdata: $$.options.repeatCase },
                            { type: 'Input', name: 'caseCityCode', label: '市民编号' },
                        ]}
                        handleReset={() => {
                            form.resetFields();
                            form.setFieldsValue({
                                queCode: [normalSearch.value[0]],
                                createTime: [$$.dateFormat(normalSearch.createStart), $$.dateFormat(normalSearch.createEnd)],
                            });
                            setLabels([treeList[0].label]);
                            handleSearch('reset', normalSearch);
                        }}
                        handleSearch={() => handleSearch('search')}
                    />
                </div>

    if (!!values) {
      setTreeList(values?.treeList || [])
      setNormalSearch(values?.normalSearch || {})
      handleSearch('recurrent', values)
      $$.clearSessionStorage(location.pathname);
    } else {
      treeByUserId();
    }
  }, []);


  return (
    <NewPage
      pageHead={
        { breadcrumbData: [{ title: '工作台' }, { title: '综合查询' }], title: '综合查询' }
      }
    >
      <div className="comprehensive">
        <div className="pageSearch">
          <div className='comprehensive-title'>查询条件</div>
          <NewTableSearch
            exportButton={downloadXls}
            labelLength={6}
            form={form}
            itemData={[
              { type: 'Cascader', name: 'queCode', label: '问题属地', placeholder: '请选择', changeSelect: true, allowClear: false, treedata: treeList || [] },
              { type: 'RangePicker', name: 'createTime', label: '登记时间', shortcutsPlacementLeft: true, allowClear: false, shortcuts: $$.shortcutsList(), span: 8 },
              { type: 'RangePicker', name: 'closeTime', label: '办结时间', shortcutsPlacementLeft: true, shortcuts: $$.shortcutsList(), span: 8 },
              { type: 'RangePicker', name: 'fileTime', label: '归档时间', shortcutsPlacementLeft: true, shortcuts: $$.shortcutsList(), span: 8 },
              { type: 'Cascader', name: 'caseType', label: '纠纷类型', placeholder: '请选择', span: 8, changeSelect: true, treedata: $$.caseTypeSelect.caseTypeSelect },
              { type: 'Select', name: 'mediResult', label: '化解结果', placeholder: '请选择', span: 8, selectdata: $$.options.mediResult },
              { type: 'Input', name: 'caseRef', label: '事项编号' },
              { type: 'Select', name: 'canal', label: '事项来源', placeholder: '请选择', span: 8, selectdata: $$.options.caseCanal },
              { type: 'Select', name: 'status', label: '事项状态', placeholder: '请选择', span: 8, selectdata: $$.options.caseStatus },
              { type: 'Select', name: 'caseLevel', label: '事项等级', placeholder: '请选择', span: 8, selectdata: $$.options.caseLevelList },
              { type: 'Select', name: 'systemSource', label: '系统来源', placeholder: '请选择', span: 8, selectdata: $$.options.systemSource },
              { type: 'Input', name: 'inputUnitName', label: '登记机构' },
              { type: 'searchButton', name: 'mediateUnitId', maxLength: 0, onClear: () => { console.log('clear'); setSelectObjModalData({ ...selectObjModalData, mediateUnitId: {} }); form.setFieldValue('mediateUnitId', '') }, onSearch: () => { onChange('mediateUnitId') }, searchButton: '选择', placeholder: '请选择', label: '承办部门' },
              { type: 'searchButton', name: 'assistUnitId', maxLength: 0, onClear: () => { setSelectObjModalData({ ...selectObjModalData, assistUnitId: {} }); form.setFieldValue('assistUnitId', '') }, onSearch: () => { onChange('assistUnitId') }, searchButton: '选择', placeholder: '请选择', label: '配合部门' },
              { type: 'Input', name: 'plaintiffs', label: '申请方', labelStyle: { width: '56px' } },
              { type: 'Input', name: 'defendants', label: '被申请方' },
              { type: 'Select', name: 'peopleNum', placeholder: '请选择', label: '涉及人数', selectdata: $$.options.peopleNum },
              { type: 'Select', name: 'amount', placeholder: '请选择', label: '涉及金额', selectdata: $$.options.amount },
              { type: 'Select', name: 'evaluateGrade', placeholder: '请选择', label: '评价等级', selectdata: $$.options.evaluateGrade },
              { type: 'Select', name: 'majorStatus', placeholder: '请选择', label: '是否重大矛盾', selectdata: [{ label: '是', value: '1' }, { label: '否', value: '0' }] },
              { type: 'searchButton', name: 'mediatorId', maxLength: 0, onClear: () => { setSelectObjModalData({ ...selectObjModalData, mediatorId: {} }); form.setFieldValue('mediatorId', '') }, onSearch: () => { onChange('mediatorId') }, searchButton: '选择', placeholder: '请选择', label: '经办人' },
              { type: 'Select', name: 'isRisk', placeholder: '请选择', label: '是否扬言极端', selectdata: [{ label: '是', value: '1' }, { label: '否', value: '0' }] },
              { type: 'Select', name: 'agreeType', placeholder: '请选择', label: '结案协议类型', selectdata: $$.options.caseAgreeType },
              { type: 'Select', name: 'repeatCase', placeholder: '请选择', label: '合并事项', selectdata: $$.options.repeatCase },
              { type: 'Input', name: 'caseCityCode', label: '市民编号' },
            ]}
            handleReset={() => {
              form.resetFields();
              form.setFieldsValue({ queCode: [normalSearch.value[0]], createTime: [$$.dateFormat(normalSearch.createStart), $$.dateFormat(normalSearch.createEnd)] });
              setLabels([treeList[0].label]);
              handleSearch('reset', normalSearch)
            }}
            handleSearch={() => handleSearch('search')}
          />
        </div>

        <div style={{ marginTop: '8px' }} className="comprehensive-table">
          <TableView
            showHeader
            title="查询结果"
            columns={columns()}
            dataSource={data.tableData}
            onChange={(pagination, filters, sorter) => {
              handleChangePage(pagination.current, pagination.pageSize, sorter.field, sorter.order)
            }}
            pagination={{
              current: search.page,
              pageSize: search.size,
              total: data.total,
            }}
          />
        </div>
        <SelectObjModal
          visible={isModalVisible}
          nameStr={selectObjModalData.title}
          checkKeys={[selectObjModalData[selectObjModalData.key]?.key || '']}
          onOk={(item) => {
            setIsModalVisible(false);
            setSelectObjModalData({ ...selectObjModalData, [selectObjModalData.key]: item })
            form.setFieldValue(selectObjModalData?.key, item.name)
          }}
          type={selectObjModalData.type || 'dept'}
          onClose={() => setIsModalVisible(false)}
          isCheckbox={false}
        />
      </div>
    </NewPage>
  );
                <div style={{ marginTop: '8px' }} className="comprehensive-table">
                    <TableView
                        showHeader
                        title="查询结果"
                        columns={columns()}
                        dataSource={data.tableData}
                        onChange={(pagination, filters, sorter) => {
                            handleChangePage(pagination.current, pagination.pageSize, sorter.field, sorter.order);
                        }}
                        pagination={{
                            current: search.page,
                            pageSize: search.size,
                            total: data.total,
                        }}
                    />
                </div>
                <SelectObjModal
                    visible={isModalVisible}
                    nameStr={selectObjModalData.title}
                    checkKeys={[selectObjModalData[selectObjModalData.key]?.key || '']}
                    onOk={(item) => {
                        setIsModalVisible(false);
                        setSelectObjModalData({ ...selectObjModalData, [selectObjModalData.key]: item });
                        form.setFieldValue(selectObjModalData?.key, item.name);
                    }}
                    type={selectObjModalData.type || 'dept'}
                    onClose={() => setIsModalVisible(false)}
                    isCheckbox={false}
                />
            </div>
        </NewPage>
    );
};

export default Comprehensive;

 src/views/disputeLedger/index.jsx

@@ -2,7 +2,7 @@
 * @Company: hugeInfo
 * @Author: lwh
 * @Date: 2024-09-14 15:59:17
 * @LastEditTime: 2025-06-14 11:35:43
 * @LastEditTime: 2025-06-20 18:48:05
 * @LastEditors: lwh
 * @Version: 1.0.0
 * @Description:
@@ -43,6 +43,11 @@
// 调度中心列表
function getListDataApi(submitData) {
    return $$.ax.request({ url: 'caseInfo/ledger', type: 'get', data: submitData, service: 'mediate' });
}

//
function ledgerCountApi(submitData) {
    return $$.ax.request({ url: 'caseInfo/ledgerCount', type: 'get', data: submitData, service: 'mediate' });
}

// 区域字典值
@@ -86,7 +91,7 @@
        data4: { value1: 24, value2: 30, value3: 46 },
    });

    const [allNum, setAllNum] = useState(0);
    const [allData, setAllData] = useState({});

    // 搜索 or 重置
    function handleSearch(type, session) {
@@ -100,8 +105,24 @@
                    },
                    activeKey
                );
                ledgerCount(
                    {
                        [session.key]: session.value[0],
                        createStart: $$.dateFormat(session.createStart),
                        createEnd: $$.dateFormat(session.createEnd),
                    },
                    activeKey
                );
            } else {
                getListData(
                    {
                        [normalSearch.key]: normalSearch.value[0],
                        createStart: $$.dateFormat(normalSearch.createStart),
                        createEnd: $$.dateFormat(normalSearch.createEnd),
                    },
                    activeKey
                );
                ledgerCount(
                    {
                        [normalSearch.key]: normalSearch.value[0],
                        createStart: $$.dateFormat(normalSearch.createStart),
@@ -119,6 +140,7 @@
            $$.searchCascader(values, 'queCode', normalSearch.level, ['queCity', 'queArea', 'queRoad', 'queVillage']);
            $$.searchCascader(values, 'caseType', 1, ['caseType', 'caseType']);
            getListData({ ...values }, session);
            ledgerCount({ ...values }, session);
            return;
        }
    }
@@ -131,6 +153,7 @@
        if (res.type) {
            let nowData = res.data || {};
            setData({ ...data, ...nowData });
            // !allData.hasOwnProperty('sysNum') && ledgerCount(submitData, ledgerType);
            // setSearch(submitData);
        }
    }
@@ -186,6 +209,15 @@
            3: 'queRoad',
            4: 'queVillage',
        }[KeyIndex];
    }

    async function ledgerCount(submitData, ledgerType) {
        global.setSpinning(true);
        const res = await ledgerCountApi({ ...submitData, ledgerType });
        global.setSpinning(false);
        if (res.type) {
            setAllData({ ...res.data });
        }
    }

    useEffect(() => {
@@ -281,7 +313,7 @@
                            {
                                icon: disputeLedger_8,
                                title: '全部',
                                value: data?.totalNum || 0,
                                value: allData?.allNum || 0,
                                backgroundColor: '#e8f7ff',
                                borderColor: '#3491fa',
                                color: '#3491FA',
@@ -290,56 +322,56 @@
                            {
                                icon: disputeLedger_9,
                                title: '本系统',
                                value: data?.sysNum || 0,
                                value: allData?.sysNum || 0,
                                backgroundColor: '#fff7e6',
                                borderColor: '#FA8C16',
                                color: '#FA8C16',
                                per: `${data?.sysRate || 0}%`,
                                per: `${allData?.sysRate || 0}%`,
                            },
                            {
                                icon: disputeLedger_10,
                                title: '12345',
                                value: data?.ottffNum || 0,
                                value: allData?.ottffNum || 0,
                                backgroundColor: '#F9F0FF',
                                borderColor: '#722ED1',
                                color: '#722ED1',
                                per: `${data?.ottffRate || 0}%`,
                                per: `${allData?.ottffRate || 0}%`,
                            },
                            {
                                icon: disputeLedger_11,
                                title: '非警务纠纷',
                                value: data?.fjwjfNum || 0,
                                value: allData?.tzfjwjfNum || 0,
                                backgroundColor: 'rgba(182,221,241,0.24)',
                                borderColor: '#1A6FB8',
                                color: '#1A6FB8',
                                per: `${data?.fjwjfRate || 0}%`,
                                per: `${allData?.tzfjwjfRate || 0}%`,
                            },
                            {
                                icon: disputeLedger_12,
                                title: '人民调解',
                                value: data?.rmtjNum || 0,
                                value: allData?.rmtjNum || 0,
                                backgroundColor: 'rgba(253,205,197,0.24)',
                                borderColor: '#F53F3F',
                                color: '#F53F3F',
                                per: `${data?.rmtjRate || 0}%`,
                                per: `${allData?.rmtjRate || 0}%`,
                            },
                            {
                                icon: disputeLedger_13,
                                title: '信访',
                                value: data?.xfNum || 0,
                                value: allData?.xfNum || 0,
                                backgroundColor: 'rgba(175,240,181,0.24)',
                                borderColor: '#00B42A',
                                color: '#00B42A',
                                per: `${data?.xfRate || 0}%`,
                                per: `${allData?.xfRate || 0}%`,
                            },
                            {
                                icon: disputeLedger_14,
                                title: '劳动争议',
                                value: data?.ldzcNum || 0,
                                value: allData?.ldzcNum || 0,
                                backgroundColor: 'rgba(181,245,236,0.24)',
                                borderColor: '#08979c',
                                color: '#08979c',
                                per: `${data?.ldzcRate || 0}%`,
                                per: `${allData?.ldzcRate || 0}%`,
                            },
                        ].map((item, index) => (
                            <div
@@ -347,26 +379,9 @@
                                    setActiveKey(index);
                                    setActiveName(item.title);
                                    if (index === 0) {
                                        setAllNum(data?.allNum || 0);
                                        handleSearch('search', '');
                                    } else if (index === 1) {
                                        setAllNum(data?.sysNum || 0);
                                        handleSearch('search', 1);
                                    } else if (index === 2) {
                                        setAllNum(data?.ottffNum || 0);
                                        handleSearch('search', 2);
                                    } else if (index === 3) {
                                        setAllNum(data?.rmtjNum || 0);
                                        handleSearch('search', 3);
                                    } else if (index === 4) {
                                        setAllNum(data?.xfNum || 0);
                                        handleSearch('search', 4);
                                    } else if (index === 5) {
                                        setAllNum(data?.ldzcNum || 0);
                                        handleSearch('search', 5);
                                    } else if (index === 6) {
                                        setAllNum(data?.fjwjfNum || 0);
                                        handleSearch('search', 6);
                                    } else {
                                        handleSearch('search', index);
                                    }
                                }}
                                className={`disputeLedger-card ${activeKey === index ? 'disputeLedger-card-active' : ''}`}
@@ -441,7 +456,26 @@
                                            { value: data.finishNum, name: '化解成功' },
                                            { value: data.failNum, name: '化解不成功' },
                                        ]}
                                        allNum={allNum}
                                        allNum={(() => {
                                            switch (activeKey) {
                                                case 0:
                                                    return allData?.allNum || 0;
                                                case 1:
                                                    return allData?.sysNum || 0;
                                                case 2:
                                                    return allData?.ottffNum || 0;
                                                case 3:
                                                    return allData?.tzfjwjfNum || 0;
                                                case 4:
                                                    return allData?.rmtjNum || 0;
                                                case 5:
                                                    return allData?.xfNum || 0;
                                                case 6:
                                                    return allData?.ldzcNum || 0;
                                                default:
                                                    return allData?.sysNum || 0;
                                            }
                                        })()}
                                    />
                                </div>
                            </div>

 src/views/workDash/index copy 2.jsx

New file
@@ -0,0 +1,3016 @@
/*
 * @Company: hugeInfo
 * @Author: lwh
 * @Date: 2024-09-14 15:59:17
 * @LastEditTime: 2025-06-20 16:38:50
 * @LastEditors: lwh
 * @Version: 1.0.0
 * @Description:
 */
import React, { useState, useEffect, useRef, useMemo, Children } from 'react';
import * as $$ from '../../utils/utility';
import { Form, Typography, Row, Col, Space, Divider, Table, Empty, Breadcrumb } from 'antd';
import { Alert, Select, Tooltip, Modal, Button } from '@arco-design/web-react';
import { IconUndo, IconCaretRight } from '@arco-design/web-react/icon';
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,
    huo,
    workDash_9,
    workDash_10,
    workDash_11,
    workDash_12,
    workDash_13,
    workDash_14,
    workDash_16,
    workDash_17,
    workDash_18,
    workDash_19,
    workDash_20,
    workDash_21,
    workDash_22,
    workDash_23,
    workDash_24,
    workDash_25,
    workDash_26,
} 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 SupervisingViews from '../../views/register/matterDetail/SupervisingViews';
import Response from '../../views/register/matterDetail/response';
import ResponseDetail from '../../views/register/matterDetail/responseDetail';
import SelectObjModal from '@/components/SelectObjModal/newSelectPerson';
import { empty } from '@/assets/images';
import './index.less';

const { Link } = Typography;
const Option = Select.Option;
// 调度中心列表
function getListDataApi(submitData) {
    return $$.ax.request({ url: 'caseInfo/statistics', type: 'get', data: submitData, service: 'mediate' });
}

function treeByUserIdApi() {
    return $$.ax.request({ url: 'syRegion/treeByUserId', type: 'get', service: 'sys' });
}

function caseSuperviseInfoApi(data) {
    return $$.ax.request({ url: `caseSupervise/getById`, type: 'get', service: 'mediate', data });
}

// 解纷态势-纠纷类型子集
function statisticsCaseTypeApi(submitData) {
    return $$.ax.request({ url: 'caseInfo/statisticsCaseType', type: 'get', data: submitData, service: 'mediate' });
}

// 获取实时动态数据
function getCaseInfoDataApi(submitData) {
    return $$.ax.request({ url: 'caseInfo/pageQueryAll', type: 'get', data: submitData, service: 'mediate' });
}

// 扬言极端分组统计
function getAnalysisApi(submitData) {
    return $$.ax.request({ url: 'analysis/statisticsYYJDQuantity', type: 'get', data: submitData, service: 'mediate' });
}

//督办次数
function pageCaseSuperviseApi(data) {
    return $$.ax.request({ url: 'caseSupervise/pageCaseSupervise', type: 'get', service: 'mediate', data });
}

//风险评估
function pageExtremeCaseApi(data) {
    return $$.ax.request({ url: `caseTask/pageExtremeCase`, type: 'get', service: 'mediate', data });
}

//督办添加id
function getNewTimeIdApi(id) {
    return $$.ax.request({ url: `caseUtils/getNewTimeId`, type: 'get', service: 'utils' });
}

// 在文件顶部添加新的API请求函数
function pageQueryAreaApi(data) {
    return $$.ax.request({ url: 'caseInfo/pageQueryArea', type: 'get', data, service: 'mediate' });
}

const WorkDash = () => {
    const navigate = useNavigate();
    const [form] = Form.useForm();
    const [modalForm] = Form.useForm();
    // 搜索
    const [search, setSearch] = useState({});
    // 默认查询询条件
    const [normalSearch, setNormalSearch] = useState({});
    // 筛选区域的中文
    const [labels, setLabels] = useState([]);
    const [yYjds, setYYjds] = useState([]);

    const [region, setRegion] = useState({});
    const [temporary, setTemporary] = useState([]);
    // 筛选纠纷类型的中文
    const [caseTypeNames, setCaseTypeNames] = useState([]);
    const [temporaryCaseType, setTemporaryCaseType] = useState([]);
    // 数据
    const [data, setData] = useState({});

    const [listData, setListData] = useState({ tableData: [] }); //实时动态数据表
    const [listDataSearch, setListDataSearch] = useState({ page: 1, size: 10, sortColmn: '1', sortType: '2' }); //实时动态数据表

    // 调解组织select框数据
    const [adjustOrgData, setAdjustOrgData] = useState([]);
    // tab切换
    const [tabKey, setTabKey] = useState('1');
    // 区域字典值
    const [treeList, setTreeList] = useState([]);
    // 纠纷类型、化解状况、事项等级切换
    const [rightTag, setRightTag] = useState('1');
    // 纠纷类型饼图所在层级
    const [caseTypeLevel, setCaseTypeLevel] = useState(1);
    // 纠纷类型饼图2层，3层数据
    const [caseTypeList, setCaseTypeList] = useState([]);

    // 化解统计切换
    const [province, setProvince] = useState('');

    // 承办配合部门select框数据
    const [selectModalVisible, setSelectModalVisible] = useState(false);
    const [selectObjModalData, setSelectObjModalData] = useState({});

    // 扬言极端
    const [extremeData, setExtremeData] = useState([]);
    const [extremeTotal, setExtremeTotal] = useState(0);
    const [yYjdData, setYYjdData] = useState({ visible: false, data: {} });
    const [SuperviseListData, setSuperviseListData] = useState([]);
    const [supervisingList, setSupervisingList] = useState(false);
    const [tableData, setTableData] = useState({ list: [] }); //表格数据
    const [yYJDSortType, setYYJDSortType] = useState('2'); //事件数量默认排序
    const [pageData, setPageData] = useState({ sortType: 2, sortColmn: 1, page: 1, size: 10 });
    const [searchSupervise, setSearchSupervise] = useState({ page: '1', size: 20, caseId: '', type: 0 });

    const [response, setResponse] = useState(false);
    const [detail, setDetail] = useState(false);
    const [responseId, setResponseId] = useState('');
    const [superviseInfo, setSuperviseInfo] = useState({});
    const [responseDetail, setResponseDetail] = useState({});
    const [supervisingId, setSupervisingId] = useState('');
    const [supervising, setSupervising] = useState(false); //督办弹窗控制
    const [supervisingAddId, setSupervisingAddId] = useState('');

    // 添加modalData和modalVisible的state
    const [modalData, setModalData] = useState({});
    const [modalSearch, setModalSearch] = useState({ page: 1, size: 10, sortColmn: 1, sortType: 2 });
    const [modalVisible, setModalVisible] = useState(false);

    //排序
    const handleSortModal = (page, pageSize, sort) => {
        console.log('sort', page, pageSize, sort);
        let sortColmn = sort.column ? sort.column.sortNumber : 1;
        let sortType = sort.order === 'descend' ? 2 : 1; //1：正序；2：倒序
        handleModal({
            ...modalSearch,
            ...pageData,
            sortType,
            sortColmn,
            page,
            size: pageSize,
        });
    };

    // 搜索 or 重置
    function handleModalSearch(type, session) {
        if (type === 'search') {
            let values = modalForm.getFieldsValue();
            handleModal({ ...modalSearch, ...values });
        }
        if (type === 'reset') {
            let paramsObj = { page: 1, size: 10, sortColmn: 1, sortType: 2 };
            handleModal({
                ...search,
                ...paramsObj,
            });
            return;
        }
    }

    async function handleModal(params) {
        global.setSpinning(true);
        const res = await pageQueryAreaApi({ ...params });
        global.setSpinning(false);
        if (res.type) {
            // 设置弹窗数据
            setModalData({
                name: params.areaName,
                tableData: res.data?.content || [], // 接口返回的列表数据
                total: res.data?.totalElements || 0,
            });
            setModalSearch({
                ...params,
            });
        }
    }

    // 选择部门弹窗
    function onSelectModalChange(key) {
        if (key === 'mediateUnitId') {
            setSelectObjModalData({ ...selectObjModalData, key, title: '承办部门' });
        } else {
            setSelectObjModalData({ ...selectObjModalData, key, title: '配合部门' });
        }
        setSelectModalVisible(true);
    }

    // 返回区域查询所需要的字段
    function queCodeSearch(obj, firstLevel, queCode) {
        // 第一层级 queCity  第二层级 queArea 第三层级 queRoad 第四层级 queVillage
        // firstLevel  用户的最高权限属于哪一级 1：市，2：区，3：街道，4：村居
        // values  搜索区域的值
        let queCodeLength = queCode.length;
        let keyList =
            firstLevel === '1'
                ? ['queCity', 'queArea', 'queRoad', 'queVillage']
                : firstLevel === '2'
                ? ['queArea', 'queRoad', 'queVillage']
                : firstLevel === '3'
                ? ['queRoad', 'queVillage']
                : ['queVillage'];
        let key = keyList[queCodeLength - 1];
        obj[key] = queCode[queCodeLength - 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, listDataSearch);
            return;
        }
        if (type === 'reset') {
            setListDataSearch({ ...listDataSearch, page: 1 });
            getListData(
                { [session.key]: session.value[0], createStart: $$.dateFormat(session.createStart), createEnd: $$.dateFormat(session.createEnd) },
                { ...listDataSearch, page: 1 }
            );
            return;
        }
        if (type === 'search') {
            let values = form.getFieldsValue();
            $$.changeTimNeweFormat(values, 'createTime', 'createStart', 'createEnd');
            $$.changeTimNeweFormat(values, 'closeTime', 'closeStart', 'closeEnd');

            $$.searchCascader(values, 'queCode', normalSearch.level, ['queCity', 'queArea', 'queRoad', 'queVillage']);
            $$.searchCascader(values, 'caseType', 1, ['caseType', 'caseType']);
            if (values.mediateUnitId) {
                values.mediateUnitId = selectObjModalData?.mediateUnitId?.key;
            } else {
                delete values.mediateUnitId;
                delete search.mediateUnitId;
            }
            if (values.assistUnitId) {
                values.assistUnitId = selectObjModalData?.assistUnitId?.key;
            } else {
                delete values.assistUnitId;
                delete search.assistUnitId;
            }
            if (temporary?.length > 0) {
                setLabels(temporary);
                setTemporary([]);
            }
            if (temporaryCaseType?.length > 0) {
                setCaseTypeNames(temporaryCaseType);
                setTemporaryCaseType([]);
            }
            getListData({ ...values, canal: search.canal || '' }, listDataSearch);
            return;
        }
        if (type === 'changeTabs' || type === 'changePage') {
            getListData({ ...search }, listDataSearch);
        }
    }

    // 表头
    const columns = () => {
        const columnsData = [
            {
                title: '登记时间',
                width: 120,
                dataIndex: 'createTime',
                render: (text, record, index) => {
                    return (
                        <div style={{ display: 'flex', gap: '8px' }}>
                            <div>{$$.dateFormat(text)}</div>
                            {record?.isRisk === '1' && <div className="public-tag public-tag-tagRed">扬言</div>}
                        </div>
                    );
                },
            },
            { title: '事项来源', width: 100, dataIndex: 'canalName' },
            { title: '事项状态', width: 100, dataIndex: 'statusName' },
            { title: '事项等级', width: 80, dataIndex: 'caseLevel' },
            { title: '事项类型', width: 150, dataIndex: 'caseTypeName' },
            { title: '问题属地', width: 170, dataIndex: 'areaName' },
            { title: '登记机构', width: 130, dataIndex: 'inputUnitName' },
            { title: '承办部门', width: 100, dataIndex: 'mediateUnitName' },
            { title: '办结时间', width: 100, dataIndex: 'closeTime', render: (text) => <span>{$$.dateFormat(text)}</span> },
            {
                title: '化解结果',
                width: 80,
                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: '操作',
                dataIndex: 'action',
                width: 50,
                render: (_, record) => {
                    return <Link onClick={() => handleJump(record)}>详情</Link>;
                },
            },
        ];
        return columnsData;
    };

    // 跳转详情页
    function handleJump(record) {
        // 仅在gz/index.html路径下生效
        const newWindow = window.open(`${$$.windowUrl}/windowDetail?caseTaskId=${record.caseTaskId}&caseId=${record.id}`);
        // const newWindow = window.open(`#/mediate/visit/fileMessage?caseTaskId=${record.caseTaskId}&caseId=${record.id}`, "_blank", "noreferrer");
        // 在新窗口的上下文中注入脚本，用于读取 sessionStorage 数据
        // navigate(`/mediate/visit/fileMessage?caseTaskId=${record.caseTaskId}&ss=${record.id}`)
    }

    // 切换tabs页
    function tabsOnchange(activeKey) {
        console.log(activeKey);
        setTabKey(activeKey);
        if (activeKey !== tabKey) {
            if (activeKey === '1') {
                delete search.canal;
                getListData({ ...search }, listDataSearch);
            } else if (activeKey === '2') {
                getListData({ ...search, canal: '22_00001-1' }, listDataSearch);
            } else if (activeKey === '3') {
                getListData({ ...search, canal: '22_00001-2' }, listDataSearch);
            } else if (activeKey === '4') {
                getListData({ ...search, canal: '22_00001-3' }, listDataSearch);
            } else if (activeKey === '5') {
                getListData({ ...search, canal: '22_00001-4' }, listDataSearch);
            } else if (activeKey === '6') {
                getListData({ ...search, canal: '22_00001-3', canalSecond: '22_00003-8' }, listDataSearch);
            } else if (activeKey === '7') {
                getListData({ ...search, canal: '22_00001-3', canalSecond: '22_00003-2' }, listDataSearch);
            } else if (activeKey === '8') {
                getListData({ ...search, canal: '22_00001-3', canalSecond: '22_00003-1' }, listDataSearch);
            } else if (activeKey === '9') {
                getListData({ ...search, canal: '22_00001-3', canalSecond: '22_00003-7' }, listDataSearch);
            }
        }
    }

    //督办次数
    const handleSupervising = (caseId) => {
        // setSupervisingId(caseId)
        pageCaseSupervise(caseId);
        setSupervisingList(!supervisingList);
    };

    //督办次数列表
    const pageCaseSupervise = async (caseId) => {
        const res = await pageCaseSuperviseApi({ ...searchSupervise, caseId: caseId });
        if (res.type) {
            let data = res.data.content;
            setSuperviseListData(data);
        }
    };

    // 用于扬言极端功能选择下一级后，在查询条件中显示
    function getParentCodes(treeList, code) {
        let parentCodes = [];
        function findParent(node, targetCode) {
            if (node.value === targetCode) {
                return true;
            }
            if (node.children && node.children.length > 0) {
                for (let child of node.children) {
                    if (findParent(child, targetCode)) {
                        parentCodes.unshift(node.value);
                        return true;
                    }
                }
            }
            return false;
        }

        for (let node of treeList) {
            if (findParent(node, code)) {
                break;
            }
        }
        return [...parentCodes, code];
    }

    //督办次数
    const supervisingColumns = [
        {
            title: '督办时间',
            dataIndex: 'supTime',
            key: 'supTime',
            width: 50,
        },
        {
            title: '回复时限',
            dataIndex: 'timeLimit',
            key: 'timeLimit',
            width: 80,
            render: (text, record) => {
                return record.supStatus === 1 ? '-' : $$.getDiffTime(record.timeLimit);
            },
        },
        {
            title: '督办意见',
            dataIndex: 'supContent',
            key: 'supContent',
            width: 100,
        },
        {
            title: '事项等级',
            dataIndex: 'caseGrade',
            key: 'caseGrade',
            width: 50,
            render: (text) => <span>{text === 3 ? '三级' : text === 2 ? '二级' : text === 1 ? '一级' : '-'}</span>,
        },
        {
            title: '回复状态',
            dataIndex: 'supStatus',
            key: 'supStatus',
            width: 50,
            render: (text, record) => (
                <div style={{ color: record.supStatus === 0 ? '#F53F3F' : '#00B42A' }}>{record.supStatus === 0 ? '未回复' : '已回复'}</div>
            ),
        },
        {
            title: '操作',
            dataIndex: 'defendants',
            key: 'defendants',
            width: 50,
            fixed: 'right',
            render: (text, record) => (
                <Space>
                    <div onClick={() => handleResponse(record.id, 'responseDetail')} style={{ cursor: 'pointer', color: '#1A6FB8' }}>
                        详情
                    </div>
                    {record.supStatus == 0 && (
                        <div onClick={() => handleResponse(record.id, 'response')} style={{ cursor: 'pointer', color: '#1A6FB8' }}>
                            回复
                        </div>
                    )}
                </Space>
            ),
        },
    ];

    const fxColumns = [
        {
            title: '',
            dataIndex: 'index',
            key: 'index',
            width: 75,
            render: (text, record, index) => {
                return <div className="public-tag public-tag-tagRed">扬言</div>;
            },
        },
        {
            title: '登记时间',
            dataIndex: 'turnaroundTime',
            key: 'turnaroundTime',
            width: 150,
            defaultSortOrder: 'descend',
            sorter: true,
            sortNumber: 1, //设置这个传给后端的
            render: (text) => {
                return <span>{$$.myTimeFormat(text, 'YYYY-M-D')}</span>;
            },
        },
        {
            title: '问题属地',
            dataIndex: 'queAddress',
            key: 'queAddress',
            width: 180,
        },
        {
            title: '事项来源',
            dataIndex: 'caseSource',
            key: 'caseSource',
            width: 120,
        },
        {
            title: '事项等级',
            dataIndex: 'caseGrade',
            key: 'caseGrade',
            width: 100,
            render: (text) => <span>{text === 3 ? '三级' : text === 2 ? '二级' : text === 1 ? '一级' : '-'}</span>,
        },
        {
            title: '涉及人数',
            dataIndex: 'peopleNum',
            key: 'peopleNum',
            width: 100,
        },
        {
            title: '纠纷类型',
            dataIndex: 'caseType',
            key: 'caseType',
            width: 150,
            render: (text) => (
                <span>
                    {' '}
                    <Tooltip content={text}>{$$.ellipsis(text, 7)}</Tooltip>
                </span>
            ),
        },
        {
            title: '申请方',
            dataIndex: 'plaintiffs',
            key: 'plaintiffs',
            width: 180,
        },
        {
            title: '被申请方',
            dataIndex: 'defendants',
            key: 'defendants',
            width: 120,
            render: (text) => (
                <span>
                    {' '}
                    <Tooltip content={text}>{$$.ellipsis(text, 7)}</Tooltip>
                </span>
            ),
        },
        {
            title: '事项状态',
            dataIndex: 'statusName',
            key: 'statusName',
            sorter: true,
            sortNumber: 2, //设置这个传给后端的
            width: 120,
        },
        {
            title: '承办部门',
            dataIndex: 'organizingUnit',
            key: 'organizingUnit',
            width: 120,
            render: (text) => (
                <span>
                    {' '}
                    <Tooltip content={text}>{$$.ellipsis(text, 7)}</Tooltip>
                </span>
            ),
        },
        {
            title: '经办人',
            dataIndex: 'mediator',
            key: 'mediator',
            width: 180,
        },
        {
            title: '化解结果',
            dataIndex: 'mediResultName',
            key: 'mediResultName',
            width: 100,
            render: (text, record, index) => <div style={{ color: text == '化解成功' ? '#00b42a' : '#f53f3f' }}>{text}</div>,
        },
        {
            title: '督办次数',
            dataIndex: 'superviseCount',
            key: 'superviseCount',
            width: 100,
            render: (text, record, index) => (
                <div
                    onClick={() => {
                        text !== 0 && handleSupervising(record.caseId);
                    }}
                    style={{ cursor: 'pointer', color: text !== 0 ? '#1A6FB8' : '#000' }}
                >
                    {text}
                    {/* {text !== 0 && <span className="timeTip-red-tipsRed" style={{ marginLeft: '8px' }}>督</span>} */}
                </div>
            ),
            sorter: true,
            sortNumber: 3,
        },
        {
            title: '操作',
            dataIndex: 'action',
            width: 100,
            render: (_, record) => {
                return (
                    <Space>
                        <span
                            onClick={() => window.open(`${$$.windowUrl}/windowDetail?caseTaskId=${record.caseTaskId}&caseId=${record.caseId}`)}
                            className="public-color public-a"
                        >
                            详情
                        </span>
                        {record.statusName === '待分派' && (
                            <div onClick={() => handleSupervisingAdd(record.caseId, 'response')} style={{ cursor: 'pointer', color: '#1A6FB8' }}>
                                督办
                            </div>
                        )}
                        {record.statusName === '待签收' && (
                            <div onClick={() => handleSupervisingAdd(record.caseId, 'response')} style={{ cursor: 'pointer', color: '#1A6FB8' }}>
                                督办
                            </div>
                        )}
                        {record.statusName === '待受理' && (
                            <div onClick={() => handleSupervisingAdd(record.caseId, 'response')} style={{ cursor: 'pointer', color: '#1A6FB8' }}>
                                督办
                            </div>
                        )}
                        {record.statusName === '化解中' && (
                            <div onClick={() => handleSupervisingAdd(record.caseId, 'response')} style={{ cursor: 'pointer', color: '#1A6FB8' }}>
                                督办
                            </div>
                        )}
                        {record.statusName === '结案审核' && (
                            <div onClick={() => handleSupervisingAdd(record.caseId, 'response')} style={{ cursor: 'pointer', color: '#1A6FB8' }}>
                                督办
                            </div>
                        )}
                    </Space>
                );
            },
        },
    ];

    //督办回复
    const handleResponse = (id, type) => {
        if (type === 'response') {
            setResponse(!response);
            setResponseId(id);
            caseSuperviseInfo(id, 'response');
        }
        if (type === 'responseDetail') {
            setDetail(!detail);
            caseSuperviseInfo(id, 'responseDetail');
        }
    };

    //回复
    const caseSuperviseInfo = async (id, type) => {
        const res = await caseSuperviseInfoApi({ id: id });
        if (type === 'response') {
            if (res.type) {
                setSuperviseInfo(res.data);
            }
        }
        if (type === 'responseDetail') {
            if (res.type) {
                setResponseDetail(res.data);
            }
        }
    };

    //添加督办
    const handleSupervisingAdd = (caseId) => {
        setSupervising(!supervising);
        setSupervisingAddId(caseId);
        getNewTimeId();
    };

    //获取添加督办id
    const getNewTimeId = async () => {
        const res = await getNewTimeIdApi();
        if (res.type) {
            setSupervisingId(res.data);
        }
    };

    //排序
    const handleSort = (page, pageSize, sort) => {
        let sortColmn = sort.column ? sort.column.sortNumber : 1;
        let sortType = sort.order == 'descend' ? 2 : 1; //1：正序；2：倒序
        let newData = region ? { [region.key]: region.value } : {};
        pageExtremeCase(
            {
                ...search,
                ...pageData,
                ...newData,
                sortType,
                sortColmn,
                page,
                size: pageSize,
            },
            true
        );
    };

    // 扬言极端列表
    async function pageExtremeCase(submitData, visible) {
        global.setSpinning(true);
        const res = await pageExtremeCaseApi({ ...submitData });
        global.setSpinning(false);
        if (res.type) {
            let data = res.data.content || [];
            let total = res?.data?.totalElements || 0;
            setTableData({ list: data, total });
            setYYjdData({ visible: visible || false });
        }
    }

    // 获取区域字典值
    async function treeByUserId() {
        global.setSpinning(true);
        const res = await treeByUserIdApi();
        global.setSpinning(false);
        if (res.type) {
            let list = res.data || [];
            setTreeList(list);
            let values = form.getFieldsValue();
            let key =
                list[0].level === '1'
                    ? 'queCity'
                    : list[0].level === '2'
                    ? 'queArea'
                    : list[0].level === '3'
                    ? 'queRoad'
                    : list[0].level === '4'
                    ? 'queVillage'
                    : 'queRoad';
            values.queCode = [list[0].value];
            values.createTime = [
                $$.myMoment().subtract(0, 'months').startOf('month').format('YYYY-MM-DD'),
                $$.myMoment().subtract(0, 'months').endOf('month').format('YYYY-MM-DD'),
            ];
            form.setFieldsValue(values);
            setLabels([list[0].label]);
            setYYjds([{ label: list[0].label, value: list[0].value, key }]);
            setNormalSearch({
                key,
                value: [list[0].value],
                level: list[0].level,
                createStart: $$.myMoment().subtract(0, 'months').startOf('month').format('YYYY-MM-DD'),
                createEnd: $$.myMoment().subtract(0, 'months').endOf('month').format('YYYY-MM-DD'),
            });
            handleSearch('reset', {
                key,
                value: [list[0].value],
                createStart: $$.myMoment().subtract(0, 'months').startOf('month').format('YYYY-MM-DD'),
                createEnd: $$.myMoment().subtract(0, 'months').endOf('month').format('YYYY-MM-DD'),
            });
        }
    }

    function tabKeyTitles(type) {
        switch (type) {
            case '2':
                return '大厅来访';
            case '3':
                return '线上来访';
            case '4':
                return '自行排查';
            case '5':
                return '协同推送';
            case '6':
                return '部门排查';
            case '7':
                return '网格排查';
            case '8':
                return '非警务纠纷';
            case '9':
                return '专项纠纷';
            default:
                break;
        }
    }

    const onChange = (value, selectedOptions) => {
        const labels = selectedOptions.map((option) => option.label);
        setTemporary(labels);
        setYYjds(
            selectedOptions.map((option) => ({
                label: option.label,
                value: option.value,
                key:
                    option.level === '1'
                        ? 'queCity'
                        : option.level === '2'
                        ? 'queArea'
                        : option.level === '3'
                        ? 'queRoad'
                        : option.level === '4'
                        ? 'queVillage'
                        : 'queRoad',
            }))
        );
    };

    const onLastChange = (value, selectedOptions) => {
        const Names = selectedOptions.map((option) => option.label);
        setTemporaryCaseType(Names);
    };

    // 饼图点击进入下一层级
    async function onMyLTopChartPie(params) {
        console.log('params', params);
        let caseTypeFirst = params?.data?.caseType;
        global.setSpinning(true);
        const res = await statisticsCaseTypeApi({ ...search, caseTypeFirst });
        global.setSpinning(false);
        if (res.type) {
            setCaseTypeList(res.data || []);
            setCaseTypeLevel(caseTypeLevel + 1);
        }
    }

    async function onClickProvince(value) {
        if (province !== value) {
            setProvince(value);
        }
    }

    // 获取数据
    async function getListData(submitData, tableSearch) {
        console.log('submitData', submitData);
        global.setSpinning(true);
        const res = await getListDataApi({ ...submitData });
        const res1 = await getCaseInfoDataApi({ ...submitData, ...tableSearch }); //获取实时动态数据
        const res2 = await getAnalysisApi({ ...submitData, sortType: yYJDSortType });
        global.setSpinning(false);
        if (res.type) {
            setData(res.data || {});
            setSearch(submitData);
        }
        if (res1.type) {
            setListData({
                total: res1?.data?.totalElements || 0,
                tableData: res1?.data?.content || [],
            });
        }
        if (res2.type) {
            let data = res2.data || [];
            let total = data?.map((i) => i.total)?.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
            console.log('total', total);
            setExtremeData(data);
            setExtremeTotal(total);
        }
    }

    // 页码修改
    function handleChangePage(page, pageSize) {
        let paramsObj = Object.assign({ ...search, ...listDataSearch }, { page, size: pageSize });
        getCaseInfoData({ ...paramsObj });
    }

    // 获取数据
    async function getCaseInfoData(submitData) {
        global.setSpinning(true);
        const res = await getCaseInfoDataApi({ ...submitData });
        global.setSpinning(false);
        setListDataSearch({ ...listDataSearch, page: submitData.page, size: submitData.size });
        if (res.type) {
            setListData({
                total: res?.data?.totalElements || 0,
                tableData: res?.data?.content || [],
            });
        }
    }

    async function onModalChange(key, value) {
        let paramsObj = Object.assign({ ...search, ...listDataSearch, [key]: value }, { page: 1, size: 10 });
        global.setSpinning(true);
        const res = await getCaseInfoDataApi({ ...paramsObj });
        global.setSpinning(false);
        if (res.type) {
            setModalVisible(true);
            setModalData({ name: '事项详情', total: res?.data?.totalElements || 0, tableData: res?.data?.content || [] });
        }
    }

    // 添加onModalClick处理函数
    const onModalClick = async (params) => {
        console.log('params', params);
        let newSearch = {
            ...search,
            ...modalSearch,
            queArea: params.queArea,
            queCity: params.queCity,
            queRoad: params.queRoad,
            queVillage: params.queVillage,
            areaType: params.areaType,
            unitGrades: params.unitGrades,
            // 1-化解中，2-已结案，3-不予受理
            resolveType: province,
        };
        try {
            const res = await pageQueryAreaApi({
                ...newSearch, // 传入当前的查询条件'
            });

            if (res.type) {
                // 设置弹窗数据
                setModalData({
                    name: params.areaName,
                    tableData: res.data?.content || [], // 接口返回的列表数据
                    total: res.data?.totalElements || 0,
                });
                setModalSearch({
                    ...newSearch,
                });
                // 显示弹窗
                setModalVisible(true);
            }
        } catch (err) {
            console.error('获取区域详情失败:', err);
        }
    };

    // 导出数据
    function downloadXls() {
        const keysToFilter = ['page', 'size'];
        const filteredObj = Object.fromEntries(Object.entries(search).filter(([key, value]) => value !== undefined && !keysToFilter.includes(key)));

        window.open(`${$$.appUrl.baseUrl}/${$$.appUrl.mediate}/api/web/caseInfo/exportQueryAll?${$$.useQueryParams(filteredObj)}`);
    }

    // 导出镇街统计
    function downloadAreaXls() {
        const keysToFilter = ['page', 'size'];
        const filteredObj = Object.fromEntries(Object.entries(search).filter(([key, value]) => value !== undefined && !keysToFilter.includes(key)));

        window.open(`${$$.appUrl.baseUrl}/${$$.appUrl.mediate}/api/web/caseInfo/exportStatisticsArea?${$$.useQueryParams(filteredObj)}`);
    }
    async function getAnalysis(submitData) {
        global.setSpinning(true);
        const res = await getAnalysisApi({ ...submitData });
        global.setSpinning(false);
        if (res.type) {
            let data = res.data || [];
            let total = data?.map((i) => i.total)?.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
            setExtremeData(data);
            setExtremeTotal(total);
        }
    }

    // 初始化
    useEffect(() => {
        treeByUserId();
    }, []);

    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: '请选择',
                                onChange,
                                changeSelect: true,
                                allowClear: false,
                                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: '纠纷类型',
                                changeSelect: true,
                                placeholder: '请选择',
                                onChange: onLastChange,
                                span: 8,
                                treedata: $$.caseTypeSelect.caseTypeSelect,
                            },
                            {
                                type: 'searchButton',
                                name: 'mediateUnitId',
                                maxLength: 0,
                                onClear: () => {
                                    setSelectObjModalData({ ...selectObjModalData, mediateUnitId: {} });
                                    form.setFieldValue('mediateUnitId', '');
                                },
                                onSearch: () => {
                                    onSelectModalChange('mediateUnitId');
                                },
                                searchButton: '选择',
                                placeholder: '请选择',
                                label: '承办部门',
                            },
                            {
                                type: 'searchButton',
                                name: 'assistUnitId',
                                maxLength: 0,
                                onClear: () => {
                                    setSelectObjModalData({ ...selectObjModalData, assistUnitId: {} });
                                    form.setFieldValue('assistUnitId', '');
                                },
                                onSearch: () => {
                                    onSelectModalChange('assistUnitId');
                                },
                                searchButton: '选择',
                                placeholder: '请选择',
                                label: '配合部门',
                            },
                            { type: 'Select', name: 'systemSource', label: '系统来源', placeholder: '请选择', span: 8, selectdata: $$.options.systemSource },
                        ]}
                        handleReset={() => {
                            form.resetFields();
                            form.setFieldsValue({
                                queCode: [normalSearch.value[0]],
                                createTime: [$$.dateFormat(normalSearch.createStart), $$.dateFormat(normalSearch.createEnd)],
                            });
                            setLabels([treeList[0].label]);
                            setYYjds([{ label: treeList[0].label, value: treeList[0].value }]);
                            handleSearch('reset', normalSearch);
                        }}
                        handleSearch={() => handleSearch('search')}
                    />
                </div>
                {/* <div style={{ marginTop: '12px' }}>
          <Alert
            type='success'
            content={<span>已为您生成<span className='public-color'>{labels?.filter(i => i !== '本级').join('/')}</span><span>{search.createStart && '在'}</span>
              {search.createStart && <span className='public-color'>登记时间({$$.myTimeFormat(search.createStart, 'YYYY.M.D')}-{$$.myTimeFormat(search.createEnd, 'YYYY.M.D')})</span>}
              {search.closeStart && <span className='public-color'>{search.createStart && '、'}办结时间({$$.myTimeFormat(search.createStart, 'YYYY.M.D')}-{$$.myTimeFormat(search.createEnd, 'YYYY.M.D')})</span>}
              {search.caseType && <span className='public-color'>{(search.createStart || search.closeStart) && '、'}纠纷类型({caseTypeNames.join('/')})</span>}
              的解纷态势数据</span>}
          />
        </div> */}
                {tabKey !== '1' && (
                    <div style={{ marginTop: '16px', display: 'flex', gap: '8px', alignItems: 'center' }}>
                        <Button
                            className="source-button"
                            onClick={() => {
                                tabsOnchange('1');
                            }}
                            icon={<img className="source-icon" src={workDash_19} alt="" srcset="" />}
                            type="secondary"
                        >
                            全部来源
                        </Button>
                        <IconCaretRight />
                        {tabKey === '2' && (
                            <Button
                                className="source-button source-button-color"
                                icon={<img className="source-icon" src={workDash_20} alt="" srcset="" />}
                                type="secondary"
                            >
                                大厅来访
                            </Button>
                        )}
                        {tabKey === '3' && (
                            <Button
                                className="source-button source-button-color"
                                icon={<img className="source-icon" src={workDash_21} alt="" srcset="" />}
                                type="secondary"
                            >
                                线上来访
                            </Button>
                        )}
                        {tabKey === '4' && (
                            <Button
                                className="source-button source-button-color"
                                icon={<img className="source-icon" src={workDash_22} alt="" srcset="" />}
                                type="secondary"
                            >
                                自行排查
                            </Button>
                        )}
                        {tabKey === '5' && (
                            <Button
                                className="source-button source-button-color"
                                icon={<img className="source-icon" src={workDash_23} alt="" srcset="" />}
                                type="secondary"
                            >
                                协同推送
                            </Button>
                        )}
                        {tabKey === '6' && (
                            <Space>
                                <Button
                                    onClick={() => {
                                        tabsOnchange('4');
                                    }}
                                    className="source-button"
                                    icon={<img className="source-icon" src={workDash_22} alt="" srcset="" />}
                                    type="secondary"
                                >
                                    自行排查
                                </Button>
                                <IconCaretRight />
                                <Button
                                    className="source-button source-button-color"
                                    icon={<img className="source-icon" src={workDash_23} alt="" srcset="" />}
                                    type="secondary"
                                >
                                    部门排查
                                </Button>
                            </Space>
                        )}
                        {tabKey === '7' && (
                            <Space>
                                <Button
                                    onClick={() => {
                                        tabsOnchange('4');
                                    }}
                                    className="source-button"
                                    icon={<img className="source-icon" src={workDash_22} alt="" srcset="" />}
                                    type="secondary"
                                >
                                    自行排查
                                </Button>
                                <IconCaretRight />
                                <Button
                                    className="source-button source-button-color"
                                    icon={<img className="source-icon" src={workDash_23} alt="" srcset="" />}
                                    type="secondary"
                                >
                                    网格排查
                                </Button>
                            </Space>
                        )}
                        {tabKey === '8' && (
                            <Space>
                                <Button
                                    onClick={() => {
                                        tabsOnchange('5');
                                    }}
                                    className="source-button"
                                    icon={<img className="source-icon" src={workDash_23} alt="" srcset="" />}
                                    type="secondary"
                                >
                                    协同推送
                                </Button>
                                <IconCaretRight />
                                <Button
                                    className="source-button source-button-color"
                                    icon={<img className="source-icon" src={workDash_23} alt="" srcset="" />}
                                    type="secondary"
                                >
                                    非警务纠纷
                                </Button>
                            </Space>
                        )}
                        {tabKey === '9' && (
                            <Space>
                                <Button
                                    onClick={() => {
                                        tabsOnchange('5');
                                    }}
                                    className="source-button"
                                    icon={<img className="source-icon" src={workDash_23} alt="" srcset="" />}
                                    type="secondary"
                                >
                                    协同推送
                                </Button>
                                <IconCaretRight />
                                <Button
                                    className="source-button source-button-color"
                                    icon={<img className="source-icon" src={workDash_23} alt="" srcset="" />}
                                    type="secondary"
                                >
                                    专项纠纷
                                </Button>
                            </Space>
                        )}
                    </div>
                )}

                {/* <MyTabsNew
                        tabs={[
                            {
                                key: '1',
                                icon: <img className="workDash-tabs" src={workDash_13}></img>,
                                label: (
                                    <>
                                        <div style={{ height: '24px' }}>全部</div>
                                    </>
                                ),
                            },
                            { label: <div style={{ height: '24px' }}>大厅来访</div>, icon: <img className="workDash-tabs" src={workDash_14}></img>, key: '2' },
                            { label: <div style={{ height: '24px' }}>线上来访</div>, icon: <img className="workDash-tabs" src={workDash_16}></img>, key: '3' },
                            { label: <div style={{ height: '24px' }}>自行排查</div>, icon: <img className="workDash-tabs" src={workDash_17}></img>, key: '4' },
                            { label: <div style={{ height: '24px' }}>协同推送</div>, icon: <img className="workDash-tabs" src={workDash_18}></img>, key: '5' },
                        ]}
                        activeKey={tabKey}
                        onChange={(activeKey) => tabsOnchange(activeKey)}
                    />
                    <div style={{ borderBottom: '1px solid #E5E6EB', position: 'absolute', width: '100%' }}></div> */}
                <div style={{ marginTop: '16px' }} className="disputeLedger-row">
                    <div className="comprehensive-title">数据总览</div>
                    <div>
                        <Space className="workDash-d" align="center" split={<Divider type="vertical" style={{ height: '48px' }} />}>
                            <div
                                onClick={() => {
                                    province !== '' && onClickProvince('');
                                }}
                                className="workDash-item public-a"
                            >
                                <div className="workDash-item-img">
                                    <img src={workDash_1} alt="" srcset="" />
                                </div>
                                {['1', '2', '3', '6', '7', '8', '9'].includes(tabKey) && (
                                    <div className="workDash-item-div">
                                        <div className="workDash-item-title">总登记</div>
                                        <div className="workDash-item-value">{data?.totalNum || 0}</div>
                                    </div>
                                )}
                                {tabKey === '4' && (
                                    <div className="workDash-item-div">
                                        <div className="workDash-item-title">
                                            <div style={{ width: '50px' }}>总登记</div>
                                            <div style={{ width: '36px' }}></div>{' '}
                                            <Space split={<Divider type="vertical" />}>
                                                <div style={{ display: 'flex', alignItems: 'center' }}>
                                                    <span className="workDash-item-title-blue"></span>
                                                    <span
                                                        style={{
                                                            color: '#4E5969',
                                                            fontSize: '14px',
                                                            display: 'flex',
                                                            alignItems: 'center',
                                                            display: 'inline-block',
                                                            width: '150px',
                                                        }}
                                                    >
                                                        部门排查：{data?.bmpcNum || 0}件
                                                    </span>
                                                    <span
                                                        onClick={() => {
                                                            tabsOnchange('6');
                                                        }}
                                                        style={{
                                                            color: '#1A6FB8',
                                                            border: '1px solid #1A6FB8',
                                                            fontSize: '12px',
                                                            borderRadius: '2px',
                                                            padding: '0px 4px',
                                                            display: 'flex',
                                                            alignItems: 'center',
                                                            marginLeft: '12px',
                                                        }}
                                                    >
                                                        查看
                                                    </span>
                                                </div>
                                            </Space>
                                        </div>
                                        <div className="workDash-item-value" style={{ marginTop: '4px' }}>
                                            <div style={{ width: '50px' }}>{data?.totalNum || 0}</div>
                                            <div style={{ width: '36px' }}></div>
                                            <Space split={<Divider type="vertical" />}>
                                                <div style={{ display: 'flex', alignItems: 'center' }}>
                                                    <span className="workDash-item-title-blue"></span>
                                                    <span style={{ color: '#4E5969', fontSize: '14px', display: 'inline-block', width: '150px' }}>
                                                        网格排查：{data?.wgpcNum || 0}件
                                                    </span>
                                                    <span
                                                        onClick={() => {
                                                            tabsOnchange('6');
                                                        }}
                                                        style={{
                                                            color: '#1A6FB8',
                                                            border: '1px solid #1A6FB8',
                                                            fontSize: '12px',
                                                            borderRadius: '2px',
                                                            padding: '0px 4px',
                                                            display: 'flex',
                                                            alignItems: 'center',
                                                            marginLeft: '12px',
                                                        }}
                                                    >
                                                        查看
                                                    </span>
                                                </div>
                                            </Space>
                                        </div>
                                    </div>
                                )}
                                {tabKey === '5' && (
                                    <div className="workDash-item-div">
                                        <div className="workDash-item-title">
                                            <div style={{ width: '50px' }}>总登记</div>
                                            <div style={{ width: '36px' }}></div>{' '}
                                            <Space split={<Divider type="vertical" />}>
                                                <div style={{ display: 'flex', alignItems: 'center' }}>
                                                    <span className="workDash-item-title-blue"></span>
                                                    <span
                                                        style={{
                                                            color: '#4E5969',
                                                            fontSize: '14px',
                                                            display: 'flex',
                                                            alignItems: 'center',
                                                            display: 'inline-block',
                                                            width: '150px',
                                                        }}
                                                    >
                                                        非警务纠纷：{data?.fjwjfNum || 0}件
                                                    </span>
                                                    <span
                                                        onClick={() => {
                                                            tabsOnchange('8');
                                                        }}
                                                        style={{
                                                            color: '#1A6FB8',
                                                            border: '1px solid #1A6FB8',
                                                            fontSize: '12px',
                                                            borderRadius: '2px',
                                                            padding: '0px 4px',
                                                            display: 'flex',
                                                            alignItems: 'center',
                                                            marginLeft: '12px',
                                                        }}
                                                    >
                                                        查看
                                                    </span>
                                                </div>
                                            </Space>
                                        </div>
                                        <div className="workDash-item-value" style={{ marginTop: '4px' }}>
                                            <div style={{ width: '50px' }}>{data?.totalNum || 0}</div>
                                            <div style={{ width: '36px' }}></div>
                                            <Space split={<Divider type="vertical" />}>
                                                <div style={{ display: 'flex', alignItems: 'center' }}>
                                                    <span className="workDash-item-title-blue"></span>
                                                    <span style={{ color: '#4E5969', fontSize: '14px', display: 'inline-block', width: '150px' }}>
                                                        专项纠纷：{data?.zxjfNum || 0}件
                                                    </span>
                                                    <span
                                                        onClick={() => {
                                                            tabsOnchange('9');
                                                        }}
                                                        style={{
                                                            color: '#1A6FB8',
                                                            border: '1px solid #1A6FB8',
                                                            fontSize: '12px',
                                                            borderRadius: '2px',
                                                            padding: '0px 4px',
                                                            display: 'flex',
                                                            alignItems: 'center',
                                                            marginLeft: '12px',
                                                        }}
                                                    >
                                                        查看
                                                    </span>
                                                </div>
                                            </Space>
                                        </div>
                                    </div>
                                )}
                            </div>
                            <div
                                onClick={() => {
                                    province !== '1' && onClickProvince('1');
                                }}
                                className="workDash-item public-a"
                            >
                                <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
                                onClick={() => {
                                    province !== '2' && onClickProvince('2');
                                }}
                                className="workDash-item1 public-a"
                            >
                                <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>{' '}
                                        <Space split={<Divider type="vertical" />}>
                                            <div style={{ display: 'flex', alignItems: 'center' }}>
                                                <span className="workDash-item-title-green"></span>
                                                <span style={{ color: '#4E5969', fontSize: '14px', display: 'flex', alignItems: 'center' }}>
                                                    化解成功：{data?.finishNum || 0}件 | 成功率：
                                                    <span style={{ color: '#00B42A' }}>{((data?.finishNum * 100) / (data?.finishNum + data?.failNum) || 0).toFixed(2)}%</span>
                                                    <img style={{ width: '14px', height: '14px', marginLeft: '8px' }} src={workDash_5} alt="" srcset="" />
                                                </span>
                                            </div>
                                        </Space>
                                    </div>
                                    <div className="workDash-item-value">
                                        <div style={{ width: '50px' }}>{data?.finishNum + data?.failNum || 0}</div>
                                        <div style={{ width: '36px' }}></div>
                                        <Space split={<Divider type="vertical" />}>
                                            <div>
                                                <span className="workDash-item-title-red"></span>
                                                <span style={{ color: '#4E5969', fontSize: '14px' }}>化解不成功：{data?.failNum || 0}件</span>
                                            </div>
                                        </Space>
                                    </div>
                                </div>
                            </div>
                            <div
                                onClick={() => {
                                    province !== '3' && onClickProvince('3');
                                }}
                                className="workDash-item public-a"
                            >
                                <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>

                {/* 事项来源 */}
                {tabKey === '1' && (
                    <div style={{ marginTop: '12px' }}>
                        <Row gutter={24}>
                            <Col span={16}>
                                <div className="workDash-main">
                                    <div style={{ width: '100%', height: '295px' }}>
                                        <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"
                                                        onClick={() => {
                                                            tabsOnchange('2');
                                                        }}
                                                    >
                                                        <div className="workDash-main-card-head-l-img">
                                                            <img src={workDash_6} alt="" srcset="" />
                                                        </div>
                                                        <div className="workDash-main-card-head-l-img-title">详情</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">&nbsp;|&nbsp;{data?.oneSource?.caseRate || 0}%</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div style={{ margin: '0 6px' }}>
                                                    <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '16px' }}>
                                                        <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>
                                                    <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '16px' }}>
                                                        <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>

                                            <div className="workDash-main-card">
                                                <div className="workDash-main-card-head">
                                                    <div
                                                        className="workDash-main-card-head-l workDash-bg_2"
                                                        onClick={() => {
                                                            tabsOnchange('3');
                                                        }}
                                                    >
                                                        <div className="workDash-main-card-head-l-img workDash-bg_2_img">
                                                            <img src={workDash_7} alt="" srcset="" />
                                                        </div>
                                                        <div className="workDash-main-card-head-l-img-title">详情</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">&nbsp;|&nbsp;{data?.twoSource?.caseRate || 0}%</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div style={{ margin: '0 6px' }}>
                                                    <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '16px' }}>
                                                        <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>
                                                    <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '16px' }}>
                                                        <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>

                                            <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
                                                            className="workDash-main-card-head-l-img-title"
                                                            onClick={() => {
                                                                tabsOnchange('4');
                                                            }}
                                                        >
                                                            详情
                                                        </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">&nbsp;|&nbsp;{data?.threeSource?.caseRate || 0}%</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div style={{ margin: '0 6px' }}>
                                                    <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '16px' }}>
                                                        <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>
                                                    <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '16px' }}>
                                                        <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>

                                            <div className="workDash-main-card">
                                                <div className="workDash-main-card-head">
                                                    <div
                                                        className="workDash-main-card-head-l workDash-bg_4"
                                                        onClick={() => {
                                                            tabsOnchange('5');
                                                        }}
                                                    >
                                                        <div className="workDash-main-card-head-l-img workDash-bg_4_img">
                                                            <img src={workDash_9} alt="" srcset="" />
                                                        </div>
                                                        <div className="workDash-main-card-head-l-img-title">详情</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">&nbsp;|&nbsp;{data?.fourSource?.caseRate || 0}%</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div style={{ margin: '0 6px' }}>
                                                    <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '16px' }}>
                                                        <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>
                                                    <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '16px' }}>
                                                        <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>
                                </div>
                            </Col>
                            <Col span={8}>
                                <div className="workDash-main-flex_1">
                                    <div style={{ alignItems: 'center', justifyContent: 'space-between' }} className="big-green-main-title-display">
                                        <div style={{ color: '#86909C' }} className="disputeLedger-green-title public-a public-color">
                                            <span onClick={() => setRightTag('1')} className={`public-a ${rightTag === '1' && 'public-color'}`}>
                                                纠纷类型
                                            </span>
                                            <span>
                                                {' '}
                                                /{' '}
                                                <span onClick={() => setRightTag('2')} className={`public-a ${rightTag === '2' && 'public-color'}`}>
                                                    化解状况
                                                </span>{' '}
                                                /{' '}
                                                <span onClick={() => setRightTag('3')} className={`public-a ${rightTag === '3' && 'public-color'}`}>
                                                    事项等级
                                                </span>
                                            </span>
                                        </div>
                                        {rightTag === '1' && caseTypeLevel > 1 && (
                                            <div
                                                onClick={() => {
                                                    setCaseTypeLevel(caseTypeLevel - 1);
                                                }}
                                                className="public-a"
                                                style={{ padding: '12px 16px' }}
                                            >
                                                <IconUndo style={{ color: '#1A6FB8' }} /> <span className=" public-color">返回上一级</span>
                                            </div>
                                        )}
                                    </div>
                                    <div style={{ width: '100%', height: '247px' }}>
                                        {rightTag === '1' && (
                                            <MyLTopChartPie
                                                data={
                                                    caseTypeLevel > 1
                                                        ? caseTypeList?.map((i) => ({ value: i.caseRate, caseNum: i.caseNum, name: i.caseTypeName, caseType: i.caseType })) || []
                                                        : data?.typeList?.map((i) => ({ value: i.caseRate, caseNum: i.caseNum, name: i.caseTypeName, caseType: i.caseType })) ||
                                                          []
                                                }
                                                onMyLTopChartPie={onMyLTopChartPie}
                                            />
                                        )}
                                        {rightTag === '2' && (
                                            <MyLTopChartPie1
                                                data={[
                                                    { value: data?.resolveingRate || 0, name: '化解中' },
                                                    { value: data?.resolveRate || 0, name: '化解成功' },
                                                    { value: data?.unResolveRate || 0, name: '化解不成功' },
                                                ]}
                                                allNum={data.totalNum || 0}
                                            />
                                        )}
                                        {rightTag === '3' && (
                                            <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>
                                </div>
                            </Col>
                        </Row>
                    </div>
                )}

                {/* 公安非警务，12345，网格化 */}
                {tabKey === '5' && (
                    <div style={{ marginTop: '12px' }}>
                        <Row gutter={16}>
                            {/* 公安非警务 */}
                            <Col span={8}>
                                <div className="workDash-public">
                                    <div className="workDash-public-head">
                                        <div className="workDash-public-head-l">
                                            <div className="workDash-public-head-l-img">
                                                <img src={workDash_24} alt="" srcset="" />
                                            </div>
                                        </div>
                                        <div className="workDash-public-head-r">
                                            <div className="workDash-public-head-r-title">公安非警务</div>
                                            <div className="workDash-public-head-r-value">
                                                <div className="workDash-public-head-r-value-num">
                                                    {data?.oneSecondSource?.caseNum || 0}条 <span className="workDash-public-head-r-value-unit">（工单总数）</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div className="workDash-public-body">
                                        <Row gutter={[12, 8]}>
                                            <Col span={12}>
                                                <div className="workDash-public-body-item">
                                                    <div className="workDash-public-body-item-title">化解中</div>
                                                    <div className="workDash-public-body-item-value">{data?.oneSecondSource?.resolveingNum || 0}条</div>
                                                </div>
                                            </Col>
                                            <Col span={12}>
                                                <div className="workDash-public-body-item">
                                                    <div className="workDash-public-body-item-title">回退</div>
                                                    <div className="workDash-public-body-item-value">{data?.oneSecondSource?.rejectNum || 0}条</div>
                                                </div>
                                            </Col>
                                            <Col span={12}>
                                                <div className="workDash-public-body-item">
                                                    <div className="workDash-public-body-item-title">化解成功</div>
                                                    <div className="workDash-public-body-item-value">{data?.oneSecondSource?.resolveNum || 0}条</div>
                                                </div>
                                            </Col>
                                            <Col span={12}>
                                                <div className="workDash-public-body-item">
                                                    <div className="workDash-public-body-item-title">化解不成功</div>
                                                    <div className="workDash-public-body-item-value">{data?.oneSecondSource?.unResolveNum || 0}条</div>
                                                </div>
                                            </Col>
                                            <Col span={12}>
                                                <div className="workDash-public-body-item">
                                                    <div className="workDash-public-body-item-title">化解成功率</div>
                                                    <div className="workDash-public-body-item-value">{data?.oneSecondSource?.resolveRate || 0}%</div>
                                                </div>
                                            </Col>
                                        </Row>
                                    </div>
                                </div>
                            </Col>

                            {/* 12345 */}
                            <Col span={8}>
                                <div className="workDash-public">
                                    <div className="workDash-public-head">
                                        <div className="workDash-public-head-l">
                                            <div className="workDash-public-head-l-img workDash-public-head-l-img-green">
                                                <img src={workDash_25} alt="" srcset="" />
                                            </div>
                                        </div>
                                        <div className="workDash-public-head-r">
                                            <div className="workDash-public-head-r-title">12345</div>
                                            <div className="workDash-public-head-r-value">
                                                <div className="workDash-public-head-r-value-num">
                                                    {data?.twoSecondSource?.caseNum || 0}条 <span className="workDash-public-head-r-value-unit">（工单总数）</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div className="workDash-public-body">
                                        <Row gutter={[12, 8]}>
                                            <Col span={12}>
                                                <div className="workDash-public-body-item">
                                                    <div className="workDash-public-body-item-title">化解中</div>
                                                    <div className="workDash-public-body-item-value">{data?.twoSecondSource?.resolveingNum || 0}条</div>
                                                </div>
                                            </Col>
                                            <Col span={12}>
                                                <div className="workDash-public-body-item">
                                                    <div className="workDash-public-body-item-title">不予受理</div>
                                                    <div className="workDash-public-body-item-value">{data?.twoSecondSource?.rejectNum || 0}条</div>
                                                </div>
                                            </Col>
                                            <Col span={12}>
                                                <div className="workDash-public-body-item">
                                                    <div className="workDash-public-body-item-title">化解成功</div>
                                                    <div className="workDash-public-body-item-value">{data?.twoSecondSource?.resolveNum || 0}条</div>
                                                </div>
                                            </Col>
                                            <Col span={12}>
                                                <div className="workDash-public-body-item">
                                                    <div className="workDash-public-body-item-title">化解不成功</div>
                                                    <div className="workDash-public-body-item-value">{data?.twoSecondSource?.unResolveNum || 0}条</div>
                                                </div>
                                            </Col>
                                            <Col span={12}>
                                                <div className="workDash-public-body-item">
                                                    <div className="workDash-public-body-item-title">化解成功率</div>
                                                    <div className="workDash-public-body-item-value">{data?.twoSecondSource?.resolveRate || 0}%</div>
                                                </div>
                                            </Col>
                                        </Row>
                                    </div>
                                </div>
                            </Col>

                            {/* 网格化 */}
                            <Col span={8}>
                                <div className="workDash-public">
                                    <div className="workDash-public-head">
                                        <div className="workDash-public-head-l">
                                            <div className="workDash-public-head-l-img workDash-public-head-l-img-blue">
                                                <img src={workDash_26} alt="" srcset="" />
                                            </div>
                                        </div>
                                        <div className="workDash-public-head-r">
                                            <div className="workDash-public-head-r-title">网格化</div>
                                            <div className="workDash-public-head-r-value">
                                                <div className="workDash-public-head-r-value-num">
                                                    {data?.threeSecondSource?.caseNum || 0}条 <span className="workDash-public-head-r-value-unit">（工单总数）</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div className="workDash-public-body">
                                        <Row gutter={[12, 8]}>
                                            <Col span={12}>
                                                <div className="workDash-public-body-item">
                                                    <div className="workDash-public-body-item-title">化解中</div>
                                                    <div className="workDash-public-body-item-value">{data?.threeSecondSource?.resolveingNum || 0}条</div>
                                                </div>
                                            </Col>
                                            <Col span={12}>
                                                <div className="workDash-public-body-item">
                                                    <div className="workDash-public-body-item-title">不予受理</div>
                                                    <div className="workDash-public-body-item-value">{data?.threeSecondSource?.rejectNum || 0}条</div>
                                                </div>
                                            </Col>
                                            <Col span={12}>
                                                <div className="workDash-public-body-item">
                                                    <div className="workDash-public-body-item-title">化解成功</div>
                                                    <div className="workDash-public-body-item-value">{data?.threeSecondSource?.resolveNum || 0}条</div>
                                                </div>
                                            </Col>
                                            <Col span={12}>
                                                <div className="workDash-public-body-item">
                                                    <div className="workDash-public-body-item-title">化解不成功</div>
                                                    <div className="workDash-public-body-item-value">{data?.threeSecondSource?.unResolveNum || 0}条</div>
                                                </div>
                                            </Col>
                                            <Col span={12}>
                                                <div className="workDash-public-body-item">
                                                    <div className="workDash-public-body-item-title">化解成功率</div>
                                                    <div className="workDash-public-body-item-value">{data?.threeSecondSource?.resolveRate || 0}%</div>
                                                </div>
                                            </Col>
                                        </Row>
                                    </div>
                                </div>
                            </Col>
                        </Row>
                    </div>
                )}

                {/* 纠纷类型  化解状况  事项等级 */}
                {tabKey !== '1' && (
                    <div style={{ marginTop: '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">化解状况（{tabKeyTitles(tabKey)}）</div>
                                    </div>
                                    <div style={{ width: '100%', height: '247px' }}>
                                        <MyLTopChartPie1
                                            data={[
                                                { value: data?.resolveingRate || 0, name: '化解中' },
                                                { value: data?.resolveRate || 0, name: '化解成功' },
                                                { value: data?.unResolveRate || 0, name: '化解不成功' },
                                            ]}
                                            allNum={data.totalNum || 0}
                                        />
                                    </div>
                                </div>
                            </Col>
                            <Col span={8}>
                                <div className="workDash-main-flex_1">
                                    <div className="big-green-main-title-display">
                                        <div className="disputeLedger-green-title">事项等级（{tabKeyTitles(tabKey)}）</div>
                                    </div>
                                    <div style={{ height: '247px' }} 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>
                            <Col span={8}>
                                <div className="workDash-main-flex_1">
                                    <div style={{ alignItems: 'center', justifyContent: 'space-between' }} className="big-green-main-title-display">
                                        <div className="disputeLedger-green-title">纠纷类型（{tabKeyTitles(tabKey)}）</div>
                                        {caseTypeLevel > 1 && (
                                            <div
                                                onClick={() => {
                                                    setCaseTypeLevel(caseTypeLevel - 1);
                                                }}
                                                className="public-a"
                                                style={{ padding: '12px 16px' }}
                                            >
                                                <IconUndo style={{ color: '#1A6FB8' }} /> <span className=" public-color">返回上一级</span>
                                            </div>
                                        )}
                                    </div>
                                    <div style={{ width: '100%', height: '247px' }}>
                                        <MyLTopChartPie
                                            data={
                                                caseTypeLevel > 1
                                                    ? caseTypeList?.map((i) => ({ value: i.caseRate, caseNum: i.caseNum, name: i.caseTypeName, caseType: i.caseType })) || []
                                                    : data?.typeList?.map((i) => ({ value: i.caseRate, caseNum: i.caseNum, name: i.caseTypeName, caseType: i.caseType })) || []
                                            }
                                            onMyLTopChartPie={onMyLTopChartPie}
                                        />
                                    </div>
                                </div>
                            </Col>
                        </Row>
                    </div>
                )}

                {/* 图表-化解统计 */}
                <div className="disputeLedger-green">
                    <div style={{ position: 'relative', width: '100%', backgroundColor: '#fff' }}>
                        <div
                            style={{ position: 'absolute', zIndex: '1000', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}
                            className="big-green-main-title-display"
                        >
                            <div className="disputeLedger-green-title">化解统计</div>
                            <div style={{ paddingRight: '24px' }}>
                                <Select
                                    style={{ width: '180px' }}
                                    value={province}
                                    onChange={(value) => {
                                        onClickProvince(value);
                                    }}
                                >
                                    {[
                                        { label: '总登记', value: '' },
                                        { label: '化解中', value: '1' },
                                        { label: '已结案', value: '2' },
                                        { label: '不予受理', value: '3' },
                                    ].map((option, index) => (
                                        <Option key={index} value={option.value}>
                                            {'统计条件：' + option.label}
                                        </Option>
                                    ))}
                                </Select>
                                <Button type="outline" onClick={downloadAreaXls}>
                                    导出
                                </Button>
                            </div>
                        </div>
                        <div style={{ width: '100%', height: '300px' }}>
                            {province === '' && (
                                <MyChartBar
                                    data={data?.areaList || []}
                                    status={province}
                                    dataAxis={data?.areaList?.map((i) => i.areaName) || []}
                                    onMyLTopChartPie={onModalClick}
                                />
                            )}
                            {province === '1' && (
                                <MyChartBar1
                                    data={data?.areaList || []}
                                    status={province}
                                    dataAxis={data?.areaList?.map((i) => i.areaName) || []}
                                    onMyLTopChartPie={onModalClick}
                                />
                            )}
                            {province === '2' && (
                                <MyChartBar2
                                    data={data?.areaList || []}
                                    data1={data?.areaList || []}
                                    dataAxis={data?.areaList?.map((i) => i.areaName) || []}
                                    onMyLTopChartPie={onModalClick}
                                />
                            )}
                            {province === '3' && (
                                <MyChartBar3 data={data?.areaList || []} dataAxis={data?.areaList?.map((i) => i.areaName) || []} onMyLTopChartPie={onModalClick} />
                            )}
                        </div>
                    </div>
                </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 style={{ display: 'flex', alignItems: 'center', gap: '8px' }} className='disputeLedger-green-title'><img src={huo} alt="" srcset="" />扬言极端</div>
              <div style={{ fontSize: '14px', padding: '0 16px', display: 'flex' }} className='disputeLedger-green-subTitle'>区域查询：
                <Breadcrumb>{yYjds?.map((i, idx) => <Breadcrumb.Item><span onClick={() => {
                  if (yYjds?.length > 1) {
                    setYYjdData({ visible: false })
                    console.log('yYjds111111', yYjds);
                    setYYjds(yYjds.filter((j, idx2) => idx2 <= idx))
                    delete search.queArea;
                    delete search.queRoad;
                    delete search.queVillage;
                    delete search.queRoad;
                    getAnalysis({ ...search, [i.key]: i.value })
                  }
                }} className={idx < (yYjds?.length - 1) && 'public-a'}>{i.label}</span></Breadcrumb.Item>)}</Breadcrumb></div>
              <div style={{ margin: '12px 16px' }}>
                <Alert
                  type='info'
                  content={<span>点击区域查询文字内容可返回上一级</span>}
                />
              </div>
              <div style={{ padding: '4px 16px 16px 16px' }}>
                {
                  yYjdData.visible ?
                    <TableView
                      columns={fxColumns}
                      dataSource={tableData.list}
                      // tableHeight={'100%'}
                      size="small"
                      rowKey='ownerId'
                      bordered={true}
                      isScroll={true}//兼容以前的，当需要表格竖向滚动，请设置这个
                      scroll={{
                        x: 1300
                      }}
                      offsetHeight={165}
                      onChange={(pagination, filters, sorter) => {
                        handleSort(pagination.current, pagination.pageSize, sorter)
                      }}
                      pagination={{
                        current: tableData.page,
                        pageSize: tableData.size,
                        total: tableData.total,
                      }}
                    /> :
                    <Table
                      columns={[
                        { title: '区域', width: 120, dataIndex: 'name' },
                        {
                          title: '事件数量', width: 700, dataIndex: 'total', defaultSortOrder: 'descend',
                          sorter: true, render: (text, record) => (
                            <div className='workDash-extreme-rate'><div className='workDash-extreme-rate-show' style={{ width: `${((Number(text) / Number(extremeTotal)) || 0).toFixed(2) * 100}%` }}>{`${text || 0}件`}</div><div style={{ zIndex: '2' }}></div></div>
                          )
                        },
                        { title: '极端事件高发纠纷类型', width: 280, dataIndex: 'commonType' },
                        {
                          title: '操作', width: 120, dataIndex: 'actions', render: (text, record) => (
                            <Space>
                              {(record?.region !== 'unitId' && record?.region !== 'queVillage') && <div onClick={() => {
                                // 将code传给查询组件中，并在查询组件中的区域中进行展示
                                //  let codes = getParentCodes(treeList, record.code);
                                //  form.setFieldValue('queCode', codes)
                                setYYjds([...yYjds, { label: record.name, value: record.code, key: record.region }])
                                setRegion({ key: record.region, value: record.code })
                                delete search.queArea;
                                delete search.queRoad;
                                delete search.queVillage;
                                delete search.queRoad;
                                getAnalysis({ ...search, [record.region]: record.code })
                              }} className='public-a public-color'>查看下级</div>}
                              {<div onClick={() => {
                                setYYjds([...yYjds, { label: record.name, value: record.code, key: record.region }])
                                setRegion({ key: record.region, value: record.code })
                                pageExtremeCase({ ...search, ...pageData, [record.region]: record.code }, true)
                              }} className='public-a public-color'>详情</div>}
                            </Space>
                          )
                        },
                      ]}
                      locale={{
                        emptyText: <div className='public-noData'>
                          <Empty imageStyle={{ height: '160px' }} description={<span style={{ color: "#86909C" }}>暂无数据</span>} image={empty}>
                            <div className='ledger-main-display' style={{ marginTop: '8px' }}>
                            </div>
                          </Empty>
                        </div>, // 使用自定义组件作为空状态的展示
                      }}
                      bordered
                      onChange={(pagination, filters, sorter) => {
                        let sortType = sorter?.order === 'descend' ? '2' : sorter?.order === 'ascend' ? '1' : '';
                        setYYJDSortType(sorter?.order || '')
                        let item = yYjds[yYjds.length - 1];
                        delete search.queArea;
                        delete search.queRoad;
                        delete search.queVillage;
                        delete search.queRoad;
                        getAnalysis({ ...search, [item.key]: item.value, sortType })
                      }}
                      dataSource={extremeData}
                      scroll={null}
                      summary={() => (
                        <Table.Summary fixed>
                          <Table.Summary.Row style={{ background: '#EFF8FF' }}>
                            <Table.Summary.Cell index={0}>合计</Table.Summary.Cell>
                            <Table.Summary.Cell index={1}>{extremeTotal}</Table.Summary.Cell>
                            <Table.Summary.Cell index={2}></Table.Summary.Cell>
                            <Table.Summary.Cell index={3}></Table.Summary.Cell>
                          </Table.Summary.Row>
                        </Table.Summary>
                      )}
                      direction="暂无历史记录"
                      pagination={false}
                      size="small"
                      rowKey="applyId"
                    />
                }
              </div>
            </div>
          </div>
        </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" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                                <div>实时动态</div>
                                {/* 导出 */}
                                <Button type="outline" onClick={downloadXls}>
                                    导出
                                </Button>
                            </div>
                            <div style={{ padding: '4px 16px 16px' }}>
                                {/* <ScrollTable dataSource={data.caseList || []} columns={columns()} /> */}
                                <div className="workDash-table">
                                    <TableView
                                        title=""
                                        columns={columns()}
                                        dataSource={listData.tableData}
                                        pagination={{
                                            current: listDataSearch.page,
                                            pageSize: listDataSearch.size,
                                            total: listData.total,
                                            onChange: (page, pageSize) => handleChangePage(page, pageSize),
                                        }}
                                        rowClassName={(record) => (record.id === data.tableActive ? 'tableRowActive' : '')}
                                    />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <SupervisingViews
                    visible={supervising}
                    handleOnCancel={() => setSupervising(false)}
                    caseId={supervisingAddId}
                    supervisingId={supervisingId}
                    getTableData={() => {
                        let newData = region ? { [region.key]: region.value } : {};
                        pageExtremeCase({
                            ...search,
                            ...pageData,
                            ...newData,
                        });
                    }}
                />
                <Modal title="督办信息" style={{ width: '938px' }} onCancel={() => setSupervisingList(false)} visible={supervisingList} footer={null}>
                    <TableView
                        showHeader
                        title=""
                        columns={supervisingColumns}
                        dataSource={SuperviseListData || []}
                        rowKey="id"
                        tableHeight={500}
                        style={{ marginTop: '-40px' }}
                    />
                </Modal>
                {/* 点击柱状图弹窗 */}
                <Modal
                    title={`${modalData.name || ''}`}
                    visible={modalVisible}
                    onCancel={() => setModalVisible(false)}
                    footer={null}
                    style={{ width: '80%' }}
                >
                    <div>
                        {/* <div style={{ marginBottom: '8px' }}>
                            <div className="comprehensive-title">查询条件</div>
                            <NewTableSearch
                                exportButtonShow={false}
                                labelLength={6}
                                form={modalForm}
                                itemData={[
                                    // { type: 'Cascader', name: 'queCode', label: '问题属地', placeholder: '请选择', changeSelect: true, allowClear: false, treedata: treeList || [] },
                                    { type: 'Input', name: 'inputUnitName', label: '登记机构' },
                                    { type: 'Select', name: 'mediResult', label: '化解结果', placeholder: '请选择', span: 8, selectdata: $$.options.mediResult },
                                    { type: 'Input', name: 'plaintiffs', label: '申请方', labelStyle: { width: '56px' } },
                                    // { type: 'Input', name: 'defendants', label: '被申请方' },
                                ]}
                                handleReset={() => {
                                    modalForm.resetFields();
                                    modalForm.setFieldsValue({});
                                }}
                                handleSearch={() => {
                                    handleModalSearch('search');
                                }}
                            />
                        </div> */}
                        <TableView
                            columns={[
                                {
                                    title: '登记时间',
                                    width: 100,
                                    dataIndex: 'createTime',
                                    defaultSortOrder: 'descend',
                                    order: 'ascend',
                                    sorter: { compare: (a, b) => {} },
                                    render: (text) => <div>{$$.dateFormat(text)}</div>,
                                },
                                { title: '事项来源', width: 100, dataIndex: 'canalName' },
                                { title: '事项状态', width: 100, dataIndex: 'statusName' },
                                { title: '事项等级', width: 100, dataIndex: 'caseLevel' },
                                { title: '纠纷类型', width: 100, dataIndex: 'caseTypeName' },
                                { title: '问题属地', width: 100, dataIndex: 'areaName' },
                                { title: '登记机构', width: 150, dataIndex: 'inputUnitName' },
                                { title: '承办部门', width: 100, dataIndex: 'mediateUnitName' },
                                {
                                    title: '办结时间',
                                    width: 100,
                                    dataIndex: 'closeTime',
                                    order: 'ascend',
                                    sorter: { compare: (a, b) => {} },
                                    render: (text) => <span>{$$.dateFormat(text)}</span>,
                                },
                                {
                                    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: '操作',
                                    dataIndex: 'action',
                                    width: 50,
                                    render: (_, record) => {
                                        return <Link onClick={() => handleJump(record)}>详情</Link>;
                                    },
                                },
                            ]}
                            dataSource={modalData.tableData}
                            onChange={(pagination, filters, sorter) => {
                                handleSortModal(pagination.current, pagination.pageSize, sorter);
                            }}
                            pagination={{
                                current: modalSearch.page,
                                pageSize: modalSearch.size,
                                total: modalData.total,
                                // onChange: (page, pageSize) => handleModalChangePage(page, pageSize),
                            }}
                        />
                    </div>
                </Modal>
                <Response visible={response} handleOnCancel={() => setResponse(false)} responseId={responseId} data={superviseInfo} />
                <ResponseDetail visible={detail} handleOnCancel={() => setDetail(false)} data={responseDetail} />
                <SelectObjModal
                    visible={selectModalVisible}
                    nameStr={selectObjModalData.title}
                    checkKeys={[selectObjModalData[selectObjModalData.key]?.key || '']}
                    onOk={(item) => {
                        setSelectModalVisible(false);
                        setSelectObjModalData({ ...selectObjModalData, [selectObjModalData.key]: item });
                        form.setFieldValue(selectObjModalData?.key, item.name);
                    }}
                    onClose={() => setSelectModalVisible(false)}
                    type="dept"
                    isCheckbox={false}
                />
            </div>
        </NewPage>
    );
};

export default WorkDash;

// 柱状图
const MyChartBar = ({ data, dataAxis, onMyLTopChartPie }) => {
    const myChartRef = useRef();
    // 保存echarts实例的引用
    const [myChart, setMyChart] = useState(null);

    // 初始化图表
    useEffect(() => {
        const chart = echarts.init(document.getElementById('chartBar'), 'dark');
        setMyChart(chart);

        return () => {
            // 组件卸载时销毁图表
            chart.dispose();
        };
    }, []);

    // 更新图表数据和事件
    useEffect(() => {
        if (!myChart) return;

        // 移除旧的点击事件监听器
        myChart.off('click');

        // 添加新的点击事件监听器
        myChart.on('click', (params) => {
            // 将原始数据对象传递给回调函数
            onMyLTopChartPie(data[params.dataIndex]);
        });

        // 设置图表配置
        myChart.setOption({
            backgroundColor: '#fff',
            grid: {
                x: 10,
                y: 60,
                x2: 20,
                y2: 0,
                containLabel: true,
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c}件',
            },
            xAxis: [
                {
                    type: 'category',
                    data: dataAxis,
                    axisLabel: {
                        interval: 'auto',
                        rotate: 45,
                        color: '#4e5969',
                    },
                    scrollbar: {
                        show: true,
                    },
                },
            ],
            yAxis: {
                splitLine: {
                    lineStyle: {
                        type: 'dashed',
                        color: '#000',
                    },
                },
            },
            series: [
                {
                    type: 'bar',
                    name: '总登记',
                    data: data.map((item) => item.caseNum),
                    barWidth: 24,
                    label: {
                        show: true,
                        color: 'rgba(0, 0, 0, 0.85)',
                        fontSize: '14px',
                        position: 'top',
                        valueAnimation: false,
                    },
                    emphasis: {
                        itemStyle: {
                            opacity: 0.7,
                        },
                    },
                    itemStyle: {
                        color: '#57a9fb',
                        borderWidth: 2,
                    },
                },
            ],
        });
    }, [data, dataAxis, myChart, onMyLTopChartPie]);

    return <div id="chartBar" ref={myChartRef} style={{ height: '290px', width: '100%' }} />;
};
// 柱状图化解中
const MyChartBar1 = ({ data, dataAxis, onMyLTopChartPie }) => {
    const myChartRef = useRef();
    const [myChart, setMyChart] = useState(null);

    useEffect(() => {
        const chart = echarts.init(document.getElementById('chartBar1'), 'dark');
        setMyChart(chart);
        return () => {
            chart.dispose();
        };
    }, []);

    useEffect(() => {
        if (!myChart) return;

        myChart.off('click');
        myChart.on('click', (params) => {
            onMyLTopChartPie(data[params.dataIndex]);
        });

        myChart.setOption({
            backgroundColor: '#fff',
            grid: {
                x: 10,
                y: 60,
                x2: 20,
                y2: 0,
                containLabel: true,
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c}件',
            },
            xAxis: [
                {
                    type: 'category',
                    data: dataAxis,
                    axisLabel: {
                        interval: 'auto',
                        rotate: 45,
                        color: '#4e5969',
                    },
                    scrollbar: {
                        show: true,
                    },
                },
            ],
            yAxis: {
                splitLine: {
                    lineStyle: {
                        type: 'dashed',
                        color: '#000',
                    },
                },
            },
            series: [
                {
                    type: 'bar',
                    name: '化解中',
                    data: data.map((item) => item.resolveingNum),
                    barWidth: 24,
                    label: {
                        show: true,
                        color: 'rgba(0, 0, 0, 0.85)',
                        fontSize: '14px',
                        position: 'top',
                        valueAnimation: false,
                    },
                    emphasis: {
                        itemStyle: {
                            opacity: 0.7,
                        },
                    },
                    itemStyle: {
                        color: '#57a9fb',
                        borderWidth: 2,
                    },
                },
            ],
        });
    }, [data, dataAxis, myChart, onMyLTopChartPie]);

    return <div id="chartBar1" ref={myChartRef} style={{ height: '290px', width: '100%' }} />;
};

// 柱状图化解成功，化解不成功
const MyChartBar2 = ({ data, data1, dataAxis, onMyLTopChartPie }) => {
    const myChartRef = useRef();
    const [myChart, setMyChart] = useState(null);

    useEffect(() => {
        const chart = echarts.init(document.getElementById('chartBar2'), 'dark');
        setMyChart(chart);
        return () => {
            chart.dispose();
        };
    }, []);

    useEffect(() => {
        if (!myChart) return;

        myChart.off('click');
        myChart.on('click', (params) => {
            const isSuccess = params.seriesName === '化解成功';
            onMyLTopChartPie({
                ...data[params.dataIndex],
                type: isSuccess ? 'success' : 'fail',
            });
        });

        myChart.setOption({
            backgroundColor: '#fff',
            grid: {
                x: 10,
                y: 60,
                x2: 20,
                y2: 0,
                containLabel: true,
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c}件',
            },
            legend: {
                orient: 'horizontal',
                top: 12,
                right: 224,
                data: [
                    { name: '化解成功', icon: 'circle' },
                    { name: '化解不成功', icon: 'circle' },
                ],
            },
            xAxis: [
                {
                    type: 'category',
                    data: dataAxis,
                    axisLabel: {
                        interval: 'auto',
                        rotate: 45,
                        color: '#4e5969',
                    },
                    scrollbar: {
                        show: true,
                    },
                },
            ],
            yAxis: {
                splitLine: {
                    lineStyle: {
                        type: 'dashed',
                        color: '#000',
                    },
                },
            },
            series: [
                {
                    type: 'bar',
                    name: '化解成功',
                    data: data.map((item) => item.resolveNum),
                    barWidth: 24,
                    label: {
                        show: true,
                        position: 'top',
                        color: 'rgba(0, 0, 0, 0.85)',
                        fontSize: '14px',
                        valueAnimation: false,
                    },
                    emphasis: {
                        itemStyle: {
                            opacity: 0.7,
                        },
                    },
                    itemStyle: {
                        color: '#23c343',
                        borderWidth: 2,
                    },
                },
                {
                    type: 'bar',
                    name: '化解不成功',
                    data: data1.map((item) => item.unResolveNum),
                    barWidth: 24,
                    label: {
                        show: true,
                        position: 'top',
                        color: 'rgba(0, 0, 0, 0.85)',
                        fontSize: '14px',
                        valueAnimation: false,
                    },
                    emphasis: {
                        itemStyle: {
                            opacity: 0.7,
                        },
                    },
                    itemStyle: {
                        color: '#F76560',
                        borderWidth: 2,
                    },
                },
            ],
        });
    }, [data, data1, dataAxis, myChart, onMyLTopChartPie]);

    return <div id="chartBar2" ref={myChartRef} style={{ height: '290px', width: '100%' }} />;
};

// 柱状图不予受理
const MyChartBar3 = ({ data, dataAxis, onMyLTopChartPie }) => {
    const myChartRef = useRef();
    const [myChart, setMyChart] = useState(null);

    useEffect(() => {
        const chart = echarts.init(document.getElementById('chartBar3'), 'dark');
        setMyChart(chart);
        return () => {
            chart.dispose();
        };
    }, []);

    useEffect(() => {
        if (!myChart) return;

        myChart.off('click');
        myChart.on('click', (params) => {
            onMyLTopChartPie(data[params.dataIndex]);
        });

        myChart.setOption({
            backgroundColor: '#fff',
            grid: {
                x: 10,
                y: 60,
                x2: 20,
                y2: 0,
                containLabel: true,
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c}件',
            },
            xAxis: [
                {
                    type: 'category',
                    data: dataAxis,
                    axisLabel: {
                        interval: 'auto',
                        rotate: 45,
                        color: '#4e5969',
                    },
                    scrollbar: {
                        show: true,
                    },
                },
            ],
            yAxis: {
                splitLine: {
                    lineStyle: {
                        type: 'dashed',
                        color: '#000',
                    },
                },
            },
            series: [
                {
                    type: 'bar',
                    name: '不予受理',
                    data: data.map((item) => item.rejectNum),
                    barWidth: 24,
                    label: {
                        show: true,
                        position: 'top',
                        color: 'rgba(0, 0, 0, 0.85)',
                        fontSize: '14px',
                        valueAnimation: false,
                    },
                    emphasis: {
                        itemStyle: {
                            opacity: 0.7,
                        },
                    },
                    itemStyle: {
                        color: '#FFA940',
                        borderWidth: 2,
                    },
                },
            ],
        });
    }, [data, dataAxis, myChart, onMyLTopChartPie]);

    return <div id="chartBar3" ref={myChartRef} style={{ height: '290px', width: '100%' }} />;
};

const MyLTopChartPie = ({ data, onMyLTopChartPie }) => {
    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',
                textStyle: {
                    color: 'rgba(0, 0, 0, 0.85)', // 设置图例文字颜色为红色
                },
                right: 20,
                data: data?.map((i) => ({ name: i.name, icon: 'circle' })),
                formatter: function (name) {
                    return name.length > 7 ? name.slice(0, 7) + '...' : name;
                },
            },
            tooltip: {
                trigger: 'item',
                formatter: function (params) {
                    return `纠纷类型<br/>${params.name}: ${params?.data?.caseNum}件（${params.value}%）`;
                },
            },
            // tooltip: {
            //   trigger: 'item',
            //   formatter: "{a} <br/>{b}: ({d}%)"
            // },
            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,
                },
            ],
        });

        // 移除旧的事件监听器
        myChart.off('click');

        //  为饼图添加点击事件
        myChart.on('click', onPieClick);

        // 事件处理函数
        function onPieClick(params) {
            onMyLTopChartPie(params);
        }
    }, [data]);

    return <div id="chartLTopPie" ref={myChartRef} style={{ height: '232px', width: '100%' }} />;
};

const MyLTopChartPie1 = ({ data, allNum }) => {
    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: ['center', 'center'],
                    color: ['#B6DDF1', '#3A8AC6', '#094282'],
                    data: data,
                    label: {
                        show: true,
                        position: 'inside', // 设置文字在扇形区域内
                        formatter: '{d}%', // 标签文本格式器
                        rich: {
                            a: {
                                lineHeight: 25,
                                align: 'center',
                            },
                            b: {
                                lineHeight: 25,
                                align: 'center',
                            },
                        },
                    },
                },
            ],
            graphic: {
                type: 'group',
                left: 'center',
                top: '45%',
                children: [
                    {
                        type: 'text',
                        left: 'center',
                        style: {
                            text: '事件总数',
                            fill: '#4E5969', // 第一部分文字颜色
                            fontSize: 14,
                            fontWeight: '400',
                        },
                    },
                    {
                        type: 'text',
                        top: '24px',
                        left: 'center',
                        style: {
                            text: allNum + '\r件',
                            textAlign: 'center',
                            fill: '#1D2129', // 第二部分文字颜色
                            fontSize: 18,
                            fontWeight: '400',
                        },
                    },
                    // {
                    //   type: 'text',
                    //   top: '28px',
                    //   left: '65px',
                    //   style: {
                    //     text: '件',
                    //     fill: '#86909C', // 第二部分文字颜色
                    //     fontSize: 12,
                    //     fontWeight: '400'
                    //   }
                    // },
                ],
            },
        });
    }, [data]);

    useEffect(() => {});

    return <div id="chartLTopPie1" ref={myChartRef} style={{ height: '232px', width: '100%' }} />;
};

 src/views/workDash/index.jsx

@@ -2,7 +2,7 @@
 * @Company: hugeInfo
 * @Author: lwh
 * @Date: 2024-09-14 15:59:17
 * @LastEditTime: 2025-05-09 14:20:13
 * @LastEditTime: 2025-06-21 11:32:31
 * @LastEditors: lwh
 * @Version: 1.0.0
 * @Description:
@@ -40,6 +40,10 @@
    workDash_24,
    workDash_25,
    workDash_26,
    workDash_27,
    workDash_28,
    workDash_29,
    workDash_30,
} from '../../assets/images';
import NewPage from '../../components/NewPage/index';
import * as echarts from 'echarts';
@@ -376,6 +380,14 @@
                getListData({ ...search, canal: '22_00001-3' }, listDataSearch);
            } else if (activeKey === '5') {
                getListData({ ...search, canal: '22_00001-4' }, listDataSearch);
            } else if (activeKey === '6') {
                getListData({ ...search, canal: '22_00001-3', canalSecond: '22_00003-8' }, listDataSearch);
            } else if (activeKey === '7') {
                getListData({ ...search, canal: '22_00001-3', canalSecond: '22_00003-2' }, listDataSearch);
            } else if (activeKey === '8') {
                getListData({ ...search, canal: '22_00001-4', canalSecond: '22_00003-1' }, listDataSearch);
            } else if (activeKey === '9') {
                getListData({ ...search, canal: '22_00001-4', canalSecond: '22_00003-7' }, listDataSearch);
            }
        }
    }
@@ -783,6 +795,14 @@
                return '自行排查';
            case '5':
                return '协同推送';
            case '6':
                return '部门排查';
            case '7':
                return '网格排查';
            case '8':
                return '非警务纠纷';
            case '9':
                return '专项纠纷';
            default:
                break;
        }
@@ -1083,7 +1103,7 @@
                        {tabKey === '4' && (
                            <Button
                                className="source-button source-button-color"
                                icon={<img className="source-icon" src={workDash_22} alt="" srcset="" />}
                                icon={<img className="source-icon" src={workDash_29} alt="" srcset="" />}
                                type="secondary"
                            >
                                自行排查
@@ -1097,6 +1117,94 @@
                            >
                                协同推送
                            </Button>
                        )}
                        {tabKey === '6' && (
                            <Space>
                                <Button
                                    onClick={() => {
                                        tabsOnchange('4');
                                    }}
                                    className="source-button"
                                    icon={<img className="source-icon" src={workDash_28} alt="" srcset="" />}
                                    type="secondary"
                                >
                                    自行排查
                                </Button>
                                <IconCaretRight />
                                <Button
                                    className="source-button source-button-color"
                                    icon={<img className="source-icon" src={workDash_23} alt="" srcset="" />}
                                    type="secondary"
                                >
                                    部门排查
                                </Button>
                            </Space>
                        )}
                        {tabKey === '7' && (
                            <Space>
                                <Button
                                    onClick={() => {
                                        tabsOnchange('4');
                                    }}
                                    className="source-button"
                                    icon={<img className="source-icon" src={workDash_28} alt="" srcset="" />}
                                    type="secondary"
                                >
                                    自行排查
                                </Button>
                                <IconCaretRight />
                                <Button
                                    className="source-button source-button-color"
                                    icon={<img className="source-icon" src={workDash_23} alt="" srcset="" />}
                                    type="secondary"
                                >
                                    网格排查
                                </Button>
                            </Space>
                        )}
                        {tabKey === '8' && (
                            <Space>
                                <Button
                                    onClick={() => {
                                        tabsOnchange('5');
                                    }}
                                    className="source-button"
                                    icon={<img className="source-icon" src={workDash_27} alt="" srcset="" />}
                                    type="secondary"
                                >
                                    协同推送
                                </Button>
                                <IconCaretRight />
                                <Button
                                    className="source-button1 source-button-color"
                                    icon={<img className="source-icon" src={workDash_30} alt="" srcset="" />}
                                    type="secondary"
                                >
                                    非警务纠纷
                                </Button>
                            </Space>
                        )}
                        {tabKey === '9' && (
                            <Space>
                                <Button
                                    onClick={() => {
                                        tabsOnchange('5');
                                    }}
                                    className="source-button"
                                    icon={<img className="source-icon" src={workDash_27} alt="" srcset="" />}
                                    type="secondary"
                                >
                                    协同推送
                                </Button>
                                <IconCaretRight />
                                <Button
                                    className="source-button source-button-color"
                                    icon={<img className="source-icon" src={workDash_23} alt="" srcset="" />}
                                    type="secondary"
                                >
                                    专项纠纷
                                </Button>
                            </Space>
                        )}
                    </div>
                )}
@@ -1122,7 +1230,7 @@
                    />
                    <div style={{ borderBottom: '1px solid #E5E6EB', position: 'absolute', width: '100%' }}></div> */}
                <div style={{ marginTop: '16px' }} className="disputeLedger-row">
                    <div className="comprehensive-title">数据总览</div>
                    <div className="comprehensive-title">数据总览{tabKey !== '1' && `（${tabKeyTitles(tabKey)}）`}</div>
                    <div>
                        <Space className="workDash-d" align="center" split={<Divider type="vertical" style={{ height: '48px' }} />}>
                            <div
@@ -1134,10 +1242,154 @@
                                <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>
                                {['1', '2', '3', '6', '7', '8', '9'].includes(tabKey) && (
                                    <div className="workDash-item-div">
                                        <div className="workDash-item-title">总登记</div>
                                        <div className="workDash-item-value">{data?.totalNum || 0}</div>
                                    </div>
                                )}
                                {tabKey === '4' && (
                                    <div className="workDash-item-div">
                                        <div className="workDash-item-title">
                                            <div style={{ width: '50px' }}>总登记</div>
                                            <div style={{ width: '36px' }}></div>{' '}
                                            <Space split={<Divider type="vertical" />}>
                                                <div style={{ display: 'flex', alignItems: 'center' }}>
                                                    <span className="workDash-item-title-blue"></span>
                                                    <span
                                                        style={{
                                                            color: '#4E5969',
                                                            fontSize: '14px',
                                                            display: 'flex',
                                                            alignItems: 'center',
                                                            display: 'inline-block',
                                                            width: '150px',
                                                        }}
                                                    >
                                                        部门排查：{data?.bmpcNum || 0}件
                                                    </span>
                                                    <span
                                                        onClick={() => {
                                                            tabsOnchange('6');
                                                        }}
                                                        style={{
                                                            color: '#1A6FB8',
                                                            border: '1px solid #1A6FB8',
                                                            fontSize: '12px',
                                                            borderRadius: '2px',
                                                            padding: '0px 4px',
                                                            display: 'flex',
                                                            alignItems: 'center',
                                                            marginLeft: '12px',
                                                        }}
                                                    >
                                                        查看
                                                    </span>
                                                </div>
                                            </Space>
                                        </div>
                                        <div className="workDash-item-value" style={{ marginTop: '4px' }}>
                                            <div style={{ width: '50px' }}>{data?.totalNum || 0}</div>
                                            <div style={{ width: '36px' }}></div>
                                            <Space split={<Divider type="vertical" />}>
                                                <div style={{ display: 'flex', alignItems: 'center' }}>
                                                    <span className="workDash-item-title-blue"></span>
                                                    <span style={{ color: '#4E5969', fontSize: '14px', display: 'inline-block', width: '150px' }}>
                                                        网格排查：{data?.wgpcNum || 0}件
                                                    </span>
                                                    <span
                                                        onClick={() => {
                                                            tabsOnchange('7');
                                                        }}
                                                        style={{
                                                            color: '#1A6FB8',
                                                            border: '1px solid #1A6FB8',
                                                            fontSize: '12px',
                                                            borderRadius: '2px',
                                                            padding: '0px 4px',
                                                            display: 'flex',
                                                            alignItems: 'center',
                                                            marginLeft: '12px',
                                                        }}
                                                    >
                                                        查看
                                                    </span>
                                                </div>
                                            </Space>
                                        </div>
                                    </div>
                                )}
                                {tabKey === '5' && (
                                    <div className="workDash-item-div">
                                        <div className="workDash-item-title">
                                            <div style={{ width: '50px' }}>总登记</div>
                                            <div style={{ width: '36px' }}></div>{' '}
                                            <Space split={<Divider type="vertical" />}>
                                                <div style={{ display: 'flex', alignItems: 'center' }}>
                                                    <span className="workDash-item-title-blue"></span>
                                                    <span
                                                        style={{
                                                            color: '#4E5969',
                                                            fontSize: '14px',
                                                            display: 'flex',
                                                            alignItems: 'center',
                                                            display: 'inline-block',
                                                            width: '150px',
                                                        }}
                                                    >
                                                        非警务纠纷：{data?.fjwjfNum || 0}件
                                                    </span>
                                                    <span
                                                        onClick={() => {
                                                            tabsOnchange('8');
                                                        }}
                                                        style={{
                                                            color: '#1A6FB8',
                                                            border: '1px solid #1A6FB8',
                                                            fontSize: '12px',
                                                            borderRadius: '2px',
                                                            padding: '0px 4px',
                                                            display: 'flex',
                                                            alignItems: 'center',
                                                            marginLeft: '12px',
                                                        }}
                                                    >
                                                        查看
                                                    </span>
                                                </div>
                                            </Space>
                                        </div>
                                        <div className="workDash-item-value" style={{ marginTop: '4px' }}>
                                            <div style={{ width: '50px' }}>{data?.totalNum || 0}</div>
                                            <div style={{ width: '36px' }}></div>
                                            <Space split={<Divider type="vertical" />}>
                                                <div style={{ display: 'flex', alignItems: 'center' }}>
                                                    <span className="workDash-item-title-blue"></span>
                                                    <span style={{ color: '#4E5969', fontSize: '14px', display: 'inline-block', width: '150px' }}>
                                                        专项纠纷：{data?.zxjfNum || 0}件
                                                    </span>
                                                    <span
                                                        onClick={() => {
                                                            tabsOnchange('9');
                                                        }}
                                                        style={{
                                                            color: '#1A6FB8',
                                                            border: '1px solid #1A6FB8',
                                                            fontSize: '12px',
                                                            borderRadius: '2px',
                                                            padding: '0px 4px',
                                                            display: 'flex',
                                                            alignItems: 'center',
                                                            marginLeft: '12px',
                                                        }}
                                                    >
                                                        查看
                                                    </span>
                                                </div>
                                            </Space>
                                        </div>
                                    </div>
                                )}
                            </div>
                            <div
                                onClick={() => {
@@ -1170,14 +1422,15 @@
                                            <div style={{ display: 'flex', alignItems: 'center' }}>
                                                <span className="workDash-item-title-green"></span>
                                                <span style={{ color: '#4E5969', fontSize: '14px', display: 'flex', alignItems: 'center' }}>
                                                    化解成功：{data?.finishNum || 0}件 | 成功率：<span style={{ color: '#00B42A' }}>{((data?.finishNum*100)/(data?.finishNum+data?.failNum) || 0).toFixed(2)}%</span>
                                                    化解成功：{data?.finishNum || 0}件 | 成功率：
                                                    <span style={{ color: '#00B42A' }}>{((data?.finishNum * 100) / (data?.finishNum + data?.failNum) || 0).toFixed(2)}%</span>
                                                    <img style={{ width: '14px', height: '14px', marginLeft: '8px' }} src={workDash_5} alt="" srcset="" />
                                                </span>
                                            </div>
                                        </Space>
                                    </div>
                                    <div className="workDash-item-value">
                                        <div style={{ width: '50px' }}>{data?.finishNum+data?.failNum || 0}</div>
                                        <div style={{ width: '50px' }}>{data?.finishNum + data?.failNum || 0}</div>
                                        <div style={{ width: '36px' }}></div>
                                        <Space split={<Divider type="vertical" />}>
                                            <div>
@@ -1218,13 +1471,13 @@
                                        </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"
                                                        onClick={() => {
                                                            tabsOnchange('2');
                                                        }}
                                                    >
                                                <div
                                                    className="workDash-main-card-head"
                                                    onClick={() => {
                                                        tabsOnchange('2');
                                                    }}
                                                >
                                                    <div className="workDash-main-card-head-l">
                                                        <div className="workDash-main-card-head-l-img">
                                                            <img src={workDash_6} alt="" srcset="" />
                                                        </div>
@@ -1267,13 +1520,13 @@
                                            </div>

                                            <div className="workDash-main-card">
                                                <div className="workDash-main-card-head">
                                                    <div
                                                        className="workDash-main-card-head-l workDash-bg_2"
                                                        onClick={() => {
                                                            tabsOnchange('3');
                                                        }}
                                                    >
                                                <div
                                                    className="workDash-main-card-head"
                                                    onClick={() => {
                                                        tabsOnchange('3');
                                                    }}
                                                >
                                                    <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>
@@ -1316,17 +1569,14 @@
                                            </div>

                                            <div className="workDash-main-card">
                                                <div className="workDash-main-card-head">
                                                <div className="workDash-main-card-head" onClick={() => {
                                                            tabsOnchange('4');
                                                        }}>
                                                    <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
                                                            className="workDash-main-card-head-l-img-title"
                                                            onClick={() => {
                                                                tabsOnchange('4');
                                                            }}
                                                        >
                                                        <div className="workDash-main-card-head-l-img-title">
                                                            详情
                                                        </div>
                                                    </div>
@@ -1367,13 +1617,10 @@
                                            </div>

                                            <div className="workDash-main-card">
                                                <div className="workDash-main-card-head">
                                                    <div
                                                        className="workDash-main-card-head-l workDash-bg_4"
                                                        onClick={() => {
                                                <div className="workDash-main-card-head" onClick={() => {
                                                            tabsOnchange('5');
                                                        }}
                                                    >
                                                        }}>
                                                    <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>
@@ -1527,178 +1774,6 @@
                    </div>
                )}

                {/* 公安非警务，12345，网格化 */}
                {tabKey === '5' && (
                    <div style={{ marginTop: '12px' }}>
                        <Row gutter={16}>
                            {/* 公安非警务 */}
                            <Col span={8}>
                                <div className="workDash-public">
                                    <div className="workDash-public-head">
                                        <div className="workDash-public-head-l">
                                            <div className="workDash-public-head-l-img">
                                                <img src={workDash_24} alt="" srcset="" />
                                            </div>
                                        </div>
                                        <div className="workDash-public-head-r">
                                            <div className="workDash-public-head-r-title">公安非警务</div>
                                            <div className="workDash-public-head-r-value">
                                                <div className="workDash-public-head-r-value-num">
                                                    {data?.oneSecondSource?.caseNum || 0}条 <span className="workDash-public-head-r-value-unit">（工单总数）</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div className="workDash-public-body">
                                        <Row gutter={[12, 8]}>
                                            <Col span={12}>
                                                <div className="workDash-public-body-item">
                                                    <div className="workDash-public-body-item-title">化解中</div>
                                                    <div className="workDash-public-body-item-value">{data?.oneSecondSource?.resolveingNum || 0}条</div>
                                                </div>
                                            </Col>
                                            <Col span={12}>
                                                <div className="workDash-public-body-item">
                                                    <div className="workDash-public-body-item-title">回退</div>
                                                    <div className="workDash-public-body-item-value">{data?.oneSecondSource?.rejectNum || 0}条</div>
                                                </div>
                                            </Col>
                                            <Col span={12}>
                                                <div className="workDash-public-body-item">
                                                    <div className="workDash-public-body-item-title">化解成功</div>
                                                    <div className="workDash-public-body-item-value">{data?.oneSecondSource?.resolveNum || 0}条</div>
                                                </div>
                                            </Col>
                                            <Col span={12}>
                                                <div className="workDash-public-body-item">
                                                    <div className="workDash-public-body-item-title">化解不成功</div>
                                                    <div className="workDash-public-body-item-value">{data?.oneSecondSource?.unResolveNum || 0}条</div>
                                                </div>
                                            </Col>
                                            <Col span={12}>
                                                <div className="workDash-public-body-item">
                                                    <div className="workDash-public-body-item-title">化解成功率</div>
                                                    <div className="workDash-public-body-item-value">{data?.oneSecondSource?.resolveRate || 0}%</div>
                                                </div>
                                            </Col>
                                        </Row>
                                    </div>
                                </div>
                            </Col>

                            {/* 12345 */}
                            <Col span={8}>
                                <div className="workDash-public">
                                    <div className="workDash-public-head">
                                        <div className="workDash-public-head-l">
                                            <div className="workDash-public-head-l-img workDash-public-head-l-img-green">
                                                <img src={workDash_25} alt="" srcset="" />
                                            </div>
                                        </div>
                                        <div className="workDash-public-head-r">
                                            <div className="workDash-public-head-r-title">12345</div>
                                            <div className="workDash-public-head-r-value">
                                                <div className="workDash-public-head-r-value-num">
                                                    {data?.twoSecondSource?.caseNum || 0}条 <span className="workDash-public-head-r-value-unit">（工单总数）</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div className="workDash-public-body">
                                        <Row gutter={[12, 8]}>
                                            <Col span={12}>
                                                <div className="workDash-public-body-item">
                                                    <div className="workDash-public-body-item-title">化解中</div>
                                                    <div className="workDash-public-body-item-value">{data?.twoSecondSource?.resolveingNum || 0}条</div>
                                                </div>
                                            </Col>
                                            <Col span={12}>
                                                <div className="workDash-public-body-item">
                                                    <div className="workDash-public-body-item-title">不予受理</div>
                                                    <div className="workDash-public-body-item-value">{data?.twoSecondSource?.rejectNum || 0}条</div>
                                                </div>
                                            </Col>
                                            <Col span={12}>
                                                <div className="workDash-public-body-item">
                                                    <div className="workDash-public-body-item-title">化解成功</div>
                                                    <div className="workDash-public-body-item-value">{data?.twoSecondSource?.resolveNum || 0}条</div>
                                                </div>
                                            </Col>
                                            <Col span={12}>
                                                <div className="workDash-public-body-item">
                                                    <div className="workDash-public-body-item-title">化解不成功</div>
                                                    <div className="workDash-public-body-item-value">{data?.twoSecondSource?.unResolveNum || 0}条</div>
                                                </div>
                                            </Col>
                                            <Col span={12}>
                                                <div className="workDash-public-body-item">
                                                    <div className="workDash-public-body-item-title">化解成功率</div>
                                                    <div className="workDash-public-body-item-value">{data?.twoSecondSource?.resolveRate || 0}%</div>
                                                </div>
                                            </Col>
                                        </Row>
                                    </div>
                                </div>
                            </Col>

                            {/* 网格化 */}
                            <Col span={8}>
                                <div className="workDash-public">
                                    <div className="workDash-public-head">
                                        <div className="workDash-public-head-l">
                                            <div className="workDash-public-head-l-img workDash-public-head-l-img-blue">
                                                <img src={workDash_26} alt="" srcset="" />
                                            </div>
                                        </div>
                                        <div className="workDash-public-head-r">
                                            <div className="workDash-public-head-r-title">网格化</div>
                                            <div className="workDash-public-head-r-value">
                                                <div className="workDash-public-head-r-value-num">
                                                    {data?.threeSecondSource?.caseNum || 0}条 <span className="workDash-public-head-r-value-unit">（工单总数）</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div className="workDash-public-body">
                                        <Row gutter={[12, 8]}>
                                            <Col span={12}>
                                                <div className="workDash-public-body-item">
                                                    <div className="workDash-public-body-item-title">化解中</div>
                                                    <div className="workDash-public-body-item-value">{data?.threeSecondSource?.resolveingNum || 0}条</div>
                                                </div>
                                            </Col>
                                            <Col span={12}>
                                                <div className="workDash-public-body-item">
                                                    <div className="workDash-public-body-item-title">不予受理</div>
                                                    <div className="workDash-public-body-item-value">{data?.threeSecondSource?.rejectNum || 0}条</div>
                                                </div>
                                            </Col>
                                            <Col span={12}>
                                                <div className="workDash-public-body-item">
                                                    <div className="workDash-public-body-item-title">化解成功</div>
                                                    <div className="workDash-public-body-item-value">{data?.threeSecondSource?.resolveNum || 0}条</div>
                                                </div>
                                            </Col>
                                            <Col span={12}>
                                                <div className="workDash-public-body-item">
                                                    <div className="workDash-public-body-item-title">化解不成功</div>
                                                    <div className="workDash-public-body-item-value">{data?.threeSecondSource?.unResolveNum || 0}条</div>
                                                </div>
                                            </Col>
                                            <Col span={12}>
                                                <div className="workDash-public-body-item">
                                                    <div className="workDash-public-body-item-title">化解成功率</div>
                                                    <div className="workDash-public-body-item-value">{data?.threeSecondSource?.resolveRate || 0}%</div>
                                                </div>
                                            </Col>
                                        </Row>
                                    </div>
                                </div>
                            </Col>
                        </Row>
                    </div>
                )}

                {/* 纠纷类型  化解状况  事项等级 */}
                {tabKey !== '1' && (
                    <div style={{ marginTop: '12px', width: '100%' }}>
@@ -1813,7 +1888,7 @@
                            style={{ position: 'absolute', zIndex: '1000', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}
                            className="big-green-main-title-display"
                        >
                            <div className="disputeLedger-green-title">化解统计</div>
                            <div className="disputeLedger-green-title">化解统计{tabKey !== '1' && `（${tabKeyTitles(tabKey)}）`}</div>
                            <div style={{ paddingRight: '24px' }}>
                                <Select
                                    style={{ width: '180px' }}
@@ -1833,7 +1908,7 @@
                                        </Option>
                                    ))}
                                </Select>
                                <Button type="outline" onClick={downloadAreaXls}>
                                <Button style={{ marginLeft: '12px' }} type="outline" onClick={downloadAreaXls}>
                                    导出
                                </Button>
                            </div>
@@ -1998,7 +2073,7 @@
                    <div className="workDash-main-flex_1" style={{ marginBottom: '12px' }}>
                        <div className="big-green-main-title-display-table">
                            <div className="disputeLedger-green-title" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                                <div>实时动态</div>
                                <div>实时动态{tabKey !== '1' && `（${tabKeyTitles(tabKey)}）`}</div>
                                {/* 导出 */}
                                <Button type="outline" onClick={downloadXls}>
                                    导出

 src/views/workDash/index.less

@@ -47,6 +47,14 @@
                background-color: #f53f3f;
                margin-right: 8px;
            }
      &-blue {
                display: inline-block;
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background-color: #1A6FB8;
                margin-right: 8px;
            }
        }
        &-value {
            color: #1d2129;
@@ -113,6 +121,7 @@
                    }
                }
                &-r {
          cursor: pointer;
                    background: linear-gradient(271deg, #13c2c2 0%, rgba(5, 174, 174, 0.8) 14%);
                    color: #fff;
                    display: flex;
@@ -465,6 +474,22 @@
        color: #1a6fb8 !important;
    }
}
.source-button1 {
    cursor: pointer;
    border: 1px solid #c9cdd4 !important;
    border-radius: 4px !important;
    padding: 8px 16px !important;
    display: flex !important;
    align-items: center !important;
    height: 38px !important;
    width: 126px !important;
    color: #1d2129 !important;
    gap: 8px !important;
    &-color {
        background-color: rgba(182, 221, 241, 0.48) !important;
        color: #1a6fb8 !important;
    }
}

.source-icon {
    cursor: pointer;