提交

liuwh

2024-09-17 74960e7d4f3042fb9e0ec54af823a360d4aa2bbe

提交

 gz-customerSystem/src/api/appUrl.js

@@ -2,15 +2,15 @@
 * @Company: hugeInfo
 * @Author: ldh
 * @Date: 2022-02-16 11:25:57
 * @LastEditTime: 2024-09-14 15:43:38
 * @LastEditTime: 2024-09-15 10:34:45
 * @LastEditors: lwh
 * @Version: 1.0.0
 * @Description: api地址
 */
export const debug = {
  // web服务
  // baseUrl: 'http://gz.hugeinfo.com.cn',
  baseUrl: "http://4gg4nv.natappfree.cc",
  baseUrl: 'http://gz.hugeinfo.com.cn',
  // baseUrl: "http://4gg4nv.natappfree.cc",
  // baseUrl: 'http://mdqgnh.natappfree.cc',

  // 附件服务

 gz-customerSystem/src/assets/images/disputeLedger_1.png

 gz-customerSystem/src/assets/images/disputeLedger_2.png

 gz-customerSystem/src/assets/images/disputeLedger_3.png

 gz-customerSystem/src/assets/images/disputeLedger_4.png

 gz-customerSystem/src/assets/images/disputeLedger_5.png

 gz-customerSystem/src/assets/images/disputeLedger_6.png

 gz-customerSystem/src/assets/images/disputeLedger_7.png

 gz-customerSystem/src/assets/images/index.js

@@ -2,147 +2,179 @@
 * @Company: hugeInfo
 * @Author: lwh
 * @Date: 2023-04-24 16:12:00
 * @LastEditTime: 2024-09-11 09:44:38
 * @LastEditors: dminyi 1301963064@qq.com
 * @LastEditTime: 2024-09-17 12:30:42
 * @LastEditors: lwh
 * @Version: 1.0.0
 * @Description:
 */
import ledger_1 from "./ledger_1.png";
import ledger_2 from "./ledger_2.png";
import ledger_3 from "./ledger_3.png";
import ledger_4 from "./ledger_4.png";
import ledger_5 from "./ledger_5.png";
import ledger_6 from "./ledger_6.png";
import ledger_7 from "./ledger_7.png";
import ledger_8 from "./ledger_8.png";
import ledger_9 from "./ledger_9.svg";
import ledger_10 from "./ledger_10.png";
import ledger_11 from "./ledger_11.png";
import ledger_12 from "./ledger_12.png";
import ledger_13 from "./ledger_13.png";
import mediateBigData_1 from "./mediateBigData_1.png";
import mediateBigData_2 from "./mediateBigData_2.png";
import mediateBigData_3 from "./mediateBigData_3.png";
import mediateBigData_4 from "./mediateBigData_4.png";
import mediateBigData_5 from "./mediateBigData_5.png";
import mediateBigData_6 from "./mediateBigData_6.png";
import mediateBigData_7 from "./mediateBigData_7.png";
import mediateBigData_8 from "./mediateBigData_8.png";
import caseDetail from "./caseDetail.png";
import caseDetailResult from "./caseDetailResult.png";
import process from "./process.png";
import add from "./add.png";
import del from "./del.png";
import question from "./question.png";
import question1 from "./question1.png";
import person from "./person.png";
import link from "./link.png";
import check from "./check.png";
import image from "./image.png";
import applyMaterials from "./applyMaterials.png";
import applyMaterials_active from "./applyMaterials_active.png";
import evidenceMaterials from "./evidenceMaterials.png";
import evidenceMaterials_active from "./evidenceMaterials_active.png";
import closeIcon from "./closeIcon.png";
import backgroundImage from "./backgroundImage.jpg";
import logo1 from "./logo1.png";
import register from "./register.png";
import Matter from "./matter.png";
import transfer from "./transfer.png";
import empty from "./empty.png";
import feedback from "./feedback.png";
import fold from "./fold.png";
import down from "./down.png";
import tip from "./tip.png";
import apply from "./apply.png";
import examine from "./examine.png";
import knock from "./knock.png";
import edit from "./edit.png";
import applyRecord from "./applyRecord.png";
import downO from "./downO.png";
import up from "./up.png";
import Audit from "./Audit.png";
import aiPerson from "./aiPerson.png";
import caselogo from "./caselogo.png";
import tab1 from "./tab1.png";
import tab2 from "./tab2.png";
import tab3 from "./tab3.png";
import tab4 from "./tab4.png";
import tab5 from "./tab5.png";
import tab6 from "./tab6.png";
import visitInto from "./visitInto.png";
import checkInto from "./checkInto.png";
import floating from "./floating.png";
import Aimge from "./Aimge.png";
import yewu from "./yewu.png";
import ledger_1 from './ledger_1.png';
import ledger_2 from './ledger_2.png';
import ledger_3 from './ledger_3.png';
import ledger_4 from './ledger_4.png';
import ledger_5 from './ledger_5.png';
import ledger_6 from './ledger_6.png';
import ledger_7 from './ledger_7.png';
import ledger_8 from './ledger_8.png';
import ledger_9 from './ledger_9.svg';
import ledger_10 from './ledger_10.png';
import ledger_11 from './ledger_11.png';
import ledger_12 from './ledger_12.png';
import ledger_13 from './ledger_13.png';
import mediateBigData_1 from './mediateBigData_1.png';
import mediateBigData_2 from './mediateBigData_2.png';
import mediateBigData_3 from './mediateBigData_3.png';
import mediateBigData_4 from './mediateBigData_4.png';
import mediateBigData_5 from './mediateBigData_5.png';
import mediateBigData_6 from './mediateBigData_6.png';
import mediateBigData_7 from './mediateBigData_7.png';
import mediateBigData_8 from './mediateBigData_8.png';
import caseDetail from './caseDetail.png';
import caseDetailResult from './caseDetailResult.png';
import process from './process.png';
import add from './add.png';
import del from './del.png';
import question from './question.png';
import question1 from './question1.png';
import person from './person.png';
import link from './link.png';
import check from './check.png';
import image from './image.png';
import applyMaterials from './applyMaterials.png';
import applyMaterials_active from './applyMaterials_active.png';
import evidenceMaterials from './evidenceMaterials.png';
import evidenceMaterials_active from './evidenceMaterials_active.png';
import closeIcon from './closeIcon.png';
import backgroundImage from './backgroundImage.jpg';
import logo1 from './logo1.png';
import register from './register.png';
import Matter from './matter.png';
import transfer from './transfer.png';
import empty from './empty.png';
import feedback from './feedback.png';
import fold from './fold.png';
import down from './down.png';
import tip from './tip.png';
import apply from './apply.png';
import examine from './examine.png';
import knock from './knock.png';
import edit from './edit.png';
import applyRecord from './applyRecord.png';
import downO from './downO.png';
import up from './up.png';
import Audit from './Audit.png';
import aiPerson from './aiPerson.png';
import caselogo from './caselogo.png';
import tab1 from './tab1.png';
import tab2 from './tab2.png';
import tab3 from './tab3.png';
import tab4 from './tab4.png';
import tab5 from './tab5.png';
import tab6 from './tab6.png';
import visitInto from './visitInto.png';
import checkInto from './checkInto.png';
import floating from './floating.png';
import Aimge from './Aimge.png';
import yewu from './yewu.png';
import disputeLedger_1 from './disputeLedger_1.png';
import disputeLedger_2 from './disputeLedger_2.png';
import disputeLedger_3 from './disputeLedger_3.png';
import disputeLedger_4 from './disputeLedger_4.png';
import disputeLedger_5 from './disputeLedger_5.png';
import disputeLedger_6 from './disputeLedger_6.png';
import disputeLedger_7 from './disputeLedger_7.png';
import workDash_1 from './workDash_1.png';
import workDash_2 from './workDash_2.png';
import workDash_3 from './workDash_3.png';
import workDash_4 from './workDash_4.png';
import workDash_5 from './workDash_5.png';
import workDash_6 from './workDash_6.png';
import workDash_7 from './workDash_7.png';
import workDash_8 from './workDash_8.png';
import workDash_9 from './workDash_9.png';

export {
  ledger_1,
  ledger_2,
  ledger_3,
  ledger_4,
  ledger_5,
  ledger_6,
  ledger_7,
  ledger_8,
  ledger_9,
  ledger_10,
  ledger_11,
  ledger_12,
  ledger_13,
  mediateBigData_1,
  mediateBigData_2,
  mediateBigData_3,
  mediateBigData_4,
  mediateBigData_5,
  mediateBigData_6,
  mediateBigData_7,
  mediateBigData_8,
  caseDetail,
  caseDetailResult,
  process,
  add,
  del,
  question,
  question1,
  person,
  link,
  check,
  image,
  applyMaterials,
  applyMaterials_active,
  evidenceMaterials,
  evidenceMaterials_active,
  closeIcon,
  backgroundImage,
  logo1,
  register,
  Matter,
  transfer,
  empty,
  feedback,
  fold,
  down,
  tip,
  apply,
  examine,
  knock,
  edit,
  applyRecord,
  downO,
  up,
  Audit,
  aiPerson,
  caselogo,
  tab1,
  tab2,
  tab3,
  tab4,
  tab5,
  tab6,
  visitInto,
  checkInto,
  floating,
  Aimge,
  yewu
};
    ledger_1,
    ledger_2,
    ledger_3,
    ledger_4,
    ledger_5,
    ledger_6,
    ledger_7,
    ledger_8,
    ledger_9,
    ledger_10,
    ledger_11,
    ledger_12,
    ledger_13,
    mediateBigData_1,
    mediateBigData_2,
    mediateBigData_3,
    mediateBigData_4,
    mediateBigData_5,
    mediateBigData_6,
    mediateBigData_7,
    mediateBigData_8,
    caseDetail,
    caseDetailResult,
    process,
    add,
    del,
    question,
    question1,
    person,
    link,
    check,
    image,
    applyMaterials,
    applyMaterials_active,
    evidenceMaterials,
    evidenceMaterials_active,
    closeIcon,
    backgroundImage,
    logo1,
    register,
    Matter,
    transfer,
    empty,
    feedback,
    fold,
    down,
    tip,
    apply,
    examine,
    knock,
    edit,
    applyRecord,
    downO,
    up,
    Audit,
    aiPerson,
    caselogo,
    tab1,
    tab2,
    tab3,
    tab4,
    tab5,
    tab6,
    visitInto,
    checkInto,
    floating,
    Aimge,
    yewu,
    disputeLedger_1,
    disputeLedger_2,
    disputeLedger_3,
    disputeLedger_4,
    disputeLedger_5,
    disputeLedger_6,
    disputeLedger_7,
    workDash_1,
    workDash_2,
    workDash_3,
    workDash_4,
    workDash_5,
    workDash_6,
    workDash_7,
    workDash_8,
    workDash_9,
};

 gz-customerSystem/src/assets/images/workDash_1.png

 gz-customerSystem/src/assets/images/workDash_2.png

 gz-customerSystem/src/assets/images/workDash_3.png

 gz-customerSystem/src/assets/images/workDash_4.png

 gz-customerSystem/src/assets/images/workDash_5.png

 gz-customerSystem/src/assets/images/workDash_6.png

 gz-customerSystem/src/assets/images/workDash_7.png

 gz-customerSystem/src/assets/images/workDash_8.png

 gz-customerSystem/src/assets/images/workDash_9.png

 gz-customerSystem/src/components/NewTableSearch/index.jsx

