diff --git a/src/assets/images/administPunish/cfIcon.png b/src/assets/images/administPunish/cfIcon.png
new file mode 100644
index 0000000000000000000000000000000000000000..e2caad2b2c7cc5b023cafbf095a4107758b1bb39
Binary files /dev/null and b/src/assets/images/administPunish/cfIcon.png differ
diff --git a/src/assets/images/administPunish/fkIcon.png b/src/assets/images/administPunish/fkIcon.png
new file mode 100644
index 0000000000000000000000000000000000000000..c4b588d10f6f51f159a705b55daa71add8d34689
Binary files /dev/null and b/src/assets/images/administPunish/fkIcon.png differ
diff --git a/src/components/PieChart/index.tsx b/src/components/PieChart/index.tsx
index 3ef0a307536d539fcd4d9b80341e768aa9a2216d..943eb56269ada2615327b17624fd5406f0443a29 100644
--- a/src/components/PieChart/index.tsx
+++ b/src/components/PieChart/index.tsx
@@ -22,7 +22,13 @@ const PieChart: React.FC<PieChartDto> = ({
   data = [],
   labelClassName,
   labelStyle,
-  color = ['rgb(150, 216, 129)', 'rgb(83, 214, 255)', 'rgb(159, 159, 255)', 'rgb(247, 161, 91)', '#B5B42F'],
+  color = [
+    'rgb(150, 216, 129)',
+    'rgb(83, 214, 255)',
+    'rgb(159, 159, 255)',
+    'rgb(247, 161, 91)',
+    '#B5B42F',
+  ],
 }) => {
   return (
     <Flex style={{ ...style }} align="center">
@@ -45,7 +51,7 @@ const PieChart: React.FC<PieChartDto> = ({
                   title={it.name}
                   textColor={'rgb(188, 206, 233)'}
                 />
-                <p className={styles.valueWrap}>
+                <p className={styles.valueWrap} style={labelStyle}>
                   <b>
                     {it.value}
                     <span
@@ -55,9 +61,11 @@ const PieChart: React.FC<PieChartDto> = ({
                     </span>
                   </b>
                 </p>
-                {/* <p>
-                  <b>{parseFloat(Number(it.percent).toFixed(1))}</b>%
-                </p> */}
+                {it.percent ? (
+                  <p>
+                    <b>{parseFloat(Number(it.percent).toFixed(1))}</b>%
+                  </p>
+                ) : null}
               </Flex>
             ))}
           </div>
diff --git a/src/pages/GlobalModalServices/modals/AdministPunish/AdministPunishDetails/index.tsx b/src/pages/GlobalModalServices/modals/AdministPunish/AdministPunishDetails/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..02ca4238928960eb681c58979fa6e71667a0650d
--- /dev/null
+++ b/src/pages/GlobalModalServices/modals/AdministPunish/AdministPunishDetails/index.tsx
@@ -0,0 +1,117 @@
+import { Descriptions, DescriptionsProps } from 'antd';
+import styles from './inedx.less';
+const AdministPunishList = () => {
+  const items: DescriptionsProps['items'] = [
+    {
+      key: '1',
+      label: '行政处罚决定书文号',
+      children: <span>202409079563211</span>,
+    },
+    {
+      key: '2',
+      label: '违法事实',
+      children: <span>xx公司在天府新区正兴街道云龙路保利天府和颂花园 2-4号楼、13号楼、总平及装饰装修工程项目未落实重污染天气应急预案规定，橙色预警天气期间违规露天焊接作业案</span>,
+    },
+    {
+      key: '3',
+      label: '违法行为类型',
+      children: <span>扬尘类</span>,
+    },
+    {
+      key: '4',
+      label: '处罚依据',
+      children: <span>《成都市建设施工现场管理条例》第四十五条第三款:“违反本条例第三十五条规定的,责令停止施工,并处五万元以上十万元以下的罚款。"之规定。鉴于当事人不具备从轻、从重处罚情节，依据《成都市规范行政执法自由裁量权实施办法》第十二条、《成都市城市管理综合执法领域行政处罚裁量权适用规定》第十七条第一款“不具有从轻、从重情形的，认定为一般违法情形，按照《行政处罚裁量基准》，依法选择一般情形的处罚种类或罚款幅度"和《成都市城市管理综合执法领域行政处罚裁量基准》(扬尘类)第 13 项</span>,
+    },
+    {
+      key: '5',
+      label: '行政相对人类别',
+      children: (
+        <span>xxxxx</span>
+      ),
+    },
+    {
+        key: '52',
+        label: '证件类型',
+        children: (
+          <span>xxxxx</span>
+        ),
+      },
+    {
+        key: '6',
+        label: '处罚有效期',
+        children: (
+          <span>xxxxx</span>
+        ),
+      },
+     {
+        key: '7',
+        label: '公示截止期',
+        children: (
+          <span>xxxxx</span>
+        ),
+      }, 
+      {
+        key: '8',
+        label: '没收违法所得',
+        children: (
+          <span>xxxxx</span>
+        ),
+      }, 
+      {
+        key: '9',
+        label: '处罚类别',
+        children: (
+          <span>xxxxx</span>
+        ),
+      }, 
+      {
+        key: '10',
+        label: '处罚内容',
+        children: (
+          <span>xxxxx</span>
+        ),
+      }, 
+      {
+        key: '11',
+        label: '罚款金额（万元）',
+        children: (
+          <span>xxxxx</span>
+        ),
+      }, 
+      {
+        key: '12',
+        label: '处罚决定日期',
+        children: (
+          <span>xxxxx</span>
+        ),
+      }, 
+      {
+        key: '13',
+        label: '没收非法财物的金额（万元）',
+        children: (
+          <span>xxxxx</span>
+        ),
+      }, 
+  ];
+
+  return (
+    <div className={styles.container}>
+      <Descriptions
+        items={items}
+        column={1}
+        labelStyle={{
+          fontSize: 18,
+          color: 'rgb(188, 206, 233)',
+          display: 'flex',
+          justifyContent: 'flex-end',
+          width: 260,
+        }}
+        contentStyle={{
+          color: '#fff',
+          fontSize: 18,
+        }}
+      />
+    </div>
+  );
+};
+export default AdministPunishList;
diff --git a/src/pages/GlobalModalServices/modals/AdministPunish/AdministPunishDetails/inedx.less b/src/pages/GlobalModalServices/modals/AdministPunish/AdministPunishDetails/inedx.less
new file mode 100644
index 0000000000000000000000000000000000000000..e9bf27d08d95acc64a224f080faa2cfa0d3950f7
--- /dev/null
+++ b/src/pages/GlobalModalServices/modals/AdministPunish/AdministPunishDetails/inedx.less
@@ -0,0 +1,8 @@
+.container{
+    width: 1399px;
+    height: 684px;
+    overflow: auto;
+    background-color: #1748755a;
+    border-radius: 14px;
+    padding:20px;
+}
\ No newline at end of file
diff --git a/src/pages/GlobalModalServices/modals/AdministPunish/AdministPunishList/index.less b/src/pages/GlobalModalServices/modals/AdministPunish/AdministPunishList/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/pages/GlobalModalServices/modals/AdministPunish/AdministPunishList/index.tsx b/src/pages/GlobalModalServices/modals/AdministPunish/AdministPunishList/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ce588c19bbdf3dea7f49c845eb482e2a9f7ebdaa
--- /dev/null
+++ b/src/pages/GlobalModalServices/modals/AdministPunish/AdministPunishList/index.tsx
@@ -0,0 +1,109 @@
+import BlueTable from '@/components/BlueTable';
+import { useGlobalModalServices } from '@/pages/GlobalModalServices/provider';
+import { useMemo, useState } from 'react';
+
+const AdministPunishList = () => {
+  const [fetchParams, setFetchParams] = useState<any>({
+    data: {
+      pageNo: 1,
+      pageSize: 10,
+    },
+  });
+  const { dispatch } = useGlobalModalServices();
+  const columns = useMemo(() => {
+    return [
+      {
+        title: '行政处罚决定书文号',
+        dataIndex: 'wh',
+        key: 'descgldw',
+        width: 300,
+        ellipsis: true,
+      },
+      {
+        title: '违法行为类型',
+        dataIndex: 'type',
+        key: 'descgldw',
+        width: 150,
+        ellipsis: true,
+      },
+      {
+        title: '违法事实',
+        dataIndex: 'ss',
+        key: 'descgldw',
+        width: 650,
+        ellipsis: true,
+      },
+      {
+        title: '处罚决定日期',
+        dataIndex: 'rq',
+        key: 'descgldw',
+        width: 150,
+        ellipsis: true,
+      },
+      {
+        title: '操作',
+        dataIndex: 'c',
+        key: 'dictdldj_name',
+        width: 100,
+        ellipsis: true,
+        render: (val: string, record: any) => {
+          return (
+            <div
+              onClick={() => {
+                dispatch.push('AdministPunishDetails', {
+                    title:'行政处罚详情'
+                  // props: {
+                  //   data: selected,
+                  //   indexs: indexs,
+                  // },
+                });
+              }}
+              style={{
+                color: 'rgb(36, 164, 255)',
+                fontSize: 20,
+                fontWeight: 700,
+                cursor: 'pointer',
+              }}
+            >
+              详情
+            </div>
+          );
+        },
+      },
+    ];
+  }, []);
+  return (
+    <div>
+      <BlueTable
+        //   dataSource={tableData?.data?.data?.records}
+        dataSource={[
+          {
+            wh: '523655411223',
+            type: '扬尘类',
+            ss: '80x公司在天府新区正兴街道云龙路保利XXXXXXX天府和颂80x公司在天府新区正兴街道云龙路保利XXXXXXX天府和颂',
+            rq: '2023-03-01',
+          },
+        ]}
+        columns={columns}
+        scroll={{ x: 1050, y: 550 }}
+        pagination={{
+          // total: tableData?.data?.data?.page?.total,
+          pageSize: fetchParams?.data?.count,
+          showQuickJumper: false,
+          showSizeChanger: false,
+          onChange: (page, pageSize) => {
+            setFetchParams({
+              ...fetchParams,
+              data: {
+                pageNo: page - 1,
+                pageSize: pageSize,
+              },
+            });
+          },
+          //  hideOnSinglePage: true,
+        }}
+      />
+    </div>
+  );
+};
+export default AdministPunishList;
diff --git a/src/pages/GlobalModalServices/modals/AdministPunish/LineCharts/index.tsx b/src/pages/GlobalModalServices/modals/AdministPunish/LineCharts/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a85452c55a8986bd41d1457b412f08e37aeef0d9
--- /dev/null
+++ b/src/pages/GlobalModalServices/modals/AdministPunish/LineCharts/index.tsx
@@ -0,0 +1,76 @@
+import { CSSProperties, useMemo } from 'react'
+import ReactEcharts from 'echarts-for-react';
+const LineCharts = ({ data,style }: { data: any[],style:CSSProperties }) => {
+
+  const option = useMemo(() => {
+    const chartData: any = [60, 50, 60, 70, 50, 70, 50, 60, 70, 50, 80, 50, 60, 70, 50, 60, 50, 60, 70, 50]
+    const showXAis = true
+    return {
+      xAxis: {
+        type: 'category',
+        boundaryGap: false,
+        show: showXAis,
+        data: showXAis ? data?.map(item => item.name) : [],
+        axisLabel: {
+          color: '#CBEDFF',
+          interval: 3 // 设置为0以显示所有坐标点  
+        },
+        axisLine: {
+          show: false,
+        },
+      },
+      yAxis: {
+        type: 'value',
+        show: false,
+      },
+      grid: {
+        left: '0',  // 左边距
+        right: '0', // 右边距
+        top: '0',   // 上边距
+        bottom: '0' // 下边距
+      },
+      series: [
+        {
+          data: chartData,
+          symbol: "none",
+          type: 'line',
+          lineStyle: {
+            color: "#57EFE5",
+          },
+
+          areaStyle: {
+            // 区域填充样式。设置后显示成区域面积图。
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 1,
+              x2: 0,
+              y2: 0.2,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: 'rgba(87, 239, 229, 0)', // 0% 处的颜色
+                },
+
+                {
+                  offset: 1,
+                  color: 'rgba(87, 239, 229, 0.4)', // 100% 处的颜色
+                },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+        },
+      ],
+    }
+  }, [data])
+
+  return (
+    <ReactEcharts
+      option={option} // option：图表配置项
+      style={style}
+    />
+  )
+}
+
+export default LineCharts
\ No newline at end of file
diff --git a/src/pages/GlobalModalServices/modals/AdministPunish/TopSarch/index.less b/src/pages/GlobalModalServices/modals/AdministPunish/TopSarch/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..1dbbc6add7c471cfa925978fa6314e1c27003042
--- /dev/null
+++ b/src/pages/GlobalModalServices/modals/AdministPunish/TopSarch/index.less
@@ -0,0 +1,24 @@
+.container {
+    display: flex;
+    align-items: center;
+    height: 70px;
+
+    .rangWarp {
+        height: 100%;
+        display: flex;
+        align-items: center;
+        margin-left: 10px;
+    }
+
+    :global {
+        .ant-picker-outlined {
+            background: rgb(50, 111, 167);
+            border-radius: 25px;
+            border-color: transparent;
+        }
+
+        .ant-picker-outlined:focus-within {
+            background-color: rgb(50, 111, 167);
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/pages/GlobalModalServices/modals/AdministPunish/TopSarch/index.tsx b/src/pages/GlobalModalServices/modals/AdministPunish/TopSarch/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..bdca86a3b80f1df95eb13d917eec6440499f2f64
--- /dev/null
+++ b/src/pages/GlobalModalServices/modals/AdministPunish/TopSarch/index.tsx
@@ -0,0 +1,42 @@
+import Tabs from '@/components/Tabs'
+import styles from './index.less'
+import { DatePicker } from 'antd';
+const { RangePicker } = DatePicker;
+const TopSarch=({onChange}:{onChange:(val:any)=>void})=>{
+    return <div className={styles.container}>
+         <Tabs
+            style={{
+              background: 'transparent',
+              height: '30px',
+            
+            }}
+            itemStyle={{
+              borderRadius: '25px',
+              background: 'rgba(7, 50, 93, 0.8)',
+              fontSize: '16px',
+              marginLeft: 8,
+            }}
+            onChange={(e) => {
+                onChange(e)
+            }}
+            itemkey={'key'}
+            items={[
+              {
+                key: 'mainClass',
+                label: '本月',
+              },
+              {
+                key: 'subClass',
+                label: '本年',
+              },
+            
+            ]}
+          />
+          <div className={styles.rangWarp}>
+          <RangePicker />
+          </div>
+          
+    </div>
+}
+
+export default TopSarch
\ No newline at end of file
diff --git a/src/pages/GlobalModalServices/modals/AdministPunish/index.less b/src/pages/GlobalModalServices/modals/AdministPunish/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..6751b54c39d5f52fa01c8ca1825ccd23ad46d921
--- /dev/null
+++ b/src/pages/GlobalModalServices/modals/AdministPunish/index.less
@@ -0,0 +1,185 @@
+.container {
+
+    width: 100%;
+    height: 695px;
+
+
+    .topWarp {
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+
+        .totalWarp {
+            background-color: rgba(57, 122, 183, 0.2);
+            width: 356px;
+            height: 271px;
+            border-radius: 20px;
+            padding: 20px;
+
+            .title {
+                font-size: 22px;
+                color: rgb(203, 237, 255);
+                font-family: '钉钉进步体';
+            }
+
+            .content {
+                margin-top: 10px;
+
+                .item {
+                    display: flex;
+                    justify-content: space-between;
+                    height: 90px;
+                    padding: 10px;
+                    background-color: rgb(57, 122, 183, 0.1);
+                    border-radius: 10px;
+
+                    .label {
+                        display: flex;
+                        align-items: center;
+                        color: rgb(188, 206, 233);
+                        font-size: 20px;
+
+                        .icon {
+                            margin-right: 11px;
+                            width: 21px;
+                            height: 20px;
+                        }
+                    }
+
+                    .desc {
+                        display: flex;
+                        flex-direction: column;
+                        align-items: flex-end;
+
+                        .count {
+                            font-size: 18px;
+                            color: rgb(29, 187, 138);
+                        }
+                    }
+                }
+            }
+        }
+
+        .tendency {
+            background-color: rgba(57, 122, 183, 0.2);
+            width: 1040px;
+            height: 271px;
+            border-radius: 20px;
+            padding: 20px;
+
+            .title {
+                font-size: 22px;
+                color: rgb(203, 237, 255);
+                font-family: '钉钉进步体';
+            }
+
+            .unit {
+                color: rgb(188, 206, 233);
+                margin-top: 20px;
+            }
+        }
+    }
+
+    .bottomWarp {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 20px;
+
+        .breakTop {
+            background-color: rgba(57, 122, 183, 0.2);
+            width: 457px;
+            height: 430px;
+            border-radius: 20px;
+            padding: 20px;
+
+            .title {
+                font-size: 22px;
+                color: rgb(203, 237, 255);
+                font-family: '钉钉进步体';
+            }
+
+            .content {
+                width: 100%;
+                height: 330px;
+                overflow: auto;
+
+                margin-top: 20px;
+
+            }
+        }
+
+        .hightTop {
+            background-color: rgba(57, 122, 183, 0.2);
+            width: 457px;
+            height: 430px;
+            border-radius: 20px;
+            padding: 20px;
+
+            .title {
+                font-size: 22px;
+                color: rgb(203, 237, 255);
+                font-family: '钉钉进步体';
+            }
+
+            .content {
+                width: 100%;
+                height: 260px;
+                overflow: auto;
+
+                margin-top: 20px;
+
+            }
+        }
+
+        .transaction {
+            background-color: rgba(57, 122, 183, 0.2);
+            width: 457px;
+            height: 430px;
+            border-radius: 20px;
+            padding: 20px;
+
+            .title {
+                font-size: 22px;
+                color: rgb(203, 237, 255);
+                font-family: '钉钉进步体';
+            }
+        }
+    }
+
+
+    .litsItem {
+        margin-bottom: 18px;
+
+        &:last-child {
+            margin-bottom: 0px;
+        }
+    }
+
+    .name {
+        color: rgb(228, 237, 255);
+        font-family: 微软雅黑;
+        font-size: 20px;
+        font-weight: 400;
+        line-height: 1;
+    }
+
+    .num {
+        :first-child {
+            color: rgb(89, 238, 255);
+            font-family: D-DIN;
+            font-size: 26px;
+            font-weight: 700;
+            line-height: 1;
+        }
+
+        :last-child {
+            color: rgb(228, 237, 255);
+            font-size: 18px;
+            line-height: 1;
+        }
+    }
+
+    .labelClassName {
+        width: 293px !important;
+    }
+}
\ No newline at end of file
diff --git a/src/pages/GlobalModalServices/modals/AdministPunish/index.tsx b/src/pages/GlobalModalServices/modals/AdministPunish/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..38d666c53387c27dcbfa131f5122f4929e35147f
--- /dev/null
+++ b/src/pages/GlobalModalServices/modals/AdministPunish/index.tsx
@@ -0,0 +1,287 @@
+import DescriptionItem from '@/components/DescriptionItem';
+import PieChart from '@/components/PieChart';
+import Tabs from '@/components/Tabs';
+import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons';
+import { Flex, Progress, Space } from 'antd';
+import { memo, useMemo } from 'react';
+import { useGlobalModalServices } from '../../provider';
+import styles from './index.less';
+import LineCharts from './LineCharts';
+/**行政处罚modal */
+const AdministPunish = () => {
+  const { dispatch } = useGlobalModalServices();
+  const commonValueStyle = {
+    background: 'linear-gradient(180deg, #AAFFF6 0%, #25BBFF 100%)',
+    WebkitBackgroundClip: 'text',
+    WebkitTextFillColor: 'transparent',
+    fontFamily: 'D-DIN',
+    fontSize: '36px',
+    fontWeight: 700,
+    lineHeight: 1.1,
+  };
+
+  const commonLabelStyle = {
+    color: '#BCCEE9',
+    // fontFamily: '微软雅黑',
+    fontSize: '20px',
+    fontWeight: 400,
+    lineHeight: 1.1,
+  };
+
+  const commonUnitStyle = {
+    color: 'rgb(188, 206, 233)',
+    // fontFamily: '微软雅黑',
+    fontSize: '14px',
+    fontWeight: 400,
+    lineHeight: 1.1,
+  };
+  const pieData = useMemo(() => {
+    return [
+      {
+        name: '简易程序',
+        value: 1234,
+        percent: '16',
+      },
+      {
+        name: '普通程序',
+        value: 1234,
+        percent: '16',
+      },
+    ];
+  }, []);
+  return (
+    <div className={styles.container}>
+      <div className={styles.topWarp}>
+        <div className={styles.totalWarp}>
+          <div className={styles.title}>总体情况</div>
+          <div className={styles.content}>
+            <div
+              className={styles.item}
+              onClick={() => {
+                dispatch.push('AdministPunishList', {
+                  headerLeft: () => {
+                    return (
+                      <div
+                        style={{
+                          color: 'rgb(43, 218, 255)',
+                          fontSize: 18,
+                          marginLeft: 20,
+                        }}
+                      >
+                        备注：简易程序的案件不在此列表
+                      </div>
+                    );
+                  },
+                  // props: {
+                  //   data: selected,
+                  //   indexs: indexs,
+                  // },
+                });
+              }}
+            >
+              <div className={styles.label}>
+                <img
+                  src={require('@/assets/images/administPunish/cfIcon.png')}
+                  alt=""
+                  className={styles.icon}
+                />
+                <span>行政处罚件数</span>
+              </div>
+              <div className={styles.desc}>
+                <div style={commonValueStyle}>
+                  187<span style={commonUnitStyle}>件</span>
+                </div>
+                <div>
+                  <span>环比</span>
+                  <span>
+                    <CaretUpOutlined style={{ color: 'rgb(29, 187, 138)' }} />
+                    <CaretDownOutlined style={{ color: 'red' }} />
+                  </span>
+                  <span className={styles.count}>0.25</span>
+                  <span>%</span>
+                </div>
+              </div>
+            </div>
+            <div
+              className={styles.item}
+              style={{marginTop:10}}
+              onClick={() => {
+                dispatch.push('AdministPunishList', {
+                  headerLeft: () => {
+                    return (
+                      <div
+                        style={{
+                          color: 'rgb(43, 218, 255)',
+                          fontSize: 18,
+                          marginLeft: 20,
+                        }}
+                      >
+                        备注：简易程序的案件不在此列表
+                      </div>
+                    );
+                  },
+                  // props: {
+                  //   data: selected,
+                  //   indexs: indexs,
+                  // },
+                });
+              }}
+            >
+              <div className={styles.label}>
+                <img
+                  src={require('@/assets/images/administPunish/fkIcon.png')}
+                  alt=""
+                  className={styles.icon}
+                />
+                <span>罚款金额</span>
+              </div>
+              <div className={styles.desc}>
+                <div style={commonValueStyle}>
+                  187<span style={commonUnitStyle}>万元</span>
+                </div>
+                <div>
+                  <span>环比</span>
+                  <span>
+                    <CaretUpOutlined style={{ color: 'rgb(29, 187, 138)' }} />
+                    <CaretDownOutlined style={{ color: 'red' }} />
+                  </span>
+                  <span className={styles.count}>0.25</span>
+                  <span>%</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className={styles.tendency}>
+          <div className={styles.title}>行政处罚趋势</div>
+          <div className={styles.unit}>单位：件</div>
+          <div style={{ width: '100%' }}>
+            <LineCharts
+              data={[
+                60, 50, 60, 70, 50, 70, 50, 60, 70, 50, 80, 50, 60, 70, 50, 60,
+                50, 60, 70, 50,
+              ]}
+              style={{ width: 1000, height: 130 }}
+            />
+          </div>
+        </div>
+      </div>
+      <div className={styles.bottomWarp}>
+        <div className={styles.breakTop}>
+          <div className={styles.title}>违法行为类型TOP5</div>
+          <div className={styles.content}>
+            {[{ percent: 80, value: 20, name: '占到经营' }].map(
+              (item, index) => {
+                return (
+                  <div className={styles.litsItem} key={index}>
+                    <Flex justify="space-between">
+                      <div className={styles.name}>{item.name}</div>
+                      <Space size={10} className={styles.numBox}>
+                        <div className={styles.num}>
+                          <span>{item?.value}</span>
+                          <span>件</span>
+                        </div>
+                        <div className={styles.num}>
+                          <span>{Number(item?.percent ?? 0).toFixed(2)}</span>
+                          <span>%</span>
+                        </div>
+                      </Space>
+                    </Flex>
+
+                    <Progress
+                      size={{ height: 15 }}
+                      percent={item?.percent}
+                      showInfo={false}
+                      strokeColor={{ from: '#79FFD1', to: '#00B9FF' }}
+                      status="active"
+                    />
+                  </div>
+                );
+              },
+            )}
+          </div>
+        </div>
+
+        <div className={styles.hightTop}>
+          <div className={styles.title}>办案数量TOP5</div>
+          <Tabs
+            style={{
+              background: 'transparent',
+              height: '30px',
+              marginTop: 10,
+            }}
+            itemStyle={{
+              borderRadius: '25px',
+              background: 'rgba(7, 50, 93, 0.8)',
+              fontSize: '16px',
+              marginLeft: 8,
+            }}
+            onChange={() => {}}
+            itemkey={'key'}
+            items={[
+              {
+                key: 'mainClass',
+                label: '全部',
+              },
+              {
+                key: 'subClass',
+                label: '中心城区',
+              },
+              {
+                key: 'subdivisionClass',
+                label: '城市新区',
+              },
+              {
+                key: 'subdiv2sionClass',
+                label: '郊区新区',
+              },
+            ]}
+          />
+          <div className={styles.content}>
+            {[{ percent: 80, value: 20, name: '高新区' }].map((item, index) => {
+              return (
+                <div className={styles.litsItem} key={index}>
+                  <Flex justify="space-between">
+                    <div className={styles.name}>{item.name}</div>
+                    <Space size={10} className={styles.numBox}>
+                      <div className={styles.num}>
+                        <span>{item?.value}</span>
+                        <span>件</span>
+                      </div>
+                      <div className={styles.num}>
+                        <span>{Number(item?.percent ?? 0).toFixed(2)}</span>
+                        <span>%</span>
+                      </div>
+                    </Space>
+                  </Flex>
+
+                  <Progress
+                    size={{ height: 15 }}
+                    percent={item?.percent}
+                    showInfo={false}
+                    strokeColor={{ from: '#79FFD1', to: '#00B9FF' }}
+                    status="active"
+                  />
+                </div>
+              );
+            })}
+          </div>
+        </div>
+
+        <div className={styles.transaction}>
+          <div className={styles.title}>程序类型</div>
+          <PieChart
+            style={{ width: '100%', flexDirection: 'column' }}
+            chartStyle={{ width: 180, height: 180 }}
+            labelClassName={styles.labelClassName}
+            labelStyle={{ height: 175, overflow: 'auto', width: 293 }}
+            data={pieData || []}
+            labelStyle={{ maxWidth: 100 }}
+            color={['#ff9b5d', '#ffe335']}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+export default memo(AdministPunish);
diff --git a/src/pages/GlobalModalServices/modals/AreaSynergy/TopSarch/index.less b/src/pages/GlobalModalServices/modals/AreaSynergy/TopSarch/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..1dbbc6add7c471cfa925978fa6314e1c27003042
--- /dev/null
+++ b/src/pages/GlobalModalServices/modals/AreaSynergy/TopSarch/index.less
@@ -0,0 +1,24 @@
+.container {
+    display: flex;
+    align-items: center;
+    height: 70px;
+
+    .rangWarp {
+        height: 100%;
+        display: flex;
+        align-items: center;
+        margin-left: 10px;
+    }
+
+    :global {
+        .ant-picker-outlined {
+            background: rgb(50, 111, 167);
+            border-radius: 25px;
+            border-color: transparent;
+        }
+
+        .ant-picker-outlined:focus-within {
+            background-color: rgb(50, 111, 167);
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/pages/GlobalModalServices/modals/AreaSynergy/TopSarch/index.tsx b/src/pages/GlobalModalServices/modals/AreaSynergy/TopSarch/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f73c3cad3f6688c4107fedaca1499931801c000a
--- /dev/null
+++ b/src/pages/GlobalModalServices/modals/AreaSynergy/TopSarch/index.tsx
@@ -0,0 +1,46 @@
+import Tabs from '@/components/Tabs'
+import styles from './index.less'
+import { DatePicker } from 'antd';
+const { RangePicker } = DatePicker;
+const TopSarch=({onChange}:{onChange:(val:any)=>void})=>{
+    return <div className={styles.container}>
+         <Tabs
+            style={{
+              background: 'transparent',
+              height: '30px',
+            
+            }}
+            itemStyle={{
+              borderRadius: '25px',
+              background: 'rgba(7, 50, 93, 0.8)',
+              fontSize: '16px',
+              marginLeft: 8,
+            }}
+            onChange={(e) => {
+                onChange(e)
+            }}
+            itemkey={'key'}
+            items={[
+              {
+                key: 'mainClass',
+                label: '今日',
+              },
+              {
+                key: 'subClass',
+                label: '本月',
+              },
+              {
+                key: 'subClass',
+                label: '本年',
+              },
+            
+            ]}
+          />
+          <div className={styles.rangWarp}>
+          <RangePicker />
+          </div>
+          
+    </div>
+}
+
+export default TopSarch
\ No newline at end of file
diff --git a/src/pages/GlobalModalServices/modals/AreaSynergy/index.less b/src/pages/GlobalModalServices/modals/AreaSynergy/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..cebc3a3414c0ba753b7e80d88cf3621c81368462
--- /dev/null
+++ b/src/pages/GlobalModalServices/modals/AreaSynergy/index.less
@@ -0,0 +1,8 @@
+.container {
+
+    width: 100%;
+    height: 695px;
+
+
+  
+}
\ No newline at end of file
diff --git a/src/pages/GlobalModalServices/modals/AreaSynergy/index.tsx b/src/pages/GlobalModalServices/modals/AreaSynergy/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..8c3e0f722316df81175d413a92cef594d78e5be4
--- /dev/null
+++ b/src/pages/GlobalModalServices/modals/AreaSynergy/index.tsx
@@ -0,0 +1,31 @@
+import DescriptionItem from '@/components/DescriptionItem';
+import PieChart from '@/components/PieChart';
+import Tabs from '@/components/Tabs';
+import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons';
+import { Flex, Progress, Space } from 'antd';
+import { memo, useMemo } from 'react';
+import { useGlobalModalServices } from '../../provider';
+import styles from './index.less';
+import LineCharts from '../AdministPunish/LineCharts';
+
+/**行政处罚modal */
+const AreaSynergy = () => {
+  const { dispatch } = useGlobalModalServices();
+  const commonValueStyle = {
+    background: 'linear-gradient(180deg, #AAFFF6 0%, #25BBFF 100%)',
+    WebkitBackgroundClip: 'text',
+    WebkitTextFillColor: 'transparent',
+    fontFamily: 'D-DIN',
+    fontSize: '36px',
+    fontWeight: 700,
+    lineHeight: 1.1,
+  };
+
+ 
+  return (
+    <div className={styles.container}>
+      
+    </div>
+  );
+};
+export default memo(AreaSynergy);
diff --git a/src/pages/GlobalModalServices/registry.tsx b/src/pages/GlobalModalServices/registry.tsx
index 031fff72c86a62c2c96adde450c4f57b57908f77..a20c66b8a422afde3b7b2acc6637ce9e2d6f2b29 100644
--- a/src/pages/GlobalModalServices/registry.tsx
+++ b/src/pages/GlobalModalServices/registry.tsx
@@ -1,13 +1,16 @@
 //@ts-nocheck
 import React from 'react';
+import AdministPunish from './modals/AdministPunish';
+import AdministPunishDetails from './modals/AdministPunish/AdministPunishDetails';
+import AdministPunishList from './modals/AdministPunish/AdministPunishList';
+import DataActivity from './modals/DataActivity';
+import DataBase from './modals/DataBase';
+import DataGovernance from './modals/DataGovernance';
 import DistrictIndex from './modals/DistrictIndex';
 import KeyArea from './modals/KeyArea';
 import KeyAreaDetail from './modals/KeyAreaDetail';
-import DataBase from './modals/DataBase';
-import DataActivity from './modals/DataActivity';
-import DataGovernance from './modals/DataGovernance';
 import { ModalMapping } from './type';
-
+import AreaSynergy from './modals/AreaSynergy';
 export type ModalKey = keyof typeof Registry;
 
 /** @see ModalMapping 弹窗注册在这里 */
@@ -67,7 +70,45 @@ const Registry = {
     },
     defaultProps: {},
     render: (props: any) => React.cloneElement(<DataGovernance />, props),
-  }
+  },
+  AdministPunish: {
+    defaultConfig: {
+      w: 1480,
+      h: 858,
+      title: '行政处罚',
+    },
+    defaultProps: {},
+    render: (props: any) => React.cloneElement(<AdministPunish />, props),
+  },
+  AdministPunishList: {
+    defaultConfig: {
+      w: 1480,
+      h: 858,
+      title: '行政处罚列表',
+    },
+    defaultProps: {},
+    render: (props: any) => React.cloneElement(<AdministPunishList />, props),
+  },
+  AdministPunishDetails: {
+    defaultConfig: {
+      w: 1480,
+      h: 858,
+      title: '行政处罚详情',
+    },
+    defaultProps: {},
+    render: (props: any) =>
+      React.cloneElement(<AdministPunishDetails />, props),
+  },
+  AreaSynergy: {
+    defaultConfig: {
+      w: 1480,
+      h: 858,
+      title: '日常巡查',
+    },
+    defaultProps: {},
+    render: (props: any) =>
+      React.cloneElement(<AreaSynergy />, props),
+  },
 };
 
 export default Registry;
diff --git a/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/LawEnforcement/index.tsx b/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/LawEnforcement/index.tsx
index 67b277355e0460b8af58fdb6f485ed5f230314b9..a70ee33cb5267236376a5811d932c77f16c4fad0 100644
--- a/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/LawEnforcement/index.tsx
+++ b/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/LawEnforcement/index.tsx
@@ -1,9 +1,13 @@
 import DescriptionItem from '@/components/DescriptionItem';
+import TopSarch from '@/pages/GlobalModalServices/modals/AdministPunish/TopSarch';
+import AreaTopSarch from '@/pages/GlobalModalServices/modals/AreaSynergy/TopSarch';
+import { useGlobalModalServices } from '@/pages/GlobalModalServices/provider';
 import { Flex } from 'antd';
 import React from 'react';
 import styles from './index.less';
 
 const LawEnforcement: React.FC = () => {
+  const { dispatch } = useGlobalModalServices();
   const commonValueStyle = {
     background: 'linear-gradient(180deg, #AAFFF6 0%, #25BBFF 100%)',
     WebkitBackgroundClip: 'text',
@@ -33,18 +37,46 @@ const LawEnforcement: React.FC = () => {
   return (
     <div className={styles.container}>
       <Flex vertical gap={0}>
-        <DescriptionItem
-          value={279}
-          name="11月行政许可办理"
-          unit="件"
-          valueStyle={commonValueStyle}
-          labelStyle={commonLabelStyle}
-          unitStyle={commonUnitStyle}
-          decimals={0}
-        />
+        <div
+          onClick={() => {
+            dispatch.push('AdministPunish', {
+              headerLeft: () => {
+                return <TopSarch onChange={(e) => {}} />;
+              },
+              // props: {
+              //   data: selected,
+              //   indexs: indexs,
+              // },
+            });
+          }}
+        >
+          <DescriptionItem
+            value={279}
+            name="11月行政许可办理"
+            unit="件"
+            valueStyle={commonValueStyle}
+            labelStyle={commonLabelStyle}
+            unitStyle={commonUnitStyle}
+            decimals={0}
+          />
+        </div>
+
         <Flex justify="space-between" style={{ marginTop: '28px' }}>
           <div>
-            <Flex align="center">
+            <Flex
+              align="center"
+              onClick={() => {
+                dispatch.push('AreaSynergy', {
+                  headerLeft: () => {
+                    return <AreaTopSarch onChange={(e) => {}} />;
+                  },
+                  // props: {
+                  //   data: selected,
+                  //   indexs: indexs,
+                  // },
+                });
+              }}
+            >
               <div className={styles.val}>487</div>
               <div className={styles.unit}>件</div>
               <div className={styles.val}>701.32</div>