@@ -18,7 +18,7 @@
 * handleSearch, // 搜索
 * exportButton //导出按钮
 */
const NewTableSearch = ({ form, itemData, labelLength = 5, rowNum = 3, handleReset, handleSearch, exportButton }) => {
const NewTableSearch = ({ form, itemData, labelLength = 5, rowNum = 3, handleReset, handleSearch, exportButtonShow = true, exportButton }) => {
  const [searchMore, setSearchMore] = useState(false);

  const span = 24 / rowNum;
@@ -60,80 +60,91 @@

  return (
    <Form form={form} labelAlign="right" className="tableSearch">

      {itemData.map((x, t) => {
        let placeholder = x.placeholder || setPlaceholder(x.name, x.type);
        let allowClear = x.allowClear || true;
        let dom = null;
        let rules = {};
        if (x.type === 'Input') {
          dom = <Input placeholder={placeholder} allowClear {...x} />;
          rules = { max: x.max || 32, message: '搜索内容过长' };
        }
        if (x.type === 'Select') {
          dom = (
            <Select allowClear placeholder={placeholder} {...x}>
              {x.selectdata?.map((y) => (
                <Option key={y.value}>{y.label}</Option>
              ))}
            </Select>
          );
        }
        if (x.type === 'RangePicker') {
          rules = { type: 'array' };
          dom = (
            <RangePicker
              style={{ width: '100%' }}
              ranges={{
                '今日': [$$.myMoment(), $$.myMoment()],
                '本月': [$$.myMoment().startOf('month'), $$.myMoment().endOf('month')],
              }}
              allowClear
              {...x}
            />
          );
        }
        if (x.type === 'TreeSelect') {
          dom = (
            <TreeSelect
              showSearch
              placeholder={placeholder}
              dropdownStyle={{ maxHeight: 500, overflow: 'auto' }}
              treeData={x.treedata}
              treeDefaultExpandAll
              allowClear
              filterTreeNode={(inputValue, treeNode) => (treeNode.label.indexOf(inputValue) !== -1 ? true : false)}
              {...x}
            />
          );
        }
        return (
          <Row className='tableSearch-searchMore-row' gutter={[24, 16]} style={display && { display: searchMore ? 'block' : t < lineNum ? 'block' : 'none' }}>
            <Col span={x.span || 8} key={t + 1}>
              <Form.Item name={x.name} rules={[rules]} label={<div style={{ width: `${fontSize * labelLength}px` }}>{x.label}</div>}>
                {dom}
              </Form.Item>
      <Row className='tableSearch-searchMore-row' gutter={[24, 16]} >
        {itemData.map((x, t) => {
          let placeholder = x.placeholder || setPlaceholder(x.name, x.type);
          let allowClear = x.allowClear || true;
          let dom = null;
          let rules = {};
          if (x.type === 'Input') {
            dom = <Input placeholder={placeholder} allowClear {...x} />;
            rules = { max: x.max || 32, message: '搜索内容过长' };
          }
          if (x.type === 'Select') {
            dom = (
              <Select allowClear placeholder={placeholder} {...x}>
                {x.selectdata?.map((y) => (
                  <Option key={y.value}>{y.label}</Option>
                ))}
              </Select>
            );
          }
          if (x.type === 'RangePicker') {
            rules = { type: 'array' };
            dom = (
              <RangePicker
                style={{ width: '100%' }}
                ranges={{
                  '今日': [$$.myMoment(), $$.myMoment()],
                  '本月': [$$.myMoment().startOf('month'), $$.myMoment().endOf('month')],
                }}
                allowClear
                {...x}
              />
            );
          }
          if (x.type === 'TreeSelect') {
            dom = (
              <TreeSelect
                showSearch
                placeholder={placeholder}
                dropdownStyle={{ maxHeight: 500, overflow: 'auto' }}
                treeData={x.treedata}
                treeDefaultExpandAll
                allowClear
                filterTreeNode={(inputValue, treeNode) => (treeNode.label.indexOf(inputValue) !== -1 ? true : false)}
                {...x}
              />
            );
          }
          if (x.type === 'null') {
            dom = (
              <Col span={x.span || 8}></Col>
            );
          }
          return (
            <Col span={x.span || 8} style={display && { display: searchMore ? 'block' : t < lineNum ? 'block' : 'none' }} key={t + 1}>
              {
                x.type === 'null' ? <>{ dom }</> :
                  <Form.Item name={x.name} rules={[rules]} label={<div style={{ width: `${fontSize * labelLength}px` }}>{x.label}</div>}>
                    {dom}
                  </Form.Item>
              }
            </Col>
          </Row>
          // <div>
          //   <Col span={8} style={display && { display: searchMore ? 'block' : t < lineNum ? 'block' : 'none' }} key={t + 1}>
          //     <Form.Item name={x.name} rules={[rules]} label={<div style={{ width: `${fontSize * labelLength}px` }}>{x.label}</div>}>
          //       {dom}
          //     </Form.Item>
          //   </Col>
          //   <Col span={8}></Col>
          //   <Col span={8}></Col>
          // </div>
        );
      })}
            // <div>
            //   <Col span={8} style={display && { display: searchMore ? 'block' : t < lineNum ? 'block' : 'none' }} key={t + 1}>
            //     <Form.Item name={x.name} rules={[rules]} label={<div style={{ width: `${fontSize * labelLength}px` }}>{x.label}</div>}>
            //       {dom}
            //     </Form.Item>
            //   </Col>
            //   <Col span={8}></Col>
            //   <Col span={8}></Col>
            // </div>
          );
        })}
      </Row>
      <div className='NewTableSearch-border'></div>
      <Row style={{ marginTop: '16px' }}>
        <Col span={24} style={{ textAlign: 'left' }}>
          <Button className="public-buttonMargin" type="primary" htmlType="submit" icon={<SearchOutlined />} onClick={handleSearch}>
            查询
          </Button>
          <Button className="public-buttonMargin" type="primary" ghost htmlType="submit" onClick={exportButton}>
            导出查询结果
          </Button>
          {
            exportButtonShow &&
            <Button className="public-buttonMargin" type="primary" ghost htmlType="submit" onClick={exportButton}>
              导出查询结果
            </Button>
          }
          <Button onClick={handleReset}>
            重置条件
          </Button>

 gz-customerSystem/src/components/NewTableSearch/index.less

@@ -17,3 +17,8 @@
    margin-bottom: 16px;
  }
}

.NewTableSearch-border {
  margin: 12px 0;
  border-bottom: 1px solid #E5E6EB;
}

 gz-customerSystem/src/router/router.js

@@ -2,7 +2,7 @@
 * @Company: hugeInfo
 * @Author: ldh
 * @Date: 2022-03-28 11:22:41
 * @LastEditTime: 2024-09-14 16:09:40
 * @LastEditTime: 2024-09-17 10:42:26
 * @LastEditors: lwh
 * @Version: 1.0.0
 * @Description: 路由
@@ -130,6 +130,7 @@
import Comprehensive from '../views/comprehensive';
// 纠纷台账
import DisputeLedger from '../views/disputeLedger';
import WorkDash from '../views/workDash';

// 数据分析
import DataSearch from '../views/statistic/dataSearch';
@@ -235,6 +236,8 @@
                        <Route path="comprehensive" element={<Comprehensive />} />
            {/* 纠纷台账 */}
                        <Route path="account" element={<DisputeLedger />} />
            {/* 解纷态势 */}
                        <Route path="workDash" element={<WorkDash />} />
                        {/* 数据分析 */}
                        <Route path="dataSearch" element={<DataSearch />} />
                        {/* 调解视窗成功页 */}

 gz-customerSystem/src/utils/utility.js

@@ -2,8 +2,8 @@
 * @Company: hugeInfo
 * @Author: ldh
 * @Date: 2022-02-16 11:57:54
 * @LastEditTime: 2024-09-12 10:55:38
 * @LastEditors: dminyi 1301963064@qq.com
 * @LastEditTime: 2024-09-15 10:36:03
 * @LastEditors: lwh
 * @Version: 1.0.0
 * @Description: 公共模块方法
 */
@@ -15,7 +15,7 @@
import moment from 'moment';
import { pdf, jpg, file, word, excel } from '../assets/images/icon';

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

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


 gz-customerSystem/src/views/comprehensive/index.jsx

@@ -5,7 +5,7 @@
import { FolderFilled } from '@ant-design/icons';
import * as $$ from '../../utils/utility';
import { useLocation, useNavigate } from 'react-router-dom';
import TableView from '../../components/TableView';
import TableView from '../../components/TableViewCanSort';
import NewTableSearch from '../../components/NewTableSearch';
import MyTabs from '../../components/MyTabs';
import './index.less'
@@ -42,9 +42,9 @@
  // 表头
  const columns = () => {
    const columnsData = [
      { title: '事项状态', width: 80, dataIndex: 'statusName' },
      { title: '事项来源', width: 80, dataIndex: 'canalName' },
      { title: '事项等级', width: 80, dataIndex: 'caseLevel' },
      { title: '事项状态', width: 100, dataIndex: 'statusName' },
      { title: '事项来源', width: 100, dataIndex: 'canalName' },
      { title: '事项等级', width: 100, dataIndex: 'caseLevel' },
      { title: '纠纷类型', width: 150, dataIndex: 'caseTypeName' },
      { title: '承办部门', width: 150, dataIndex: 'mediateDeptName' },
      { title: '配合部门', width: 150, dataIndex: 'assistUnitName' },
@@ -171,8 +171,8 @@
    if (res.type) {
      setSearch(submitData);
      setData({
        total: res.data?.totalElements,
        tableData: res.data?.content || [],
        total: 0,
        tableData: [],
      });
    }
  }
@@ -205,7 +205,11 @@
            form={form}
            itemData={[
              { type: 'RangePicker', name: 'acceptTime', label: '办结时间', span: 8 },
              { type: 'null'},
              { type: 'null'},
              { type: 'RangePicker', name: 'acceptTime', label: '归档时间', span: 8 },
              { type: 'null'},
              { type: 'null'},
              {
                type: 'Select',
                name: 'joinRole',
@@ -216,46 +220,62 @@
                  { label: '我协助的', value: '2' },
                ],
              },
              {
                type: 'Select',
                name: 'joinRole',
                label: '承办部门',
                selectdata: [
                  { label: '我负责的', value: '1' },
                  { label: '我协助的', value: '2' },
                ],
              },
              {
                type: 'Select',
                name: 'joinRole',
                label: '登记机构',
                selectdata: [
                  { label: '我负责的', value: '1' },
                  { label: '我协助的', value: '2' },
                ],
              },
              { type: 'Input', name: 'defendants', label: '被申请人' },
              { type: 'Input', name: 'caseNo', label: '调解案号' },
              // {
              //   type: 'Select',
              //   name: 'joinRole',
              //   label: '承办部门',
              //   selectdata: [
              //     { label: '我负责的', value: '1' },
              //     { label: '我协助的', value: '2' },
              //   ],
              // },
              // {
              //   type: 'Select',
              //   name: 'joinRole',
              //   label: '登记机构',
              //   selectdata: [
              //     { label: '我负责的', value: '1' },
              //     { label: '我协助的', value: '2' },
              //   ],
              // },
              // { type: 'Input', name: 'defendants', label: '被申请人' },
              // { type: 'Input', name: 'caseNo', label: '调解案号' },
            ]}
            handleReset={() => handleSearch('reset')}
            handleSearch={() => handleSearch('search')}
          />
        </div>

        <div style={{ marginTop: '8px' }} className="pageTable">
          <TableView
            showHeader
            title="查询结果"
            columns={columns()}
            dataSource={data.tableData}
            pagination={{
              current: search.page,
              pageSize: search.size,
              total: data.total,
              onChange: (page, pageSize) => handleChangePage(page, pageSize),
            }}
            rowClassName={(record) => (record.id === data.tableActive ? 'tableRowActive' : '')}
          />
        <div style={{ marginTop: '8px' }} className="comprehensive-table">
          {
            data.tableData?.length > 0 ?
              <TableView
                showHeader
                title="查询结果"
                columns={columns()}
                dataSource={data.tableData}
                pagination={{
                  current: search.page,
                  pageSize: search.size,
                  total: data.total,
                  onChange: (page, pageSize) => handleChangePage(page, pageSize),
                }}
                rowClassName={(record) => (record.id === data.tableActive ? 'tableRowActive' : '')}
              /> :
              <TableView
                showHeader
                title="查询结果"
                columns={columns()}
                dataSource={data.tableData}
                pagination={{
                  current: search.page,
                  pageSize: search.size,
                  total: data.total,
                  onChange: (page, pageSize) => handleChangePage(page, pageSize),
                }}
                rowClassName={(record) => (record.id === data.tableActive ? 'tableRowActive' : '')}
              />
          }
        </div>
      </div>
    </NewPage>

 gz-customerSystem/src/views/comprehensive/index.less

@@ -1,5 +1,7 @@
.comprehensive {
    position: relative;
    display: flex;
  flex-direction: column;
  height: calc(100% - 68px);
    margin: 0 16px;
    &-title {
        // margin: 0 16px;
@@ -14,4 +16,10 @@
    &-red {
        color: #f53f3f;
    }
  &-table {
    background-color: #ffffff;
    padding: 16px;
    flex: 1;
    margin-bottom: 16px;
  }
}

 gz-customerSystem/src/views/disputeLedger/index.jsx

@@ -2,16 +2,20 @@
 * @Company: hugeInfo
 * @Author: lwh
 * @Date: 2024-09-14 15:59:17
 * @LastEditTime: 2024-09-14 16:03:34
 * @LastEditTime: 2024-09-17 17:12:37
 * @LastEditors: lwh
 * @Version: 1.0.0
 * @Description: 
 */
import React, { useState, useEffect, useMemo } from 'react';
import React, { useState, useEffect, useRef, useMemo } from 'react';
import * as $$ from '../../utils/utility';
import { Form, Typography, Button, Space } from 'antd';
import { Form, Typography, Row, Col, Space } from 'antd';
import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
import { disputeLedger_1, disputeLedger_2, disputeLedger_3, disputeLedger_4, disputeLedger_5, disputeLedger_6, disputeLedger_7 } from '../../assets/images';
import NewPage from '../../components/NewPage/index';
import * as echarts from 'echarts';
import NewTableSearch from '../../components/NewTableSearch';
import './index.less'

const { Link } = Typography;

@@ -26,14 +30,443 @@
}

const DisputeLedger = () => {
  const [form] = Form.useForm();
  // 数据汇总选择
  const [activeKey, setActiveKey] = useState(0)
  const [tabsData, setTabsData] = useState([
    { icon: disputeLedger_1, title: '全部', value: '5032', active: true },
    { icon: disputeLedger_2, title: '综治中心', value: '1022', per: '20.3%' },
    { icon: disputeLedger_3, title: '12345', value: '1006', per: '19.8%' },
    { icon: disputeLedger_4, title: '人民调解', value: '2201', per: '40.3%' },
    { icon: disputeLedger_5, title: '信访', value: '221', per: '4.2%' },
    { icon: disputeLedger_6, title: '劳动仲裁', value: '98', per: '1.8%' },
    { icon: disputeLedger_7, title: '非警务纠纷', value: '432', per: '8.3%' },
  ]);

  // 搜索 or 重置
  function handleSearch(type, session) {

  }

  return (
    <NewPage
      pageHead={
        { breadcrumbData: [{ title: '工作台' }, { title: '纠纷台账' }], title: '纠纷台账' }
      }
    ></NewPage>
    <NewPage pageHead={{ breadcrumbData: [{ title: '工作台' }, { title: '纠纷台账' }], title: '纠纷台账' }}>
      <div className='comprehensive'>
        <div className="pageSearch">
          <div className='comprehensive-title'>查询条件</div>
          <NewTableSearch
            exportButtonShow={false}
            labelLength={6}
            rowNum={4.5}
            form={form}
            itemData={[
              { type: 'TreeSelect', name: 'mediateUnitId', label: '区域', placeholder: '请选择', treedata: [] },
              { type: 'RangePicker', name: 'createTime', label: '登记时间', span: 8 },
              { type: 'RangePicker', name: 'endTime', label: '办结时间', span: 8 },
              {
                type: 'Select',
                name: 'name1',
                label: '纠纷类型',
                span: 8,
                selectdata: [
                  { label: '全部', value: '1' },
                  { label: '市场监管', value: '2' },
                  { label: '劳动社保', value: '3' },
                  { label: '城市管理', value: '4' },
                  { label: '交通运输', value: '5' },
                  { label: '教育医疗', value: '6' },
                  { label: '公共服务', value: '7' },
                ],
              },
              {
                type: 'Select',
                name: 'name2',
                label: '化解状况',
                span: 8,
                selectdata: [
                  { label: '全部', value: '1' },
                  { label: '化解中', value: '2' },
                  { label: '化解成功', value: '3' },
                  { label: '化解不成功', value: '4' },
                ],
              },
              {
                type: 'Select',
                name: 'name3',
                label: '重大矛盾纠纷',
                span: 8,
                selectdata: [
                  { label: '不限', value: '1' },
                ],
              },
              {
                type: 'Select',
                name: 'name4',
                label: '重点人员',
                span: 8,
                selectdata: [
                  { label: '不限', value: '1' },
                ],
              },
            ]}
            handleReset={() => handleSearch('reset')}
            handleSearch={() => handleSearch('search')}
          />
        </div>
        <div className='disputeLedger-row'>
          <div className='comprehensive-title'>数据汇总</div>
          <div className='disputeLedger-d'>
            {
              tabsData.map((item, index) => (
                <div onClick={() => setActiveKey(index)} className={`disputeLedger-card ${activeKey === index ? 'disputeLedger-card-active' : ''}`} span={3.4} key={index}>
                  <div >
                    <div className='disputeLedger-card-content'>
                      <div className={`disputeLedger-card-content-t ${activeKey === index ? 'disputeLedger-card-content-t-active' : ''}`}>{item.title}</div>
                      <div><span className='disputeLedger-card-title'>{item.value}</span> <span className='disputeLedger-unit'>件</span> {item.per && < span className='disputeLedger-unit'>| {item.per}</span>}</div>
                    </div>
                    {activeKey === index && <img src={item.icon} alt="" />}
                  </div>
                </div>
              ))
            }
          </div>
        </div>

        {/* 图表 */}
        <div className='disputeLedger-green'>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginBottom: '12px' }}>
            <Space className='big-green-main-space' direction='vertical'>
              <div style={{ margin: '0 12px' }}>
                <div className='disputeLedger-green-title'>纠纷类型（全部）</div>
                <div style={{ paddingBottom: '12px' }}>
                  <MyLTopChartPie data={
                    [
                      { value: 22, name: '市场监管' },
                      { value: 28, name: '劳动社保' },
                      { value: 15, name: '城市管理' },
                      { value: 10, name: '交通运输' },
                      { value: 5, name: '教育医疗' },
                      { value: 20, name: '公共服务' },
                    ]
                  } />
                </div>
              </div>
            </Space>
            <Space style={{ position: 'relative' }} className='big-green-main-space' direction='vertical'>
              <div style={{ margin: '0 12px' }}>
                <div className='disputeLedger-green-title'>化解状况（全部）</div>
                <div style={{ paddingBottom: '12px' }}>
                  <MyLTopChartPie1 data={
                    [
                      { value: 90, name: '小学' },
                      { value: 200, name: '初中' },
                      { value: 100, name: '高中' },
                      { value: 300, name: '大学本科' },
                      { value: 200, name: '硕士' },
                      { value: 100, name: '其他' },
                    ]
                  } />
                </div>
              </div>
            </Space>
          </div>
          <Space style={{ flex: '1', marginBottom: '12px' }} className='big-green-main-space' direction='vertical'>
            <div className='big-green-main-title-display'>
              <div className='disputeLedger-green-title'>数据统计（全部）</div>
            </div>
            <div style={{ width: '100%', height: '200px', marginTop: '12px' }}>
              <MyChartBar data={[220, 5211, 2500, 3152, 8362, 26220, 8442, 2600, 1850, 1302, 850, 1048]} dataAxis={['本级', '越秀区', '海珠区', '荔湾区', '天河区', '白云区', '黄埔区', '花都区', '番禺区', '南沙区', '从化区', '增城区']} />

            </div>
          </Space>
        </div>
      </div >
    </NewPage >
  )
}

export default DisputeLedger;
export default DisputeLedger;

// 柱状图
const MyChartBar = ({ data, dataAxis }) => {
  const myChartRef = useRef();
  // 图表
  const [myChart, setMyChart] = useState();


  // 加载图表数据
  useEffect(() => {
    var myChart = echarts.init(document.getElementById('chartBar'), 'dark');
    // let data = [123, 98, 245, 234, 356, 148];
    // let dataAxis = ['低收入家庭', '单亲家庭', '流动家庭', '犯罪家庭', '无家庭', '其他']

    // 绘制图表
    myChart.setOption({
      backgroundColor: '#fff',
      grid: {
        x: 10,
        y: 20,
        x2: 20,
        y2: 0,
        containLabel: true,
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'none'
        },
        formatter: function (params) {
          return params[0].name + ': ' + params[0].value + '人';
        }
      },
      xAxis: [{
        type: 'category',
        // boundaryGap: false,
        data: dataAxis,

        axisLabel: {
          interval: dataAxis?.length > 15 ? 1 : 0,
          formatter: function (value) {
            // 如果标签长度超过4，将剩余的文字替换为省略号
            if (value.length > 4) {
              return value.slice(0, 4) + '...';
            } else {
              return value;
            }
          }
        },
      }],
      yAxis: {
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: '#ccc'
          }
        },

      },
      dataZoom: [
        {
          type: 'inside'
        }
      ],
      series: [
        {
          type: 'bar',
          name: 'bar1',
          stack: 'one',
          showBackground: false,
          barWidth: 28, // 柱子宽度
          itemStyle: {
            color: '#3788C5'
          },
          label: {
            show: true,
            position: 'top',
            valueAnimation: false
          },
          emphasis: {
            itemStyle: {
              opacity: 0.7
            }
          },
          data: data
        },
      ]
    });
  }, [data]);

  useEffect(() => {
    // if (myChart && myChartRef.current.clientHeight !== 0) {
    //   myChart.forceFit();
    // }
  });

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

const MyLTopChartPie = ({ data }) => {
  const myChartRef = useRef();
  // 图表
  const [myChart, setMyChart] = useState();

  // 加载图表数据
  useEffect(() => {
    var myChart = echarts.init(document.getElementById('chartLTopPie'), 'dark');

    // 绘制图表
    myChart.setOption({
      backgroundColor: '#fff',
      grid: {
        x: 5,
        y: 12,
        x2: 20,
        y2: 0,
      },
      legend: {
        orient: 'vertical', // 垂直排列
        top: 'center',
        right: 10,
        data: [
          {
            name: '市场监管',
            icon: 'circle', // 图例标记的形状
          },
          {
            name: '劳动社保',
            icon: 'circle',
          },
          {
            name: '城市管理',
            icon: 'circle',
          },
          {
            name: '交通运输',
            icon: 'circle',
          },
          {
            name: '教育医疗',
            icon: 'circle',
          },
          {
            name: '公共服务',
            icon: 'circle',
          }
          // ... 其他数据
        ]
      },
      series: [
        {
          name: '纠纷类型',
          type: 'pie',
          radius: '90%',
          center: ['30%', '50%'],
          color: ['#FCE996', '#FFCF8B', '#86E8DD', '#FDCDC5', '#C396ED', '#9FD4FD'],
          labelLine: { // 关闭引导线
            show: false
          },
          label: {
            show: true,
            position: 'inside', // 设置文字在扇形区域内
            formatter: '{d}%', // 标签文本格式器
            rich: {
              a: {
                lineHeight: 25,
                align: 'center'
              },
              b: {
                lineHeight: 25,
                align: 'center'
              },
              c: {
                lineHeight: 25,
                align: 'center'
              },
              d: {
                lineHeight: 25,
                align: 'center'
              },
              e: {
                lineHeight: 25,
                align: 'center'
              },
              f: {
                lineHeight: 25,
                align: 'center'
              }
            },
            // normal: {
            //   show: false,
            // },
          },
          data: data
        },
      ]
    });
  }, [data]);


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

const MyLTopChartPie1 = ({ data }) => {
  const myChartRef = useRef();
  // 图表
  const [myChart, setMyChart] = useState();


  // 加载图表数据
  useEffect(() => {
    var myChart = echarts.init(document.getElementById('chartLTopPie1'), 'dark');
    // let data = [123, 98, 245, 234, 356, 148];
    // let dataAxis = ['低收入家庭', '单亲家庭', '流动家庭', '犯罪家庭', '无家庭', '其他']

    // 绘制图表
    myChart.setOption({
      backgroundColor: '#fff',
      grid: {
        x: 5,
        y: 12,
        x2: 20,
        y2: 0,
        containLabel: true,
      },
      legend: {
        orient: 'vertical', // 垂直排列
        top: 'center',
        right: 10,
        data: [
          {
            name: '化解中',
            icon: 'circle', // 图例标记的形状
          },
          {
            name: '化解成功',
            icon: 'circle',
          },
          {
            name: '化解不成功',
            icon: 'circle',
          },

        ]
      },
      series: [
        {
          name: '化解状况',
          type: 'pie',
          radius: ['60%', '90%'], // 设置饼图的内半径和外半径，实现扇形区域
          center: ['30%', '50%'],
          color: ['#B6DDF1', '#3A8AC6', '#094282'],
          data: [
            { value: 24, name: '化解中' },
            { value: 30, name: '化解成功' },
            { value: 46, name: '化解不成功' },
          ],
          label: {
            show: true,
            position: 'inside', // 设置文字在扇形区域内
            formatter: '{d}%', // 标签文本格式器
            rich: {
              a: {
                lineHeight: 25,
                align: 'center'
              },
              b: {
                lineHeight: 25,
                align: 'center'
              },
            }
          }
        }
      ]
    });
  }, [data]);

  useEffect(() => {
    // if (myChart && myChartRef.current.clientHeight !== 0) {
    //   myChart.forceFit();
    // }
  });

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

 gz-customerSystem/src/views/disputeLedger/index.less

@@ -0,0 +1,112 @@
.disputeLedger {
    &-row {
        margin-top: 12px;
        background-color: #fff;
        padding: 12px 16px 16px 16px;
    }
    &-d {
        display: flex;
        gap: 24px;
        align-items: center;
        justify-content: space-between;
    }
    &-card {
        position: relative;
        flex: 1;
        // width: 167px;
        height: 75px;
        background: #f2f3f5;
        border: 0.5px solid #e5e6eb;
        border-radius: 4px;
        & img {
            width: 40px;
            position: absolute;
            right: 0;
            top: 14px;
        }
        &-active {
            background: #e8f8ff;
            border: 1px solid #b6ddf1;
        }
        &-content {
            padding: 12px 16px;
            &-t {
                margin-bottom: 4px;
                &-active {
                    color: #1a6fb8;
                }
            }
        }
        &-title {
            font-size: 18px;
            line-height: 26px;
        }
    }
    &-title {
        font-size: 14px;
        color: #1d2129;
    }
    &-unit {
        color: #86909c;
        font-size: 12px;
        line-height: 20px;
    }
    &-green {
        margin: 12px 0;
    display: flex;
    gap: 12px;
        &-title {
            font-size: 16px;
            padding: 12px 16px;
            color: rgba(0, 0, 0, 0.85);
        }
    }
}

.big-green {
    &-main {
        &-space {
            width: 389px;
            background-color: #fff;
        }
        &-title {
            background: #105489;
            height: 36px;
            padding: 0 12px 0 8px;
            color: #fff;
            display: flex;
            align-items: center;
            &-t {
                line-height: 30px;
                height: 24px;
                margin-left: 8px;
            }
            &-display {
                display: flex;
                align-items: end;
            }
            &-bias {
                transform: rotate(-45deg);
                height: 1px;
                width: 5px;
                background-color: rgba(255, 255, 255, 0.4);
                position: relative;
                top: -2px;
                left: -1px;
            }
            &-line {
                flex: 1;
                height: 1px;
                // transform: skewX(-45deg);
                background-color: rgba(255, 255, 255, 0.4);
            }

            &-graph {
                background: #ffc97a;
                width: 20px;
                height: 3px;
                transform: skewX(-45deg);
            }
        }
    }
}

 gz-customerSystem/src/views/workDash/index.jsx

New file
@@ -0,0 +1,806 @@
/*
 * @Company: hugeInfo
 * @Author: lwh
 * @Date: 2024-09-14 15:59:17
 * @LastEditTime: 2024-09-17 17:12:08
 * @LastEditors: lwh
 * @Version: 1.0.0
 * @Description: 
 */
import React, { useState, useEffect, useRef, useMemo } from 'react';
import * as $$ from '../../utils/utility';
import { Form, Typography, Row, Col, Space, Divider, Badge } from 'antd';
import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
import { workDash_1, workDash_2, workDash_3, workDash_4, workDash_5, workDash_6, workDash_7, workDash_8, workDash_9, disputeLedger_1, disputeLedger_2, disputeLedger_3, disputeLedger_4, disputeLedger_5, disputeLedger_6, disputeLedger_7 } from '../../assets/images';
import NewPage from '../../components/NewPage/index';
import * as echarts from 'echarts';
import TableView from '../../components/TableViewCanSort';
import NewTableSearch from '../../components/NewTableSearch';
import publicDataStatus from '../../status/publicData';
import './index.less'

const { Link } = Typography;

// 调度中心列表
function getMyMediationDataApi(submitData) {
  return $$.ax.request({ url: 'caseDisp/pageQuery', type: 'get', data: submitData, service: 'disp' });
}

// 获取列表分类tab
function getTabsDataApi() {
  return $$.ax.request({ url: 'caseDisp/getApplyCanal', type: 'get', service: 'disp' });
}

const WorkDash = () => {
  const [form] = Form.useForm();

  // 搜索
  const [search, setSearch] = useState({ page: 1, size: 10, });

  // 数据
  const [data, setData] = useState({
    tableData: [
      { createTime: '2024-09-14 15:59:17', statusName: '已关闭', caseLevel: '一般', caseTypeName: '城市管理', canalName: '综合执法', inputUnitName: '综合执法', assistUnitName: '综合执法', closeTime: '2024-09-14 15:59:17', mediResult: '22_00025-1', plaintiffList: [{ trueName: '张三' }, { trueName: '李四' }], defendantList: [{ trueName: '王五' }] },
      { createTime: '2024-09-14 15:59:17', statusName: '已关闭', caseLevel: '一般', caseTypeName: '城市管理', canalName: '综合执法', inputUnitName: '综合执法', assistUnitName: '综合执法', closeTime: '2024-09-14 15:59:17', mediResult: '22_00025-1', plaintiffList: [{ trueName: '张三' }, { trueName: '李四' }], defendantList: [{ trueName: '王五' }] },
      { createTime: '2024-09-14 15:59:17', statusName: '已关闭', caseLevel: '一般', caseTypeName: '城市管理', canalName: '综合执法', inputUnitName: '综合执法', assistUnitName: '综合执法', closeTime: '2024-09-14 15:59:17', mediResult: '22_00025-1', plaintiffList: [{ trueName: '张三' }, { trueName: '李四' }], defendantList: [{ trueName: '王五' }] },
      { createTime: '2024-09-14 15:59:17', statusName: '已关闭', caseLevel: '一般', caseTypeName: '城市管理', canalName: '综合执法', inputUnitName: '综合执法', assistUnitName: '综合执法', closeTime: '2024-09-14 15:59:17', mediResult: '22_00025-1', plaintiffList: [{ trueName: '张三' }, { trueName: '李四' }], defendantList: [{ trueName: '王五' }] },
      { createTime: '2024-09-14 15:59:17', statusName: '已关闭', caseLevel: '一般', caseTypeName: '城市管理', canalName: '综合执法', inputUnitName: '综合执法', assistUnitName: '综合执法', closeTime: '2024-09-14 15:59:17', mediResult: '22_00025-1', plaintiffList: [{ trueName: '张三' }, { trueName: '李四' }], defendantList: [{ trueName: '王五' }] },
    ]
  });

      // 调解组织select框数据
    const [adjustOrgData, setAdjustOrgData] = useState([]);




  // 搜索 or 重置
  function handleSearch(type, session) {

  }

  // 表头
  const columns = () => {
    const columnsData = [
      { title: '登记时间', width: 150, dataIndex: 'createTime', render: (text) => <span>{$$.dateFormat(text)}</span> },
      { title: '事项状态', width: 100, dataIndex: 'statusName' },
      { title: '事项等级', width: 100, dataIndex: 'caseLevel' },
      { title: '事项类型', width: 150, dataIndex: 'caseTypeName' },
      { title: '问题属地', width: 100, dataIndex: 'canalName' },
      { title: '登记机构', width: 150, dataIndex: 'inputUnitName' },
      { title: '承办部门', width: 100, dataIndex: 'assistUnitName' },
      { title: '办结时间', width: 100, dataIndex: 'closeTime', render: (text) => <span>{$$.dateFormat(text)}</span> },
      // 22_00025-1 成功 22_00025-2 化解不成功
      { title: '化解结果', width: 100, dataIndex: 'mediResult', render: (text) => <div className={text === '22_00025-1' ? 'comprehensive-green' : text === '22_00025-2' ? 'comprehensive-red' : '-'} >{text === '22_00025-1' ? '化解成功' : text === '22_00025-2' ? '化解不成功' : '-'}</div> },
      { title: '申请方', width: 100, dataIndex: 'action', render: (text, record) => <div>{record.plaintiffList?.length > 0 ? record.plaintiffList?.map(i => i.trueName)?.join(',') : '-'}</div> },
      { title: '被申请方', width: 100, dataIndex: 'action', render: (text, record) => <div>{record.defendantList?.length > 0 ? record.defendantList?.map(i => i.trueName)?.join(',') : '-'}</div> },
      {
        title: '操作',
        dataIndex: 'action',
        width: 50,
        render: (_, record) => {
          return <Link onClick={() => handleJump(record)}>详情</Link>;
        },
      },
    ];
    return columnsData;
  };

  // 跳转详情页
  function handleJump(type, info) {

  }

  // 初始化
  useEffect(() => {
    // publicDataStatus.getUnitData((data) => setAdjustOrgData(data));

  }, []);

  return (
    <NewPage pageHead={{ breadcrumbData: [{ title: '工作台' }, { title: '解纷态势' }], title: '解纷态势' }}>
      <div className='comprehensive'>
        <div className="pageSearch">
          <div className='comprehensive-title'>查询条件</div>
          <NewTableSearch
            exportButtonShow={false}
            labelLength={6}
            rowNum={4.5}
            form={form}
            itemData={[
              { type: 'TreeSelect', name: 'mediateUnitId', label: '区域', placeholder: '请选择', treedata: adjustOrgData },
              { type: 'RangePicker', name: 'createTime', label: '登记时间', span: 8 },
              { type: 'RangePicker', name: 'endTime', label: '办结时间', span: 8 },
              {
                type: 'Select',
                name: 'name1',
                label: '纠纷类型',
                span: 8,
                selectdata: [
                  { label: '全部', value: '1' },
                  { label: '市场监管', value: '2' },
                  { label: '劳动社保', value: '3' },
                  { label: '城市管理', value: '4' },
                  { label: '交通运输', value: '5' },
                  { label: '教育医疗', value: '6' },
                  { label: '公共服务', value: '7' },
                ],
              },
              {
                type: 'Select',
                name: 'name2',
                label: '事项状态',
                span: 8,
                selectdata: [
                  { label: '全部', value: '1' },
                  { label: '化解中', value: '2' },
                  { label: '化解成功', value: '3' },
                  { label: '化解不成功', value: '4' },
                ],
              },
            ]}
            handleReset={() => handleSearch('reset')}
            handleSearch={() => handleSearch('search')}
          />
        </div>
        <div className='disputeLedger-row'>
          <div className='comprehensive-title'>数据总览</div>
          <div>
            <Space className='workDash-d' align='center' split={<Divider type="vertical" style={{ height: '48px' }} />}>
              <div className='workDash-item'>
                <div className='workDash-item-img'>
                  <img src={workDash_1} alt="" srcset="" />
                </div>
                <div className='workDash-item-div'>
                  <div className='workDash-item-title'>总登记</div>
                  <div className='workDash-item-value'>3301</div>
                </div>
              </div>
              <div className='workDash-item'>
                <div className='workDash-item-img'>
                  <img src={workDash_2} alt="" srcset="" />
                </div>
                <div className='workDash-item-div'>
                  <div className='workDash-item-title'>办理中</div>
                  <div className='workDash-item-value'>103</div>
                </div>
              </div>
              <div className='workDash-item1'>
                <div className='workDash-item-img'>
                  <img src={workDash_3} alt="" srcset="" />
                </div>
                <div className='workDash-item-div'>
                  <div className='workDash-item-title'><div style={{ width: '50px' }}>已结案</div><div style={{ width: '36px' }}></div> <Badge dot size='30' status="success" text={<Space split={<Divider type="vertical" />}><span style={{ color: '#4E5969', fontSize: '14px' }}>化解成功：3066件 | 成功率：<span style={{ color: '#00B42A' }}>90.3%</span></span></Space>} /></div>
                  <div className='workDash-item-value'><div style={{ width: '50px' }}>3166</div><div style={{ width: '36px' }}></div><Badge status="error" text={<Space split={<Divider type="vertical" />}><span style={{ color: '#4E5969', fontSize: '14px' }}>化解不成功：100件</span></Space>} /></div>
                </div>
              </div>
              <div className='workDash-item'>
                <div className='workDash-item-img'>
                  <img src={workDash_4} alt="" srcset="" />
                </div>
                <div className='workDash-item-div'>
                  <div className='workDash-item-title'>不予受理</div>
                  <div className='workDash-item-value'>32</div>
                </div>
              </div>
            </Space>
          </div>
        </div>

        {/* 图表 */}
        <div className='disputeLedger-green'>
          <Space style={{ flex: '1' }} className='big-green-main-space' direction='vertical'>
            <div className='big-green-main-title-display'>
              <div className='disputeLedger-green-title'>数据统计</div>
            </div>
            <div style={{ width: '100%', height: '300px', marginTop: '12px' }}>
              <MyChartBar data={[220, 5211, 2500, 3152, 8362, 26220, 8442, 2600, 1850, 1302, 850, 1048]} dataAxis={['本级', '越秀区', '海珠区', '荔湾区', '天河区', '白云区', '黄埔区', '花都区', '番禺区', '南沙区', '从化区', '增城区']} />
            </div>
          </Space>
        </div>
        <div style={{ marginBottom: '12px', width: '100%', display: 'flex', gap: '12px', justifyContent: 'space-between' }} >
          <Row gutter={16}>
            <Col span={16}>
              <div className='workDash-main'>
                <div style={{ width: '100%' }}>
                  <div className='big-green-main-title-display'>
                    <div className='disputeLedger-green-title'>事项来源</div>
                  </div>
                  <div className='workDash-main-card-one'>
                    <div className='workDash-main-card'>
                      <div className='workDash-main-card-head'>
                        <div className='workDash-main-card-head-l'><div className='workDash-main-card-head-l-img'><img src={workDash_6} alt="" srcset="" /></div></div>
                        <div className='workDash-main-card-head-r'><div className='workDash-main-card-head-r-title'>大厅来访</div><div className='workDash-main-card-head-r-value'>2233<span className='workDash-main-card-head-r-subValue'>&nbsp;|&nbsp;40%</span></div></div>
                      </div>
                      <div className='workDash-main-card-body'>
                        <div className='workDash-main-card-body-flex'>
                          <div className='workDash-main-card-body-flex-title'>化解中</div>
                          <div className='workDash-main-card-body-flex-value'>100</div>
                        </div>
                        <div className='workDash-main-card-body-flex'>
                          <div className='workDash-main-card-body-flex-title'>化解成功</div>
                          <div className='workDash-main-card-body-flex-value'>2132</div>
                        </div>
                        <div className='workDash-main-card-body-flex'>
                          <div className='workDash-main-card-body-flex-title'>化解不成功</div>
                          <div className='workDash-main-card-body-flex-value'>50</div>
                        </div>
                        <div className='workDash-main-card-body-flex'>
                          <div className='workDash-main-card-body-flex-title'>化解成功率</div>
                          <div className='workDash-main-card-body-flex-value'>84.3%</div>
                        </div>
                        <div className='workDash-main-card-body-flex'>
                          <div className='workDash-main-card-body-flex-title'>不予受理</div>
                          <div className='workDash-main-card-body-flex-value'>3</div>
                        </div>
                      </div>
                    </div>

                    <div className='workDash-main-card'>
                      <div className='workDash-main-card-head'>
                        <div className='workDash-main-card-head-l workDash-bg_2'><div className='workDash-main-card-head-l-img workDash-bg_2_img'><img src={workDash_7} alt="" srcset="" /></div></div>
                        <div className='workDash-main-card-head-r workDash-bg_2_r'><div className='workDash-main-card-head-r-title'>线上来访</div><div className='workDash-main-card-head-r-value'>430<span className='workDash-main-card-head-r-subValue'>&nbsp;|&nbsp;17%</span></div></div>
                      </div>
                      <div className='workDash-main-card-body'>
                        <div className='workDash-main-card-body-flex'>
                          <div className='workDash-main-card-body-flex-title'>化解中</div>
                          <div className='workDash-main-card-body-flex-value'>30</div>
                        </div>
                        <div className='workDash-main-card-body-flex'>
                          <div className='workDash-main-card-body-flex-title'>化解成功</div>
                          <div className='workDash-main-card-body-flex-value'>400</div>
                        </div>
                        <div className='workDash-main-card-body-flex'>
                          <div className='workDash-main-card-body-flex-title'>化解不成功</div>
                          <div className='workDash-main-card-body-flex-value'>7</div>
                        </div>
                        <div className='workDash-main-card-body-flex'>
                          <div className='workDash-main-card-body-flex-title'>化解成功率</div>
                          <div className='workDash-main-card-body-flex-value'>95.3%</div>
                        </div>
                        <div className='workDash-main-card-body-flex'>
                          <div className='workDash-main-card-body-flex-title'>不予受理</div>
                          <div className='workDash-main-card-body-flex-value'>3</div>
                        </div>
                      </div>
                    </div>

                    <div className='workDash-main-card'>
                      <div className='workDash-main-card-head'>
                        <div className='workDash-main-card-head-l workDash-bg_3'><div className='workDash-main-card-head-l-img workDash-bg_3_img'><img src={workDash_8} alt="" srcset="" /></div></div>
                        <div className='workDash-main-card-head-r workDash-bg_3_r'><div className='workDash-main-card-head-r-title'>自行排查</div><div className='workDash-main-card-head-r-value'>672<span className='workDash-main-card-head-r-subValue'>&nbsp;|&nbsp;20%</span></div></div>
                      </div>
                      <div className='workDash-main-card-body'>
                        <div className='workDash-main-card-body-flex'>
                          <div className='workDash-main-card-body-flex-title'>化解中</div>
                          <div className='workDash-main-card-body-flex-value'>80</div>
                        </div>
                        <div className='workDash-main-card-body-flex'>
                          <div className='workDash-main-card-body-flex-title'>化解成功</div>
                          <div className='workDash-main-card-body-flex-value'>520</div>
                        </div>
                        <div className='workDash-main-card-body-flex'>
                          <div className='workDash-main-card-body-flex-title'>化解不成功</div>
                          <div className='workDash-main-card-body-flex-value'>70</div>
                        </div>
                        <div className='workDash-main-card-body-flex'>
                          <div className='workDash-main-card-body-flex-title'>化解成功率</div>
                          <div className='workDash-main-card-body-flex-value'>92.3%</div>
                        </div>
                        <div className='workDash-main-card-body-flex'>
                          <div className='workDash-main-card-body-flex-title'>不予受理</div>
                          <div className='workDash-main-card-body-flex-value'>2</div>
                        </div>
                      </div>
                    </div>

                    <div className='workDash-main-card'>
                      <div className='workDash-main-card-head'>
                        <div className='workDash-main-card-head-l workDash-bg_4'><div className='workDash-main-card-head-l-img workDash-bg_4_img'><img src={workDash_9} alt="" srcset="" /></div></div>
                        <div className='workDash-main-card-head-r workDash-bg_4_r'><div className='workDash-main-card-head-r-title'>协同推送</div><div className='workDash-main-card-head-r-value'>1094<span className='workDash-main-card-head-r-subValue'>&nbsp;|&nbsp;33%</span></div></div>
                      </div>
                      <div className='workDash-main-card-body'>
                        <div className='workDash-main-card-body-flex'>
                          <div className='workDash-main-card-body-flex-title'>化解中</div>
                          <div className='workDash-main-card-body-flex-value'>165</div>
                        </div>
                        <div className='workDash-main-card-body-flex'>
                          <div className='workDash-main-card-body-flex-title'>化解成功</div>
                          <div className='workDash-main-card-body-flex-value'>776</div>
                        </div>
                        <div className='workDash-main-card-body-flex'>
                          <div className='workDash-main-card-body-flex-title'>化解不成功</div>
                          <div className='workDash-main-card-body-flex-value'>150</div>
                        </div>
                        <div className='workDash-main-card-body-flex'>
                          <div className='workDash-main-card-body-flex-title'>化解成功率</div>
                          <div className='workDash-main-card-body-flex-value'>94.3%</div>
                        </div>
                        <div className='workDash-main-card-body-flex'>
                          <div className='workDash-main-card-body-flex-title'>不予受理</div>
                          <div className='workDash-main-card-body-flex-value'>31</div>
                        </div>
                      </div>
                    </div>

                  </div>
                </div>
              </div>
            </Col>
            <Col span={8}>
              <div className='workDash-main1'>
                <div className='big-green-main-title-display'>
                  <div className='disputeLedger-green-title'>工作效能</div>
                </div>
                <div className='workDash-main1-chart'>
                  <div className='workDash-main1-flex'>
                    <div className='workDash-main1-flex-l'>
                      <div className='workDash-main1-flex-l-title'>事项分派</div>
                      <div className='workDash-main1-flex-l-value'>320<span className='workDash-main1-flex-l-subValue'>件</span></div>
                    </div>
                    <div className='workDash-main1-flex-r workDash-main1-flex-r-green'>平均耗时<br />1.5小时</div>
                  </div>

                  <div className='workDash-main1-flex'>
                    <div className='workDash-main1-flex-l'>
                      <div className='workDash-main1-flex-l-title'>事项办理</div>
                      <div className='workDash-main1-flex-l-value'>299<span className='workDash-main1-flex-l-subValue'>件</span></div>
                    </div>
                    <div className='workDash-main1-flex-r workDash-main1-flex-r-orange'>平均耗时<br />80.3小时</div>
                  </div>

                  <div className='workDash-main1-flex'>
                    <div className='workDash-main1-flex-l'>
                      <div className='workDash-main1-flex-l-title'>事项签收</div>
                      <div className='workDash-main1-flex-l-value'>320<span className='workDash-main1-flex-l-subValue'>件</span></div>
                    </div>
                    <div className='workDash-main1-flex-r workDash-main1-flex-r-blue'>平均耗时<br />5.5小时</div>
                  </div>
                  <div className='workDash-main1-flex'>
                    <div className='workDash-main1-flex-l'>
                      <div className='workDash-main1-flex-l-title'>申请审批</div>
                      <div className='workDash-main1-flex-l-value'>108<span className='workDash-main1-flex-l-subValue'>件</span></div>
                    </div>
                    <div className='workDash-main1-flex-r workDash-main1-flex-r-blue'>平均耗时<br />4小时</div>
                  </div>
                  <div className='workDash-main1-flex'>
                    <div className='workDash-main1-flex-l'>
                      <div className='workDash-main1-flex-l-title'>事项受理</div>
                      <div className='workDash-main1-flex-l-value'>318<span className='workDash-main1-flex-l-subValue'>件</span></div>
                    </div>
                    <div className='workDash-main1-flex-r workDash-main1-flex-r-blue'>平均耗时<br />15.5小时</div>
                  </div>
                  <div className='workDash-main1-flex'>
                    <div className='workDash-main1-flex-l'>
                      <div className='workDash-main1-flex-l-title'>督办回复</div>
                      <div className='workDash-main1-flex-l-value'>52<span className='workDash-main1-flex-l-subValue'>件</span></div>
                    </div>
                    <div className='workDash-main1-flex-r workDash-main1-flex-r-blue'>平均耗时<br />12.3小时</div>
                  </div>
                </div>
              </div>
            </Col>

          </Row>
        </div>

        <div style={{ marginBottom: '12px', width: '100%' }} >
          <Row gutter={16}>
            <Col span={8}>
              <div className='workDash-main-flex_1'>
                <div className='big-green-main-title-display'>
                  <div className='disputeLedger-green-title'>纠纷类型</div>
                </div>
                <div style={{ width: '100%', height: '242px', marginTop: '12px' }}>
                  <MyLTopChartPie data={
                    [
                      { value: 22, name: '市场监管' },
                      { value: 28, name: '劳动社保' },
                      { value: 15, name: '城市管理' },
                      { value: 10, name: '交通运输' },
                      { value: 5, name: '教育医疗' },
                      { value: 20, name: '公共服务' },
                    ]
                  } />
                </div>
              </div>
            </Col>
            <Col span={8}>
              <div className='workDash-main-flex_1'>
                <div className='big-green-main-title-display'>
                  <div className='disputeLedger-green-title'>化解状况</div>
                </div>
                <div style={{ width: '100%', height: '242px', marginTop: '12px' }}>
                  <MyLTopChartPie1 data={
                    [
                      { value: 90, name: '小学' },
                      { value: 200, name: '初中' },
                      { value: 100, name: '高中' },
                      { value: 300, name: '大学本科' },
                      { value: 200, name: '硕士' },
                      { value: 100, name: '其他' },
                    ]
                  } />
                </div>
              </div>
            </Col>
            <Col span={8}>
              <div className='workDash-main-flex_1'>
                <div className='big-green-main-title-display'>
                  <div className='disputeLedger-green-title'>事项等级</div>
                </div>
                <div className='workDash-grade'>
                  <div className='workDash-grade-item workDash-grade-item-orange'>
                    <div className='workDash-grade-item-t'><div className='workDash-grade-item-t-orange'>3级事件</div><div className='workDash-grade-item-t-value'>3201<span className='workDash-grade-item-t-unit'>件</span></div></div>
                    <div className='workDash-grade-item-b'>
                      <div className='workDash-grade-item-b-bg'>
                        <div className='workDash-grade-item-b-bg-orange'></div>
                      </div>
                    </div>
                  </div>
                  <div className='workDash-grade-item workDash-grade-item-blue'>
                    <div className='workDash-grade-item-t'><div className='workDash-grade-item-t-blue'>2级事件</div><div className='workDash-grade-item-t-value'>104<span className='workDash-grade-item-t-unit'>件</span></div></div>
                    <div className='workDash-grade-item-b'>
                      <div className='workDash-grade-item-b-bg'>
                        <div className='workDash-grade-item-b-bg-blue'></div>
                      </div>
                    </div>
                  </div>
                  <div className='workDash-grade-item workDash-grade-item-red'>
                    <div className='workDash-grade-item-t'><div className='workDash-grade-item-t-red'>1级事件</div><div className='workDash-grade-item-t-value'>52<span className='workDash-grade-item-t-unit'>件</span></div></div>
                    <div className='workDash-grade-item-b'>
                      <div className='workDash-grade-item-b-bg'>
                        <div className='workDash-grade-item-b-bg-red'></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </Col>
          </Row>



        </div>
        <div style={{ width: '100%', display: 'flex', gap: '12px', justifyContent: 'space-between' }} >
          <div className='workDash-main-flex_1' style={{ marginBottom: '12px', }}>
            <div className='big-green-main-title-display-table'>
              <div className='disputeLedger-green-title'>实时动态</div>
              <div style={{ padding: '4px 16px 16px' }}>
                <TableView
                  columns={columns()}
                  dataSource={data.tableData}
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </NewPage >
  )
}

export default WorkDash;

// 柱状图
const MyChartBar = ({ data, dataAxis }) => {
  const myChartRef = useRef();
  // 图表
  const [myChart, setMyChart] = useState();


  // 加载图表数据
  useEffect(() => {
    var myChart = echarts.init(document.getElementById('chartBar'), 'dark');
    // let data = [123, 98, 245, 234, 356, 148];
    // let dataAxis = ['低收入家庭', '单亲家庭', '流动家庭', '犯罪家庭', '无家庭', '其他']

    // 绘制图表
    myChart.setOption({
      backgroundColor: '#fff',
      grid: {
        x: 10,
        y: 20,
        x2: 20,
        y2: 0,
        containLabel: true,
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'none'
        },
        formatter: function (params) {
          return params[0].name + ': ' + params[0].value + '人';
        }
      },
      xAxis: [{
        type: 'category',
        // boundaryGap: false,
        data: dataAxis,

        axisLabel: {
          interval: dataAxis?.length > 15 ? 1 : 0,
          formatter: function (value) {
            // 如果标签长度超过4，将剩余的文字替换为省略号
            if (value.length > 4) {
              return value.slice(0, 4) + '...';
            } else {
              return value;
            }
          }
        },
      }],
      yAxis: {
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: '#ccc'
          }
        },

      },
      dataZoom: [
        {
          type: 'inside'
        }
      ],
      series: [
        {
          type: 'bar',
          name: '化解中',
          data: [1320, 1320, 1320, 1320, 1320, 1320, 1320, 1320, 1320, 1320, 1320, 1320],
          barWidth: 24, // 设置柱子宽度
          label: {
            show: true,
            position: 'top',
            valueAnimation: false
          },
          emphasis: {
            itemStyle: {
              opacity: 0.7
            }
          },
          itemStyle: {
            color: '#57a9fb',
            borderWidth: 2 // 设置边框宽度
          }
        },
        {
          type: 'bar',
          name: '化解成功',
          data: [920, 920, 920, 920, 920, 920, 920, 920, 920, 920, 920, 920],
          barWidth: 24, // 设置柱子宽度
          label: {
            show: true,
            position: 'top',
            valueAnimation: false
          },
          emphasis: {
            itemStyle: {
              opacity: 0.7
            }
          },
          itemStyle: {
            color: '#23c343',
            borderWidth: 2, // 设置边框宽度
            left: 0 // 设置左边距，以实现重叠效果
          }
        },
        {
          type: 'bar',
          name: '化解不成功',
          data: [400, 400, 400, 400, 400, 400, 400, 400, 400, 400, 400, 400],
          barWidth: 24, // 设置柱子宽度
          label: {
            show: true,
            position: 'top',
            valueAnimation: false
          },
          emphasis: {
            itemStyle: {
              opacity: 0.7
            }
          },
          itemStyle: {
            color: '#F76560',
            borderWidth: 2, // 设置边框宽度
            left: 0 // 设置左边距，以实现重叠效果
          }
        }
      ]
    });
  }, [data]);

  useEffect(() => {
    // if (myChart && myChartRef.current.clientHeight !== 0) {
    //   myChart.forceFit();
    // }
  });

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

const MyLTopChartPie = ({ data }) => {
  const myChartRef = useRef();
  // 图表
  const [myChart, setMyChart] = useState();

  // 加载图表数据
  useEffect(() => {
    var myChart = echarts.init(document.getElementById('chartLTopPie'), 'dark');

    // 绘制图表
    myChart.setOption({
      backgroundColor: '#fff',
      grid: {
        x: 5,
        y: 12,
        x2: 20,
        y2: 0,
      },
      legend: {
        orient: 'vertical', // 垂直排列
        top: 'center',
        right: 10,
        data: [
          {
            name: '市场监管',
            icon: 'circle', // 图例标记的形状
          },
          {
            name: '劳动社保',
            icon: 'circle',
          },
          {
            name: '城市管理',
            icon: 'circle',
          },
          {
            name: '交通运输',
            icon: 'circle',
          },
          {
            name: '教育医疗',
            icon: 'circle',
          },
          {
            name: '公共服务',
            icon: 'circle',
          }
          // ... 其他数据
        ]
      },
      series: [
        {
          name: '纠纷类型',
          type: 'pie',
          radius: '90%',
          center: ['30%', '50%'],
          color: ['#FCE996', '#FFCF8B', '#86E8DD', '#FDCDC5', '#C396ED', '#9FD4FD'],
          labelLine: { // 关闭引导线
            show: false
          },
          label: {
            show: true,
            position: 'inside', // 设置文字在扇形区域内
            formatter: '{d}%', // 标签文本格式器
            rich: {
              a: {
                lineHeight: 25,
                align: 'center'
              },
              b: {
                lineHeight: 25,
                align: 'center'
              },
              c: {
                lineHeight: 25,
                align: 'center'
              },
              d: {
                lineHeight: 25,
                align: 'center'
              },
              e: {
                lineHeight: 25,
                align: 'center'
              },
              f: {
                lineHeight: 25,
                align: 'center'
              }
            },
            // normal: {
            //   show: false,
            // },
          },
          data: data
        },
      ]
    });
  }, [data]);


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

const MyLTopChartPie1 = ({ data }) => {
  const myChartRef = useRef();
  // 图表
  const [myChart, setMyChart] = useState();


  // 加载图表数据
  useEffect(() => {
    var myChart = echarts.init(document.getElementById('chartLTopPie1'), 'dark');
    // let data = [123, 98, 245, 234, 356, 148];
    // let dataAxis = ['低收入家庭', '单亲家庭', '流动家庭', '犯罪家庭', '无家庭', '其他']

    // 绘制图表
    myChart.setOption({
      backgroundColor: '#fff',
      grid: {
        x: 5,
        y: 12,
        x2: 20,
        y2: 0,
        containLabel: true,
      },
      legend: {
        orient: 'vertical', // 垂直排列
        top: 'center',
        right: 10,
        data: [
          {
            name: '化解中',
            icon: 'circle', // 图例标记的形状
          },
          {
            name: '化解成功',
            icon: 'circle',
          },
          {
            name: '化解不成功',
            icon: 'circle',
          },

        ]
      },
      series: [
        {
          name: '化解状况',
          type: 'pie',
          radius: ['60%', '90%'], // 设置饼图的内半径和外半径，实现扇形区域
          center: ['30%', '50%'],
          color: ['#B6DDF1', '#3A8AC6', '#094282'],
          data: [
            { value: 24, name: '化解中' },
            { value: 30, name: '化解成功' },
            { value: 46, name: '化解不成功' },
          ],
          label: {
            show: true,
            position: 'inside', // 设置文字在扇形区域内
            formatter: '{d}%', // 标签文本格式器
            rich: {
              a: {
                lineHeight: 25,
                align: 'center'
              },
              b: {
                lineHeight: 25,
                align: 'center'
              },
            }
          }
        }
      ]
    });
  }, [data]);

  useEffect(() => {
  });

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

 gz-customerSystem/src/views/workDash/index.less

New file
@@ -0,0 +1,313 @@
.workDash {
    &-d {
        display: flex;
        width: 100%;
        justify-content: space-around;
        // & .ant-space-item {
        //   flex: 1;
        // }
    }
    &-item {
        flex: 1;
        display: flex;
        gap: 16px;
        &-img {
            width: 48px;
            height: 48px;
            background-color: rgba(242, 243, 245, 0.95);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            & img {
                width: 24px;
                height: 24px;
            }
        }
        &-div {
        }
        &-title {
            font-size: 14px;
            line-height: 22px;
            color: #4e5969;
            display: flex;
        }
        &-value {
            color: #1d2129;
            font-size: 18px;
            line-height: 26px;
            display: flex;
        }
    }
    &-item1 {
        flex: 2;
        display: flex;
        gap: 16px;
    }
    &-main {
        display: flex;
        flex: 2;
        background-color: #fff;
        &-flex_1 {
            flex: 1;
            background-color: #fff;
        }
        &-card {
            // width: 197px;
            &-one {
                padding: 0 16px 16px;
                display: flex;
                gap: 24px;
                justify-content: space-between;
            }
            &-head {
                display: flex;
                &-l {
                    width: 80px;
                    height: 80px;
                    background-color: #08979c;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border-radius: 5px 0px 0px 5px;
                    &-img {
                        width: 48px;
                        height: 48px;
                        border-radius: 50%;
                        background-color: #96e0d7;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        & img {
                            width: 24px;
                            height: 24px;
                        }
                    }
                }
                &-r {
                    background: linear-gradient(271deg, #13c2c2 0%, rgba(5, 174, 174, 0.8) 14%);
                    color: #fff;
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    justify-content: center;
                    border-radius: 0px 5px 5px 0px;
                    padding-left: 16px;
                    flex: 1;
                    &-title {
                        font-size: 14px;
                    }
                    &-value {
                        font-size: 20px;
                        line-height: 28px;
                        font-weight: 500;
                        display: flex;
                        align-items: center;
                        height: 28px;
                    }
                    &-subValue {
                        font-size: 12px;
                        line-height: 28px;
                        font-weight: 400;
                        position: relative;
                        top: 2px;
                    }
                }
            }
            &-body {
                display: flex;
                flex-wrap: wrap;
                padding: 10px;
                gap: 16px;
        margin-top: 12px;
                &-flex {
                    display: flex;
                    flex-direction: column;
                    gap: 4px;

                    &-title {
                        font-size: 12px;
                        line-height: 20px;
                        color: #4e5969;
                    }
                    &-value {
                        color: #1d2129;
                        font-size: 14px;
                        line-height: 22px;
                    }
                }
            }
        }
    }
    &-main1 {
        // display: flex;
        flex: 1;
        background-color: #fff;
        &-chart {
            display: flex;
            flex-wrap: wrap;
            padding: 0 16px 12px;
        }
        &-flex {
            width: 50%;
            display: flex;
            gap: 16px;
            justify-content: center;
            padding: 11px 0;
            &-l {
                font-size: 14px;
                line-height: 22px;
                color: #4e5969;
                display: flex;
                flex-direction: column;
                gap: 4px;
                &-value {
                    color: #1d2129;
                    font-size: 18px;
                    line-height: 26px;
                }
                &-subValue {
                    font-size: 14px;
                    line-height: 22px;
                    color: #4e5969;
                }
            }
            &-r {
                width: 72px;
                height: 48px;
                padding: 4px 12px;
                text-align: center;
                font-size: 12px;
                line-height: 20px;
                &-green {
                    background: #e8ffea;
                    color: #00b42a;
                }
                &-orange {
                    background: #fff7e6;
                    color: #ef6c24;
                }
                &-blue {
                    background: #e6f7ff;
                    color: #1890ff;
                }
            }
        }
    }
    &-grade {
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        &-item {
            padding: 12px 8px;
            &-t {
                display: flex;
                justify-content: space-between;
                &-orange {
                    padding: 2px 12px;
                    color: #ef6c24;
                    border-radius: 2px;
                    background: #fff7e6;
                    border: 1px solid #fa8c16;
                }
                &-blue {
                    padding: 2px 12px;
                    color: #3491fa;
                    border-radius: 2px;
                    background: #e8f7ff;
                    border: 1px solid #3491fa;
                }
                &-red {
                    padding: 2px 12px;
                    color: #f76560;
                    border-radius: 2px;
                    background: #ffece8;
                    border: 1px solid #f53f3f;
                }
                &-value {
                    font-size: 18px;
                    line-height: 28px;
                    margin-right: 4px;
                }
                &-unit {
                    font-size: 12px;
                    line-height: 20px;
                    color: #86909c;
                }
            }
            &-b {
                margin-top: 8px;
                &-bg {
                    height: 3px;
                    width: 100%;
                    background: #e9eaeb;
                    position: relative;
                    &-orange {
                        width: 80%;
                        height: 3px;
                        position: absolute;
                        top: 0;
                        left: 0;
                        background: linear-gradient(270deg, #ffc069 0%, #fa8c16);
                    }
                    &-blue {
                        width: 20%;
                        height: 3px;
                        position: absolute;
                        top: 0;
                        left: 0;
                        background: linear-gradient(270deg,#57a9fb 0%, #3491fa);
                    }
          &-red {
                        width: 10%;
                        height: 3px;
                        position: absolute;
                        top: 0;
                        left: 0;
                        background: linear-gradient(270deg,#f76560 0%, #f53f3f);
                    }
                }
            }
            &-orange {
                border: 1px solid #fa8c16;
            }
            &-blue {
                border: 1px solid #3491fa;
            }
            &-red {
                border: 1px solid #f76560;
            }
        }
    }
}

.workDash-bg_2 {
    background: #1890ff;
    &_img {
        background-color: #91d5ff;
    }
    &_r {
        background: linear-gradient(271deg, #1890ff 0%, rgba(24, 144, 255, 0.8) 14%);
    }
}

.workDash-bg_3 {
    background: #ef6c24;
    &_img {
        background-color: #ffcba1;
    }
    &_r {
        background: linear-gradient(271deg, #ef6c24 0%, rgba(239, 108, 36, 0.8) 14%);
    }
}

.workDash-bg_4 {
    background: #d10269;
    &_img {
        background-color: #ffa6c6;
    }
    &_r {
        background: linear-gradient(271deg, #d10269 0%, rgba(209, 2, 105, 0.8) 14%);
    }
}